/* AV-SOUND stand. Units: 1rem = 10px at 1440px (Figma frame), fluid above; mobile frame = 375px. */

/* Vertical metrics overridden so CAPS sit on the optical centre of the line box
   (HN Cyr ships with caps ~0.09em above centre → text looked "lifted" in buttons). */
@font-face { font-family: "CoFo Kak"; src: url("/assets/fonts/cofokak-black.woff2") format("woff2"); font-weight: 900; font-display: swap; ascent-override: 94%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "CoFo Kak"; src: url("/assets/fonts/cofokak-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; ascent-override: 94%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "HN Cyr"; src: url("/assets/fonts/hnc-roman.woff2") format("woff2"); font-weight: 400; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "HN Cyr"; src: url("/assets/fonts/hnc-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "HN Cyr"; src: url("/assets/fonts/hnc-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --dark: #101010; --panel: #2b2b2b; --pill: #202020; --light: #f2f2f2; --white: #fff; --black: #000;
  --grey: #d0d0d0; --chip: #2a2a2a; --accent: #e12cff;
  --g: 1.5rem; --gap: 1rem;
  --r6: .6rem; --r10: 1rem; --r20: 2rem;
  --f-disp: "CoFo Kak", "Arial Black", sans-serif;
  --f-body: "HN Cyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-fast: 180ms; --t-ui: 260ms; --t-panel: 420ms; --t-reveal: 900ms;
}
html { font-size: 10px; -webkit-text-size-adjust: 100%; }
@media (min-width: 1441px) { html { font-size: min(.69444vw, 20px); } }
@media (max-width: 700px) { html { font-size: clamp(10px, 2.6667vw, 11.5px); } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 1.4rem/1.25 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol, dl, dd, p, h1, h2, h3, fieldset, legend { margin: 0; padding: 0; list-style: none; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: .8rem; z-index: 100; background: var(--accent); color: #fff; padding: 1rem 1.4rem; border-radius: var(--r6); }
.skip:focus { left: .8rem; }
.mono { font-family: var(--f-mono); letter-spacing: .02em; }
.disp { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; line-height: .9; }
.i { flex: none; display: block; }
.theme-dark { background: var(--dark); color: var(--white); }
.theme-light { background: var(--light); color: var(--black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* page transitions (cross-document View Transitions; ignored where unsupported) */
@view-transition { navigation: auto; }
/* standard page transition: the header stays, the page cross-fades (one knob: old leaves fast, new arrives slow) */
::view-transition-old(root) { animation: vt-out 260ms cubic-bezier(.55, 0, .55, .2) both; }
::view-transition-new(root) { animation: vt-in 520ms cubic-bezier(.22, 1, .36, 1) both; }
.hdr { view-transition-name: hdr; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; padding: 1rem var(--g) 0; transition: background-color var(--t-ui), color var(--t-ui); }
.hdr--dark { padding-bottom: 1rem; background: color-mix(in srgb, var(--dark) 90%, transparent); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); }
.hdr--light { background: color-mix(in srgb, var(--light) 90%, transparent); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); }
.hdr-row { display: flex; align-items: center; height: 4.1rem; gap: 3rem; }
.hdr--light .hdr-row { height: 4.9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--black); }
.hdr-left { display: flex; align-items: center; gap: 3rem; }
.hdr-logo { display: flex; align-items: center; gap: 1rem; font: 900 1.3rem/1 var(--f-disp); text-transform: uppercase; flex: none; }
.logo { width: 4.1rem; height: 4.1rem; color: var(--white); flex: none; }
.logo .logo-hole { fill: var(--black); }
.hdr--light .logo { color: var(--black); }
.hdr--light .logo .logo-hole { fill: var(--light); }
.hdr-tools { display: flex; gap: 1rem; }
.pill { display: inline-flex; align-items: center; gap: 1rem; height: 3.4rem; padding: 0 1.3rem; border-radius: var(--r6); font-size: 1.1rem; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: background-color var(--t-ui), border-color var(--t-ui), color var(--t-ui); }
.pill--phone { background: var(--pill); color: #fff; }
.hdr--light .pill--phone { background: var(--white); color: var(--black); }
.pill--phone:hover { background: #2c2c2c; }
.hdr--light .pill--phone:hover { background: #fafafa; }
.pill--line { border: 1px solid rgba(255,255,255,.2); height: 3.8rem; padding: 0 1rem; gap: .8rem; }
.pill--line:hover { border-color: rgba(255,255,255,.7); }
.sq { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r6); transition: border-color var(--t-ui), background-color var(--t-ui); }
.sq:hover { border-color: rgba(255,255,255,.7); }
.hdr--light .sq { border-color: rgba(0,0,0,.2); }
.hdr--light .sq:hover { border-color: rgba(0,0,0,.7); }
.sq--dark { border-color: rgba(255,255,255,.2); }
.hdr-nav { margin-left: auto; display: flex; align-items: center; gap: 3.6rem; }
.nav-link { position: relative; display: inline-flex; align-items: center; height: 3.4rem; font-size: 1.1rem; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: color var(--t-ui); }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .6rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-panel) var(--ease-out); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cat .i { width: 2.4rem !important; height: 2.4rem !important; margin-right: -.4rem; transition: transform var(--t-panel) var(--ease-out); }
.nav-cat::after { right: 2.4rem; }
.nav-cat[aria-expanded="true"] { color: var(--accent); }
.nav-cat[aria-expanded="true"] .i { transform: rotate(180deg); }
.hdr-right { display: flex; align-items: center; gap: 2.4rem; }
.lang { display: inline-flex; gap: .4rem; font-size: 1.1rem; line-height: 1; text-transform: uppercase; opacity: .55; transition: opacity var(--t-ui); }
.lang:hover { opacity: 1; }
.lang > span:last-child { text-decoration: underline; text-underline-offset: .3rem; }
.cart-btn { display: inline-flex; align-items: center; gap: 1rem; height: 3.7rem; padding: 0 1rem; border-radius: var(--r6); background: var(--accent); color: #fff; font-size: 1.1rem; line-height: 1; text-transform: uppercase; transition: transform 160ms var(--ease-out), filter var(--t-ui), background-color var(--t-ui); }
.cart-btn:hover { filter: brightness(1.08); }
.cart-btn:active { transform: scale(.97); }
.hdr--light .cart-btn { background: var(--black); }
.cart-count-wrap { display: inline-flex; align-items: center; gap: .6rem; }
.cart-count { display: inline-block; min-width: 1ch; }
.cart-count.bump { animation: bump 420ms var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }
.cart-div { width: 1px; height: 1.6rem; background: currentColor; }
.burger { display: none; align-items: center; justify-content: center; gap: .6rem; width: 8.4rem; height: 3.5rem; border: 1px solid currentColor; border-radius: var(--r6); font-size: 1.1rem; line-height: 1; text-transform: uppercase; transition: background-color var(--t-ui), color var(--t-ui), border-color var(--t-ui); }
.burger-x { display: none; }
.burger[aria-expanded="true"] { background: #fff; color: #000; border-color: #fff; }
.burger[aria-expanded="true"] .burger-x { display: block; }

/* mega menu: 260ms ease-out in, 180ms ease-in out, columns stagger 30ms */
.mega { position: absolute; left: var(--g); right: var(--g); top: 100%; z-index: 41; }
.mega-inner { display: grid; grid-template-columns: 24.1fr 28.4fr 27.4fr 27fr 31.1fr; gap: 0 2.4rem; padding: 3rem; background: var(--panel); color: #fff; border-radius: 0 0 var(--r20) var(--r20); box-shadow: 0 3rem 6rem rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-1rem); transition: opacity var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in); }
.mega.is-open .mega-inner { opacity: 1; transform: none; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-panel) var(--ease-out); }
.mega-col { opacity: 0; transform: translateY(.8rem); transition: opacity var(--t-fast), transform var(--t-fast); }
.mega.is-open .mega-col { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out) calc(var(--i) * 30ms + 60ms), transform 520ms var(--ease-out) calc(var(--i) * 30ms + 60ms); }
.mega-title { display: block; font: 900 2rem/1.1 var(--f-disp); text-transform: uppercase; margin-bottom: 1.2rem; transition: color var(--t-fast); }
.mega-title:hover { color: var(--accent); }
.mega li { margin-bottom: .5rem; }
.mega li a { font-size: 1.1rem; line-height: 1.8rem; text-transform: uppercase; opacity: .7; transition: opacity var(--t-fast), color var(--t-fast); }
.mega li a:hover { opacity: 1; color: var(--accent); }

/* mobile nav */
.mnav { position: fixed; inset: 0; z-index: 39; background: var(--black); color: #fff; padding: 11rem 1rem 3rem; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity var(--t-fast) var(--ease-in); }
.mnav.is-open { opacity: 1; transition: opacity var(--t-ui) var(--ease-out); }
.mnav nav { display: flex; flex-direction: column; gap: 2.4rem; }
.mnav nav a { font: 900 4.1rem/1 var(--f-disp); text-transform: uppercase; transform: translateY(2.4rem); opacity: 0; transition: transform 160ms, opacity 160ms; }
.mnav.is-open nav a { transform: none; opacity: 1; transition: transform 640ms var(--ease-out) calc(var(--i) * 50ms + 80ms), opacity 500ms var(--ease-out) calc(var(--i) * 50ms + 80ms); }
.mnav nav a:first-child { text-decoration: underline; text-decoration-thickness: .2rem; text-underline-offset: .6rem; }
.mnav-foot { display: flex; justify-content: space-between; gap: 1rem; }

/* search overlay */
.hdr-row { position: relative; }
.hsearch { position: absolute; z-index: 3; display: flex; align-items: center; gap: 1rem; padding: 0 .4rem 0 0; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r6); background: var(--pill); color: #fff;
  clip-path: inset(0 var(--cr, 0) 0 var(--cl, 0) round var(--r6)); transition: clip-path 300ms cubic-bezier(.55, 0, .55, .2); }
.hsearch.is-open { clip-path: inset(0 0 0 0 round var(--r6)); transition: clip-path 640ms var(--ease-out); }
.hdr--light .hsearch { background: var(--white); color: var(--black); border-color: rgba(0,0,0,.2); }
.hsearch-ic { flex: none; width: calc(3.4rem - 2px); display: grid; place-items: center; }
.hsearch input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: inherit; font-size: 1.1rem; line-height: 1; text-transform: uppercase; opacity: 0; transition: opacity 160ms var(--ease-in); }
.hsearch.is-open input { opacity: 1; transition: opacity 360ms var(--ease-out) 160ms; }
.hsearch input::placeholder { color: currentColor; opacity: .45; }
.hsearch input::-webkit-search-cancel-button { display: none; }
.hsearch-x { flex: none; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: .4rem; opacity: 0; transition: opacity 160ms; }
.hsearch.is-open .hsearch-x { opacity: 1; transition: opacity 360ms var(--ease-out) 200ms; }
.search { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.55); padding: calc(var(--hb, 6rem) + 1rem) var(--g) 2rem; opacity: 0; transition: opacity var(--t-ui) var(--ease-in); }
.search.is-open { opacity: 1; transition: opacity var(--t-panel) var(--ease-out); }
.search-res { background: var(--panel); color: #fff; border-radius: var(--r10); max-height: calc(100svh - var(--hb, 6rem) - 3rem); overflow-y: auto; }
.search-res:empty { display: none; }
.sr-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 1rem 2rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(.6rem); animation: sr-in 420ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 30ms); transition: background-color var(--t-fast); }
@keyframes sr-in { to { opacity: 1; transform: none; } }
.sr-item:first-child { border-top: 0; }
.sr-item:hover, .sr-item.is-active { background: rgba(255,255,255,.06); }
.sr-item img { width: 7rem; height: 7rem; border-radius: var(--r6); object-fit: cover; }
.sr-item b { display: block; font: 500 3rem/1 var(--f-disp); text-transform: uppercase; margin-bottom: .6rem; }
.sr-item small { font-size: 1.1rem; text-transform: uppercase; opacity: .6; }
.sr-item > span:last-child { font-weight: 500; font-size: 2rem; white-space: nowrap; }
.sr-all, .sr-empty { display: block; padding: 1.6rem 1.8rem; font-size: 1.2rem; text-transform: uppercase; border-top: 1px solid rgba(255,255,255,.08); }
.sr-all { color: var(--accent); }

/* ---------- hero ---------- */
.hero { position: relative; margin: 1rem var(--g) 0; height: clamp(56rem, calc(100svh - 7rem), 104rem); border-radius: var(--r10); overflow: hidden; isolation: isolate; color: #101010; background: #e6e6e6; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img, .hero-media video { position: absolute; left: 50%; top: 50%; height: 125%; width: auto; min-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: translate(-50%, -50%); }
.hero-content { position: absolute; left: 1.9rem; right: 2rem; bottom: 3rem; display: flex; flex-direction: column; }
.hero-kicker { align-self: flex-end; font: 900 2rem/1.1 var(--f-disp); text-transform: uppercase; margin: .5rem 0 0; white-space: nowrap; }
.hero-title { font: 900 12.29vw/.797 var(--f-disp); text-transform: uppercase; white-space: nowrap; margin-right: -2rem; }
/* mask lines keep room above for Й's breve (.24em) */
.hero-title .line { display: block; overflow: hidden; padding: .24em 0 .05em; margin: -.24em 0 -.05em; }
.hero-title .line + .line { margin-top: -.24em; }
.hero-title .line > span { display: inline-block; }
.hero-rule { border: 0; height: 1px; background: rgba(0,0,0,.5); margin: 1.7rem .1rem 3rem; align-self: stretch; transform-origin: left; }
.hero-text { max-width: 83.5rem; font-size: 1.4rem; text-transform: uppercase; }
.js .page-home .hero-media { transform: scale(1.08); opacity: 0; }
.js .page-home .hero-title .line > span { transform: translateY(110%); }
.js .page-home .hero-kicker, .js .page-home .hero-text { opacity: 0; transform: translateY(1.2rem); }
.js .page-home .hero-rule { transform: scaleX(0); }
.is-ready .page-home .hero-media { transform: none; opacity: 1; transition: transform 1800ms var(--ease-out), opacity 1100ms var(--ease-out); }
.is-ready .page-home .hero-title .line > span { transform: none; transition: transform 1100ms var(--ease-out) calc(var(--i) * 110ms + 200ms); }
.is-ready .page-home .hero-kicker { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out) 120ms, transform 800ms var(--ease-out) 120ms; }
.is-ready .page-home .hero-rule { transform: none; transition: transform 1300ms var(--ease-out) 480ms; }
.is-ready .page-home .hero-text { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out) 600ms, transform 900ms var(--ease-out) 600ms; }

/* ---------- picks ---------- */
.picks { margin: 4rem var(--g) 0; }
.picks-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.25); margin-bottom: 2rem; }
.tabs { position: relative; display: flex; gap: .75rem; }
.tabs-ind { position: absolute; top: 0; left: 0; height: 4.6rem; width: var(--w, 16.9rem); transform: translateX(var(--x, 0)); background: var(--accent); border-radius: var(--r6); transition: transform 560ms var(--ease-out), width 560ms var(--ease-out); }
.tab { position: relative; height: 4.6rem; min-width: 16.9rem; padding: 0 2rem; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r6); font-size: 1.1rem; line-height: 1; text-transform: uppercase; transition: border-color var(--t-ui); }
.tab[aria-selected="true"], .tab[aria-selected="true"]:hover { border-color: transparent; }
.tab:hover { border-color: rgba(255,255,255,.8); }
.more { display: inline-flex; align-items: center; gap: 1rem; font-size: 1.1rem; line-height: 1; text-transform: uppercase; }
.more .i { transition: transform var(--t-panel) var(--ease-out); }
.more:hover .i { transform: translateX(.5rem); }
.more--m { display: none; }

/* ---------- grid & card ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.card { container-type: inline-size; position: relative; display: flex; flex-direction: column; background: var(--white); color: var(--black); border-radius: var(--r10); padding: .5rem .5rem 1.5rem; min-width: 0; }
.card-media { display: block; position: relative; aspect-ratio: 1; border-radius: var(--r6); overflow: hidden; background: #161616; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card-brand { position: absolute; top: 1.7rem; left: 1.5rem; max-width: min(9rem, 38cqi); font-size: 1.1rem; line-height: 1.1; text-transform: uppercase; color: #fff; text-shadow: 0 1px .8rem rgba(0,0,0,.4); pointer-events: none; }
.card-badges { position: absolute; top: 1.5rem; right: 1.5rem; display: flex; gap: .5rem; pointer-events: none; }
.badge { display: inline-flex; align-items: center; height: 3.5rem; padding: 0 1.2rem; border-radius: var(--r6); font-size: 1.1rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.badge--new { background: var(--accent); color: #fff; }
.badge--out { background: var(--grey); color: var(--black); }
.card-title { margin: 2.5rem 1rem 0; font: 500 clamp(2.6rem, 14.5cqi, 9rem)/.92 var(--f-disp); text-transform: uppercase; overflow-wrap: anywhere; }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r10); }
.card-type { margin: 1.2rem 1rem 1.6rem; font-size: 1.1rem; text-transform: uppercase; opacity: .6; }
.card-foot { margin: auto 1rem 0; padding-top: 1.5rem; border-top: 1px solid var(--black); display: flex; align-items: center; gap: 1rem; }
.card-price { font: 500 2rem/1 var(--f-body); white-space: nowrap; margin-right: auto; }
.chip-free { display: inline-flex; align-items: center; gap: 1rem; height: 3.5rem; padding: 0 1.2rem; border-radius: var(--r6); background: var(--light); font-size: .8rem; line-height: .8rem; }
.chip-free .i, .chip-free span { opacity: .6; }
.card-add { position: relative; z-index: 2; width: 4rem; height: 3.5rem; flex: none; display: grid; place-items: center; border: 1px solid var(--black); border-radius: var(--r6); transition: background-color var(--t-ui), color var(--t-ui), transform 160ms var(--ease-out); }
.card-add .i { transition: transform var(--t-panel) var(--ease-out); }
.card-add:active { transform: scale(.93); }
@media (hover: hover) {
  .card:hover .card-media img { transform: scale(1.045); }
  .card-add:hover { background: var(--black); color: #fff; }
}
@container (max-width: 260px) { .chip-free { display: none; } }

/* reveal: 900ms ease-out, 3rem, stagger 50ms */
.js [data-reveal], .js .card.rv { opacity: 0; transform: translateY(3rem); }
.js [data-reveal].is-in, .js .card.rv.is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out) var(--d, 0ms), transform var(--t-reveal) var(--ease-out) var(--d, 0ms); }

/* ---------- about ---------- */
.about { margin: 5rem var(--g) 0; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.25); }
.about-media { position: relative; border-radius: var(--r10); overflow: hidden; height: 49.7rem; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-title { position: absolute; top: 2rem; right: 2rem; font-size: 7rem; color: #fff; text-align: right; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; font-size: 1.4rem; text-transform: uppercase; }
.about-cols > div { max-width: 65.1rem; }
.about-cols p + p { margin-top: 1.2em; }

/* ---------- contacts ---------- */
.contacts { margin: 5rem var(--g) 0; background: var(--panel); border-radius: var(--r20); padding: 4rem 2rem 2rem; color: #fff; }
.contacts-title { font-size: 7rem; margin-bottom: 4.4rem; }
.ct-row { display: flex; align-items: center; gap: 2rem; font-size: 1.1rem; text-transform: uppercase; }
.ct-row--addr { justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.ct-row--hours { display: grid; grid-template-columns: 33.5rem 1fr auto; padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.ct-btns { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.call { position: relative; display: grid; place-items: center; height: 22rem; margin-top: 3rem; background: #fff; color: var(--black); border-radius: var(--r20); overflow: hidden; isolation: isolate; }
.call .disp { position: relative; z-index: 1; font-size: 3rem; transition: color var(--t-ui); }
.call::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 700ms var(--ease-out); }
.call-arrow { position: absolute; right: 3rem; bottom: 3rem; z-index: 1; }
.call-arrow .i { width: 3.2rem !important; height: 2.6rem !important; transition: transform var(--t-panel) var(--ease-out); }
@media (hover: hover) {
  .call:hover::before { transform: scaleY(1); }
  .call:hover .disp, .call:hover .call-arrow { color: #fff; }
  .call:hover .call-arrow .i { transform: translateX(.8rem); }
}

/* ---------- footer ---------- */
.ftr { margin-top: 2rem; padding: 0 var(--g) 4.2rem; color: #fff; }
.theme-light .ftr { background: var(--black); border-radius: var(--r20) var(--r20) 0 0; margin-top: 3.5rem; padding-top: 1px; }
.ftr-top { display: grid; grid-template-columns: 21.7rem 23.6rem 11.8rem 23.7rem 1fr auto; align-items: start; padding: 3rem 0 3.9rem 2rem; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.theme-light .ftr-top { border-top: 0; }
.ftr .logo--lg { width: 7rem; height: 7rem; color: #fff; }
.ftr .logo .logo-hole { fill: var(--black); }
.ftr-col li, .ftr-mkt li { font-size: 1rem; line-height: 2rem; text-transform: uppercase; }
.ftr-col a, .ftr-mkt a, .ftr-legal a, .ftr-soc a { transition: color var(--t-fast); }
.ftr-col a:hover, .ftr-mkt a:hover, .ftr-legal a:hover { color: var(--accent); }
.ftr-mkt { display: grid; width: 10.8rem; }
.ftr-mkt a { display: grid; place-items: center; height: 3.4rem; border-bottom: 1px solid rgba(255,255,255,.3); }
.ftr-soc { display: flex; gap: 1.5rem; justify-self: end; }
.ftr-soc a { display: block; transition: transform var(--t-panel) var(--ease-out), color var(--t-ui); }
.ftr-soc a:hover { transform: translateY(-.3rem); color: var(--accent); }
.ftr-soc .i { width: 3rem !important; height: 3rem !important; }
.ftr-legal { display: flex; justify-content: flex-end; gap: 4rem; padding: 3rem 0; font-size: .9rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.25); }
.ftr-word { margin-top: 5rem; overflow: clip; line-height: .78; padding-top: .04em; }
.ftr-word-in { display: inline-flex; white-space: nowrap; font: 900 17.6rem/.78 var(--f-disp); }
.ftr-word-in span { display: inline-block; }
.js .ftr-word-in span { transform: translateY(105%); }
.js .ftr-word.is-in .ftr-word-in span { transform: none; transition: transform 1100ms var(--ease-out) calc(var(--i) * 45ms); }
.ftr-bottom { display: flex; justify-content: space-between; margin-top: 5rem; font-size: 1rem; text-transform: uppercase; }
.ftr-bottom a { color: var(--accent); text-decoration: underline; text-underline-offset: .2rem; }

/* ---------- catalog / category ---------- */
.cat, .pdp { padding: 0 var(--g); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.4rem 0 1.2rem; font-size: .9rem; line-height: 1; text-transform: uppercase; }
.crumbs li:not(:last-child) { opacity: .5; }
.crumbs li:not(:last-child)::after { content: ">"; margin-left: .6rem; }
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--accent); }
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 1.4rem; }
.cat-title { font-size: 7rem; line-height: .8; min-width: 0; }
.cat-count { font-size: 7rem; line-height: .8; color: transparent; -webkit-text-stroke: .15rem var(--black); font-variant-numeric: tabular-nums; flex: none; }

/* catalog tiles (Figma 435:6544) */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 28.9rem 28.9rem; gap: 1.5rem 1rem; grid-template-areas: "ac ac sb am" "hu cb cb am"; margin-top: 2rem; }
.tile { position: relative; display: block; border-radius: var(--r10); overflow: hidden; isolation: isolate; background: var(--white); }
.tile--ac { grid-area: ac; background: var(--black); color: #fff; }
.tile--sb { grid-area: sb; }
.tile--am { grid-area: am; background: transparent; border: 1px solid var(--black); }
.tile--hu { grid-area: hu; }
.tile--cb { grid-area: cb; background: #e0e0e0; }
.tile-n { position: absolute; top: 1.5rem; left: 1.5rem; font-size: 1.1rem; line-height: 1; z-index: 2; }
.tile-t { position: absolute; left: 2rem; bottom: 1.7rem; font: 500 2.5rem/1 var(--f-disp); text-transform: uppercase; z-index: 2; transition: transform var(--t-panel) var(--ease-out); }
.tile-illu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2rem; transition: transform 900ms var(--ease-out); }
.tile--ac .tile-illu { gap: 2.1rem; padding-right: 1.5rem; }
.illu { flex: none; overflow: visible; }
.illu [data-part] { transform-box: fill-box; transform-origin: center; transition: transform 700ms var(--ease-out), fill var(--t-ui); }
@media (hover: hover) {
  .tile:hover .tile-illu { transform: scale(1.035); }
  .tile:hover .tile-t { transform: translateX(.6rem); }
  .tile:hover [data-part="Ellipse3"] { animation: thump 900ms var(--ease-out) infinite; }
  .tile--sb:hover [data-part="Ellipse10"] { animation: thump 900ms var(--ease-out) infinite; }
  .tile--am:hover [data-part="zap"] path, .tile--am:hover path[data-part="zap"] { fill: var(--accent); }
  .tile--am:hover [data-part="zap"] { transform: scale(1.12); }
  .tile--cb:hover .tile-illu { transform: none; }
  .tile--cb .pulse { stroke-dasharray: 16 84; opacity: 0; animation: pulse 2400ms linear infinite paused; transition: opacity 400ms var(--ease-out); }
  .tile--cb .pulse-Vector17 { animation-duration: 2800ms; }
  .tile--cb:hover .pulse { opacity: 1; animation-play-state: running; }
  /* head unit: the station indicator scans left → right (the pink dot no longer jumps over its neighbours) */
  .tile--hu [data-part="Vector17"], .tile--hu [data-part="Vector21"] { --f: rgba(0,0,0,0); --s: #000; }
  .tile--hu [data-part="Vector18"], .tile--hu [data-part="Vector19"] { --f: #000; --s: rgba(0,0,0,0); }
  .tile--hu:hover [data-part="Vector17"], .tile--hu:hover [data-part="Vector18"], .tile--hu:hover [data-part="Vector19"], .tile--hu:hover [data-part="Vector21"] { fill: var(--f); stroke: var(--s); animation: hu-scan 1800ms linear infinite; }
  .tile--hu:hover [data-part="Vector18"] { animation-delay: 450ms; }
  .tile--hu:hover [data-part="Vector19"] { animation-delay: 900ms; }
  .tile--hu:hover [data-part="Vector21"] { animation-delay: 1350ms; }
}
@keyframes hu-scan { 0%, 22% { fill: #E12CFF; stroke: #E12CFF; } 48%, 100% { fill: var(--f); stroke: var(--s); } }
@keyframes thump { 0%, 100% { transform: scale(1); } 18% { transform: scale(.9); } 40% { transform: scale(1.06); } }
@keyframes pulse { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.chip { display: inline-flex; align-items: center; gap: 1rem; height: 3.4rem; padding: 0 1.2rem; border: 1px solid rgba(0,0,0,.2); border-radius: var(--r6); font-size: 1.1rem; line-height: 1; text-transform: uppercase; white-space: nowrap; background: transparent; transition: background-color var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform 160ms var(--ease-out); }
.chip i { font-style: normal; opacity: .45; font-size: 1rem; }
.chip:hover { border-color: rgba(0,0,0,.6); }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--black); color: #fff; border-color: var(--black); }
.chip.is-on i { opacity: .6; }
.cat-bar { display: flex; justify-content: flex-end; align-items: center; min-height: 3.2rem; margin-top: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--black); }
.sort { position: relative; display: inline-flex; align-items: center; gap: .6rem; font-size: 1.1rem; line-height: 1; text-transform: uppercase; cursor: pointer; }
.sort select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.sort:focus-within { outline: 2px solid var(--accent); outline-offset: .4rem; border-radius: 4px; }
.grid--cat { position: relative; margin-top: 1.5rem; }
.grid--cat .card.is-hidden { display: none; }
.cat-empty { display: grid; justify-items: center; gap: 1.6rem; padding: 8rem 0; text-align: center; font-size: 1.3rem; text-transform: uppercase; }

/* floating filter button + filter sheet — Figma 929:8479 (fab), 929:9333 (desktop), 929:10169 (mobile) */
.fab { position: fixed; left: 50%; bottom: 1.6rem; z-index: 35; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; height: 5.2rem; padding: 0 2rem; background: var(--black); color: #fff; border: 2px solid transparent; border-radius: var(--r10); font-size: 1.1rem; line-height: 1; text-transform: uppercase;
  transform: translate(-50%, 0); transition: transform var(--t-panel) var(--ease-out), height var(--t-ui) var(--ease-out), border-color var(--t-ui); }
.fab.has-n { height: 6rem; border-color: rgba(255,255,255,.3); }
.fab:active { transform: translate(-50%, 0) scale(.96); }
.fab.is-away { transform: translate(-50%, 9rem); }
.fab-ic { display: grid; place-items: center; }
.fab-n { display: grid; place-items: center; min-width: 1.7rem; height: 1.8rem; padding: 0 .5rem; border-radius: .4rem; background: var(--accent); font-size: 1.1rem; line-height: .8rem; }
.fab.has-n .fab-ic { display: none; }
.x10 { width: 1rem; height: 1rem; flex: none; }

.fmodal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.fmodal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity var(--t-ui) var(--ease-in); }
.fmodal-panel { position: relative; width: 72rem; max-width: 100%; max-height: calc(100svh - 8rem); display: flex; flex-direction: column; background: #000; color: #fff; border-radius: var(--r10) var(--r10) 0 0; outline: 0;
  transform: translateY(100%); transition: transform 300ms var(--ease-in); }
.fmodal.is-open .fmodal-scrim { opacity: 1; transition: opacity var(--t-panel) var(--ease-out); }
.fmodal.is-open .fmodal-panel { transform: none; transition: transform 780ms var(--ease-drawer); }
.fmodal-head { position: relative; flex: none; margin: 0 2rem; padding: 2rem 0; border-bottom: 1px solid #666; }
.fmodal-head h2 { font-size: 2rem; line-height: 1.4rem; height: 1.4rem; }
.fmodal-x { position: absolute; right: -1rem; top: 1.2rem; width: 3rem; height: 3rem; display: grid; place-items: center; transition: transform var(--t-panel) var(--ease-out), opacity var(--t-ui); }
.fmodal-x:hover { transform: rotate(90deg); }
.fmodal-body { overflow-y: auto; overscroll-behavior: contain; padding: 2rem 2rem 0; display: flex; flex-direction: column; gap: 2rem; }
.fgroup { display: flex; flex-direction: column; gap: 1.5rem; }
.fgroup legend { float: left; font: 500 1.4rem/1rem var(--f-body); height: 1rem; text-transform: uppercase; }
.fchips { clear: both; display: flex; flex-wrap: wrap; gap: 1rem; }
.fchip { padding: 1rem; border-radius: var(--r10); background: #2b2b2b; color: #fff; font-size: 1.1rem; line-height: .8rem; text-transform: uppercase; white-space: nowrap; transition: background-color var(--t-ui), transform 160ms var(--ease-out); }
.fchip:active { transform: scale(.94); }
.fchip[aria-pressed="true"] { background: var(--accent); }
@media (hover: hover) { .fchip:not([aria-pressed="true"]):hover { background: #3d3d3d; } }
.fmodal-foot { flex: none; display: flex; justify-content: center; gap: .5rem; padding: 2rem; background: #000; }
.fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; width: 11.5rem; height: 5.2rem; border: 2px solid transparent; border-radius: var(--r10); font-size: 1.1rem; line-height: 1; text-transform: uppercase; transition: background-color var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform 160ms var(--ease-out); }
.fbtn:active { transform: scale(.96); }
.fbtn--reset { background: #000; border-color: #fff; color: #fff; }
.fbtn--go { background: var(--accent); color: #fff; }
.fbtn--go:disabled { background: #000; border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.3); cursor: default; transform: none; }
.fbtn--go:not(:disabled):hover { filter: brightness(1.08); }

/* ---------- product ---------- */
.pdp-grid { display: grid; grid-template-columns: 70rem 1fr; gap: 2.5rem; margin-top: 1.4rem; align-items: start; }
.gallery { position: relative; border-radius: var(--r20); overflow: hidden; background: #161616; aspect-ratio: 1; touch-action: pan-y; }
.gallery-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out); }
.gallery-stage img.is-on { opacity: 1; transform: none; }
.thumbs { position: absolute; left: 2rem; bottom: 2rem; display: flex; gap: 1rem; }
.thumb { width: 6rem; height: 6rem; border-radius: var(--r10); overflow: hidden; border: 1px solid rgba(255,255,255,.25); transition: border-color var(--t-ui), transform 160ms var(--ease-out); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-on { border-color: #fff; }
.thumb:active { transform: scale(.94); }
.dots { display: none; }
.pdp-top { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 0 3rem; border-bottom: 1px solid var(--black); }
.pdp-title { font: 500 9rem/.8 var(--f-disp); text-transform: uppercase; overflow-wrap: anywhere; }
.pdp-title.is-long { font-size: 6.4rem; }
.pdp-brand { margin-top: 2.4rem; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.pdp-brand span { margin: 0 .6rem; }
.pdp-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; flex: none; }
.pdp-sku { font-size: 1.1rem; line-height: 1; text-transform: uppercase; }
.pdp-stock { display: inline-flex; align-items: center; height: 3.4rem; padding: 0 1.4rem; border: 1px solid var(--black); border-radius: 2rem; font-size: 1.1rem; line-height: 1; text-transform: uppercase; }
.pdp-stock.is-out { border-color: rgba(0,0,0,.35); color: rgba(0,0,0,.6); }
.pdp-mprice, .pdp-mmeta { display: none; }
.pdp-block { display: grid; grid-template-columns: 20.2rem 1fr; border-bottom: 1px solid var(--black); }
.pdp-label { font-size: 1.1rem; line-height: 1.3; text-transform: uppercase; opacity: .6; }
.pdp-keys { padding: 0; }
.pdp-keys .pdp-label { padding: 3rem 2rem 3rem 0; border-right: 1px solid var(--black); }
.pdp-keys dl { padding: 3rem 0 3rem 3rem; display: grid; gap: .7rem; }
.pdp-keys dl div { display: flex; justify-content: space-between; gap: 2rem; font-size: 1.1rem; line-height: 2rem; text-transform: uppercase; }
.pdp-keys dd { font-weight: 700; text-align: right; }
.pdp-del { grid-template-columns: 20.2rem auto 1fr; padding: 3rem 0; align-items: start; }
.pdp-del-v { padding-left: 3rem; font-size: 2rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.pdp-note { font-size: .9rem; line-height: 1.35; text-transform: uppercase; opacity: .8; padding-left: 3rem; }
.pdp-buy { display: flex; align-items: center; gap: 3rem; padding: 3rem 0; }
.buy { width: 20.2rem; height: 13.6rem; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: var(--black); color: #fff; border-radius: var(--r20); font-size: 1.6rem; line-height: 1; text-transform: uppercase; transition: background-color var(--t-ui), transform 160ms var(--ease-out); }
.buy .i { transition: transform 700ms var(--ease-out); }
.buy:hover { background: var(--accent); }
.buy:hover .i { transform: rotate(90deg); }
.buy:active { transform: scale(.97); }
.pdp-price { font: 400 4rem/1 var(--f-body); white-space: nowrap; }
.pdp-tabs { margin-top: 3.5rem; }
.ptabs { display: flex; gap: 1rem; }
.ptab { height: 5.7rem; width: 22.7rem; flex: none; border: 1px solid var(--black); border-radius: var(--r10); font-size: 1.4rem; line-height: 1; text-transform: uppercase; transition: background-color var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform 160ms var(--ease-out); }
.ptab:hover { background: rgba(0,0,0,.04); }
.ptab:active { transform: scale(.97); }
.ptab.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ppanel { margin-top: 3rem; animation: panel-in 520ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(1rem); } }
.spec div { display: grid; grid-template-columns: 35.5rem 1fr; gap: 2rem; padding: 0 0 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--black); font-size: 1.4rem; line-height: 1.7rem; text-transform: uppercase; }
.pdp-desc { max-width: 90rem; font-size: 1.4rem; line-height: 1.7rem; text-transform: uppercase; }
.rel { margin-top: 6rem; }
.pdp-rel { font-size: 5.6rem; margin-bottom: 2rem; }
.mbuy { display: none; }

/* ---------- drawer & toast ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity var(--t-ui) var(--ease-in); }
.drawer-panel { position: absolute; top: .8rem; right: .8rem; bottom: .8rem; width: min(46rem, calc(100% - 1.6rem)); background: var(--panel); color: #fff; border-radius: var(--r20); display: flex; flex-direction: column; outline: 0; transform: translateX(calc(100% + 1.6rem)); transition: transform var(--t-ui) var(--ease-in); }
.drawer.is-open .drawer-scrim { opacity: 1; transition: opacity var(--t-panel) var(--ease-out); }
.drawer.is-open .drawer-panel { transform: none; transition: transform 620ms var(--ease-drawer); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer-head h2 { font: 900 2.8rem/1 var(--f-disp); text-transform: uppercase; }
.drawer-list { flex: 1; overflow-y: auto; padding: 0 2rem; }
.ci { display: grid; grid-template-columns: 7.2rem 1fr; gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ci img { width: 7.2rem; height: 7.2rem; border-radius: var(--r6); object-fit: cover; }
.ci-t { font: 500 2.4rem/1 var(--f-disp); text-transform: uppercase; }
.ci-b { font-size: 1.1rem; text-transform: uppercase; opacity: .6; margin-top: .4rem; }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r6); height: 3.2rem; }
.qty button { width: 3.2rem; height: 3rem; display: grid; place-items: center; font-size: 1.4rem; }
.qty span { min-width: 2.4rem; text-align: center; font-size: 1.3rem; }
.ci-p { font-weight: 500; font-size: 1.5rem; white-space: nowrap; }
.ci-x { font-size: 1rem; text-transform: uppercase; opacity: .5; margin-left: .8rem; transition: opacity var(--t-fast), color var(--t-fast); }
.ci-x:hover { opacity: 1; color: var(--accent); }
.drawer-empty { flex: 1; display: grid; align-content: center; justify-items: start; gap: 1.2rem; padding: 2rem; font-size: 1.2rem; text-transform: uppercase; }
.drawer-empty .disp { font-size: 3.4rem; }
.drawer-foot { padding: 2rem; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 1.4rem; }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.2rem; text-transform: uppercase; }
.drawer-total b { font: 500 2.6rem/1 var(--f-body); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; height: 4.6rem; padding: 0 2rem; border-radius: var(--r6); font-size: 1.1rem; line-height: 1; text-transform: uppercase; transition: filter var(--t-ui), transform 160ms var(--ease-out), background-color var(--t-ui); }
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.08); }
.btn--dark { background: var(--black); color: #fff; }
.btn--line { border: 1px solid currentColor; }
.btn--wide { width: 100%; height: 5.6rem; }
.toast { position: fixed; left: 50%; bottom: 2.4rem; z-index: 80; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.8rem; background: var(--black); color: #fff; border-radius: var(--r10); font-size: 1.2rem; text-transform: uppercase; box-shadow: 0 1rem 3rem rgba(0,0,0,.3);
  transform: translate(-50%, 1.6rem); opacity: 0; pointer-events: none; transition: transform var(--t-fast) var(--ease-in), opacity var(--t-fast) var(--ease-in); }
.toast::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out); }
.page-category .toast, .page-product .toast { bottom: 9rem; }

.nf { padding: 8rem var(--g); display: grid; gap: 2.4rem; justify-items: start; }
.nf-code { font-size: 22vw; color: transparent; -webkit-text-stroke: 2px var(--black); }
.nf h1 { font-size: 6rem; }
html.lock { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .hdr-row, .hdr-left { gap: 2rem; }
  .hdr-nav { gap: 2.4rem; }
  .pill--phone span { display: none; }
  .pill--phone { width: 3.4rem; padding: 0; justify-content: center; }
  .pdp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--row .card:nth-child(n+4) { display: none; }
  .ftr-top { grid-template-columns: 12rem repeat(3, 1fr) 12rem auto; }
}
@media (max-width: 900px) {
  .hdr-nav, .lang, .cart-label, .cart-div { display: none !important; }
  .burger { display: inline-flex; }
  .hdr-right { margin-left: auto; gap: .8rem; }
  .mega { display: none !important; }
  .grid--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 28.9rem; grid-template-areas: "ac ac" "sb am" "hu am" "cb cb"; }
  .about-cols { grid-template-columns: 1fr; gap: 2.4rem; }
  .pdp-grid { grid-template-columns: 1fr; }
  .gallery { max-width: 72rem; }
}

/* mobile = Figma 375 frames */
@media (max-width: 700px) {
  :root { --g: .5rem; }
  .hdr { padding: .8rem .5rem; }
  .hdr-row, .hdr--light .hdr-row { height: auto; padding: 0; border: 0; gap: 0; justify-content: space-between; align-items: flex-end; }
  .hdr--light { padding-bottom: 0; }
  .hdr--light .hdr-row { padding-bottom: .8rem; border-bottom: 1px solid var(--black); }
  .hdr-left { gap: 2.1rem; align-items: flex-end; }
  .hdr-logo span { display: none; }
  .logo { width: 3.5rem; height: 3.5rem; }
  .hdr-tools { gap: .8rem; }
  .pill--phone, .hdr .sq { width: 3.6rem; height: 3.6rem; padding: 0; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.2); }
  .hdr--light .pill--phone, .hdr--light .sq { border-color: rgba(0,0,0,.2); background: transparent; color: var(--black); }
  .hdr-right { gap: .8rem; align-items: flex-end; }
  .cart-btn { height: 3.5rem; }
  .hdr-tools, .cart-btn { transition: opacity var(--t-ui) var(--ease-out), visibility var(--t-ui); }
  /* menu open: keep geometry, hide tools → no layout shift */
  .hdr.is-menu { background: var(--black); color: #fff; }
  .hdr.is-menu .hdr-row { border-color: rgba(255,255,255,.25); }
  .hdr.is-menu .logo { color: #fff; }
  .hdr.is-menu .logo .logo-hole { fill: var(--black); }
  .hdr.is-menu .hdr-tools, .hdr.is-menu .cart-btn { opacity: 0; visibility: hidden; }

  .hero { margin-top: .6rem; height: min(57.7rem, calc(100svh - 12rem)); min-height: 48rem; }
  .hero-content { left: 1rem; right: 1rem; bottom: 1.6rem; }
  .hero-kicker { font-size: 1.2rem; margin-top: 1rem; }
  .hero-title { font-size: 11.6vw; line-height: .82; }
  .hero-media img, .hero-media video { height: 100%; }
  .hero-rule { margin: 1.2rem 0 1.4rem; }
  .hero-text { font-size: 1rem; }

  .picks { margin-top: 2rem; }
  .picks-bar { border: 0; padding: 0 .5rem; margin-bottom: 2rem; }
  .tabs { width: 100%; }
  .tab { flex: 1; min-width: 0; height: 4rem; }
  .tabs-ind { height: 4rem; }
  .more { display: none; }
  .more--m { display: flex; justify-content: center; height: 4rem; margin: 1.5rem .5rem 0; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r6); }
  /* horizontal row: vertical swipes always go to the page */
  .grid--row { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: .5rem; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); scrollbar-width: none; touch-action: pan-x pan-y; }
  .grid--row::-webkit-scrollbar { display: none; }
  .grid--row .card { flex: 0 0 min(31rem, 84vw); scroll-snap-align: start; display: flex !important; }
  .js .grid--row .card.rv { transform: none; }

  .about { margin-top: 4rem; border: 0; padding-top: 0; }
  .about-media { height: 27.7rem; }
  .about-title { font-size: 3.2rem; top: 1.4rem; right: 1.4rem; }
  .about-cols { padding: 0 .5rem; font-size: 1.1rem; }
  .contacts { margin-top: 4rem; padding: 2rem 1rem 1rem; }
  .contacts-title { font-size: min(3.6rem, 10.5vw); margin-bottom: 2.4rem; }
  .ct-row--addr { flex-direction: column; align-items: flex-start; }
  .ct-row--hours { grid-template-columns: 1fr auto; row-gap: .6rem; }
  .ct-row--hours > span:nth-child(2), .ct-open { justify-self: end; }
  .ct-open { grid-column: 2; }
  .ct-btns { gap: 1rem; }
  .call { height: 12rem; }
  .call .disp { font-size: min(2.4rem, 5.6vw); white-space: nowrap; }

  .ftr { padding: 0 1rem 2.4rem; }
  .theme-light .ftr, .ftr { border-radius: var(--r20) var(--r20) 0 0; }
  .theme-dark .ftr { background: var(--black); margin: 4rem 0 0; }
  .ftr-top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; padding: 3rem 0 0; border: 0; }
  .ftr-logo { padding-bottom: 3rem; }
  .ftr-soc { order: 1; justify-self: stretch; justify-content: center; gap: 4.8rem; padding: 3rem 0; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
  .ftr-soc .i { width: 2rem !important; height: 2rem !important; }
  .ftr-c1 { order: 2; } .ftr-c3 { order: 3; border-top: 1px solid rgba(255,255,255,.25); }
  .ftr-top .ftr-c2, .ftr-top .ftr-mkt { display: none; }
  .ftr-col { justify-self: stretch; display: grid; justify-items: center; gap: .2rem; padding: 3rem 0; }
  .ftr-col li { font-size: 1.1rem; line-height: 2.2rem; }
  .ftr-gap { display: none; }
  .ftr-legal { flex-direction: column; align-items: stretch; gap: 0; padding: 0; text-align: center; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 0; }
  .ftr-legal a { padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .ftr-word { margin-top: 2.4rem; }
  .ftr-bottom { flex-direction: column; align-items: center; gap: 2.4rem; margin-top: 1.6rem; font-size: 1.1rem; }

  .cat, .pdp { padding: 0 1rem; }
  .crumbs ol { font-size: .9rem; padding-top: 1.4rem; }
  .cat-head { flex-direction: column; align-items: flex-start; gap: 0; margin-top: .6rem; }
  .cat-title { font-size: 3.7rem; }
  .cat-count { font-size: 3.7rem; -webkit-text-stroke-width: 1px; margin-top: .4rem; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 1.6rem -1rem 0; padding: 0 1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { height: 3.4rem; flex: none; }
  .grid--cat { grid-template-columns: 1fr; gap: 1rem; margin-left: -.5rem; margin-right: -.5rem; }
  .card-type { margin-bottom: 2rem; }
  .fab { bottom: calc(1.6rem + env(safe-area-inset-bottom)); }

  .tiles { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: "ac" "sb" "am" "hu" "cb"; gap: 1rem; margin: 1.6rem -.5rem 0; }
  .tile { height: 24rem; }
  .tile--am { height: 28rem; }
  .tile-t { left: 1rem; right: 1rem; bottom: 1.4rem; padding-top: 1.4rem; border-top: 1px solid currentColor; font-size: 2rem; }
  .tile--ac .tile-t { border-color: rgba(255,255,255,.4); }
  .tile-illu { bottom: 5rem; transform-origin: center; }
  .tile--ac .illu-ac-left { width: 16rem !important; height: 16rem !important; }
  .tile--ac .illu-ac-right { width: 13.6rem !important; height: 13.6rem !important; }
  .tile--sb .illu { width: 17rem !important; height: 17rem !important; }
  .tile--am .illu { width: 12.8rem !important; height: 19rem !important; }
  .tile--cb .illu { width: 30rem !important; height: 6.5rem !important; }
  .tile--hu .illu { width: 23.7rem !important; height: 4.3rem !important; }

  /* filter sheet — Figma 929:10169 */
  .fmodal-panel { width: 100%; max-height: calc(100svh - 10rem); }
  .fmodal-head { margin: 0 1.5rem; padding: 1.5rem 0; }
  .fmodal-x { right: -1rem; top: .7rem; }
  .fmodal-body { padding: 0 1.5rem; gap: 0; }
  .fgroup { padding: 2rem 0; border-bottom: 1px solid rgba(102,102,102,.5); }
  .fgroup:last-child { border-bottom: 0; }
  .fmodal-foot { height: calc(8.3rem + env(safe-area-inset-bottom)); align-items: flex-start; padding: 1.5rem 0 env(safe-area-inset-bottom); }

  /* product — Figma 436:9643 */
  .pdp-grid { gap: 0; margin-top: .4rem; }
  .gallery { margin: 0 -.5rem; border-radius: var(--r20); }
  .thumbs { display: none; }
  .dots { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; gap: .4rem; }
  .dots i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255,255,255,.4); transition: background-color var(--t-ui), width var(--t-panel) var(--ease-out); }
  .dots i.is-on { background: #fff; width: 1.4rem; border-radius: .3rem; }
  .pdp-top { padding: 1.5rem 0 1.5rem; border: 0; }
  .pdp-title, .pdp-title.is-long { font-size: 5rem; line-height: .86; }
  .pdp-brand { margin-top: 1.4rem; font-size: 1.1rem; }
  .pdp-meta { display: none; }
  .pdp-mprice { display: flex; align-items: center; gap: 1rem; margin: 0 -.5rem; padding: 1.6rem 1rem 1.4rem; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); font: 500 2rem/1 var(--f-body); }
  .pdp-mmeta { display: flex; justify-content: space-between; align-items: center; margin: 0 -.5rem; padding: 2rem 1rem; }
  .pdp-mmeta .pdp-stock { height: 3.3rem; }
  .pdp-block { grid-template-columns: 1fr; margin: 0 -.5rem; padding: 2rem 1rem; border-top: 1px solid var(--black); border-bottom: 0; }
  .pdp-keys .pdp-label { padding: 0 0 2rem; border: 0; max-width: 15.3rem; }
  .pdp-keys dl { padding: 0; }
  .pdp-del { grid-template-columns: 1fr auto; row-gap: 2rem; }
  .pdp-del-v { padding: 0; font-size: 1.1rem; text-align: right; }
  .pdp-note { grid-column: 1 / -1; padding: 0; max-width: 24.5rem; font-size: .8rem; }
  .pdp-buy { display: none; }
  .pdp-tabs { margin-top: 1rem; }
  .ptabs { gap: .5rem; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab { width: auto; flex: 1 1 0; min-width: 0; height: 5.2rem; font-size: 1.3rem; }
  .ppanel { margin-top: 2rem; }
  .spec div { grid-template-columns: 1fr; gap: .5rem; padding: 0 0 1.3rem; margin-bottom: 1.3rem; }
  .pdp-rel { font-size: 3.2rem; }
  .page-product main { padding-bottom: 8.6rem; }
  .mbuy { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; padding: .8rem .5rem calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--light) 60%, rgba(242,242,242,0)); transition: transform var(--t-panel) var(--ease-out); }
  .mbuy.is-away { transform: translateY(110%); }
  .mbuy-btn { width: 100%; height: 6rem; display: flex; align-items: center; gap: 1.2rem; padding: 0 2rem; background: var(--black); color: #fff; border-radius: var(--r10); font-size: 1.2rem; line-height: 1; text-transform: uppercase; transition: transform 160ms var(--ease-out), background-color var(--t-ui); }
  .mbuy-btn .i { width: 1.8rem !important; height: 1.8rem !important; }
  .mbuy-btn b { margin-left: auto; font: 500 2rem/1 var(--f-body); }
  .mbuy-btn:active { transform: scale(.98); background: var(--accent); }

  .drawer-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88svh; border-radius: var(--r20) var(--r20) 0 0; transform: translateY(100%); }
  .drawer.is-open .drawer-panel { transform: none; }
}

/* reduced motion: replace movement with fades */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js .page-home .hero-media, .js .page-home .hero-title .line > span, .js .page-home .hero-kicker, .js .page-home .hero-text, .js .page-home .hero-rule,
  .js [data-reveal], .js .card.rv, .js .ftr-word-in span, .mega-inner, .mega-col, .mnav nav a, .search-box, .toast, .fmodal-panel, .tile-illu, .gallery-stage img { transform: none !important; }
  .drawer-panel { opacity: 0; transform: none !important; transition: opacity 200ms ease !important; }
  .drawer.is-open .drawer-panel { opacity: 1; }
  .card:hover .card-media img { transform: none; }
}

/* round 3 ---------------------------------------------------------------- */
/* sections reached by anchor sit right under the sticky header (JS refines it) */
#about, #contacts { scroll-margin-top: 6rem; }
/* about block does not slide: it fades in place, the photo settles inside its frame */
.js .about-media[data-reveal] { transform: none; }
.about-media img { transform: scale(1.04); transition: transform 1400ms var(--ease-out); }
.about-media.is-in img { transform: none; }
/* while the page is being scrolled, hover effects under a still cursor must not flicker */
html.lenis-scrolling .card, html.lenis-scrolling .tile { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .about-media img { transform: none !important; } }

/* ---- analog reveals (motion skill: scroll-driven motion is a function of position, never a timed jump) ---- */
@supports (animation-timeline: view()) {
  .js [data-reveal], .js .card.rv, .js .grid--row { opacity: 1; transform: none; transition: none;
    animation: rv-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .js .grid--row .card.rv { opacity: 1; transform: none; transition: none; animation: none; }
  .js .about-media[data-reveal] { animation-name: rv-fade; }
  .about-media img, .about-media.is-in img { transform: none; transition: none; }
  .js .ftr-word-in span, .js .ftr-word.is-in .ftr-word-in span { transform: none; transition: none;
    animation: word-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) entry calc(55% + var(--i) * 6%); }
  @keyframes rv-scroll { from { opacity: 0; transform: translateY(3rem); animation-timing-function: cubic-bezier(.22, 1, .36, 1); } to { opacity: 1; transform: none; } }
  @keyframes rv-fade { from { opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } to { opacity: 1; } }
  @keyframes word-rise { from { transform: translateY(105%); animation-timing-function: cubic-bezier(.22, 1, .36, 1); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .card.rv, .js .grid--row, .js .ftr-word-in span { animation: none !important; opacity: 1 !important; }
}

@media (hover: none) { .tile--cb .pulse { display: none; } }
@media (max-width: 700px) {
  .sr-item { grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: 1.2rem; padding: .8rem 1.2rem .8rem .8rem; }
  .sr-item img { width: 5.6rem; height: 5.6rem; }
  .sr-item b { font-size: 2.2rem; margin-bottom: .3rem; }
  .sr-item > span:last-child { font-size: 1.4rem; }
  .search { padding: calc(var(--hb, 6rem) + .5rem) .5rem 1rem; }
  .hsearch-ic { width: calc(3.6rem - 2px); }
}
/* mobile toast: a full-width bar above the bottom controls, dot sits on the first line */
@media (max-width: 700px) {
  .toast { left: .5rem; right: .5rem; bottom: calc(1rem + env(safe-area-inset-bottom)); align-items: flex-start; gap: 1.2rem; padding: 1.6rem 1.6rem; font-size: 1.2rem; line-height: 1.6rem; transform: translateY(1.6rem); }
  .toast::before { width: .7rem; height: .7rem; margin-top: .45rem; }
  .toast.is-on { transform: none; }
  .page-category .toast { bottom: calc(8.4rem + env(safe-area-inset-bottom)); }
  .page-product .toast { bottom: calc(8rem + env(safe-area-inset-bottom)); }
}