@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}
/* round flags in the language picker (David, task-385): EN = UK, RU = Russia, ՀԱՅ = Armenia */
/* ============================================================
   UTILITY STRIP + NAV
   ============================================================ */
/* top strip (task-385): one centred row - hours, address, phone, then WhatsApp + Viber icons */
/* WhatsApp + Viber: brand-colour circles (David), the official white mark (Simple Icons, CC0), no ring; 20% smaller since 2026-11-09 (David) */
@keyframes bump{40%{transform:scale(1.28) rotate(-8deg)}}
/* 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) */
/* nav: floating pill */
html[data-nav=pill]{--nav-row:calc(var(--nav-h) + 6px)}
html[data-nav=pill] main{padding-top:calc(var(--nav-eff) + 28px)}
html[data-nav=pill][data-hero=cinema] main{padding-top:0}
/* nav: black retail (today's smartbox.am, made calm) */
html[data-nav=black]{--nav-row:calc(var(--nav-h) + 12px)}
/* nav: minimal */
html[data-nav=minimal]{--nav-row:calc(var(--nav-h) + 8px)}
/* overlay menu */
/* ============================================================
   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}
/* the latest shelf, smaller cards (2026-11-10, David: "make the latest horizontal feed's products smaller, and the headline
   should be shortened"). The base .pc rule above only applies under data-radius=sharp (a dangling selector from the picker
   days), so these cards had no width at all and grew to fit the full one-line name (290-362px, 1-3 per screen). They get a
   fixed width here, the name is clamped to two lines (the full name stays in the link's aria-label and the h3's title). */
.shelf-track .pc{position:relative;display:flex;flex-direction:column;width:clamp(184px,14.5vw,228px);--pad:14px}
.shelf-track .pc-top{min-height:25px;margin-bottom:2px}
.shelf-track .pc-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.5em;font-size:16.5px;line-height:1.25;letter-spacing:-.005em}
.shelf-track .pc-spec{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-track .pc-media{height:clamp(140px,11vw,172px);margin:10px var(--pad) 6px}
.shelf-track .pc-foot{gap:8px}
.shelf-track .price{min-width:0;font-size:15.5px;gap:0 6px}
@media (max-width:734px){
.shelf-track .pc{width:min(42vw,176px);--pad:10px}
.shelf-track .pc-name{font-size:15px}
.shelf-track .pc-media{height:124px;margin-top:8px}
.shelf-track .price{font-size:14.5px}
}
/* 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
   ============================================================ */
/* ============================================================
   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{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){
.why{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}
}
@media (max-width:734px){
:root{--fs-body:16px}
html:not([data-nav=black]){--nav-row:min(var(--nav-h),62px)}
.why{grid-template-columns:1fr}
.pc{width:min(78vw,290px)}
.b4{grid-column:1/7}
.b3{padding-right:40%}
.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)}
/* 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 */
@keyframes sbspin{to{--sa:360deg}}
/* inside the black retail header the light variants turn dark, the dark one turns light */
/* button variants */
/* the "/" shortcut hint is desktop-only: gone on touch screens and at tablet/phone widths (David, 2026-11-09) */
/* the "look at me" pulse a picker change plays */
@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)}}
/* results dropdown */
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}}
/* slots */
/* command button in the header */
/* band under the header */
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}
/* floating */
/* Apple icon -> panel under the header */
/* command palette */
/* in the panel and the palette the results are part of the sheet, always shown */
@media (max-width:734px){
html[data-search=center][data-nav=pill] main{padding-top:150px}
}
/* ============================================================
   RAILS: budget ladder + categories (horizontal scroll, edge-to-edge like the shelves)
   ============================================================ */
.why-c svg,
.band-go svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bud,.cats{position:relative}
/* the body rails only: the header row (.nav-links.rail, StoreChrome) is styled by the shop CSS (task-429) */
main .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)}
main .rail::-webkit-scrollbar{display:none}
main .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%}
}
/* shop by budget, centred at every width (2026-11-10, David: "put the shop by budget into the center of the screen, on any
   screen, also desktop"). It was a full-bleed rail starting at the left edge (4 of 6 cards on a 1280 screen, the rest off to the
   right). From tablets up it is a centred grid that shows all six (2 / 3 / 6 per row), under the centred heading; on phones it
   stays a swipe rail, but every card snaps to the middle with an equal peek of its neighbours on both sides. `main .bands` because the rail base rule is `main .rail` (task-429). */
@media (min-width:735px){
main .bands{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;overflow:visible;scroll-snap-type:none;padding-inline:var(--gut)}
}
@media (min-width:1069px){
main .bands{grid-template-columns:repeat(3,minmax(0,312px))}
}
@media (min-width:1800px){
main .bands{grid-template-columns:repeat(6,minmax(0,276px))}
}
@media (max-width:734px){
/* vw, not %: a grid track's % resolves against the rail's content box (inside the padding), so 84% + 8% sat off-centre */
main .bands{grid-auto-columns:84vw;padding-inline:8vw;scroll-padding-inline:8vw}
main .bands>*{scroll-snap-align:center}
}
/* dark / light switch in the header */
/* ============================================================
   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] .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%)}
/* dark themes keep the brand-red top strip (it used to vanish: .util is display:none outside sale) and a legible footer */
/* 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 */
/* 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) */
/* the burger sits at the start of the category row; the top bar keeps one only where that row is hidden */
/* ============================================================
   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.
   ============================================================ */
html:not([data-nav=black]){--nav-row:80px}
html[data-search=center]{--sbh:52px;--sbfs:17px}
@media (max-width:820px){
html:not([data-nav=black]){--nav-row:56px}
html[data-search=center]{--sbh:46px;--sbfs:16px}
}
/* 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). */
@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 */
/* 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] .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. */
/* 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 */
}
/* phones: 24px circles (were 30), the tap area stays ~44px tall through an invisible ring */
/* 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,.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}
/* ============================================================
   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))}
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}
.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}
/* the header search's submit stays 34px to the eye; an invisible ring takes its hit area to 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}
/* 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}
}
@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}
.brands:hover .brands-track{animation-play-state:running}
/* no keyboard on a touch phone: drop the arrow/enter/esc legend under the results */
}
@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)}
}
/* ============================================================
   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).
   ============================================================ */
@media (max-width:820px){
html:not([data-nav=black]){--nav-row:68px}
}
/* 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}
}
/* 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. */
@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 */
/* 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){
main .rail,.shelf-track,.car-track{cursor:grab}
}
@media (hover:hover) and (pointer:fine) and (min-width:735px){
main .bands{cursor:auto}
}
.dragging{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.dragging *{pointer-events:none}

/* task-429 B5: an out-of-stock shelf card has no Buy / Add; a quiet pill says so (the card still opens the product page) */
.pc-oos{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:980px;background:var(--chip);color:var(--ink2);font-size:14px;font-weight:600;white-space:nowrap}