/* Motgar mobile-first preview — shared design system.
   Concept D revision, 2026-08-25.

   The palette, radius and type scale are carried over from the approved
   round-2 concept D on purpose: the owner is reviewing an information-
   architecture change, and a new skin would make the before/after screenshots
   incomparable. What is new here is structural — the category grid, the
   catalogue chrome, and the fit-state system.

   THE STICKY DEFECT (audit §6). `.shell` used `overflow-x:hidden`, which makes
   the computed `overflow-y` `auto`, turns `.shell` into a scroll container, and
   anchors `position:sticky` to a scrollport that never scrolls. Two corrections
   are applied together:
     1. the action panel lives in `body`, not in `.shell`, and is `position:fixed`;
     2. `.shell` uses `overflow-x:clip`, which clips without establishing a
        scroll container, so no descendant can be broken the same way again. */

:root{
  --bg:#f6f6f4; --surface:#ffffff; --ink:#171a1d; --ink-soft:#5b6167;
  --border:#e4e6e8; --accent:#2c4a63; --accent-soft:#eaf0f4;
  --good:#1e6b4f; --good-bg:#e7f3ee;
  --warn:#7a5c14; --warn-bg:#f6efdd;
  --bad:#8a2b2b;  --bad-bg:#f7e9e9;
  --radius:14px; --radius-sm:10px; --maxw:460px; --tap:44px;
  --actionbar-h:68px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%; line-height:1.4;
}
.shell{
  max-width:var(--shellw,var(--maxw)); margin:0 auto; min-height:100dvh; position:relative;
  padding-bottom:24px; overflow-x:clip;
}
.shell *{min-width:0;}
h1,h2,h3,.model,.exec,.meta{overflow-wrap:anywhere;}
a{color:inherit;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
[hidden]{display:none !important;}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- header ------------------------------------------------------------- */
header.top{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(150%) blur(6px); backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 16px; min-height:52px;
}
.brand{font-weight:700; font-size:16px; letter-spacing:.02em; text-decoration:none;}
/* Official #MG116 emblem + live-text wordmark; one link to the home page. The emblem keeps its natural
   aspect ratio (width follows height); 36px fits the existing 52px header without growing it. */
.brand{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; white-space:nowrap; color:inherit;}
.brand img{display:block; height:36px; width:auto;}
.brand-name{font-weight:700; font-size:16px; letter-spacing:.04em; line-height:1;}
@media (min-width:768px){ .brand img{height:42px;} .brand-name{font-size:18px;} }
.brand small{display:block; font-weight:400; font-size:10px; color:var(--ink-soft);}
/* `Эксперт` is a quiet header action, never a filled button (audit P4/C15). */
.expert-link{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--accent);
  text-decoration:none; padding:0 12px; border-radius:999px; border:1px solid var(--border);
  min-height:var(--tap); background:var(--surface); white-space:nowrap;
}
.banner-owner{
  background:#fff7e6; color:#7a5c14; font-size:11.5px; text-align:center; padding:6px 10px;
  border-bottom:1px solid #f0dfa8;
}

/* ---- generic section ---------------------------------------------------- */
.section{padding:14px 16px 4px;}
.section h2{font-size:15px; margin:0 0 4px; font-weight:700;}
.section .lead{font-size:12.5px; color:var(--ink-soft); margin:0 0 8px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.section-head a{font-size:12.5px; color:var(--accent); text-decoration:none; white-space:nowrap;}

/* ---- search ------------------------------------------------------------- */
.search-wrap{padding:10px 16px 4px;}
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:0 12px; min-height:48px;
}
/* 16px keeps iOS from zooming on focus; the placeholder is short enough to fit
   at 360 px, which the audit measured as truncated in the previous revision. */
.search-box input{border:none; outline:none; background:transparent; flex:1;
  font-size:16px; min-height:46px; text-overflow:ellipsis;}
.search-box input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
.search-box svg{flex:0 0 auto; opacity:.55;}
.search-box{position:relative; z-index:21;}
.search-box:focus-within{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.search-clear{
  flex:0 0 var(--tap); min-width:var(--tap); min-height:var(--tap); border:0;
  background:transparent; color:var(--ink-soft); border-radius:10px; cursor:pointer;
  font-size:19px; line-height:1;
}
.search-popover{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  max-height:min(440px,var(--search-room,440px)); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 16px 38px rgba(23,26,29,.18); padding:6px;
}
.search-summary{padding:7px 10px 5px; color:var(--ink-soft); font-size:11px; font-weight:600;}
.search-option{
  display:flex; flex-direction:column; justify-content:center; min-height:54px; padding:8px 10px;
  border-radius:10px; color:inherit; text-decoration:none;
}
.search-option:hover,.search-option.active{background:var(--accent-soft);}
.search-option-label{font-size:14px; font-weight:650; line-height:1.2;}
.search-option-meta{font-size:11px; color:var(--ink-soft); margin-top:3px; line-height:1.25;}
.search-option:last-of-type{margin-top:4px; border-top:1px solid var(--border); color:var(--accent);}
.search-empty{display:flex; flex-direction:column; gap:3px; padding:10px; font-size:13px;}
.search-empty span{font-size:11.5px; color:var(--ink-soft);}
.search-expert{
  display:flex; align-items:center; min-height:var(--tap); padding:7px 10px; margin:4px 0 0;
  border-top:1px solid var(--border); color:var(--accent); font-size:13px; font-weight:600;
  text-decoration:none;
}

/* ---- homepage direction pair (tasks.md 2026-08-28): two equal-weight native
   buttons that switch the panel below in place — never an oversized banner
   pair. Reuses the same surface/border/radius tokens as `.card`/`.cattile` so
   it reads as part of Concept D rather than a new visual language. The
   selected state is a background + border + text-colour combination, never
   colour alone. -------------------------------------------------------- */
.directions{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px 16px 8px;}
.direction-tile, .direction-link{
  display:flex; align-items:center; justify-content:center; min-height:56px;
  padding:14px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:inherit; cursor:pointer; text-align:center;
}
.direction-link{text-decoration:none;}
.direction-tile .direction-name, .direction-link .direction-name{font-size:16px; font-weight:700;}
.direction-tile[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent);}
.direction-tile[aria-pressed="true"] .direction-name{color:var(--accent);}

/* ---- parts-group navigation (tasks.md 2026-08-28): shown only in the
   `Запчасти` panel, prominent category links, no product feed. Same tile
   language as `.cattile` minus the image — these groups have no thumbnail
   of their own. ---------------------------------------------------------- */
.partscat{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:4px 16px 8px;}
.partscat-tile{
  display:flex; align-items:center; min-height:var(--tap);
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); text-decoration:none; color:inherit;
}
.partscat-tile .name{font-size:13px; font-weight:600;}

/* ---- category grid: all six, always visible (audit §11.1) --------------- */
.catgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 16px 8px;
}
.cattile{
  display:flex; flex-direction:column; text-decoration:none; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  min-height:var(--tap); position:relative;
}
.cattile .thumb{aspect-ratio:4/3; background:#eceeef; position:relative;}
.cattile img{width:100%; height:100%; object-fit:cover; display:block;}
.cattile .cap{padding:5px 6px 7px; display:flex; flex-direction:column; gap:1px;}
.cattile .name{font-size:11.5px; font-weight:600; line-height:1.15;}
.cattile .state{font-size:9.5px; color:var(--ink-soft);}
.cattile .state.live{color:var(--good); font-weight:600;}
/* Every borrowed illustration says so on the tile itself (audit §13.4 rule 4). */
.cattile .illus{
  position:absolute; left:0; bottom:0; right:0; background:rgba(23,26,29,.62); color:#fff;
  font-size:8.5px; letter-spacing:.02em; padding:2px 4px; text-align:center;
}
.cattile[aria-disabled="true"]{opacity:.9;}

/* ---- product cards ------------------------------------------------------ */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px;}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; text-align:left;
  text-decoration:none; color:inherit;
}
.card .imgwrap{aspect-ratio:1/1; background:#f0f1ee; overflow:hidden; position:relative;}
.card img{width:100%; height:100%; object-fit:cover; display:block;}
/* Swipe-gallery cards (tasks.md, 2026-09-06): `pan-y` hands vertical panning
   straight to the browser so JS never has to fight page scroll, while a
   horizontal touch stays free for the pointer-drag frame switch in preview.js.
   No visible control is added — this is purely a hit-testing/scroll rule. */
.card .imgwrap[data-frames]{touch-action:pan-y;}
.card .imgwrap[data-frames] img{-webkit-user-drag:none; user-select:none;}
/* Stage 2 (M6): a priced product with no verified photo yet stays public and
   gets this neutral state instead — never another product's image. */
.img-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:10px; background:#f0f1ee; color:var(--ink-soft);
  font-size:11px; line-height:1.3;
}
/* One card is one model; the count of colours lives on the card, not as extra
   cards (audit P2/C7). */
.card .variants{
  position:absolute; right:6px; bottom:6px; background:rgba(255,255,255,.92);
  border:1px solid var(--border); border-radius:999px; font-size:10px; font-weight:600;
  padding:2px 8px; color:var(--ink-soft);
}
.card .body{padding:9px 10px 11px; display:flex; flex-direction:column; gap:3px; flex:1;}
.card .model{font-size:12.5px; font-weight:600; line-height:1.25;}
.card .meta{font-size:10.5px; color:var(--ink-soft);}
.card .price{font-size:13.5px; font-weight:700; margin-top:2px;}
.card .price.request{font-size:11.5px; font-weight:600; color:var(--warn);}
.stockbadge{
  font-size:10px; font-weight:600; padding:2px 7px; border-radius:999px;
  display:inline-flex; align-items:center; align-self:flex-start; margin-top:3px;
}
.stockbadge.in{background:var(--good-bg); color:var(--good);}
.stockbadge.request{background:var(--warn-bg); color:var(--warn);}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:0 18px; border-radius:12px; font-size:14px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  cursor:pointer; text-decoration:none;
}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
/* Disabled: neutral grey that cannot be mistaken for the accent colour (not opacity alone). */
.btn:disabled,.btn.primary:disabled{
  background:#e3e5e9; border-color:#d0d3d9; color:#5b6370; cursor:not-allowed; opacity:1;
}
.btn.block{width:100%;}
.btn.small{min-height:36px; font-size:12.5px; padding:0 12px;}
.chip{
  flex:0 0 auto; padding:0 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-size:12.5px; white-space:nowrap; min-height:var(--tap);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:inherit;
}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:8px 16px; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}

/* ---- PDP colour selector (tasks.md Concept D Stage 2 correction) --------
   Every variant renders at once in a wrapping grid — no scroller, no nav
   arrows, no visible-range counter. Wraps `.chip-row`'s flex layout onto
   additional rows instead of scrolling it horizontally. */
#variants{flex-wrap:wrap; overflow-x:visible; padding:8px 16px;}

/* ---- PDP colour thumbnails (tasks.md Concept D Stage 2 §1) ---------------
   Reuses `.chip`/`.chip.active` from above — same tap target, same
   accent-coloured active state (here a ring rather than a fill, since the
   chip content is now an image). */
#variants .color-thumb{padding:3px; min-width:0;}
#variants .color-thumb img{width:44px; height:44px; border-radius:50%; object-fit:cover; display:block; transform:scale(1.15);}

/* ---- PDP colour grid, mobile compaction (tasks.md 2026-09-02) -----------
   Values tuned in a real browser against the 17-colour Aviator 3: shrinks
   the wrapped grid's row height (and row count where the variant set is
   large enough) without hiding colours, adding a scroller, or touching the
   >480px desktop layout above. */
@media (max-width:480px){
  #variants{gap:6px; padding:6px 16px;}
  #variants .color-thumb{padding:3px;}
  #variants .color-thumb img{width:36px; height:36px;}
}

/* ---- PDP main image enlargement (tasks.md Concept D Stage 2 §2) ---------- */
.gallery-zoom{
  display:block; width:100%; aspect-ratio:1/1; background:#f0f1ee;
  border:none; padding:0; margin:0; cursor:pointer; position:relative;
}
.gallery-zoom img{width:100%; height:100%; object-fit:cover; display:block;}
.zoom-badge{
  position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:999px;
  background:rgba(23,26,29,.55); color:#fff; display:inline-flex;
  align-items:center; justify-content:center;
}

/* ---- PDP multi-photo carousel (2026-09-01 carousel task) -----------------
   Only rendered when a variant has 2+ genuinely distinct photos — a single
   photo stays the plain `.gallery-zoom` hero above, with no arrows, counter
   or swipe affordance. 2026-09-02: the angle-thumbnail row was removed here
   (and from the enlarged viewer below) — additional angles stay reachable
   only via these arrows/swipe/counter, so the colour-selector grid sits
   closer to the main image. */
.gallery-main{position:relative;}
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:32px; height:32px; border-radius:999px; border:none;
  background:rgba(255,255,255,.92); color:var(--ink); display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 4px rgba(23,26,29,.22);
}
.gallery-nav.prev{left:10px;}
.gallery-nav.next{right:10px;}
.gallery-counter{
  position:absolute; left:10px; bottom:10px; z-index:2;
  background:rgba(23,26,29,.55); color:#fff; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; letter-spacing:.02em; pointer-events:none;
}
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(10,11,12,.92); padding:24px;
}
/* `[hidden]` must keep winning while closed — equal-specificity cascade order
   otherwise lets `.lightbox{display:flex}` show it regardless of the attribute. */
.lightbox:not([hidden]){display:flex; align-items:center; justify-content:center;}
/* Own light-neutral backing so a transparent hero's canvas padding shows
   white/light against the dark scrim, not the scrim colour itself. */
.lightbox-img{max-width:100%; max-height:100%; object-fit:contain; display:block; background:#f0f1ee;}
.lightbox-close{
  position:fixed; top:14px; right:14px; width:40px; height:40px; border-radius:999px;
  border:none; background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
/* Enlarged-viewer carousel (2026-09-02 task): same `.gallery-nav`-style
   affordance, positioned against the fixed lightbox viewport instead of a
   relative gallery frame, and hidden via [hidden] for single-image variants
   (toggled in updateLightboxImage(), never a second visibility scheme). */
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:101;
  width:40px; height:40px; border-radius:999px; border:none;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.lightbox-nav.prev{left:14px;}
.lightbox-nav.next{right:14px;}
.lightbox-counter{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:101;
  background:rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:600;
  padding:4px 11px; border-radius:999px; letter-spacing:.02em; pointer-events:none;
}

/* ---- catalogue sticky context (state at the top, actions at the bottom) -- */
/* Opaque, not translucent: helmet photography is often shot on black, and a
   96%-white blurred bar let those cards read through it while scrolling. The
   category name and the result count have to stay legible over any card. */
.catbar{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.catbar .row1{display:flex; align-items:center; gap:8px; padding:6px 10px; min-height:48px; flex-wrap:wrap;}
.catbar .back{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap); border-radius:10px;
  border:1px solid var(--border); background:var(--surface); text-decoration:none;
}
/* min-width:min-content keeps the title at least as wide as its longest word, so it wraps between
   words and never inside one («Мото-шлемы»); the row wraps instead of squeezing the title. */
.catbar .title{font-size:14.5px; font-weight:700; flex:1 1 0; min-width:min-content; line-height:1.2; margin:0;
  overflow-wrap:normal; word-break:normal; hyphens:none;}
/* «Показано N из M» must stay visible, not sit under the list (audit §7.4.3). */
.catbar .count{font-size:11px; color:var(--ink-soft); white-space:nowrap;}
/* Narrow screens: the counter takes its own line under the title instead of competing with the controls. */
@media (max-width:520px){
  .catbar .count{order:10; flex:1 0 100%; padding:0 0 4px 52px; margin-top:-2px;}
  .catbar .count:empty{display:none;}
  .catbar .expert-link{padding:0 10px; font-size:12px;}
  .catbar .row1{column-gap:6px;}
}
/* Catalogue-style bars already carry back, title, call, cart (and the manager button): on the narrowest
   screens the emblem stays and the wordmark gives way (the link keeps its MOTGAR accessible name) so the
   bar does not wrap onto a second row. Crowded pages (.brand-compact: catalogue, product) never show
   the wordmark in the bar; the page is a narrow column on every screen. */
@media (max-width:520px){ .catbar .brand img{height:30px;} }
@media (max-width:400px){ .catbar .brand img{height:24px;} .catbar .row1{padding-left:8px; padding-right:8px;} .catbar .expert-link{padding:0 8px;} }
@media (max-width:359px){ .catbar .brand-name{display:none;} }
.catbar .brand-compact .brand-name{display:none;}
.applied{
  display:flex; gap:6px; overflow-x:auto; padding:0 10px 8px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
}
.applied::-webkit-scrollbar{display:none;}
.applied .chip{min-height:32px; font-size:11.5px; padding:0 6px 0 12px;}
.applied .chip .x{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px; border:none; background:transparent;
  color:inherit; font-size:15px; line-height:1; cursor:pointer;
}
.applied .reset{
  min-height:32px; font-size:11.5px; border:none; background:transparent;
  color:var(--accent); text-decoration:underline; cursor:pointer; white-space:nowrap;
  padding:0 8px;
}
.promoted{
  display:flex; gap:8px; overflow-x:auto; padding:8px 16px 10px; scrollbar-width:none;
  /* tasks.md §7: a visible right-edge cue on the horizontally-scrolling
     parts-group rail, cleared once scrolled to the end (`.at-end`, set in JS). */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
}
.promoted::-webkit-scrollbar{display:none;}
.promoted.at-end{-webkit-mask-image:none; mask-image:none;}
.promoted .chip{min-height:38px; font-size:12.5px;}

/* ---- active-vehicle summary + compatibility mode (tasks.md §3/§7) --------
   Deliberately outside `.promoted`'s horizontal rail and outside `.applied`'s
   scrollable chip row — never reachable only by horizontal scrolling. */
.vehiclebar{padding:10px 16px 2px; border-bottom:1px solid var(--border);}
.vehiclebar-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:var(--tap);
}
.vehiclebar-label{font-size:13.5px; font-weight:700; overflow-wrap:anywhere;}
.vehiclebar-change{
  flex:0 0 auto; font-size:12.5px; color:var(--accent); text-decoration:none;
  font-weight:600; white-space:nowrap; padding:8px 0 8px 8px; min-height:var(--tap);
  display:inline-flex; align-items:center;
}
.compatmode{display:flex; gap:6px; margin-top:6px;}
.compatmode-btn{
  flex:1; min-height:var(--tap); padding:0 10px; border-radius:10px; font-size:12px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); cursor:pointer;
}
.compatmode-btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.compatmode-note{font-size:11.5px; color:var(--ink-soft); margin:6px 0 0;}

/* ---- fixed action panel: outside `.shell`, fixed, safe-area aware -------- */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 68%, rgba(246,246,244,0));
  pointer-events:none;
}
.actionbar .inner{
  max-width:var(--maxw); margin:0 auto; display:flex; gap:8px; pointer-events:auto;
}
.actionbar .btn{flex:1;}
.actionbar .btn.sort{flex:0 0 42%;}
/* The last card is never hidden behind the panel. */
.has-actionbar .shell{
  padding-bottom:calc(var(--actionbar-h) + 24px + env(safe-area-inset-bottom));
}

/* ---- labelled return to the start of the list (audit §7.4.5, E12) ------- */
.totop{
  position:fixed; right:12px; z-index:29;
  bottom:calc(var(--actionbar-h) + 14px + env(safe-area-inset-bottom));
  min-height:var(--tap); padding:0 14px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.97); color:var(--ink);
  font-size:12.5px; font-weight:600; cursor:pointer;
  display:none; align-items:center; gap:6px;
  box-shadow:0 2px 10px rgba(23,26,29,.12);
}
.totop.show{display:inline-flex;}

/* ---- bottom sheet ------------------------------------------------------- */
.sheet-back{position:fixed; inset:0; background:rgba(23,26,29,.42); z-index:40; display:none;}
.sheet-back.show{display:block;}
.sheet{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%;
  max-width:var(--maxw); background:var(--surface); border-radius:16px 16px 0 0;
  z-index:41; display:none; max-height:86dvh; overflow:auto;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.sheet.show{display:block;}
/* The heading takes focus, so the sheet never opens already scrolled past its
   own title at 360 px (audit P10/C2). */
.sheet h3{font-size:14.5px; margin:0; padding:16px 16px 4px; outline-offset:4px;}
.sheet .grp{padding:10px 16px 2px;}
.sheet .grp-title{font-size:11.5px; color:var(--ink-soft); margin-bottom:6px;}
.sheet .opts{display:flex; flex-wrap:wrap; gap:8px;}
.sheet .note{
  margin:10px 16px 0; padding:10px 12px; background:var(--bg); border-radius:10px;
  font-size:11.5px; color:var(--ink-soft);
}
.sheet .foot{
  position:sticky; bottom:0; background:var(--surface); padding:12px 16px 4px;
  border-top:1px solid var(--border); display:flex; gap:8px;
}
.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:var(--tap); font-size:13px;
}

/* ---- fit-state system: the one place this preview is opinionated --------
   Three states that a customer must never confuse (audit §7.7, invariant 3).
   They differ in colour, in icon and in wording, not only in wording. */
.fit{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:999px; letter-spacing:.01em;
}
.fit .dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
.fit.verified{background:var(--good-bg); color:var(--good);}
.fit.verified .dot{background:var(--good);}
.fit.unchecked{background:var(--surface); color:var(--ink-soft); border:1px dashed #c3c8cc;}
.fit.unchecked .dot{background:transparent; border:2px solid var(--ink-soft);}
.fit.incompatible{background:var(--bad-bg); color:var(--bad);}
.fit.incompatible .dot{
  background:var(--bad); position:relative;
}

/* tasks.md §8: a non-blocking warning shown before «В корзину» — never a
   reason to disable or hide the button, never a confirmation modal. */
.fitnote{
  font-size:11.5px; color:var(--warn); background:var(--warn-bg);
  border-radius:8px; padding:6px 8px; margin:6px 0 0; line-height:1.3;
}

/* tasks.md §1: the three required actions on an honest compatible-only
   empty state. */
.empty-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}

/* tasks.md §6: plain min/max price inputs inside the filter sheet. */
.price-range{display:flex; gap:10px;}
.price-range label{
  flex:1; display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-soft);
}
.price-range input{
  border:1px solid var(--border); border-radius:10px; padding:0 10px; min-height:var(--tap);
  font-size:14px; font-family:inherit; background:var(--surface); color:var(--ink);
  -moz-appearance:textfield;
}
.price-range input::-webkit-outer-spin-button,.price-range input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.price-range input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}

/* Each relationship block is visually separated, not one merged carousel
   (audit §7.7, E8). The left rule encodes which kind of claim it is. */
.relblock{margin:16px 16px 0; padding-left:12px; border-left:3px solid var(--border);}
.relblock.verified{border-left-color:var(--good);}
.relblock.curated{border-left-color:var(--accent);}
.relblock.alternative{border-left-color:#c3c8cc;}
.relblock h3{font-size:13.5px; margin:0 0 2px;}
.relblock .kind{font-size:11px; color:var(--ink-soft); margin:0 0 8px;}
#blockSimilar h3{margin-bottom:8px;}  /* no subtitle under "Похожие товары" any more */
.relblock .empty{
  font-size:12px; color:var(--ink-soft); background:var(--surface);
  border:1px dashed #cfd4d8; border-radius:var(--radius-sm); padding:12px;
}

/* ---- misc --------------------------------------------------------------- */
.count-note{font-size:11.5px; color:var(--ink-soft); padding:10px 16px 0; text-align:center;}
.more-wrap{padding:12px 16px 4px;}
.empty-hint{font-size:12.5px; color:var(--ink-soft); padding:12px 16px;}
/* Approved empty-category / load-failure block: one column, full-width action on a phone. */
.empty-state{
  margin:16px; padding:20px 16px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); text-align:left;
}
.empty-state-title{font-size:18px; line-height:1.25; margin:0 0 8px; color:var(--ink);}
.empty-state-text{font-size:14px; line-height:1.5; margin:0 0 14px; color:var(--ink-soft);}
.empty-state .btn{width:100%;}
@media (min-width:640px){
  .empty-state{max-width:520px; margin:24px auto; padding:24px;}
  .empty-state .btn{width:auto; padding:0 24px;}
}
.guide-line{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:14px 16px 0; padding:0 14px; min-height:var(--tap);
  border:1px dashed #cfd4d8; border-radius:12px; background:transparent;
  font-size:12.5px; color:var(--ink-soft); width:calc(100% - 32px); cursor:pointer;
  text-align:left;
}
.guide-line b{color:var(--ink); font-weight:600;}
.services{margin:16px 16px 0; padding-top:12px; border-top:1px solid var(--border);}
.services .svc-label{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:2px;
}
.services a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--tap); font-size:13px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--border);
}
.services a:last-child{border-bottom:none;}
.services a span.sub{font-size:11px; color:var(--ink-soft); font-weight:400;}
.expert-note{
  margin:16px 16px 0; padding:12px 14px; background:var(--accent-soft);
  border-radius:var(--radius); font-size:12px; color:var(--ink-soft);
}
.expert-note b{color:var(--ink);}
.cascade{padding:0 16px;}
.cascade .step{margin-bottom:10px;}
.cascade .step-head{font-size:11.5px; color:var(--ink-soft); margin-bottom:6px;}
.cascade .opts{display:flex; flex-wrap:wrap; gap:8px;}
.cascade .opt{
  padding:0 12px; min-height:var(--tap); display:inline-flex; align-items:center;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  font-size:12.5px; cursor:pointer;
}
.cascade .opt.sel{background:var(--accent); border-color:var(--accent); color:#fff;}
.cascade .opt small{opacity:.65; margin-left:5px; font-size:10.5px;}
.cascade .locked{font-size:12px; color:var(--ink-soft); padding:6px 0;}
/* tasks.md §4: a completed step collapses to one compact row instead of
   staying fully expanded, so the cascade does not grow to four full option
   lists stacked on top of each other. */
.cascade .step-value{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:var(--tap); padding:0 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface);
}
.cascade .step-chosen{font-size:13px; font-weight:600; overflow-wrap:anywhere;}
.cascade .step-edit{
  flex:0 0 auto; border:none; background:transparent; color:var(--accent);
  font-size:12.5px; font-weight:600; cursor:pointer; padding:8px 0 8px 8px;
  min-height:var(--tap);
}
.result-box{
  margin:10px 16px 0; padding:12px 14px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); font-size:12.5px;
}
.result-box b{font-size:13.5px;}
.proto-note{font-size:11px; color:var(--ink-soft); padding:8px 16px 0;}
.siblings{margin:18px 16px 0; padding-top:12px; border-top:1px solid var(--border);}
.siblings .svc-label{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.siblings .row{display:flex; gap:8px; flex-wrap:wrap;}
footer.foot{padding:20px 16px 8px; font-size:11px; color:var(--ink-soft); text-align:center;}
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px); background:var(--ink); color:#fff;
  padding:12px 16px; border-radius:12px; font-size:12.5px;
  max-width:calc(var(--maxw) - 32px); text-align:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:50;
}
.toast.show{opacity:1; transform:translate(-50%,0);
  /* Stage 3 (M11): the toast now carries a real action link/button
     («Перейти в корзину», «Вернуть»); the base `.toast` still starts
     pointer-events:none so an invisible toast never intercepts a tap. */
  pointer-events:auto;
}
.toast-action{
  background:none; border:none; color:#fff; text-decoration:underline;
  font:inherit; padding:0; margin-left:6px; cursor:pointer;
}

/* ---- Stage 3 (M11): cart header entry ------------------------------------ */
.cart-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); flex:0 0 auto;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); text-decoration:none;
}
.cart-badge{
  position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; line-height:1; min-width:16px; height:16px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 3px; border:2px solid var(--surface);
}

/* ---- Stage 3 (M11): size selection, cart lines, checkout ----------------- */
.size-chip{
  min-width:var(--tap); padding:0 14px; min-height:var(--tap); display:inline-flex;
  align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  font-size:13px; cursor:pointer; text-align:center;
}
.size-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
/* tasks.md (2026-08-28) §6: unavailable sizes stay visible but read as
   disabled through more than colour alone — reduced opacity plus a
   strike-through — never through a repeated "нет в наличии" label. */
.size-chip:disabled,.size-chip.unavailable{
  cursor:not-allowed; opacity:.42; text-decoration:line-through;
  color:var(--ink-soft); background:var(--surface); border-color:var(--border);
}
.field-error{color:var(--bad); font-size:11.5px; margin:4px 0 0;}

.line-item{
  display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border);
}
.line-item .imgwrap{width:64px; height:64px; flex:0 0 auto; background:#f0f1ee; border-radius:var(--radius-sm); overflow:hidden;}
.line-item .imgwrap img{width:100%; height:100%; object-fit:cover; display:block;}
.line-item .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.line-item .name{font-size:13px; font-weight:600; line-height:1.25;}
.line-item .meta{font-size:11px; color:var(--ink-soft);}
.line-item .price-change{font-size:11.5px; color:var(--warn); margin-top:2px;}
.line-item .price-change s{color:var(--ink-soft); margin-right:4px;}
.line-item .qty-row{display:flex; align-items:center; gap:8px; margin-top:6px;}
.qty-stepper{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.qty-stepper button{
  width:32px; height:32px; border:none; background:var(--surface); font-size:16px; cursor:pointer; line-height:1;
}
.qty-stepper input{
  width:34px; height:32px; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border);
  text-align:center; font-size:13px; -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.line-remove{
  background:none; border:none; color:var(--ink-soft); font-size:11.5px; text-decoration:underline;
  cursor:pointer; padding:6px 0; align-self:flex-start;
}
.cart-summary{margin:12px 16px 0; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); font-size:12.5px; color:var(--ink-soft);}
.continue-shopping{
  display:block; text-align:center; margin-top:10px; font-size:12.5px; color:var(--accent);
  text-decoration:none; min-height:var(--tap); line-height:var(--tap);
}

.field{padding:10px 16px 0;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px;}
.field input[type="text"],.field textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--ink);
}
.field textarea{resize:vertical; min-height:70px;}
.field input[type="text"]:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.consent-row{align-items:flex-start; padding:14px 16px 0;}
.consent-row input[type="checkbox"]{width:20px; height:20px; margin-top:1px; flex:0 0 auto;}
.consent-row label{font-size:12.5px; color:var(--ink-soft);}

@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important;}}

/* ---- store phone and footer --------------------------------------------- */
.phone-link{color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap;}
.phone-link:hover{text-decoration:underline;}
.header-phone{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); min-width:var(--tap);
  justify-content:center; padding:0 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--accent); font-size:12.5px; font-weight:600;
  text-decoration:none; white-space:nowrap; margin-left:auto;
}
.header-phone + .cart-link{margin-left:0;}
.header-phone-number{display:none;}
/* The number needs the wide desktop header; below 768px it is an icon (the aria-label keeps the number). */
@media (min-width:768px){ header.top .header-phone-number{display:inline;} }
/* The catalogue bar is only 460px wide at any viewport: the call button stays an icon there so the
   title, counter and cart never fight for the row. */
.catbar .header-phone-number{display:none;}
.empty-state-phone{margin-top:12px;}

.info-page{padding:8px 16px 8px; font-size:14px; line-height:1.55;}
.info-page h2{font-size:15px; margin:18px 0 4px;}
.info-page p{margin:0 0 8px;}
.info-page ul{margin:0 0 8px; padding-left:20px;}
.info-note{font-size:12px; color:var(--ink-soft);}
.info-phone{font-size:18px;}

/* ---- empty-state contact line (2026-10-16) -------------------------------- */
.empty-state-contact{
  display:flex; align-items:center; gap:8px; margin:16px 0 0; font-size:14px; color:var(--accent);
}
.empty-state-contact .phone-link{display:inline-flex; align-items:center; min-height:var(--tap);}
.empty-state-contact svg{flex:0 0 auto;}

/* ---- footer navigation and information pages ------------------------------ */
.info-kv{margin:0 0 8px; display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:6px 14px;}
.info-kv dt{color:var(--ink-soft);}
.info-kv dd{margin:0; font-weight:600; overflow-wrap:anywhere;}
.info-map a,.info-page a{display:inline-flex; align-items:center; min-height:var(--tap);}
.info-page .info-phone a{font-size:16px;}
@media (max-width:420px){ .info-kv{grid-template-columns:1fr; gap:0;} .info-kv dd{margin-bottom:8px;} }
.ed-legal a{display:inline-flex; align-items:center; min-height:var(--tap);}
.ed-legal{display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; margin:6px 0 0; font-size:12.5px; color:var(--ink-soft);}

/* ---- service pages, guide line (2026-10-16) -------------------------------- */
.guide-line[hidden]{display:none;}
.info-subtitle{margin:0 0 10px; color:var(--ink-soft); font-size:14px;}
.info-page .info-expert{width:100%;}
@media (min-width:640px){ .info-page .info-expert{width:auto; padding:0 24px;} }

/* ---- Desktop layout (>=768px) --------------------------------------------
   Mobile stays the 460px column. Home, catalogue and product pages (the ones with a category grid,
   a product list or a gallery) widen to a 1240px content column with a 24px gutter; every section
   uses that same left/right boundary. Fixed panels (action bar, sheets, toast) keep using --maxw.
   Cart, checkout, parts and information pages keep the narrow column. */
@media (min-width:768px){
  .shell:has(#catgrid, #list, #gallery){--shellw:1240px; --gut:24px; --aside:400px;}
  .shell:has(#catgrid, #list, #gallery) header.top{padding:10px var(--gut); min-height:64px; gap:12px;}
  .shell:has(#catgrid, #list, #gallery) .catbar .row1{padding:8px var(--gut); gap:12px;}
  .shell:has(#catgrid, #list, #gallery) .catbar .title{font-size:18px;}
  .shell:has(#catgrid, #list, #gallery) .catbar .count{font-size:12.5px;}
  .shell:has(#catgrid, #list, #gallery) .catbar .brand img{height:36px;}
  .shell:has(#catgrid, #list, #gallery) .catbar .brand-compact + .title{margin-left:4px;}
  .shell:has(#catgrid, #list, #gallery) .header-phone{padding:0 14px;}
  .shell:has(#catgrid, #list, #gallery) :is(.search-wrap,.directions,.catgrid,.partscat,.grid,.section,.more-wrap,.promoted,.count-note,.empty-hint){padding-left:var(--gut); padding-right:var(--gut);}
  .shell:has(#catgrid, #list, #gallery) .catgrid{grid-template-columns:repeat(3,1fr); gap:12px;}
  .shell:has(#catgrid, #list, #gallery) .cattile .thumb{aspect-ratio:16/9;}
  .shell:has(#catgrid, #list, #gallery) .cattile .name{font-size:13.5px;}
  .shell:has(#catgrid, #list, #gallery) .cattile .state{font-size:11px;}
  .shell:has(#catgrid, #list, #gallery) .cattile .illus{font-size:9.5px;}
  .shell:has(#catgrid, #list, #gallery) .section h2{font-size:18px;}
  .shell:has(#catgrid, #list, #gallery) .section .lead{font-size:13.5px;}
  .shell:has(#catgrid, #list, #gallery) .grid{grid-template-columns:repeat(3,1fr); gap:16px;}
  .shell:has(#catgrid, #list) .more-wrap .btn.block{max-width:360px; display:flex; margin:0 auto;}
  .shell:has(#catgrid, #list, #gallery) :is(.guide-line,.services,.site-footer,.relblock){margin-left:var(--gut); margin-right:var(--gut);}
  .shell:has(#catgrid, #list, #gallery) .guide-line{width:auto;}
}
@media (min-width:1100px){
  .shell:has(#list, #gallery) .grid{grid-template-columns:repeat(4,1fr);}
  .shell:has(#catgrid) .catgrid{grid-template-columns:repeat(6,1fr);}
  .shell:has(#catgrid, #list, #gallery) .cattile .thumb{aspect-ratio:4/3;}
}

/* Home, >=900px: search and the Экипировка/Запчасти switch share one row; the help line and service links
   form a second band; the footer spans the same content boundaries. The bands hold only the blocks listed, so grid rows are never
   shared with anything else. */
@media (min-width:900px){
  .shell:has(#catgrid) main{display:grid; grid-template-columns:minmax(0,1fr) var(--aside); align-items:center;}
  .shell:has(#catgrid) main > :is(#panelEquipment,#panelParts){grid-column:1 / -1;}
  .shell:has(#catgrid) main > .search-wrap{grid-column:1; padding-top:18px; padding-bottom:8px; padding-right:12px;}
  .shell:has(#catgrid) main > .directions{grid-column:2; padding-top:18px; padding-bottom:8px; padding-left:12px;}
  .shell:has(#catgrid) main > .guide-line{grid-column:1; grid-row:3; margin-top:24px; margin-right:12px;}
  .shell:has(#catgrid) main > .services{grid-column:2; grid-row:3; margin-top:24px; margin-left:12px; align-self:start;}
}

/* Product detail: gallery left, details right, as ONE block (.pdp). Related blocks are siblings of
   .pdp, so they start below the whole block. The gallery is sticky inside .pdp only. Below 1024px the
   single-column mobile order is unchanged. */
@media (min-width:1024px){
  .shell:has(#gallery) .pdp{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:40px; align-items:start; padding:20px var(--gut) 0;}
  .shell:has(#gallery) .pdp > #gallery{position:sticky; top:84px; border-radius:var(--radius); overflow:hidden;}
  .shell:has(#gallery) .pdp-info :is(.section,.chip-row,.more-wrap,.proto-note){padding-left:0; padding-right:0;}
  .shell:has(#gallery) .relblock{margin-top:32px;}
  .shell:has(#gallery) .relblock .grid{padding:0;}
}

/* ---- Service pages: «Сервис», «Перевозка мототехники» (2026-10-20) -------------
   Scoped to .svc-*; tokens only, no photos. Mobile keeps the 460px column; from 768px the page
   widens to 1120px with the same 24px gutter the home and catalogue use. */
.svc{padding:12px 16px 4px; font-size:14px; line-height:1.5; color:var(--ink);}
.svc h2{font-size:19px; line-height:1.25; margin:0 0 12px;}
.svc h3{font-size:14.5px; line-height:1.3; margin:0 0 2px;}
.svc p{margin:0;}
.svc ul,.svc ol{list-style:none; margin:0; padding:0;}
.svc-block{margin-top:28px;}
.svc-ico{flex:0 0 auto;}

.svc-hero{position:relative; overflow:hidden; border-radius:20px; padding:22px 18px 20px; isolation:isolate;}
.svc-hero-copy{position:relative; z-index:1; display:grid; gap:12px; justify-items:start;}
.svc-hero h2{font-size:26px; line-height:1.15; letter-spacing:-.01em; margin:0; max-width:18ch;}
.svc-lead{font-size:15px; line-height:1.5; max-width:52ch;}
.svc-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 9px; border-radius:999px; font-size:12.5px; font-weight:600; line-height:1.3;}
.svc-hero-art{position:absolute; z-index:0; right:-34px; bottom:-34px; width:200px; height:auto; pointer-events:none;}
.svc-hero-dark{background:var(--accent); color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;}
.svc-hero-dark .svc-pill{background:rgba(255,255,255,.14); color:#fff;}
.svc-hero-dark .svc-hero-art{color:#fff; opacity:.22;}
.svc-hero-light{background:var(--accent-soft); color:var(--ink); border:1px solid var(--border);}
.svc-hero-light .svc-pill{background:var(--surface); color:var(--accent); border:1px solid var(--border);}
.svc-hero-light .svc-hero-art{color:var(--accent); opacity:.4;}

.svc-actions{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:6px;}
.svc .svc-cta{width:auto; padding:0 24px; min-height:48px;}
.svc-phone{display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); font-size:16px; font-weight:700; text-decoration:none;}
.svc-actions-dark .btn.primary{background:#fff; border-color:#fff; color:var(--accent);}
.svc-actions-dark .svc-phone{color:#fff;}
.svc-actions-light .svc-phone{color:var(--accent);}
.svc-hero-dark :focus-visible,.svc-contact :focus-visible{outline-color:#fff;}
@media (max-width:420px){ .svc .svc-cta{width:100%;} .svc-actions{gap:2px 0;} .svc-phone{width:100%;} }

.svc-chips{display:flex; flex-wrap:wrap; gap:8px;}
.svc-chips li{padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-weight:600;}
.svc-chips .svc-chip-soft{background:transparent; border-style:dashed; color:var(--ink-soft); font-weight:500;}

.svc-cards{display:grid; gap:10px; grid-template-columns:minmax(0,1fr);}
.svc-card{display:flex; align-items:flex-start; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);}
.svc-card > .svc-ico{box-sizing:content-box; padding:9px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent);}
.svc-card p{color:var(--ink-soft); font-size:13.5px;}
.svc-cards-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
.svc-cards-tiles .svc-card{flex-direction:column; align-items:center; text-align:center; gap:8px; padding:16px 8px;}
.svc-cards-tiles h3{font-size:14px; margin:0;}
.svc-cards-routes .svc-card{border-top:3px solid var(--accent);}
.svc-note{display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--warn-bg); color:var(--warn);}
.svc-note .svc-ico{margin-top:1px;}

.svc-feature{display:flex; align-items:center; gap:16px; padding:18px; border-radius:var(--radius); background:var(--accent-soft); color:var(--accent);}
.svc-feature h2{margin:0 0 4px; color:var(--ink);}
.svc-feature p{color:var(--ink);}
.svc-experience{display:flex; align-items:center; gap:16px; padding:20px 18px; border-radius:var(--radius); background:var(--accent); color:#fff;}
.svc-experience h2{margin:0 0 2px;}
.svc-exp-big{font-size:28px; font-weight:800; line-height:1.15; margin:2px 0 6px !important; letter-spacing:-.01em;}
.svc-experience p:last-child{color:rgba(255,255,255,.82); font-size:13.5px;}

.svc-steps{display:grid; gap:0;}
.svc-step{position:relative; display:flex; gap:14px; padding-bottom:20px;}
.svc-step:last-child{padding-bottom:0;}
.svc-step::before{content:""; position:absolute; left:17px; top:38px; bottom:2px; width:2px; background:var(--border);}
.svc-step:last-child::before{display:none;}
.svc-step-n{flex:0 0 36px; width:36px; height:36px; align-self:flex-start; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:700; font-size:15px;}
.svc-step p{color:var(--ink-soft); font-size:13.5px;}

.svc-conditions{padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); align-self:start;}
.svc-conditions li{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border);}
.svc-conditions li:first-child{border-top:0; padding-top:0;}
.svc-conditions li:last-child{padding-bottom:0;}
.svc-conditions .svc-ico{color:var(--accent); margin-top:1px;}
.svc-duo{display:grid; gap:28px;}

.svc-contact{margin-top:28px; padding:22px 18px; border-radius:20px; background:var(--accent); color:#fff; display:grid; gap:20px;}
.svc-contact h2{font-size:21px; margin:0 0 6px;}
.svc-contact > div > p{color:rgba(255,255,255,.88); max-width:50ch;}
.svc-where{display:grid; gap:10px; align-content:start; padding:16px; border-radius:var(--radius); background:rgba(255,255,255,.1);}
.svc-where-line{display:flex; gap:10px; align-items:flex-start;}
.svc-where-line .svc-ico{margin-top:2px;}
.svc-hours{margin:0; gap:2px 12px;}
.svc-hours dt{color:rgba(255,255,255,.75);}
.svc-hours dd{color:#fff;}
.svc-map{color:#fff; display:inline-flex; align-items:center; min-height:var(--tap);}

@media (min-width:600px){
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svc-cards-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:768px){
  .shell.svc-shell{--shellw:1120px; --gut:24px;}
  .svc-shell .catbar .row1{padding:8px var(--gut); gap:12px;}
  .svc-shell .catbar .title{font-size:18px;}
  .svc-shell .site-footer{margin-left:var(--gut); margin-right:var(--gut);}
  .svc{padding:20px var(--gut) 8px; font-size:15px;}
  .svc h2{font-size:24px; margin-bottom:16px;}
  .svc h3{font-size:15.5px;}
  .svc-block{margin-top:44px;}
  .svc-hero{padding:48px 44px; border-radius:24px; min-height:340px; display:flex; align-items:center;}
  .svc-hero h2{font-size:40px; max-width:20ch;}
  .svc-lead{font-size:17px;}
  .svc-hero-art{right:44px; bottom:auto; top:50%; transform:translateY(-50%); width:340px;}
  .svc-hero-dark .svc-hero-art{opacity:.3;}
  .svc-cards{gap:14px;}
  .svc-cards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .svc-cards-routes{grid-template-columns:repeat(3,minmax(0,1fr));}
  .svc-cards-tiles{grid-template-columns:repeat(6,minmax(0,1fr));}
  .svc-card{padding:18px;}
  .svc-cards-tiles .svc-card{padding:22px 8px;}
  .svc-feature{padding:28px 32px; gap:22px;}
  .svc-experience{padding:32px; gap:24px;}
  .svc-exp-big{font-size:44px;}
  .svc-steps-row{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
  .svc-steps-row .svc-step{flex-direction:column; padding-bottom:0; gap:12px;}
  .svc-steps-row .svc-step::before{left:46px; right:-24px; top:17px; bottom:auto; width:auto; height:2px;}
  .svc-contact{padding:36px 40px; gap:32px; border-radius:24px; margin-top:44px;}
  .svc-contact h2{font-size:28px;}
}
@media (min-width:900px){
  .svc-contact{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center;}
  .svc-duo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px;}
}
@media (max-width:359px){
  .svc{padding-left:12px; padding-right:12px;}
  .svc-hero h2{font-size:23px;}
}
/* ---- Information pages: structured layouts (2026-10-20) ---------------------------------------------------
   Rendered by services/info_layouts.py for request terms, delivery and payment, about, contacts and
   requisites (`.info-page.ip-rich`). Service and legal documents keep the plain `.info-page` text styles above.
   Mobile is the 460px column; from 768px these pages widen to a 1120px column with a 24px gutter, and the
   header bar and footer take the same boundaries. Components use the existing tokens only. */
.ip-rich{padding:16px 16px 8px; font-size:14.5px; line-height:1.55;}
.ip-rich h2{font-size:17px; line-height:1.25; margin:0 0 8px;}
.ip-rich h3{font-size:14.5px; line-height:1.3; margin:0 0 6px;}
.ip-rich p{margin:0 0 10px; max-width:68ch;}
.ip-rich ul,.ip-rich ol{margin:0; padding-left:20px;}
.ip-rich li + li{margin-top:2px;}
.ip-rich .ip-icon{flex:none;}
.ip-rich .ip-lead{font-size:17px; line-height:1.5; font-weight:500; margin:0 0 18px; max-width:62ch;}
.ip-section{margin:28px 0 0;}
.ip-section > h2{font-size:19px; margin-bottom:6px;}
.ip-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.ip-card > :last-child{margin-bottom:0;}
.ip-callout{background:var(--accent-soft); border:1px solid #d3dfe8; border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:14px 16px;}
.ip-callout > :last-child{margin-bottom:0;}
.ip-rich .ip-fine{font-size:12.5px; color:var(--ink-soft);}
.info-page .ip-link{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
.ip-help{margin-top:28px;}
.ip-rich .ip-help-phone{display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700;}
.ip-help-phone .ip-icon{color:var(--accent);}
.info-page .ip-help-phone a{font-size:20px;}

/* request terms: numbered steps, a vertical sequence on mobile and a 2x2 grid on desktop */
.ip-rich ol.ip-steps{list-style:none; counter-reset:step; margin:24px 0 0; padding:0; display:grid; gap:0;}
.ip-step{counter-increment:step; position:relative; display:grid; grid-template-columns:36px minmax(0,1fr);
  column-gap:14px; padding-bottom:16px; margin:0;}
.ip-step::before{content:counter(step); grid-column:1; align-self:start; width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; display:grid; place-items:center;}
.ip-step::after{content:""; position:absolute; left:17px; top:42px; bottom:6px; width:2px; background:var(--border);}
.ip-step:last-child::after{display:none;}
.ip-step-body{grid-column:2; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px;}
.ip-step h2{font-size:16px;}
.ip-step h3{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:10px 0 4px;}
.ip-step-body > :last-child{margin-bottom:0;}
.ip-step ul{padding-left:18px;}

/* delivery and payment */
.ip-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px;}
.info-page .ip-jump a{border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:0 16px;
  font-weight:600; color:var(--accent); text-decoration:none;}
.ip-rich ul.ip-methods{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px;}
.ip-method{margin:0;}
.ip-method .ip-icon{display:block; color:var(--accent); margin-bottom:8px;}
.ip-method h3{font-size:16px;}
.ip-method p + p{margin-bottom:0;}
.ip-terms{display:grid; gap:12px; margin-top:12px;}
.ip-rich ul.ip-pays{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;}
.ip-pay{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; font-weight:600; display:flex; align-items:center; gap:10px; min-height:48px;}
.ip-pay::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent);}
.ip-rich .ip-notice{display:flex; align-items:center; gap:10px; margin:12px 0 0; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--warn-bg); color:var(--warn); font-weight:600;}

/* about */
.ip-rich ul.ip-facts{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.ip-facts li{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;}
.ip-facts strong{font-size:26px; line-height:1.15; color:var(--accent);}
.ip-facts span{font-size:13px; color:var(--ink-soft);}
.ip-rich ul.ip-directions{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px;}
.ip-direction{margin:0;}
.ip-direction h3{font-size:16px; margin:0;}
.ip-direction p{margin:4px 0 0; color:var(--ink-soft);}
.ip-brandwrap{display:grid; gap:12px;}
.ip-brands{margin:0;}
.ip-brands dt{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:12px;}
.ip-brands dd{margin:6px 0 0;}
.ip-rich ul.ip-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.ip-chips li{margin:0; border:1px solid var(--border); background:var(--bg); border-radius:999px; padding:4px 12px;
  font-size:13px; font-weight:600;}
.ip-selection{margin-top:28px;}
.ip-store{margin-top:12px;}
.ip-rich .ip-address{font-size:17px; font-weight:600;}
.ip-hours{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; margin:0 0 10px;}
.ip-hours dt{color:var(--ink-soft);}
.ip-hours dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums;}

/* contacts: one prominent call block, then the details as cards */
.ip-phone-hero{background:var(--accent); color:#fff; border-radius:var(--radius); padding:22px 20px; margin-bottom:12px;}
.ip-phone-hero h2{font-size:14px; font-weight:600; color:rgba(255,255,255,.82);}
.ip-phone-hero p{color:rgba(255,255,255,.9);}
.info-page .ip-phone-hero .ip-phone-number{color:#fff; font-size:30px; font-weight:700; line-height:1.2; text-decoration:none;}
.info-page .ip-phone-hero .info-phone{margin-bottom:8px;}
.info-page .ip-callbtn{margin-top:6px; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px;
  background:#fff; color:var(--accent); font-weight:700; text-decoration:none;}
.ip-contact-grid{display:grid; gap:12px;}
.ip-contact h2{display:flex; align-items:center; gap:8px; font-size:15px;}
.ip-contact h2 .ip-icon{color:var(--accent);}
.ip-contact ul{list-style:none; padding:0;}
.ip-contact .info-email a{font-size:17px; overflow-wrap:anywhere;}
.ip-hours-card .ip-hours{margin-bottom:0;}

/* seller requisites: a formal ledger of labelled values */
.ip-doc{display:grid; gap:0;}
.ip-doc-section{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:2px 16px 14px; margin-bottom:16px;}
.ip-doc-section > h2{font-size:13px; font-weight:700; color:var(--ink-soft); margin:0; padding:12px 0 8px;
  border-bottom:1px solid var(--border);}
.ip-fields{margin:0;}
.ip-field{display:grid; gap:4px; padding:12px 0; border-bottom:1px solid var(--border);}
.ip-field:last-child{border-bottom:0;}
.ip-field dt{font-size:12.5px; color:var(--ink-soft);}
.ip-field dd{margin:0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.ip-value{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; user-select:all;}
.ip-copy{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:var(--tap);
  min-height:var(--tap); margin:-8px 0; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--accent); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;}
.ip-copy .ip-icon{width:16px; height:16px;}
.ip-copy span{display:none;}
.ip-copy.copied{background:var(--good-bg); border-color:var(--good); color:var(--good);}
.ip-copy-all{width:100%; margin:12px 0;}

@media (min-width:480px){ .ip-copy span{display:inline;} }
@media (min-width:640px){
  .ip-rich ul.ip-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ip-rich ul.ip-pays{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ip-copy-all{width:auto;}
}
@media (min-width:768px){
  .shell:has(.ip-rich){--shellw:1120px; --gut:24px;}
  .shell:has(.ip-rich) .catbar .row1{padding:8px var(--gut); gap:12px;}
  .shell:has(.ip-rich) .catbar .title{font-size:18px;}
  .shell:has(.ip-rich) .catbar .brand img{height:36px;}
  .shell:has(.ip-rich) .site-footer{margin-left:var(--gut); margin-right:var(--gut);}
  .ip-rich{padding:28px var(--gut) 8px; font-size:15px;}
  .ip-rich h2{font-size:18px;}
  .ip-rich .ip-lead{font-size:21px; line-height:1.45;}
  .ip-section{margin-top:40px;}
  .ip-section > h2{font-size:22px;}
  .ip-rich ol.ip-steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:32px;}
  .ip-step{padding-bottom:0;}
  .ip-step::after{display:none;}
  .ip-step-body{padding:18px 20px;}
  .ip-methods,.ip-directions{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ip-terms{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ip-phone-hero{padding:32px 36px;}
  .info-page .ip-phone-hero .ip-phone-number{font-size:44px;}
  .ip-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
  .ip-help,.ip-selection{margin-top:40px;}
}
@media (min-width:900px){
  .ip-intro{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; align-items:start;}
  .ip-intro .ip-lead{margin:0;}
  .ip-brandwrap{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start;}
  .ip-doc{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; align-items:start;}
}
@media (min-width:1024px){
  .ip-rich ul.ip-pays{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---- Shared footer (2026-10-20) -------------------------------------------------------------------------
   Built by installSiteChrome() in preview.js. The footer is a size container, so the panel adapts to the
   column it sits in (460px on cart/checkout/parts, 1120px on information pages, 1240px on home, catalogue
   and product) rather than to the viewport. Page contexts above only set its side margins. */
.site-footer{
  margin:28px 16px 0; container-type:inline-size; container-name:sitefooter;
  font-size:14px; color:var(--ink-soft);
}
.site-footer-panel{
  display:grid; gap:14px; padding:14px 16px 16px;
  background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent);
  border-radius:var(--radius); box-shadow:0 1px 2px rgba(23,26,29,.04);
}
.site-footer-brand p{margin:2px 0 0; max-width:34ch; color:var(--ink-soft); line-height:1.45;}
.site-footer-brand .brand{min-height:var(--tap); color:var(--ink);}
.site-footer-title{font-size:13px; font-weight:700; color:var(--ink); margin:0 0 4px; letter-spacing:.01em;}
.site-footer-nav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px;}
.site-footer-group:last-child{grid-column:1 / -1;}
.site-footer-group:last-child ul{display:flex; flex-wrap:wrap; gap:0 20px;}
.site-footer ul{list-style:none; margin:0; padding:0;}
.site-footer-nav a,.site-footer-docs a{
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:38px;
}
.site-footer-nav a:hover,.site-footer-docs a:hover,.site-footer-address a:hover,.site-footer-mail:hover{text-decoration:underline;}
.site-footer-contact{background:var(--accent-soft); border-radius:var(--radius-sm); padding:12px 16px 10px;}
.site-footer-contact .site-footer-title{color:var(--accent);}
.site-footer-phone{font-size:20px; line-height:1.2;}
.site-footer-phone .phone-link{display:inline-flex; align-items:center; min-height:42px;}
.site-footer-mail{
  display:inline-flex; align-items:center; min-height:40px; color:var(--accent);
  font-weight:600; font-size:15px; overflow-wrap:anywhere; text-decoration:none;
}
.site-footer-address{margin:0 0 4px; color:var(--ink); line-height:1.4;}
.site-footer-address a{
  display:inline-flex; align-items:center; min-height:36px; padding:0 4px; color:var(--accent); font-weight:600; white-space:nowrap;
}
.site-footer-hours{margin:0 0 2px; display:grid; gap:2px; font-size:13.5px;}
.site-footer-hours div{display:flex; gap:10px;}
.site-footer-hours dt{min-width:44px; color:var(--ink-soft);}
.site-footer-hours dd{margin:0; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}
.site-footer-base{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 24px; padding:10px 4px 0; font-size:13px;}
.site-footer-docs ul{display:flex; flex-wrap:wrap; gap:0 18px;}
.site-footer a:focus-visible{border-radius:4px;}

@container sitefooter (min-width:520px){
  .site-footer-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 28px; padding:24px 24px 26px;}
  .site-footer-nav{grid-column:1 / -1; grid-row:2; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);}
  .site-footer-group:last-child{grid-column:auto;}
  .site-footer-group:last-child ul{display:block;}
  .site-footer-nav a{min-height:36px;}
  .site-footer-contact{grid-row:1; grid-column:2;}
}
@container sitefooter (min-width:900px){
  .site-footer-panel{grid-template-columns:minmax(200px,1.1fr) minmax(0,2.5fr) minmax(270px,1.3fr); gap:0 40px; align-items:start; padding:28px 28px 30px;}
  .site-footer-nav{grid-column:2; grid-row:1; gap:16px 28px;}
  .site-footer-contact{grid-column:3; grid-row:1;}
}