/* AUTOCENTER KYIV — Canonical Article Design System v1.0
   Stable component registry after BATCH #001–#004.
   Source of truth: child theme.
   Scope rule: presentation selectors remain below .ac-article.
   Legacy classes are allowed only as explicit compatibility hooks for immutable JS. */

.ac-article{
  --ac-red:#d71920;
  --ac-red-dark:#a91117;
  --ac-ink:#252932;
  --ac-muted:#626b76;
  --ac-line:#dfe4e9;
  --ac-soft:#f5f7f9;
  --ac-dark:#171a20;
  --ac-green:#28734b;
  --ac-amber:#b46a16;
  --ac-blue:#315f88;
  color:var(--ac-ink);
  background:#fff;
  font-family:Tahoma,Geneva,Arial,sans-serif;
  line-height:1.68;
  overflow:visible;
}
.ac-article,.ac-article *{box-sizing:border-box}
.ac-article img{max-width:100%;height:auto}
.ac-article a{color:var(--ac-red-dark);text-underline-offset:3px}
.ac-article p,.ac-article .ac-copy{margin:0 0 16px;color:var(--ac-muted);font-size:16px;line-height:1.75}
.ac-article .ac-container{width:min(1040px,calc(100% - 40px));margin-inline:auto}
.ac-article .ac-section{padding:64px 0;background:#fff}
.ac-article .ac-section--soft{background:linear-gradient(180deg,#f8f9fb,#f2f4f7)}
.ac-article .ac-section--dark{background:radial-gradient(circle at 84% 12%,rgba(215,25,32,.16),transparent 28%),linear-gradient(145deg,#11151b,#252b34);color:#fff}
.ac-article .ac-section--dark .ac-h2,.ac-article .ac-section--dark .ac-h3,.ac-article .ac-section--dark h2,.ac-article .ac-section--dark h3{color:#fff}
.ac-article .ac-section--dark p,.ac-article .ac-section--dark .ac-intro,.ac-article .ac-section--dark .ac-copy{color:#dce1e7}
.ac-article .ac-section--intro{padding-top:52px}

.ac-article .ac-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;color:var(--ac-red);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ac-article .ac-eyebrow:before{content:"";width:28px;height:3px;background:currentColor;border-radius:99px}
.ac-article .ac-h1{margin:0 0 18px;color:#fff;font-size:clamp(38px,5vw,64px);line-height:1.04;font-weight:900;letter-spacing:-.025em;max-width:980px}
.ac-article .ac-h2{margin:0 0 20px;color:var(--ac-ink);font-size:clamp(28px,3vw,40px);line-height:1.16;font-weight:850;letter-spacing:-.018em;max-width:980px}
.ac-article .ac-h3{margin:0 0 10px;color:var(--ac-ink);font-size:21px;line-height:1.35;font-weight:800}
.ac-article .ac-h5{margin:30px 0 10px;color:var(--ac-ink);font-size:18px;line-height:1.35;font-weight:800;text-align:center}
.ac-article .ac-intro,.ac-article .ac-answer{font-size:18px;line-height:1.72;color:#4f5965;max-width:900px}

.ac-article .ac-hero{position:relative;left:50%;width:100vw;max-width:none;transform:translateX(-50%);min-height:560px;display:flex;align-items:center;color:#fff;overflow:hidden;background:#12161c}
.ac-article .ac-hero__media{position:absolute;inset:0;margin:0}
.ac-article .ac-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ac-article .ac-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,14,.95),rgba(8,10,14,.78) 54%,rgba(8,10,14,.30))}
.ac-article .ac-hero>.ac-container{position:relative;z-index:2}
.ac-article .ac-hero__inner{position:relative;z-index:2;padding:72px 0;max-width:980px}
.ac-article .ac-hero__content{max-width:760px}
.ac-article .ac-hero__title{margin:0 0 12px;color:#fff;font-size:clamp(34px,4.5vw,58px);font-weight:900;line-height:1.06;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ac-article .ac-hero__subtitle{margin:0 0 18px;color:#eef1f4;font-size:clamp(18px,2vw,24px);font-weight:750;line-height:1.35}
.ac-article .ac-hero__intro{margin:0 0 12px;color:rgba(255,255,255,.93);font-size:16px;line-height:1.75}
.ac-article .ac-hero--background{background-image:linear-gradient(90deg,rgba(8,10,14,.92),rgba(8,10,14,.74) 58%,rgba(8,10,14,.36)),var(--ac-hero-image);background-position:center;background-size:cover;background-repeat:no-repeat}
.ac-article .ac-hero--background>.ac-hero__inner{width:min(1040px,calc(100% - 40px));margin-inline:auto}
.ac-article .ac-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.ac-article .ac-badge{display:inline-flex;align-items:center;min-height:34px;padding:7px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.10);color:#fff;font-size:13px;font-weight:700;backdrop-filter:blur(3px)}
.ac-article .ac-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ac-article .ac-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border-radius:7px;text-decoration:none!important;border:1px solid var(--ac-line);font-weight:800;line-height:1.2;transition:transform .15s ease,box-shadow .15s ease}
.ac-article .ac-btn:hover{transform:translateY(-1px)}
.ac-article .ac-btn--primary{background:var(--ac-red);border-color:var(--ac-red);color:#fff!important;box-shadow:0 8px 20px rgba(215,25,32,.22)}
.ac-article .ac-btn--ghost{background:#fff;color:var(--ac-ink)!important}
.ac-article .ac-lang{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;color:#e1e5e9;font-size:13px}
.ac-article .ac-lang a{color:#fff}

.ac-article .ac-grid,.ac-article .ac-grid-2,.ac-article .ac-grid-3,.ac-article .ac-grid-4,.ac-article .ac-choice-grid,.ac-article .ac-expert__grid,.ac-article .ac-system__grid,.ac-article .ac-engine-types,.ac-article .ac-proof,.ac-article .ac-reviews,.ac-article .ac-services{display:grid;gap:16px;margin:24px 0}
.ac-article .ac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ac-article .ac-choice-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ac-article .ac-grid-2,.ac-article .ac-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
.ac-article .ac-grid-3,.ac-article .ac-expert__grid,.ac-article .ac-engine-types,.ac-article .ac-proof,.ac-article .ac-services{grid-template-columns:repeat(3,minmax(0,1fr))}
.ac-article .ac-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ac-article .ac-card,.ac-article .ac-box,.ac-article .ac-price,.ac-article .ac-pricebox,.ac-article .ac-choice,.ac-article .ac-factor,.ac-article .ac-signal,.ac-article .ac-type,.ac-article .ac-brand,.ac-article .ac-decision,.ac-article .ac-service,.ac-article .ac-model-card,.ac-article .ac-result,.ac-article .ac-route,.ac-article .ac-system__item,.ac-article .ac-expert__item,.ac-article .ac-engine,.ac-article .ac-bullet,.ac-article .ac-proof-item,.ac-article .ac-review{background:#fff;border:1px solid var(--ac-line);border-radius:10px;padding:18px;box-shadow:0 4px 14px rgba(26,32,44,.045)}
.ac-article .ac-section--soft .ac-card,.ac-article .ac-section--soft .ac-box,.ac-article .ac-section--soft .ac-factor,.ac-article .ac-section--soft .ac-choice,.ac-article .ac-section--soft .ac-choice__item,.ac-article .ac-section--soft .ac-model,.ac-article .ac-section--soft .ac-route{background:#fff}
.ac-article .ac-section--dark .ac-card,.ac-article .ac-section--dark .ac-box,.ac-article .ac-section--dark .ac-choice,.ac-article .ac-section--dark .ac-decision{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17);box-shadow:none}
.ac-article .ac-section--dark .ac-card p,.ac-article .ac-section--dark .ac-box p,.ac-article .ac-section--dark .ac-choice p,.ac-article .ac-section--dark .ac-decision p{color:#dce1e7}
.ac-article .ac-card__tag,.ac-article .ac-price__tag,.ac-article .ac-choice__tag,.ac-article .ac-focus__tag,.ac-article .ac-model__tag,.ac-article .ac-route__tag{display:inline-flex;margin-bottom:10px;padding:5px 9px;border-radius:999px;background:#fff0f1;color:var(--ac-red-dark);font-size:12px;font-weight:850}
.ac-article .ac-choice--accent{border-color:rgba(215,25,32,.45);box-shadow:0 8px 22px rgba(215,25,32,.08)}

.ac-article .ac-note{margin:22px 0;padding:18px 20px;border-left:4px solid var(--ac-red);border-radius:0 8px 8px 0;background:#fff7f7}
.ac-article .ac-note--warning{border-left-color:var(--ac-amber);background:#fff9ef}
.ac-article .ac-note--success{border-left-color:var(--ac-green);background:#f1fbf5}
.ac-article .ac-note p:last-child{margin-bottom:0}
.ac-article .ac-list{margin:16px 0;padding-left:22px}
.ac-article .ac-list li{margin:7px 0;color:var(--ac-muted)}
.ac-article .ac-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;margin:24px 0}
.ac-article .ac-links{display:flex;flex-wrap:wrap;gap:10px 16px;margin:18px 0}
.ac-article .ac-link{font-weight:700}

.ac-article .ac-process,.ac-article .ac-steps{margin:24px 0}
.ac-article .ac-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.ac-article .ac-step__n,.ac-article .ac-step-num,.ac-article .ac-check__n,.ac-article .ac-decision__n,.ac-article .ac-signal__icon,.ac-article .ac-type__icon,.ac-article .ac-service__icon,.ac-article .ac-result__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;min-width:38px;height:38px;border-radius:50%;background:var(--ac-red);color:#fff;font-size:14px;font-weight:900;line-height:1}
.ac-article .ac-step-body{flex:1}
.ac-article .ac-step-body strong{display:block;margin-bottom:4px;color:var(--ac-ink)}
.ac-article .ac-step-body p{margin-bottom:0;font-size:15px}
.ac-article .ac-check{margin:22px 0}
.ac-article .ac-check__row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--ac-line)}
.ac-article .ac-check__row:last-child{border-bottom:0}
.ac-article .ac-check__title{font-weight:800;color:var(--ac-ink)}

.ac-article .ac-signals,.ac-article .ac-models{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.ac-article .ac-models{gap:8px}
.ac-article .ac-model-chip{display:inline-flex;padding:7px 10px;border-radius:999px;background:var(--ac-soft);border:1px solid var(--ac-line);font-size:13px;font-weight:700;color:#49515b}
.ac-article .ac-model-card{display:block}
.ac-article .ac-brand__title{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-weight:850;color:var(--ac-ink)}
.ac-article .ac-brand__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--ac-red);color:#fff;font-size:12px;font-weight:900}
.ac-article .ac-focus,.ac-article .ac-expert,.ac-article .ac-system{margin:22px 0;padding:20px;border:1px solid var(--ac-line);border-radius:10px;background:#fafbfc}
.ac-article .ac-pricebox,.ac-article .ac-price{border-top:3px solid var(--ac-red)}
.ac-article .ac-pricebox__main,.ac-article .ac-price__title{font-size:20px!important;font-weight:850;color:var(--ac-ink)!important;margin-bottom:8px!important}
.ac-article .ac-pricebox__sub,.ac-article .ac-price__text{margin-bottom:0!important}
.ac-article .ac-result__icon{margin-bottom:10px}
.ac-article .ac-tag{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--ac-soft);border:1px solid var(--ac-line);color:#4d5661;font-size:12px;font-weight:800}
.ac-article .ac-msg-block{margin:24px 0;text-align:center;padding:16px 18px;border-radius:10px;background:#f8f9fb;border:1px solid var(--ac-line)}
.ac-article .ac-msg-block p:last-child{margin-bottom:0}
.ac-article .ac-decision--service{border-top:3px solid var(--ac-blue)}
.ac-article .ac-decision--local{border-top:3px solid var(--ac-green)}
.ac-article .ac-decision--rebuild{border-top:3px solid var(--ac-amber)}
.ac-article .ac-decision--replace{border-top:3px solid var(--ac-red)}
.ac-article .ac-service--diagnostic{border-top:3px solid var(--ac-blue)}
.ac-article .ac-service--repair{border-top:3px solid var(--ac-green)}
.ac-article .ac-service--replace{border-top:3px solid var(--ac-red)}

.ac-article .ac-table-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--ac-line);border-radius:10px;background:#fff}
.ac-article .ac-table{width:100%;border-collapse:collapse;min-width:620px}
.ac-article .ac-table th,.ac-article .ac-table td{padding:13px 14px;border-bottom:1px solid var(--ac-line);text-align:left;vertical-align:top}
.ac-article .ac-table th{background:#f2f4f6;color:var(--ac-ink);font-weight:850}
.ac-article .ac-table tr:last-child td{border-bottom:0}

.ac-article .ac-author{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:26px 0;padding:18px;border:1px solid var(--ac-line);border-radius:10px;background:#fafbfc}
.ac-article .ac-author__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--ac-dark);color:#fff;font-weight:900}
.ac-article .ac-cta,.ac-article .ac-dark-cta{margin:26px 0;padding:24px;border-radius:10px;background:var(--ac-dark);color:#fff}
.ac-article .ac-cta p,.ac-article .ac-dark-cta p{color:#e0e5ea}
.ac-article .ac-contact{padding-top:44px;padding-bottom:64px;background:#fff}
.ac-article .ac-contact-form{width:100%;max-width:1040px;margin:0 auto}
.ac-article .ac-divider{width:72px;height:3px;background:var(--ac-red);margin:8px auto 24px;border-radius:99px}
.ac-article .ac-proof{text-align:center}
.ac-article .ac-proof-num{font-size:clamp(26px,4vw,38px);font-weight:900;color:var(--ac-red);line-height:1}
.ac-article .ac-proof-label{font-size:13px;color:var(--ac-muted);margin-top:7px;line-height:1.45}
.ac-article .ac-bullets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.ac-article .ac-guarantee{display:flex;gap:14px;align-items:center;margin:24px 0;padding:18px 20px;border:1px solid #b7dec8;border-radius:10px;background:#f1fbf5}
.ac-article .ac-guarantee-icon{font-size:34px;flex-shrink:0}
.ac-article .ac-guarantee-body p{margin-bottom:0}
.ac-article .ac-review-stars{color:var(--ac-red);margin-bottom:7px}
.ac-article .ac-review-text{font-style:italic}
.ac-article .ac-review-name{font-size:13px;font-weight:800;color:#525b65}
.ac-article .ac-services a{text-decoration:none!important;color:inherit;text-align:center}
.ac-article .ac-service-thumb{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px;border-radius:10px;background:linear-gradient(135deg,#f7f7f7,#e9edf1);border:1px solid var(--ac-line)}
.ac-article .ac-service-ico{font-size:38px;color:var(--ac-red)}
.ac-article .ac-service-title{font-size:16px;font-weight:850;color:var(--ac-red-dark)}

@media (max-width:900px){
  .ac-article .ac-section{padding:54px 0}
  .ac-article .ac-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-article .ac-grid,.ac-article .ac-choice-grid,.ac-article .ac-grid-3,.ac-article .ac-expert__grid,.ac-article .ac-engine-types,.ac-article .ac-proof,.ac-article .ac-services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-article .ac-hero{min-height:500px}
}
@media (max-width:680px){
  .ac-article .ac-container,.ac-article .ac-hero--background>.ac-hero__inner{width:min(100% - 30px,1040px)}
  .ac-article .ac-section{padding:46px 0}
  .ac-article .ac-section--intro{padding-top:38px}
  .ac-article .ac-h1{font-size:clamp(34px,10vw,48px)}
  .ac-article .ac-h2{font-size:clamp(26px,8vw,34px)}
  .ac-article .ac-hero{min-height:460px}
  .ac-article .ac-hero__inner{padding:54px 0}
  .ac-article .ac-grid,.ac-article .ac-choice-grid,.ac-article .ac-grid-2,.ac-article .ac-grid-3,.ac-article .ac-grid-4,.ac-article .ac-expert__grid,.ac-article .ac-engine-types,.ac-article .ac-proof,.ac-article .ac-reviews,.ac-article .ac-services,.ac-article .ac-split,.ac-article .ac-bullets{grid-template-columns:1fr}
  .ac-article .ac-badges{gap:7px}
  .ac-article .ac-badge{font-size:12px}
  .ac-article .ac-actions,.ac-article .ac-actions .ac-btn{width:100%}
  .ac-article .ac-btn{width:100%}
  .ac-article .ac-author{grid-template-columns:1fr;text-align:left}
}


.ac-article .ac-hero p{
  max-width:800px;
  color:#eef2f5;
  font-size:18px;
}
.ac-article .ac-hero .ac-eyebrow{color:#ff3037}
.ac-article .ac-hero .ac-badge{background:rgba(8,10,14,.46)}
.ac-article .ac-hero .ac-badge:before{
  content:"✓";
  margin-right:7px;
  color:#ff7379;
  font-weight:900;
}

.ac-article .ac-answer{
  position:relative;
  z-index:4;
  max-width:1040px;
  margin:-48px auto 0;
  padding:29px;
  border:1px solid var(--ac-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 20px 50px rgba(17,24,39,.13);
  color:var(--ac-ink);
}
.ac-article .ac-answer p{
  margin-bottom:0;
  color:#353b44;
  font-size:18px;
}

.ac-article .ac-cta .ac-h2,
.ac-article .ac-dark-cta .ac-h2,
.ac-article .ac-cta h2,
.ac-article .ac-dark-cta h2{
  color:#fff;
}
.ac-article .ac-cta p,
.ac-article .ac-dark-cta p{color:#dde2e8}

.ac-article .ac-contact{
  background:var(--ac-soft);
}
.ac-article .ac-contact-form{
  padding:20px;
  border:1px solid var(--ac-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(18,24,32,.06);
}

/* Form Maker internals remain functionally untouched. Any future visual adapter must be explicit and global. */

@media (max-width:680px){
  .ac-article .ac-answer{
    margin-top:-32px;
    padding:20px;
    border-radius:15px;
  }
}


/* A pale note inside a dark section must not inherit the
   section's light paragraph color. */
.ac-article .ac-section--dark .ac-note{
  background:#fff7f7;
  border-left-color:var(--ac-red);
  color:var(--ac-ink);
}
.ac-article .ac-section--dark .ac-note p,
.ac-article .ac-section--dark .ac-note li,
.ac-article .ac-section--dark .ac-note strong{
  color:var(--ac-ink);
}
.ac-article .ac-section--dark .ac-note a{
  color:var(--ac-red-dark);
}

/* Related services are real content cards, not an inline
   run of red anchor text. */
.ac-article .ac-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:24px 0 0;
}
.ac-article .ac-link{
  display:grid;
  align-content:start;
  gap:6px;
  min-width:0;
  padding:18px 20px;
  border:1px solid var(--ac-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(19,24,32,.045);
  color:var(--ac-ink);
  text-decoration:none!important;
  font-weight:400;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ac-article .ac-link:hover,
.ac-article .ac-link:focus-visible{
  border-color:rgba(215,25,32,.42);
  box-shadow:0 10px 24px rgba(19,24,32,.08);
  transform:translateY(-1px);
}
.ac-article .ac-link small{
  display:block;
  margin:0;
  color:var(--ac-red-dark);
  font-size:12px;
  font-weight:850;
  line-height:1.35;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.ac-article .ac-link strong{
  display:block;
  margin:0;
  color:var(--ac-ink);
  font-size:17px;
  font-weight:850;
  line-height:1.35;
}
.ac-article .ac-link span{
  display:block;
  margin:0;
  color:var(--ac-muted);
  font-size:15px;
  font-weight:400;
  line-height:1.55;
}
@media (max-width:680px){
  .ac-article .ac-links{grid-template-columns:1fr}
  .ac-article .ac-link{padding:16px}
}

/* 1. Light expert/system panels inside dark sections.
   These components intentionally use a light surface, so their
   typography must not inherit the dark-section light text color. */
.ac-article .ac-section--dark .ac-expert,
.ac-article .ac-section--dark .ac-system{
  background:#f7f8fa;
  border-color:var(--ac-line);
  color:var(--ac-ink);
}

.ac-article .ac-section--dark .ac-expert .ac-h3,
.ac-article .ac-section--dark .ac-expert h3,
.ac-article .ac-section--dark .ac-system .ac-h3,
.ac-article .ac-section--dark .ac-system h3,
.ac-article .ac-section--dark .ac-expert__item .ac-h3,
.ac-article .ac-section--dark .ac-expert__item h3,
.ac-article .ac-section--dark .ac-system__item .ac-h3,
.ac-article .ac-section--dark .ac-system__item h3{
  color:var(--ac-ink);
}

.ac-article .ac-section--dark .ac-expert p,
.ac-article .ac-section--dark .ac-expert li,
.ac-article .ac-section--dark .ac-system p,
.ac-article .ac-section--dark .ac-system li{
  color:var(--ac-muted);
}

.ac-article .ac-section--dark .ac-expert__item,
.ac-article .ac-section--dark .ac-system__item{
  background:#fff;
  border-color:var(--ac-line);
  color:var(--ac-ink);
  box-shadow:0 4px 14px rgba(26,32,44,.045);
}

/* 2. Light route cards inside dark sections. */
.ac-article .ac-section--dark .ac-route{
  background:#fff;
  border-color:var(--ac-line);
  color:var(--ac-ink);
  box-shadow:0 4px 14px rgba(26,32,44,.045);
}

.ac-article .ac-section--dark .ac-route .ac-h3,
.ac-article .ac-section--dark .ac-route h3{
  color:var(--ac-ink);
}

.ac-article .ac-section--dark .ac-route p{
  color:var(--ac-muted);
}

.ac-article .ac-section--dark .ac-route a{
  color:var(--ac-red-dark);
}

/* 3. Correct the three-child ac-check row layout.
   The number occupies its own fixed 38px column; title and
   explanation stay in the content column. */
.ac-article .ac-check__row{
  grid-template-columns:38px minmax(0,1fr);
  column-gap:14px;
  row-gap:4px;
}

.ac-article .ac-check__row > .ac-check__n{
  grid-column:1;
  grid-row:1 / span 2;
  width:38px;
  min-width:38px;
  max-width:38px;
  justify-self:start;
  align-self:start;
}

.ac-article .ac-check__row > .ac-check__title{
  grid-column:2;
  grid-row:1;
  align-self:center;
}

.ac-article .ac-check__row > p{
  grid-column:2;
  grid-row:2;
  margin:0;
}

/* 4. Normalize numbered process steps into consistent full-width
   cards instead of content-width boxes. */
.ac-article .ac-process{
  display:grid;
  gap:12px;
}

.ac-article .ac-process .ac-step{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:14px;
  align-items:start;
  width:100%;
  margin:0;
  padding:16px 18px;
  border:1px solid var(--ac-line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 14px rgba(26,32,44,.045);
}

.ac-article .ac-process .ac-step > .ac-step__n,
.ac-article .ac-process .ac-step > .ac-step-num{
  grid-column:1;
  grid-row:1 / span 2;
  width:38px;
  min-width:38px;
  max-width:38px;
  justify-self:start;
}

.ac-article .ac-process .ac-step > div{
  grid-column:2;
  min-width:0;
}

.ac-article .ac-process .ac-step .ac-h3,
.ac-article .ac-process .ac-step h3{
  margin:0 0 4px;
  color:var(--ac-ink);
}

.ac-article .ac-process .ac-step p{
  margin:0;
  color:var(--ac-muted);
}

@media (max-width:680px){
  .ac-article .ac-process .ac-step{
    padding:14px;
  }
}

/* Compact data/status cards with a label + explanation. */
.ac-article .ac-data-card > strong{
  display:block;
  margin:0 0 7px;
  color:var(--ac-ink);
  font-size:16px;
  font-weight:850;
  line-height:1.35;
}
.ac-article .ac-data-card > span{
  display:block;
  color:var(--ac-muted);
  font-size:15px;
  line-height:1.55;
}

/* Dark informational note used for a short "describe the symptom" panel. */
.ac-article .ac-note--dark{
  border-left-color:var(--ac-red);
  background:linear-gradient(145deg,#171b21,#252a32);
  color:#fff;
}
.ac-article .ac-note--dark .ac-h3,
.ac-article .ac-note--dark h3{
  color:#fff;
}
.ac-article .ac-note--dark p,
.ac-article .ac-note--dark li{
  color:#dce1e7;
}

/* Reusable symptom cards: compact and easy to scan. */
.ac-article .ac-symptom-card{
  min-height:0;
  padding:15px 17px;
  border-left:3px solid var(--ac-red);
  font-weight:700;
  line-height:1.5;
}

/* Plain process steps have no numbered/icon column. */
.ac-article .ac-process .ac-step--plain{
  grid-template-columns:minmax(0,1fr);
}
.ac-article .ac-process .ac-step--plain > *{
  grid-column:1;
}
.ac-article .ac-process .ac-step--plain > .ac-h3,
.ac-article .ac-process .ac-step--plain > h3{
  grid-row:auto;
}
.ac-article .ac-process .ac-step--plain > p{
  grid-row:auto;
}

/* PDR/route cards may use semantic small/strong/span children
   instead of dedicated subcomponent classes. */
.ac-article .ac-route > small{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 8px;
  padding:5px 9px;
  border-radius:999px;
  background:#fff0f1;
  color:var(--ac-red-dark);
  font-size:12px;
  font-weight:850;
  line-height:1.35;
  text-transform:uppercase;
}
.ac-article .ac-route > strong{
  display:block;
  margin:0 0 7px;
  color:var(--ac-ink);
  font-size:17px;
  font-weight:850;
  line-height:1.35;
}
.ac-article .ac-route > span{
  display:block;
  color:var(--ac-muted);
  font-size:15px;
  line-height:1.55;
}

/* Delivery price/logistics formula. */
.ac-article .ac-formula{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:24px 0;
  padding:18px;
  border:1px solid var(--ac-line);
  border-radius:12px;
  background:#fff;
}
.ac-article .ac-formula__item{
  padding:10px 13px;
  border:1px solid var(--ac-line);
  border-radius:9px;
  background:#f7f8fa;
  color:var(--ac-ink);
  font-weight:750;
  line-height:1.4;
}
.ac-article .ac-formula__sign{
  color:var(--ac-red);
  font-size:20px;
  font-weight:900;
}
.ac-article .ac-formula__result{
  border-color:rgba(215,25,32,.32);
  background:#fff0f1;
  color:var(--ac-red-dark);
}

/* Simple text-only related links stay compact even when they do
   not contain small/strong/span sub-elements. */
.ac-article .ac-links > .ac-link{
  min-height:58px;
}
.ac-article .ac-links > .ac-link--simple{
  display:flex;
  align-items:center;
  color:var(--ac-ink);
  font-weight:800;
}

/* Dark sections can contain light data/type cards. */
.ac-article .ac-section--dark .ac-data-card,
.ac-article .ac-section--dark .ac-type-card{
  background:#fff;
  border-color:var(--ac-line);
  color:var(--ac-ink);
}
.ac-article .ac-section--dark .ac-data-card > strong,
.ac-article .ac-section--dark .ac-type-card > strong{
  color:var(--ac-ink);
}
.ac-article .ac-section--dark .ac-data-card > span,
.ac-article .ac-section--dark .ac-type-card p,
.ac-article .ac-section--dark .ac-type-card li{
  color:var(--ac-muted);
}

@media (max-width:680px){
  .ac-article .ac-formula{
    display:grid;
    grid-template-columns:1fr;
  }
  .ac-article .ac-formula__sign{
    text-align:center;
    transform:rotate(90deg);
  }
}

/* Generic ac-list items used inside dark cards were still
   inheriting the global muted text token, which is intended
   for light surfaces. Keep the secondary hierarchy, but raise
   contrast on dark card surfaces. */
.ac-article .ac-section--dark .ac-card .ac-list li,
.ac-article .ac-section--dark .ac-box .ac-list li,
.ac-article .ac-section--dark .ac-choice .ac-list li,
.ac-article .ac-section--dark .ac-decision .ac-list li{
  color:#e3e8ee;
}

.ac-article .ac-section--dark .ac-card .ac-list li::marker,
.ac-article .ac-section--dark .ac-box .ac-list li::marker,
.ac-article .ac-section--dark .ac-choice .ac-list li::marker,
.ac-article .ac-section--dark .ac-decision .ac-list li::marker{
  color:#aeb9c6;
}

/* Also protect simple secondary text nodes used in dark cards
   that are not wrapped in .ac-copy. */
.ac-article .ac-section--dark .ac-card > span:not(.ac-card__tag),
.ac-article .ac-section--dark .ac-box > span,
.ac-article .ac-section--dark .ac-choice > span,
.ac-article .ac-section--dark .ac-decision > span{
  color:#e3e8ee;
}

.ac-article .ac-visual-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:24px 0;
}
.ac-article .ac-visual-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
  padding:20px 16px;
  text-align:center;
  border:1px solid var(--ac-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(19,24,32,.045);
}
.ac-article .ac-visual-card svg{
  flex:0 0 auto;
}
.ac-article .ac-visual-card__title{
  margin:2px 0 0;
  color:var(--ac-ink);
  font-weight:850;
  line-height:1.35;
}
.ac-article .ac-visual-card__desc{
  margin:0;
  color:var(--ac-muted);
  font-size:14px;
  line-height:1.55;
}

.ac-article .ac-compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:24px 0;
}
.ac-article .ac-compare__card{
  min-width:0;
  padding:18px;
  border:1px solid var(--ac-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(19,24,32,.045);
}
.ac-article .ac-compare__card h4{
  margin:0 0 12px;
  color:var(--ac-ink);
  font-size:16px;
  line-height:1.4;
}
.ac-article .ac-compare__card ul{
  margin:0;
  padding-left:20px;
  color:var(--ac-muted);
  line-height:1.7;
}

.ac-article .ac-note__title{
  margin:0 0 8px;
  color:var(--ac-ink);
  font-weight:850;
}
.ac-article .ac-step__body{
  min-width:0;
}
.ac-article .ac-step__body > strong{
  display:block;
  margin:0 0 4px;
  color:var(--ac-ink);
  font-weight:850;
}
.ac-article .ac-step__body p{
  margin:0;
  color:var(--ac-muted);
}

/* Explicit stable card rules for statistic/review components.
   They replace reliance on older broad selector groups. */
.ac-article .ac-proof-item,
.ac-article .ac-review{
  min-width:0;
  padding:18px;
  border:1px solid var(--ac-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(19,24,32,.045);
}
.ac-article .ac-proof-item{
  text-align:center;
}

@media (max-width:860px){
  .ac-article .ac-visual-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:680px){
  .ac-article .ac-visual-grid,
  .ac-article .ac-compare{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   COMPONENT: FAQ
   Canonical presentation + explicit immutable-JS adapters
   ========================================================= */

/* Canonical wrapper. */
.ac-article .ac-faq{
  display:grid;
  gap:12px;
  width:100%;
  max-width:1000px;
  margin:24px 0;
}

/* One visual item. .ac-faq-item is a compatibility hook used by older
   migrated pages; it receives the same presentation, never a separate design. */
.ac-article .ac-faq__item,
.ac-article .ac-faq-item{
  width:100%;
  margin:0;
  overflow:hidden;
  border:1px solid var(--ac-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(19,24,32,.045);
}

/* Canonical question row + legacy JS-hook alias. */
.ac-article .ac-faq__q,
.ac-article button.ac-faq-q{
  box-sizing:border-box;
  width:100%;
  min-height:62px;
  margin:0;
  padding:17px 20px;
  border:0;
  outline:0;
  background:#f7f8fa;
  color:var(--ac-ink);
  font:inherit;
  font-size:16px;
  font-weight:800;
  line-height:1.45;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.ac-article .ac-faq__q:hover,
.ac-article .ac-faq__q:focus-visible,
.ac-article button.ac-faq-q:hover,
.ac-article button.ac-faq-q:focus-visible{
  background:#f2f4f7;
}

.ac-article .ac-faq__q::-webkit-details-marker{
  display:none;
}

/* Native details/summary +/- control. */
.ac-article .ac-faq__q > i{
  position:relative;
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin-left:auto;
  border-radius:8px;
  background:#fff0f1;
}

.ac-article .ac-faq__q > i::before,
.ac-article .ac-faq__q > i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:13px;
  height:2px;
  background:var(--ac-red);
  transform:translate(-50%,-50%);
}

.ac-article .ac-faq__q > i::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.ac-article details.ac-faq__item[open] > .ac-faq__q > i{
  background:var(--ac-red);
}

.ac-article details.ac-faq__item[open] > .ac-faq__q > i::before{
  background:#fff;
}

.ac-article details.ac-faq__item[open] > .ac-faq__q > i::after{
  display:none;
}

/* JS FAQ with an explicit marker span. */
.ac-article button.ac-faq__q > span:last-child,
.ac-article button.ac-faq-q > span:last-child{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin-left:auto;
  border-radius:8px;
  background:#fff0f1;
  color:var(--ac-red);
  font-size:20px;
  font-weight:800;
  line-height:1;
}

/* Legacy JS FAQ without a marker span. */
.ac-article button.ac-faq-q:not(:has(> span:last-child)){
  position:relative;
  padding-right:62px;
}

.ac-article button.ac-faq-q:not(:has(> span:last-child))::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:#fff0f1;
  color:var(--ac-red);
  font-size:20px;
  font-weight:800;
  line-height:1;
}

.ac-article button.ac-faq-q.open:not(:has(> span:last-child))::after,
.ac-article .tc-faq__item.open > button.ac-faq-q:not(:has(> span:last-child))::after{
  content:"−";
  background:var(--ac-red);
  color:#fff;
}

.ac-article button.ac-faq__q.open > span:last-child,
.ac-article button.ac-faq-q.open > span:last-child,
.ac-article .tc-faq__item.open > button.ac-faq__q > span:last-child,
.ac-article .tc-faq__item.open > button.ac-faq-q > span:last-child{
  background:var(--ac-red);
  color:#fff;
}

/* One answer presentation for native and JS accordions. */
.ac-article .ac-faq__a,
.ac-article .ac-faq-a{
  box-sizing:border-box;
  width:100%;
  padding:16px 20px 18px;
  border-top:1px solid #edf0f3;
  background:#fff;
  color:var(--ac-muted);
  font-size:16px;
  line-height:1.7;
}

.ac-article .ac-faq__a > :first-child,
.ac-article .ac-faq-a > :first-child{
  margin-top:0;
}

.ac-article .ac-faq__a > :last-child,
.ac-article .ac-faq-a > :last-child{
  margin-bottom:0;
}

/* JS implementation A: the answer itself receives .open. */
.ac-article .ac-faq-a{
  display:none;
}

.ac-article .ac-faq-a.open{
  display:block;
}

/* JS implementation B (Elantra/Sonata): immutable JS toggles .open on parent. */
.ac-article .tc-faq__item.ac-faq__item > .ac-faq__a{
  display:none;
}

.ac-article .tc-faq__item.ac-faq__item.open > .ac-faq__a{
  display:block;
}

@media (max-width:680px){
  .ac-article .ac-faq{
    gap:10px;
  }

  .ac-article .ac-faq__q,
  .ac-article button.ac-faq-q{
    min-height:58px;
    padding:15px 16px;
    font-size:15px;
  }

  .ac-article button.ac-faq-q:not(:has(> span:last-child)){
    padding-right:56px;
  }

  .ac-article button.ac-faq-q:not(:has(> span:last-child))::after{
    right:14px;
  }

  .ac-article .ac-faq__a,
  .ac-article .ac-faq-a{
    padding:14px 16px 16px;
    font-size:15px;
  }
}

/* =========================================================
   COMPATIBILITY REGISTRY
   Only functional hooks required by immutable legacy JS belong here.
   No separate visual language is allowed.
   Current supported hooks:
   - .ac-faq-item / .ac-faq-q / .ac-faq-a
   - .tc-faq__item (parent .open state on Elantra/Sonata family)
   ========================================================= */

/* =========================================================
   AUTOCENTER Design System v1.0.1
   Native details FAQ icon parity
   ========================================================= */

/*
 * Some canonical native <details> FAQs use:
 *   <summary class="ac-faq__q"><span class="ac-faq__label">...</span></summary>
 * without a dedicated <i> icon node.
 *
 * Give that DOM the same +/- control as the JS-backed FAQ variants.
 * No post_content or executable JS changes are required.
 */
.ac-article summary.ac-faq__q:not(:has(> i))::after{
  content:"+";
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin-left:auto;
  border-radius:8px;
  background:#fff0f1;
  color:var(--ac-red);
  font-size:20px;
  font-weight:800;
  line-height:1;
}

.ac-article details.ac-faq__item[open] > summary.ac-faq__q:not(:has(> i))::after{
  content:"−";
  background:var(--ac-red);
  color:#fff;
}

/* =========================================================
   AUTOCENTER Design System v1.0.2
   BATCH #006 visual normalization
   ========================================================= */

/* 1) Canonical structured links.
   .ac-link--simple may still exist as a compatibility class, but it must not
   force small/strong/span content into one horizontal row. */
.ac-article .ac-links > .ac-link--simple{
  display:grid;
  align-content:center;
  align-items:initial;
  color:var(--ac-ink);
  font-weight:400;
}

/* 2) Signal cards are one reusable two-column component.
   This restores equal card widths and the intended number/content layout. */
.ac-article .ac-signals{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin:20px 0;
}

.ac-article .ac-signal{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:13px;
  align-items:start;
  width:100%;
}

.ac-article .ac-signal > .ac-signal__icon{
  grid-column:1;
  grid-row:1 / span 2;
}

.ac-article .ac-signal > div{
  grid-column:2;
  min-width:0;
}

.ac-article .ac-signal .ac-h3,
.ac-article .ac-signal h3{
  margin:0 0 4px;
  color:var(--ac-ink);
}

.ac-article .ac-signal p{
  margin:0;
  color:var(--ac-muted);
}

/* 3) Brand chips/cards must remain readable even inside dark sections. */
.ac-article .ac-brand{
  color:var(--ac-ink);
  text-align:center;
  font-weight:800;
}

/* 4) H2 inside a dark hero is semantically a heading but visually a subtitle. */
.ac-article .ac-hero .ac-h2{
  max-width:950px;
  margin:0 0 18px;
  color:#eef1f4;
  font-size:clamp(18px,2vw,24px);
  font-weight:750;
  line-height:1.35;
  letter-spacing:0;
}

/* 5) Explicit theme compatibility adapter.
   Canonical ac-article pages own their H1, so a theme/Elementor page-title
   rendered above post_content is always duplicate UI and is suppressed. */
body.page:has(.ac-article){
  --page-title-display:none;
}

body.page:has(.ac-article) h1.entry-title,
body.page:has(.ac-article) .elementor-page-title,
body.page:has(.ac-article) .page-title,
body.page:has(.ac-article) .entry-header,
body.page:has(.ac-article) .page-header{
  display:none!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
}

@media (max-width:760px){
  .ac-article .ac-signals{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   AUTOCENTER Design System v1.0.3
   Functional component: customs calculator
   ========================================================= */

/*
 * This is a real new semantic component, not a legacy page-family skin.
 * The calculator's executable JS remains immutable and works by element IDs.
 * Only .calc-hidden is retained as an explicit JS compatibility hook.
 */
.ac-article .ac-calculator{
  margin-top:-58px;
  position:relative;
  z-index:3;
}

.ac-article .ac-calculator__layout{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:24px;
  padding:28px;
  border:1px solid var(--ac-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 50px rgba(17,24,39,.13);
}

.ac-article .ac-calculator__panel{
  padding:24px;
  border:1px solid var(--ac-line);
  border-radius:16px;
  background:#fff;
}

.ac-article .ac-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.ac-article .ac-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

.ac-article .ac-field--full{
  grid-column:1/-1;
}

.ac-article .ac-field__label{
  color:var(--ac-ink);
  font-size:14px;
  font-weight:800;
}

.ac-article .ac-field__help{
  color:#747d89;
  font-size:12px;
  line-height:1.45;
}

.ac-article .ac-field__control{
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border:1px solid #cfd5dc;
  border-radius:10px;
  background:#fff;
  color:#1f2329;
  font:600 15px Tahoma,Geneva,Arial,sans-serif;
}

.ac-article .ac-field__control:focus{
  outline:3px solid rgba(215,25,32,.14);
  border-color:var(--ac-red);
}

/* Immutable calculator JS hook. */
.ac-article .calc-hidden{
  display:none!important;
}

.ac-article .ac-calculator__result{
  background:linear-gradient(145deg,#171a20,#242a33);
  color:#fff;
  border-color:#303741;
}

.ac-article .ac-calculator__result .ac-h3,
.ac-article .ac-calculator__result h3{
  color:#fff;
}

.ac-article .ac-calculator__result p{
  color:#d8dee6;
}

.ac-article .ac-calculator__total{
  margin:18px 0 22px;
  padding:18px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.07);
}

.ac-article .ac-calculator__total small{
  display:block;
  margin-bottom:4px;
  color:#bfc7d2;
}

.ac-article .ac-calculator__total strong{
  color:#fff;
  font-size:34px;
  line-height:1;
}

.ac-article .ac-calculator__rows{
  display:grid;
  gap:10px;
}

.ac-article .ac-calculator__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:14px;
}

.ac-article .ac-calculator__row span:first-child{
  color:#cbd2dc;
}

.ac-article .ac-calculator__row b{
  color:#fff;
}

.ac-article .ac-calculator__alert{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid #efc3c6;
  border-radius:12px;
  background:#fff4f4;
  color:#6d262a;
  font-size:13px;
  line-height:1.55;
}

@media (max-width:980px){
  .ac-article .ac-calculator__layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:680px){
  .ac-article .ac-calculator{
    margin-top:-36px;
  }

  .ac-article .ac-calculator__layout{
    padding:14px;
  }

  .ac-article .ac-calculator__panel{
    padding:18px;
  }

  .ac-article .ac-form-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   AUTOCENTER Design System v1.0.4
   BATCH #009 structural/component corrections
   ========================================================= */

/* A container that is also a split component must remain centered.
   The generic .ac-split margin shorthand used to reset margin-inline:auto. */
.ac-article .ac-container.ac-split{
  margin-inline:auto;
}

/* Dark CTA headings use the same light typography as their body copy. */
.ac-article .ac-cta .ac-h3,
.ac-article .ac-dark-cta .ac-h3,
.ac-article .ac-cta h3,
.ac-article .ac-dark-cta h3{
  color:#fff;
}

/* Canonical HERO SIDE PANEL
   Used when a hero needs a compact decision/risk summary beside the main copy. */
.ac-article .ac-hero>.ac-container:has(>.ac-hero-panel){
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  align-items:center;
  gap:52px;
  padding-block:78px;
}

.ac-article .ac-hero-panel{
  position:relative;
  padding:27px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(10,13,18,.76);
  box-shadow:0 28px 60px rgba(0,0,0,.30);
  color:#fff;
  backdrop-filter:blur(8px);
}

.ac-article .ac-hero-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:4px;
  border-radius:0 0 7px 7px;
  background:linear-gradient(90deg,var(--ac-red),#ff757a);
}

.ac-article .ac-hero-panel__head{
  padding-bottom:17px;
  margin-bottom:17px;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.ac-article .ac-hero-panel__head small{
  display:block;
  margin-bottom:5px;
  color:#ff8b90;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.ac-article .ac-hero-panel__head strong{
  color:#fff;
  font-size:20px;
}

.ac-article .ac-hero-panel__items{
  display:grid;
  gap:10px;
}

.ac-article .ac-hero-panel__row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:11px;
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.065);
  box-shadow:none;
}

.ac-article .ac-hero-panel__n{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin:0;
  border-radius:9px;
  background:rgba(215,25,32,.18);
  color:#ff777c;
  font-size:12px;
  font-weight:900;
}

.ac-article .ac-hero-panel__row strong{
  display:block;
  color:#fff;
  font-size:14px;
}

.ac-article .ac-hero-panel__row span:not(.ac-hero-panel__n){
  display:block;
  color:#c0c7d0;
  font-size:12px;
}

@media (max-width:900px){
  .ac-article .ac-hero>.ac-container:has(>.ac-hero-panel){
    grid-template-columns:1fr;
    gap:28px;
    padding-block:58px;
  }
}

/* =========================================================
   AUTOCENTER Design System v1.0.5
   Context-safe light surfaces inside dark sections
   ========================================================= */

/* TABLE is a light-surface component. It must own BOTH background and text
   colors instead of inheriting text color from a dark parent section. */
.ac-article .ac-table-wrap{
  color:var(--ac-ink);
}

.ac-article .ac-table{
  background:#fff;
  color:var(--ac-ink);
}

.ac-article .ac-table td{
  background:#fff;
  color:var(--ac-ink);
}

.ac-article .ac-table td strong{
  color:var(--ac-ink);
}

/* Dark-section context must never make text disappear on a light table. */
.ac-article .ac-section--dark .ac-table-wrap,
.ac-article .ac-section--dark .ac-table,
.ac-article .ac-section--dark .ac-table td,
.ac-article .ac-section--dark .ac-table td strong{
  color:var(--ac-ink);
}

/* Notes are also light-surface components and must not inherit dark-section text. */
.ac-article .ac-section--dark .ac-note,
.ac-article .ac-section--dark .ac-note p,
.ac-article .ac-section--dark .ac-note li,
.ac-article .ac-section--dark .ac-note strong{
  color:var(--ac-ink);
}

.ac-article .ac-section--dark .ac-note a{
  color:var(--ac-red-dark);
}

/* Same invariant for the light author component. */
.ac-article .ac-section--dark .ac-author{
  color:var(--ac-ink);
}

.ac-article .ac-section--dark .ac-author p{
  color:var(--ac-muted);
}

/* =========================================================
   AUTOCENTER Design System v1.0.6
   Dark-note modifier must win over generic dark-section note reset
   ========================================================= */

/* Root cause:
   .ac-section--dark .ac-note is intentionally a light-surface fallback,
   but its higher specificity was overriding the explicit .ac-note--dark
   modifier. A modifier is a deliberate visual variant and must win. */
.ac-article .ac-section--dark .ac-note.ac-note--dark{
  border-left-color:var(--ac-red);
  background:linear-gradient(145deg,#171b21,#252a32);
  color:#fff;
}

.ac-article .ac-section--dark .ac-note.ac-note--dark .ac-h3,
.ac-article .ac-section--dark .ac-note.ac-note--dark h3,
.ac-article .ac-section--dark .ac-note.ac-note--dark strong{
  color:#fff;
}

.ac-article .ac-section--dark .ac-note.ac-note--dark p,
.ac-article .ac-section--dark .ac-note.ac-note--dark li,
.ac-article .ac-section--dark .ac-note.ac-note--dark span:not(.ac-card__tag){
  color:#dce1e7;
}

.ac-article .ac-section--dark .ac-note.ac-note--dark a{
  color:#fff;
}

/* Nested cards inside the dark note remain dark-context cards. */
.ac-article .ac-section--dark .ac-note.ac-note--dark .ac-card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.17);
  color:#fff;
  box-shadow:none;
}

.ac-article .ac-section--dark .ac-note.ac-note--dark .ac-card strong{
  color:#fff;
}

.ac-article .ac-section--dark .ac-note.ac-note--dark .ac-card > span:not(.ac-card__tag){
  color:#dce1e7;
}

/* =========================================================
   AUTOCENTER Design System v1.0.7
   Special homepage/contact templates + specificity hardening
   ========================================================= */

/* Homepage template, shared by RU/UA. Moved from page-local <style>. */

.ac-home {
  --ac-red:#d71920;
  --ac-red-dark:#a30f15;
  --ac-graphite:#17191e;
  --ac-graphite-2:#22252c;
  --ac-text:#282b31;
  --ac-muted:#626872;
  --ac-light:#f5f6f8;
  --ac-white:#fff;
  --ac-line:rgba(24,27,33,.11);
  --ac-shadow:0 18px 48px rgba(17,20,25,.09);
  --ac-radius:22px;
  --ac-radius-sm:15px;
  color:var(--ac-text);
  font-family:"Open Sans","Roboto",Arial,sans-serif;
  line-height:1.65;
  background:#fff;
  position:relative;
  isolation:isolate;
}

.ac-home *,
.ac-home *::before,
.ac-home *::after {
  box-sizing:border-box;
}

.ac-home a {
  color:var(--ac-red);
  text-decoration:none;
}

.ac-home img {
  max-width:100%;
  height:auto;
}

.ac-home .ac-container {
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
}

.ac-home .ac-section {
  padding:76px 0;
}

.ac-home .ac-section--light {
  background:var(--ac-light);
}

.ac-home .ac-section--dark {
  color:#fff;
  background:
    radial-gradient(circle at 90% 10%,rgba(215,25,32,.19),transparent 30%),
    linear-gradient(145deg,#20232a 0%,#101216 100%);
}

.ac-home .ac-section--dark .ac-h2,
.ac-home .ac-section--dark .ac-h3,
.ac-home .ac-section--dark .ac-copy {
  color:#fff;
}

.ac-home .ac-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 14px;
  color:var(--ac-red);
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.ac-home .ac-eyebrow::before {
  content:"";
  width:30px;
  height:3px;
  border-radius:999px;
  background:var(--ac-red);
}

.ac-home .ac-h1,
.ac-home .ac-h2,
.ac-home .ac-h3 {
  margin-top:0;
  font-family:"Roboto","Open Sans",Arial,sans-serif;
  letter-spacing:-.025em;
}

.ac-home .ac-h1 {
  max-width:820px;
  margin-bottom:20px;
  color:#fff;
  font-size:clamp(38px,6vw,70px);
  line-height:1.03;
  font-weight:900;
}

.ac-home .ac-h2 {
  max-width:850px;
  margin-bottom:22px;
  color:var(--ac-graphite);
  font-size:clamp(30px,4vw,48px);
  line-height:1.12;
  font-weight:900;
}

.ac-home .ac-h3 {
  margin-bottom:11px;
  color:var(--ac-graphite);
  font-size:22px;
  line-height:1.24;
  font-weight:850;
}

.ac-home .ac-copy {
  margin:0 0 18px;
  color:var(--ac-muted);
  font-size:17px;
  line-height:1.75;
}

.ac-home .ac-copy strong {
  color:var(--ac-text);
}

.ac-home .ac-section--dark .ac-copy strong {
  color:#fff;
}

.ac-home .ac-hero {
  position:relative;
  left:50%;
  width:100vw;
  min-height:680px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  color:#fff;
  background-image:
    linear-gradient(90deg,rgba(12,14,18,.96) 0%,rgba(12,14,18,.86) 43%,rgba(12,14,18,.38) 100%),
    url("https://autocenter.kyiv.ua/wp-content/uploads/2026/07/Aurocenter-Kyiv-Avtoservis-Kyiv.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.ac-home .ac-hero::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:140px;
  background:linear-gradient(to top,rgba(11,13,17,.52),transparent);
  pointer-events:none;
}

.ac-home .ac-hero__inner {
  position:relative;
  z-index:2;
  max-width:870px;
  padding:88px 0;
}

.ac-home .ac-hero .ac-eyebrow {
  color:#fff;
}

.ac-home .ac-hero__text {
  max-width:760px;
  margin:0 0 28px;
  color:rgba(255,255,255,.87);
  font-size:clamp(18px,2vw,22px);
  line-height:1.65;
}

.ac-home .ac-badges {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 30px;
}

.ac-home .ac-badge {
  display:inline-flex;
  align-items:center;
  min-height:39px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  font-size:14px;
  font-weight:750;
}

.ac-home .ac-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.ac-home .ac-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:15px;
  font-weight:850;
  line-height:1.2;
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}

.ac-home .ac-btn:hover {
  transform:translateY(-2px);
}

.ac-home .ac-btn--red {
  color:#fff!important;
  background:linear-gradient(135deg,var(--ac-red),var(--ac-red-dark));
  box-shadow:0 13px 28px rgba(215,25,32,.3);
}

.ac-home .ac-btn--red:hover {
  color:#fff!important;
  box-shadow:0 17px 34px rgba(215,25,32,.38);
}

.ac-home .ac-btn--ghost {
  color:#fff!important;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
}

.ac-home .ac-btn--ghost:hover {
  color:#fff!important;
  border-color:#fff;
  background:rgba(255,255,255,.16);
}

.ac-home .ac-btn--dark {
  color:#fff!important;
  background:var(--ac-graphite);
  box-shadow:0 12px 25px rgba(17,20,25,.18);
}

.ac-home .ac-btn--dark:hover {
  color:#fff!important;
  background:var(--ac-red);
}

.ac-home .ac-grid {
  display:grid;
  gap:20px;
}

.ac-home .ac-grid--2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.ac-home .ac-grid--3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.ac-home .ac-grid--4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.ac-home .ac-card {
  height:100%;
  padding:26px;
  border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
  background:#fff;
  box-shadow:0 11px 30px rgba(17,20,25,.045);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.ac-home .ac-card:hover {
  transform:translateY(-4px);
  border-color:rgba(215,25,32,.25);
  box-shadow:var(--ac-shadow);
}

.ac-home .ac-card__number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  margin-bottom:18px;
  border-radius:14px;
  color:#fff;
  background:var(--ac-red);
  font-size:17px;
  font-weight:900;
}

.ac-home .ac-card__link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:var(--ac-red)!important;
  font-size:15px;
  font-weight:850;
}

.ac-home .ac-card__link::after {
  content:"→";
  transition:transform .2s ease;
}

.ac-home .ac-card__link:hover::after {
  transform:translateX(4px);
}

.ac-home .ac-intro {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:34px;
  align-items:start;
}

.ac-home .ac-form-box {
  padding:28px;
  border-radius:var(--ac-radius);
  background:#fff;
  box-shadow:var(--ac-shadow);
  border:1px solid var(--ac-line);
}

.ac-home .ac-form-box .ac-h3 {
  margin-bottom:8px;
}

.ac-home .ac-form-box .ac-copy {
  font-size:15px;
}

.ac-home .ac-form {
  margin-top:18px;
}

.ac-home .ac-problems {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.ac-home .ac-problem {
  position:relative;
  min-height:78px;
  padding:18px 18px 18px 47px;
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
}

.ac-home .ac-problem::before {
  content:"";
  position:absolute;
  top:25px;
  left:20px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ac-red);
  box-shadow:0 0 0 6px rgba(215,25,32,.17);
}

.ac-home .ac-process {
  counter-reset:process;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.ac-home .ac-step {
  position:relative;
  min-height:190px;
  padding:24px 20px;
  border:1px solid var(--ac-line);
  border-radius:var(--ac-radius-sm);
  background:#fff;
}

.ac-home .ac-step::before {
  counter-increment:process;
  content:counter(process);
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-bottom:17px;
  border-radius:50%;
  color:#fff;
  background:var(--ac-red);
  font-weight:900;
}

.ac-home .ac-step .ac-h3 {
  font-size:19px;
}

.ac-home .ac-step .ac-copy {
  margin-bottom:0;
  font-size:15px;
}

.ac-home .ac-feature {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:38px;
  align-items:center;
}

.ac-home .ac-feature--reverse {
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
}

.ac-home .ac-feature__panel {
  padding:34px;
  border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
  background:#fff;
  box-shadow:var(--ac-shadow);
}

.ac-home .ac-feature__visual {
  min-height:410px;
  border-radius:var(--ac-radius);
  background:
    linear-gradient(145deg,rgba(20,22,27,.08),rgba(20,22,27,.44)),
    url("https://autocenter.kyiv.ua/wp-content/uploads/2026/07/Aurocenter-Kyiv-Avtoservis-Kyiv.png") center/cover no-repeat;
  box-shadow:var(--ac-shadow);
}

.ac-home .ac-feature__visual--body {
  background:
    linear-gradient(145deg,rgba(20,22,27,.12),rgba(20,22,27,.52)), url("https://autocenter.kyiv.ua/wp-content/uploads/2026/07/fabuvannia-ta-kuzovnyy-remont.png") center/cover no-repeat;
}

.ac-home .ac-list {
  margin:20px 0 24px;
  padding:0;
  list-style:none;
}

.ac-home .ac-list li {
  position:relative;
  margin:0 0 11px;
  padding-left:28px;
  color:var(--ac-muted);
}

.ac-home .ac-list li::before {
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--ac-red);
  font-weight:900;
}

.ac-home .ac-locations {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.ac-home .ac-location {
  padding:28px;
  border-radius:var(--ac-radius);
  background:#fff;
  color:var(--ac-text);
  box-shadow:var(--ac-shadow);
}

.ac-home .ac-location__name {
  margin:0 0 8px;
  color:var(--ac-graphite);
  font-size:25px;
  line-height:1.2;
  font-weight:900;
}

.ac-home .ac-location__address {
  min-height:55px;
  margin:0 0 18px;
  color:var(--ac-muted);
  font-size:16px;
}

.ac-home .ac-location__meta {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:20px;
  font-size:15px;
  font-weight:700;
}

.ac-home .ac-location__actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.ac-home .ac-location .ac-btn {
  min-height:45px;
  padding:0 17px;
  font-size:14px;
}

.ac-home .ac-faq {
  display:grid;
  gap:12px;
  max-width:980px;
  margin-top:30px;
}

.ac-home .ac-faq details {
  border:1px solid var(--ac-line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.ac-home .ac-faq summary {
  position:relative;
  padding:21px 58px 21px 22px;
  color:var(--ac-graphite);
  cursor:pointer;
  list-style:none;
  font-size:17px;
  font-weight:850;
}

.ac-home .ac-faq summary::-webkit-details-marker {
  display:none;
}

.ac-home .ac-faq summary::before,
.ac-home .ac-faq summary::after {
  content:"";
  position:absolute;
  right:23px;
  top:50%;
  width:18px;
  height:2px;
  border-radius:99px;
  background:var(--ac-red);
  transform:translateY(-50%);
}

.ac-home .ac-faq summary::after {
  transform:translateY(-50%) rotate(90deg);
  transition:transform .2s ease;
}

.ac-home .ac-faq details[open] summary::after {
  transform:translateY(-50%) rotate(0deg);
}

.ac-home .ac-faq__answer {
  padding:0 22px 22px;
  color:var(--ac-muted);
  font-size:16px;
}

.ac-home .ac-contact {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:34px;
  align-items:start;
}

.ac-home .ac-contact .ac-form-box {
  color:var(--ac-text);
}

.ac-home .ac-contact-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px;
}

.ac-home .ac-contact-links a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:#fff!important;
  background:rgba(255,255,255,.07);
  font-size:14px;
  font-weight:800;
}

.ac-home .ac-contact-links a:hover {
  background:var(--ac-red);
  border-color:var(--ac-red);
}

.ac-home .ac-mobile-bar {
  display:none;
}


.ac-home .ac-card--image{padding:0;overflow:hidden}
.ac-home .ac-card--image .ac-card__media{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#e9eaed}
.ac-home .ac-card--image .ac-card__body{padding:24px}
.ac-home .ac-import-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ac-home .ac-import-card{overflow:hidden;border:1px solid var(--ac-line);border-radius:var(--ac-radius);background:#fff;box-shadow:var(--ac-shadow)}
.ac-home .ac-import-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ac-home .ac-import-card__body{padding:28px}
@media(max-width:820px){.ac-home .ac-import-grid{grid-template-columns:1fr}}

@media(max-width:1024px) {
  .ac-home .ac-grid--4 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ac-home .ac-process {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .ac-home .ac-feature,
  .ac-home .ac-feature--reverse {
    grid-template-columns:1fr;
  }
  .ac-home .ac-feature--reverse .ac-feature__visual {
    order:2;
  }
}

@media(max-width:820px) {
  .ac-home .ac-section {
    padding:60px 0;
  }
  .ac-home .ac-hero {
    min-height:650px;
    background-position:62% center;
  }
  .ac-home .ac-intro,
  .ac-home .ac-contact {
    grid-template-columns:1fr;
  }
  .ac-home .ac-grid--3,
  .ac-home .ac-problems,
  .ac-home .ac-locations {
    grid-template-columns:1fr;
  }
  .ac-home .ac-process {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ac-home .ac-location__address {
    min-height:auto;
  }
}

@media(max-width:600px) {
  .ac-home {
    padding-bottom:72px;
  }
  .ac-home .ac-container {
    width:min(100% - 24px,1180px);
  }
  .ac-home .ac-section {
    padding:48px 0;
  }
  .ac-home .ac-hero {
    min-height:640px;
    background-image:
      linear-gradient(90deg,rgba(12,14,18,.94) 0%,rgba(12,14,18,.78) 100%),
      url("https://autocenter.kyiv.ua/wp-content/uploads/2026/07/Aurocenter-Kyiv-Avtoservis-Kyiv.png");
    background-position:center;
  }
  .ac-home .ac-hero__inner {
    padding:64px 0;
  }
  .ac-home .ac-h1 {
    font-size:39px;
  }
  .ac-home .ac-h2 {
    font-size:31px;
  }
  .ac-home .ac-grid--2,
  .ac-home .ac-grid--4,
  .ac-home .ac-process {
    grid-template-columns:1fr;
  }
  .ac-home .ac-actions,
  .ac-home .ac-location__actions {
    flex-direction:column;
  }
  .ac-home .ac-btn {
    width:100%;
  }
  .ac-home .ac-card,
  .ac-home .ac-form-box,
  .ac-home .ac-feature__panel,
  .ac-home .ac-location {
    padding:22px 18px;
    border-radius:18px;
  }
  .ac-home .ac-feature__visual {
    min-height:290px;
  }
  .ac-home .ac-contact {
    grid-template-columns:minmax(0,1fr);
  }
  .ac-home .ac-mobile-bar {
    position:fixed;
    z-index:9997;
    left:10px;
    right:10px;
    bottom:10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
    border-radius:15px;
    background:rgba(20,22,27,.94);
    box-shadow:0 15px 40px rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
  }
  .ac-home .ac-mobile-bar a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border-radius:10px;
    font-weight:850;
    text-decoration:none!important;
  }
  .ac-home .ac-mobile-bar__call {
    color:var(--ac-graphite)!important;
    background:#fff;
  }
  .ac-home .ac-mobile-bar__book {
    color:#fff!important;
    background:var(--ac-red);
  }
}

@media(prefers-reduced-motion:reduce) {
  .ac-home *,
  .ac-home *::before,
  .ac-home *::after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}


/* Contacts template, shared by RU/UA. Moved from page-local <style>. */

.ac-contact-page {
  --ac-red:#d71920;
  --ac-red-dark:#a30f15;
  --ac-graphite:#17191e;
  --ac-graphite-2:#23262d;
  --ac-text:#292c32;
  --ac-muted:#626872;
  --ac-light:#f5f6f8;
  --ac-white:#fff;
  --ac-line:rgba(24,27,33,.11);
  --ac-shadow:0 18px 48px rgba(17,20,25,.09);
  --ac-radius:22px;
  color:var(--ac-text);
  font-family:"Open Sans","Roboto",Arial,sans-serif;
  line-height:1.65;
  background:#fff;
  position:relative;
  isolation:isolate;
}

.ac-contact-page *,
.ac-contact-page *::before,
.ac-contact-page *::after {
  box-sizing:border-box;
}

.ac-contact-page a {
  color:var(--ac-red);
  text-decoration:none;
}

.ac-contact-page .ac-container {
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
}

.ac-contact-page .ac-section {
  padding:76px 0;
}

.ac-contact-page .ac-section--light {
  background:var(--ac-light);
}

.ac-contact-page .ac-section--dark {
  color:#fff;
  background:
    radial-gradient(circle at 92% 8%,rgba(215,25,32,.2),transparent 30%),
    linear-gradient(145deg,#20232a 0%,#101216 100%);
}

.ac-contact-page .ac-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 14px;
  color:var(--ac-red);
  font-size:13px;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.2;
  text-transform:uppercase;
}

.ac-contact-page .ac-eyebrow::before {
  content:"";
  width:30px;
  height:3px;
  border-radius:999px;
  background:var(--ac-red);
}

.ac-contact-page .ac-h1,
.ac-contact-page .ac-h2,
.ac-contact-page .ac-h3 {
  margin-top:0;
  font-family:"Roboto","Open Sans",Arial,sans-serif;
  letter-spacing:-.025em;
}

.ac-contact-page .ac-h1 {
  max-width:840px;
  margin-bottom:20px;
  color:#fff;
  font-size:clamp(40px,6vw,70px);
  line-height:1.03;
  font-weight:900;
}

.ac-contact-page .ac-h2 {
  max-width:860px;
  margin-bottom:22px;
  color:var(--ac-graphite);
  font-size:clamp(30px,4vw,48px);
  line-height:1.12;
  font-weight:900;
}

.ac-contact-page .ac-h3 {
  margin-bottom:11px;
  color:var(--ac-graphite);
  font-size:23px;
  line-height:1.25;
  font-weight:850;
}

.ac-contact-page .ac-copy {
  margin:0 0 18px;
  color:var(--ac-muted);
  font-size:17px;
  line-height:1.75;
}

.ac-contact-page .ac-section--dark .ac-h2,
.ac-contact-page .ac-section--dark .ac-h3,
.ac-contact-page .ac-section--dark .ac-copy {
  color:#fff;
}

.ac-contact-page .ac-hero {
  position:relative;
  left:50%;
  width:100vw;
  min-height:650px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
  background-image:
    linear-gradient(90deg,rgba(12,14,18,.96) 0%,rgba(12,14,18,.85) 43%,rgba(12,14,18,.3) 100%),
    url("https://autocenter.kyiv.ua/wp-content/uploads/2026/07/Kontakty-STO-Autocenter.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.ac-contact-page .ac-hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:140px;
  background:linear-gradient(to top,rgba(11,13,17,.52),transparent);
  pointer-events:none;
}

.ac-contact-page .ac-hero__inner {
  position:relative;
  z-index:2;
  max-width:850px;
  padding:86px 0;
}

.ac-contact-page .ac-hero .ac-eyebrow {
  color:#fff;
}

.ac-contact-page .ac-hero__text {
  max-width:730px;
  margin:0 0 28px;
  color:rgba(255,255,255,.88);
  font-size:clamp(18px,2vw,22px);
  line-height:1.65;
}

.ac-contact-page .ac-badges,
.ac-contact-page .ac-actions {
  display:flex;
  flex-wrap:wrap;
  gap:11px;
}

.ac-contact-page .ac-badges {
  margin-bottom:30px;
}

.ac-contact-page .ac-badge {
  display:inline-flex;
  align-items:center;
  min-height:39px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  font-size:14px;
  font-weight:750;
}

.ac-contact-page .ac-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:15px;
  font-weight:850;
  line-height:1.2;
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}

.ac-contact-page .ac-btn:hover {
  transform:translateY(-2px);
}

.ac-contact-page .ac-btn--red {
  color:#fff!important;
  background:linear-gradient(135deg,var(--ac-red),var(--ac-red-dark));
  box-shadow:0 13px 28px rgba(215,25,32,.3);
}

.ac-contact-page .ac-btn--dark {
  color:#fff!important;
  background:var(--ac-graphite);
  box-shadow:0 12px 25px rgba(17,20,25,.18);
}

.ac-contact-page .ac-btn--dark:hover {
  background:var(--ac-red);
}

.ac-contact-page .ac-btn--ghost {
  color:#fff!important;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
}

.ac-contact-page .ac-intro {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:34px;
  align-items:start;
}

.ac-contact-page .ac-form-box {
  padding:28px;
  border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
  background:#fff;
  box-shadow:var(--ac-shadow);
}

.ac-contact-page .ac-form {
  margin-top:18px;
}

.ac-contact-page .ac-quick {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}

.ac-contact-page .ac-quick__item {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
  min-height:150px;
  padding:24px 26px;
  border:1px solid var(--ac-line);
  border-radius:18px;
  background:#fff;
}

.ac-contact-page .ac-quick__label {
  display:block;
  margin-bottom:12px;
  color:var(--ac-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.35;
  text-transform:uppercase;
}

.ac-contact-page .ac-quick__value {
  display:block;
  max-width:100%;
  color:var(--ac-graphite);
  font-size:18px;
  font-weight:850;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:normal;
}

.ac-contact-page .ac-quick__item--email .ac-quick__value {
  font-size:16px;
}

.ac-contact-page .ac-quick__item--hours .ac-quick__value {
  white-space:normal;
}

.ac-contact-page .ac-locations {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.ac-contact-page .ac-location {
  display:flex;
  flex-direction:column;
  height:100%;
  padding:28px;
  border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
  background:#fff;
  color:var(--ac-text);
  box-shadow:var(--ac-shadow);
}

.ac-contact-page .ac-location__number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  margin-bottom:18px;
  border-radius:14px;
  color:#fff;
  background:var(--ac-red);
  font-weight:900;
}

.ac-contact-page .ac-location__address {
  margin:0 0 17px;
  color:var(--ac-muted);
  font-size:16px;
}

.ac-contact-page .ac-location__details {
  display:grid;
  gap:9px;
  margin:0 0 23px;
  padding:0;
  list-style:none;
  color:var(--ac-muted);
  font-size:15px;
}

.ac-contact-page .ac-location__details strong {
  color:var(--ac-text);
}

.ac-contact-page .ac-location__actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:auto;
}

.ac-contact-page .ac-location .ac-btn {
  min-height:45px;
  padding:0 17px;
  font-size:14px;
}

.ac-contact-page .ac-help-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.ac-contact-page .ac-help {
  padding:25px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

.ac-contact-page .ac-help .ac-h3 {
  font-size:20px;
}

.ac-contact-page .ac-messengers {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.ac-contact-page .ac-messengers a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:#fff!important;
  background:rgba(255,255,255,.07);
  font-size:14px;
  font-weight:800;
}

.ac-contact-page .ac-messengers a:hover {
  background:var(--ac-red);
  border-color:var(--ac-red);
}

.ac-contact-page .ac-faq {
  display:grid;
  gap:12px;
  max-width:980px;
  margin-top:30px;
}

.ac-contact-page .ac-faq details {
  border:1px solid var(--ac-line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.ac-contact-page .ac-faq summary {
  position:relative;
  padding:21px 58px 21px 22px;
  color:var(--ac-graphite);
  cursor:pointer;
  list-style:none;
  font-size:17px;
  font-weight:850;
}

.ac-contact-page .ac-faq summary::-webkit-details-marker {
  display:none;
}

.ac-contact-page .ac-faq summary::before,
.ac-contact-page .ac-faq summary::after {
  content:"";
  position:absolute;
  right:23px;
  top:50%;
  width:18px;
  height:2px;
  border-radius:99px;
  background:var(--ac-red);
  transform:translateY(-50%);
}

.ac-contact-page .ac-faq summary::after {
  transform:translateY(-50%) rotate(90deg);
  transition:transform .2s ease;
}

.ac-contact-page .ac-faq details[open] summary::after {
  transform:translateY(-50%) rotate(0deg);
}

.ac-contact-page .ac-faq__answer {
  padding:0 22px 22px;
  color:var(--ac-muted);
  font-size:16px;
}

.ac-contact-page .ac-final {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(350px,.7fr);
  gap:34px;
  align-items:start;
}

.ac-contact-page .ac-final .ac-form-box {
  color:var(--ac-text);
}

.ac-contact-page .ac-mobile-bar {
  display:none;
}


@media(max-width:1100px) {
  .ac-contact-page .ac-intro {
    grid-template-columns:minmax(0,1fr);
  }

  .ac-contact-page .ac-intro > div,
  .ac-contact-page .ac-form-box {
    min-width:0;
  }

  .ac-contact-page .ac-intro .ac-h2 {
    max-width:760px;
    font-size:clamp(34px,4.2vw,46px);
  }

  .ac-contact-page .ac-quick {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px) {
  .ac-contact-page .ac-intro,
  .ac-contact-page .ac-final {
    grid-template-columns:1fr;
  }
  .ac-contact-page .ac-locations,
  .ac-contact-page .ac-help-grid {
    grid-template-columns:1fr;
  }

  .ac-contact-page .ac-quick {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ac-contact-page .ac-quick__item:last-child {
    grid-column:1 / -1;
  }
}

@media(max-width:600px) {
  .ac-contact-page {
    padding-bottom:72px;
  }
  .ac-contact-page .ac-container {
    width:min(100% - 24px,1180px);
  }
  .ac-contact-page .ac-section {
    padding:48px 0;
  }
  .ac-contact-page .ac-hero {
    min-height:630px;
    background-image:
      linear-gradient(90deg,rgba(12,14,18,.94) 0%,rgba(12,14,18,.78) 100%),
      url("https://autocenter.kyiv.ua/wp-content/uploads/2026/07/Kontakty-STO-Autocenter.png");
  }
  .ac-contact-page .ac-hero__inner {
    padding:62px 0;
  }
  .ac-contact-page .ac-h1 {
    font-size:39px;
  }
  .ac-contact-page .ac-h2 {
    font-size:31px;
  }
  .ac-contact-page .ac-actions,
  .ac-contact-page .ac-location__actions {
    flex-direction:column;
  }

  .ac-contact-page .ac-quick {
    grid-template-columns:1fr;
  }

  .ac-contact-page .ac-quick__item:last-child {
    grid-column:auto;
  }

  .ac-contact-page .ac-quick__item {
    min-height:auto;
  }
  .ac-contact-page .ac-btn {
    width:100%;
  }
  .ac-contact-page .ac-form-box,
  .ac-contact-page .ac-location {
    padding:22px 18px;
    border-radius:18px;
  }
  .ac-contact-page .ac-mobile-bar {
    position:fixed;
    z-index:9997;
    left:10px;
    right:10px;
    bottom:10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
    border-radius:15px;
    background:rgba(20,22,27,.94);
    box-shadow:0 15px 40px rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
  }
  .ac-contact-page .ac-mobile-bar a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border-radius:10px;
    font-weight:850;
  }
  .ac-contact-page .ac-mobile-bar__call {
    color:var(--ac-graphite)!important;
    background:#fff;
  }
  .ac-contact-page .ac-mobile-bar__book {
    color:#fff!important;
    background:var(--ac-red);
  }
}

@media(prefers-reduced-motion:reduce) {
  .ac-contact-page *,
  .ac-contact-page *::before,
  .ac-contact-page *::after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}



/* Explicit dark-note modifier must win even against theme/context rules.
   This also hardens the unresolved MKPP dark-note contrast case. */
.ac-article .ac-section--dark .ac-note.ac-note--dark,
.ac-article .ac-note.ac-note--dark{
  background:linear-gradient(145deg,#171b21,#252a32)!important;
  border-left-color:var(--ac-red)!important;
  color:#fff!important;
}
.ac-article .ac-note.ac-note--dark .ac-h3,
.ac-article .ac-note.ac-note--dark h3,
.ac-article .ac-note.ac-note--dark strong{
  color:#fff!important;
}
.ac-article .ac-note.ac-note--dark p,
.ac-article .ac-note.ac-note--dark li,
.ac-article .ac-note.ac-note--dark span:not(.ac-card__tag){
  color:#dce1e7!important;
}
.ac-article .ac-note.ac-note--dark .ac-card{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.17)!important;
  color:#fff!important;
}
.ac-article .ac-note.ac-note--dark .ac-card strong{
  color:#fff!important;
}
.ac-article .ac-note.ac-note--dark .ac-card > span:not(.ac-card__tag){
  color:#dce1e7!important;
}

/* =========================================================
   AUTOCENTER PATCH P003 — Cluster 01 suspension six closure
   Scope: #34446 #34883 #34997 #36995 #37526 #38135 only.
   - removes Blocksy top content spacing after FROZEN -> NATIVE
   - makes inline answer cards non-overlapping
   - normalizes related-service cards into an ordered grid
   No blue/reference Service270 pages are changed.
   ========================================================= */

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
){
  --content-vertical-spacing:0px !important;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) [data-vertical-spacing*="top"],
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main-container > main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main-container .site-main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) main#main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .content-area{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* .ac-answer normally overlaps the preceding block by design when used as a
   top answer card. In these six service rebuilds it is also used inside a
   normal content section, where overlap is incorrect. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-copy > .ac-answer,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-section--dark .ac-answer{
  width:100%;
  max-width:none;
  margin:22px 0 0 !important;
  padding:22px 24px;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(17,24,39,.09);
}

/* Related-service / related-article navigation must be a normal ordered grid.
   Reset any legacy grid placement that may leak onto generic .ac-link cards. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3:has(> a.ac-link){
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  align-items:stretch;
  gap:16px;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link{
  grid-column:auto !important;
  grid-row:auto !important;
  order:0 !important;
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  width:100% !important;
  min-width:0;
  max-width:none !important;
  min-height:150px;
  margin:0 !important;
}

/* Generic .ac-link span is block-level; restore the intended compact tag pill. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) a.ac-link > .ac-card__tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:100%;
  align-self:flex-start;
  flex:0 0 auto;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link > strong{
  margin-bottom:5px;
}

@media (max-width:900px){
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3:has(> a.ac-link){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:680px){
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-copy > .ac-answer,
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-section--dark .ac-answer{
    margin-top:18px !important;
    padding:19px;
  }

  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3:has(> a.ac-link){
    grid-template-columns:1fr !important;
  }

  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3 > a.ac-link{
    min-height:0;
  }
}
/* =========================================================
   AUTOCENTER PATCH P004 — Cluster 01 suspension six layout v2
   Applies after P003, same exact six Page IDs only.
   1) closes the remaining Blocksy Page shell gap at ct-container/article/
      entry-content level;
   2) turns navigation/link-card grids into an intentional 2-column layout
      with a centered final odd card instead of the accidental zig-zag;
   3) keeps the P003 non-overlapping inline answer behavior intact.
   ========================================================= */

/* The remaining white band is owned by the Page shell around entry-content,
   not by the ac-article hero itself. Mirror the proven structural/frozen shell
   reset, but ONLY for these six rebuilt service Pages. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main > .ct-container,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main > .ct-container-full,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main > .ct-container,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main > .ct-container-full,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main > article,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.page,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.type-page,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.page > .entry-content,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.type-page > .entry-content,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .entry-content:has(> .ac-article){
  margin-top:0 !important;
  padding-top:0 !important;
  padding-block-start:0 !important;
}

/* A full-width first child must begin immediately at the AUTOCENTER shell. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .entry-content > .ac-article:first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Link-card navigation: two balanced columns are more readable for the
   five service siblings and three article recommendations than a sparse
   3-column grid. Reset every possible placement primitive explicitly. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3:has(> a.ac-link){
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  grid-auto-rows:auto !important;
  justify-items:stretch !important;
  align-items:stretch !important;
  gap:18px !important;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link{
  grid-column:auto !important;
  grid-row:auto !important;
  grid-area:auto !important;
  order:0 !important;
  position:relative !important;
  inset:auto !important;
  float:none !important;
  transform:none !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
}

/* 5 service cards => 2 + 2 + centered 1.
   3 article cards => 2 + centered 1.
   The odd final card keeps the same visual width as its peers. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link:last-child:nth-child(odd){
  grid-column:1 / -1 !important;
  width:calc(50% - 9px) !important;
  justify-self:center !important;
}

/* Keep link-card typography compact and visually consistent. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link > .ac-card__tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  align-self:flex-start !important;
}

@media (max-width:680px){
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3:has(> a.ac-link){
    grid-template-columns:1fr !important;
  }

  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3 > a.ac-link:last-child:nth-child(odd){
    grid-column:auto !important;
    width:100% !important;
    justify-self:stretch !important;
  }
}
/* =========================================================
   AUTOCENTER PATCH P005 — Cluster 01 suspension six FINAL layout closure
   Applies after P004 to the same exact six rebuilt Service Pages only.
   - closes remaining Blocksy logical/physical top shell spacing
   - replaces related-link CSS Grid with deterministic flex-wrap layout
   - 5 service links = 3 + centered 2
   - 3 blog links = one balanced row of 3
   - tablet = 2 columns, mobile = 1 column
   ========================================================= */

/* Blocksy may express content spacing through logical properties
   (margin-block-start / padding-block-start), not only margin-top/padding-top.
   Reset the complete Page shell only for these six migrated Pages. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
){
  --content-vertical-spacing:0px !important;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main-container,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main-container > main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main-container .site-main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) main#main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .content-area,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main > .ct-container,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .site-main > .ct-container-full,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main > .ct-container,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) #main > .ct-container-full,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.page,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.type-page,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.page > .entry-content,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) article.type-page > .entry-content,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .entry-content:has(> .ac-article){
  margin-top:0 !important;
  margin-block-start:0 !important;
  padding-top:0 !important;
  padding-block-start:0 !important;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) [data-vertical-spacing*="top"]{
  margin-top:0 !important;
  margin-block-start:0 !important;
  padding-top:0 !important;
  padding-block-start:0 !important;
}

/* Blocksy content-flow spacing can live on the first direct child. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .entry-content > .ac-article:first-child,
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .entry-content > .ac-article:first-child > .ac-hero:first-child{
  margin-top:0 !important;
  margin-block-start:0 !important;
  padding-top:0 !important;
  padding-block-start:0 !important;
}

/* Deterministic related-card layout.
   Stop relying on grid auto-placement because legacy/global grid placement
   rules can leak into generic .ac-link cards. Flex-wrap makes source order
   unambiguous and naturally centers incomplete final rows. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3:has(> a.ac-link){
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:18px !important;
  grid-template-columns:none !important;
  grid-auto-flow:initial !important;
}

body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link{
  flex:0 1 calc((100% - 36px) / 3) !important;
  width:calc((100% - 36px) / 3) !important;
  max-width:calc((100% - 36px) / 3) !important;
  min-width:0 !important;
  margin:0 !important;
  grid-column:auto !important;
  grid-row:auto !important;
  grid-area:auto !important;
  order:0 !important;
  justify-self:auto !important;
  align-self:stretch !important;
  position:relative !important;
  inset:auto !important;
  float:none !important;
  transform:none !important;
}

/* Cancel the P004 odd-card full-row/half-width rule. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link:last-child:nth-child(odd){
  flex-basis:calc((100% - 36px) / 3) !important;
  width:calc((100% - 36px) / 3) !important;
  max-width:calc((100% - 36px) / 3) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  grid-column:auto !important;
  justify-self:auto !important;
}

/* Tags remain compact pills. */
body:is(
  .page-id-34446,
  .page-id-34883,
  .page-id-34997,
  .page-id-36995,
  .page-id-37526,
  .page-id-38135
) .ac-grid-3 > a.ac-link > .ac-card__tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  align-self:flex-start !important;
  flex:0 0 auto !important;
}

@media (max-width:900px){
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3 > a.ac-link,
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3 > a.ac-link:last-child:nth-child(odd){
    flex-basis:calc((100% - 18px) / 2) !important;
    width:calc((100% - 18px) / 2) !important;
    max-width:calc((100% - 18px) / 2) !important;
  }
}

@media (max-width:680px){
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3 > a.ac-link,
  body:is(
    .page-id-34446,
    .page-id-34883,
    .page-id-34997,
    .page-id-36995,
    .page-id-37526,
    .page-id-38135
  ) .ac-grid-3 > a.ac-link:last-child:nth-child(odd){
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}