/* Tech Street Kenya prototype. Bespoke system: see Tech_Street_Kenya_Design_System.md */
:root{
  --ink:#0E1430; --ink-2:#4A5270; --mute:#8D94AB; --line:#E3E8F0; --line-2:#D3DAE6;
  --navy:#1C2A68; --navy-2:#24357F; --navy-deep:#141E50;
  --sky:#27A4E4; --sky-2:#3DB4EE; --sky-soft:#E8F5FD;
  --canvas:#FFFFFF; --mist:#F3F6FA; --mist-2:#EDF1F7;
  --mpesa:#3AA845; --wa:#25D366; --wa-ink:#128C4A;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 1px 2px rgba(14,20,48,.06),0 8px 24px rgba(14,20,48,.06);
  --shadow-lg:0 2px 6px rgba(14,20,48,.08),0 24px 60px rgba(14,20,48,.14);
  --ease:cubic-bezier(.22,.8,.24,1); --sheet:cubic-bezier(.32,.72,0,1);
  --display:"Red Hat Display",system-ui,sans-serif; --text:"Red Hat Text",system-ui,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 var(--text);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em;margin:0;line-height:1.05}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.dim{color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ksh{font-feature-settings:"tnum" 1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:999px;font:600 15.5px/1 var(--text);letter-spacing:-.005em;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(28,42,104,.22)}
.btn-primary:hover{background:var(--navy-2);box-shadow:0 10px 28px rgba(28,42,104,.3)}
.btn-ghost{border:1.5px solid var(--line-2);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink)}
.btn-wa{background:var(--wa);color:#06331A}
.btn-wa:hover{background:#20bd5b}
.btn-mpesa{background:var(--mpesa);color:#fff}
.btn-mpesa:hover{background:#30973c}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-block{width:100%}
.link{color:var(--sky);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.link:hover{color:var(--navy)}

/* ---------- Top strip + Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(14,20,48,.05)}
.nav .wrap{display:flex;align-items:center;height:68px;gap:28px}
.nav-logo img{height:34px;width:auto}
.nav-logo .lg-light{display:none}
/* home: the header floats transparent over the light hero, frosted white once you scroll */
body.home .nav{position:fixed;left:0;right:0;transition:background .35s,border-color .35s,box-shadow .35s,backdrop-filter .35s}
body.home .nav:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom-color:transparent}
body.home .nav:not(.scrolled) .nav-links a:hover{background:rgba(255,255,255,.7)}
body.home .nav:not(.scrolled) .nav-wa{background:rgba(255,255,255,.55)}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{padding:8px 13px;border-radius:999px;font:500 14.5px/1 var(--text);color:var(--ink-2);transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:var(--mist)}
.nav-act{display:flex;align-items:center;gap:6px}
.icon-btn{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;position:relative;transition:background .2s}
.icon-btn:hover{background:var(--mist)}
.icon-btn svg{width:21px;height:21px}
.bag-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sky);color:#fff;font:700 11px/18px var(--text);text-align:center;transform:scale(0);transition:transform .3s var(--ease)}
.bag-count.has{transform:scale(1)}
.bag-count.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.nav-wa{height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--text);margin-left:6px;transition:border-color .2s}
.nav-wa:hover{border-color:var(--wa-ink)}
.nav-wa svg{width:18px;height:18px;color:var(--wa-ink)}
.burger{display:none}

/* ---------- Categories mega menu (desktop, 2026-10-17): the client's eight categories down the left, the hovered
   one's sub-categories and best sellers on the right. Opens on hover (or click / keyboard on the Categories pill).
   ---------- */
.nav-links{align-items:center}
.nav-cats{height:38px;padding:0 13px 0 12px;margin-right:6px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font:600 14.5px/1 var(--text);color:var(--ink);background:var(--mist);transition:background .2s,color .2s}
.nav-cats svg{width:17px;height:17px}
.nav-cats .cv{width:14px;height:14px;transition:transform .3s var(--ease)}
.nav-cats:hover,.nav-cats[aria-expanded=true]{background:var(--navy);color:#fff}
.nav-cats[aria-expanded=true] .cv{transform:rotate(180deg)}
.nav.mega-on,body.home .nav.mega-on:not(.scrolled){background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:var(--line)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(14,20,48,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .35s var(--ease),visibility 0s .35s}
.mega.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.nav .mega-in{display:grid;grid-template-columns:270px minmax(0,1fr);align-items:start;gap:36px;height:auto;padding-top:22px;padding-bottom:28px}
.mega-rail{display:flex;flex-direction:column;gap:2px;padding-right:20px;border-right:1px solid var(--line)}
.mega-rail a{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:12px;font:600 15px/1.2 var(--text);color:var(--ink-2);transition:background .2s,color .2s}
.mega-rail a .cv{width:15px;height:15px;margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .25s var(--ease)}
.mega-rail a.on{background:var(--sky-soft);color:var(--navy)}
.mega-rail a.on .cv{opacity:1;transform:none}
.c-ic{width:34px;height:34px;border-radius:10px;background:var(--mist);display:grid;place-items:center;flex:none;color:var(--navy);transition:background .2s}
.c-ic svg{width:19px;height:19px}
.mega-rail a.on .c-ic{background:#fff}
.mega-pane{display:none}
.mega-pane.on{display:block;animation:paneIn .35s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateX(8px)}}
.mega-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.mega-head h3{font-size:28px}
.mega-head p{margin:5px 0 0;font-size:14px;color:var(--mute)}
.mega-subs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mega-subs a{height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--text);color:var(--ink-2);transition:border-color .2s,color .2s}
.mega-subs a:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.mega-subs a:not(:first-child):hover{border-color:var(--navy);color:var(--navy)}
.mega-subs em{font-style:normal;font-size:12px;color:var(--mute)}
.mega-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mega-pick{background:var(--mist);border-radius:var(--r);padding:12px 14px 14px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.mega-pick:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mega-pick img{width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply;margin-bottom:10px}
.mega-pick b{font:600 14px/1.3 var(--text);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-pick span{font:700 14px/1 var(--text);color:var(--navy);margin-top:auto;padding-top:8px}
.mega-empty{display:flex;gap:18px;align-items:flex-start;background:var(--mist);border-radius:var(--r);padding:28px}
.mega-empty .c-ic{width:52px;height:52px;border-radius:14px;background:#fff}
.mega-empty .c-ic svg{width:26px;height:26px}
.mega-empty b{font:700 19px/1.3 var(--display)}
.mega-empty p{margin:6px 0 16px;color:var(--ink-2);max-width:440px}
.mega-empty .btn svg{width:18px;height:18px}
.mega-veil{position:fixed;inset:0;z-index:55;background:rgba(14,20,48,.22);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.mega-veil.on{opacity:1;visibility:visible;transition:opacity .3s}

/* ---------- HERO (v8, 2026-10-14): the colour room. A light showroom where six best-sellers take turns on one
   floor line. The room takes on the colour of whatever is on show: the light behind it, the giant name set behind
   it and the second line of the headline all shift to the product's own colour. Products swap like a turntable
   turning, tilt toward the cursor, and the picker below fills while each one is on show. The renders sit on pure
   white and are drawn with multiply, so the white melts into the room: no cut-outs, no halos. ---------- */
@property --tint{syntax:'<color>';inherits:true;initial-value:#8A2342}
.hero{--tint:#8A2342;position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(68px + clamp(16px,4vh,48px)) 0 clamp(20px,3.5vh,40px);overflow:hidden;isolation:isolate;
  background:#F6F7F9;transition:--tint 1.1s var(--ease)}
/* the light in the room: a wide wash of the product colour behind the stage, and a soft floor */
.room{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 70% at var(--ax,68%) 46%,color-mix(in srgb,var(--tint) 26%,transparent) 0%,color-mix(in srgb,var(--tint) 9%,transparent) 42%,transparent 72%),
    linear-gradient(180deg,#FBFBFC 0%,#F6F7F9 58%,#EEF0F4 100%)}
.room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--tint) 6%,transparent))}
/* the giant name: the product's short name, set huge behind the stage in its own colour */
.giant{position:absolute;z-index:-1;left:44%;right:0;top:50%;transform:translate3d(calc(var(--px,0)*-18px),calc(-50% + var(--sp,0)*-80px),0);
  pointer-events:none;text-align:center;white-space:nowrap;overflow:hidden}
.giant span{display:inline-block;font:900 var(--gs,200px)/.86 var(--display);letter-spacing:-.06em;
  color:color-mix(in srgb,var(--tint) 11%,transparent);transition:color 1.1s var(--ease)}
.giant i{display:inline-block;font-style:normal;transform:translateY(0);transition:transform .9s cubic-bezier(.2,.85,.2,1),opacity .5s}
.giant.out i{transform:translateY(-38%);opacity:0;transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .35s}
.giant.pre i{transform:translateY(42%);opacity:0;transition:none}

.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(20px,3vw,48px);width:100%}
.hero h1{font-size:clamp(44px,5.2vw,82px);font-weight:800;letter-spacing:-.045em;line-height:.96;color:var(--ink)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero h1 .ln>span{display:block}
/* the second line is lit by the room */
.hero h1 .tinted>span{color:color-mix(in srgb,var(--tint) 78%,var(--ink));transition:color 1.1s var(--ease)}
.js .hero h1 .ln>span{transform:translateY(105%)}
.js body.in .hero h1 .ln>span{animation:lnUp 1.1s cubic-bezier(.2,.8,.2,1) both}
.js body.in .hero h1 .ln:nth-child(1)>span{animation-delay:.15s}
.js body.in .hero h1 .ln:nth-child(2)>span{animation-delay:.28s}
@keyframes lnUp{from{transform:translateY(105%)}to{transform:none}}
.h-sub{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:470px;margin:24px 0 32px}
.h-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-ghost{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* the stage: six products stacked on one floor line; the one on show is .on */
.stage-col{position:relative;justify-self:end;width:100%;display:flex;justify-content:flex-end}
.stage-box{position:relative;aspect-ratio:1;width:100%;max-width:min(640px,calc(100vh - 290px));max-width:min(640px,calc(100svh - 290px));min-width:min(100%,380px)}
/* two layers in step: .sils holds an opaque silhouette of each product in the room's colour, .stage the renders
   drawn with multiply (the white melts into the room). The silhouettes stop the giant name showing through the white
   parts of a product (the PS5's panels). The box must not isolate, or the multiply has nothing to blend with. */
.sils,.stage{position:absolute;inset:0;perspective:1500px}
.stage{mix-blend-mode:multiply}
.sil{display:block;width:100%;height:100%;background:color-mix(in srgb,var(--tint) 7%,#F8F8FA);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:background 1.1s var(--ease)}
.turn{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,calc(var(--sp,0)*-40px),0) scale(calc(1 + var(--sp,0)*.08))}
.prod{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
  transform:translate3d(34%,0,-220px) rotateY(-38deg);filter:blur(10px);
  transition:transform 1.15s cubic-bezier(.6,0,.15,1),opacity .8s ease,filter .9s ease,translate .7s cubic-bezier(.2,.8,.2,1),rotate .7s cubic-bezier(.2,.8,.2,1)}
.prod img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.prod.on{opacity:1;transform:none;filter:none;transition:transform 1.15s cubic-bezier(.3,.9,.2,1.04),opacity .7s ease .1s,filter .8s ease .05s,translate .7s cubic-bezier(.2,.8,.2,1),rotate .7s cubic-bezier(.2,.8,.2,1)}
.prod.out{opacity:0;transform:translate3d(-36%,0,-220px) rotateY(38deg);filter:blur(10px)}
/* going back (a swipe to the right, or an earlier pick): the turntable runs the other way */
.stage-box.rev .prod:not(.on):not(.out){transform:translate3d(-34%,0,-220px) rotateY(38deg)}
.stage-box.rev .prod.out{transform:translate3d(36%,0,-220px) rotateY(-38deg)}
.stage-box.snap .prod:not(.on){transition:none}
/* while a finger holds the product it follows the finger, no easing */
.stage-box.drag .prod.on{transition:opacity .7s ease .1s,filter .8s ease .05s}
.stage-box.nudge .prod.on{animation:nudge 1.3s cubic-bezier(.45,0,.2,1) both}
@keyframes nudge{0%,100%{translate:0 0;rotate:0 1 0 0deg}38%{translate:-34px 0;rotate:0 1 0 -9deg}}
/* a soft pool of light on the floor under whatever is on show */
.stage-box::before{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tint) 22%,transparent),transparent);filter:blur(6px);z-index:-1}

/* the tag: what is on show, its spec and the way in */
.tag{position:absolute;left:0;bottom:6%;z-index:2;display:block;padding:16px 20px 15px;border-radius:18px;min-width:230px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(14,20,48,.08);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);transition:transform .3s var(--ease),box-shadow .3s}
.tag:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(14,20,48,.12)}
.tag>*{display:block}
.tag small{font:700 12px/1 var(--display);letter-spacing:.06em;color:color-mix(in srgb,var(--tint) 80%,var(--ink));font-feature-settings:"tnum" 1}
.tag b{font:800 22px/1.15 var(--display);letter-spacing:-.025em;margin:8px 0 3px;color:var(--ink)}
.tag span{font-size:14px;color:var(--ink-2)}
.tag em{font-style:normal;font:600 14px/1 var(--text);color:var(--navy);margin-top:12px}
.tag.swap>*{animation:tagIn .7s cubic-bezier(.2,.8,.2,1) both}
.tag.swap>:nth-child(2){animation-delay:.05s}.tag.swap>:nth-child(3){animation-delay:.1s}.tag.swap>:nth-child(4){animation-delay:.15s}
@keyframes tagIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the picker: the six best-sellers; the line under the one on show fills while it is on show */
.picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:clamp(14px,3vh,34px) 0 0;padding:0;list-style:none}
.pick{width:100%;display:flex;align-items:center;gap:12px;padding:8px 10px 12px 8px;border-radius:16px;text-align:left;position:relative;transition:background .3s}
.pick:hover{background:rgba(255,255,255,.65)}
.pick img{width:52px;height:52px;flex:none;border-radius:12px;background:#fff;mix-blend-mode:multiply;object-fit:contain;transition:transform .4s var(--ease)}
.pick:hover img{transform:scale(1.06)}
.pick span{min-width:0}
.pick b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 14px/1.22 var(--display);letter-spacing:-.01em;color:var(--ink-2);transition:color .3s}
.pick i{position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:rgba(14,20,48,.08);overflow:hidden}
.pick i::after{content:"";position:absolute;inset:0;background:var(--tint);transform-origin:left;transform:scaleX(var(--p,0))}
.pick.on b{color:var(--ink)}

/* entrance (body.in starts it) */
.js .hero [data-in]{opacity:0}
.js body.in .hero [data-in]{animation:rise 1s var(--ease) both;animation-delay:var(--d,0s)}
.js .stage,.js .sils{opacity:0;translate:0 40px;scale:.96}
.js body.in .stage,.js body.in .sils{opacity:1;translate:0 0;scale:1;transition:opacity 1.2s ease .35s,translate 1.4s cubic-bezier(.2,.85,.2,1) .35s,scale 1.4s cubic-bezier(.2,.85,.2,1) .35s}
.js .giant span{clip-path:inset(0 0 100% 0)}
.js body.in .giant span{clip-path:inset(0 0 -10% 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) .2s,color 1.1s var(--ease)}
.js .pick{opacity:0}
.js body.in .pick{animation:rise .8s var(--ease) both}
.js body.in .picker li:nth-child(1) .pick{animation-delay:.7s}.js body.in .picker li:nth-child(2) .pick{animation-delay:.76s}
.js body.in .picker li:nth-child(3) .pick{animation-delay:.82s}.js body.in .picker li:nth-child(4) .pick{animation-delay:.88s}
.js body.in .picker li:nth-child(5) .pick{animation-delay:.94s}.js body.in .picker li:nth-child(6) .pick{animation-delay:1s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}


/* ---------- Sections ---------- */
.sec{padding:110px 0;scroll-margin-top:60px}
.sec.mist{background:var(--mist)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.sec-head h2{font-size:clamp(34px,4vw,56px);font-weight:800}
.sec-head p{margin:12px 0 0;color:var(--ink-2);font-size:17px;max-width:520px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.seen{opacity:1;transform:none}

/* categories */
/* slider (19 Oct): one row that scrolls sideways with snap, 4 cards per view on desktop, arrows in the heading */
.cats{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px) / 4);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 0 30px;margin:-6px 0 -30px}
.cats::-webkit-scrollbar{display:none}
.cats .cat{scroll-snap-align:start}
.cs-ctl{display:flex;align-items:center;gap:10px}
.cs-ctl .link{margin-right:8px}
.cs-arr{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--mist);color:var(--ink);font-size:26px;line-height:1;padding-bottom:3px;transition:background .2s,color .2s,opacity .2s}
@media (hover:hover){.cs-arr:hover:not(:disabled){background:var(--navy);color:#fff}}
.cs-arr:disabled{opacity:.35;cursor:default}
.cats .cat img{aspect-ratio:4/3}
.cat.cat-ask{background:var(--navy);color:#fff;padding-bottom:22px}
.cat.cat-ask span{color:rgba(255,255,255,.7)}
.cat-ask p{margin:auto 0 14px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.85);max-width:250px}
.cat-ask em{font:600 14px/1 var(--text);font-style:normal;color:var(--wa)}
.cat{position:relative;background:var(--mist);border-radius:var(--r-lg);padding:20px 18px 0;overflow:hidden;display:flex;flex-direction:column;min-height:250px;transition:transform .4s var(--ease),box-shadow .4s}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.cat h3{font-size:19px;font-weight:700}
.cat span{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.cat img{mix-blend-mode:multiply;margin:auto -6px 0;width:calc(100% + 12px);aspect-ratio:1;object-fit:contain;transition:transform .6s var(--ease)}
.cat:hover img{transform:scale(1.06)}

/* tabs + grid */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.tab{height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);font:600 14px/1 var(--text);color:var(--ink-2);background:#fff;transition:all .25s}
.tab:hover{border-color:var(--ink-2);color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;animation:card-in .7s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes card-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.card-img{position:relative;background:var(--mist);aspect-ratio:1/1;display:grid;place-items:center;cursor:pointer;overflow:hidden}
.card-img img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.badge{position:absolute;top:14px;left:14px;font:600 12px/1 var(--text);padding:6px 10px;border-radius:8px;background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.badge.new{background:var(--navy);color:#fff}
.card-body{padding:18px 18px 18px;display:flex;flex-direction:column;flex:1}
.card-brand{font-size:13px;color:var(--mute);font-weight:500}
.card-name{font:700 17px/1.3 var(--display);letter-spacing:-.012em;margin:3px 0 6px;cursor:pointer}
.card-spec{font-size:13.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.45}
.card-foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0}
.price{font:800 19px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.price s{display:block;font:500 13px/1.3 var(--text);color:var(--mute);letter-spacing:0;margin-bottom:3px}
.card-acts{display:flex;gap:8px;min-width:0}
.card-acts .btn{flex:1;min-width:0}
.card-acts .add{flex:none}
.add{width:42px;height:42px;border-radius:999px;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:all .25s}
.add:hover{border-color:var(--navy);color:var(--navy)}
.add svg{width:19px;height:19px}
.add.done{background:var(--sky);border-color:var(--sky);color:#fff}
.more-row{text-align:center;margin-top:42px}

/* budget street */
.budget{background:#fff;border:1px solid var(--line);border-radius:28px;padding:42px 42px 36px;box-shadow:var(--shadow)}
.bud-top{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:28px}
.bud-val{font:800 clamp(40px,5vw,68px)/1 var(--display);letter-spacing:-.035em}
.bud-val small{font:500 16px/1.4 var(--text);color:var(--ink-2);display:block;letter-spacing:0;margin-bottom:8px}
.bud-picks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bud-track{position:relative;display:flex;align-items:center;gap:7px;height:44px}
.bud-track>i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--sky)}
.bud-track>i:nth-child(2){background:#2B8DD0}
.bud-track>i:nth-child(3){background:var(--navy)}
.bud-rail{position:relative;flex:1;height:44px;margin-left:8px}
.bud-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:var(--mist-2)}
.bud-fill{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:linear-gradient(90deg,var(--sky),var(--navy));width:50%}
.bud-rail input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;margin:0}
.bud-knob{position:absolute;top:50%;width:46px;height:38px;margin:-19px 0 0 -23px;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(14,20,48,.25));transition:transform .2s var(--ease)}
.bud-rail:active .bud-knob{transform:scale(1.1)}
.bud-meta{display:flex;justify-content:space-between;color:var(--ink-2);font-size:14px;margin:12px 0 26px 45px}
.bud-count{font-weight:600;color:var(--ink)}
.bud-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.mini{scroll-snap-align:start;display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .25s,transform .3s var(--ease);animation:card-in .5s var(--ease) both;animation-delay:var(--d,0s)}
.mini:hover{border-color:var(--sky);transform:translateY(-3px)}
.mini img{width:72px;height:72px;object-fit:contain;background:var(--mist);border-radius:12px;mix-blend-mode:multiply;flex:none}
.mini b{display:block;font:700 14.5px/1.3 var(--display);letter-spacing:-.01em}
.mini span{font:700 14px/1.3 var(--text);color:var(--navy)}
.bud-empty{color:var(--ink-2);padding:20px 0}

/* how ordering works */
.how{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.how-steps{display:flex;flex-direction:column}
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s}
.step.on{opacity:1}
.step-n{font:800 15px/1 var(--display);color:var(--sky);margin-bottom:14px}
.step h3{font-size:clamp(30px,3vw,42px);font-weight:800;margin-bottom:14px}
.step p{font-size:17.5px;color:var(--ink-2);margin:0;max-width:440px}
.how-phone{position:sticky;top:calc(50vh - 290px);display:grid;place-items:center}
.phone{width:290px;height:580px;border-radius:46px;background:#0E1430;padding:11px;box-shadow:var(--shadow-lg),inset 0 0 0 2px #2a3360}
.phone-scr{position:relative;width:100%;height:100%;border-radius:36px;background:#fff;overflow:hidden}
.phone-scr::before{content:"";position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0E1430;z-index:3}
.scr{position:absolute;inset:0;padding:50px 16px 16px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease);display:flex;flex-direction:column}
.scr.on{opacity:1;transform:none}
.scr-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.scr-bar img{height:16px}
.scr-pimg{background:var(--mist);border-radius:18px;padding:12px;aspect-ratio:1}
.scr-pimg img{mix-blend-mode:multiply;width:100%;height:100%;object-fit:contain}
.scr h5{font:700 16px/1.25 var(--display);margin:12px 0 4px}
.scr .p{font:800 19px/1 var(--display);margin:4px 0 12px}
.scr .b{height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:600 13.5px/1 var(--text);margin-top:6px}
.stk{margin:auto 0;background:#fff;border-radius:18px;box-shadow:0 10px 40px rgba(14,20,48,.25);padding:18px;font-size:13.5px;line-height:1.45}
.stk-dim{position:absolute;inset:0;background:rgba(14,20,48,.45)}
.stk-wrap{position:relative;z-index:2;margin:auto 0}
.stk b{display:block;font-size:14px;margin-bottom:6px;color:var(--mpesa)}
.stk .pin{display:flex;gap:8px;margin:14px 0 10px}
.stk .pin i{flex:1;height:34px;border-radius:8px;background:var(--mist-2);display:grid;place-items:center;font-style:normal;font-weight:700}
.wa-head{display:flex;align-items:center;gap:10px;background:#075E54;color:#fff;margin:-50px -16px 12px;padding:46px 14px 12px}
.wa-head .av{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center}
.wa-head .av img{width:22px}
.wa-head b{font-size:14px;display:block}
.wa-head small{font-size:11.5px;opacity:.8}
.wa-body{flex:1;background:#ECE5DD;margin:0 -16px -16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.bub{max-width:86%;background:#fff;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub.me{align-self:flex-end;background:#DCF8C6}
.bub small{display:block;text-align:right;color:#8a8a8a;font-size:10px;margin-top:2px}

/* shop by brand strip (19 Oct): sits below Shop by category, drifts sideways, swipe or drag to browse */
.brand-strip{padding:0 0 96px}
#categories{padding-bottom:56px}
.bs-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.bs-head h2{font-size:clamp(24px,2.4vw,32px)}
.bs-viewport{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bs-viewport::-webkit-scrollbar{display:none}
.bs-track{display:flex;gap:12px;width:max-content;padding:4px 0 14px}
.bs-chip{flex:none;min-width:150px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 24px;border-radius:var(--r);background:var(--mist);transition:background .25s,box-shadow .25s,transform .35s var(--ease)}
.bs-chip b{font:800 24px/1 var(--display);letter-spacing:-.035em;color:var(--ink)}
.bs-chip span{font-size:13px;color:var(--mute)}
.bs-chip:hover{background:#fff;box-shadow:var(--shadow);transform:translateY(-3px)}
.bs-chip:hover b{color:var(--navy)}


/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)}
.why div{padding:30px 26px 6px 0}
.why div+div{padding-left:26px;border-left:1px solid var(--line-2)}
.why svg{width:28px;height:28px;color:var(--sky);margin-bottom:16px}
.why h4{font-size:20px;font-weight:700;margin-bottom:8px}
.why p{margin:0;color:var(--ink-2);font-size:15px}

/* visit */
.visit{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.visit-card{background:#fff;border-radius:28px;padding:44px;border:1px solid var(--line)}
.visit-card h2{font-size:clamp(32px,3.6vw,48px);font-weight:800;margin-bottom:16px}
.vrow{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.vrow:first-of-type{border-top:0}
.vrow svg{width:22px;height:22px;color:var(--sky);flex:none;margin-top:2px}
.vrow b{display:block;font-weight:600}
.vrow span{color:var(--ink-2);font-size:15px}
.map{position:relative;border-radius:28px;overflow:hidden;min-height:420px;background:var(--mist-2);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:40px}
.map svg.map-lines{position:absolute;inset:0;width:100%;height:100%}
.map-pin{position:absolute;left:58%;top:42%;width:64px;height:52px;transform:translate(-50%,-50%)}
.map-pin::after{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid rgba(39,164,228,.55);animation:ping 2.6s ease-out infinite}
@keyframes ping{from{transform:scale(.3);opacity:1}to{transform:scale(1.2);opacity:0}}
.map h3{position:relative;font-size:26px;font-weight:700;margin-bottom:6px}
.map p{position:relative;margin:0 0 20px;color:var(--ink-2)}
.map .btn{position:relative;align-self:flex-start}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font:700 19px/1.35 var(--display);letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq details p{margin:0 0 24px;color:var(--ink-2);font-size:16.5px;max-width:720px}

/* footer */
.foot{background:var(--mist);padding:80px 0 34px;font-size:14.5px;color:var(--ink-2)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line-2)}
.foot-top img{height:40px;width:auto;margin-bottom:18px}
.foot h5{font:700 15px/1 var(--display);color:var(--ink);margin:4px 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a:hover{color:var(--ink)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:13px;flex-wrap:wrap}
.pay-row{display:flex;gap:8px;margin-top:18px}
.pay-row span{height:30px;padding:0 12px;border-radius:7px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;font:700 12.5px/1 var(--text);color:var(--ink)}
.pay-row span.mp{color:var(--mpesa)}

/* FAB */
.fab{position:fixed;right:22px;bottom:22px;z-index:55;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 30px rgba(18,140,74,.4);transition:transform .3s var(--ease)}
.fab:hover{transform:scale(1.08)}
body.home:not(.past) .fab{transform:scale(0)}
.fab svg{width:30px;height:30px;color:#fff}

/* ---------- Sheets (product, bag, checkout, search, menu) ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(14,20,48,.4);opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(480px,100%);background:#fff;transform:translateX(105%);transition:transform .55s var(--sheet);display:flex;flex-direction:column;box-shadow:none}
.sheet.wide{width:min(920px,100%)}
.sheet.on{transform:none;box-shadow:var(--shadow-lg)}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.sh-head h3{font-size:20px;font-weight:700}
.sh-body{flex:1;overflow:auto;padding:22px}
.sh-foot{padding:18px 22px;border-top:1px solid var(--line);background:#fff}
.x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mist)}
.x svg{width:18px;height:18px}

.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:999px;height:46px}
.qty button{width:42px;height:44px;font-size:20px}
.qty span{min-width:26px;text-align:center;font-weight:600}

/* ---------- Product page (product.html?id=): one template filled from the catalogue ---------- */
.pdp-crumbs{padding:26px 0 0;margin:0 0 22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-crumbs span{color:var(--ink-2)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.5vw,72px);align-items:start;padding-bottom:96px}
.pdp-media{position:sticky;top:92px}
.pdp-img{position:relative;aspect-ratio:1;border-radius:28px;background:var(--mist);display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
.pdp-img img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.pdp-img.zoom img{transform:scale(1.75);transition:transform .25s ease-out}
.pdp-img .badge{top:20px;left:20px;z-index:1}
.pdp-trust{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pdp-trust li{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;color:var(--ink-2);line-height:1.35}
.pdp-trust svg{width:22px;height:22px;flex:none;color:var(--navy)}
.pdp-trust b{display:block;color:var(--ink);font:700 14px/1.3 var(--display);margin-bottom:2px}
.pdp-buy{padding-top:6px}
.pdp-brand{font-size:14px;color:var(--mute);font-weight:600}
.pdp-buy h1{font-size:clamp(32px,3.4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:6px 0 12px}
.pdp-spec{margin:0;color:var(--ink-2);font-size:16.5px}
.pdp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;font:800 clamp(32px,3vw,40px)/1 var(--display);letter-spacing:-.03em;margin:26px 0 10px}
.pdp-price s{font:500 17px/1 var(--text);color:var(--mute);letter-spacing:0}
.pdp-price em{font:700 13px/1 var(--text);font-style:normal;letter-spacing:0;color:var(--mpesa);background:#EAF6EC;padding:6px 10px;border-radius:999px}
.pdp-warr{display:flex;align-items:center;gap:8px;margin:0;font-size:14.5px;color:var(--ink-2)}
.pdp-warr svg{width:18px;height:18px;color:var(--mpesa)}
.pdp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.pdp-lbl{font:600 15px/1 var(--text)}
.pdp-acts{display:grid;gap:10px}
.btn-lg{height:56px;font-size:16.5px}
.pdp-wa{color:var(--wa-ink)}
.pdp-del{margin-top:30px;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px 18px}
.pdp-del h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.pdp-del div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.pdp-del b{display:block;font-size:15px}
.pdp-del small{color:var(--mute);font-size:13px}
.pdp-del em{font-style:normal;font-weight:700;white-space:nowrap}
.pdp-del p{margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}
.pdp-specs dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.pdp-specs dl div{display:grid;grid-template-columns:minmax(110px,.42fr) 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line-2)}
.pdp-specs dt{color:var(--mute);font-weight:500}
.pdp-specs dd{margin:0;font-weight:500}
.pdp-bar{position:fixed;left:0;right:0;bottom:0;z-index:58;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid var(--line);padding:10px 0 calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .45s var(--sheet)}
.pdp-bar.on{transform:none}
.pdp-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pdp-bar span{min-width:0}
.pdp-bar b{display:block;font:700 15px/1.25 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-bar em{font-style:normal;font-weight:700;color:var(--navy)}
.pdp-bar .btn{flex:none;height:46px}
/* the buy box already has its WhatsApp button and the sticky bar owns the bottom edge */
body.pdp-page .fab{display:none}
.card-name a:hover{color:var(--navy)}

.bag-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.bag-item img{width:72px;height:72px;object-fit:contain;background:var(--mist);border-radius:12px;mix-blend-mode:multiply}
.bag-item b{font:700 15px/1.3 var(--display);display:block}
.bag-item .q{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:14px}
.bag-item .q button{width:28px;height:28px;border-radius:50%;background:var(--mist);font-weight:700}
.bag-item .rm{font-size:13px;color:var(--mute);text-decoration:underline}
.tot{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}
.tot.big{font:800 21px/1.2 var(--display);margin:10px 0 16px}
.empty{text-align:center;padding:60px 10px;color:var(--ink-2)}

/* checkout */
.co-steps{display:flex;gap:6px;margin-bottom:24px}
.co-steps span{flex:1;font:600 13px/1 var(--text);color:var(--mute);padding-top:12px;border-top:3px solid var(--line)}
.co-steps span.on{color:var(--ink);border-color:var(--sky)}
.co-steps span.done{color:var(--ink-2);border-color:var(--navy)}
.co-pane{display:none}
.co-pane.on{display:block;animation:card-in .45s var(--ease)}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.fld input,.fld select{width:100%;height:50px;border:1.5px solid var(--line-2);border-radius:12px;padding:0 14px;background:#fff;outline:none;transition:border-color .2s}
.fld input:focus,.fld select:focus{border-color:var(--sky)}
.fld.err input{border-color:#D8443A}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line-2);border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,background .2s}
.opt input{margin-top:4px;accent-color:var(--navy)}
.opt b{display:block;font-weight:600}
.opt small{color:var(--ink-2);font-size:13.5px}
.opt .fee{margin-left:auto;font-weight:700;white-space:nowrap}
.opt:has(input:checked){border-color:var(--navy);background:var(--sky-soft)}
.sum{background:var(--mist);border-radius:14px;padding:16px;margin:16px 0}
.stk-live{text-align:center;padding:26px 6px}
.stk-live .spin{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;border:4px solid var(--mist-2);border-top-color:var(--mpesa);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ok{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;background:var(--mpesa);display:grid;place-items:center;color:#fff;animation:pop .5s var(--ease)}
.ok svg{width:34px;height:34px}
.receipt{background:var(--mist);border-radius:14px;padding:16px;text-align:left;font-size:14px;margin:18px 0}
.receipt div{display:flex;justify-content:space-between;padding:4px 0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600}

.search{position:fixed;inset:0 0 auto 0;z-index:90;background:#fff;transform:translateY(-105%);transition:transform .5s var(--sheet);box-shadow:var(--shadow-lg);max-height:86vh;display:flex;flex-direction:column}
.search.on{transform:none}
.search-in{display:flex;align-items:center;gap:12px;padding:18px 28px;border-bottom:1px solid var(--line);max-width:var(--wrap);margin:0 auto;width:100%}
.search-in svg{width:22px;height:22px;color:var(--mute)}
.search-in input{flex:1;border:0;outline:0;font:600 22px/1.2 var(--display);letter-spacing:-.015em;height:48px}
.search-res{overflow:auto;max-width:var(--wrap);margin:0 auto;width:100%;padding:16px 28px 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translate(-50%,200%);visibility:hidden;background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;font-size:14.5px;font-weight:500;transition:transform .45s var(--sheet);display:flex;gap:10px;align-items:center;white-space:nowrap}
.toast.on{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--sky-2);font-weight:600}

/* phone drawer (2026-10-17): the client's category menu as an accordion. Icon tile + name + count per row; a row
   with sub-categories opens in place (one at a time), a row without goes straight to the shop. */
.mmenu{position:fixed;inset:0;z-index:95;background:#fff;padding:0 0 calc(14px + env(safe-area-inset-bottom));transform:translateX(100%);transition:transform .5s var(--sheet);display:flex;flex-direction:column}
.mmenu.on{transform:none}
.mm-head{flex:none;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 10px 0 20px;border-bottom:1px solid var(--line)}
.mm-head img{height:27px;width:auto}
.mm-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px}
.mm-search{width:100%;height:48px;border-radius:14px;background:var(--mist);display:flex;align-items:center;gap:10px;padding:0 16px;font:500 15px/1 var(--text);color:var(--mute);text-align:left}
.mm-search svg{width:19px;height:19px;color:var(--ink-2);flex:none}
.mm-label{margin:24px 0 4px;font:700 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mm-cats>*{border-bottom:1px solid var(--line)}
.mm-row{width:100%;display:flex;align-items:center;gap:14px;padding:10px 0;text-align:left;color:var(--ink)}
.mm-row span{display:flex;flex-direction:column;gap:4px;font:700 17px/1.15 var(--display);letter-spacing:-.01em}
.mm-row em{font:500 13px/1 var(--text);font-style:normal;letter-spacing:0;color:var(--mute)}
.mm-row .c-ic{width:44px;height:44px;border-radius:13px;transition:background .25s,color .25s}
.mm-row .c-ic svg{width:22px;height:22px}
.mm-row .cv{width:18px;height:18px;margin-left:auto;flex:none;color:var(--mute);transition:transform .35s var(--ease),color .2s}
.mm-cat>.mm-row .cv{transform:rotate(90deg)}
.mm-cat>.mm-row[aria-expanded=true] .cv{transform:rotate(-90deg);color:var(--navy)}
.mm-row[aria-expanded=true] .c-ic{background:var(--navy);color:#fff}
.mm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.mm-row[aria-expanded=true]+.mm-sub{grid-template-rows:1fr}
.mm-sub>div{overflow:hidden;min-height:0;display:flex;flex-direction:column;margin-left:58px}
.mm-sub>div::after{content:"";flex:none;height:10px}
.mm-sub a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font:500 15.5px/1.2 var(--text);color:var(--ink-2)}
.mm-sub a:first-child{border-top:0;font-weight:600;color:var(--navy)}
.mm-sub em{font-style:normal;font-size:12.5px;line-height:1;color:var(--mute);background:var(--mist);border-radius:999px;padding:5px 9px}
.mm-links{display:flex;flex-direction:column;margin-top:18px}
.mm-links a{padding:10px 0;font:500 15px/1.2 var(--text);color:var(--ink-2)}
.mmenu>.btn{flex:none;width:auto;margin:12px 20px 0}

/* ---------- Shop page ---------- */
.page-head{padding:56px 0 34px;background:var(--mist)}
.page-head h1{font-size:clamp(40px,5vw,64px);font-weight:800}
.page-head p{color:var(--ink-2);margin:12px 0 0;font-size:17px}
.crumbs{font-size:13.5px;color:var(--mute);margin-bottom:14px}
.crumbs a:hover{color:var(--ink)}
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:100px}
.rail h4{font-size:15px;font-weight:700;margin:0 0 12px}
.rail-grp{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.chk{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:15px;cursor:pointer;color:var(--ink-2)}
.chk input{width:17px;height:17px;accent-color:var(--navy)}
.chk em{margin-left:auto;font-style:normal;font-size:13px;color:var(--mute)}
.chk.sub{padding:4px 0 4px 27px;font-size:14px}
.rail input[type=range]{width:100%;accent-color:var(--navy)}
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.shop-bar select{height:42px;border:1.5px solid var(--line-2);border-radius:999px;padding:0 16px;background:#fff}
.shop .grid{grid-template-columns:repeat(3,1fr)}
.filter-btn{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .nav-links a{padding:8px 9px;font-size:14px}
  .nav-links a[data-mega-cat=pc-accessories],.nav-links a[data-mega-cat=gaming]{display:none}
  .nav .mega-in{grid-template-columns:240px minmax(0,1fr);gap:28px}
  .mega-picks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-pick:nth-child(4){display:none}
}
@media (max-width:980px){
  .cats{grid-auto-columns:calc((100% - 28px) / 3)}
  .nav-links,.nav-wa{display:none}
  .burger{display:grid}
  .nav-act{margin-left:auto}
  .how{grid-template-columns:1fr;gap:20px}
  .how-phone{display:none}
  .step{min-height:0;opacity:1;padding:26px 0;border-top:1px solid var(--line-2)}
  .why{grid-template-columns:1fr 1fr}
  .why div:nth-child(3){padding-left:0;border-left:0}
  .visit{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;z-index:90;top:0;left:0;bottom:0;width:min(330px,88%);background:#fff;padding:24px;overflow:auto;transform:translateX(-105%);transition:transform .5s var(--sheet)}
  .rail.on{transform:none}
  .filter-btn{display:inline-flex}
  .pdp-grid{grid-template-columns:1fr;padding-bottom:64px}
  .pdp-media{display:contents}
  .pdp-img{order:1}
  .pdp-buy{order:2}
  .pdp-trust{order:3;margin:0}
  .search-res{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .stage-col{justify-content:center}
  .stage-box{max-width:min(560px,100%)}
  .pick{flex-direction:column;padding:6px 4px 12px;gap:0}
  .pick img{width:100%;height:auto;aspect-ratio:1;max-width:84px}
  .pick span{display:none}
}

@media (max-width:760px){
  .pdp-crumbs{padding-top:16px;margin-bottom:14px}
  .pdp-img{border-radius:22px}
  .pdp-trust{grid-template-columns:1fr;gap:8px}
  .pdp-trust li{padding:12px 14px}
  .pdp-specs dl{grid-template-columns:1fr}
  .pdp-specs dl div{grid-template-columns:minmax(100px,.4fr) 1fr;padding:14px 0}
    .wrap{padding:0 20px}
  .nav .wrap{height:60px;gap:10px}
  .nav-logo img{height:27px}
  .nav-act{margin-left:auto;gap:0}
  /* compact phone hero (client, 19 Oct): about 70% of the screen, not all of it, so the brand strip peeks in below.
     Smaller stage, tighter headline, the sub-line is dropped on phones. */
  .hero{min-height:0;padding:calc(60px + 6px) 0 14px}
  /* phone order (Thomas, 14 Oct): the product first, then the headline and line, then the buttons; no picker (swipe or autoplay) */
  .h-copy{display:contents}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero h1{order:2;margin-top:14px;font-size:clamp(29px,8.4vw,38px)}
  .h-sub{display:none}
  .stage-col{order:1}
  .h-ctas{order:4;align-self:stretch;margin-top:14px;flex-wrap:nowrap}
  .h-ctas .btn{flex:1;max-width:none;padding:0 14px;height:46px;font-size:15px}
  .h-ctas .btn-primary{flex:.8}
  /* the room lights up around the product: a full-width pool of its colour */
  .room{background:
      radial-gradient(95% 34% at 50% var(--gy,62%),color-mix(in srgb,var(--tint) 34%,transparent) 0%,color-mix(in srgb,var(--tint) 12%,transparent) 48%,transparent 78%),
      linear-gradient(180deg,#FBFBFC 0%,#F6F7F9 58%,#EEF0F4 100%)}
  .stage-col{flex-direction:column;align-items:center;margin:0 -20px}
  .stage-box{max-width:none;min-width:0;width:min(80vw,36svh,340px);margin:0;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  /* the giant name sits across the top of the stage, the product stands in front of it (a magazine cover) */
  .giant{left:-4%;right:-4%;top:var(--gy,50%);transform:translate3d(calc(var(--px,0)*-26px),calc(-50% + var(--sp,0)*-50px),0)}
  .giant span{color:color-mix(in srgb,var(--tint) 17%,transparent)}
  .tag{position:relative;left:auto;bottom:auto;margin-top:-34px;min-width:0;padding:7px 16px 8px;border-radius:14px;text-align:center}
  .tag b{font-size:15.5px;margin:4px 0 1px}
  .tag span{font-size:12.5px}
  .tag em{display:none}
  .picker{display:none}
  .pick{flex-direction:column;padding:4px 2px 10px;gap:0;border-radius:12px}
  .pick img{width:100%;height:auto;aspect-ratio:1}
  .pick span{display:none}
  .pick i{left:6px;right:6px}
  .sec{padding:76px 0}
  .brand-strip{padding:0 0 64px}
  #categories{padding-bottom:40px}
  .bs-head{margin-bottom:12px}
  .bs-chip{min-width:118px;padding:14px 18px;border-radius:14px}
  .bs-chip b{font-size:20px}
  .bs-chip span{font-size:12px}
  .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .cats{grid-auto-columns:44%;gap:10px;margin:-6px -20px -30px;padding:6px 20px 30px;scroll-padding:0 20px}
  .cs-ctl{width:100%}
  .cs-ctl .link{margin-right:auto}
  .cs-arr{width:40px;height:40px;font-size:24px}
  .cat{min-height:200px;padding:16px 14px 0}
  .cat h3{font-size:17px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 24px;padding:0 20px;scrollbar-width:none}
  .tab{flex:none}
  .grid,.shop .grid{grid-template-columns:1fr}
  .card-img{aspect-ratio:4/3}
  .budget{padding:26px 18px 22px;border-radius:22px}
  .bud-top{grid-template-columns:1fr;gap:16px}
  .bud-picks{justify-content:flex-start}
  .bud-meta{margin-left:0;flex-direction:column;gap:2px}
  .bud-track>i{display:none}
  .bud-rail{margin-left:0}
  .why{grid-template-columns:1fr}
  .why div,.why div+div{padding:24px 0 4px;border-left:0}
  .why div+div{border-top:1px solid var(--line-2)}
  .visit-card,.map{padding:28px 22px}
  .map{min-height:340px}
  .foot-top{grid-template-columns:1fr}
  .sheet{top:auto;height:92svh;width:100%;border-radius:22px 22px 0 0;transform:translateY(105%)}
  .sheet.wide{width:100%}
  .sheet.on{transform:none}
  .search-res{grid-template-columns:1fr}
  .search-in{padding:14px 20px}
  .search-in input{font-size:19px}
  .fab{right:16px;bottom:16px;width:54px;height:54px;transform:scale(0)}
  body.past .fab{transform:none}
}


@media (min-width:761px) and (max-height:760px){
  .hero h1{font-size:clamp(42px,4.8vw,72px)}
  .h-sub{font-size:16.5px;margin:18px 0 24px}
  .pick img{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}