/* ============================================================
   BMW ONLINE BROCHURE — тема WordPress
   Дизайн-код: Diia dashboard UI kit, фирменные цвета BMW.
   Mobile-first. Внешних запросов нет: шрифты и скрипты локальные.
   ============================================================ */

/* ===== FONT e-Ukraine (Fedoriv / Diia, CC BY 4.0) — self-hosted ===== */
@font-face{font-family:'e-Ukraine Head';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/e-UkraineHead-Regular.woff2') format('woff2')}
@font-face{font-family:'e-Ukraine Head';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/e-UkraineHead-Medium.woff2') format('woff2')}
@font-face{font-family:'e-Ukraine Head';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/e-UkraineHead-Bold.woff2') format('woff2')}
@font-face{font-family:'e-Ukraine';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/e-Ukraine-Light.woff2') format('woff2')}
@font-face{font-family:'e-Ukraine';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/e-Ukraine-Regular.woff2') format('woff2')}
@font-face{font-family:'e-Ukraine';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/e-Ukraine-Medium.woff2') format('woff2')}
@font-face{font-family:'e-Ukraine';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/e-Ukraine-Bold.woff2') format('woff2')}

/* ============================================================
   BMW ONLINE BROCHURE · design code: Diia dashboard UI kit
   Colors: BMW brand (blue #1C69D4 · navy #003D78 · M red/light)
   WordPress mapping in section comments. Mobile first.
   ============================================================ */
:root{
  /* base — from UI kit */
  --paper:#fff;--paper-2:#f2f2f2;--ink:#000;--ink-2:#6b6b6b;--line:#e6e6e6;--line-2:#cfcfcf;
  /* BMW brand — kept from v1 */
  --bmw:#1C69D4;--navy:#003D78;--mlight:#009ADA;--mred:#E7222E;
  --bmw-bg:#e3ecf8;--navy-bg:#dfe9f3;
  --focus:var(--bmw);
  /* brochure cover gradients (Diia doc-card device, BMW tints) */
  --gr-1:linear-gradient(120deg,#b7d7f2,#cbe4f7);
  --gr-2:linear-gradient(120deg,#c9d9f5,#bccdf2);
  --gr-3:linear-gradient(120deg,#d6e6f4,#b0d3f4);
  --r:20px;--r-sm:13px;--r-pill:999px;--hh:66px;
  --sh:0 1px 2px rgba(0,0,0,.05),0 10px 30px -18px rgba(0,0,0,.28);
  --sh-2:0 2px 4px rgba(0,0,0,.06),0 22px 48px -24px rgba(0,0,0,.4);
  --head:'e-Ukraine Head','e-Ukraine',system-ui,sans-serif;
  --body:'e-Ukraine',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--body);border:0;background:none;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 24px}}

/* ===== TYPE ===== */
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2rem,4.6vw,3rem)}
h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.lead{font-size:1.08rem;color:var(--ink-2);font-weight:300;line-height:1.5}
.eyebrow{font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-2)}
.mono-s{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ===== M-LINE signature (kept from v1) ===== */
.m-line{display:inline-flex;height:4px;width:52px;border-radius:2px;overflow:hidden}
.m-line span{flex:1}
.m-line span:nth-child(1){background:var(--mlight)}
.m-line span:nth-child(2){background:var(--navy)}
.m-line span:nth-child(3){background:var(--mred)}

/* ===== BUTTONS (UI kit) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:var(--r-pill);font-weight:500;font-size:.94rem;transition:transform .12s,background .15s,border-color .15s;min-height:48px}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2b2b2b}
.btn-blue{background:var(--bmw);color:#fff}
.btn-blue:hover{background:var(--navy)}
.btn-light{background:var(--paper-2);color:var(--ink)}
.btn-light:hover{background:#e9e9e9}
.btn-ghost{border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:.86rem;min-height:40px}

/* ===== PILLS ===== */
.catpill{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:6px 13px;font-size:.78rem;font-weight:500;background:var(--cb,var(--paper-2));color:var(--ink)}
.catpill i{width:7px;height:7px;border-radius:50%;background:var(--cc,var(--ink))}
.cp-blue{--cc:var(--bmw);--cb:var(--bmw-bg)}
.cp-navy{--cc:var(--navy);--cb:var(--navy-bg)}

.segmented{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:auto;background:#fff;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.segmented button{padding:9px 18px;font-size:.86rem;font-weight:500;color:var(--ink-2);white-space:nowrap;flex:none}
.segmented button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ===== HEADER · header.php ===== */
.khead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.1) blur(12px);border-bottom:1px solid var(--line)}
.khead .in{height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;flex-direction:column;gap:4px}
.logo b{font-family:var(--head);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.logo b em{font-style:normal;color:var(--bmw)}
.nav{display:none;gap:26px}
.nav a{font-size:.9rem;font-weight:500;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.burger{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ===== HERO · front-page.php ===== */
.hero{padding:52px 0 30px}
.hero h1{max-width:17ch}
.hero h1 span{color:var(--bmw)}
.hero .lead{margin-top:16px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.searchfield{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:10px 8px 10px 15px;background:#fff;max-width:520px;width:100%;margin-top:28px}
.searchfield svg{width:17px;height:17px;color:var(--ink-2);flex:none}
.searchfield input{border:0;outline:0;font-size:.92rem;font-family:var(--body);background:transparent;width:100%;min-width:0}
.searchfield .btn{flex:none}
.hero-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.hero-stats div b{font-family:var(--mono);font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
.hero-stats div b i{font-style:normal;color:var(--bmw)}
.hero-stats div span{display:block;font-size:.74rem;color:var(--ink-2);margin-top:2px}

/* ===== HERO ART · abstract composition: Diia tiles + M bars ===== */
.hero-in{display:flex;flex-direction:column}
.hero-art{position:relative;margin:44px auto 0;width:100%;max-width:480px;aspect-ratio:560/460}
@media(min-width:1024px){
  .hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
  .hero-art{margin:0;max-width:none}
}
.sh{position:absolute;transform:rotate(var(--rot,0deg)) skewX(var(--skew,0deg))}
.sh-tile{aspect-ratio:1;border-radius:24px}
.t1{width:52%;top:5%;right:3%;--rot:-6deg;--d:.05s;--fd:7s;background:var(--gr-1)}
.t2{width:36%;bottom:7%;left:1%;--rot:5deg;--d:.25s;--fd:8s;background:var(--gr-3)}
.sh-ring{width:34%;aspect-ratio:1;border-radius:50%;border:2px dashed var(--line-2);top:1%;left:12%;--d:.15s}
.sh-disc{width:11%;aspect-ratio:1;border-radius:50%;background:var(--bmw);bottom:23%;right:1%;--d:.75s;--fd:5s}
.sh-bar{width:6.5%;height:46%;border-radius:var(--r-pill);--skew:-18deg}
.b1{left:36%;top:24%;background:var(--mlight);--d:.45s;--fd:5.5s}
.b2{left:47%;top:24%;background:var(--navy);--d:.55s;--fd:6s}
.b3{left:58%;top:24%;background:var(--mred);--d:.65s;--fd:6.5s}
.sh-dots{width:26%;height:16%;left:42%;bottom:1%;--d:.3s;--fd:9s;
  background-image:radial-gradient(var(--line-2) 1.5px,transparent 1.6px);background-size:14px 14px}
.sh-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 14px 8px 11px;font-size:.78rem;font-weight:500;
  box-shadow:var(--sh);left:6%;top:38%;white-space:nowrap;--d:.9s;--fd:6s}
.sh-pill i{width:8px;height:8px;border-radius:50%;background:var(--bmw)}

@keyframes rise{
  from{opacity:0;transform:rotate(var(--rot,0deg)) skewX(var(--skew,0deg)) translateY(22px)}
  to{opacity:1;transform:rotate(var(--rot,0deg)) skewX(var(--skew,0deg)) translateY(0)}
}
@keyframes float{
  from{transform:rotate(var(--rot,0deg)) skewX(var(--skew,0deg)) translateY(0)}
  to{transform:rotate(var(--rot,0deg)) skewX(var(--skew,0deg)) translateY(-9px)}
}
@keyframes ringspin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: no-preference){
  .sh{animation:rise .7s cubic-bezier(.2,.7,.3,1) var(--d,0s) both,
       float var(--fd,6s) ease-in-out calc(var(--d,0s) + .9s) infinite alternate}
  .sh-ring{animation:rise .7s cubic-bezier(.2,.7,.3,1) var(--d,0s) both,
       ringspin 60s linear infinite}
}

/* ===== AD SLOT · widget area / AdSense ===== */
.ad{margin:26px auto;min-height:100px;border:1px dashed var(--line-2);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--paper-2);color:#a5a5a5;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:768px){.ad{min-height:90px;max-width:728px}}

/* ===== SECTIONS ===== */
.section{padding:36px 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.shead .m-line{margin-bottom:12px}
.shead .eyebrow{display:block;margin:10px 0 6px}
.shead a.all{font-size:.86rem;font-weight:500;color:var(--bmw);white-space:nowrap;padding-bottom:4px}
.shead a.all:hover{text-decoration:underline}

/* ===== ARTICLES · loop(post) — .mod cards from kit ===== */
.modgrid{display:grid;gap:18px}
.mod{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:20px 22px;transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;gap:12px}
.mod:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.mod .thumb{aspect-ratio:16/9;border-radius:var(--r-sm);background:linear-gradient(135deg,#0b1f33,var(--navy));display:flex;align-items:flex-end;justify-content:space-between;padding:14px;margin:-6px -6px 0}
.mod .thumb .mono-s{color:rgba(255,255,255,.65)}
.mod h3{font-size:1.05rem;font-weight:500;font-family:var(--head);line-height:1.32}
.mod p{color:var(--ink-2);font-size:.88rem}
.mod .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}

/* ===== BROCHURES · CPT brochure — Diia doc-card gradients ===== */
.docgrid{display:grid;gap:14px}
.doc{border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:16px;min-height:190px;transition:transform .18s,box-shadow .18s}
.doc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.doc.g1{background:var(--gr-1)}.doc.g2{background:var(--gr-2)}.doc.g3{background:var(--gr-3)}
.doc .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.doc .top .mono-s{color:rgba(0,0,0,.55)}
.doc .pdf{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;background:var(--ink);color:#fff;border-radius:7px;padding:5px 8px}
.doc b{font-family:var(--head);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.doc .meta{font-size:.78rem;color:rgba(0,0,0,.55)}
.doc .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.doc .foot .btn{background:var(--ink);color:#fff}
.doc .foot .btn:hover{background:#2b2b2b}

/* ===== SPECS · CPT specs ===== */
.spec-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:20px 22px}
.spec-card .segmented{margin-bottom:6px}
.spec-table{width:100%;border-collapse:collapse;font-size:.88rem}
.spec-table tr{border-top:1px solid var(--line)}
.spec-table tr:first-child{border-top:0}
.spec-table td{padding:13px 4px;vertical-align:top}
.spec-table td:first-child{color:var(--ink-2);width:48%}
.spec-table td:last-child{text-align:right;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.spec-table td:last-child small{font-family:var(--body);color:var(--ink-2);font-weight:400}
.spec-note{margin-top:14px;font-size:.74rem;color:var(--ink-2)}

/* ===== FOOTER · footer.php ===== */
.footer{border-top:1px solid var(--line);margin-top:52px;padding:40px 0 30px;background:var(--paper-2)}
.footer .logo b{font-size:.95rem}
.fgrid{display:grid;gap:26px;margin-top:26px}
.footer h4{font-size:.86rem;font-weight:700;margin-bottom:10px}
.footer a.fl{display:block;font-size:.86rem;color:var(--ink-2);padding:4px 0}
.footer a.fl:hover{color:var(--ink)}
.legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-2);font-size:.72rem;color:var(--ink-2);line-height:1.6}

/* ===== ≥768px ===== */
@media(min-width:768px){
  .burger{display:none}
  .nav{display:flex}
  .hero{padding:80px 0 44px}
  .section{padding:48px 0}
  .modgrid{grid-template-columns:repeat(3,1fr)}
  .docgrid{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:2fr 1fr 1fr 1fr}
}

/* ===== ARTICLE · single.php ===== */
.nav a[aria-current="page"]{color:var(--ink)}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--ink-2);padding:22px 0 0}
.crumbs a:hover{color:var(--ink)}
.art-head{padding:16px 0 6px;max-width:800px}
.art-head h1{margin-top:16px;font-size:clamp(1.7rem,3.8vw,2.5rem)}
.art-head .lead{margin-top:16px}
.art-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-family:var(--mono);font-size:.74rem;color:var(--ink-2);align-items:center}
.art-meta b{color:var(--ink);font-weight:500}
.art-banner{margin-top:28px;border-radius:var(--r);background:var(--gr-2);padding:24px 26px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;min-height:180px}
.art-banner .mono-s{color:rgba(0,0,0,.55)}
.art-banner>div>.mono-s{display:block;margin-bottom:10px}
.art-banner b{font-family:var(--head);font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
.toc{display:flex;gap:8px;overflow-x:auto;padding:20px 0 2px;scrollbar-width:none}
.toc a{flex:none;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 16px;font-size:.82rem;font-weight:500;color:var(--ink-2)}
.toc a:hover{border-color:var(--ink);color:var(--ink)}

.art-grid{display:grid;gap:36px;padding:6px 0 36px}
@media(min-width:1024px){.art-grid{grid-template-columns:minmax(0,720px) 300px;gap:56px}}

.prose{font-size:.98rem;line-height:1.72;color:#161616}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:1.42rem;margin-top:2.1em}
.prose h2 .m-line{display:flex;margin-bottom:12px}
.prose h3{font-size:1.1rem;font-weight:500;font-family:var(--head);margin-top:1.8em}
.prose ul{padding-left:1.25em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--bmw)}
.prose a{color:var(--bmw);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--bmw);padding:4px 0 4px 20px;color:var(--ink-2);font-weight:300;font-size:1.06rem}
.callout{background:var(--bmw-bg);border-radius:var(--r-sm);padding:18px 20px;font-size:.9rem;line-height:1.6}
.callout b{font-weight:500}
.facts{border:1px solid var(--line);border-radius:var(--r);padding:10px 22px;background:#fff}
.facts .mono-s{display:block;padding:10px 4px 2px}
.doc.doc-inline{min-height:0;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.doc.doc-inline .foot{margin-top:0}
.byline{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);margin-top:2.4em;padding-top:1.5em}
.byline .ava{flex:none;width:44px;height:44px;border-radius:50%;background:var(--gr-1);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:.85rem}
.byline b{font-size:.9rem;font-weight:500;display:block}
.byline span{font-size:.76rem;color:var(--ink-2)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.6em}

.sidebar{display:none}
@media(min-width:1024px){
  .sidebar{display:block}
  .side-sticky{position:sticky;top:calc(var(--hh) + 20px);display:flex;flex-direction:column;gap:18px}
}
.ad-side{min-height:600px;margin:0;max-width:none}
.side-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff}
.side-card h4{font-family:var(--head);font-size:.95rem;margin-bottom:6px}
.side-card a.sl{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.side-card a.sl:hover{color:var(--bmw)}
.side-card a.sl:first-of-type{border-top:0;padding-top:4px}

/* ===== SPECS PAGE · single-specs.php ===== */
.gallery{display:grid;gap:10px;margin-top:28px}
.ph{border-radius:var(--r-sm);background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:#a5a5a5;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px}
.ph-main{aspect-ratio:16/9;border-radius:var(--r)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumbs .ph{aspect-ratio:4/3;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.thumbs .ph:hover{border-color:var(--line-2)}
.thumbs .ph.on{border-color:var(--bmw);background:var(--bmw-bg);color:var(--navy)}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
@media(min-width:768px){.quick{grid-template-columns:repeat(4,1fr)}}
.q{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:#fff}
.q b{font-family:var(--mono);font-size:1.18rem;font-weight:700;font-variant-numeric:tabular-nums;display:block}
.q b small{font-family:var(--body);font-size:.72rem;font-weight:400;color:var(--ink-2)}
.q span{font-size:.72rem;color:var(--ink-2)}
.tables{display:grid;gap:18px;margin-top:4px}
@media(min-width:900px){.tables{grid-template-columns:1fr 1fr;align-items:start}}
.tgroup{border:1px solid var(--line);border-radius:var(--r);padding:12px 22px 14px;background:#fff}
.tgroup .mono-s{display:block;padding:10px 4px 4px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);background:linear-gradient(135deg,#0b1f33,var(--navy));display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.video .play{width:76px;height:76px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2);transition:transform .15s}
.video:hover .play{transform:scale(1.07)}
.video .play i{width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--bmw);margin-left:5px}
.video .cap{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.6);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.spec-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:30px 0 18px}

/* ============================================================
   ДОПОЛНЕНИЯ ТЕМЫ — то, чего нет в макетах, но требует WordPress
   ============================================================ */

/* ===== служебное ===== */
html{-webkit-tap-highlight-color:transparent}
.drawer__close:focus-visible,.burger:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:50%}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:12px 20px;background:var(--ink);color:#fff;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0;top:0}
body.admin-bar .khead{top:32px}
@media(max-width:782px){body.admin-bar .khead{top:46px}}
body.admin-bar .side-sticky{top:calc(var(--hh) + 52px)}
img{max-width:100%;height:auto;display:block}
.is-hidden{display:none!important}
.nowrap{white-space:nowrap}

/* ===== мобильное меню (в макете была только кнопка) ===== */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.drawer[data-open="true"]{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .22s}
.drawer[data-open="true"] .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(340px,88vw);background:#fff;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;overflow-y:auto}
.drawer[data-open="true"] .drawer__panel{transform:none}
.drawer__head{height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 20px;border-bottom:1px solid var(--line);flex:none}
.drawer__close{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1}
.drawer__nav{padding:14px 20px 30px}
.drawer__nav ul{list-style:none}
.drawer__nav li{border-bottom:1px solid var(--line)}
.drawer__nav a{display:block;padding:15px 0;font-family:var(--head);font-weight:500;font-size:1rem}
.drawer__nav .sub-menu{padding-left:14px}
.drawer__nav .sub-menu a{font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--ink-2);padding:11px 0}
.drawer__nav li:last-child{border-bottom:0}
.drawer .searchfield{margin:18px 0 0}
@media(min-width:768px){.drawer{display:none}}
body.is-locked{overflow:hidden}

/* подменю в десктопной навигации */
.nav{position:relative}
.nav .menu,.nav>ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav li{position:relative}
.nav .sub-menu{position:absolute;top:100%;left:-14px;min-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:8px;list-style:none;display:none;flex-direction:column;gap:0}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.nav .sub-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:.88rem}
.nav .sub-menu a:hover{background:var(--paper-2);color:var(--ink)}
.khead .in>.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--paper-2)}
.icon-btn svg{width:19px;height:19px}

/* ===== заголовок архива / таксономии ===== */
.arch-head{padding:26px 0 6px;max-width:820px}
.arch-head h1{margin-top:14px;font-size:clamp(1.7rem,3.8vw,2.5rem)}
.arch-head .lead{margin-top:14px}
.arch-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:22px 0 24px}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;max-width:100%}
.filters::-webkit-scrollbar,.toc::-webkit-scrollbar,.segmented::-webkit-scrollbar{display:none}
.filters a{flex:none;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 16px;font-size:.82rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.filters a:hover{border-color:var(--ink);color:var(--ink)}
.filters a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.count{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);white-space:nowrap}

/* ===== сетки ===== */
.modgrid--2{grid-template-columns:1fr}
.docgrid--4{grid-template-columns:1fr}
@media(min-width:768px){
  .modgrid--2{grid-template-columns:repeat(2,1fr)}
  .docgrid--4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){.docgrid--4{grid-template-columns:repeat(4,1fr)}}
.mod .thumb img,.doc .cover img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mod .thumb{position:relative;overflow:hidden}
.mod .thumb>.mono-s{position:relative;z-index:1}
.mod .thumb img{position:absolute;inset:0;border-radius:0}
.mod .thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.mod .thumb img+.mono-s{z-index:2}

/* ===== пустое состояние ===== */
.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:44px 24px;text-align:center;color:var(--ink-2)}
.empty b{display:block;font-family:var(--head);color:var(--ink);font-size:1.05rem;margin-bottom:6px}

/* ===== пагинация ===== */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:34px 0 8px}
.pager .page-numbers{min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:500;font-family:var(--mono)}
.pager .page-numbers:hover{border-color:var(--ink)}
.pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .dots{border-color:transparent}

/* ===== хлебные крошки: разделители ===== */
.crumbs span[aria-hidden]{color:var(--line-2)}

/* ===== таймлайн поколений (страница модели) ===== */
.gens{display:grid;gap:12px;margin-top:6px}
@media(min-width:768px){.gens{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.gens{grid-template-columns:repeat(3,1fr)}}
.gen{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:#fff;display:flex;flex-direction:column;gap:8px;transition:transform .18s,box-shadow .18s,border-color .18s}
.gen:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.gen b{font-family:var(--head);font-size:1.05rem;letter-spacing:-.01em}
.gen .yrs{font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.gen p{font-size:.85rem;color:var(--ink-2)}
.gen .bar{height:4px;border-radius:2px;background:var(--bmw-bg);overflow:hidden}
.gen .bar i{display:block;height:100%;background:var(--bmw)}

/* годы выпуска — плитки */
.years{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.years a{font-family:var(--mono);font-size:.8rem;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:7px 14px;color:var(--ink-2)}
.years a:hover{border-color:var(--ink);color:var(--ink)}

/* ===== карточка двигателя / завода ===== */
.kv{display:grid;gap:0}
.kv .row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:.88rem}
.kv .row:first-child{border-top:0}
.kv .row dt{color:var(--ink-2)}
.kv .row dd{font-family:var(--mono);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}

/* ===== сравнение: две колонки ===== */
.cmp-table{width:100%;border-collapse:collapse;font-size:.88rem}
.cmp-table th{font-family:var(--head);font-size:.9rem;font-weight:700;text-align:right;padding:14px 8px;border-bottom:1px solid var(--line-2)}
.cmp-table th:first-child{text-align:left;color:var(--ink-2);font-family:var(--body);font-weight:400}
.cmp-table td{padding:13px 8px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.cmp-table td:first-child{text-align:left;color:var(--ink-2);font-family:var(--body);width:40%}
.cmp-table td.win{color:var(--bmw);font-weight:700}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}

/* ===== просмотр PDF (страница брошюры) ===== */
.pdfbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.pdfbox iframe,.pdfbox embed{width:100%;height:min(80vh,900px);border:0;display:block}
.pdfbox__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}
.ocr{margin-top:26px}
.ocr__body{font-size:.9rem;line-height:1.7;color:#2b2b2b;column-gap:34px}
@media(min-width:900px){.ocr__body{column-count:2}}
.ocr details>summary{cursor:pointer;font-weight:500;padding:12px 0;list-style:none}
.ocr details>summary::-webkit-details-marker{display:none}
.ocr details>summary:before{content:"+ ";color:var(--bmw);font-family:var(--mono)}
.ocr details[open]>summary:before{content:"− "}

/* ===== контент из редактора (Гутенберг) ===== */
.prose img,.prose figure{border-radius:var(--r-sm)}
.prose figure{margin-top:1.6em}
.prose figcaption{font-size:.78rem;color:var(--ink-2);margin-top:8px;text-align:center}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem}
.prose table th{text-align:left;font-weight:500;font-family:var(--head);padding:12px 6px;border-bottom:1px solid var(--line-2)}
.prose table td{padding:12px 6px;border-top:1px solid var(--line)}
.prose .alignwide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
@media(min-width:1024px){.prose .alignwide{margin-left:-60px;margin-right:-60px;max-width:none}}
.prose .alignleft{float:left;margin:0 1.4em .8em 0;max-width:50%}
.prose .alignright{float:right;margin:0 0 .8em 1.4em;max-width:50%}
.prose .aligncenter{margin-left:auto;margin-right:auto}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--paper-2);padding:18px;border-radius:var(--r-sm);overflow-x:auto}
.prose ol{padding-left:1.3em}
.prose ol li::marker{color:var(--bmw);font-family:var(--mono);font-size:.9em}

/* ===== FAQ ===== */
.faq details{border-top:1px solid var(--line);padding:2px 0}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:500;font-family:var(--head);font-size:1rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:6px;top:22px;width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary:after{transform:rotate(-135deg);top:26px}
.faq .a{padding:0 0 18px;color:var(--ink-2);font-size:.92rem;line-height:1.65}

/* ===== формы ===== */
input[type=text],input[type=email],input[type=url],input[type=search],input[type=number],textarea,select{
  width:100%;font-family:var(--body);font-size:.94rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px;background:#fff;color:var(--ink)}
textarea{min-height:140px;resize:vertical}
label{display:block;font-size:.84rem;font-weight:500;margin-bottom:6px}
.form-row+.form-row{margin-top:16px}

/* ===== виджеты в подвале/сайдбаре ===== */
.widget+.widget{margin-top:18px}
/* блочные виджеты WordPress рисуют свои заголовки и игнорируют before_title */
.widget h1,.widget h2,.widget h3,.widget h4,.widget .wp-block-heading{
  font-family:var(--head);font-size:.95rem;font-weight:700;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.widget .wp-block-search__inside-wrapper{display:flex;gap:8px}
.widget .wp-block-search__input{flex:1;min-width:0}
.widget .wp-block-search__button{background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);padding:0 16px;font-family:var(--body);font-size:.84rem;font-weight:500;cursor:pointer}
.widget .wp-block-latest-posts,.widget .wp-block-categories,.widget .wp-block-archives{padding-left:0}
.widget .wp-block-latest-posts li,.widget .wp-block-categories li,.widget .wp-block-archives li{list-style:none}
.widget .wp-block-latest-posts a,.widget .wp-block-categories a,.widget .wp-block-archives a{
  display:block;padding:9px 0;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.widget li:first-child a{border-top:0}
.widget a:hover{color:var(--bmw)}
.widget ul{list-style:none}
.widget ul li a{display:block;padding:9px 0;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.widget ul li:first-child a{border-top:0}
.widget ul li a:hover{color:var(--bmw)}

/* ===== рекламные слоты ===== */
.ad>ins,.ad>iframe,.ad>div{max-width:100%}
.ad:empty{display:none}
.ad--placeholder{color:#a5a5a5}

/* ===== печать ===== */
@media print{
  .khead,.footer,.ad,.sidebar,.toc,.drawer,.pager,.filters,.related-block{display:none!important}
  body{font-size:11pt}
  .art-grid{display:block}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:.75em;color:#666}
}

/* ===== VIN-ДЕКОДЕР ===== */
.vin{margin-top:26px}
.vin__form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vin__form input{flex:1;min-width:240px;font-family:var(--mono);font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 18px;border-radius:var(--r-pill);border:1px solid var(--line-2)}
.vin__form input:focus{border-color:var(--bmw)!important}
.vin__form .btn{flex:none}
.vin__hint{margin-top:10px;font-size:.78rem;color:var(--ink-2)}
.vin__result{margin-top:26px}
.vin__result:empty{display:none}
.vin__warn{background:#fff4e5;border-radius:var(--r-sm);padding:14px 18px;font-size:.86rem;margin-bottom:18px}
.vin__links{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px 18px;background:#fff}
.vin__links .mono-s{display:block;margin-bottom:12px}
.vin__links .years a{border-color:var(--bmw);color:var(--bmw)}
.vin__links .years a:hover{background:var(--bmw);border-color:var(--bmw);color:#fff}
.vin.is-loading .vin__result{opacity:.45}
.vin__map{display:flex;gap:2px;margin:22px 0 6px;overflow-x:auto;scrollbar-width:none}
.vin__map span{flex:none;width:30px;height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.92rem;font-weight:700;border-radius:7px;background:var(--paper-2)}
.vin__map span.g1{background:var(--bmw-bg);color:var(--navy)}
.vin__map span.g2{background:#e9f6ee;color:#1a6b3c}
.vin__map span.g3{background:#fdeaea;color:var(--mred)}
.vin__map span.g4{background:var(--navy-bg);color:var(--navy)}
.vin__legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--ink-2)}
.vin__legend b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}