/* Storefront type, self-hosted (public/fonts), the homepage's (task-385, David 2026-11-08: one font everywhere):
   Google Sans for text and headings (Latin, Cyrillic AND Armenian, so Armenian no longer falls through), Inter for
   prices only (wider, open figures; Google Sans digits read poorly at card sizes). Both are Google's variable woff2
   files with a 400-700 weight range, one per script subset with Google's unicode-range. Noto Sans Armenian stays as
   the fallback (and carries the dram sign for Inter). No next/font, no Google at build. */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/fonts/google-sans/google-sans-400-700-armenian.woff2) format("woff2");
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/fonts/google-sans/google-sans-400-700-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/fonts/google-sans/google-sans-400-700-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/fonts/google-sans/google-sans-400-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/fonts/google-sans/google-sans-400-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter/inter-400-700-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter/inter-400-700-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter/inter-400-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter/inter-400-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Armenian";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/noto-sans-armenian/noto-sans-armenian-400-armenian.woff2) format("woff2");
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: "Noto Sans Armenian";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/noto-sans-armenian/noto-sans-armenian-500-armenian.woff2) format("woff2");
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: "Noto Sans Armenian";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/noto-sans-armenian/noto-sans-armenian-600-armenian.woff2) format("woff2");
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: "Noto Sans Armenian";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/noto-sans-armenian/noto-sans-armenian-700-armenian.woff2) format("woff2");
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}

@font-face{font-family:"Google Sans Fallback";src:local("Arial"),local("Helvetica"),local("Arimo");size-adjust:98.8%;ascent-override:98%;descent-override:29.4%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("Arimo");size-adjust:99%;ascent-override:98%;descent-override:24.2%;line-gap-override:0%}

/* ============================================================
   SmartBox · Design A · "Apple"
   Every design axis is a data-* attribute on <html>; the picker
   flips them. Tokens first, then components, then the axes.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:calc(var(--nav-h) + 28px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.47;letter-spacing:var(--tr-body);overflow-x:clip;transition:background-color .45s var(--ease),color .45s var(--ease)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
svg{flex:none}
.boot *,.boot *::before,.boot *::after{transition:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:root{
  --rail-x:max(var(--gap),var(--inset));
  --brand:#C70125;--brand-hi:#E0153A;--brand-dk:#A5102B;
  --ease:cubic-bezier(.4,0,.6,1);--ease-soft:cubic-bezier(.25,.1,.3,1);--ease-card:cubic-bezier(0,0,.5,1);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --max:1240px;--gut:clamp(16px,4vw,44px);--gap:12px;
  --fb:"Google Sans Fallback","Noto Sans Armenian",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-display:"Google Sans",var(--fb);--f-text:"Google Sans",var(--fb);--f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --dw:600;--dtr:-.02em;--dcase:none;--dst:100%;--dscale:1;--tr-body:-.01em;--fs-body:17px;
  --sec-y:clamp(64px,8vw,120px);--pad:28px;--gap2:20px;--tile-h:1;
  --acc:var(--acc-l);--acc-h:var(--acc-hl);--acc-ink:var(--acc-ink-l);--link:var(--link-l);
}

/* ---------- THEME ---------- */
html[data-theme=light]{--bg:#fff;--bg2:#f5f5f7;--tile:#f5f5f7;--tile-dark:#000;--card:#fff;--ink:#1d1d1f;--ink2:#6e6e73;--ink3:#86868b;--line:#d2d2d7;--line2:rgba(0,0,0,.08);--chip:#e8e8ed;--nav-bg:rgba(250,250,252,.8);--foot:#f5f5f7;--shade:rgba(0,0,0,.18);color-scheme:light}
html[data-theme=paper]{--bg:#fbfaf7;--bg2:#f2efe9;--tile:#f2efe9;--tile-dark:#1f1c19;--card:#fffefb;--ink:#24211d;--ink2:#736c63;--ink3:#958d82;--line:#ddd6cb;--line2:rgba(36,33,29,.09);--chip:#e8e3d9;--nav-bg:rgba(251,250,247,.82);--foot:#f2efe9;--shade:rgba(60,40,20,.2);color-scheme:light}
html[data-theme=dark]{--bg:#000;--bg2:#161617;--tile:#161617;--tile-dark:#000;--card:#1d1d1f;--ink:#f5f5f7;--ink2:#a1a1a6;--ink3:#86868b;--line:#424245;--line2:rgba(255,255,255,.1);--chip:#2a2a2c;--nav-bg:rgba(22,22,23,.8);--foot:#161617;--shade:rgba(0,0,0,.6);color-scheme:dark}
html[data-theme=graphite]{--bg:#1c1c1e;--bg2:#2c2c2e;--tile:#2c2c2e;--tile-dark:#0f0f10;--card:#2c2c2e;--ink:#f2f2f7;--ink2:#aeaeb2;--ink3:#8e8e93;--line:#48484a;--line2:rgba(255,255,255,.1);--chip:#3a3a3c;--nav-bg:rgba(28,28,30,.8);--foot:#161618;--shade:rgba(0,0,0,.6);color-scheme:dark}
html[data-theme=redline]{--bg:#fff;--bg2:#f6f4f4;--tile:#f6f4f4;--tile-dark:var(--brand);--card:#fff;--ink:#1d1d1f;--ink2:#6e6e73;--ink3:#86868b;--line:#e2d6d8;--line2:rgba(120,0,20,.08);--chip:#f3e6e8;--nav-bg:rgba(255,255,255,.82);--foot:#1d1d1f;--shade:rgba(80,0,10,.22);color-scheme:light}
html[data-theme=sale]{--bg:#ECEBE6;--bg2:#fff;--tile:#fff;--tile-dark:#343434;--card:#fff;--ink:#343434;--ink2:#6F6B66;--ink3:#8C8780;--line:rgba(52,52,52,.10);--line2:rgba(52,52,52,.07);--chip:#E2E0DA;--nav-bg:rgba(255,255,255,.9);--foot:var(--brand);--shade:rgba(52,40,30,.16);--thumb:#ECEBE6;color-scheme:light}
html[data-theme=mono]{--bg:#fff;--bg2:#fff;--tile:#fff;--tile-dark:#000;--card:#fff;--ink:#000;--ink2:#505050;--ink3:#707070;--line:#000;--line2:#000;--chip:#fff;--nav-bg:rgba(255,255,255,.9);--foot:#fff;--shade:rgba(0,0,0,.14);color-scheme:light}

/* ---------- ACCENT (l = on light, d = on dark) ---------- */
html[data-accent=red]{--acc-l:var(--brand);--acc-hl:#B0001F;--acc-ink-l:#fff;--link-l:#B3001F;--acc-d:var(--brand-hi);--acc-hd:#F02848;--acc-ink-d:#fff;--link-d:#FF5A72}
html[data-accent=blue]{--acc-l:#0071e3;--acc-hl:#0077ed;--acc-ink-l:#fff;--link-l:#0066cc;--acc-d:#0071e3;--acc-hd:#0077ed;--acc-ink-d:#fff;--link-d:#2997ff}
html[data-accent=ink]{--acc-l:#1d1d1f;--acc-hl:#3a3a3c;--acc-ink-l:#fff;--link-l:#1d1d1f;--acc-d:#f5f5f7;--acc-hd:#fff;--acc-ink-d:#1d1d1f;--link-d:#f5f5f7}
html[data-theme=dark],html[data-theme=graphite],.on-dark{--acc:var(--acc-d);--acc-h:var(--acc-hd);--acc-ink:var(--acc-ink-d);--link:var(--link-d)}
html[data-theme=sale][data-accent=red]{--acc-hl:#8F011B;--link-l:var(--brand)}
html[data-theme=redline][data-accent=red]{--acc-d:#fff;--acc-hd:#fff;--acc-ink-d:var(--brand);--link-d:#fff}
.on-dark{--ink:#f5f5f7;--ink2:#a1a1a6;--ink3:#86868b;--line:rgba(255,255,255,.22);--chip:rgba(255,255,255,.12);--shade:rgba(0,0,0,.5);color:var(--ink)}
.on-brand{--ink:#fff;--ink2:rgba(255,255,255,.8);--ink3:rgba(255,255,255,.65);--line:rgba(255,255,255,.35);--chip:rgba(255,255,255,.16);--acc:#fff;--acc-h:#fff;--acc-ink:var(--brand);--link:#fff;--shade:rgba(60,0,10,.45);background:var(--brand);color:#fff}

/* ---------- TYPE ---------- */
html[data-type=gsans]{--f-display:"Google Sans",var(--fb);--f-text:"Google Sans",var(--fb);--dw:600;--dtr:-.025em;--tr-body:-.005em}
html[data-type=system]{--f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",var(--fb);--f-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",var(--fb);--dw:600;--dtr:-.015em}
html[data-type=onest]{--f-display:"Onest",var(--fb);--f-text:"Onest",var(--fb);--dw:600;--dtr:-.028em}
html[data-type=manrope]{--f-display:"Manrope",var(--fb);--f-text:"Manrope",var(--fb);--dw:700;--dtr:-.032em}
html[data-type=unbounded]{--f-display:"Unbounded",var(--fb);--f-text:"Golos Text",var(--fb);--dw:600;--dtr:-.03em;--dscale:.84}
html[data-type=editorial]{--f-display:"Playfair Display","Noto Serif Armenian",Georgia,serif;--f-text:"Inter",var(--fb);--dw:600;--dtr:-.01em;--dscale:1.06}
html[data-type=poster]{--f-display:"Oswald","Noto Sans Armenian",Impact,sans-serif;--f-text:"Google Sans",var(--fb);--dw:600;--dtr:0em;--dcase:uppercase;--dst:62.5%;--dscale:1.18}
html[data-type=geist]{--f-display:"Geist",var(--fb);--f-text:"Geist",var(--fb);--f-mono:"Geist Mono",ui-monospace,monospace;--dw:600;--dtr:-.04em}
html[lang=hy]{--dtr:0em;--tr-body:0em}
html[lang=hy][data-type=poster]{--dscale:1}
.disp{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dtr);text-transform:var(--dcase);font-stretch:var(--dst)}
html[lang=hy] .disp{line-height:1.16!important}

/* ---------- LAYOUT ---------- */
.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.sec{padding-block:calc(var(--sec-y)*.62) calc(var(--sec-y)*.5)}
.eb{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--acc)}
.on-dark .eb{color:var(--link)}
.on-brand .eb{color:#fff;opacity:.9}

/* ---------- BUTTONS ---------- */
.btn{--bh:44px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:var(--bh);padding:0 22px;border:1px solid transparent;border-radius:980px;background:var(--acc);color:var(--acc-ink);font-family:var(--f-text);font-size:17px;font-weight:400;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;text-transform:none;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .45s var(--ease-out),transform .45s var(--ease-out)}
.btn:hover{background:var(--acc-h)}
.btn:active{transform:scale(.97)}
.btn.alt{background:transparent;color:var(--link);border-color:var(--link)}
.btn.alt:hover{background:var(--link);color:var(--acc-ink)}
.on-brand .btn.alt:hover{color:var(--brand)}
.btn.sm{--bh:32px;padding:0 15px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:14px 17px;justify-content:center;align-items:center}
.btn .chev{display:none}
html[data-btn=soft] .btn{border-radius:999px;font-weight:500}
html[data-btn=soft] .btn.sm{border-radius:999px}
html[data-btn=sharp] .btn{border-radius:0;text-transform:uppercase;letter-spacing:.09em;font-size:13px;font-weight:600;--bh:48px;padding:0 26px}
html[data-btn=sharp] .btn.sm{font-size:11px;--bh:34px;padding:0 15px}
html[data-btn=sharp] .btn.alt{border-width:1.5px}
html[data-btn=outline] .btn{background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 100%/100% 0;color:var(--ink);border:1.5px solid var(--ink);font-weight:500;transition:background-size .45s var(--ease-out),color .35s var(--ease),border-color .3s,transform .45s var(--ease-out)}
html[data-btn=outline] .btn:is(:hover,.demo){background-size:100% 100%;color:var(--acc-ink);border-color:var(--acc)}
html[data-btn=outline] .btn.alt{border-color:var(--line);color:var(--ink2)}
html[data-btn=link] .btn{background:none;border:0;padding:0;min-height:0;color:var(--link);font-size:19px;border-radius:0;overflow:visible}
html[data-btn=link] .btn.sm{font-size:15px}
html[data-btn=link] .btn .chev{display:inline-block;width:.42em;height:.42em;border:solid currentColor;border-width:0 .11em .11em 0;transform:rotate(-45deg);margin-left:.05em;transition:transform .3s var(--ease)}
html[data-btn=link] .btn:hover{background:none;text-decoration:underline;text-underline-offset:.18em}
html[data-btn=link] .btn:hover .chev{transform:translateX(4px) rotate(-45deg)}
html[data-btn=link] .btn.alt{color:var(--link)}
html[data-btn=tactile] .btn{border-radius:14px;border:1px solid rgba(0,0,0,.18);border-bottom:4px solid color-mix(in oklab,var(--acc) 62%,#000);background:linear-gradient(color-mix(in oklab,var(--acc) 82%,#fff),var(--acc));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 16px -6px color-mix(in oklab,var(--acc) 55%,transparent);font-weight:600;transition:transform .08s linear,border-bottom-width .08s linear,box-shadow .2s}
html[data-btn=tactile] .btn:active{transform:translateY(3px);border-bottom-width:1px;box-shadow:inset 0 2px 5px rgba(0,0,0,.25)}
html[data-btn=tactile] .btn.alt{background:var(--card);color:var(--ink);border-color:var(--line);border-bottom-color:color-mix(in oklab,var(--line) 70%,#000);box-shadow:0 6px 12px -6px var(--shade)}

/* ---------- RADIUS ---------- */
:root{--r-tile:0px;--r-bento:22px;--r-card:18px;--r-sm:12px;--r-chip:980px;--inset:0px}
/* one corner for every component (David, task-385): tiles, bento, cards, chapter, visit, dropdowns = 24px */
html[data-radius=soft]{--r-tile:24px;--r-bento:24px;--r-card:24px;--r-sm:14px;--inset:12px}
html[data-radius=squircle]{--r-tile:44px;--r-bento:44px;--r-card:34px;--r-sm:18px;--inset:12px}
html[data-radius=sharp]{--r-tile:0px;--r-bento:0px;--r-card:0px;--r-sm:0px;--r-chip:0px;--inset:0px}
html[data-radius=xl]{--r-tile:48px;--r-bento:48px;--r-card:40px;--r-sm:22px;--inset:16px}
@supports (corner-shape:squircle){html[data-radius=squircle] :is(.tile,.bt,.pc,.why-c,.cat-media,.band,.car-slide,.split-media,.visit-card){corner-shape:squircle;--r-tile:64px;--r-bento:64px;--r-card:52px}}

/* ---------- CARD SURFACE ---------- */
:root{--c-bg:var(--card);--c-bd:transparent;--c-sh:2px 4px 12px rgba(0,0,0,.08);--c-sh-h:2px 4px 16px rgba(0,0,0,.16)}
html[data-surface=flat]{--c-bg:var(--bg2);--c-sh:none;--c-sh-h:none}
html[data-surface=hairline]{--c-bg:var(--bg);--c-bd:var(--line);--c-sh:none;--c-sh-h:none}
html[data-surface=elevated]{--c-bg:var(--card);--c-sh:0 1px 1px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.03),0 4px 4px rgba(0,0,0,.03),0 8px 8px rgba(0,0,0,.03),0 16px 16px rgba(0,0,0,.03),0 32px 32px -8px rgba(0,0,0,.06);--c-sh-h:0 2px 2px rgba(0,0,0,.04),0 6px 6px rgba(0,0,0,.04),0 14px 14px rgba(0,0,0,.04),0 28px 28px rgba(0,0,0,.05),0 48px 48px -10px rgba(0,0,0,.08)}
html[data-theme=dark],html[data-theme=graphite]{--c-sh:none;--c-sh-h:none}
html[data-theme=mono]{--c-bd:#000;--c-sh:none;--c-sh-h:none;--c-bg:#fff}
html[data-theme=dark][data-surface=hairline],html[data-theme=graphite][data-surface=hairline]{--c-bg:transparent}

/* ---------- DENSITY ---------- */
html[data-density=airy]{--sec-y:clamp(88px,11vw,176px);--pad:34px;--gap2:28px;--tile-h:1.12;--gap:16px}
html[data-density=compact]{--sec-y:clamp(40px,5vw,72px);--pad:18px;--gap2:12px;--tile-h:.8;--fs-body:16px;--gap:8px}


/* ---------- HEADER SIZE + LOGO SIZE (own axes) ---------- */
:root{--nav-h:72px;--nav-fs:16px;--nav-ico:22px;--logo-h:36px}
html[data-navsize=slim]{--nav-h:52px;--nav-fs:12.5px;--nav-ico:18px}
html[data-navsize=regular]{--nav-h:72px;--nav-fs:16px;--nav-ico:22px}
html[data-navsize=tall]{--nav-h:78px;--nav-fs:15px;--nav-ico:22px}
html[data-navsize=grand]{--nav-h:96px;--nav-fs:16.5px;--nav-ico:24px}
html[data-logo=s]{--logo-h:24px}
html[data-logo=m]{--logo-h:36px}
html[data-logo=l]{--logo-h:42px}
html[data-logo=xl]{--logo-h:54px}
html[data-navsize=tall] .langs button,html[data-navsize=grand] .langs button{font-size:13px;padding:4px 10px}
/* round flags in the language picker (David, task-385): EN = UK, RU = Russia, ՀԱՅ = Armenia */
.langs button{display:inline-flex;align-items:center;gap:6px}
.langs button::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.langs button[data-lang=en]::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='t'><path d='M30 15h30v15zv15H0zH0V0zV0h30z'/></clipPath><path fill='%23012169' d='M0 0h60v30H0z'/><path stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/><path stroke='%23C8102E' stroke-width='4' clip-path='url%28%23t%29' d='M0 0l60 30m0-30L0 30'/><path stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/><path stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/></svg>")}
.langs button[data-lang=ru]::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><path fill='%23fff' d='M0 0h9v2H0z'/><path fill='%230039A6' d='M0 2h9v2H0z'/><path fill='%23D52B1E' d='M0 4h9v2H0z'/></svg>")}
.langs button:is([data-lang=hy],[data-lang=am])::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><path fill='%23D90012' d='M0 0h9v2H0z'/><path fill='%230033A0' d='M0 2h9v2H0z'/><path fill='%23F2A800' d='M0 4h9v2H0z'/></svg>")}
@media (max-width:420px){.nav-icons .langs button{font-size:0;gap:0;padding:4px 6px}.nav-icons .langs button::before{width:18px;height:18px}}
html[data-navsize=grand] .bag-n{min-width:17px;height:17px;line-height:17px;font-size:11px}
html[data-navsize=tall]:not([data-nav=pill]) .nav-in,html[data-navsize=grand]:not([data-nav=pill]) .nav-in{width:min(1400px,100% - 2*var(--gut))}
.nav-in .nav-links{min-width:0;overflow:hidden}
@media (max-width:1280px){html[data-navsize=grand] .nav-in .nav-links{display:none}html[data-navsize=grand] .ni-menu{display:inline-flex}}
@media (max-width:1180px){html[data-navsize=tall][data-logo=xl] .nav-in .nav-links{display:none}html[data-navsize=tall][data-logo=xl] .ni-menu{display:inline-flex}}

/* ============================================================
   UTILITY STRIP + NAV
   ============================================================ */
.util{display:none;background:#0e0f12;color:#c9cad0;font-size:14px}
/* top strip (task-385): one centred row - hours, address, phone, then WhatsApp + Viber icons */
.util-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 24px;min-height:38px}
.util-in a,.util-in span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util-in svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
/* WhatsApp + Viber: brand-colour circles (David), the official white mark (Simple Icons, CC0), no ring; 20% smaller since 2026-11-09 (David) */
.util-in .u-msg{gap:8px;margin-left:-10px}
.util-in .u-msg a{position:relative;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;color:#fff;transition:transform .2s var(--ease-out),filter .2s}
.util-in .u-msg a[href^="https://wa.me"]{background:#25D366}
.util-in .u-msg a[href^="viber:"]{background:#7360F2}
.util-in .u-msg a:hover{transform:scale(1.08);filter:brightness(1.06)}
.util-in .u-msg svg{width:13px;height:13px;fill:#fff;stroke:none}
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line2);transition:background-color .45s var(--ease),transform .45s var(--ease-out),width .45s var(--ease-out)}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);height:var(--nav-eff);width:min(1180px,100% - 2*var(--gut));margin-inline:auto;transition:height .35s var(--ease-out)}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:var(--logo-h);width:auto;transition:height .35s var(--ease-out)}
.nav-links{display:flex;flex:1;justify-content:center;gap:clamp(12px,1.9vw,30px);font-size:var(--nav-fs);letter-spacing:-.005em;color:var(--ink)}
.nav-links a{opacity:.82;white-space:nowrap;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1;color:var(--acc)}
.nav-links a.deal{color:var(--link);opacity:1}
.nav-icons{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.ni{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;min-width:28px;color:var(--ink);opacity:.86;transition:opacity .2s}
.ni:hover{opacity:1}
.ni svg{width:var(--nav-ico);height:var(--nav-ico);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bag-n{position:absolute;right:-5px;bottom:2px;min-width:15px;height:15px;padding:0 4px;border-radius:9px;background:var(--acc);color:var(--acc-ink);font-size:10px;font-weight:700;line-height:15px;text-align:center;transform:scale(0);transition:transform .45s var(--ease-spring)}
.bag-n.on{transform:scale(1)}
.ni-bag.bump{animation:bump .5s var(--ease-spring)}
@keyframes bump{40%{transform:scale(1.28) rotate(-8deg)}}
.menu-word{display:none;font-size:var(--nav-fs);font-weight:500}
.ni-menu{display:none}
.langs{display:flex;gap:2px;padding:2px;border-radius:980px;background:var(--line2)}
.langs button{font-size:13px;font-weight:600;padding:3px 8px;border-radius:980px;color:var(--ink2);transition:background .2s,color .2s}
.langs button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* light: the picked language was a beige pill (--bg) on an almost equal grey track; now a white pill on the chip-grey track (David, 2026-11-09; same in the shop) */
html:not([data-theme=dark],[data-theme=graphite],[data-nav=black]) .langs{background:var(--chip)}
html:not([data-theme=dark],[data-theme=graphite],[data-nav=black]) .langs button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08)}
html[data-radius=sharp] .langs,html[data-radius=sharp] .langs button{border-radius:0}
.nav-cats{display:none}

/* nav: floating pill */
html[data-nav=pill] .nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1120px,100% - 24px);border-radius:980px;border:1px solid var(--line2);box-shadow:0 10px 34px rgba(0,0,0,.12)}
html[data-nav=pill]{--nav-row:calc(var(--nav-h) + 6px)}
html[data-nav=pill] .nav-in{width:auto;padding-inline:22px 14px}
html[data-nav=pill] main{padding-top:calc(var(--nav-eff) + 28px)}
html[data-nav=pill][data-hero=cinema] main{padding-top:0}
html[data-nav=pill][data-radius=sharp] .nav{border-radius:0}
html[data-nav=pill].scrolled .nav{width:min(860px,100% - 24px)}
html[data-nav=pill].scrolled .nav-links{gap:clamp(10px,1.3vw,20px)}
/* nav: black retail (today's smartbox.am, made calm) */
html[data-nav=black] .util{display:block}
html[data-nav=black] .nav{background:#16181d;color:#f5f5f7;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;--ink:#f5f5f7;--ink2:#a1a1a6;--line2:rgba(255,255,255,.12);--bg:#2a2c33}
html[data-nav=black]{--nav-row:calc(var(--nav-h) + 12px)}
html[data-nav=black] .nav-in{width:min(var(--max),100% - 2*var(--gut))}
html[data-nav=black] .nav-in .nav-links{display:none}
html[data-nav=black] .nav-cats{display:block;background:#1f2127;border-top:1px solid rgba(255,255,255,.06)}
html[data-nav=black] .nav-cats .nav-links{display:flex;justify-content:flex-start;gap:clamp(14px,2.2vw,34px);height:48px;align-items:center;font-size:calc(var(--nav-fs) + 1px);overflow-x:auto;scrollbar-width:none}
html[data-nav=black] .nav-cats .nav-links::-webkit-scrollbar{display:none}
/* nav: minimal */
html[data-nav=minimal] .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;transition:background-color .35s,border-color .35s}
html[data-nav=minimal].scrolled .nav{background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--line2)}
html[data-nav=minimal]{--nav-row:calc(var(--nav-h) + 8px)}
html[data-nav=minimal] .nav-in{width:min(var(--max),100% - 2*var(--gut))}
html[data-nav=minimal] .nav-links{visibility:hidden}
html[data-nav=minimal] .ni-menu{display:inline-flex}
html[data-nav=minimal] .menu-word{display:inline}

/* overlay menu */
.overlay{position:fixed;inset:0;z-index:300;background:var(--bg);color:var(--ink);clip-path:circle(0 at calc(100% - 44px) 32px);visibility:hidden;transition:clip-path .8s var(--ease-out),visibility 0s .8s;overflow:auto}
.overlay.on{clip-path:circle(150% at calc(100% - 44px) 32px);visibility:visible;transition:clip-path .9s var(--ease-out),visibility 0s}
.ov-in{width:min(var(--max),100% - 2*var(--gut));margin:0 auto;padding:90px 0 60px}
.ov-close{position:absolute;top:18px;right:var(--gut);width:44px;height:44px;border-radius:50%;background:var(--bg2);display:grid;place-items:center}
.ov-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.ov-links{display:grid;gap:4px}
.ov-links a{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dtr);text-transform:var(--dcase);font-stretch:var(--dst);font-size:clamp(30px,5.4vw,64px);line-height:1.1;opacity:0;transform:translateY(24px);transition:color .2s}
.overlay.on .ov-links a{opacity:1;transform:none;transition:opacity .6s var(--ease-out) calc(.15s + var(--i)*45ms),transform .8s var(--ease-out) calc(.15s + var(--i)*45ms),color .2s}
.ov-links a:hover{color:var(--acc)}
.ov-foot{margin-top:40px;color:var(--ink2);font-size:15px;display:grid;gap:6px}

/* ============================================================
   HERO VARIANTS
   ============================================================ */
.hv{display:none}
html[data-hero=tiles] .hv-tiles,html[data-hero=split] .hv-split,html[data-hero=bento] .hv-bento,html[data-hero=carousel] .hv-carousel,html[data-hero=cinema] .hv-cinema{display:block}

/* tile (Apple homepage) */
.tiles{display:grid;gap:var(--gap);padding:var(--gap) var(--inset) 0}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:clip;background:var(--tile);border-radius:var(--r-tile);min-height:calc(clamp(520px,46vw,692px)*var(--tile-h));padding:clamp(40px,4.2vw,58px) 20px 0;isolation:isolate}
html[data-theme=mono] .tile{outline:1px solid #000;outline-offset:-1px}
.tile.dark{background:var(--tile-dark)}
.tile .eb{margin-bottom:6px}
.t-h{font-size:calc(clamp(38px,4.4vw,64px)*var(--dscale));line-height:1.06}
.t-sub{margin-top:8px;font-size:clamp(19px,1.9vw,28px);line-height:1.18;letter-spacing:.004em;color:var(--ink)}
.t-price{margin-top:10px;font-size:clamp(15px,1.2vw,17px);color:var(--ink2)}
.tile .btns{margin-top:18px}
.t-img{flex:1;display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:0;padding-top:28px}
.t-img img{max-height:var(--mh,420px);max-width:min(78%,calc(var(--nw,900)*1.25px));object-fit:contain;filter:drop-shadow(0 34px 34px var(--shade));transition:transform .9s var(--ease-soft)}
.tile .t-img img{margin-bottom:clamp(28px,3vw,48px)}

/* split */
.hv-split .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(40px,6vw,96px) clamp(24px,4vw,56px)}
.split-copy .eb{margin-bottom:12px;font-size:15px}
.split-h{font-size:calc(clamp(44px,6vw,96px)*var(--dscale));line-height:1.02}
.split-sub{margin-top:18px;font-size:clamp(19px,1.7vw,26px);color:var(--ink2);max-width:28ch;line-height:1.25}
.split-price{margin-top:22px;display:flex;align-items:baseline;gap:12px;font-size:21px}
.split-copy .btns{justify-content:flex-start;margin-top:26px}
.split-media{position:relative;aspect-ratio:1/1.02;border-radius:var(--r-bento);background:radial-gradient(70% 60% at 50% 58%,color-mix(in oklab,var(--acc) 16%,var(--tile)),var(--tile));display:flex;align-items:center;justify-content:center;overflow:hidden}
.split-media img{max-height:72%;max-width:min(70%,calc(var(--nw,900)*1.4px));filter:drop-shadow(0 40px 40px var(--shade))}
.split-spec{position:absolute;left:22px;bottom:20px;right:22px;display:flex;gap:8px;flex-wrap:wrap}
.split-spec span{padding:6px 12px;border-radius:var(--r-chip);background:color-mix(in oklab,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-weight:500}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,13.4vw,232px);gap:var(--gap);padding:var(--gap) max(var(--gap),var(--inset));max-width:1680px;margin:0 auto}
.bt{position:relative;overflow:hidden;border-radius:var(--r-bento);background:var(--tile);padding:clamp(20px,2.2vw,34px);display:flex;flex-direction:column;isolation:isolate}
html[data-theme=mono] .bt{outline:1px solid #000;outline-offset:-1px}
.bt.dark{background:var(--tile-dark)}
.bt h3{font-size:calc(clamp(24px,2.5vw,40px)*var(--dscale));line-height:1.08}
.bt p{margin-top:6px;font-size:clamp(15px,1.2vw,19px);color:var(--ink2)}
.bt .btns{justify-content:flex-start;margin-top:16px}
.bt .bimg{position:absolute;z-index:-1;object-fit:contain;filter:drop-shadow(0 26px 28px var(--shade));transition:transform .9s var(--ease-soft)}
/* b1 · the 11.11 sale banner (2026-11-09, replaces the ASUS ROG Strix tile): a full-bleed Nano Banana scene, an open
   brand-red hexagonal box (a nod to the hexagon "S" mark) with headphones, a watch, earbuds, a gamepad and a phone
   coming out of it, the group right / bottom, the copy on the calm red space.
   The tile colour is the scene's own backdrop, so nothing flashes while the picture loads. */
html .bt.b1-sale.on-brand.on-brand{background:linear-gradient(180deg,#93101f,#c11c35);justify-content:center;padding:clamp(24px,3.4vw,56px)}
.b1-sale .sale-art{position:absolute;inset:0;z-index:-1}
.b1-sale .sale-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right bottom;transition:transform 1.2s var(--ease-soft)}
.b1-sale:hover .sale-art img{transform:scale(1.02)}
.sale-copy{position:relative;z-index:3;max-width:min(45%,460px);margin-bottom:4%;pointer-events:none}
.sale-eb{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:500;line-height:1.2;color:#fff}
.b1-sale .sale-h{margin-top:16px;font-size:clamp(88px,9.6vw,172px);line-height:.92;letter-spacing:-.045em;color:#fff;white-space:nowrap}
.b1-sale .sale-sub{margin-top:16px;font-size:clamp(17px,1.5vw,22px);line-height:1.3;color:rgba(255,255,255,.86);max-width:30ch}
.b1-sale .btns{margin-top:28px}
.b1-sale .btn{--bh:48px;padding:0 24px}
html[lang=hy] .b1-sale .sale-h{line-height:.92!important}
@media (max-width:1068px){
  .sale-copy{max-width:52%}
}
@media (max-width:734px){
  /* phones: the phone tile runs from ~0.6 to ~0.93 wide-to-tall, so the art is the group alone (cut from a 2:3 render,
     sides padded by repeating the edge pixels), pinned to the bottom with its top and sides faded into a backdrop of the
     same red; the copy keeps the top */
  html .bt.b1-sale.on-brand.on-brand{justify-content:flex-start;padding:24px;background:linear-gradient(180deg,#800e1c 0,#9a0f26 50%)}
  .sale-copy{max-width:none;margin-bottom:0}
  .b1-sale .sale-art{inset:auto 0 0;display:flex;justify-content:center}
  .b1-sale .sale-art img{width:min(100%,540px);height:auto;object-fit:fill;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 18%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
  .b1-sale .sale-h{margin-top:12px;font-size:clamp(72px,22vw,104px)}
  .b1-sale .sale-sub{margin-top:10px;font-size:16px;max-width:30ch}
  .b1-sale .btns{margin-top:16px}
  .b1-sale .btn{--bh:44px;padding:0 20px;font-size:16px}
}
@media (max-width:540px){.b1-sale .sale-art img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}}
@media (hover:none){.b1-sale:hover .sale-art img{transform:none}}

/* b1 · the lead banner (task-385): identity top-left (eyebrow chip, name, spec chips), product in the middle,
   a purchase bar along the bottom (price left, buttons right) */
.b1{grid-column:1/8;grid-row:span 3;padding:clamp(22px,2.6vw,40px)}
.b1-top{position:relative;z-index:3;pointer-events:none}
.b1 .eb{display:inline-block;padding:5px 11px;border-radius:var(--r-chip);background:color-mix(in oklab,var(--acc) 10%,transparent);font-size:13px;letter-spacing:0}
.b1 h1,.b1 .sale-h{margin-top:14px;font-size:calc(clamp(32px,3.7vw,60px)*var(--dscale));line-height:1.02}
.b1 .spec-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.b1 .spec-chips span{padding:5px 11px;border-radius:var(--r-chip);border:1px solid var(--line2);font-size:13.5px;line-height:1.3;color:var(--ink2);white-space:nowrap}
.b1 .bimg{position:relative;z-index:0;flex:1 1 0;min-height:0;width:100%;max-width:640px;margin:14px auto 16px;object-fit:contain}
.b1-buy{position:relative;z-index:3;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 12px 12px 22px;border-radius:calc(var(--r-bento) - 8px);background:color-mix(in oklab,var(--tile) 78%,transparent);border:1px solid var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none}
.b1-buy .price{font-size:clamp(22px,2vw,30px);gap:2px 10px}
.b1-buy .price .off{font-size:13px}
.b1 .b1-buy .btns{margin-top:0;gap:8px}
.b2{grid-column:8/13;grid-row:span 2}
.b2 h3{max-width:64%}
.b2 .bimg{right:6%;bottom:8%;height:74%}
/* b3 / b4 swapped (David, 2026-11-09): the Xiaomi reseller tile (b4, DOM before b3) takes the short slot under the
   purifier, the WalkingPad (b3) the wide two-row slot on the left of the second row */
.b4{grid-column:8/13;grid-row:span 1;justify-content:center}
.b3{grid-column:1/7;grid-row:span 2;padding-right:44%}
.b3 h3{font-size:calc(clamp(20px,1.8vw,28px)*var(--dscale))}
.b3 .bimg{right:5%;top:50%;translate:0 -50%;height:82%}
.b4-xi{--brand:#FF6900;--shade:rgba(120,40,0,.4)}
html .bt.b4-xi.on-brand.on-brand{background:linear-gradient(180deg,#FF8533 0,#FF6900 14%,#FF6900 68%,#E85D00 100%)}
.b4-xi h3{max-width:min(16ch,62%)}
.b4-xi .xi-go{display:inline-flex;align-items:center;gap:.4em;margin-top:14px;font-size:17px;font-weight:600;color:#fff}
.b4-xi .xi-go .chev{display:inline-block;width:.42em;height:.42em;border:solid currentColor;border-width:0 .12em .12em 0;transform:rotate(-45deg);transition:transform .3s var(--ease-out)}
.b4-xi:hover .xi-go .chev{transform:translateX(3px) rotate(-45deg)}
.b4-xi .xi-logo{position:absolute;right:clamp(20px,2.2vw,34px);bottom:clamp(20px,2.2vw,34px);color:#fff;z-index:-1}
.b4-xi .xi-logo svg{display:block;width:auto;height:clamp(84px,9vw,150px);--bm-knock:var(--brand,#C70125);transition:transform .9s var(--ease-soft)}
.b4-xi:hover .xi-logo svg{transform:scale(1.04)}
@media (min-width:1069px){
  .b3 h3{font-size:calc(clamp(24px,2.5vw,40px)*var(--dscale))}
  .b3 .bimg{right:6%;height:78%}
  .b4-xi h3{font-size:calc(clamp(20px,1.8vw,28px)*var(--dscale));max-width:min(18ch,60%)}
  .b4-xi .xi-go{margin-top:10px;font-size:16px}
  .b4-xi .xi-logo{top:50%;bottom:auto;translate:0 -50%}
  .b4-xi .xi-logo svg{height:clamp(64px,6.4vw,112px)}
}
/* b6: Sony WH-1000XM6 on a light tile (David, 2026-11-09: a product in place of the visit card, first AirPods Pro 3 on
   the dark tile, then the Sony; the black headphones need the light tile). The store's map, hours and phone are in the
   visit section further down and the top strip. */
.b6{grid-column:7/13;grid-row:span 2;padding-right:46%}
.b6 h3{max-width:none}
.b6 p{max-width:24ch}
.b6 .bimg{right:9%;top:50%;translate:0 -50%;height:84%}

/* carousel */
.hv-carousel{padding-top:clamp(16px,2vw,28px)}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(88vw,1320px);gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:calc((100vw - min(88vw,1320px))/2);overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-slide{scroll-snap-align:center;position:relative;overflow:hidden;border-radius:var(--r-bento);background:var(--tile);min-height:calc(clamp(440px,44vw,640px)*var(--tile-h));display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:clamp(28px,5vw,80px);isolation:isolate}
html[data-theme=mono] .car-slide{outline:1px solid #000;outline-offset:-1px}
.car-slide.dark{background:var(--tile-dark)}
.car-slide h2{font-size:calc(clamp(36px,4.6vw,72px)*var(--dscale));line-height:1.04}
.car-slide p{margin-top:12px;font-size:clamp(17px,1.6vw,24px);color:var(--ink2);max-width:24ch}
.car-slide .btns{justify-content:flex-start;margin-top:22px}
.car-slide .eb{margin-bottom:10px}
.car-media{display:flex;align-items:center;justify-content:center;height:100%;min-height:0}
.car-media img{max-height:420px;max-width:min(90%,calc(var(--nw,900)*1.3px));filter:drop-shadow(0 36px 36px var(--shade));transition:transform 1.2s var(--ease-out),opacity .8s}
.car-slide:not(.on) .car-media img{transform:scale(.9) translateX(30px);opacity:.5}
.car-ctl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px}
.dots{display:flex;gap:10px;padding:14px 18px;border-radius:980px;background:var(--line2)}
.dot{position:relative;width:8px;height:8px;border-radius:8px;background:var(--ink3);opacity:.55;overflow:hidden;transition:width .5s var(--ease-out),opacity .3s}
.dot.on{width:44px;opacity:1;background:color-mix(in oklab,var(--ink3) 45%,transparent)}
.dot.on::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);animation:fill 6s linear forwards}
.paused .dot.on::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.car-play{width:36px;height:36px;border-radius:50%;background:var(--line2);display:grid;place-items:center}
.car-play svg{width:12px;height:12px;fill:var(--ink)}
.car-play .i-play{display:none}.paused .car-play .i-play{display:block}.paused .car-play .i-pause{display:none}

/* cinema: sticky stage, the product grows as you scroll */
.hv-cinema{position:relative;height:240vh;background:#000;color:#f5f5f7}
.cine-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 55%,#1c1c1e 0%,#000 70%)}
.cine-stage img{position:absolute;left:50%;top:54%;height:min(62vh,820px);width:auto;max-width:none;translate:-50% -50%;transform:scale(calc(.62 + var(--p,0)*.62)) translateY(calc((1 - var(--p,0))*8vh));filter:drop-shadow(0 50px 60px rgba(0,0,0,.6))}
.cine-a,.cine-b{position:absolute;inset-inline:0;text-align:center;padding:0 var(--gut);z-index:2}
.cine-a{top:clamp(90px,14vh,150px);opacity:calc(1 - var(--p,0)*2.4);transform:translateY(calc(var(--p,0)*-60px))}
.cine-a h1{font-size:calc(clamp(44px,7vw,120px)*var(--dscale));line-height:1}
.cine-a p{margin-top:12px;font-size:clamp(19px,2vw,28px);color:#a1a1a6}
.cine-b{bottom:clamp(40px,9vh,96px);opacity:clamp(0,(var(--p,0) - .55)*3.2,1);transform:translateY(calc((1 - clamp(0,(var(--p,0) - .55)*3.2,1))*30px))}
.cine-b .price{justify-content:center;font-size:21px;margin-bottom:16px}
.cine-hint{position:absolute;bottom:26px;left:50%;translate:-50% 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#86868b;opacity:calc(1 - var(--p,0)*4)}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.sh{display:block;margin-bottom:clamp(20px,2.4vw,34px);font-weight:400}
.sh .sh-n,.sh .sh-e{display:none}
.sh .sh-t{font-family:var(--f-display);font-size:calc(clamp(26px,2.7vw,40px)*var(--dscale));line-height:1.12;letter-spacing:var(--dtr);font-stretch:var(--dst)}
.sh .sh-t b{font-weight:var(--dw);text-transform:var(--dcase)}
.sh .sh-t span{color:var(--ink2);font-weight:var(--dw)}
html[data-type=poster] .sh .sh-t span{text-transform:none;font-family:var(--f-text);font-stretch:100%;font-weight:500;letter-spacing:-.01em;font-size:.62em}
.sh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sh-more{flex:none;color:var(--link);font-size:17px;display:inline-flex;align-items:center;gap:4px;margin-bottom:clamp(20px,2.4vw,34px);white-space:nowrap}
.sh-more:hover{text-decoration:underline;text-underline-offset:.18em}
.sh-more i{display:inline-block;width:.42em;height:.42em;border:solid currentColor;border-width:0 .11em .11em 0;transform:rotate(-45deg)}
html[data-heads=eyebrow] .sh .sh-e{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
html[lang=hy][data-heads=eyebrow] .sh .sh-e{letter-spacing:.04em}
html[data-heads=eyebrow] .sh .sh-t b{display:none}
html[data-heads=eyebrow] .sh .sh-t span{color:var(--ink);font-size:1.18em}
html[data-heads=numbered] .sh .sh-n{display:block;width:64px;padding-top:10px;margin-bottom:16px;border-top:1.5px solid var(--ink);font:500 13px/1 var(--f-mono);color:var(--ink2);letter-spacing:.04em}
html[data-heads=numbered] .sh .sh-t span{display:block;font-weight:400;font-size:.62em;margin-top:6px;letter-spacing:-.01em}
html[data-heads=centered] .sh{text-align:center;margin-inline:auto}
html[data-heads=centered] .sh-row{flex-direction:column;align-items:center}
html[data-heads=centered] .sh .sh-t span{display:block;font-size:.55em;font-weight:400;margin-top:8px;letter-spacing:0}
html[data-heads=centered] .sh-more{margin-top:-14px}
html[data-heads=huge] .sh .sh-t{font-size:calc(clamp(44px,7.4vw,124px)*var(--dscale));line-height:.98;letter-spacing:calc(var(--dtr) - .015em)}
html[lang=hy][data-heads=huge] .sh .sh-t{letter-spacing:0}
html[data-heads=huge] .sh .sh-t span{display:block;font-size:max(.2em,17px);font-weight:400;letter-spacing:-.01em;margin-top:14px;font-family:var(--f-text);font-stretch:100%;text-transform:none}

/* ============================================================
   CATEGORIES
   ============================================================ */

/* ============================================================
   PROMO GRID (2-up tiles)
   ============================================================ */

/* ============================================================
   SHELVES + PRODUCT CARDS
   ============================================================ */
.shelf{position:relative}
.shelf-track{display:flex;gap:var(--gap2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px var(--rail-x) 44px;scroll-padding-inline:var(--rail-x)}
.shelf-track::-webkit-scrollbar{display:none}
.pc-w{flex:none;scroll-snap-align:start;display:flex}
html[data-radius=sharp] 
.pc{position:relative;display:flex;flex-direction:column;width:clamp(260px,22vw,316px);border-radius:var(--r-card);background:var(--c-bg);border:1px solid var(--c-bd);box-shadow:var(--c-sh);overflow:hidden;isolation:isolate;transition:box-shadow .3s var(--ease-card),transform .3s var(--ease-card),background-color .45s var(--ease),border-color .3s}
.pc-link{position:absolute;inset:0;z-index:2}
.pc-body{display:flex;flex-direction:column;padding:var(--pad) var(--pad) 0;gap:4px}
.pc-top{min-height:18px;margin-bottom:4px}
.pc-brand{display:none;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.pc-name{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:calc(var(--dtr)*.5);font-size:calc(21px*min(var(--dscale),1.05));line-height:1.18;text-transform:var(--dcase);font-stretch:var(--dst)}
.pc-spec{font-size:14px;color:var(--ink2);margin-top:2px}
.pc-chips{display:none;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc-chips li{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-chip);font-size:12.5px;color:var(--ink2)}
.pc-media{position:relative;height:clamp(210px,17vw,250px);display:flex;align-items:center;justify-content:center;min-height:0;margin:14px var(--pad) 8px}
.pc-media img{max-height:94%;max-width:92%;object-fit:contain;filter:drop-shadow(0 16px 18px var(--shade));transition:transform .7s var(--ease-soft)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px var(--pad) var(--pad);margin-top:auto;position:relative;z-index:3}
.pc-foot .btn{position:relative;z-index:3}
.pc-qa{display:none}

/* price */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:17px;font-variant-numeric:tabular-nums}
.price .now{font-weight:400}
.price .was{display:none;color:var(--ink3);font-size:.82em;text-decoration:line-through}
.price .off{display:none}
.price .dram{font-family:"Google Sans","Noto Sans Armenian",sans-serif}
html[data-price=bold] .price .now{font-weight:700;font-size:1.12em}
html[data-price=bold] .price .was{display:inline}
html[data-price=sale] .price .was{display:inline}
html[data-price=sale] .price .now{font-weight:700}
html[data-price=sale] .price.has-was .now{color:var(--brand)}
.on-dark .price.has-was .now{color:var(--brand-hi)!important}
.on-brand .price.has-was .now{color:#fff!important}
html[data-price=sale] .price .off{display:inline-block;padding:2px 7px;border-radius:var(--r-chip);background:var(--brand);color:#fff;font-size:12px;font-weight:700;letter-spacing:.01em}
.on-brand .price .off{background:#fff!important;color:var(--brand)!important}
html[data-price=tag] .price .now{display:inline-block;padding:4px 10px 3px;background:var(--brand);color:#fff;font-weight:700;letter-spacing:.01em;border-radius:min(var(--r-sm),6px)}
html[data-price=tag] .on-brand .price .now{background:#fff;color:var(--brand)}
html[data-price=tag] .price .was{display:inline}

/* badges */
.badge{display:inline-block;font-size:12px;font-weight:600;line-height:1.2;color:var(--acc)}
.badge:empty{display:none}
.on-dark .badge{color:var(--link)}
html[data-badge=chip] .badge{padding:4px 9px;border-radius:var(--r-chip);background:var(--chip);color:var(--ink)}
html[data-badge=red] .badge{padding:4px 8px 3px;background:var(--brand);color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:800;border-radius:2px}
html[lang=hy][data-badge=red] .badge{letter-spacing:.02em}
html[data-badge=outline] .badge{padding:3px 9px;border:1px solid currentColor;border-radius:var(--r-chip);color:var(--ink)}

/* card: minimal */
html[data-card=minimal] .pc{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
html[data-card=minimal] .pc-media{order:-1;margin:0;height:clamp(260px,20vw,320px);background:var(--bg2);border-radius:var(--r-card)}
html[data-theme=mono][data-card=minimal] .pc-media{outline:1px solid #000}
html[data-card=minimal] .pc-body{padding:14px 2px 0}
html[data-card=minimal] .pc-top{position:static;order:5;margin:6px 0 0}
html[data-card=minimal] .pc-name{font-size:17px;font-weight:500;font-family:var(--f-text);text-transform:none;font-stretch:100%;letter-spacing:-.01em}
html[data-card=minimal] .pc-foot{padding:6px 2px 0}
html[data-card=minimal] .pc-foot .btn{display:none}
/* card: specs */
html[data-card=specs] .pc-media{order:-1;margin:var(--pad) var(--pad) 0}
html[data-card=specs] .pc-brand{display:block;margin-top:8px}
html[data-card=specs] .pc-spec{display:none}
html[data-card=specs] .pc-chips{display:flex}
html[data-card=specs] .pc-top{position:absolute;top:var(--pad);left:var(--pad);z-index:2;margin:0}
html[data-card=specs] .pc-foot{flex-direction:column;align-items:stretch;gap:14px;padding-top:16px}
html[data-card=specs] .pc-foot .price{font-size:22px;font-weight:600}
html[data-card=specs] .pc-foot .btn{width:100%}
html[data-card=specs] .pc-foot .btn .lbl-buy{display:none}
html[data-card=specs] .pc-foot .btn .lbl-add{display:inline}
.lbl-add{display:none}
/* card: quick-add overlay */
html[data-card=quick] .pc-media{order:-1;margin:0;height:clamp(250px,19vw,300px);background:var(--bg2)}
html[data-card=quick] .pc-top{position:absolute;top:16px;left:16px;margin:0;z-index:2}
html[data-card=quick] .pc-body{padding-top:18px}
html[data-card=quick] .pc-foot .btn{display:none}
html[data-card=quick] .pc-qa{display:flex;position:absolute;left:12px;right:12px;top:calc(clamp(250px,19vw,300px) - 60px);z-index:4;transform:translateY(16px);opacity:0;transition:transform .45s var(--ease-out),opacity .3s}
html[data-card=quick] .pc-qa .btn{width:100%;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
html[data-card=quick] .pc:is(:hover,:focus-within,.demo) .pc-qa{transform:none;opacity:1}
@media (hover:none){html[data-card=quick] .pc-qa{transform:none;opacity:1}}
/* card: dark showcase */
html[data-card=dark] .pc{background:#000;border-color:transparent;box-shadow:none;--ink:#f5f5f7;--ink2:#a1a1a6;--ink3:#86868b;--line:rgba(255,255,255,.2);--chip:rgba(255,255,255,.12);--acc:var(--acc-d);--acc-h:var(--acc-hd);--acc-ink:var(--acc-ink-d);--link:var(--link-d);--shade:rgba(0,0,0,.7);color:var(--ink)}
html[data-card=dark] .pc-media{background:radial-gradient(closest-side,#2a2a2e,transparent);order:-1;margin:var(--pad) var(--pad) 0}
html[data-card=dark] .pc-top{position:absolute;top:var(--pad);left:var(--pad);margin:0;z-index:2}
html[data-card=dark] .pc .badge{color:var(--link)}
html[data-card=dark][data-theme=dark] .pc,html[data-card=dark][data-theme=graphite] .pc{background:#161617}
html[data-card=dark] .pc .price .now{color:#fff}

/* ============================================================
   BRAND CHAPTER (red) — the moodboard's red panel
   ============================================================ */
.chapter{padding:0 max(var(--gap),var(--inset));max-width:1680px;margin-inline:auto}
.chap{position:relative;overflow:hidden;border-radius:var(--r-tile);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:calc(clamp(520px,44vw,660px)*var(--tile-h));padding:clamp(36px,6vw,96px) clamp(24px,7vw,120px);isolation:isolate}
.chap::before{content:"";position:absolute;inset:auto -10% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);z-index:-1}
.chap .mark-bg{position:absolute;right:-6%;top:-12%;height:124%;width:auto;fill:rgba(0,0,0,.09);z-index:-1}
.chap h2{font-size:calc(clamp(42px,5.6vw,92px)*var(--dscale));line-height:1.02}
.chap .chap-script{display:block;font-family:"Google Sans","Noto Sans Armenian",sans-serif;font-weight:400;font-size:clamp(17px,1.5vw,21px);letter-spacing:.02em;margin-top:18px;opacity:.85}
.chap p{margin-top:16px;font-size:clamp(17px,1.5vw,22px);color:var(--ink2);max-width:30ch}
.chap .price{margin-top:22px;font-size:21px}
.chap .btns{justify-content:flex-start;margin-top:24px}
.chap-media{display:grid;place-items:center}
.chap-media img{width:min(100%,calc(var(--nw,300)*1.55px));max-height:440px;object-fit:contain;filter:drop-shadow(0 40px 40px rgba(60,0,10,.5));transition:transform 1s var(--ease-soft)}
html[data-theme=redline] .chap{background:#1d1d1f}
html[data-theme=redline] .chap .mark-bg{fill:rgba(199,1,37,.22)}

/* ============================================================
   BRANDS
   ============================================================ */
.brands{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.brands:hover .brands-track{animation-play-state:paused}
.brands-track span{flex:none;display:flex;align-items:center;height:88px;padding:0 clamp(26px,3.4vw,54px);font-family:var(--f-display);font-weight:var(--dw);font-size:clamp(26px,2.6vw,40px);color:var(--ink3);white-space:nowrap;transition:color .25s}
.brands-track svg{display:block;width:auto;height:calc(var(--lh,1)*clamp(19px,1.8vw,26px));--bm-knock:var(--bg)}
.brands-track span:hover{color:var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}
html[data-brands=grid] .brands{-webkit-mask:none;mask:none}
html[data-brands=grid] .brands-track{animation:none;width:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
html[data-brands=grid] .brands-track svg{width:min(calc(var(--lh,1)*20px*var(--ar,3)),70%);height:auto}
html[data-brands=grid] .brands-track span{display:grid;place-items:center;height:96px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(18px,1.6vw,24px);padding:0 10px}
html[data-brands=grid] .brands-track span[aria-hidden]{display:none}
html[data-brands=none] .sec-brands{display:none}

/* ============================================================
   WHY + VISIT
   ============================================================ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap2);grid-auto-rows:1fr}
.why>.rv{display:flex}.why>.rv>.why-c{flex:1}
.why-c{position:relative;padding:calc(var(--pad) + 4px);border-radius:var(--r-card);background:var(--c-bg);border:1px solid var(--c-bd);box-shadow:var(--c-sh);overflow:hidden;isolation:isolate;transition:box-shadow .3s var(--ease-card),transform .3s var(--ease-card)}
.why-c svg{width:34px;height:34px;color:var(--acc);margin-bottom:18px}
.why-c h3{font-family:var(--f-display);font-weight:var(--dw);font-size:calc(21px*min(var(--dscale),1.05));letter-spacing:calc(var(--dtr)*.5);line-height:1.2;text-transform:var(--dcase);font-stretch:var(--dst)}
.why-c p{margin-top:8px;color:var(--ink2);font-size:15.5px;line-height:1.45}
.why-c .soon{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:.02em}

.visit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 max(var(--gap),var(--inset));max-width:1680px;margin-inline:auto}
.visit-copy{padding:clamp(36px,5vw,80px) clamp(20px,4vw,64px);background:var(--tile);border-radius:var(--r-tile);display:flex;flex-direction:column;justify-content:center}
html[data-theme=mono] .visit-copy,html[data-theme=mono] .chap{outline:1px solid #000;outline-offset:-1px}
.visit-copy h2{font-size:calc(clamp(34px,3.8vw,60px)*var(--dscale));line-height:1.05}
.visit-copy .addr{margin-top:18px;font-size:clamp(19px,1.6vw,24px)}
.visit-copy .hrs{margin-top:4px;color:var(--ink2);font-size:17px}
.visit-copy .btns{justify-content:flex-start;margin-top:26px}
.visit-card{position:relative;overflow:hidden;border-radius:var(--r-tile);min-height:clamp(380px,36vw,560px);display:grid;place-items:center;isolation:isolate}
.visit-map{display:block;background:var(--bg2);min-height:clamp(380px,36vw,560px)}
.visit-map .map{position:absolute;inset:0;z-index:0;background:var(--bg2);font:inherit}
.visit-map .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:16px 16px 0 0}
.visit-map .maplibregl-ctrl-group{border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 6px 18px var(--line2)}
.visit-map .maplibregl-ctrl-group button{width:36px;height:36px}
.visit-map .maplibregl-ctrl-group button+button{border-top-color:var(--line2)}
html[data-theme=dark] .visit-map .maplibregl-ctrl-icon,html[data-theme=graphite] .visit-map .maplibregl-ctrl-icon{filter:invert(1)}
.visit-map .maplibregl-ctrl-attrib{font-size:10px}
html[data-theme=dark] .visit-map .maplibregl-ctrl-attrib,html[data-theme=graphite] .visit-map .maplibregl-ctrl-attrib{background:rgba(0,0,0,.5);color:#bbb}
html[data-theme=dark] .visit-map .maplibregl-ctrl-attrib a,html[data-theme=graphite] .visit-map .maplibregl-ctrl-attrib a{color:#ddd}
.map-chip{position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);z-index:1000;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;background:var(--card);color:var(--ink);border-radius:var(--r-card);box-shadow:0 12px 30px rgba(0,0,0,.14);max-width:calc(100% - 28px);transition:transform .25s var(--ease-soft)}
.map-chip:hover{transform:translateY(-2px)}
.map-chip .mk{flex:none;width:40px;height:40px;padding:9px 10px;border-radius:12px;background:var(--brand);fill:#fff}
.map-chip b{display:block;font-family:var(--f-display);font-weight:var(--dw);font-size:16px;line-height:1.2}
.map-chip b+span{display:block;font-size:14px;color:var(--ink2);margin-top:1px}
.map-chip .ar{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:6px;border-radius:50%;background:var(--bg2)}
.map-chip .ar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.map-chip:hover .ar{background:var(--brand);color:#fff}
.sb-pin{display:block;width:52px;height:62px;cursor:pointer}
.sb-pin span{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:var(--brand);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 10px 22px rgba(120,0,20,.38)}
.sb-pin span::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;margin-top:-1px;border:7px solid transparent;border-top:9px solid #fff;border-bottom:0}
.sb-pin svg{width:22px;height:24px;fill:#fff}
.sb-pin i{position:absolute;left:26px;top:62px;width:16px;height:6px;margin:-3px 0 0 -8px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(1px)}
.sb-pin i::before{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:var(--brand);opacity:0;animation:pin-pulse 2.8s var(--ease-soft) infinite}
@keyframes pin-pulse{0%{transform:scale(.1);opacity:.32}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.sb-pin i::before{animation:none}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--foot);color:var(--ink2);font-size:15px;line-height:1.55;padding:30px 0 26px;margin-top:var(--sec-y)}
html[data-theme=redline] .foot{--ink:#f5f5f7;--ink2:#a1a1a6;--line:#424245;color:var(--ink2)}
html[data-theme=mono] .foot{border-top:1px solid #000}
.foot-note{padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--ink3)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px 0}
.foot h4{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:10px}
.foot li{margin-bottom:9px}
.foot a:hover{text-decoration:underline;color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding-top:16px;border-top:1px solid var(--line)}

/* ============================================================
   MOTION: HOVER  (.hov = cards; buttons share the mood)
   ============================================================ */
.hov{transform-style:preserve-3d}
/* apple: shadow deepens, scale by a hair, image breathes */
html[data-hover=apple] .hov:is(:hover,.demo){box-shadow:var(--c-sh-h);transform:scale(1.016)}
html[data-hover=apple] .hov:is(:hover,.demo) :is(.pc-media img,.cat-media img){transform:scale(1.04)}
/* lift */
html[data-hover=lift] .hov{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .45s}
html[data-hover=lift] .hov:is(:hover,.demo){transform:translateY(-12px);box-shadow:0 32px 60px -22px rgba(0,0,0,.32)}
html[data-hover=lift] .btn:not(:active):is(:hover,.demo){transform:translateY(-3px);box-shadow:0 12px 24px -10px color-mix(in oklab,var(--acc) 70%,transparent)}
html[data-hover=lift][data-btn=link] .btn:hover{transform:none;box-shadow:none}
/* zoom: images push in, tiles too */
html[data-hover=zoom] .hov:is(:hover,.demo) :is(.pc-media img,.cat-media img){transform:scale(1.14)}
html[data-hover=zoom] .tile:hover .t-img img,html[data-hover=zoom] .bt:hover .bimg,html[data-hover=zoom] .chap:hover .chap-media img{transform:scale(1.07)}
html[data-hover=zoom] .btn:not(:active):is(:hover,.demo){transform:scale(1.07)}
/* sheen: a light streak crosses */
html[data-hover=sheen] :is(.hov,.btn)::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;z-index:5}
html[data-hover=sheen] :is(.hov,.btn):is(:hover,.demo)::after{left:135%;transition:left .85s var(--ease-soft)}
html[data-hover=sheen] .hov:is(:hover,.demo){box-shadow:var(--c-sh-h)}
html[data-hover=sheen][data-btn=link] .btn::after{display:none}
/* spotlight: light follows the cursor, border catches it */
html[data-hover=spotlight] .hov::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--acc),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s;pointer-events:none;z-index:6}
html[data-hover=spotlight] .hov::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--acc) 13%,transparent),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
html[data-hover=spotlight] .hov:is(:hover,.demo)::before,html[data-hover=spotlight] .hov:is(:hover,.demo)::after{opacity:1}
html[data-hover=spotlight] .btn:is(:hover,.demo){box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 22%,transparent),0 8px 30px -6px color-mix(in oklab,var(--acc) 60%,transparent)}
/* tilt: 3D, product floats over the card (buttons go magnetic) */
html[data-hover=tilt] .hov{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
html[data-hover=tilt] .hov:is(:hover,.demo){transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.025);box-shadow:var(--c-sh-h);transition:transform .12s linear,box-shadow .4s}
html[data-hover=tilt] .hov:is(:hover,.demo) .pc-media img{transform:translateZ(40px) scale(1.06)}
html[data-hover=tilt] .btn{transform:translate(var(--bx,0px),var(--by,0px));transition:transform .25s var(--ease-out),background-color .3s}
html[data-hover=tilt] .btn:active{transform:translate(var(--bx,0px),var(--by,0px)) scale(.96)}

/* ============================================================
   MOTION: SCROLL REVEAL (armed by JS; reduced motion never arms)
   ============================================================ */
.js-rv:not([data-scroll=none]):not([data-scroll=parallax]) .rv:not(.in){opacity:0}
/* "fade" = settle (2026-11-08, David: the old 28px slow fade-up read as sluggish): a short rise on the
   expo curve, opacity faster than motion, a capped stagger, and the photo inside settles from 1.06 */
.js-rv[data-scroll=fade] .rv{--d:calc(min(var(--i,0),5)*60ms);transition:opacity .55s var(--ease-soft) var(--d),translate .8s var(--ease-out) var(--d)}
.js-rv[data-scroll=fade] .rv:not(.in){translate:0 16px}
.js-rv[data-scroll=fade] .rv.in img{animation:sbx-settle 1.1s var(--ease-out) calc(var(--d,0ms) + 60ms) backwards}
@keyframes sbx-settle{from{scale:1.06}to{scale:1}}
.js-rv[data-scroll=rise] .rv{transition:opacity 1s var(--ease-out) calc(var(--i,0)*110ms),transform 1.3s var(--ease-out) calc(var(--i,0)*110ms)}
.js-rv[data-scroll=rise] .rv:not(.in){transform:translateY(110px)}
.js-rv[data-scroll=scale] .rv{transition:opacity .9s var(--ease-soft) calc(var(--i,0)*70ms),transform 1.2s var(--ease-out) calc(var(--i,0)*70ms)}
.js-rv[data-scroll=scale] .rv:not(.in){transform:scale(.88)}
.js-rv[data-scroll=scale] .rv img{transition:transform 1.6s var(--ease-out) .1s}
.js-rv[data-scroll=scale] .rv:not(.in) img{transform:scale(.7)}
.js-rv[data-scroll=blur] .rv{transition:opacity 1s var(--ease-soft) calc(var(--i,0)*80ms),filter 1.1s var(--ease-soft) calc(var(--i,0)*80ms),transform 1.2s var(--ease-out) calc(var(--i,0)*80ms)}
.js-rv[data-scroll=blur] .rv:not(.in){filter:blur(18px);transform:scale(1.04)}
.js-rv[data-scroll=clip] .rv{transition:clip-path 1.25s var(--ease-out) calc(var(--i,0)*90ms),opacity .2s}
.js-rv[data-scroll=clip] .rv:not(.in){opacity:1;clip-path:inset(0 0 100% 0)}
.js-rv[data-scroll=clip] .rv.in{clip-path:inset(0 0 0 0)}
.js-rv[data-scroll=clip] .rv img{transition:transform 1.6s var(--ease-out) .15s}
.js-rv[data-scroll=clip] .rv:not(.in) img{transform:translateY(40px) scale(1.1)}
html[data-scroll=parallax] .px{transform:translateY(calc(var(--py,0)*1px))}

/* ============================================================
   INTRO
   ============================================================ */
#intro{position:fixed;inset:0;z-index:1000;display:none;place-items:center;background:var(--brand);color:#fff;pointer-events:none}
#intro.run{display:grid}
#intro .im{display:flex;align-items:center;gap:18px;opacity:0;transform:scale(.86)}
#intro .im svg{width:64px;height:auto;fill:#fff}
#intro .im b{font-family:"Google Sans",sans-serif;font-size:44px;font-weight:600;letter-spacing:-.02em}
#intro.run.curtain .im{animation:imIn .7s var(--ease-out) forwards}
#intro.run.curtain{animation:curtain 1s var(--ease-out) .95s forwards}
@keyframes imIn{to{opacity:1;transform:none}}
@keyframes curtain{to{clip-path:inset(0 0 100% 0)}}
#intro.run.fade{background:var(--bg);animation:fadeOut .9s var(--ease-soft) .1s forwards}
#intro.run.fade .im{display:none}
@keyframes fadeOut{to{opacity:0}}
.intro-fade main,.intro-fade .nav{animation:pageIn 1.2s var(--ease-out) both}
@keyframes pageIn{from{opacity:0;filter:blur(14px);transform:scale(1.02)}}

/* ============================================================
   TEXTURE + CURSOR
   ============================================================ */
html[data-texture=grain] body::before{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-texture=grain][data-theme=dark] body::before,html[data-texture=grain][data-theme=graphite] body::before{mix-blend-mode:screen;opacity:.06}
html[data-texture=lines] body{background-image:linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:calc((min(var(--max),100vw) - 2px)/12) 100%;background-position:center}
#cur{position:fixed;left:0;top:0;z-index:2000;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid var(--ink);pointer-events:none;opacity:0;transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background-color .3s,border-color .3s,opacity .3s;mix-blend-mode:difference;border-color:#fff}
#cur.on{opacity:1}
#cur.big{width:68px;height:68px;margin:-34px 0 0 -34px;background:#fff}
#curdot{position:fixed;left:0;top:0;z-index:2001;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0}
#curdot.on{opacity:1}
@media (hover:none){#cur,#curdot{display:none}}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;z-index:900;translate:-50% 0;padding:11px 18px;border-radius:980px;background:rgba(29,29,31,.92);color:#f5f5f7;font:500 14px/1.2 system-ui,-apple-system,sans-serif;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .45s var(--ease-out);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1068px){
  .nav-links{display:none}
  .ni-menu{display:inline-flex}
  html[data-nav=black] .nav-cats{display:none}
  .why{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(140px,26vw,220px)}
  .b1{grid-column:1/7;grid-row:span 3}.b2{grid-column:1/7;grid-row:span 2}.b3{grid-column:1/7}
  .b6{grid-column:1/7;grid-row:span 2}
}
@media (max-width:734px){
  .b1{grid-row:span 4}
  .b1-buy{padding:12px 14px}
  .b1 .b1-buy .btns{width:100%}
  .b1 .b1-buy .btn{flex:1}
}
@media (max-width:834px){
  .hv-split .split{grid-template-columns:1fr}
  .split-media{aspect-ratio:1.1/1}
  .car-slide{grid-template-columns:1fr;align-content:start;text-align:center}
  .car-slide .btns{justify-content:center}
  .car-slide p{margin-inline:auto}
  .car-media{height:auto;padding-top:24px}
  .car-media img{max-height:260px}
  .chap{grid-template-columns:1fr;text-align:center}
  .chap p{margin-inline:auto}
  .chap .btns,.chap .price{justify-content:center}
  .chap-media{margin-top:28px}
  .chap-media img{max-height:300px}
  .visit{grid-template-columns:1fr}
    html[data-nav=black]{--nav-row:60px}
  html[data-nav=black] .nav-in{gap:12px}
  html[data-nav=black] .logo img{height:min(var(--logo-h),28px)}
  .util-in .u-hide{display:none}
}
@media (max-width:734px){
  :root{--fs-body:16px}
  html:not([data-nav=black]){--nav-row:min(var(--nav-h),62px)}
  .logo img{height:min(var(--logo-h),33px)}
  .langs button{padding:3px 6px}
  .why{grid-template-columns:1fr}
  .pc{width:min(78vw,290px)}
  .b4{grid-column:1/7}
  .b3{padding-right:40%}
  .foot-cols{grid-template-columns:1fr 1fr}
  html[data-nav=black] .logo{margin-right:auto}
  html[data-nav=pill] .nav-in{padding-inline:16px 10px}
  .tile{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .brands-track{animation:none}
}


/* ---- fixes after review ---- */
.on-brand.on-brand{background:var(--brand)}
html[data-theme=redline] .on-dark .price.has-was .now{color:#fff!important}
html[data-theme=redline] .on-dark .price .was{color:rgba(255,255,255,.7)}
html[data-theme=redline] .on-dark .price .off{background:#fff;color:var(--brand)}
html[data-theme=redline][data-price=tag] .on-dark .price .now{background:#fff;color:var(--brand)}
html[data-nav=black] .nav{--link:var(--link-d);--acc:var(--acc-d)}


/* PS5 Slim: the box is as white as its backdrop, so no cutout. Multiply on light, a white plate on dark. */
img[data-img="3774"]{mix-blend-mode:multiply;filter:none!important}
:is(.on-dark,html[data-theme=dark],html[data-theme=graphite],html[data-card=dark] .pc) img[data-img="3774"]{mix-blend-mode:normal;background:#fff;border-radius:var(--r-sm);padding:10px}


/* ============================================================
   SEARCH — position, highlight, button, size, placeholder
   one form (#sbx) that JS moves into the slot for the chosen position
   ============================================================ */
:root{--nav-row:var(--nav-h);--nav-eff:var(--nav-row);--sbh:50px;--sbfs:16px}
html[data-searchsize=m]{--sbh:48px;--sbfs:17px}
html[data-searchsize=l]{--sbh:50px;--sbfs:16px}
html[data-searchsize=xl]{--sbh:60px;--sbfs:18px}
html:is([data-search=center],[data-search=inline]){--nav-eff:max(var(--nav-row),calc(var(--sbh) + 18px))}
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}

/* highlight tokens live on the field itself, so a dark header can re-tint them */
:is(.sb,.ni-cmd){--sf-bg:var(--bg);--sf-bd:var(--brand);--sf-bw:2px;--sf-bdf:var(--brand);--sf-ink:var(--ink);--sf-ph:var(--ink2);--sf-go:var(--brand);--sf-goink:#fff;--sf-sh:0 6px 18px -8px color-mix(in oklab,var(--brand) 40%,transparent);--sf-shf:0 0 0 5px color-mix(in oklab,var(--brand) 17%,transparent)}
html[data-searchfx=soft] :is(.sb,.ni-cmd){--sf-bg:var(--chip);--sf-bd:transparent;--sf-bw:1px;--sf-bdf:var(--ink3);--sf-go:var(--acc);--sf-goink:var(--acc-ink);--sf-sh:0 0 0 0 transparent;--sf-shf:0 0 0 4px color-mix(in oklab,var(--ink) 9%,transparent)}
html[data-searchfx=outline] :is(.sb,.ni-cmd){--sf-bd:var(--ink3);--sf-bw:1.5px;--sf-bdf:var(--ink);--sf-go:var(--ink);--sf-goink:var(--bg);--sf-sh:0 0 0 0 transparent;--sf-shf:0 0 0 4px color-mix(in oklab,var(--ink) 10%,transparent)}
html[data-searchfx=dark] :is(.sb,.ni-cmd){--sf-bg:#1d1d1f;--sf-bd:#1d1d1f;--sf-bw:1px;--sf-bdf:#000;--sf-ink:#f5f5f7;--sf-ph:#a1a1a6;--sf-go:var(--brand);--sf-sh:0 10px 26px -12px rgba(0,0,0,.55);--sf-shf:0 0 0 5px rgba(0,0,0,.14)}
html[data-searchfx=dark]:is([data-theme=dark],[data-theme=graphite]) :is(.sb,.ni-cmd){--sf-bg:#f5f5f7;--sf-bd:#f5f5f7;--sf-ink:#1d1d1f;--sf-ph:#6e6e73;--sf-shf:0 0 0 5px rgba(255,255,255,.18)}
html[data-searchfx=glow] :is(.sb,.ni-cmd){--sf-bg:var(--card);--sf-bd:transparent;--sf-bw:2px;--sf-bdf:transparent;--sf-sh:0 12px 34px -12px color-mix(in oklab,var(--brand) 55%,transparent);--sf-shf:0 0 0 5px color-mix(in oklab,var(--brand) 15%,transparent),0 16px 40px -12px color-mix(in oklab,var(--brand) 60%,transparent)}
html[data-searchfx=glow] :is(.sb,.ni-cmd){background:linear-gradient(var(--sf-bg),var(--sf-bg)) padding-box,conic-gradient(from var(--sa),var(--brand),#ff7a45,#ffc2cf,#ff7a45,var(--brand)) border-box!important;animation:sbspin 5s linear infinite}
@keyframes sbspin{to{--sa:360deg}}
/* inside the black retail header the light variants turn dark, the dark one turns light */
html[data-nav=black] .nav :is(.sb,.ni-cmd){--sf-bg:#24262c;--sf-ink:#f5f5f7;--sf-ph:#8e8e93}
html[data-nav=black][data-searchfx=outline] .nav :is(.sb,.ni-cmd){--sf-bd:#5a5a5f;--sf-bdf:#f5f5f7;--sf-go:#f5f5f7;--sf-goink:#1d1d1f}
html[data-nav=black][data-searchfx=soft] .nav :is(.sb,.ni-cmd){--sf-bg:#2c2e35;--sf-bdf:#6e6e73}
html[data-nav=black][data-searchfx=dark] .nav :is(.sb,.ni-cmd){--sf-bg:#fff;--sf-bd:#fff;--sf-ink:#1d1d1f;--sf-ph:#6e6e73}

.sb{position:relative;display:flex;align-items:center;width:100%;height:var(--sbh);margin:0;border-radius:var(--r-chip);background:var(--sf-bg);border:var(--sf-bw) solid var(--sf-bd);color:var(--sf-ink);box-shadow:var(--sf-sh);font-family:var(--f-text);text-align:left;transition:border-color .2s,box-shadow .3s var(--ease-out),background-color .3s}
.sb:focus-within{border-color:var(--sf-bdf);box-shadow:var(--sf-shf)}
.sb-ico{display:grid;place-items:center;flex:none;width:calc(var(--sbh)*.78);padding-left:4px;color:var(--sf-ph)}
.sb-ico svg,.sb-go svg,.ni-cmd svg{width:calc(var(--sbfs)*1.22);height:calc(var(--sbfs)*1.22);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.sb-in{flex:1;min-width:0;height:100%;padding:0 10px 0 0;border:0;outline:0;background:none;color:inherit;font-size:var(--sbfs);letter-spacing:-.005em;-webkit-appearance:none;appearance:none}
.sb-in::placeholder{color:var(--sf-ph);opacity:1;transition:opacity .22s}
.sb-in.ph-out::placeholder{opacity:0}
.sb-in::-webkit-search-cancel-button,.sb-in::-webkit-search-decoration{-webkit-appearance:none}
.sb-kbd{display:none;flex:none;margin-right:12px;padding:3px 8px;border-radius:6px;border:1px solid color-mix(in oklab,var(--sf-ph) 45%,transparent);color:var(--sf-ph);font:600 12px/1.2 var(--f-text)}
.sb-go{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:calc(var(--sbh) - 2*var(--sf-bw) - 8px);min-width:calc(var(--sbh) - 2*var(--sf-bw) - 8px);margin-right:4px;padding:0;border-radius:var(--r-chip);background:var(--sf-go);color:var(--sf-goink);font:600 calc(var(--sbfs) - 1px)/1 var(--f-text);transition:filter .2s,transform .2s var(--ease-out)}
.sb-go:hover{filter:brightness(1.1)}
.sb-go:active{transform:scale(.94)}
.sb-lbl{display:none}
/* button variants */
html[data-searchbtn=round] .sb-ico{display:none}
html[data-searchbtn=round] .sb-in{padding-left:calc(var(--sbh)*.42)}
html[data-searchbtn=label] .sb-go{padding:0 calc(var(--sbfs)*1.15)}
html[data-searchbtn=label] .sb-go svg{display:none}
html[data-searchbtn=label] .sb-lbl{display:inline}
html[data-searchbtn=block] .sb-ico{display:none}
html[data-searchbtn=block] .sb-in{padding-left:calc(var(--sbh)*.42)}
html[data-searchbtn=block] .sb-go{height:100%;margin:0;padding:0 calc(var(--sbfs)*1.3);border-radius:0 var(--r-chip) var(--r-chip) 0}
html[data-searchbtn=block] .sb-lbl{display:inline}
html[data-searchbtn=iconleft] .sb-go{display:none}
html[data-searchbtn=iconleft] .sb-kbd{display:inline-block}
html:is([data-search=center],[data-search=inline],[data-search=band]) .sb-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-right:10px;padding:0 7px;border-radius:7px;background:color-mix(in oklab,var(--sf-ph) 10%,transparent);font-size:13px;line-height:1}
.sb:focus-within .sb-kbd,.sb:has(.sb-in:not(:placeholder-shown)) .sb-kbd{display:none}
/* the "/" shortcut hint is desktop-only: gone on touch screens and at tablet/phone widths (David, 2026-11-09) */
@media (hover:none),(max-width:1068px){.sb-kbd{display:none!important}}
/* the "look at me" pulse a picker change plays */
.sb.flash{animation:sbflash 1.3s var(--ease-out)}
@keyframes sbflash{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--brand) 55%,transparent)}60%{box-shadow:0 0 0 14px color-mix(in oklab,var(--brand) 0%,transparent)}}
html[data-searchfx=glow] .sb.flash{animation:sbspin 5s linear infinite,sbflash 1.3s var(--ease-out)}

/* results dropdown */
.sb-drop{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;min-width:min(440px,calc(100vw - 32px));max-height:min(70vh,580px);overflow:auto;padding:14px;border-radius:var(--r-card);background:var(--bg);color:var(--ink);border:1px solid var(--line2);box-shadow:0 28px 70px -14px rgba(0,0,0,.32);text-align:left;font-size:15px;letter-spacing:-.005em}
.sb.open .sb-drop{display:block;animation:dropIn .28s var(--ease-out)}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}}
.sb-sec+.sb-sec{margin-top:16px}
.sb-sec h6{margin:0 0 9px 4px;font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px}
.sb-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-chip);background:var(--bg2);color:var(--ink);font-size:14px;transition:background .2s,color .2s}
.sb-chip:hover{background:var(--ink);color:var(--bg)}
.sb-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.sb-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sb-cat{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:14px;transition:background .2s}
.sb-cat:hover{background:var(--bg2)}
.sb-cat svg{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sb-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;transition:background .15s}
.sb-row:hover,.sb-row.act{background:var(--bg2)}
.sb-row img{width:52px;height:42px;object-fit:contain}
.sb-n{font-weight:500;line-height:1.25}
.sb-n small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--ink3)}
.sb-n mark{background:color-mix(in oklab,var(--brand) 20%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.sb-p{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-all{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding:12px 10px 2px;border-top:1px solid var(--line2);color:var(--link);font-size:14px;font-weight:500}
.sb-all:hover{text-decoration:underline}
.sb-none{padding:10px 6px;color:var(--ink2);font-size:14.5px}
.sb-hint{display:flex;gap:16px;justify-content:flex-end;margin-top:12px;padding:10px 6px 0;border-top:1px solid var(--line2);font-size:12px;color:var(--ink3)}
.sb-hint kbd{font:600 11px/1 var(--f-text);padding:3px 6px;border-radius:5px;border:1px solid var(--line);margin-right:4px}

/* slots */
.slot-center,.slot-inline{display:none;min-width:0}
html[data-search=center] .slot-center{display:flex;flex:1;justify-content:center}
html[data-search=center] .slot-center .sb{max-width:680px}
html[data-search=center] .nav-in .nav-links{display:none}
html[data-search=center] .nav-cats{display:block}
.nav-cats .nav-links{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.2vw,34px);height:48px;font-size:var(--nav-fs);overflow-x:auto;scrollbar-width:none}
html[data-search=center][data-nav=bar] .nav-cats{border-top:1px solid var(--line2)}
html[data-search=center]:is([data-nav=pill],[data-nav=minimal]) .nav-cats{display:none}
html[data-search=center]:is([data-nav=pill],[data-nav=minimal]) .ni-menu{display:inline-flex}
html[data-search=inline] .slot-inline{display:block;flex:0 1 clamp(220px,24vw,360px)}
@media (max-width:1440px){html[data-search=inline] .nav-in .nav-links{display:none}html[data-search=inline] .ni-menu{display:inline-flex}html[data-search=inline] .slot-inline{flex:1 1 auto;max-width:520px;margin-left:auto}}
html:is([data-search=center],[data-search=inline],[data-search=command]) .ni-search{display:none}

/* command button in the header */
.ni-cmd{display:none;align-items:center;gap:10px;height:calc(var(--sbh) - 8px);min-width:clamp(210px,20vw,300px);padding:0 8px 0 14px;border-radius:var(--r-chip);background:var(--sf-bg);border:var(--sf-bw) solid var(--sf-bd);color:var(--sf-ph);box-shadow:var(--sf-sh);font:400 var(--nav-fs)/1 var(--f-text);transition:border-color .2s,box-shadow .3s}
.ni-cmd:hover{border-color:var(--sf-bdf);box-shadow:var(--sf-shf)}
.ni-cmd kbd{margin-left:auto;padding:4px 7px;border-radius:6px;border:1px solid color-mix(in oklab,var(--sf-ph) 40%,transparent);font:600 11px/1 var(--f-text);color:var(--sf-ph)}
html[data-search=command] .ni-cmd{display:inline-flex}

/* band under the header */
.search-band{display:none;padding:clamp(30px,4.4vw,64px) 0 clamp(22px,3vw,40px);text-align:center}
html[data-search=band] .search-band{display:block}
.search-band h2{font-size:calc(clamp(28px,3.4vw,52px)*var(--dscale));line-height:1.08;margin-bottom:clamp(16px,2vw,26px)}
.slot-band{max-width:780px;margin:0 auto}
.slot-band .sb,.slot-panel .sb{--sbh:var(--sbh-b,60px);--sbfs:var(--sbfs-b,17px)}
html[data-searchsize=m]{--sbh-b:58px;--sbfs-b:17px}html[data-searchsize=l]{--sbh-b:60px;--sbfs-b:17px}html[data-searchsize=xl]{--sbh-b:70px;--sbfs-b:19px}
.band-pop{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}

/* floating */
.slot-float{display:none;position:fixed;left:50%;bottom:22px;z-index:120;width:min(600px,100% - 320px);transform:translateX(-50%)}
html[data-search=float] .slot-float{display:block}
.slot-float .sb{box-shadow:0 22px 50px -12px rgba(0,0,0,.38),var(--sf-sh)}
.slot-float .sb:focus-within{box-shadow:0 22px 50px -12px rgba(0,0,0,.38),var(--sf-shf)}
.slot-float .sb-drop{top:auto;bottom:calc(100% + 10px)}
html[data-search=float] .foot{padding-bottom:110px}

/* Apple icon -> panel under the header */
.sp{position:fixed;left:0;right:0;top:var(--sp-top,64px);z-index:99;max-height:calc(100vh - var(--sp-top,64px));overflow:auto;padding:clamp(24px,3vw,40px) 0 clamp(28px,3.5vw,48px);background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line2);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .45s var(--ease-out),visibility 0s .45s}
.sp-on .sp{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sp-in{width:min(780px,100% - 2*var(--gut));margin:0 auto}
.sp-scrim{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.sp-on .sp-scrim{opacity:1;visibility:visible;transition-delay:0s}
/* command palette */
.cm{position:fixed;inset:0;z-index:400;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.cm-on .cm{opacity:1;visibility:visible;transition-delay:0s}
.cm-box{width:min(680px,100% - 32px);max-height:76vh;overflow:auto;padding:14px;border-radius:var(--r-card);background:var(--bg);color:var(--ink);box-shadow:0 40px 100px rgba(0,0,0,.45);transform:scale(.97) translateY(-8px);transition:transform .35s var(--ease-out)}
.cm-on .cm-box{transform:none}
/* in the panel and the palette the results are part of the sheet, always shown */
:is(.slot-panel,.slot-modal) .sb-drop{position:static;display:block;min-width:0;max-height:none;margin-top:6px;padding:16px 2px 2px;border:0;border-radius:0;box-shadow:none;background:transparent;animation:none}
.slot-modal .sb{--sbh:calc(var(--sbh-b,60px) - 4px);--sbfs:var(--sbfs-b,17px)}
:is(.slot-panel,.slot-modal,.slot-band) .sb-drop .sb-hint{display:none}
.slot-modal .sb-drop .sb-hint{display:flex}

@media (max-width:1068px){html[data-search=center] .nav-cats{display:none}html[data-search=center] .ni-menu{display:inline-flex}}
@media (max-width:734px){
  html[data-search=center] .nav-in{flex-wrap:wrap;height:auto;padding:8px 0 10px;row-gap:8px}
  html[data-search=center][data-nav=pill] .nav-in{padding:8px 14px 10px}
  html[data-search=center] .slot-center{order:9;flex:0 0 100%}
  html[data-search=center] .slot-center .sb{max-width:none}
  html[data-searchsize=xl] .slot-center .sb{--sbh:52px;--sbfs:16px}
  html[data-search=center][data-nav=pill] .nav{border-radius:26px}
  html[data-search=center][data-nav=pill] main{padding-top:150px}
  html[data-search=inline] .slot-inline{display:none}
  html:is([data-search=inline],[data-search=command]) .ni-search{display:inline-flex}
  html[data-search=command] .ni-cmd{display:none}
  .slot-float{left:14px;right:80px;width:auto;transform:none;bottom:14px}
  .sb-cats{grid-template-columns:repeat(2,1fr)}
  .sb-drop{min-width:0}
  html[data-searchbtn=label] .sb-go,html[data-searchbtn=block] .sb-go{padding:0 14px}
}

/* ============================================================
   RAILS: budget ladder + categories (horizontal scroll, edge-to-edge like the shelves)
   ============================================================ */
.why-c svg,.ni-theme svg,.band-go svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bud,.cats{position:relative}
.rail{display:grid;grid-auto-flow:column;gap:var(--gap2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px var(--rail-x) 30px;scroll-padding-inline:var(--rail-x)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;min-width:0}

/* categories: big soft square, product photo, name under it */
.cats-row{grid-auto-columns:calc((min(var(--max),100vw - 2*var(--gut)) - 4*var(--gap2))/5)}
.cat{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cat-media{width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-card);background:var(--tile);overflow:hidden;transition:background .35s var(--ease)}
.cat-media img{width:66%;height:66%;object-fit:contain;transition:transform .6s var(--ease-out)}
.cat b{font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);font-size:clamp(16px,1.35vw,20px);letter-spacing:-.01em;line-height:1.2}
.cat-media{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background .35s var(--ease)}
.cat b{position:relative}
/* no arrow: a red underline grows out from the middle of the name (David, task-389) */
.cat b::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transition:transform .38s var(--ease-out)}
.cat:is(:hover,:focus-visible) .cat-media{transform:translateY(-6px);box-shadow:0 24px 40px -26px var(--shade),0 2px 6px -2px var(--line2)}
.cat:is(:hover,:focus-visible) .cat-media img{transform:scale(1.06)}
.cat:is(:hover,:focus-visible) b::after{transform:scaleX(1)}
.cat:focus-visible{outline:none}
.cat:focus-visible .cat-media{outline:2px solid var(--acc);outline-offset:3px}
@media (hover:none){.cat:hover .cat-media{transform:none;box-shadow:none}.cat:hover b::after{transform:scaleX(0)}}
html[data-theme=mono] .cat-media{outline:1px solid #000;outline-offset:-1px}
@media (max-width:1068px){.cats-row{grid-auto-columns:calc((100vw - 2*var(--gut) - 3*var(--gap2))/3.4)}}
@media (max-width:640px){.cats-row{grid-auto-columns:calc((100vw - 2*var(--gut) - var(--gap2))/2.3)}}

/* budget: one card per price band, in-stock bar, three picks, "see all" */
.bands{grid-auto-columns:calc((min(var(--max),100vw - 2*var(--gut)) - 3*var(--gap2))/4)}
.band{display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:var(--r-card);background:var(--tile);color:var(--ink);border:1px solid transparent;transition:border-color .25s}
.band:hover{border-color:color-mix(in oklab,var(--acc) 45%,transparent)}
html[data-theme=mono] .band{border-color:#000}
.band-h{display:block}
.band-p{display:block;font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);font-size:clamp(19px,1.6vw,23px);letter-spacing:var(--dtr);white-space:nowrap;font-variant-numeric:tabular-nums}
.band-p .dram{font-style:normal;font-weight:400;opacity:.55;font-family:"Google Sans","Noto Sans Armenian",sans-serif}
.band-n{display:block;margin-top:4px;font-size:14px;color:var(--ink2)}
.band-n b{color:var(--acc);font-weight:700}
.band-m{display:block;height:6px;margin:14px 0 18px;border-radius:3px;background:var(--line2);overflow:hidden}
.band-m i{display:block;height:100%;width:calc(max(var(--w),.04)*100%);border-radius:3px;background:var(--acc)}
.band ul{display:grid;grid-template-rows:repeat(3,64px);gap:10px;margin:0 0 20px}
.band li a{display:grid;grid-template-columns:64px 1fr;column-gap:12px;align-items:center;height:64px}
.band li img{width:64px;height:64px;padding:6px;object-fit:contain;border-radius:var(--r-sm);background:var(--thumb,#fff)}
.band li .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.3}
.band li .price{margin-top:3px;font-size:15px;flex-wrap:nowrap;gap:0 7px;white-space:nowrap}
.band li .price .off{display:none}
.band li a:hover .nm{color:var(--acc)}
/* "See all": a soft tinted pill, the arrow slides on hover (task-385; was an outlined box with a red square) */
.band-go{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:color-mix(in oklab,var(--acc) 9%,transparent);color:var(--acc);font-weight:600;font-size:14.5px;transition:background .2s,color .2s}
.band-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.band-go:hover{background:var(--acc);color:var(--acc-ink)}
.band-go:hover svg{transform:translateX(3px)}
html[data-radius=sharp] .band-go{border-radius:0}
@media (max-width:1068px){.bands{grid-auto-columns:calc((100vw - 2*var(--gut) - var(--gap2))/2.4)}}
@media (max-width:640px){.bands{grid-auto-columns:84%}}

/* dark / light switch in the header */
.ni-theme .i-sun{display:none}
html[data-theme=dark] .ni-theme .i-moon,html[data-theme=graphite] .ni-theme .i-moon{display:none}
html[data-theme=dark] .ni-theme .i-sun,html[data-theme=graphite] .ni-theme .i-sun{display:block}
.ni-theme svg{transition:transform .5s var(--ease-out)}
.ni-theme:hover svg{transform:rotate(-20deg)}

/* ============================================================
   THEME "sale": the brand book's sale-post palette. Warm grey page, white cards,
   #343434 ink; brand red is the only bright colour (top strip, prices, badges,
   main buttons, footer), wine #8F011B for hover and the shelf's dark edge.
   ============================================================ */
html[data-theme=sale] .util{display:block;background:var(--brand);color:#fff}
html[data-theme=sale] .price .now{color:var(--brand)}
html[data-theme=sale] :is(.on-dark,.on-brand) .price .now{color:inherit}
html[data-theme=sale] .on-brand.on-brand{background:linear-gradient(180deg,#D33955 0,var(--brand) 14%,var(--brand) 68%,#8F011B 100%)}
html[data-theme=sale] .foot{--ink:#fff;--ink2:rgba(255,255,255,.95);--ink3:rgba(255,255,255,.86);--line:rgba(255,255,255,.28);--line2:rgba(255,255,255,.16);color:var(--ink2)}
/* dark themes keep the brand-red top strip (it used to vanish: .util is display:none outside sale) and a legible footer */
html:is([data-theme=dark],[data-theme=graphite]) .util{display:block;background:var(--brand);color:#fff}
html:is([data-theme=dark],[data-theme=graphite]) .foot{--ink2:#c7c7cc;--ink3:#a9a9b0}
.foot-legal{font-size:15px}

/* task-329: invisible stretched link on bento tiles without a buy button; brand logos are links now */
.bt-link{position:absolute;inset:0;z-index:2}
/* whole-tile links (David, 2026-11-08): buttons and the phone link sit above the tile link; the copy around them lets clicks through to it */
:is(.bt,.chap) .btns{position:relative;z-index:3;pointer-events:none}
:is(.bt,.chap) .btns a{pointer-events:auto}
:is(.bt,.chap):has(>.bt-link){cursor:pointer}
.brands-track a{display:flex;align-items:center;color:inherit}

/* burger between the logo and the search, icon only, at every width (David, task-385); it opens the category overlay */
html .nav-in>.ni-menu{display:inline-flex;flex:none;width:40px;height:40px;margin-inline:-6px;border-radius:999px;opacity:1;transition:background-color .2s}
html .nav-in>.ni-menu:hover{background:var(--chip)}
html .nav-in>.ni-menu svg{width:22px;height:22px;stroke-width:1.7}

/* the shop's Catalog dropdown, opened by the burger (task-385; same look as the app's .menu in design-a.css) */
/* the catalog panel + photo category row: src/components/shop/mega.css, inlined by build.py (task-389) */
html.catm-on .nav-in>.ni-menu{background:var(--chip)}
@media (max-width:820px){html.catm-on{overflow:hidden}}
/* the burger sits at the start of the category row; the top bar keeps one only where that row is hidden */
@media (min-width:1069px){html[data-search=center][data-nav=bar] .nav-in>.ni-menu{display:none}}


/* ============================================================
   ONE HEADER FOR EVERY PAGE (David, task-385): the same box as the shop's header (smartbox app
   src/components/shop/design-a.css §3 + §8). Top strip, logo, burger, search, theme, languages,
   account, cart, then the category row. Keep the two in step.
   ============================================================ */
.util{font-size:14.5px}
html:not([data-nav=black]){--nav-row:80px}
html[data-search=center]{--sbh:52px;--sbfs:17px}
.nav-in{width:min(1240px,100% - 2*var(--gut));gap:clamp(10px,1.8vw,24px)}
.logo img{height:36px}
html[data-search=center] .slot-center{flex:1 1 360px}
.nav-icons{gap:6px}
.nav-icons .ni{width:40px;height:40px;min-width:0;border-radius:50%;opacity:1;color:var(--ink);transition:background-color .2s}
.nav-icons .ni:hover{background:var(--line2)}
.nav-icons .ni svg{width:22px;height:22px;stroke-width:1.6}
.bag-n{top:1px;right:-1px;bottom:auto;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--brand);color:#fff;font-size:13px;font-weight:600;line-height:20px}
.nav-cats .nav-links{width:min(1240px,100% - 2*var(--gut));margin-inline:auto;font-size:16px}
.langs button{font-size:14px;padding:4px 9px}
@media (max-width:1100px){.nav-in{gap:10px}}
@media (max-width:820px){
  .util-in{gap:14px;min-height:40px}
  .util-in .u-hide{display:none}
  html:not([data-nav=black]){--nav-row:56px}
  html[data-search=center]{--sbh:46px;--sbfs:16px}
  html[data-search=center] .nav-in{flex-wrap:wrap;height:auto;padding:8px 0 10px;gap:8px 6px}
  html[data-search=center] .slot-center{order:9;flex:1 0 100%}
  html[data-search=center] .slot-center .sb{max-width:none}
  .logo img{height:26px}
  .nav-icons{margin-left:auto;gap:0}
  .nav-icons .ni,html .nav-in>.ni-menu{width:44px;height:44px}
}
/* task-418: <=820 the segmented languages give way to the .lang-dd dropdown; the theme switch stays (end of file) */
/* phones (David, 2026-11-09): a bottom bar, app style. The header is one row (logo + icons); the burger and the search
   sit in a bar fixed to the bottom of the screen (.mbar is its background). Tapping the search keeps the field in the
   bar (above the keyboard) and opens the results full-screen above it (html.sbm-on); the arrow or Back closes it. Same rule in the shop header (src/components/shop/design-a.css §8 + search-box.tsx). */
.mbar,.sbm-x{display:none}
@media (max-width:820px){
  html[data-search=center]{--mbar:calc(62px + env(safe-area-inset-bottom));--mnav:var(--bg2)}
  html[data-search=center]:is([data-theme=dark],[data-theme=graphite]){--mnav:#1c1c1e}
  html[data-search=center] body{padding-bottom:var(--mbar)}
  /* no backdrop-filter on the header here: it would make it the containing block of the fixed bar items */
  html[data-search=center] .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--mnav)}
  html[data-search=center] .nav-in{flex-wrap:nowrap;height:var(--nav-row);padding:0}
  html[data-search=center] .nav-in>.ni-menu{position:fixed;z-index:3;left:max(8px,calc(env(safe-area-inset-left) + 8px));bottom:calc(9px + env(safe-area-inset-bottom));margin:0}
  html[data-search=center] .slot-center{position:fixed;z-index:3;left:max(58px,calc(env(safe-area-inset-left) + 58px));right:max(16px,calc(env(safe-area-inset-right) + 16px));bottom:calc(8px + env(safe-area-inset-bottom))}
  /* before a.js moves the search form into .slot-center it sits in the bar position already: no 46px layout shift (CLS) when it moves */
  html[data-search=center] body>.sb{position:fixed;z-index:101;width:auto;left:max(58px,calc(env(safe-area-inset-left) + 58px));right:max(16px,calc(env(safe-area-inset-right) + 16px));bottom:calc(8px + env(safe-area-inset-bottom))}
  html[data-search=center] .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:99;height:var(--mbar);background:var(--mnav);border-top:1px solid var(--line2)}
  html[data-search=center] .toast{bottom:calc(var(--mbar) + 14px)}
  /* the search sheet */
  /* the search sheet: the field STAYS in the bottom bar (David, 2026-11-09). While it is open the bar rides on the
     on-screen keyboard (--kb, --vvt from visualViewport: a.js kbFit, html.kb-on), the burger turns into a back arrow,
     and the results fill the screen above the bar, bottom-aligned so the first rows sit next to the field. */
  html.sbm-on{overflow:hidden;--kbar:var(--mbar)}
  html.sbm-on.kb-on{--kbar:calc(var(--kb) + 62px)}
  html.sbm-on .nav-in>.ni-menu{visibility:hidden}
  html.sbm-on.kb-on .mbar{bottom:var(--kb);height:62px}
  html.sbm-on.kb-on[data-search=center] .slot-center{bottom:calc(var(--kb) + 8px)}
  /* task-420: the results are a bottom sheet like the shop's filters (rounded top, grab pill, a gap at the top over a
     scrim); the scrim is this ::before (a tap on it closes: a.js), the bar under the sheet takes the sheet's colour */
  html.sbm-on[data-search=center] .slot-center::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.46);animation:sbmFade .25s ease-out}
  html.sbm-on[data-search=center] .mbar{background:var(--card);border-top-color:transparent}
  html.sbm-on[data-search=center] .slot-center.out::before{opacity:0;transition:opacity .18s}
  html.sbm-on .sbm-x{display:grid;place-items:center;position:absolute;left:-50px;top:1px;width:44px;height:44px;border-radius:50%;color:var(--ink)}
  html.sbm-on .sbm-x svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html.sbm-on .slot-center>.sb-drop{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:auto;bottom:calc(var(--kbar) - 1px);min-width:0;max-height:calc(100dvh - var(--kbar) - var(--vvt,0px) - 56px);margin:0;padding:26px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:24px 24px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.12);background:var(--card);animation:sbmUp .3s cubic-bezier(.2,.7,.2,1)}
  html.sbm-on .slot-center>.sb-drop::before{content:"";position:absolute;left:50%;top:10px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  html.sbm-on .slot-center>.sb-drop>*{flex:none}
  html.sbm-on .slot-center>.sb-drop>:first-child{margin-top:auto}
}

.nav .sb{--sf-sh:none}
/* phones: 24px circles (were 30), the tap area stays ~44px tall through an invisible ring */
@media (max-width:820px){.util-in .u-msg a{width:24px;height:24px}.util-in .u-msg a::after{content:"";position:absolute;inset:-10px -4px}.util-in .u-msg svg{width:15px;height:15px}}

/* prices in Inter (David, task-385): Google Sans's figures read poorly at card and budget-row sizes; the dram sign
   stays in Google Sans / Noto Sans Armenian (.price .dram). Same price face as the shop pages (app --f-price). */
:root{--f-price:"Inter","Inter Fallback","Google Sans","Noto Sans Armenian",system-ui,sans-serif}
:is(.price,.sb-p,.band-p){font-family:var(--f-price);font-variant-numeric:tabular-nums}
.band-p{letter-spacing:-.01em}

.price .was{font-size:.88em;color:var(--ink2)}

/* ---------- task-387 (David, 2026-11-08): shared with the shop pages ----------
   a discounted final price is green everywhere (full prices keep the brand red), the footer is a darker red,
   and the footer credits gsd.club */
html[data-price] .price.has-was .now{color:#17804f}
html:is([data-theme=dark],[data-theme=graphite])[data-price] .price.has-was .now,.on-dark .price.has-was .now{color:#4cc38a!important}
html[data-theme=sale]{--foot:#9a0120}
.foot-copy{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 16px}.foot-links a,.foot-link-btn{color:inherit;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}.foot-links a:hover,.foot-link-btn:hover{text-decoration-color:currentColor}
.foot .foot-by{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}
.foot .foot-by:hover{text-decoration-color:currentColor}

/* ============================================================
   PHONE + TABLET POLISH (task-322). Everything below is inside a <=1068px query or a hover:none
   query, so the desktop (>=1069px, mouse) renders exactly as before.
   ============================================================ */
@media (max-width:1068px){
  /* notch: in landscape the side insets grow; the page gutter, rails and bento follow them */
  :root{--gut:max(clamp(16px,4vw,44px),env(safe-area-inset-left),env(safe-area-inset-right));--rail-x:max(var(--gap),var(--inset),env(safe-area-inset-left))}
  .bento,.chapter,.visit{padding-inline:max(var(--gap),var(--inset),env(safe-area-inset-left)) max(var(--gap),var(--inset),env(safe-area-inset-right))}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom))}
  .foot{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  a,button,input{touch-action:manipulation}
  /* tablet bento: the half-width tile (WalkingPad since the 2026-11-09 swap) shares its row with the AirPods tile */
  .b6{grid-column:4/7}
  /* calmer section rhythm (was 120-150px of air between a rail and the next heading) */
  .sec{padding-block:32px 12px}
  .sec>.rail{padding-bottom:22px}
  .shelf-track{padding-bottom:30px}
  .brands-track span{height:72px}
  .foot{margin-top:52px}
  .visit{margin-top:28px}
  /* why cards (2 columns here, 1 on phones): the icon beside the text, not on a line of its own above it */
  .why-c{display:grid;grid-template-columns:28px 1fr;align-content:start;column-gap:14px;padding:18px 18px 20px}
  .why-c svg{width:28px;height:28px;margin:0;grid-row:span 3}
  .why-c h3{font-size:18px;align-self:center}
  .why-c p{margin-top:4px;font-size:14.5px}
  /* touch-sized targets on phones and tablets (>=40px): small buttons (card Buy, purifier Buy), search chips,
     footer links + languages, the hero phone link, header languages, the map's zoom buttons */
  .btn.sm{--bh:40px;padding:0 18px}
  .sb-chip{padding:11px 14px}
  .sb-cat{padding:11px 10px;min-height:44px}
  .sb-row{min-height:56px}
  .sb-all{align-items:center;min-height:48px;padding-block:4px 0}
  .foot ul a,.foot .foot-by{display:inline-block;padding-block:9px;margin-block:-9px}
  .foot ul a{min-width:44px}
  /* the header search's submit stays 34px to the eye; an invisible ring takes its hit area to 44px */
  .sb-go{position:relative}
  .sb-go::after{content:"";position:absolute;inset:-5px;border-radius:50%}
  .util-in>a{padding-block:9px;margin-block:-9px}
  .nav-icons .langs button{min-height:40px}
  .nav .logo{min-height:44px}
  .visit-map .maplibregl-ctrl-group button{width:40px;height:40px}
  /* dark themes: brand red #E0153A on the dark tiles is ~2.2:1, so small red text (eyebrows, "in stock" counts,
     "See all") takes the theme's link red (#FF5A72, ~4.6:1) */
  html:is([data-theme=dark],[data-theme=graphite]) :is(.b1 .eb,.visit-copy .eb,.band-n b,.band-go){color:var(--link)}
  html:is([data-theme=dark],[data-theme=graphite]) .band-go{background:color-mix(in oklab,var(--link) 13%,transparent)}
}
@media (max-width:734px){
  /* one rhythm: ~56px between a block's content and the next heading (was 100-130px) */
  :root{--gap2:14px}
  .sec{padding-block:28px 12px}
  .sec>.rail{padding-bottom:18px}
  .shelf-track{padding-bottom:24px}
  .brands-track span{height:64px}
  .sh{margin-bottom:18px}
  .foot{margin-top:44px}
  /* bento: tiles keep their heights, but the Xiaomi tile hugs its copy instead of a 290px orange slab */
  .bento{grid-auto-rows:auto}
  .bento>.bt{grid-row:auto}
  .b6{grid-column:1/7}
  .b1{height:calc(4*clamp(140px,26vw,220px) + 3*var(--gap))}
  .b2,.b6{height:calc(2*clamp(140px,26vw,220px) + var(--gap))}
  /* phones: the Sony a touch smaller, so the struck-out price beside it stays clear of the ear cup */
  .b6 .bimg{right:4%;height:70%}
  .b3{height:clamp(140px,26vw,220px)}
  .b4{min-height:clamp(140px,26vw,220px);justify-content:center;padding-right:104px}
  .b4-xi h3{max-width:none}
  .b4-xi .xi-go{font-size:16px;white-space:nowrap}
  .b4-xi .xi-logo{top:50%;bottom:auto;translate:0 -50%}
  .b4-xi .xi-logo svg{height:68px}
  /* store map: a phone-sized window, not 380px of map between the copy and the footer */
  .visit-card,.visit-map{min-height:300px}
  /* why: one column of compact rows, not six 200px boxes of equal height */
  .why{grid-auto-rows:auto;gap:10px}
  .foot-cols{gap:20px 16px}
}
@media (max-width:640px){
  /* category rail: ~2.6 tiles in view so the row reads as a scroller of many, names one size down */
  .cats-row{grid-auto-columns:calc((100vw - var(--rail-x) - 2*var(--gap2))/2.6)}
  .cat{gap:10px}
  .cat b{font-size:14px}
}
@media (max-width:420px){
  .b1 .b1-buy .btn{padding:0 12px;font-size:16px}
  .b1-buy{padding:12px}
}
@media (max-width:340px){
  /* 320 AM: "Մանրամասն" otherwise touches the pill's edges */
  .b1 .b1-buy .btn{padding:0 10px;font-size:15px}
}
@media (max-width:360px){
  .cat b{font-size:13px}
  .b4{padding-right:84px}
  .b4-xi .xi-logo svg{height:56px}
}
/* touch: no hover state left stuck after a tap */
@media (hover:none){
  html[data-hover] .hov:hover{transform:none;box-shadow:var(--c-sh)}
  html[data-hover] .hov:hover :is(.pc-media img,.cat-media img){transform:none}
  .btn:hover{background:var(--acc)}
  .btn.alt:hover{background:transparent;color:var(--link)}
  .band:hover{border-color:transparent}
  .band li a:hover .nm{color:inherit}
  .band-go:hover{background:color-mix(in oklab,var(--acc) 9%,transparent);color:var(--acc)}
  html:is([data-theme=dark],[data-theme=graphite]) .band-go:hover{background:color-mix(in oklab,var(--link) 13%,transparent);color:var(--link)}
  .band-go:hover svg{transform:none}
  .cat:hover .cat-media img{transform:none}
  .b4-xi:hover .xi-go .chev{transform:rotate(-45deg)}
  .b4-xi:hover .xi-logo svg{transform:none}
  .map-chip:hover{transform:none}
  .map-chip:hover .ar{background:var(--bg2);color:inherit}
  .sb-chip:hover{background:var(--bg2);color:var(--ink)}
  .nav-icons .ni:hover{background:none}
  .brands:hover .brands-track{animation-play-state:running}
  /* no keyboard on a touch phone: drop the arrow/enter/esc legend under the results */
  .sb-drop .sb-hint,.slot-modal .sb-drop .sb-hint{display:none}
}
@media (min-width:735px) and (max-width:1068px){
  /* tablet: the Xiaomi tile spans the row (one row high), the WalkingPad sits half width beside the visit card */
  .b4{grid-column:1/7;grid-row:span 1}
  .b3{grid-column:1/4;grid-row:span 2;padding-right:clamp(20px,2.2vw,34px)}
  .b3 .bimg{top:auto;bottom:8%;translate:none;right:8%;height:58%}
  .b6{padding-right:clamp(20px,2.2vw,34px)}
  .b6 p{display:none}
  .b6 .bimg{top:auto;bottom:7%;translate:none;right:10%;height:56%}
  .b4-xi .xi-logo{top:50%;bottom:auto;translate:0 -50%}
  .b4-xi .xi-logo svg{height:clamp(64px,10vw,96px)}
}

.foot-brands{display:flex;flex-wrap:wrap;gap:6px 18px;padding:4px 0 20px;font-size:14px}.foot-brands a{color:var(--ink2,#6e6e73)}.foot-brands a:hover{text-decoration:underline}

/* ============================================================
   PHONE HEADER (task-418, David 2026-11-10). <=820px the header row is ~20% bigger (row 56 -> 68, logo 26 -> 31,
   icons 22 -> 26) and holds, left of the account icon: the dark/light switch, then a language dropdown
   (<details class=lang-dd>, a.js closes it on an outside tap / Escape). Wider screens keep the segmented RU/ՀԱՅ/EN pill.
   Same block in the shop header (src/components/shop/design-a.css, lang-dropdown.tsx).
   ============================================================ */
.lang-dd{display:none}
.lang-dd .lf{flex:none;width:22px;height:22px;border-radius:50%;background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang-dd .lf-en{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='t'><path d='M30 15h30v15zv15H0zH0V0zV0h30z'/></clipPath><path fill='%23012169' d='M0 0h60v30H0z'/><path stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/><path stroke='%23C8102E' stroke-width='4' clip-path='url%28%23t%29' d='M0 0l60 30m0-30L0 30'/><path stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/><path stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/></svg>")}
.lang-dd .lf-ru{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><path fill='%23fff' d='M0 0h9v2H0z'/><path fill='%230039A6' d='M0 2h9v2H0z'/><path fill='%23D52B1E' d='M0 4h9v2H0z'/></svg>")}
.lang-dd .lf-hy{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><path fill='%23D90012' d='M0 0h9v2H0z'/><path fill='%230033A0' d='M0 2h9v2H0z'/><path fill='%23F2A800' d='M0 4h9v2H0z'/></svg>")}
@media (max-width:820px){
  html:not([data-nav=black]){--nav-row:68px}
  .logo img{height:31px}
  .nav-icons .ni{width:48px;height:48px}
  .nav-icons .ni svg{width:26px;height:26px}
  .bag-n{min-width:21px;height:21px;line-height:21px;font-size:13.5px}
  .nav-icons .langs{display:none!important}
  .lang-dd{display:block;position:relative;flex:none}
  .lang-dd summary{list-style:none;display:flex;align-items:center;gap:5px;height:48px;padding:0 6px 0 9px;border-radius:999px;cursor:pointer;color:var(--ink);font-size:15px;font-weight:600;-webkit-tap-highlight-color:transparent;user-select:none}
  .lang-dd summary::-webkit-details-marker{display:none}
  .lang-dd[open] summary{background:var(--line2)}
  .lang-dd .ld-chev{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  .lang-dd[open] .ld-chev{transform:rotate(180deg)}
  .ld-menu{position:absolute;right:-52px;top:calc(100% + 6px);z-index:120;min-width:200px;padding:6px;border-radius:18px;background:var(--card,var(--bg));border:1px solid var(--line2);box-shadow:0 18px 40px -16px rgba(0,0,0,.35)}
  .ld-menu a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--ink);font-size:16px;font-weight:500}
  .ld-menu a b{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink2)}
  .ld-menu a[aria-current=true]{background:var(--chip,var(--line2))}
}
/* phones: the 11.11 headline. A generic `.b1 .sale-h` rule (later in the file) capped it at 32px; now ~3x (David) */
@media (max-width:734px){.bt.b1-sale .sale-h{font-size:clamp(84px,25vw,120px);line-height:.92}}
@media (max-width:399px){.lang-dd .ld-c{display:none}.lang-dd summary{padding:0 4px 0 8px}}
@media (max-width:359px){.nav-icons .ni{width:42px;height:42px}.nav-icons .ni svg{width:24px;height:24px}.logo img{height:27px}}
/* task-417: desktop CLS. The search form sits between the header and <main> in the markup until a.js moves it into .slot-center; out of flow until then, so <main> does not jump up by the form's height (~52px). Phones have their own fixed-bar rule above. */
@media (min-width:821px){html[data-search=center] body>.sb{position:absolute;top:0;left:0;width:680px;max-width:100%;visibility:hidden;pointer-events:none}}
@keyframes sbmUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sbmFade{from{opacity:0}to{opacity:1}}
/* the catalog menu opened by a tap that beat its data (a.js catmGo): an empty sheet with a quiet loading line */
.mega.catm-wait{min-height:200px}
.mega.catm-wait::after{content:"";display:block;width:40%;height:10px;margin:40px auto;border-radius:6px;background:var(--chip);animation:sbmFade .9s ease-in-out infinite alternate}

/* taps (task-420, David: "the click highlights are rectangles, keep it consistent"): no browser tap rectangle anywhere;
   a pressed control fades a little instead, which keeps its own rounded shape */
html{-webkit-tap-highlight-color:transparent}
@media (hover:none){:is(a,button,summary,label,[role=button]):active{opacity:.72;transition:opacity 0s}}
/* mouse: the horizontal strips can be dragged (a.js dragScroll, task-420) */
@media (hover:hover) and (pointer:fine){.rail,.shelf-track,.car-track{cursor:grab}}
.dragging{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.dragging *{pointer-events:none}

/* The catalog mega menu + the photo category row (task-389, after eldorado-new's "Dropdown = Photos" /
   "Rail = images"). ONE stylesheet for both headers: the shop imports it in its layout, and the static
   homepage's build (design/homepage/build.py) inlines this same file, so the two can't drift.
   Markup is the same on both sides: CatalogMenu / NavCats (React) and catm*() in design/homepage/a.js.
   Uses only the shared Design A tokens (--card --chip --ink* --line2 --link --acc --max --gut). */

/* a product photo in a small white tile: the photos are shot on white, so the tile stays white in dark mode too */
.mx{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
.mx img{width:86%;height:86%;object-fit:contain;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mx-deal{background:var(--acc);box-shadow:none;color:#fff}
.mx-deal svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* the red underline that grows out from the middle of a name on hover (also the homepage's category cards) */
.ul{position:relative}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
a:is(:hover,:focus-visible) .ul::after,a.ul:is(:hover,:focus-visible)::after{transform:scaleX(1)}
@media (hover:none){a:hover .ul::after{transform:scaleX(0)}}

/* ── the category row under the header: burger first, then photo + name links ───────────── */
header .nav-cats .nav-links.rail{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,1.4vw,24px);height:56px;padding-block:0;width:min(var(--max),100% - 2*var(--gut));margin-inline:auto;overflow-x:auto;scrollbar-width:none}
header .nav-cats .nav-links.rail::-webkit-scrollbar{display:none}
/* padding-block:0 - the homepage's product rails share the .rail class (6px top / 30px bottom for their shadows), which
   pushed the burger + photo links ~12px above the row's middle (David, 2026-11-09) */
.rail .rl{display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--ink);opacity:1;white-space:nowrap;font-size:15px}
.rail .rl .mx{width:30px;height:30px;border-radius:8px}
.rail .rl:hover{color:var(--ink)}
.rail .rl:hover .mx img{transform:scale(1.1)}
.rail .rl.deal{color:var(--link)}
.rail-menu{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:-8px;border-radius:999px;color:var(--ink);transition:background-color .2s}
.rail-menu:hover,.rail-menu[aria-expanded=true]{background:var(--chip)}
.rail-menu svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}

/* ── the panel ───────────────────────────────────────────────────────────────────────── */
.mega{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--card);border-bottom:1px solid var(--line2);box-shadow:0 24px 50px -20px rgba(0,0,0,.3);max-height:calc(100vh - var(--nav-h,80px) - 60px);overflow:auto;overscroll-behavior:contain;text-align:left;color:var(--ink)}
.mega[hidden]{display:none}
.mega :where(ul){list-style:none;margin:0;padding:0}
.mega-in{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto;display:grid;grid-template-columns:272px minmax(0,1fr);min-height:400px}

.mega .mega-side{padding:16px 20px 16px 0;border-right:1px solid var(--line2)}
.ms-row{display:flex;align-items:center}
.ms-g{flex:1;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 8px;border-radius:12px;font-size:15px;color:var(--ink);transition:background-color .15s}
.ms-g>span:not(.mx){flex:1}
.ms-g .ms-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .2s}
.ms-g.on{background:var(--chip);font-weight:600}
.ms-g.on .ms-chev{opacity:.7;transform:none}
.ms-t{display:none}
.mega .ms-kids{display:none}

.mega-main{padding:24px 0 28px 32px;min-width:0}
.mp[hidden]{display:none}
.mp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:18px}
.mp-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.mp-sub{font-size:14px;color:var(--ink3)}
.mega .mp-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--link)}
.mp-all svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.mp-all:hover svg{transform:translateX(3px)}
.mega .mp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 28px}
.mp-grid a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;color:var(--ink2)}
.mp-grid a .mx{width:36px;height:36px}
.mp-grid a:hover{color:var(--ink)}
.mp-grid a:hover .mx img{transform:scale(1.1)}
.mp-brands{margin-top:24px;padding-top:20px;border-top:1px solid var(--line2)}
.mp-brands h3{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--ink3);letter-spacing:0}
.mp-bl{display:flex;flex-wrap:wrap;gap:10px}
.mb{display:grid;place-items:center;height:44px;min-width:104px;padding:0 20px;border-radius:999px;background:var(--chip);color:var(--ink);font-size:15px;font-weight:600;transition:background-color .2s,transform .2s}
.mb:hover{background:color-mix(in srgb,var(--chip) 80%,var(--ink) 20%)}
.mb:active{transform:scale(.97)}
.mb{--bm-knock:var(--chip)}
.mb .bm{height:min(calc(var(--lh,1)*17px),calc(104px / var(--ar,3)))}

/* Brand marks (task-395): the official SVG in its own viewBox, never cropped, masked or stretched. The box keeps the
   mark's aspect (--ar = w/h), --lh is the optical height factor, the colour is the text colour (currentColor), and white
   parts of a mark show the surface behind it (--bm-knock). The brand page header shows the original colours, and the
   mono one on dark themes where a black wordmark would vanish. */
.bm{display:block;flex:none;width:auto;aspect-ratio:var(--ar,3);overflow:visible}
.bm-m{display:none}
html[data-theme=dark] .bm-c,html[data-theme=graphite] .bm-c{display:none}
html[data-theme=dark] .bm-m,html[data-theme=graphite] .bm-m{display:block}
.brand-mark{margin:0 0 18px;--bm-knock:var(--bg)}
.brand-mark .bm{height:min(calc(var(--lh,1)*34px),calc(240px / var(--ar,3)));color:var(--ink)}

.mega .mega-perks{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto;display:flex;flex-wrap:wrap;gap:12px 32px;padding:16px 0;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink2)}
.mega-perks li{display:inline-flex;align-items:center;gap:8px}
.mega-perks svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega-scrim,.mega-grab{display:none}

/* language + dark/light row at the top of the menu: phones only (<=640px), where the header has no room for them; never in the footer (David,
   2026-11-09). Shop: LangSwitch links + ThemeSwitch variant="menu"; homepage: a.js catmRender() buttons. */
.mega-prefs{display:none}
.mp-theme .i-sun{display:none}
html:is([data-theme=dark],[data-theme=graphite]) .mp-theme .i-sun{display:block}
html:is([data-theme=dark],[data-theme=graphite]) .mp-theme .i-moon{display:none}

@media (max-width:1068px){
  .mega-in{grid-template-columns:232px minmax(0,1fr)}
  .mega .mp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* phones: one accordion list (group row, its categories fold out under it) over a dimmed page */
@media (max-width:820px){
  /* a bottom sheet like the filters (task-420): a gap at the top, rounded top, grab pill, swipe down to close
     (src/lib/sheet-drag.ts, a.js sheetDrag). The header has no backdrop-filter on phones, so fixed works; while the menu
     is open the header is lifted over the bottom bar (html.menu-open / html.catm-on .nav) and the scrim beside the panel
     dims everything, header included. */
  .mega{position:fixed;left:0;right:0;top:auto;bottom:0;max-height:88vh;max-height:88dvh;border:0;border-radius:24px 24px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.12);z-index:2;animation:megaUp .32s cubic-bezier(.2,.7,.2,1)}
  .mega-scrim{display:block;position:fixed;inset:0;z-index:1;background:rgba(0,0,0,.46);animation:megaFade .25s ease-out}
  html.menu-open .nav,html.catm-on .nav{z-index:300}
  .mega .mega-grab{display:block;position:sticky;top:0;z-index:3;height:22px;background:var(--card);border-radius:24px 24px 0 0}
  .mega-grab::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  .mega .mega-prefs{padding-top:4px}
  .mega-scrim[hidden]{display:none}
  .mega-in{display:block;width:calc(100% - 2*var(--gut));min-height:0}
  .mega .mega-side{padding:8px 0 10px;border-right:0}
  .mega-side>li{border-bottom:1px solid var(--line2)}
  .mega-side>li:last-child{border-bottom:0}
  .ms-g{min-height:58px;padding:0;border-radius:0;font-size:16px}
  .ms-g.on{background:none;font-weight:400}
  .ms-g .ms-chev{display:none}
  .ms-g .mx{width:36px;height:36px}
  /* the right half of a group row opens its list, the left half (photo + name) opens the group (task-420: the 44px
     chevron alone drew mis-taps) */
  .ms-row{position:relative}
  .ms-t{display:flex;align-items:center;justify-content:flex-end;position:absolute;top:0;bottom:0;right:-10px;width:calc(50% + 10px);padding-right:12px;color:var(--ink);border-radius:12px}
  .ms-t svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
  .open>.ms-row .ms-t svg{transform:rotate(180deg)}
  .mega .open>.ms-kids{display:block;padding:0 0 10px 48px}
  .ms-kids a{display:flex;align-items:center;gap:12px;min-height:46px;font-size:15.5px;color:var(--ink2)}
  .ms-kids a .mx{width:30px;height:30px;border-radius:8px}
  .ms-kids .ms-allk{color:var(--link);font-weight:600}
  .mega-main{display:none}
  .mega .mega-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:calc(100% - 2*var(--gut));margin-inline:auto;padding:14px 0;border-bottom:1px solid var(--line2)}
  .mega-prefs .langs{flex:1 1 210px;display:flex;gap:2px;padding:3px;border-radius:980px;background:var(--line2)}
  .mega-prefs .langs>:is(a,button){flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;font-size:14px}
  .mega-prefs .mp-theme{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 16px 0 12px;border-radius:980px;background:var(--line2);color:var(--ink);font-size:14px;font-weight:600}
  .mp-theme svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .mega .mega-perks{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;width:calc(100% - 2*var(--gut));padding:16px 0 calc(16px + env(safe-area-inset-bottom));font-size:13px}
}
@keyframes megaUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes megaFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mega,.mega-scrim{animation:none!important}}
@media (min-width:821px){.mega-scrim{display:none!important}}

/* ── back to top + desktop edge arrows (task-421; src/lib/scroll-ui.ts, a.js scrollUi) ───────────────────────────── */
.to-top,.shop .to-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:98;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#c70125;color:#fff;box-shadow:0 10px 24px -8px rgba(120,0,20,.55);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s .25s,background-color .2s}
.to-top.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.7,.2,1),background-color .2s}
.to-top:hover{background:#a8001f}
.to-top:active{transform:scale(.94)}
.to-top svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){.to-top,.shop .to-top{right:max(16px,env(safe-area-inset-right));bottom:calc(var(--mbar,0px) + 16px);width:44px;height:44px}}
html:is(.sheet-open,.menu-open,.catm-on,.sb-sheet,.sbm-on) .to-top{opacity:0;visibility:hidden}
.edge-arrow{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:821px){
  .edge-arrow{position:absolute;z-index:4;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;padding:0;border:0;border-radius:50%;background:var(--card,#fff);color:var(--ink,#1d1d1f);box-shadow:0 8px 24px -8px rgba(0,0,0,.35),0 0 0 1px var(--line2,rgba(0,0,0,.08));cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s,transform .2s}
  .edge-arrow.ea-prev{margin-left:0}
  .edge-arrow.ea-next{margin-left:-48px}
  .edge-arrow.on{opacity:1;visibility:visible;transition:opacity .2s,transform .2s}
  .edge-arrow:hover{transform:scale(1.06)}
  .edge-arrow:active{transform:scale(.95)}
  .edge-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}