/* Terminale Mobile — дизайн-система (форк движка).
   Токены ниже — значения по умолчанию (запасная палитра); пресет A/B и настройки переопределяют их
   вставкой <style>:root{…}</style> из app/theme.py. Цвет акцента — только для действий и
   измерительных пометок. */
:root {
  --paper:#F0F4F4; --ink:#1B292E; --accent:#14A5A8; --text:#142226;
  --paper-2:#E8EDED; --card:#F9FBFB; --muted:#4A5A60; --line:#D0D9DA; --line-strong:#9FACAE;
  --grid-minor:rgba(20,34,38,.06); --grid-major:rgba(20,34,38,.11);
  --ink-2:#3A484D; --ink-fg:#EBF0F0; --ink-muted:#A7B3B6; --ink-line:#374549;
  --accent-strong:#118A8D; --on-accent:#142226; --accent-on-ink:#14A5A8; --accent-text:#142226; --mark:#4A5A60;
  --radius:4px; --radius-sm:3px; --radius-lg:8px;
  --font-display:"IBM Plex Sans Condensed","Arial Narrow","Segoe UI",sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --display-weight:700; --display-tracking:-.005em;
  --head-h:68px; --gutter:24px; --maxw:1240px;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--head-h) + 64px); }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; font:16px/1.6 var(--font-body); color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--text); text-decoration-color:var(--line-strong); text-underline-offset:3px; }
a:hover { text-decoration-color:currentColor; }
:focus-visible { outline:2px solid var(--accent-text); outline-offset:2px; }
.topbar :focus-visible, .band :focus-visible, .site-footer :focus-visible { outline-color:var(--accent-on-ink); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.sr, .skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus { position:fixed; z-index:100; top:8px; left:8px; padding:8px 14px; background:var(--ink); color:var(--ink-fg); }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
main.wrap { min-height:50vh; padding-bottom:24px; }
main.full { display:block; }
.muted { color:var(--muted); }
h1, h2, h3 { font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); color:var(--ink); line-height:1.1; }
h1 { font-size:clamp(2.1rem, 4.4vw, 3.5rem); margin:.3em 0 .4em; }
h2 { font-size:1.6rem; margin:1.4em 0 .5em; } h3 { font-size:1.15rem; margin:.4em 0; }
.lead { font-size:1.125rem; color:var(--muted); max-width:38em; }
.kicker { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.kicker .ico { color:var(--mark); flex:none; }
.ico { display:inline-block; vertical-align:-3px; flex:none; }

/* ── координатная сетка и «лунка» под фото ── */
.gridbg, .well, .hero-plate, .ph {
  background-color:var(--card);
  background-image:linear-gradient(var(--grid-minor) 1px,transparent 1px), linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
                   linear-gradient(var(--grid-major) 1px,transparent 1px), linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:12px 12px,12px 12px,60px 60px,60px 60px; background-position:-1px -1px;
}
.well, .hero-plate { position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.well::before, .well::after, .hero-plate::before, .hero-plate::after {   /* перекрестья-маркеры в углах */
  content:""; position:absolute; width:13px; height:13px; z-index:2; pointer-events:none; color:var(--mark);
  background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat, linear-gradient(currentColor,currentColor) center/100% 1px no-repeat; }
.well::before, .hero-plate::before { left:8px; top:8px; } .well::after, .hero-plate::after { right:8px; bottom:8px; }
.well img, .hero-photo img { mix-blend-mode:multiply; }

/* ── кнопки ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 18px; border:1px solid transparent;
  border-radius:var(--radius-sm); background:var(--accent); color:var(--on-accent); font:600 15px/1.2 var(--font-body); cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--accent-strong); text-decoration:none; }
.btn-accent { background:var(--accent); color:var(--on-accent); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line-strong); padding:9px 14px; }
.btn-ghost:hover { background:var(--paper-2); border-color:var(--ink); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover { background:var(--ink); color:var(--ink-fg); }
.btn-dark { background:var(--ink); color:var(--ink-fg); } .btn-dark:hover { background:var(--ink-2); }
.btn-lg { min-height:50px; padding:12px 24px; font-size:16px; }

/* ── верхняя строка и шапка ── */
.topbar { background:var(--ink); color:var(--ink-fg); font-size:12.5px; }
.topbar a { color:var(--ink-fg); text-decoration:none; } .topbar a:hover { text-decoration:underline; }
.topbar-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:34px; }
@media (min-width:901px) { /* на ПК верхняя полоса выше и крупнее */
  .topbar { font-size:14px; } .topbar-row { min-height:50px; }
  .top-status, .langs a { font-size:14px; } .top-contacts { gap:22px; }
}
@media (min-width:901px) and (max-width:1300px) { /* ноутбуки: верхняя полоса в одну строку */
  .topbar { font-size:13px; } .top-status, .langs a { font-size:12.5px; } .top-contacts { gap:14px; }
}
@media (min-width:901px) and (max-width:1200px) { /* мессенджеры — только значки, имя остаётся для экранных чтецов */
  .top-contacts .msgr span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .top-contacts { gap:12px; }
}
.geo { display:inline-flex; align-items:center; gap:8px; color:var(--ink-muted); font-size:12px; letter-spacing:.02em; } .geo .ico { color:var(--accent-on-ink); }
.top-contacts { display:flex; align-items:center; gap:18px; margin-left:auto; } .top-contacts a { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.langs { display:flex; gap:2px; } .langs a { padding:2px 7px; text-transform:uppercase; font-family:var(--font-mono); font-size:12px; color:var(--ink-muted); border-bottom:2px solid transparent; }
.langs a.active { color:var(--ink-fg); border-bottom-color:var(--accent-on-ink); }
.site-header { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:3px solid var(--accent); }
.header-row { display:flex; align-items:stretch; gap:28px; min-height:var(--head-h); }
.brand { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:12px 0; color:var(--ink); text-decoration:none; } /* воздух вокруг логотипа */
.brand-logo { display:block; height:44px; width:auto; }
.brand-sub { width:206px; max-width:100%; font:500 9.5px/1.3 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.nav-panel { display:flex; align-items:stretch; flex:1; gap:22px; min-width:0; }
.nav { display:flex; align-items:stretch; gap:6px; flex:1; }
.nav-link { position:relative; display:inline-flex; align-items:center; gap:6px; padding:0 12px; color:var(--text); font-size:15.5px; font-weight:600; text-decoration:none; }
.nav-link::after { content:""; position:absolute; left:var(--nl-pad,12px); right:var(--nl-pad,12px); bottom:14px; height:3px; background:var(--accent); opacity:0; }
.nav-link:hover::after, .nav-link[aria-current]::after, .drop-wrap:hover .nav-link::after, .drop-wrap:focus-within .nav-link::after { opacity:1; }
.nav-link:hover { text-decoration:none; }
/* «Каталог» — оранжевая кнопка (тёмный текст на акценте: контраст ≈ 7:1) */
.nav-catalog { align-self:center; min-height:42px; margin-right:8px; border-radius:var(--radius-sm); background:var(--accent); color:var(--on-accent); }
.nav-catalog::after { display:none; }
.nav-catalog:hover, .mega-wrap:hover .nav-catalog, .mega-wrap:focus-within .nav-catalog { background:var(--accent-strong); }
.mega-wrap { display:flex; }
.nav-link { white-space:nowrap; }
.cart-link { white-space:nowrap; }
@media (min-width:1001px) { .cart-desktop .cart-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } }
button.nav-link { background:none; border:0; font:inherit; font-size:15.5px; font-weight:600; cursor:pointer; }
.drop-wrap { position:relative; display:flex; }
.drop { display:none; position:absolute; left:0; top:100%; min-width:240px; margin:0; padding:8px; list-style:none; background:var(--paper); border:1px solid var(--line-strong); border-top:3px solid var(--accent); box-shadow:0 18px 30px -18px rgba(0,0,0,.35); z-index:50; }
.drop-wrap:hover .drop, .drop-wrap:focus-within .drop, .drop-wrap.open .drop { display:block; }
.drop a { display:block; padding:10px 12px; color:var(--text); text-decoration:none; white-space:nowrap; border-radius:var(--radius-sm); }
.drop a:hover { background:var(--card); }
.drop a[aria-current] { font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
.mega { display:none; position:absolute; left:0; right:0; top:calc(100% - 3px); background:var(--paper); border-top:3px solid var(--accent); border-bottom:1px solid var(--line-strong); box-shadow:0 18px 30px -18px rgba(0,0,0,.35); }
.mega-wrap:hover .mega, .mega-wrap:focus-within .mega, .mega-wrap.open .mega { display:block; }
.mega-list { list-style:none; margin:0 auto; padding:18px var(--gutter) 22px; max-width:var(--maxw); display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 20px; }
.mega-list a { display:grid; grid-template-columns:56px 1fr; column-gap:14px; align-items:center; padding:10px; text-decoration:none; border:1px solid transparent; border-radius:var(--radius); }
.mega-list a:hover { background:var(--card); border-color:var(--line); }
.mega-thumb { grid-row:span 2; width:56px; height:56px; background:var(--card); border:1px solid var(--line); display:block; }
.mega-thumb img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; display:block; }
.mega-name { font:var(--display-weight) 1.1rem/1.15 var(--font-display); color:var(--ink); } .mega-n { font-size:12px; color:var(--muted); }
.search { display:flex; align-items:center; align-self:center; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--card); }
.search input { border:0; background:transparent; padding:9px 4px 9px 12px; width:190px; font:inherit; font-size:14px; color:var(--text); min-width:0; } .search input:focus-visible { outline:0; }
.search:focus-within { outline:2px solid var(--accent-text); outline-offset:2px; }
.search button { border:0; background:transparent; padding:0 12px; color:var(--ink); cursor:pointer; align-self:stretch; }
.cart-link { display:inline-flex; align-items:center; gap:8px; align-self:center; position:relative; padding:9px 12px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; border:1px solid var(--ink); border-radius:var(--radius-sm); min-height:42px; }
.cart-link:hover { background:var(--ink); color:var(--ink-fg); }
.count { display:inline-block; min-width:20px; padding:1px 6px; border-radius:99px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:600; text-align:center; line-height:1.5; }
.cart-mobile, .burger { display:none; }

/* ── заголовки разделов «паспорта» ── */
.section { padding:56px 0 8px; }
.section-h { display:flex; align-items:baseline; gap:14px; position:relative; margin:0 0 28px; padding-bottom:12px; border-bottom:1px solid var(--ink); font-size:clamp(1.5rem,2.6vw,2rem); }
.section-h::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:6px; background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px); opacity:.55; }
.sh-no { font-size:13px; font-weight:500; color:var(--muted); letter-spacing:.06em; }

/* ── герой ── */
.hero { padding:44px 0 56px; border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6.5fr); gap:48px; align-items:center; }
.hero h1 { margin:.1em 0 .35em; text-wrap:balance; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-count { margin:26px 0 0; padding-top:14px; border-top:1px solid var(--line-strong); display:inline-block; font-size:13px; color:var(--muted); }
.hero-fig { margin:0; }
.hero-plate { aspect-ratio:5/4; }
.hero-photo { position:absolute; inset:8% 28% 8%; display:block; }
.hero-photo picture, .hero-photo img { display:block; width:100%; height:100%; }
.hero-photo img { object-fit:contain; }
.callout { position:absolute; z-index:3; width:41%; display:flex; align-items:center; gap:8px; }
.callout .co-label { flex:none; max-width:9.6rem; padding:6px 9px; background:var(--paper); border:1px solid var(--line-strong); border-left:3px solid var(--ink); }
.co-k { display:block; font-size:11px; line-height:1.25; color:var(--muted); } .co-v { display:block; font-size:14px; font-weight:600; line-height:1.3; color:var(--ink); }
.leader { position:relative; flex:1; height:2px; margin-top:-1px; background:var(--ink); }
.leader::after { content:""; position:absolute; right:-4px; top:-4px; width:10px; height:9px; border-radius:50%; background:var(--accent); border:1.5px solid var(--ink); }
.c1 { left:4%; top:12%; } .c3 { left:4%; top:60%; }
.c2, .c4 { right:4%; flex-direction:row-reverse; } .c2 { top:27%; } .c4 { top:76%; }
.c2 .leader::after, .c4 .leader::after { right:auto; left:-4px; }
.axis { position:absolute; z-index:3; font-size:11px; color:var(--muted); } .axis-x { right:12px; bottom:30px; } .axis-y { left:12px; top:32px; }
.hero-fig figcaption { display:flex; gap:10px; margin-top:10px; font-size:12px; color:var(--muted); letter-spacing:.04em; } .hero-fig figcaption a { color:var(--text); }
@media (prefers-reduced-motion:no-preference) {
  .hero-photo { animation:reveal .9s .15s cubic-bezier(.2,.7,.2,1) both; }
  .leader { animation:draw .7s calc(.55s + var(--i,0) * .16s) cubic-bezier(.2,.7,.2,1) both; transform-origin:left center; }
  .c2 .leader, .c4 .leader { transform-origin:right center; }
  .co-label { animation:fade .45s calc(.45s + var(--i,0) * .16s) both; }
  .c1 { --i:0; } .c2 { --i:1; } .c3 { --i:2; } .c4 { --i:3; }
  .leader::after { animation:fade .3s calc(1s + var(--i,0) * .16s) both; }
}
@keyframes reveal { from { opacity:0; transform:translateY(8px) scale(.985); filter:blur(3px); } }
@keyframes draw { from { transform:scaleX(0); } }
@keyframes fade { from { opacity:0; } }

/* ── оглавление паспорта ── */
.toc { list-style:none; margin:0; padding:0; }
.toc-row { display:grid; grid-template-columns:4rem minmax(0,1fr) auto 76px 28px; align-items:center; gap:20px; padding:14px 8px 14px 0; border-bottom:1px solid var(--line-strong);
  text-decoration:none; color:var(--ink); position:relative; transition:background .15s; }
.toc-row:hover { background:var(--card); text-decoration:none; }
.toc-no { font-size:14px; color:var(--muted); padding-left:8px; border-left:3px solid transparent; transition:border-color .15s,color .15s; }
.toc-row:hover .toc-no { color:var(--ink); border-left-color:var(--accent); }
.toc-title strong { display:block; font:var(--display-weight) clamp(1.35rem,2.4vw,1.9rem)/1.1 var(--font-display); letter-spacing:var(--display-tracking); }
.toc-title span { display:block; margin-top:2px; color:var(--muted); font-size:14px; }
.toc-count { font-size:13px; color:var(--muted); white-space:nowrap; }
.toc-thumb { width:72px; height:56px; background:var(--card); border:1px solid var(--line); }
.toc-thumb .cat-img { display:block; width:100%; height:100%; aspect-ratio:auto; background:none; }
.toc-thumb .ph { min-height:0; padding:0; } .toc-thumb .ph-model, .toc-thumb .ph-note { display:none; }
.toc-thumb img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; display:block; }
.toc-arrow { color:var(--ink); transition:transform .15s; } .toc-row:hover .toc-arrow { transform:translateX(4px); }
.toc-page { margin:8px 0 36px; border-top:1px solid var(--ink); }

/* ── плитки товаров ── */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.product-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--ink); }
.card-img { position:relative; display:block; aspect-ratio:4/3; border-bottom:1px solid var(--line); overflow:hidden; background-color:var(--paper-2);
  background-image:linear-gradient(var(--grid-minor) 1px,transparent 1px), linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px), linear-gradient(var(--grid-major) 1px,transparent 1px), linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:12px 12px,12px 12px,60px 60px,60px 60px; }
.card-img picture { display:contents; }
.card-img img { width:100%; height:100%; object-fit:contain; padding:7%; display:block; mix-blend-mode:multiply; }
.badge { display:inline-block; padding:2px 8px; background:var(--accent); color:var(--on-accent); font:600 11px/1.6 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.badges { display:inline-flex; flex-wrap:wrap; gap:6px; }
.card-img .badges, .compare-img .badges { position:absolute; left:10px; top:10px; right:10px; }
.badge-hit { background:var(--ink); color:var(--ink-fg); }
.badge-promo { background:#C62828; color:#FFFFFF; }
.card-body { display:flex; flex-direction:column; flex:1; padding:14px 16px 16px; }
.card .kicker { margin:0; font-size:11px; }
.card h3 { margin:2px 0 4px; font-size:1.9rem; line-height:1; }
.card h3 a { color:var(--ink); text-decoration:none; } .card h3 a:hover { text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--accent-text); }
.tagline { margin:4px 0 12px; color:var(--muted); font-size:14px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tile-specs { list-style:none; padding:0; margin:0 0 12px; display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.tile-specs li { display:flex; flex-direction:column; gap:1px; padding:7px 0 6px; border-top:1px solid var(--line); min-width:0; }
.tile-specs .k { font-size:11px; line-height:1.25; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile-specs .v { font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; line-height:1.3; }
.meta { margin:auto 0 10px; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:auto; padding-top:2px; } .inline { display:inline; margin:0; }
.card .card-actions .btn { min-height:40px; font-size:14px; padding:8px 14px; }
.avail { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.avail::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.avail-in_stock { color:#17702f; } .avail-in_stock::before { background:#1f9a47; } .avail-expected { color:#8a5a00; } .avail-expected::before { background:#d99a1b; }
.price { font-family:var(--font-mono); font-weight:600; } .price-request { color:var(--muted); font-size:13px; } .big { font-size:1.25rem; margin:8px 0; }

/* заглушка «нет фото» */
.ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; height:100%; min-height:140px; text-align:center; color:var(--muted); padding:12px; }
.ph-ico { width:34%; max-width:110px; min-width:56px; opacity:.75; }
.ph-model { font-size:15px; font-weight:600; color:var(--ink); } .ph-note { font-size:12px; letter-spacing:.04em; text-transform:uppercase; }

/* ── страница раздела ── */
.crumbs { margin:20px 0 6px; font-size:13px; color:var(--muted); } .crumbs a { color:var(--muted); text-decoration:none; } .crumbs a:hover { color:var(--ink); text-decoration:underline; }
.page-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--ink); margin-bottom:22px; }
.page-head h1 { margin:.2em 0 .25em; } .page-head .count { background:none; color:var(--muted); font-size:13px; padding:0; }
.chips { display:inline-flex; max-width:100%; overflow-x:auto; margin:6px 0 26px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--card); }
.chip { flex:none; display:inline-flex; gap:8px; align-items:center; padding:10px 16px; color:var(--text); text-decoration:none; font-size:14px; font-weight:500; border-right:1px solid var(--line); white-space:nowrap; }
.chip:last-child { border-right:0; } .chip:hover { background:var(--paper-2); }
.chip .mono { font-size:12px; color:var(--muted); } .chip.on { background:var(--ink); color:var(--ink-fg); } .chip.on .mono { color:var(--ink-muted); }
.listing { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.listing.has-filters { grid-template-columns:260px minmax(0,1fr); }     /* этап 3b: колонка фильтров слева */
.filters { position:sticky; top:calc(var(--head-h) + 16px); align-self:start; }
.cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:14px 0; }
.cat { display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink); text-decoration:none; }
.cat:hover { border-color:var(--ink); } .cat-img { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); } .cat-img img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; display:block; }
.cat-n { font-size:12px; color:var(--muted); }

/* ── карточка товара ── */
.product { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:start; padding-top:8px; }
.gallery-main { aspect-ratio:5/4; } .gallery-main picture { display:contents; } .gallery-main img { width:100%; height:100%; object-fit:contain; padding:6%; display:block; }
.gallery-thumbs { list-style:none; display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:10px 0 0; }
.gallery-thumbs a { display:block; width:84px; height:64px; border:1px solid var(--line-strong); background:var(--card); overflow:hidden; } .gallery-thumbs a.on { border:2px solid var(--ink); }
.gallery-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-strip { display:none; }
.info .kicker { margin-top:8px; }
.model-code { margin:0; font:var(--display-weight) clamp(3rem,6vw,4.6rem)/.95 var(--font-display); letter-spacing:var(--display-tracking); color:var(--ink); }
.info h1 { font-size:1.35rem; font-weight:500; margin:.35em 0 .5em; color:var(--muted); font-family:var(--font-body); letter-spacing:0; }
.chips-spec { list-style:none; padding:0; margin:18px 0; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-strong); background:var(--card); }
.chips-spec li { padding:10px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 -1px -1px 0; display:flex; flex-direction:column; gap:2px; min-width:0; }
.chips-spec .k { font-size:11.5px; line-height:1.3; color:var(--muted); } .chips-spec .v { font-size:15px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.facts { display:grid; grid-template-columns:auto 1fr; gap:4px 20px; margin:14px 0; font-size:14px; } .facts dt { color:var(--muted); } .facts dd { margin:0; }
.avail-row { margin:14px 0 0; }
.info .card-actions { margin-top:14px; gap:10px; }
.brochure-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:20px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:14px; }
.brochure-links .k { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.anchors { position:sticky; top:var(--head-h); z-index:40; margin-top:44px; background:var(--paper); border-top:1px solid var(--ink); border-bottom:1px solid var(--line-strong); }
.anchors .wrap { display:flex; gap:28px; overflow-x:auto; }
.anchors a { flex:none; padding:14px 0 12px; font:500 13px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--muted); border-bottom:3px solid transparent; }
.anchors a:hover { color:var(--ink); border-bottom-color:var(--ink); }
.product-body section { padding-top:52px; } .product-body { padding-bottom:20px; }
.product-body .section-h { margin-bottom:26px; }
.prose { max-width:780px; } .prose h2 { margin-top:26px; font-size:1.35rem; } .prose ul { padding-left:20px; } .prose li { margin:4px 0; }
.note-block { background:var(--card); border-left:3px solid var(--ink); padding:12px 16px; }
.datasheet { border-bottom:1px solid var(--ink); }
.spec-group { display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; padding:18px 0 14px; border-top:1px solid var(--ink); }
.spec-group h3 { margin:2px 0; font:600 12px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
table.specs { width:100%; border-collapse:collapse; margin:0; }
table.specs th, table.specs td { text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.specs tr:last-child th, table.specs tr:last-child td { border-bottom:0; }
table.specs th { width:46%; font-weight:400; color:var(--muted); font-size:14.5px; } table.specs td { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.docs { list-style:none; padding:0; margin:0; } .docs li { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line); }
.docs a { display:inline-flex; gap:12px; align-items:center; overflow-wrap:anywhere; } .docs .muted { font-size:13px; }
.pdf { padding:1px 6px; border:1px solid var(--ink); font-size:11px; font-weight:600; color:var(--ink); }
blockquote { margin:12px 0; padding:8px 16px; border-left:3px solid var(--ink); }
details { border-bottom:1px solid var(--line); padding:12px 0; } summary { cursor:pointer; font-weight:600; }

/* ── «почему мы» ── */
.why-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--line-strong); }
.why-grid li { padding:18px 22px 22px 0; margin-right:22px; border-right:1px solid var(--line); } .why-grid li:last-child { border-right:0; margin-right:0; }
.why-no { display:inline-block; font-size:13px; color:var(--on-accent); background:var(--accent); padding:1px 8px; margin-bottom:12px; }
.why-grid h3 { font-size:1.3rem; margin:0 0 6px; } .why-grid p { margin:0; color:var(--muted); font-size:15px; }

/* ── тёмная полоса-форма ── */
.band { margin-top:72px; padding:72px 0 80px; background-color:var(--ink); color:var(--ink-fg);
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px), linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:60px 60px; background-position:-1px -1px; }
.band-inline { margin-top:40px; }
.band-grid { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:56px; align-items:start; }
.band .kicker { color:var(--ink-muted); } .band .kicker .ico { color:var(--accent-on-ink); }
.band h2 { color:#fff; font-size:clamp(2rem,4vw,3rem); margin:.1em 0 .4em; } .band-copy p { color:var(--ink-muted); max-width:30em; }
.band-phone { display:inline-flex; align-items:center; gap:10px; color:var(--accent-on-ink); font-size:1.25rem; font-weight:500; text-decoration:none; }
.lead-form { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; max-width:none; margin:30px 0; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.lead-form h2 { grid-column:1/-1; margin:0; }
.lead-form label { display:grid; gap:5px; align-content:start; font-size:13px; color:var(--muted); }
.lead-form label:has(textarea), .lead-form .check, .lead-form .btn { grid-column:1/-1; }
.lead-form input, .lead-form textarea, .lead-form select { width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:#fff; font:inherit; font-size:15px; color:var(--text); }
.lead-form .check { display:flex; gap:10px; align-items:flex-start; font-size:13px; } .lead-form .check input { width:18px; min-height:18px; margin-top:3px; accent-color:var(--ink); }
.lead-form .btn { justify-self:start; min-width:200px; }
.band .lead-form { margin:0; background:color-mix(in srgb,var(--ink) 80%,#000); border-color:var(--ink-line); }
.band .lead-form label { color:var(--ink-muted); }
.band .lead-form input, .band .lead-form textarea, .band .lead-form select { background:var(--ink-2); border-color:var(--ink-line); color:#fff; }
.band .lead-form input::placeholder { color:var(--ink-muted); }
.band .lead-form .check input { accent-color:var(--accent); }
.hp { position:absolute; left:-9999px; height:0; width:0; opacity:0; }
.notice { padding:12px 16px; margin:14px auto; border-radius:var(--radius-sm); background:var(--paper-2); border-left:3px solid var(--ink); }
.notice.ok { background:#e6f4ea; border-left-color:#1f9a47; } .notice.err { background:#fbe9e9; border-left-color:#c62828; }

/* ── подвал ── */
.site-footer { background:var(--ink); color:var(--ink-fg); padding:56px 0 0; }
.site-footer a { color:var(--ink-fg); text-decoration:none; } .site-footer a:hover { text-decoration:underline; }
.band + .site-footer { border-top:1px solid var(--ink-line); }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px; }
.site-footer .brand { color:#fff; } .site-footer .brand-sub { color:var(--ink-muted); }
.site-footer .brand-logo { height:56px; }
.f-h { margin:0 0 14px; font:600 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-on-ink); }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px; }
.f-muted { color:var(--ink-muted); }
.footer-base { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:18px; padding-bottom:22px; border-top:1px solid var(--ink-line); font-size:13px; }
.footer-base .geo { color:var(--ink-muted); }

/* ── адаптив ── */
@media (max-width:1180px) {
  .cart-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .search input { width:150px; } .nav-panel { gap:14px; }
}
@media (min-width:1001px) and (max-width:1260px) { /* шапка в одну строку без горизонтальной прокрутки */
  .nav .nav-link { --nl-pad:7px; padding:0 7px; font-size:14.5px; } .nav { gap:0; }
  .search input { width:70px; }
  .cart-desktop { padding:9px 10px; gap:6px; }
}
@media (max-width:1020px) {
  .hero-grid { grid-template-columns:1fr; gap:36px; }
  .band-grid { grid-template-columns:1fr; gap:36px; }
  .why-grid { grid-template-columns:1fr 1fr; } .why-grid li:nth-child(2) { border-right:0; margin-right:0; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:1000px) {
  :root { --head-h:60px; }
  .header-row { align-items:center; justify-content:space-between; gap:12px; }
  .brand, .cart-mobile, .burger { position:relative; z-index:70; }
  .brand { margin-right:auto; }
  .cart-mobile { display:inline-flex; padding:9px 10px; }
  .burger { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 11px; background:transparent; border:1px solid var(--ink); border-radius:var(--radius-sm); cursor:pointer; }
  .burger span { display:block; height:2px; background:var(--ink); transition:transform .2s, opacity .2s; }
  .nav-open .burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav-open .burger span:nth-child(2) { opacity:0; } .nav-open .burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .cart-desktop { display:none; }
  .js .nav-panel { position:fixed; inset:0; z-index:60; flex-direction:column; align-items:stretch; gap:20px; padding:96px var(--gutter) 32px; overflow-y:auto; background:var(--paper); visibility:hidden; transform:translateX(100%); transition:transform .25s, visibility 0s .25s; }
  .js .nav-open .nav-panel { transform:none; visibility:visible; transition:transform .25s; }
  .nav-open { overflow:hidden; }
  .nav { flex-direction:column; gap:0; flex:none; }
  .nav-link { min-height:52px; padding:0; border-bottom:1px solid var(--line); font:var(--display-weight) 1.5rem/1 var(--font-display); }
  .nav-link .ico { display:none; }
  .nav-link::after { display:none; }
  .nav-link[aria-current] { box-shadow:inset 4px 0 0 var(--accent); padding-left:14px; }
  .nav-catalog { align-self:stretch; justify-content:space-between; min-height:54px; margin:0 0 10px; padding:0 16px; border-radius:var(--radius-sm); border-bottom:0; box-shadow:none; }
  .nav-catalog[aria-current] { box-shadow:inset 0 0 0 3px var(--ink); padding-left:16px; }
  .mega-wrap { flex-direction:column; } .mega { display:block; position:static; box-shadow:none; border:0; background:none; }
  .drop-wrap { flex-direction:column; } .drop { display:block; position:static; box-shadow:none; border:0; background:none; padding:0 0 10px; min-width:0; }
  .drop a { padding:10px 0; font-size:1.05rem; } .nav-drop .ico { display:none; }
  .mega-list { padding:4px 0 10px; grid-template-columns:1fr; }
  .mega-list a { padding:8px 0; grid-template-columns:44px 1fr; } .mega-thumb { width:44px; height:44px; }
  .mega-name { font-size:1.05rem; }
  .search input { width:100%; flex:1; } .search { align-self:stretch; }
  .product { grid-template-columns:1fr; gap:24px; }
  .toc-row { grid-template-columns:2.6rem minmax(0,1fr) 60px 24px; gap:12px; } .toc-count { display:none; } .toc-thumb { width:60px; height:48px; }
  .spec-group { grid-template-columns:1fr; gap:6px; }
  .listing.has-filters { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .brand { padding:10px 0; } .brand-logo { height:36px; }
  .geo, .top-contacts .msgr, .top-status { display:none; } .topbar-row { justify-content:space-between; }
  .hero { padding:24px 0 36px; }
  .hero-plate { aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; padding-bottom:0; }
  .hero-photo { position:relative; inset:auto; grid-column:1/-1; aspect-ratio:4/3; padding:6%; }
  .callout, .callout.c1, .callout.c2, .callout.c3, .callout.c4 { position:static; width:auto; display:block; }
  .callout .co-label { max-width:none; border:0; border-top:1px solid var(--line-strong); border-left:0; background:var(--paper); padding:10px 14px 12px; }
  .callout.c2, .callout.c4 { border-left:1px solid var(--line-strong); }
  .leader, .axis { display:none; }
  .hero-cta .btn { flex:1 1 100%; }
  .section { padding-top:40px; }
  .why-grid { grid-template-columns:1fr; } .why-grid li { border-right:0; margin-right:0; border-bottom:1px solid var(--line); }
  .band { padding:48px 0 52px; margin-top:48px; } .lead-form { grid-template-columns:1fr; padding:16px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .card h3 { font-size:1.7rem; }
  .has-strip .gallery-main, .has-strip .gallery-thumbs { display:none; }
  .gallery-strip { display:flex; gap:10px; list-style:none; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .gallery-strip li { flex:0 0 88%; scroll-snap-align:center; aspect-ratio:5/4; position:relative; border:1px solid var(--line); background:var(--card); }
  .gallery-strip picture { display:contents; } .gallery-strip img { width:100%; height:100%; object-fit:contain; padding:6%; mix-blend-mode:multiply; display:block; }
  .info .card-actions .btn { flex:1 1 100%; }
  .table-scroll { overflow-x:auto; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ── этап 3b: фильтры раздела ── */
.filters { padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); max-height:calc(100vh - var(--head-h) - 32px); overflow:auto; }
.filters-head { display:flex; align-items:center; justify-content:space-between; } .filters h2 { margin:0 0 8px; font-size:1.15rem; }
.filters-close, .filters-toggle { display:none; }
.f-group { border:0; border-top:1px solid var(--line); margin:12px 0 0; padding:12px 0 0; min-width:0; }
.f-group legend { padding:0 6px 0 0; font-size:13px; font-weight:600; color:var(--ink); float:left; width:100%; margin-bottom:8px; } .f-group legend + * { clear:both; }
.f-range { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; clear:both; }
.f-range input { width:100%; min-height:40px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:#fff; font:13px var(--font-mono); color:var(--text); }
.filters .check { display:flex; gap:8px; align-items:flex-start; margin:6px 0; font-size:14px; cursor:pointer; } .filters .check input { margin-top:3px; accent-color:var(--ink); width:16px; height:16px; }
.f-avail { margin-top:4px; }
.f-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } .f-actions .btn { min-height:40px; }
.found { margin:0 0 12px; font-size:13px; color:var(--muted); }
@media (max-width:900px) {
  .filters-toggle { display:inline-flex; grid-column:1/-1; justify-self:start; }
  .filters { position:fixed; inset:0 auto 0 0; width:min(340px,90vw); z-index:80; max-height:none; border-radius:0; transform:translateX(-102%); transition:transform .2s; padding-top:20px; }
  .filters.open { transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); }
  .filters-close { display:inline-flex; position:static; }
  html.filters-open { overflow:hidden; }
  .listing.has-filters { grid-template-columns:1fr; }
}

/* ── этап 4: формы заявок, модальное окно, корзина ── */
.lead-form fieldset.ctype { grid-column:1/-1; border:0; margin:0; padding:0; display:flex; gap:20px; flex-wrap:wrap; }
.lead-form .ctype legend { font-size:13px; color:var(--muted); padding:0 0 6px; }
.lead-form .radio { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); } .lead-form .radio input { width:18px; min-height:18px; accent-color:var(--ink); }
.lead-form label.wide { grid-column:1/-1; }
.lead-form .check a { color:inherit; }
.js .lead-form:not(.is-company) .co { display:none; }
.lead-form.lead-short { grid-template-columns:1fr; } .lead-short .btn { min-width:0; justify-self:stretch; }
.form-result { grid-column:1/-1; margin:0; padding:10px 14px; border-left:3px solid var(--ink); background:var(--paper-2); font-size:14px; }
.form-result.ok { background:#e6f4ea; border-left-color:#1f9a47; color:#123d20; } .form-result.err { background:#fbe9e9; border-left-color:#c62828; color:#5a1414; }
.band .form-result { color:var(--text); }
.lead-modal { width:min(460px,calc(100vw - 32px)); padding:24px; border:1px solid var(--ink); border-radius:var(--radius); background:var(--paper); color:var(--text); }
.lead-modal::backdrop { background:rgba(15,17,19,.6); }
.lead-modal h2 { margin:0 0 6px; font-size:1.4rem; } .lead-modal .lead-form { margin:12px 0 0; padding:0; border:0; background:none; }
.modal-close { position:absolute; top:8px; right:10px; width:36px; height:36px; border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--ink); }
.callback-link { padding:2px 10px; border:1px solid var(--ink-line); border-radius:var(--radius-sm); }
.lead-buttons { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.cart-table td, .cart-table th { vertical-align:middle; } .qty { width:76px; min-height:40px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:15px var(--font-mono); background:#fff; }
.qty-form { display:flex; gap:6px; align-items:center; } .js .nojs-only { display:none; }
.badge-kit { display:inline-block; padding:1px 6px; border:1px solid var(--line-strong); font-size:11px; text-transform:uppercase; color:var(--muted); }
.thanks { padding:48px 0; max-width:40em; }
.kit-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:36px; align-items:start; margin-bottom:12px; }
.kit-photo { aspect-ratio:5/4; } .kit-photo picture { display:contents; } .kit-photo img { width:100%; height:100%; object-fit:contain; padding:6%; display:block; }
.cookie-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:90; max-width:640px; margin:0 auto; display:flex; gap:16px; align-items:center; padding:14px 18px; background:var(--ink); color:var(--ink-fg); border-radius:var(--radius); }
.cookie-banner a { color:var(--ink-fg); } .cookie-banner p { margin:0; font-size:14px; } .cookie-banner[hidden] { display:none; }
@media (max-width:700px) { .kit-head { grid-template-columns:1fr; } .top-contacts .callback-link { display:none; } }

/* ── этап 5: статьи, FAQ, контакты, плейсхолдеры ── */
mark.todo { background:rgba(242,194,0,.32); color:inherit; padding:0 3px; border-bottom:2px solid var(--accent-strong); border-radius:1px; cursor:help; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.chip { padding:6px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:500 14px/1.3 var(--font-body); color:var(--text); text-decoration:none; background:var(--card); }
.chip:hover { border-color:var(--ink); }
.chip.active { background:var(--ink); color:var(--ink-fg); border-color:var(--ink); }
.article-grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.article-card { display:flex; flex-direction:column; }
.article-cover { display:block; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); }
.article-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-ph { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--mark);
  background-color:var(--card);
  background-image:linear-gradient(var(--grid-minor) 1px,transparent 1px), linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
                   linear-gradient(var(--grid-major) 1px,transparent 1px), linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,80px 80px,80px 80px; }
.cover-ph .ico { width:44px; height:44px; }
.cover-tag { position:absolute; left:12px; bottom:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.article-card .card-body h3 { margin:.1em 0 .4em; font-size:1.2rem; line-height:1.2; } .article-card h3 a { text-decoration:none; }
.article-card h3 a:hover { text-decoration:underline; }
.article-card .more { margin:auto 0 0; padding-top:10px; font-weight:600; font-size:14px; } .article-card .more a { text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.article { max-width:820px; margin:8px 0 0; }
.article-head h1 { font-size:clamp(1.8rem,3.4vw,2.6rem); margin:.1em 0 .3em; }
.article-head .kicker a { color:var(--muted); }
.article-figure { margin:0 0 24px; } .article-figure img { width:100%; height:auto; display:block; }
.article-toc { border:1px solid var(--line); background:var(--card); padding:14px 18px; margin:0 0 26px; max-width:520px; }
.article-toc .kicker { margin-bottom:6px; } .article-toc ol { margin:0; padding:0; list-style:none; } .article-toc li { margin:3px 0; font-size:15px; }
.article .prose { max-width:none; } .article .prose h2 { margin-top:34px; } .article .prose p, .article .prose li { line-height:1.65; }
.related { margin-top:56px; }
.faq-list { max-width:860px; } .faq-item { border-bottom:1px solid var(--line); padding:0; }
.faq-item summary { padding:14px 28px 14px 0; position:relative; list-style:none; font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:12px; font:400 1.5rem/1 var(--font-mono); color:var(--muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-item .prose { padding:0 0 16px; }
.section-more { margin:24px 0 0; }
.contact-card { margin:26px 0; padding:20px 24px; border:1px solid var(--line-strong); background:var(--card); max-width:780px; }
.contact-card dl { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px 28px; }
.contact-card dt { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.contact-card dd { margin:0; font-size:1.05rem; } .map-link { font-size:14px; }

/* ── Витрина: хит/акция, цена со скидкой, рассрочка ── */
.avail-row .badges { margin-left:12px; vertical-align:middle; }
.price-old { font-family:var(--font-mono); color:var(--muted); font-size:.85em; } .price-vat { color:var(--muted); font-size:.75em; white-space:nowrap; } .price-sale { color:#B71C1C; }
.credit-note { margin:4px 0 14px; font-size:14px; color:var(--muted); }
.product-card.is-hit { border-color:var(--ink); box-shadow:inset 0 3px 0 var(--accent); }
.section-lead { margin:-6px 0 22px; color:var(--muted); max-width:760px; }
.promo-section { background:var(--paper-2); }

/* ── Мессенджеры ── */
.ico-brand { flex:none; }
.msgr-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:16px 0 0; }
.msgr-row .k { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.msgr-btn { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line-strong); background:var(--card); text-decoration:none; font-size:14px; font-weight:600; }
.msgr-btn:hover { border-color:var(--ink); }
.msgr-whatsapp .ico-brand { color:#1DA851; } .msgr-viber .ico-brand { color:#7360F2; } .msgr-telegram .ico-brand { color:#229ED9; }
.msgr-dd { display:flex; flex-wrap:wrap; gap:8px; }
.msgr .ico-brand, .f-msgr .ico-brand { opacity:.9; } .f-msgr { display:inline-flex; align-items:center; gap:7px; }
.top-status { color:var(--ink-muted); font-size:12px; letter-spacing:.02em; }
.compare-row { margin:12px 0 0; }

/* плавающая кнопка: мессенджеры и телефон */
.fab { position:fixed; right:18px; bottom:18px; z-index:60; }
.fab summary { list-style:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:var(--accent); color:var(--on-accent); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.fab summary::-webkit-details-marker { display:none; }
.fab summary:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.fab-list { position:absolute; right:0; bottom:66px; margin:0; padding:6px; list-style:none; min-width:220px; background:var(--card); border:1px solid var(--line-strong); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.fab-list a { display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; font-weight:600; }
.fab-list a:hover { background:var(--paper-2); }
.fab-whatsapp .ico-brand { color:#1DA851; } .fab-viber .ico-brand { color:#7360F2; } .fab-telegram .ico-brand { color:#229ED9; }
@media print { .fab { display:none; } }

/* ── Реквизиты на странице контактов ── */
.requisites h2 { margin:0 0 14px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.requisites dd { font-size:1rem; overflow-wrap:anywhere; }

/* ── Сравнение моделей ── */
.compare { padding-bottom:40px; }
.compare-heads { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:26px 0; }
.compare-head { border:1px solid var(--line-strong); background:var(--card); padding:18px; display:flex; flex-direction:column; gap:8px; }
.compare-head h2 { margin:6px 0 0; font-size:1.6rem; } .compare-head .tagline { margin:0; color:var(--muted); }
.compare-img { position:relative; display:block; aspect-ratio:4/3; background:#FFFFFF; }
.compare-img img { width:100%; height:100%; object-fit:contain; }
.compare-toggle { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px; }
.compare-toggle label { display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
.compare-toggle .legend { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.compare-toggle .swatch { width:14px; height:14px; background:color-mix(in srgb, var(--accent) 22%, #FFFFFF); border:1px solid var(--accent); }
table.compare-table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line-strong); }
.compare-table th, .compare-table td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; font-size:14px; }
.compare-table thead th { background:var(--ink); color:var(--ink-fg); font-weight:600; }
.compare-table tbody th[scope=row] { width:34%; font-weight:400; color:var(--muted); }
.compare-table td { width:33%; font-weight:500; overflow-wrap:anywhere; }
.compare-table .group-row th { background:var(--paper-2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.compare-table tr.diff td { background:color-mix(in srgb, var(--accent) 22%, #FFFFFF); }
.compare-table tr.diff th[scope=row] { color:var(--ink); font-weight:600; }
.compare-table.only-diff tr.same { display:none; }
@media (max-width:640px) {
  .compare-heads { grid-template-columns:1fr 1fr; gap:10px; } .compare-head { padding:10px; } .compare-head h2 { font-size:1.15rem; }
  .compare-head .tagline, .compare-head .card-actions .btn-ghost { display:none; }
  .compare-table th, .compare-table td { padding:7px 8px; font-size:13px; }
  .fab { right:12px; bottom:12px; } .fab summary { width:52px; height:52px; }
}


/* Блок «Направления» на главной */
.dir-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.dir-card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.dir-card-img { display:block; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.dir-card-img img { display:block; width:100%; height:100%; object-fit:cover; }
.dir-card-body { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px 20px; flex:1; }
.dir-card-body h3 { margin:0; font-size:1.3rem; }
.dir-card-body h3 a { color:var(--ink); text-decoration:none; }
.dir-card-body h3 a:hover { color:var(--accent); }
.dir-card-body p { margin:0; color:var(--muted); font-size:.95rem; }
.dir-card-body .btn { margin-top:auto; }
.dir-card .dir-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--muted); }
@media (max-width:1000px) { .dir-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media (max-width:560px) { .dir-cards { grid-template-columns:1fr; gap:16px; } }

/* Шапка с пунктом «Направления»: ужимаем зазоры, чтобы строка не вылезала за экран */
@media (min-width:1181px) {
  .header-row { gap:18px; } .nav-panel { gap:14px; } .nav { gap:0; }
  .nav-link { --nl-pad:8px; padding:0 8px; } .search input { width:110px; }
}
@media (min-width:1001px) and (max-width:1260px) {
  .header-row { gap:12px; } .nav .nav-link { --nl-pad:5px; padding:0 5px; font-size:14px; gap:4px; }
  .search input { width:56px; }
}
@media (min-width:1001px) and (max-width:1060px) { .brand-sub { display:none; } .nav-panel { gap:8px; } }
@media (min-width:1001px) and (max-width:1060px) {
  .nav .nav-link { --nl-pad:4px; padding:0 4px; font-size:13px; gap:3px; } .search input { width:36px; } .header-row { gap:8px; }
  .cart-desktop { padding:8px; }
}

/* Видеообзоры: «фасад» — превью с кнопкой, плеер YouTube подставляет site.js по клику. */
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.video-group { padding-top:40px; } .video-group .section-h a { text-decoration:none; } .vg-name { font-family:var(--font-body); font-weight:400; font-size:15px; }
.vcard { display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--line); }
.vthumb, .vframe { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
.vthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; line-height:1.5; color:var(--ink-muted);
  background:linear-gradient(var(--grid-major) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--grid-major) 1px,transparent 1px) 0 0/24px 24px,var(--ink-2); }
.vplay { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; display:flex; align-items:center; justify-content:center;
  color:var(--on-accent); background:var(--accent); border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.35); transition:transform .15s; }
.vthumb:hover .vplay, .vthumb:focus-visible .vplay { transform:scale(1.08); }
.vdur { position:absolute; right:8px; bottom:8px; padding:1px 6px; font-size:12px; color:var(--ink-fg); background:rgba(0,0,0,.78); }
.vframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vmeta { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.vtitle { margin:0; font-size:1rem; line-height:1.3; overflow-wrap:anywhere; }
.vchan { margin:0; font-size:13px; } .vlang { display:inline-block; margin-left:6px; padding:0 5px; border:1px solid var(--line-strong); font-size:11px; color:var(--muted); }
.vyt { margin-top:auto; padding-top:6px; font-size:13px; }
.video-note { font-size:13px; margin:18px 0 0; }



/* Бренды на главной и блок «решения для склада» */
.brand-tiles { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.brand-tile { display:flex; flex-direction:column; gap:6px; height:100%; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); color:inherit; text-decoration:none; }
.brand-tile strong { font-size:22px; font-family:var(--font-display); }
.brand-tile:hover { border-color:var(--accent); }
.wms-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; padding:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.wms-box .section-h { margin-bottom:8px; }
.kicker a { color:inherit; }


/* ── Terminale Mobile: оформление поверх базы ── */
.brand-sub { display:none; }                                   /* «AutoID Moldova» теперь в самом логотипе */
.brand { padding:10px 0; }
.site-footer .brand-logo { height:52px; }
/* луч сканера по фото героя — единственное «движение» на странице, один раз при загрузке */
.hero-photo::before { content:""; position:absolute; left:-4%; right:-4%; top:0; height:2px; z-index:2; pointer-events:none; opacity:0;
  background:var(--accent); box-shadow:0 0 14px 2px color-mix(in srgb, var(--accent) 70%, transparent); }
@media (prefers-reduced-motion:no-preference) { .hero-photo::before { animation:beam 1.8s .5s ease-in-out 1 both; } }
@keyframes beam { 0% { top:0; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { top:100%; opacity:0; } }
/* плитки брендов: нейтральные плашки с акцентной кромкой */
.brand-tile { position:relative; padding:24px 24px 22px 28px; border-left:0; gap:8px; transition:box-shadow .15s; }
.brand-tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--ink); border-radius:var(--radius) 0 0 var(--radius); }
.brand-tile strong { font-size:clamp(26px,3vw,34px); line-height:1.05; color:var(--ink); }
.brand-tile .muted { font-size:15px; color:var(--muted); }
.brand-tile .mono { margin-top:auto; padding-top:12px; font-size:13px; color:var(--muted); }
.brand-tile:hover { border-color:var(--line-strong); box-shadow:0 6px 20px -10px rgba(0,0,0,.35); }
.brand-tile:hover::before { background:var(--accent); }
/* блок «решения для склада»: тёмная плашка */
.wms-section { padding-top:40px; }
.wms-box { background:var(--ink); border-color:var(--ink); color:var(--ink-fg); padding:36px 40px; }
.wms-box .section-h { color:#fff; border-bottom-color:var(--ink-line); }
.wms-box .section-h::after { background:repeating-linear-gradient(90deg,var(--ink-muted) 0 1px,transparent 1px 12px); opacity:.5; }
.wms-box .sh-no { color:var(--ink-muted); }
.wms-box .section-lead { color:var(--ink-muted); max-width:34em; margin:0; }
.wms-box :focus-visible { outline-color:var(--accent-on-ink); }
/* направления без фото — компактная заглушка вместо пустого прямоугольника */
.dir-card-img:has(.dir-ph) { aspect-ratio:16/6; min-height:0; }
.dir-card:has(.dir-ph) .dir-ph .ico { width:32px; height:32px; }
@media (max-width:640px) { .wms-box { padding:24px 20px; } .brand-tile strong { font-size:28px; } }
/* карточки каталога: фото на белом, 5:4 */
.product-card .card-img, .product-card .card-img.well { background-image:none; background-color:#fff; aspect-ratio:5/4; }
.product-card .card-img img { mix-blend-mode:normal; object-fit:contain; }

/* блоки :::cards в текстовых страницах: внутренний отступ и умеренные заголовки */
.block-grid .card { padding:20px 22px 22px; gap:6px; }
.block-grid .card h3 { margin:0 0 6px; font-size:1.2rem; line-height:1.25; letter-spacing:0; }
.block-grid .card p { margin:0; font-size:.95rem; }
/* нижняя строка футера: линия по контейнеру, а не по всей ширине .wrap с его полями */
.footer-base { position:relative; border-top:0; }
.footer-base::before { content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); border-top:1px solid var(--ink-line); }
/* обложки статей — фото на всю плашку, без «паспортных» полей под товар */
.article-cover img { object-fit:cover; padding:0; mix-blend-mode:normal; }

/* мобильная главная: подписи характеристик не липнут к рамке; плавающая кнопка чата меньше и не закрывает низ страницы */
@media (max-width:640px) {
  .hero-plate { padding:0 12px 14px; gap:10px; }
  .hero-plate::after { display:none; }
  .callout, .callout.c2, .callout.c4 { border:0; }
  .callout .co-label { display:block; border:1px solid var(--line-strong); border-left:3px solid var(--ink); padding:8px 12px; }
  .fab { right:10px; bottom:10px; } .fab summary { width:44px; height:44px; }
  .fab summary svg { width:22px; height:22px; }
  .site-footer { padding-bottom:64px; }
}

/* колонки блока :::cards (класс выбирает app/blocks.py: 2 или 3 колонки, на узких экранах — меньше) */
.block-grid.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.block-grid.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px) { .block-grid.grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .block-grid.grid-2, .block-grid.grid-3 { grid-template-columns:1fr; } }

/* ─── аксессуары: плитки на карточке устройства, совместимость на карточке аксессуара, фильтр раздела ─── */
.accessories .acc-group { margin:22px 0 0; }
.accessories .acc-group h3 { font-size:17px; margin:0 0 10px; }
.acc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.acc-tile { display:flex; flex-direction:column; border:1px solid var(--line-strong); background:var(--card); min-width:0; }
.acc-tile .acc-img { display:block; background:#fff; aspect-ratio:5/4; }
.acc-tile .acc-img img, .acc-tile .acc-img picture { width:100%; height:100%; object-fit:contain; display:block; }
.acc-tile .acc-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.acc-tile h4 { margin:0; font-size:14px; line-height:1.3; }
.acc-tile h4 a { color:var(--ink); text-decoration:none; }
.acc-tile .acc-pn { margin:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.acc-tile form { margin-top:auto; }
.acc-tile .btn-sm { padding:6px 10px; font-size:13px; }
.compat-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; }
.compat-list li a { display:block; padding:10px 14px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); text-decoration:none; }
.acc-filter { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0 0 24px; }
.acc-filter label { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.acc-filter select { min-width:200px; max-width:100%; }

/* Сортировка каталога */
.sort-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 18px; }
.sort-bar label { display:flex; flex-direction:column; gap:4px; font-size:13px; min-width:0; max-width:100%; }
.sort-bar select { min-width:220px; max-width:100%; }
.sort-bar[data-js] [data-sort-apply] { display:none; }
@media (max-width: 600px) { .sort-bar label, .sort-bar select { width:100%; } }