/* ==========================================================================
   АвтоЗапчасти — storefront design system
   Graphite + one signal accent. No gradients, no emoji, flat bordered surfaces.
   Self-hosted IBM Plex (Cyrillic + Latin). Motion is purposeful and optional.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans"; font-weight:100 700; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-sans-rub.woff2) format("woff2"); unicode-range:U+20BD; }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url(../fonts/ibm-plex-mono-rub.woff2) format("woff2"); unicode-range:U+20BD; }

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --bg:#f3f5f7; --surface:#ffffff; --surface-2:#f8f9fb;
  --ink:#10151c; --ink-2:#2f3946; --muted:#5c6877; --faint:#8a95a3;
  --line:#dfe4ea; --line-2:#cbd3dc;

  --dark:#10151c; --dark-2:#171e27; --dark-3:#1f2833; --dark-line:#2a3544;
  --on-dark:#e9edf2; --on-dark-2:#a9b4c1;

  --accent:#f5a524; --accent-2:#e8940f; --accent-ink:#10151c; --accent-soft:#fff4dc;
  --blue:#1b5fb8; --blue-soft:#e8f0fb;
  --ok:#1e7f4f; --ok-soft:#e5f4eb;
  --warn:#8f5a00; --warn-soft:#fff1d6;
  --bad:#b42318; --bad-soft:#fdebe8;

  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem;
  --fs-lg:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  --fs-xl:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  --fs-hero:clamp(1.9rem,1.3rem + 2.2vw,3.1rem);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r-1:4px; --r-2:6px; --r-3:8px;
  --shadow-1:0 1px 2px rgba(16,21,28,.06);
  --shadow-2:0 8px 24px rgba(16,21,28,.12);

  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:120ms; --t-med:200ms; --t-slow:360ms;
  --container:1200px;
  color-scheme:light;
}

/* ---------- Base -------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--font); font-size:var(--fs-base); line-height:1.55; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; font-weight:600; line-height:1.2; letter-spacing:-.012em; color:var(--ink); }
p { margin:0; }
a { color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
img,svg { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:var(--r-1); }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color:var(--accent); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:var(--r-2); font-weight:600; transition:top var(--t-fast); }
.skip-link:focus { top:12px; }
.num { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--mono); font-weight:500; letter-spacing:.01em; }
.muted { color:var(--muted); }
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--sp-4); }
@media (min-width:760px){ .container { padding:0 var(--sp-5); } }
main { flex:1 0 auto; }

/* ---------- Icons ------------------------------------------------------- */
.ico { width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ico--lg { width:20px; height:20px; }
.ico--sm { width:1em; height:1em; }
.rub { font-family:"IBM Plex Sans",var(--font); }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border:1px solid transparent; border-radius:var(--r-2);
  font-weight:600; font-size:var(--fs-base); line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  background:var(--dark); color:#fff;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
.btn:hover { background:var(--dark-3); text-decoration:none; }
.btn:active { transform:translateY(1px) scale(.985); }
.btn[disabled], .btn.is-loading { opacity:.65; cursor:progress; pointer-events:none; }
.btn--primary { background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover { background:var(--accent-2); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { background:var(--surface-2); border-color:var(--ink-2); }
.btn--sm { min-height:36px; padding:0 14px; font-size:var(--fs-sm); }
.btn--block { width:100%; }
.btn .ico { width:18px; height:18px; }
.btn.is-done { background:var(--ok); color:#fff; }
.link-btn { background:none; border:0; padding:0; color:var(--blue); cursor:pointer; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover { text-decoration-thickness:2px; }
.link-danger { color:var(--bad); }

/* ---------- Forms ------------------------------------------------------- */
.field { display:block; margin-bottom:var(--sp-4); }
.field > span, .field > label { display:block; font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); margin-bottom:6px; }
.input, .select {
  width:100%; min-height:46px; padding:0 14px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color:var(--faint); }
.input:hover, .select:hover { border-color:var(--faint); }
.input:focus, .select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,95,184,.18); }
.input[aria-invalid="true"] { border-color:var(--bad); }
.hint { font-size:var(--fs-xs); color:var(--muted); margin-top:6px; }

/* ---------- Chips / badges --------------------------------------------- */
.chip {
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
  border-radius:var(--r-1); font-size:var(--fs-xs); font-weight:500; line-height:1;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); white-space:nowrap;
}
.chip--ok { background:var(--ok-soft); color:var(--ok); border-color:#c6e6d2; }
.chip--warn { background:var(--warn-soft); color:var(--warn); border-color:#f1d9a3; }
.chip--bad { background:var(--bad-soft); color:var(--bad); border-color:#f5c9c3; }
.chip--info { background:var(--blue-soft); color:var(--blue); border-color:#cbdcf3; }
.chip .ico { width:13px; height:13px; }

/* ---------- Surfaces ---------------------------------------------------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); padding:var(--sp-5); }
.card--flush { padding:0; overflow:hidden; }
.card + .card { margin-top:var(--sp-4); }
.card__title { font-size:var(--fs-md); margin-bottom:var(--sp-4); }
.notice { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-2); border:1px solid #f1d9a3; background:var(--warn-soft); color:var(--warn); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.notice--ok { background:var(--ok-soft); border-color:#c6e6d2; color:var(--ok); }
.notice--bad { background:var(--bad-soft); border-color:#f5c9c3; color:var(--bad); }
.notice .ico { margin-top:1px; }
.page-head { padding:var(--sp-6) 0 var(--sp-4); }
.page-head h1 { font-size:var(--fs-xl); }
.page-head p { color:var(--muted); margin-top:6px; max-width:68ch; }
.crumbs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:var(--fs-sm); color:var(--muted); margin-bottom:10px; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--ink); text-decoration:underline; }
.crumbs .ico { width:12px; height:12px; }
.section { padding:var(--sp-6) 0; }
.section__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.section__head h2 { font-size:var(--fs-lg); }
.section__head p { color:var(--muted); font-size:var(--fs-sm); }

/* ---------- Header ------------------------------------------------------ */
.topbar { background:var(--dark); color:var(--on-dark-2); font-size:var(--fs-xs); border-bottom:1px solid var(--dark-line); }
.topbar .container { display:flex; align-items:center; gap:var(--sp-5); min-height:34px; flex-wrap:wrap; }
.topbar a { color:var(--on-dark); text-decoration:none; }
.topbar a:hover { text-decoration:underline; }
.topbar__item { display:inline-flex; align-items:center; gap:7px; }
.topbar__item .ico { width:14px; height:14px; color:var(--accent); }
.topbar__spacer { margin-left:auto; }
.site-header { position:sticky; top:0; z-index:40; background:var(--dark-2); color:var(--on-dark); border-bottom:1px solid var(--dark-line); transition:box-shadow var(--t-med); view-transition-name:site-header; }
.site-header.is-scrolled { box-shadow:0 6px 20px rgba(0,0,0,.28); }
.site-header .container { display:flex; align-items:center; gap:var(--sp-4); min-height:64px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; flex:none; }
.brand:hover { text-decoration:none; }
.brand__mark { width:36px; height:36px; flex:none; }
.brand__text { display:flex; flex-direction:column; line-height:1.1; }
.brand__name { font-weight:600; font-size:1.0625rem; letter-spacing:-.01em; }
.brand__tag { font-size:.6875rem; color:var(--on-dark-2); letter-spacing:.02em; margin-top:3px; }
.head-search { flex:1; max-width:560px; margin-left:var(--sp-4); display:none; }
.head-search form { display:flex; height:42px; background:var(--dark-3); border:1px solid var(--dark-line); border-radius:var(--r-2); overflow:hidden; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.head-search form:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,165,36,.2); }
.head-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; padding:0 14px; }
.head-search input::placeholder { color:var(--on-dark-2); }
.head-search button { width:46px; border:0; background:transparent; color:var(--on-dark); cursor:pointer; display:grid; place-items:center; }
.head-search button:hover { color:var(--accent); }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:var(--r-2); color:var(--on-dark); text-decoration:none; font-size:var(--fs-sm); font-weight:500; position:relative; transition:background var(--t-fast); }
.nav-link:hover { background:var(--dark-3); text-decoration:none; }
.nav-link[aria-current="page"]::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--accent); border-radius:2px; }
.nav-link .ico { width:20px; height:20px; }
.nav-link__label { display:none; }
.cart-count { position:absolute; top:5px; left:26px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:600; line-height:18px; text-align:center; font-variant-numeric:tabular-nums; }
.cart-count[data-n="0"] { display:none; }
.cart-count.is-bump { animation:bump .42s var(--ease); }
@media (min-width:760px){ .head-search { display:block; } .nav-link__label { display:inline; } .cart-count { left:24px; } }
@media (max-width:759px){
  .topbar .container { gap:var(--sp-3); }
  .topbar__hide-m { display:none; }
  .brand__tag { display:none; }
}

/* ---------- Footer ------------------------------------------------------ */
.site-footer { background:var(--dark); color:var(--on-dark-2); margin-top:var(--sp-8); font-size:var(--fs-sm); }
.site-footer .container { padding-top:var(--sp-7); padding-bottom:var(--sp-5); }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-6); }
.footer-grid h3 { color:#fff; font-size:var(--fs-sm); font-weight:600; margin-bottom:12px; letter-spacing:.02em; text-transform:uppercase; }
.footer-grid p, .footer-grid li { line-height:1.75; }
.footer-grid ul { list-style:none; margin:0; padding:0; }
.site-footer a { color:var(--on-dark); text-decoration:none; }
.site-footer a:hover { color:var(--accent); text-decoration:underline; }
.footer-line { display:flex; gap:10px; align-items:flex-start; }
.footer-line .ico { width:16px; height:16px; margin-top:4px; color:var(--accent); }
.footer-bottom { margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--dark-line); font-size:var(--fs-xs); display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }

/* ---------- Hero (home) ------------------------------------------------- */
.hero { background:var(--dark); color:#fff; position:relative; overflow:hidden; border-bottom:3px solid var(--accent); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--dark-line) 1px, transparent 1px), linear-gradient(90deg, var(--dark-line) 1px, transparent 1px);
  background-size:48px 48px; -webkit-mask-image:linear-gradient(100deg, transparent 20%, #000 100%); mask-image:linear-gradient(100deg, transparent 20%, #000 100%); }
.hero .container { position:relative; padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
.hero__eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:var(--sp-4); }
.hero__eyebrow::before { content:""; width:28px; height:2px; background:var(--accent); }
.hero h1 { color:#fff; font-size:var(--fs-hero); max-width:18ch; letter-spacing:-.025em; line-height:1.08; }
.hero__lead { color:var(--on-dark-2); max-width:56ch; margin-top:var(--sp-4); font-size:var(--fs-md); }
.searchbar { margin-top:var(--sp-5); max-width:720px; }
.searchbar form { display:flex; background:#fff; border-radius:var(--r-3); padding:6px; gap:6px; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.searchbar .field-icon { display:grid; place-items:center; width:44px; color:var(--muted); }
.searchbar input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:1.0625rem; height:50px; }
.searchbar input::placeholder { color:var(--faint); }
.searchbar .btn { min-height:50px; padding:0 28px; border-radius:var(--r-2); }
.searchbar:focus-within form { box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 0 3px rgba(245,165,36,.55); }
.examples { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--on-dark-2); }
.examples button { height:28px; padding:0 11px; border-radius:var(--r-1); border:1px solid var(--dark-line); background:transparent; color:var(--on-dark); cursor:pointer; font-family:var(--mono); font-weight:500; font-size:var(--fs-xs); transition:border-color var(--t-fast), color var(--t-fast); }
.examples button:hover { border-color:var(--accent); color:var(--accent); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden; margin-top:calc(-1 * var(--sp-6)); position:relative; z-index:2; box-shadow:var(--shadow-1); }
.fact { background:var(--surface); padding:var(--sp-4) var(--sp-5); display:flex; gap:14px; align-items:center; }
.fact .ico { width:28px; height:28px; color:var(--ink); flex:none; stroke-width:1.4; }
.fact b { display:block; font-size:1.25rem; line-height:1.15; font-variant-numeric:tabular-nums; }
.fact span { font-size:var(--fs-sm); color:var(--muted); }

/* ---------- Catalog grid ------------------------------------------------ */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.cat-card { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); color:var(--ink); text-decoration:none; position:relative; overflow:hidden; transition:border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.cat-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform var(--t-med) var(--ease); }
.cat-card:hover, .cat-card:focus-visible { border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-1); text-decoration:none; }
.cat-card:hover::after, .cat-card:focus-visible::after { transform:scaleY(1); }
.cat-card__ico { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:var(--r-2); background:var(--surface-2); color:var(--ink); transition:background var(--t-fast), color var(--t-fast); }
.cat-card:hover .cat-card__ico { background:var(--dark); color:var(--accent); }
.cat-card__ico .ico { width:26px; height:26px; stroke-width:1.5; }
.cat-card__name { font-weight:600; line-height:1.25; font-size:var(--fs-base); }
.cat-card__count { font-size:var(--fs-xs); color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums; }

/* animated category icons: parts move only on hover/focus */
.ico .a { transform-box:fill-box; transform-origin:center; }
.ico .a-bottom { transform-origin:50% 100%; }
.cat-card:hover .a-spin, .cat-card:focus-visible .a-spin { animation:spin 2.8s linear infinite; }
.cat-card:hover .a-sweep, .cat-card:focus-visible .a-sweep { animation:sweep 1.2s var(--ease) infinite alternate; }
.cat-card:hover .a-squash, .cat-card:focus-visible .a-squash { animation:squash .7s var(--ease) infinite alternate; }
.cat-card:hover .a-piston, .cat-card:focus-visible .a-piston { animation:piston .6s ease-in-out infinite alternate; }
.cat-card:hover .a-flick, .cat-card:focus-visible .a-flick { animation:flick .9s steps(2,end) infinite; }
.cat-card:hover .a-beam, .cat-card:focus-visible .a-beam { animation:beam 1s ease-in-out infinite alternate; }
.cat-card:hover .a-drop, .cat-card:focus-visible .a-drop { animation:drop 1.1s ease-in infinite; }
.cat-card:hover .a-tilt, .cat-card:focus-visible .a-tilt { animation:tilt .8s var(--ease) infinite alternate; }

/* ---------- Steps ------------------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4); counter-reset:step; }
.step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); padding:var(--sp-5); position:relative; }
.step::before { counter-increment:step; content:"0" counter(step); font-family:var(--mono); font-weight:500; font-size:var(--fs-sm); color:var(--accent-2); display:block; margin-bottom:10px; }
.step h3 { font-size:var(--fs-md); margin-bottom:6px; }
.step p { color:var(--muted); font-size:var(--fs-sm); }

/* ---------- Search results --------------------------------------------- */
.results-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; padding:var(--sp-5) 0 var(--sp-3); }
.results-head h1 { font-size:var(--fs-xl); }
.results-head h1 .mono { background:var(--dark); color:var(--accent); padding:1px 10px; border-radius:var(--r-2); font-size:.85em; margin-left:4px; }
.results-sub { color:var(--muted); font-size:var(--fs-sm); margin-top:6px; min-height:1.4em; }
.progress { position:relative; height:3px; background:var(--line); border-radius:3px; overflow:hidden; margin:0 0 var(--sp-3); transition:opacity var(--t-slow) var(--ease), height var(--t-slow); }
.progress__bar { position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(var(--p,0)); transition:transform .45s var(--ease); }
.progress.is-indeterminate .progress__bar { transform:none; width:35%; animation:indet 1.1s var(--ease) infinite; }
.progress.is-done { opacity:0; height:0; margin:0; }
.toolbar { display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-2); overflow:hidden; background:var(--surface); }
.seg button { height:36px; padding:0 14px; border:0; background:transparent; font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); cursor:pointer; transition:background var(--t-fast), color var(--t-fast); }
.seg button + button { border-left:1px solid var(--line-2); }
.seg button:hover { background:var(--surface-2); }
.seg button[aria-pressed="true"] { background:var(--dark); color:#fff; }
.toggle { display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-sm); cursor:pointer; user-select:none; min-height:36px; }
.toggle input { position:absolute; opacity:0; }
.toggle i { width:36px; height:20px; border-radius:10px; background:var(--line-2); position:relative; transition:background var(--t-fast); flex:none; }
.toggle i::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform var(--t-med) var(--ease); }
.toggle input:checked + i { background:var(--ok); }
.toggle input:checked + i::after { transform:translateX(16px); }
.toggle input:focus-visible + i { outline:2px solid var(--blue); outline-offset:2px; }

.group-title { font-size:var(--fs-md); margin:var(--sp-5) 0 var(--sp-3); display:flex; align-items:center; gap:10px; }
.group-title .chip { font-weight:600; }

.prod { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); margin-bottom:10px; overflow:hidden; transition:border-color var(--t-fast), box-shadow var(--t-med); }
.prod:hover { border-color:var(--line-2); box-shadow:var(--shadow-1); }
.prod.is-new { animation:rowin .42s var(--ease) both; }
.prod.is-new .prod__main { animation:flash 1.6s ease-out; }
.prod__main { display:grid; grid-template-columns:minmax(150px,.9fr) minmax(200px,2fr) auto; gap:var(--sp-3) var(--sp-5); align-items:center; padding:var(--sp-4) var(--sp-5); }
.prod__brand { display:block; font-weight:600; font-size:var(--fs-md); letter-spacing:-.005em; }
.prod__art { display:inline-block; margin-top:3px; font-family:var(--mono); font-weight:500; font-size:var(--fs-sm); color:var(--muted); }
.prod__name { color:var(--ink-2); line-height:1.4; }
.prod__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.prod__buy { display:flex; align-items:center; gap:var(--sp-4); justify-content:flex-end; flex-wrap:wrap; }
.price { font-variant-numeric:tabular-nums; font-weight:600; font-size:1.25rem; letter-spacing:-.01em; line-height:1.1; white-space:nowrap; }
.price small { display:block; font-size:var(--fs-xs); font-weight:400; color:var(--muted); letter-spacing:0; margin-top:3px; }
.eta { font-size:var(--fs-sm); min-width:92px; line-height:1.3; }
.eta b { display:block; font-weight:600; }
.eta span { color:var(--muted); font-size:var(--fs-xs); }
.eta.is-now b { color:var(--ok); }
.qty { display:inline-flex; align-items:center; height:40px; border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surface); overflow:hidden; }
.qty button { width:34px; height:100%; border:0; background:transparent; cursor:pointer; color:var(--ink-2); display:grid; place-items:center; transition:background var(--t-fast); }
.qty button:hover { background:var(--surface-2); }
.qty button:disabled { color:var(--line-2); cursor:not-allowed; }
.qty input { width:44px; height:100%; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-variant-numeric:tabular-nums; font-weight:500; background:transparent; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.prod__more { border-top:1px solid var(--line); background:var(--surface-2); }
.prod__toggle { display:flex; align-items:center; gap:8px; width:100%; padding:10px var(--sp-5); background:transparent; border:0; cursor:pointer; color:var(--blue); font-size:var(--fs-sm); font-weight:500; text-align:left; }
.prod__toggle:hover { background:#eef1f5; }
.prod__toggle .ico { width:16px; height:16px; transition:transform var(--t-med) var(--ease); }
.prod__toggle[aria-expanded="true"] .ico { transform:rotate(180deg); }
.offer-list { display:none; border-top:1px solid var(--line); }
.prod__toggle[aria-expanded="true"] + .offer-list { display:block; animation:fadein var(--t-med) var(--ease); }
.offer { display:grid; grid-template-columns:minmax(120px,1fr) minmax(110px,1fr) minmax(90px,.7fr) auto auto; gap:var(--sp-3) var(--sp-5); align-items:center; padding:10px var(--sp-5); border-bottom:1px solid var(--line); }
.offer:last-child { border-bottom:0; }
.offer .price { font-size:1.0625rem; }
.stock { font-size:var(--fs-sm); font-weight:500; display:inline-flex; align-items:center; gap:7px; }
.stock::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.stock--low::before { background:var(--accent-2); }
.stock--order::before { background:var(--faint); }
.stock--order { color:var(--muted); }
.notes { font-size:var(--fs-xs); color:var(--muted); }

.skel { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); height:84px; margin-bottom:10px; }
.skel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(223,228,234,.55), transparent); transform:translateX(-100%); animation:shimmer 1.4s infinite; }
.skel::before { content:""; position:absolute; left:20px; top:22px; width:34%; height:12px; border-radius:3px; background:var(--line); box-shadow:0 30px 0 -2px var(--line); }
.empty { text-align:center; padding:var(--sp-7) var(--sp-5); color:var(--muted); }
.empty .ico { width:40px; height:40px; margin:0 auto var(--sp-4); color:var(--faint); stroke-width:1.3; }
.empty h2 { font-size:var(--fs-lg); color:var(--ink); margin-bottom:8px; }
.empty .btn { margin-top:var(--sp-4); }
.more-row { text-align:center; margin:var(--sp-4) 0; }

/* ---------- Category page ---------------------------------------------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.tile { display:flex; flex-direction:column; gap:10px; padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); color:var(--ink); text-decoration:none; transition:border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.tile:hover { border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-1); text-decoration:none; }
.tile__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tile__brand { font-weight:600; }
.tile__art { font-family:var(--mono); font-weight:500; font-size:var(--fs-xs); color:var(--muted); }
.tile__name { color:var(--ink-2); line-height:1.4; min-height:2.8em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile__foot { display:flex; align-items:flex-end; justify-content:space-between; margin-top:auto; gap:10px; }
.tile__live { font-size:var(--fs-xs); color:var(--muted); min-height:1.2em; display:flex; align-items:center; gap:6px; }
.tile__live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--line-2); }
.tile__live.is-live::before { background:var(--ok); box-shadow:0 0 0 0 rgba(30,127,79,.5); animation:ping 1.8s ease-out 2; }
.pagination { display:flex; justify-content:center; gap:6px; margin-top:var(--sp-6); flex-wrap:wrap; }
.pagination a, .pagination span { min-width:40px; height:40px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surface); color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums; font-size:var(--fs-sm); }
.pagination a:hover { border-color:var(--ink-2); }
.pagination .is-current { background:var(--dark); border-color:var(--dark); color:#fff; font-weight:600; }

/* ---------- Tables, cart, checkout, account ---------------------------- */
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:var(--fs-xs); font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:12px var(--sp-4); background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:14px var(--sp-4); border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl .r { text-align:right; }
.layout-2 { display:grid; grid-template-columns:1fr; gap:var(--sp-5); align-items:start; }
@media (min-width:980px){ .layout-2 { grid-template-columns:minmax(0,1fr) 360px; } }
.summary { position:sticky; top:96px; }
.summary dl { margin:0 0 var(--sp-4); display:grid; gap:10px; }
.summary dl div { display:flex; justify-content:space-between; gap:12px; }
.summary dt { color:var(--muted); }
.summary dd { margin:0; font-variant-numeric:tabular-nums; font-weight:500; }
.summary .total { border-top:1px solid var(--line); padding-top:12px; font-size:1.25rem; font-weight:600; }
.summary .total dt { color:var(--ink); }
.line { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:var(--sp-3) var(--sp-5); align-items:center; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); }
.line:last-child { border-bottom:0; }
.line__title b { font-weight:600; }
.line__sub { color:var(--muted); font-size:var(--fs-sm); margin-top:3px; }
.tabs { display:flex; gap:var(--sp-5); border-bottom:1px solid var(--line); margin-bottom:var(--sp-5); }
.tabs button { background:none; border:0; padding:0 0 12px; font-weight:600; color:var(--muted); cursor:pointer; position:relative; font-size:var(--fs-base); }
.tabs button[aria-selected="true"] { color:var(--ink); }
.tabs button[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); }
.auth { max-width:440px; margin:var(--sp-6) auto 0; }
.order { border:1px solid var(--line); border-radius:var(--r-3); margin-bottom:12px; overflow:hidden; background:var(--surface); }
.order summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px var(--sp-5); cursor:pointer; flex-wrap:wrap; }
.order summary::-webkit-details-marker { display:none; }
.order summary:hover { background:var(--surface-2); }
.order summary .ico { transition:transform var(--t-med) var(--ease); }
.order[open] summary .ico.chev { transform:rotate(180deg); }
.order__body { padding:0 var(--sp-5) var(--sp-4); }
.vins { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--sp-4); }
.vin { font-family:var(--mono); font-weight:500; font-size:var(--fs-sm); padding:7px 12px; border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surface-2); }
.success-box { text-align:center; padding:var(--sp-7) var(--sp-5); }
.success-box .check { width:64px; height:64px; margin:0 auto var(--sp-4); border-radius:50%; background:var(--ok-soft); color:var(--ok); display:grid; place-items:center; }
.success-box .check .ico { width:32px; height:32px; stroke-width:2; }
.success-box .check path { stroke-dasharray:30; stroke-dashoffset:30; animation:draw .6s .15s var(--ease) forwards; }

/* ---------- Toast ------------------------------------------------------- */
.toasts { position:fixed; right:16px; bottom:16px; z-index:90; display:grid; gap:8px; max-width:calc(100vw - 32px); }
.toast { display:flex; align-items:center; gap:12px; background:var(--dark); color:#fff; padding:12px 14px; border-radius:var(--r-2); box-shadow:var(--shadow-2); border-left:3px solid var(--accent); animation:toastin .32s var(--ease) both; font-size:var(--fs-sm); }
.toast .ico { color:var(--accent); width:20px; height:20px; }
.toast a { color:var(--accent); font-weight:600; margin-left:8px; text-decoration:none; }
.toast a:hover { text-decoration:underline; }
.toast.is-out { animation:toastout .24s var(--ease) both; }

/* ---------- Reveal ------------------------------------------------------ */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i,0) * 45ms); }
.js .reveal.is-in { opacity:1; transform:none; }

/* ---------- Keyframes --------------------------------------------------- */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes sweep { from { transform:rotate(-26deg); } to { transform:rotate(26deg); } }
@keyframes squash { from { transform:scaleY(1); } to { transform:scaleY(.78); } }
@keyframes piston { from { transform:translateY(-1.6px); } to { transform:translateY(1.6px); } }
@keyframes flick { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes beam { from { opacity:.25; transform:translateX(-1px); } to { opacity:1; transform:translateX(1.4px); } }
@keyframes drop { 0% { transform:translateY(-1.5px); opacity:1; } 80% { transform:translateY(2px); opacity:.2; } 100% { transform:translateY(2px); opacity:0; } }
@keyframes tilt { from { transform:rotate(-12deg); } to { transform:rotate(8deg); } }
@keyframes shimmer { to { transform:translateX(100%); } }
@keyframes indet { 0% { transform:translateX(-100%); } 100% { transform:translateX(300%); } }
@keyframes rowin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes flash { from { background:var(--accent-soft); } to { background:transparent; } }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@keyframes bump { 0% { transform:scale(1); } 35% { transform:scale(1.35); } 100% { transform:scale(1); } }
@keyframes toastin { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes toastout { to { opacity:0; transform:translateY(8px); } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(30,127,79,.5); } 100% { box-shadow:0 0 0 8px rgba(30,127,79,0); } }

/* ---------- Page transitions (progressive enhancement) ----------------- */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:fadeout .16s ease both; }
  ::view-transition-new(root) { animation:fadein .24s ease both; }
  @keyframes fadeout { to { opacity:0; } }
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width:900px){
  .prod__main { grid-template-columns:1fr; }
  .prod__buy { justify-content:space-between; }
  .offer { grid-template-columns:1fr 1fr; }
  .offer .offer__buy { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px; }
}
@media (max-width:640px){
  .hero .container { padding-top:var(--sp-6); padding-bottom:var(--sp-7); }
  .searchbar form { flex-wrap:wrap; }
  .searchbar input { flex:1 1 60%; }
  .searchbar .btn { flex:1 1 100%; }
  .facts { margin-top:calc(-1 * var(--sp-5)); }
  .line { grid-template-columns:1fr auto; }
  .line .line__sum { grid-column:2; grid-row:1; }
  .tbl th:nth-child(n+3), .tbl td:nth-child(n+3) { white-space:nowrap; }
  .page-head { padding-top:var(--sp-5); }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1; transform:none; }
}
@media print { .topbar,.site-header,.site-footer,.toasts { display:none; } body { background:#fff; } }

/* ---------- Additions: loading state, buy form, prose ------------------- */
.btn.is-loading { position:relative; color:transparent !important; }
.btn.is-loading::after { content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; border:2px solid rgba(16,21,28,.25); border-top-color:var(--accent-ink); animation:spin .7s linear infinite; }
.btn:not(.btn--primary):not(.btn--ghost).is-loading::after { border-color:rgba(255,255,255,.35); border-top-color:#fff; }
.btn.is-done { background:var(--ok); color:#fff; }
.buy { display:flex; align-items:center; gap:8px; margin:0; }
.buy .btn { padding:0 16px; }
.offer__buy { justify-self:end; }
.line__sum small { text-align:right; }
.card--flush .line:hover { background:var(--surface-2); }
.page-head .crumbs { margin-bottom:12px; }
.prose { max-width:78ch; }
.prose h1 { font-size:var(--fs-xl); margin-bottom:6px; }
.prose p { margin:0 0 12px; line-height:1.65; color:var(--ink-2); }
.prose strong { color:var(--ink); }
.results-head h1 { word-break:break-word; }
.tile { position:relative; }
.tile .chip { flex:none; }
@media (max-width:640px){
  .buy { flex-wrap:wrap; }
  .prod__main { padding:var(--sp-4); }
  .toolbar { width:100%; }
  .seg { width:100%; } .seg button { flex:1; padding:0 8px; }
  .cat-grid { grid-template-columns:1fr 1fr; }
  .cat-card { padding:12px; gap:10px; flex-direction:column; align-items:flex-start; }
  .cat-card__ico { width:40px; height:40px; }
}

.cat-card__name, .cat-card__count { display:block; }

/* header search on phones: its own full-width row under the brand line */
@media (max-width:759px){
  .site-header .container { flex-wrap:wrap; row-gap:0; padding-top:4px; padding-bottom:10px; min-height:0; }
  .site-header .brand { min-height:56px; }
  .head-search { display:block; order:3; flex:1 0 100%; max-width:none; margin:0; }
  .site-nav { margin-left:auto; }
}

/* ---------- Info pages (contacts, delivery) ----------------------------- */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; }
.info-grid .card + .card { margin-top:0; }
.info { position:relative; }
.info__ico { width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-2); background:var(--surface-2); margin-bottom:var(--sp-3); }
.info__ico .ico { width:24px; height:24px; }
.info h2 { font-size:var(--fs-md); margin-bottom:8px; }
.info p { color:var(--ink-2); line-height:1.6; }
.info p + p { margin-top:6px; }
.info__big { font-size:1.375rem; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.info__big:hover { color:var(--blue); }
.hours { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.hours td { padding:7px 0; border-bottom:1px solid var(--line); }
.hours tr:last-child td { border-bottom:0; }
.hours td:last-child { text-align:right; font-weight:600; }
.flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; counter-reset:f; }
.flow li { counter-increment:f; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); padding:var(--sp-5); position:relative; }
.flow li::before { content:counter(f); position:absolute; right:var(--sp-5); top:var(--sp-4); font-family:var(--mono); font-weight:500; font-size:1.75rem; color:var(--line-2); line-height:1; }
.flow b { display:block; font-size:var(--fs-md); margin-bottom:6px; }
.flow span { color:var(--muted); font-size:var(--fs-sm); }
.topbar__link { display:inline-flex; align-items:center; gap:6px; }
.info p a .ico, .prose a .ico, .muted a .ico { display:inline-block; vertical-align:-.18em; margin-left:4px; }

/* ---------- "your car" strip ------------------------------------------------ */
.carbar { background:var(--dark-2); color:var(--on-dark); border-bottom:1px solid var(--dark-line); font-size:var(--fs-sm); }
.carbar[hidden] { display:none; }
.carbar .container { display:flex; align-items:center; gap:var(--sp-3); min-height:42px; padding-top:6px; padding-bottom:6px; flex-wrap:wrap; }
.carbar__ico { display:flex; color:var(--accent); }
.carbar__text { flex:1 1 220px; min-width:0; }
.carbar__text .mono { margin-left:8px; color:var(--on-dark-2); font-size:var(--fs-xs); }
.carbar a, .carbar .link-btn { color:var(--on-dark); font-size:var(--fs-sm); }
.carbar :focus-visible { outline-color:var(--accent); }

/* ---------- VIN page --------------------------------------------------------- */
.vin-form { display:flex; gap:10px; flex-wrap:wrap; }
.vin-form .input { flex:1 1 260px; text-transform:uppercase; letter-spacing:.06em; }
.car-card { margin-top:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface-2); padding:var(--sp-4) var(--sp-5); }
.car-card__head { display:flex; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-4); }
.car-card__ico { width:44px; height:44px; flex:none; border-radius:var(--r-2); background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; }
.car-card__ico .ico { width:24px; height:24px; }
.car-card h3 { font-size:var(--fs-md); }
.car-card__head p { color:var(--muted); font-size:var(--fs-sm); }
.specs { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--sp-3) var(--sp-5); margin:0 0 var(--sp-3); }
.specs > div { min-width:0; }
.specs dt { font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.specs dd { margin:2px 0 0; font-weight:500; overflow-wrap:anywhere; }
.car-card__actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:var(--sp-4); }
.plain { margin:0 0 var(--sp-4); padding:0; list-style:none; display:grid; gap:var(--sp-3); color:var(--ink-2); }
.grid-2 { display:grid; grid-template-columns:1fr; gap:0 var(--sp-4); }
@media (min-width:640px){ .grid-2 { grid-template-columns:1fr 1fr; } }

/* ---------- part photo, fit chip, details dialog ----------------------------- */
.prod__id { display:flex; gap:var(--sp-3); align-items:center; min-width:0; }
.prod__thumb { width:56px; height:56px; flex:none; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface-2); display:grid; place-items:center; overflow:hidden; color:var(--faint); }
.prod__thumb img { width:100%; height:100%; object-fit:contain; background:#fff; }
.prod__thumb.is-loading { animation:thumbpulse 1.3s ease-in-out infinite; }
@keyframes thumbpulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.chip--btn { cursor:pointer; background:var(--surface); font:inherit; font-size:var(--fs-xs); }
.chip--btn:hover { border-color:var(--blue); color:var(--blue); }

.dlg { border:0; padding:0; border-radius:var(--r-3); width:min(780px,calc(100vw - 24px)); max-height:min(88vh,860px); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2); }
.dlg::backdrop { background:rgba(16,21,28,.55); }
.dlg[open] { display:flex; flex-direction:column; animation:fadein var(--t-med) var(--ease); }
.dlg__head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); }
.dlg__head h3 { font-size:var(--fs-md); }
.dlg__head p { color:var(--muted); font-size:var(--fs-sm); margin-top:2px; }
.dlg__x { width:36px; height:36px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); cursor:pointer; color:var(--ink-2); }
.dlg__x:hover { border-color:var(--faint); }
.dlg__body { padding:var(--sp-4) var(--sp-5) var(--sp-5); overflow:auto; }
.dlg h4 { margin:var(--sp-5) 0 var(--sp-2); font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.dlg h4:first-child { margin-top:0; }
.gallery { display:flex; gap:10px; overflow:auto; padding-bottom:4px; }
.gallery img { height:150px; width:auto; max-width:none; border:1px solid var(--line); border-radius:var(--r-2); background:#fff; }
.rows { margin:0; }
.rows > div { display:flex; justify-content:space-between; gap:var(--sp-4); padding:8px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.rows dt { color:var(--muted); }
.rows dd { margin:0; font-weight:500; text-align:right; overflow-wrap:anywhere; }
.tagrow { display:flex; flex-wrap:wrap; gap:6px; }
.tagrow .chip b { font-weight:600; margin-right:4px; }
.fits { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.fits th, .fits td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.fits th { font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; background:var(--surface-2); position:sticky; top:0; }
.fits tr.is-mine td { background:var(--ok-soft); }
.fits-wrap { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-2); }

/* ---------- messenger buttons ------------------------------------------------ */
.msg-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-3); }
.msg-row--center { justify-content:center; }
.msg-row .btn .ico { width:16px; height:16px; }
@media (max-width:1099px) { .topbar__hide-l { display:none; } }
@media (max-width:759px) { .topbar__msg span { display:none; } }