:root{
 --blue:#1565d8; --blue-d:#0d4fae; --red:#e02b2b; --green:#1fa74a; --orange:#f4511e;
 --ink:#212529; --muted:#6c757d; --line:#e2e6ea; --bg:#ffffff; --soft:#f5f7fa; --gold:#f5c518;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
 font:14px/1.5 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
img{max-width:100%} a{color:inherit;text-decoration:none}
.w{max-width:1582px;margin:0 auto;padding:0 16px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* header */
.hdr{border-bottom:1px solid var(--line);background:var(--bg)}
.hdr .w{display:flex;align-items:center;gap:26px;padding:14px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.mark{width:40px;height:38px;background:linear-gradient(135deg,var(--red) 48%,var(--blue) 48%);
 border-radius:5px;display:grid;place-items:center;color:#fff;font:900 20px Roboto;font-style:italic}
.lt{font:900 13px Roboto;letter-spacing:.01em;line-height:1.12;color:#12305c}
.lt em{display:block;font:400 8.5px Roboto;font-style:normal;color:var(--muted);letter-spacing:.03em}
.srch{flex:1;display:flex;border:2px solid var(--blue);border-radius:3px;max-width:600px;overflow:hidden}
.srch input{flex:1;border:0;padding:8px 12px;font:inherit;min-width:0;color:var(--ink);background:#fff}
.srch select{border:0;border-left:1px solid var(--line);background:#fff;padding:0 6px;font:inherit;color:var(--muted)}
.srch button{border:0;background:var(--blue);color:#fff;width:44px;cursor:pointer;font-size:15px}
.acct{display:flex;align-items:center;gap:15px;font-size:11.5px;font-weight:700;color:#12305c}
.ic{position:relative;font-size:17px;color:#12305c}
.ic b{position:absolute;top:-6px;right:-8px;background:var(--blue);color:#fff;font-size:9px;
 border-radius:9px;padding:1px 5px;font-weight:700}
@media(max-width:920px){.srch,.acct{display:none}}

/* nav */
.nav{border-bottom:1px solid var(--line);background:var(--bg)}
.nav .w{display:flex;align-items:stretch;gap:0}
.catbtn{background:var(--blue);color:#fff;font:700 12.5px Roboto;padding:11px 16px;
 display:flex;align-items:center;gap:9px;min-width:200px;justify-content:space-between;cursor:pointer}
.navl{display:flex;align-items:center;gap:20px;padding-left:22px;font:700 11.5px Roboto;
 letter-spacing:.02em;text-transform:uppercase;overflow-x:auto}
.navl a{white-space:nowrap;padding:11px 0}
.navl a:hover{color:var(--blue)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 380px;gap:16px;margin:16px 0}
.banner{border-radius:3px;overflow:hidden;position:relative;
 background:linear-gradient(115deg,#050b18,#122447 55%,#2a1250);
 display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:10px;padding:28px 32px;color:#fff;min-height:430px;--acc:#5ac8fa}
.banner h2{font:900 34px/0.98 Roboto;margin:0;letter-spacing:-.02em}
.banner h2 span{color:var(--acc)}
.bsz{font:900 62px/0.85 Roboto;margin:4px 0 8px;
 background:linear-gradient(90deg,#7b61ff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.bsku{display:inline-block;border:1px solid rgba(255,255,255,.4);padding:3px 9px;font:500 10px Roboto;
 letter-spacing:.1em;border-radius:2px;margin-bottom:14px}
.bspecs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.bspecs span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
 font:500 9.5px Roboto;padding:4px 7px;border-radius:2px;letter-spacing:.03em}
.bprice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bwas{font:500 11px Roboto;opacity:.75} .bwas s{display:block;font-size:13px}
.bnow{font:900 26px Roboto;color:var(--acc)}
.bsave{background:var(--red);color:#fff;font:900 11px Roboto;padding:7px 11px;border-radius:3px;text-align:center;line-height:1.2}
.boffer{position:absolute;top:14px;right:14px;background:var(--red);color:#fff;
 font:900 15px Roboto;padding:8px 16px;border-radius:3px;transform:rotate(6deg);
 box-shadow:0 4px 14px rgba(0,0,0,.35)}
.bimg{display:grid;place-items:center} .bimg img{max-height:290px;object-fit:contain}

/* full-bleed slide artwork ------------------------------------------------
   The frame is a fixed 630px tall but fluid in width, so the picture is
   scaled to cover and centred: it always fills the frame, never letterboxes
   and never stretches. Everything the slide writes is lifted above it. */
.bbg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;display:block}
.bscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(0,0,0,calc(var(--scrim) + .12)) 0%,
    rgba(0,0,0,var(--scrim)) 48%,
    rgba(0,0,0,calc(var(--scrim) * .4)) 100%)}
.banner.hasbg > div,.banner.hasbg .bimg{position:relative;z-index:2}
.banner.hasbg .boffer{z-index:3}
/* a photograph is busier than a flat gradient — keep the wording off it */
.banner.hasbg h2,.banner.hasbg .bhuge,.banner.hasbg .bsz{text-shadow:0 2px 20px rgba(0,0,0,.5)}
.banner.hasbg .kicker,.banner.hasbg .bsub,.banner.hasbg .bwas{text-shadow:0 1px 10px rgba(0,0,0,.6)}
/* an image slide is the artwork and nothing else */
.banner.art{display:block;padding:0}

/* product of the day */
.potd{border:2px solid var(--gold);border-radius:3px;padding:13px;background:var(--bg);display:flex;flex-direction:column}
.potd h4{font:700 15px Roboto;margin:0 0 3px}
.potd .sub{font-size:11px;color:var(--muted);margin:0 0 11px}
.cd{display:flex;gap:5px;margin-bottom:12px}
.cd s{align-self:center;color:var(--red);font-weight:700;text-decoration:none}
.cd b{background:var(--red);color:#fff;font:700 13px Roboto;padding:5px 0;border-radius:3px;
 flex:1;text-align:center;font-variant-numeric:tabular-nums}
.potd .shot{background:#fff;display:grid;place-items:center;padding:8px;position:relative;margin-bottom:9px}
.potd .shot img{max-height:150px;object-fit:contain}
.potd .pct2{position:absolute;top:0;left:0;background:var(--red);color:#fff;font:700 10px Roboto;padding:2px 6px;border-radius:2px}
.potd h5{font:500 12px/1.35 Roboto;margin:0 0 6px}
.potd h5 a{color:inherit;text-decoration:none}
.potd h5 a:hover{color:var(--blue);text-decoration:underline}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:22%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red))}
.potd.over .cd b{background:var(--muted)}
.potd.over .pct2{display:none}
/* The deal card had no button — the only way in was the product name, which
   does not read as clickable at 12px. This is the card's primary action, so
   it gets the brand accent and sits at the bottom edge on desktop where the
   stretched image used to leave a hole. */
/* The WhatsApp handoff on the quote receipt. WhatsApp green rather than the
   brand blue, because people recognise the colour faster than any label. */
.qf-wa{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px 0 10px;padding:13px 18px;border-radius:9px;
  background:#25d366;color:#0b3d20;font:700 14px Roboto;text-decoration:none;
  box-shadow:0 8px 18px -12px rgba(37,211,102,.9);transition:filter .16s,transform .16s}
.qf-wa:hover{filter:brightness(1.05);transform:translateY(-1px);color:#0b3d20}
.qf-wa:focus-visible{outline:3px solid #0b3d20;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.qf-wa{transition:none}.qf-wa:hover{transform:none}}
.potd .dealsave{display:inline-flex;align-self:flex-start;align-items:center;
  margin:0 0 9px;padding:4px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--green,#12784a) 12%,transparent);
  color:var(--green,#12784a);font:700 11.5px Roboto;letter-spacing:.01em}
.potd .dealcta{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:11px;padding:11px 14px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue) 72%,#000));
  color:#fff;font:700 13px Roboto;letter-spacing:.02em;text-decoration:none;
  box-shadow:0 8px 18px -12px var(--blue);transition:filter .16s,transform .16s}
.potd .dealcta:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff}
.potd .dealcta:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.potd.over .dealcta{background:var(--muted);box-shadow:none;pointer-events:none}
@media(prefers-reduced-motion:reduce){.potd .dealcta{transition:none}
  .potd .dealcta:hover{transform:none}}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}
  .banner{grid-template-columns:minmax(0,1fr)}
  /* The slider needs its own height below 901px or it disappears entirely.
     Every .slide is position:absolute, so .slider has no content to be tall
     for; on desktop it borrows 630px from .hero, but here .hero is height:auto
     and 100% of auto resolves to 0. Measured at 0px on both 390px and 800px
     viewports — the whole carousel was rendering invisibly. Heights below
     match .banner's own min-heights at the same breakpoints. */
  .slider{height:auto;min-height:430px}}
@media(max-width:767px){.slider{min-height:452px}}

/* Ready-made artwork on a phone ----------------------------------------
   An `image` slide is a finished banner with the model, price and wording
   printed into the picture. The slide box is portrait on a phone (about
   0.79) while the artwork is 16:9, and `cover` was cropping roughly a third
   off each side — the price was being cut in half. `contain` shows the whole
   thing; the slide's own gradient fills what is left, so it still reads as a
   designed panel rather than a letterboxed photo. Typed and product slides
   keep `cover`, because their wording is live HTML on top and they are meant
   to bleed. */
@media(max-width:900px){
  .banner.art .bbg{object-fit:contain;object-position:center}
  .banner.art{background:linear-gradient(115deg,#050b18,#122447 55%,#2a1250)}
  .slider{min-height:360px}
}
@media(max-width:767px){.slider{min-height:330px}}

/* section heads */
.sh{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:3px;
 padding:12px 15px;margin:22px 0 14px;display:flex;justify-content:space-between;align-items:center}
.sh h2{font:500 19px Roboto;margin:0}
.sh span{font:700 10px Roboto;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.th{font:500 14px Roboto;color:var(--blue);margin:20px 0 10px}

/* trend layout */
.trend{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;
  align-items:start}
/* a grid child must be allowed to shrink below its content, or the inner
   product scroller forces the whole track — and the page — wider than the
   viewport. This is what caused horizontal scrolling on phones. */
.trend > *{min-width:0}
.cs{display:flex;justify-content:space-between;align-items:center;gap:8px;
 border:1px solid var(--line);border-radius:22px;padding:9px 15px;margin-bottom:8px;font-size:12.5px}
.cs em{font-style:normal;background:var(--soft);border-radius:11px;padding:1px 8px;font-size:11px;color:var(--muted)}
.cs.on{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:500}
.cs.on em{background:rgba(255,255,255,.22);color:#fff}
.cs:hover:not(.on){border-color:var(--blue);color:var(--blue)}

/* product cards */
.g4{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.g5{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
/* generic product grid — category listing, recently viewed, search results.
   Lived inline in category.html until the recently-viewed strip on the
   product page used it and got no rule at all. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.pc{border:1px solid var(--line);border-radius:3px;padding:10px;background:var(--bg);
 display:flex;flex-direction:column;gap:5px;transition:box-shadow .15s}
.pc:hover{box-shadow:0 3px 14px rgba(18,48,92,.13)}
.pcimg{position:relative;aspect-ratio:1/.86;display:grid;place-items:center;margin-bottom:4px}
.pcimg img{max-height:100%;object-fit:contain}
.sale{position:absolute;top:0;left:0;background:var(--red);color:#fff;font:700 9px Roboto;
 padding:2px 6px;border-radius:2px;letter-spacing:.03em}
.pct{position:absolute;top:19px;left:0;background:#fff;color:var(--red);font:700 9px Roboto;
 padding:1px 5px;border:1px solid var(--red);border-radius:2px}
.pc h3{font:400 12px/1.36 Roboto;margin:0;min-height:32px}
.pr{margin:0;font-size:12.5px;color:var(--red);font-variant-numeric:tabular-nums}
.pr s{color:var(--muted);font-size:11px} .pr b{font-weight:700}
.stk{margin:0;font:500 9.5px Roboto;color:var(--green);letter-spacing:.05em}
.atc{margin-top:auto;background:var(--blue);color:#fff;border:0;border-radius:3px;
 padding:8px;font:500 12px Roboto;cursor:pointer;width:100%}
.atc:hover{background:var(--blue-d)}
.atc.orange{background:var(--orange)}

.pgn{display:flex;gap:5px;justify-content:center;margin:18px 0 4px;
  flex-wrap:wrap}
.pgn a{min-width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line);
 border-radius:3px;font-size:12px;padding:0 6px}
.pgn a.on{background:#e8f0fd;border-color:var(--blue);color:var(--blue);font-weight:700}

/* feature cards */
.fg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  margin:18px 0}
.fx{border:1px solid var(--line);border-radius:8px;padding:16px;display:grid;
 grid-template-columns:190px 1fr 12px;gap:16px;align-items:center;box-shadow:0 2px 12px rgba(18,48,92,.07)}
.fxi{background:linear-gradient(155deg,
  color-mix(in srgb,var(--blue) 11%,#fff),
  color-mix(in srgb,var(--blue) 4%,#fff));
  border-radius:10px;padding:10px;display:grid;place-items:center}
.fxi img{max-height:150px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.fxb h3{font:500 16px/1.28 Roboto;margin:0 0 7px}
.fxd{font-size:10.5px;color:var(--muted);line-height:1.5;margin:8px 0 12px}
.fxb .atc{width:auto;padding:8px 22px}
.fxdots{display:flex;flex-direction:column;gap:4px;align-items:center}
.fxdots i{width:4px;height:4px;border-radius:50%;background:var(--line)}
.fxdots i.a{background:var(--red);height:22px;border-radius:3px}
@media(max-width:860px){.fg{grid-template-columns:minmax(0,1fr)}
  .fx{grid-template-columns:minmax(0,1fr)}
  .trend{grid-template-columns:minmax(0,1fr)}}

/* footer */
footer{background:var(--blue);color:#fff;margin-top:26px;padding:30px 0 16px;font-size:12.5px}
/* footer grid is defined in the FOOTER block */
footer h5{font:700 13px Roboto;margin:0 0 13px;display:flex;align-items:center;gap:7px}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin-bottom:8px;display:flex;gap:8px;align-items:flex-start;opacity:.95}
.pays{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pays span{background:#fff;border-radius:3px;padding:4px 9px;font:900 10px Roboto;color:#12305c}
.socs{display:flex;gap:8px}
.socs a{width:27px;height:27px;border-radius:50%;background:#fff;color:var(--blue);
 display:grid;place-items:center;font:700 12px Roboto}
.cpy{border-top:1px solid rgba(255,255,255,.22);margin-top:22px;padding-top:13px;text-align:center;
 font-size:11.5px;opacity:.9}

/* hero row fixed to 630px on desktop */
@media(min-width:901px){
  .hero{height:630px}
  .banner,.potd{height:100%;min-height:0}
  .banner{align-content:center}
  .bimg img{max-height:420px}
  .potd{display:flex;flex-direction:column}
  /* The shot used to be flex:1, so the white box stretched to fill the column
     while object-fit:contain kept the banner at its own 16:9 — baking ~230px
     of white into the middle of the card. It now sizes to the picture, and
     the slack goes to the call-to-action pinned at the bottom instead. */
  .potd .shot{flex:0 0 auto;min-height:0}
  .potd .shot img{max-height:none;height:auto;width:100%;object-fit:contain}
  .potd .dealcta{margin-top:auto}
}

/* fill the 1582px row: explicit column counts, not auto-fill */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.trend{grid-template-columns:220px minmax(0,1fr)}
.pcimg{aspect-ratio:1/.78}
.pc h3{font-size:12.5px;min-height:36px}
@media(max-width:1280px){
  .g4{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .g5{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .trend{grid-template-columns:minmax(0,1fr)}


}
@media(max-width:620px){
  .g4,.g5,.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---- global radii: buttons 4px, sections 10px ---- */
button,.atc,.catbtn,.wa,.iconb,.fbtn,.pgn a,.qty,.srch,.srch button,
.bsave,.boffer,.cd b,.pays span{border-radius:4px}
.srch button{border-radius:0 4px 4px 0}
.qty{overflow:hidden}
.tabs button{border-radius:4px 4px 0 0}

.pc,.sh,.banner,.potd,.fx,.fxi,.main,.th,.coupon,.chero,.shots img,
.trend > div > .g4,.sticky{border-radius:10px}
.th{border-radius:6px}
.banner,.potd,.pc,.fx,.main{overflow:hidden}
.sticky{border-radius:10px 10px 0 0}

/* ---- CATEGORIES dropdown ---- */
.nav,.nav .w{overflow:visible}
.catwrap{position:relative;flex-shrink:0}
.catbtn{border:0;width:100%;min-width:250px;cursor:pointer}
.catmenu{position:absolute;top:100%;left:0;min-width:280px;background:#fff;
 border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
 box-shadow:0 10px 28px rgba(18,48,92,.16);z-index:60;
 max-height:520px;overflow-y:auto;display:none}
@media(hover:hover) and (pointer:fine){
  .catwrap:hover .catmenu,.catwrap:focus-within .catmenu{display:block}}
.catmenu.open{display:block}
.catmenu a{display:flex;align-items:center;gap:11px;padding:10px 14px;font-size:13px;
 border-bottom:1px solid #eef1f4;color:var(--ink)}
.catmenu a:last-child{border-bottom:0}
.catmenu a:hover{background:#f2f7fe;color:var(--blue)}
.catmenu svg{width:19px;height:19px;flex-shrink:0;color:var(--blue);opacity:.85}
.catmenu span{flex:1;line-height:1.25}
.catmenu em{font-style:normal;font-size:11px;color:var(--muted);background:var(--soft);
 border-radius:10px;padding:1px 7px}
.catmenu a:hover em{background:#dfeafb;color:var(--blue)}
.catwrap:hover .chev{transform:rotate(180deg)}
.chev{transition:transform .18s}
.catmenu::-webkit-scrollbar{width:7px}
.catmenu::-webkit-scrollbar-thumb{background:#c7ced6;border-radius:4px}

/* ---- header: logo hard-left, search centred, account hard-right ---- */
.hdr .w{display:flex;align-items:center;gap:24px;padding:16px}
.logo{flex:1 1 0;min-width:0;justify-content:flex-start}
.srch{flex:0 1 720px;max-width:720px;margin:0}
.acct{flex:1 1 0;display:flex;justify-content:flex-end;gap:20px}
@media(max-width:1100px){.srch{flex:1 1 auto}}
@media(max-width:920px){.hdr .w{justify-content:space-between}}

/* ---- nav links: roll-up on hover ---- */
.navl a{display:block;overflow:hidden;padding:12px 0;line-height:1.2}
.navl a .rl{display:block;position:relative;transition:transform .34s cubic-bezier(.33,1,.68,1)}
.navl a .rl i{display:block;font-style:normal;line-height:1.2;white-space:nowrap}
.navl a .rl i:last-child{position:absolute;top:100%;left:0;width:100%;color:var(--blue)}
.navl a:hover .rl,.navl a:focus-visible .rl{transform:translateY(-100%)}
.navl a:hover{color:inherit}
@media(prefers-reduced-motion:reduce){
  .navl a .rl{transition:none}
  .navl a:hover .rl{transform:none}
  .navl a:hover{color:var(--blue)}
}

/* ---- fix: clip on .rl (padding-free), animate the two copies ---- */
.navl a{overflow:visible!important;padding:12px 0;display:block;line-height:1.2}
.navl a .rl{display:block;position:relative;height:1.2em;overflow:hidden;
  transform:none!important;transition:none!important}
.navl a .rl i{display:block;font-style:normal;line-height:1.2em;height:1.2em;
  white-space:nowrap;transition:transform .34s cubic-bezier(.33,1,.68,1)}
.navl a .rl i:last-child{position:absolute;top:100%;left:0;width:100%;color:var(--blue)}
.navl a:hover .rl i,.navl a:focus-visible .rl i{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){
  .navl a .rl i{transition:none}
  .navl a:hover .rl i{transform:none}
  .navl a:hover .rl i:first-child{color:var(--blue)}
}

/* ---- hero slider: compositor-only animation, no library ---- */
.slider{position:relative;height:100%;border-radius:10px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;pointer-events:none}
.slide.on{opacity:1;transform:scale(1);pointer-events:auto}
.slink{position:absolute;inset:0;z-index:4}
.hero.solo{grid-template-columns:minmax(0,1fr)}
.slide .banner{height:100%;border-radius:0;min-height:0}
.snav{position:absolute;bottom:16px;right:18px;display:flex;gap:8px;z-index:5}
.snav button{width:34px;height:34px;border-radius:4px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.32);color:#fff;font-size:14px;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:background .18s}
.snav button:hover{background:rgba(0,0,0,.6)}
.sdots{position:absolute;bottom:22px;left:32px;display:flex;gap:7px;z-index:5}
.sdots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;
  transition:width .3s,background .3s}
.sdots i.on{width:26px;border-radius:5px;background:#fff}
/* slides 2-3 are pure CSS - they add no image weight */
.s2{background:linear-gradient(115deg,#06202e,#0b3d4d 55%,#116173)}
.s3{background:linear-gradient(115deg,#1a0f2e,#301a4d 50%,#5b2a6b)}
.kicker{font:700 11px/1.4 Roboto;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);margin:0 0 10px}
.bhuge{font:900 clamp(34px,4.6vw,62px)/0.95 Roboto;letter-spacing:-.03em;margin:0 0 6px;color:#fff}
.bsub{font:500 15px Roboto;opacity:.82;max-width:44ch;margin:0 0 20px}
.bpill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:9px 16px;font:700 12px Roboto;
  letter-spacing:.03em;margin-right:9px;margin-bottom:9px}
.bcta{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:4px;
  cursor:pointer;
  padding:12px 26px;font:700 13px Roboto;cursor:pointer;margin-top:6px}
.bstat{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap}
.bstat div b{display:block;font:900 27px Roboto;color:var(--acc)}
.bstat div span{font:500 11px Roboto;opacity:.72;letter-spacing:.05em}
@media(prefers-reduced-motion:reduce){.slide{transition:opacity .01s}.slide{transform:none!important}}

/* ---- horizontal product scroller ---- */
.hs{position:relative}
.hrow{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 4px}
.hrow::-webkit-scrollbar{display:none}
.hrow > .pc{flex:0 0 calc((100% - 36px)/4);scroll-snap-align:start}
.hnav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:34px;height:34px;border-radius:4px;border:1px solid rgba(255,255,255,.35);
  background:rgba(15,23,42,.68);color:#fff;font-size:14px;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:background .18s,opacity .18s;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.hnav:hover{background:rgba(15,23,42,.9)}
.hnav[disabled]{opacity:.25;cursor:default}
.hnav.pv{left:-8px} .hnav.nx{right:-8px}
@media(max-width:1280px){.hrow > .pc{flex:0 0 calc((100% - 24px)/3)}}
@media(max-width:980px){.hrow > .pc{flex:0 0 calc((100% - 12px)/2)}}
@media(max-width:620px){.hrow > .pc{flex:0 0 78%}}

/* ---- category tabs drive the product row ---- */
.csbar{display:flex;flex-direction:column;gap:8px}
.cs{width:100%;text-align:left;font:inherit;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-radius:22px;padding:9px 15px;font-size:12.5px;color:var(--ink);transition:all .16s}
.cs.on{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:500}
.cs.on em{background:rgba(255,255,255,.22);color:#fff}

/* Once .trend drops to one column the category tabs are no longer a sidebar,
   and stacking six full-width pills pushed the products a whole screen down.
   They become a single scrolling row instead — the pattern a phone user
   already expects from a tab strip.

   This block has to sit *after* the base `.csbar{flex-direction:column}`
   above: both have the same specificity, so source order decides, and the
   same rules placed earlier in the file did nothing at all. */
@media(max-width:980px){
  .csbar{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed to both edges so the first and last chip can sit flush */
    margin-inline:-12px;padding:2px 12px 6px}
  .csbar::-webkit-scrollbar{display:none}
  .cs{width:auto;flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
    justify-content:flex-start;gap:7px}
}
.hrow[hidden]{display:none}
.noitems{padding:34px 18px;color:var(--muted);font-size:13px;line-height:1.6;
  background:var(--soft);border-radius:10px;width:100%;text-align:center}
.hrow.empty{overflow:visible}

/* ================================================================
   THEME TOKENS - these six values are what the admin writes.
   Server renders them into :root; everything else derives from them.
   ================================================================ */
:root{
  --page:#f1f3f6;        /* page background   (admin) */
  --surface:#ffffff;     /* section / card bg (admin) */
  --blue:#1565d8;        /* accent            (admin) */
  --ink:#212529;
  --muted:#6c757d;
  --line:#e3e7ec;
  --soft:#f5f7fa;
  --blue-d:#0d4fae; --red:#e02b2b; --green:#1fa74a;
  --orange:#f4511e; --gold:#f5c518;
  --shadow:0 1px 3px rgba(18,48,92,.07);
}
/* system dark - only when the owner has not forced light */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0f1419; --surface:#181f27; --ink:#e6eaee; --muted:#94a2b0;
    --line:#28323d; --soft:#1f2831; --blue:#4d94f0; --blue-d:#2f7ae0;
    --red:#ff6b6b; --green:#3ecf7a; --gold:#f0c945;
    --shadow:0 1px 3px rgba(0,0,0,.5);
  }
}
/* explicit dark choice wins over a light OS */
:root[data-theme="dark"]{
  --page:#0f1419; --surface:#181f27; --ink:#e6eaee; --muted:#94a2b0;
  --line:#28323d; --soft:#1f2831; --blue:#4d94f0; --blue-d:#2f7ae0;
  --red:#ff6b6b; --green:#3ecf7a; --gold:#f0c945;
  --shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ---- surfaces: page is grey, sections are white ---- */
body{background:var(--page);color:var(--ink)}
.hdr,.nav,.pc,.potd,.fx,.main,.catmenu,.trust,.sh{background:var(--surface)}
.sh{border:1px solid var(--line);border-left:4px solid var(--blue)}
.cs{background:var(--surface);color:var(--ink)}
.cs.on{background:var(--blue);color:#fff}
.shot,.pcimg,.heroshot{background:var(--surface)}
.srch input,.srch select{background:var(--surface);color:var(--ink)}
.pgn a{background:var(--surface);border-color:var(--line);color:var(--ink)}
.pgn a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.qty input,.qty button{background:var(--surface);color:var(--ink)}
.noitems{background:var(--soft)}
.chip,.spl b{color:var(--ink)}

/* dark-mode adjustments that tokens alone can't reach */
:root[data-theme="dark"] .pcimg img,
:root:not([data-theme="light"]) .pcimg img{mix-blend-mode:normal}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pcimg,
  :root:not([data-theme="light"]) .shot{background:#fff;border-radius:8px}
}
:root[data-theme="dark"] .pcimg,
:root[data-theme="dark"] .shot{background:#fff;border-radius:8px}
:root[data-theme="dark"] .logo .lt{color:#dce4ee}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .lt{color:#dce4ee}}

/* ---- theme toggle ---- */
.tt{width:36px;height:36px;border-radius:4px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .18s,border-color .18s;flex-shrink:0}
.tt:hover{border-color:var(--blue);color:var(--blue)}
.tt svg{width:18px;height:18px}
.tt .moon{display:none}
:root[data-theme="dark"] .tt .moon{display:block}
:root[data-theme="dark"] .tt .sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tt .moon{display:block}
  :root:not([data-theme="light"]) .tt .sun{display:none}
}

/* ---- dark-mode fixes: replace colour literals with tokens ---- */
.acct,.acct a,.ic{color:var(--ink)}
.acct a:hover{color:var(--blue)}
.logo .lt{color:var(--ink)}
.logo .lt em{color:var(--muted)}
.catmenu a{border-bottom:1px solid var(--line);color:var(--ink)}
.catmenu a:hover{background:var(--soft);color:var(--blue)}
.catmenu em{background:var(--soft);color:var(--muted)}
.catmenu a:hover em{background:var(--line);color:var(--blue)}
.catmenu::-webkit-scrollbar-thumb{background:var(--line)}
.pgn a{color:var(--ink)}
.pgn a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tabbody p,.feats{color:var(--muted)}
.chip{background:var(--soft);border-color:var(--line);color:var(--muted)}
.sticky{background:var(--surface);border-top-color:var(--line)}
.qty button{background:var(--soft)}
.srch{border-color:var(--blue)}
.tt{color:var(--ink)}
/* footer keeps brand blue but eases off in dark so it is not a glare panel */
:root[data-theme="dark"] footer{background:#123a6b}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) footer{background:#123a6b}
}

/* ================= glass + depth ================= */
:root{
  --glass:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.55);
  --lift:0 10px 30px -12px rgba(18,48,92,.28);
  --ring:0 0 0 1px rgba(18,48,92,.06);
}
:root[data-theme="dark"]{
  --glass:rgba(20,26,33,.78); --glass-line:rgba(255,255,255,.07);
  --lift:0 10px 30px -12px rgba(0,0,0,.7); --ring:0 0 0 1px rgba(255,255,255,.05);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --glass:rgba(20,26,33,.78); --glass-line:rgba(255,255,255,.07);
  --lift:0 10px 30px -12px rgba(0,0,0,.7); --ring:0 0 0 1px rgba(255,255,255,.05);
}}

/* ---- sticky glass topbar (hdr + nav travel together) ---- */
.topbar{position:sticky;overflow:visible;top:0;z-index:50;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s,border-color .25s}
.topbar.stuck{box-shadow:0 6px 26px -14px rgba(18,48,92,.45)}
:root[data-theme="dark"] .topbar.stuck{box-shadow:0 6px 26px -10px rgba(0,0,0,.8)}
.topbar .hdr,.topbar .nav{background:transparent;border-bottom:0}
.topbar .nav{border-top:1px solid var(--line)}
/* header shrinks slightly once you scroll - reclaims vertical space */
.topbar .hdr .w{transition:padding .25s}
.topbar.stuck .hdr .w{padding-top:9px;padding-bottom:9px}

/* ---- section polish ---- */
.sh{background:linear-gradient(90deg,var(--surface),var(--surface));
  box-shadow:var(--ring);position:relative;overflow:hidden}
.sh:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--blue),color-mix(in srgb,var(--blue) 40%,var(--gold)))}
.th{display:flex;align-items:center;gap:10px}
.th:after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}

/* ---- cards: quieter at rest, lift on hover ---- */
.pc{box-shadow:var(--ring);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
.pc:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.pc .atc{transition:background .18s,transform .18s}
.pc:hover .atc{background:var(--blue-d)}

/* ---- product of the day: glass card on a tinted ground ---- */
.potd{background:
  linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,var(--surface)),var(--surface));
  box-shadow:var(--ring)}
.potd .shot{border:1px solid var(--line);border-radius:8px}

/* ---- category rail ---- */
.cs{box-shadow:var(--ring)}
.cs:not(.on):hover{border-color:var(--blue);color:var(--blue);transform:translateX(3px)}
.cs.on{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--blue) 70%,transparent)}

/* ---- glass dropdown ---- */
.catmenu{background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:var(--lift),var(--ring)}

/* ---- feature cards ---- */
.fx{box-shadow:var(--ring);transition:box-shadow .22s}
.fx:hover{box-shadow:var(--lift)}
.fxi{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ---- slider chrome ---- */
.snav button,.hnav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ================= responsive header ================= */
.burger{display:none;width:38px;height:36px;border-radius:4px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;place-items:center;flex-shrink:0}
.burger svg{width:19px;height:19px}
@media(max-width:1100px){
  .srch{flex:1 1 auto;max-width:none}
}
@media(max-width:920px){
  .burger{display:grid}
  .hdr .w{flex-wrap:wrap;gap:12px;padding:12px 16px}
  .logo{flex:1 1 auto;order:1}
  .burger{order:0}
  .acct{flex:0 0 auto;order:2;gap:13px}
  .acct a{display:none}
  /* Search and Categories share one row that runs the full width of the
     screen. app.js lifts .catwrap up into the header row at this breakpoint;
     the pair is wrapped in .mrow so the two sit flush against each other and
     against both edges. */
  .srch{order:3;flex:1 1 auto;display:flex;max-width:none;border-radius:0}
  /* the header row pads 12px each side; cancel exactly that so the bar meets
     both screen edges without overhanging and causing a sideways scroll */
  .mrow{order:3;flex:1 1 100%;display:flex;align-items:stretch;gap:0;
    margin:0 -12px;width:calc(100% + 24px)}
  .mrow .catwrap{flex:0 0 auto;width:auto}
  .mrow .srch{flex:1 1 auto;border-left:0;border-right:0}
  .mrow .catbtn{height:100%;border-radius:0;white-space:nowrap;padding:11px 13px;
    gap:8px;min-width:0;justify-content:center}
  /* The mobile rule further down sets .catmenu{position:static} so the list
     used to expand inline beneath a full-width bar. Sharing a row with the
     search, an in-flow menu stretches the row — the button grew to 547px and
     swallowed the header. Inside .mrow it overlays instead. */
  .mrow .catwrap{position:relative}
  .mrow .catmenu{position:absolute;top:100%;left:0;right:auto;
    min-width:min(92vw,320px);max-height:70vh;border-radius:0 0 10px 10px;
    box-shadow:0 14px 30px rgba(18,48,92,.22);z-index:60}
  .nav .w{flex-direction:column;align-items:stretch;gap:0}
  .catwrap{width:100%}
  .catbtn{min-width:0;justify-content:space-between}
  .navl{display:none;padding:0;flex-direction:column;gap:0;
    border-top:1px solid var(--line)}
  .navl.open{display:flex}
  .navl a{padding:11px 4px;border-bottom:1px solid var(--line)}
  .navl a:last-child{border-bottom:0}
  .catmenu{position:static;min-width:0;border-radius:0;box-shadow:none;max-height:320px}
}
@media(max-width:620px){
  .hero{gap:12px}
  .sh h2{font-size:17px}
  .logo .lt{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .pc,.pc:hover,.cs:hover{transform:none;transition:none}
}

/* ==================== PREMIUM PASS ====================
   Restraint over decoration: one accent doing the work,
   tighter type, quieter chrome, generous rhythm.
   ====================================================== */
:root{
  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tile:#f7f8fa;              /* product photo ground */
  --edge:color-mix(in srgb,var(--line) 70%,transparent);
}
:root[data-theme="dark"]{--tile:#0f1419}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tile:#0f1419}}

body{font-family:var(--font-ui);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---- type: fewer sizes, more weight contrast ---- */
.logo .lt{font:800 14px/1.1 var(--font-ui);letter-spacing:-.03em}
.logo .lt em{font:500 8px var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.navl{font:600 11.5px var(--font-ui);letter-spacing:.06em}
.catbtn{font:700 12.5px var(--font-ui);letter-spacing:.04em}
.th{font:700 13px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sh h2{font:700 20px var(--font-ui);letter-spacing:-.025em;color:var(--ink)}
.sh span{font:600 10px var(--font-ui);letter-spacing:.13em}
.pc h3{font:500 12.5px/1.45 var(--font-ui);letter-spacing:-.004em;min-height:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pr b{font-weight:700;font-size:14px;color:var(--ink)}
.pr s{font-weight:400;font-size:11px;color:var(--muted);opacity:.75}
.stk{font:700 9px var(--font-ui);letter-spacing:.11em}
.cs{font:600 12.5px var(--font-ui);letter-spacing:-.005em}
.cs em{font-variant-numeric:tabular-nums;font-weight:600}

/* ---- product tile: photo sits on a ground, and breathes on hover ---- */
.pc{padding:0;overflow:hidden;border-color:var(--edge)}
.pcimg{background:var(--tile);margin:0;border-radius:0;padding:16px;aspect-ratio:1/.82;
  border-bottom:1px solid var(--edge)}
.pcimg img{transition:transform .55s cubic-bezier(.22,1,.36,1);max-height:100%}
.pc:hover .pcimg img{transform:scale(1.06)}
.pc > :not(.pcimg){margin-left:13px;margin-right:13px}
.pc h3{margin-top:11px}
.pc .atc{margin:11px 0 13px;width:calc(100% - 0px);border-radius:4px;
  font:700 11.5px var(--font-ui);letter-spacing:.05em;text-transform:uppercase;
  background:var(--ink);color:var(--surface)}
.pc:hover .atc{background:var(--blue);color:#fff}

/* ---- one badge, not two ---- */
.sale{display:none}
.pct{top:12px;left:12px;background:var(--red);color:#fff;border:0;
  font:700 10px var(--font-ui);letter-spacing:.04em;padding:4px 8px;border-radius:4px;
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--red) 70%,transparent)}
.pct:after{content:" OFF"}

/* ---- buttons: quieter, more deliberate ---- */
.atc,.catbtn,.wa,.bcta{font-family:var(--font-ui);font-weight:700;letter-spacing:.03em}
.srch{border-width:1.5px;border-color:var(--edge);border-radius:6px;overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.srch:focus-within{border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent)}
.srch input{font:500 13.5px var(--font-ui);padding:11px 15px}
.srch button{border-radius:0;width:52px}
.tt,.burger{border-color:var(--edge)}

/* ---- section headers: rule, not box ---- */
.sh{border:0;box-shadow:none;background:none;padding:0 0 12px;
  border-bottom:2px solid var(--ink);border-radius:0;margin:34px 0 18px}
.sh:before{display:none}
.th{margin:30px 0 14px}

/* ---- rhythm ---- */
.hero{margin-bottom:8px}
.g5,.hrow{gap:14px}
.trend{gap:20px}

/* ---- Product of the Day: calmer ---- */
.potd{border-width:1px;border-color:var(--edge);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 6%,var(--surface)) 0%,var(--surface) 40%)}
.potd h4{font:700 15px var(--font-ui);letter-spacing:-.02em}
.potd .sub{font:500 11px var(--font-ui);color:var(--muted)}
.cd b{font:700 14px var(--font-ui);font-variant-numeric:tabular-nums;
  background:var(--ink);color:var(--surface);border-radius:5px;padding:7px 0}
.cd s{color:var(--muted)}
.potd .shot{background:var(--tile);border-color:var(--edge)}

/* ---- footer: structured, not a colour block ---- */
/* footer palette lives in the FOOTER block below */
:root[data-theme="dark"] footer{background:#0b1015}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) footer{background:#0b1015}}
footer h5{font:700 10.5px var(--font-ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--surface);opacity:.55;margin-bottom:15px}
footer li{font:500 12.5px var(--font-ui);opacity:.78;line-height:1.75}
.pays span{background:color-mix(in srgb,var(--surface) 12%,transparent);
  color:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--surface) 20%,transparent);
  font:600 9.5px var(--font-ui);letter-spacing:.09em;padding:6px 11px}
.socs a{background:color-mix(in srgb,var(--surface) 12%,transparent);
  color:var(--surface);border:1px solid color-mix(in srgb,var(--surface) 20%,transparent)}
.socs a:hover{background:var(--blue);border-color:var(--blue)}
.cpy{font:500 11px var(--font-ui);letter-spacing:.06em;opacity:.5;
  border-top-color:color-mix(in srgb,var(--surface) 14%,transparent)}

/* ---- pagination ---- */
.pgn a{font:600 12px var(--font-ui);border-color:var(--edge);min-width:32px;height:32px}
.pgn a.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* ---- slider chrome: smaller, more precise ---- */
.sdots i{background:color-mix(in srgb,#fff 45%,transparent)}
.snav button,.hnav{border-radius:4px;border-color:color-mix(in srgb,#fff 25%,transparent)}

/* ---- category dropdown: solid, not glass ---- */
.catmenu{background:var(--surface)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1px solid var(--line);border-top:0;
  box-shadow:0 14px 34px -14px rgba(18,48,92,.4)}
:root[data-theme="dark"] .catmenu{box-shadow:0 14px 34px -12px rgba(0,0,0,.85)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .catmenu{box-shadow:0 14px 34px -12px rgba(0,0,0,.85)}
}
.catmenu a{background:var(--surface)}
.catmenu a:hover{background:var(--soft)}

/* ---- buttons back to the earlier blue treatment ---- */
.pc .atc,.atc{background:var(--blue);color:#fff;text-transform:none;
  font:500 12px var(--font-ui);letter-spacing:normal;border-radius:4px}
.pc:hover .atc,.atc:hover{background:var(--blue-d);color:#fff}
.atc.orange{background:var(--orange)}
.atc.orange:hover{background:#d84315}
/* pagination active back to blue */
.pgn a.on{background:#e8f0fd;border-color:var(--blue);color:var(--blue);font-weight:700}
:root[data-theme="dark"] .pgn a.on{background:color-mix(in srgb,var(--blue) 22%,transparent);
  border-color:var(--blue);color:var(--blue)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pgn a.on{
    background:color-mix(in srgb,var(--blue) 22%,transparent);
    border-color:var(--blue);color:var(--blue)}
}
/* countdown blocks back to red */
.cd b{background:var(--red);color:#fff}

/* ---- product cards: solid white, no tinted tile ---- */
.pc{background:#fff!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pcimg{background:#fff!important}
.pc h3,.pc .pr b{color:#212529}
.pc .pr s{color:#6c757d}
/* dark mode: card body follows the theme, photo keeps its white tile */
:root[data-theme="dark"] .pc{background:var(--surface)!important}
:root[data-theme="dark"] .pc h3,:root[data-theme="dark"] .pc .pr b{color:var(--ink)}
:root[data-theme="dark"] .pcimg{background:#fff!important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pc{background:var(--surface)!important}
  :root:not([data-theme="light"]) .pc h3,
  :root:not([data-theme="light"]) .pc .pr b{color:var(--ink)}
  :root:not([data-theme="light"]) .pcimg{background:#fff!important}
}
/* same for the other white panels */
.potd,.fx,.main{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.potd .shot,.fxi ~ *,.shot{background:#fff}

/* ---- add-to-cart inset from the card edges ---- */
.pc .atc{margin:12px 14px 14px!important;width:auto!important;
  align-self:stretch;padding:10px 12px}
.pc .stk{margin-bottom:2px}

/* ---- add-to-cart + WhatsApp on one line ---- */
.buyrow{display:flex;gap:8px;margin:12px 14px 14px;align-items:stretch}
.buyrow .atc{flex:1 1 auto;margin:0!important;width:auto!important}
.wa-mini{flex:0 0 42px;width:42px;border-radius:4px;background:#25D366;color:#fff;
  display:grid;place-items:center;border:0;cursor:pointer;text-decoration:none;
  transition:background .18s,transform .18s}
.wa-mini:hover{background:#1da851;transform:translateY(-1px)}
.wa-mini:active{transform:none}
.wa-mini svg{width:21px;height:21px;fill:currentColor}
.wa-mini[hidden]{display:none}
@media(max-width:620px){.buyrow{margin:10px 11px 11px}.wa-mini{flex:0 0 38px;width:38px}}
/* WhatsApp CTA under the product buy row */
.warow{margin:12px 0 0}
.warow .wa{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  height:46px;border-radius:4px;background:#25D366;color:#fff;text-decoration:none;
  font-family:var(--font-ui);font-weight:700;font-size:14px;letter-spacing:.03em;
  transition:background .18s,transform .18s}
.warow .wa:hover{background:#1da851;transform:translateY(-1px)}
.warow .wa:active{transform:none}
.warow .wa svg{width:19px;height:19px;fill:currentColor;flex:0 0 19px}

/* ================= CART ================= */
.cartbtn{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--edge);border-radius:6px;padding:6px 12px 6px 10px;cursor:pointer;
  color:var(--ink);font-family:var(--font-ui);transition:border-color .18s,box-shadow .18s}
.cartbtn:hover{border-color:var(--blue)}
.cartbtn.pop{animation:cartPop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes cartPop{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
.cartbtn .ci{position:relative;display:grid;place-items:center;font-size:18px;line-height:1}
/* The trolley is an inline <svg> with a viewBox and no width or height of its
   own, inside a grid cell that has nothing to size it from — so it computed to
   0x0 and the header showed the count badge floating beside an icon that was
   never drawn. A phone-width rule further down happened to give it a size,
   which is why it only looked right on a phone. It also gave the fly-to-cart
   animation a zero-size target to aim at. */
.cartbtn .ci svg{width:22px;height:22px;display:block}
.cartbtn .cnt{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;font:700 10px var(--font-ui);
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.cartbtn .ct{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.cartbtn .ct small{font:600 8.5px var(--font-ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.cartbtn .ct b{font:700 12.5px var(--font-ui);font-variant-numeric:tabular-nums}
@media(max-width:620px){.cartbtn .ct{display:none}}

/* the item on its way to the basket.
   The shell only carries the horizontal travel and must stay invisible; the
   picture inside it carries the vertical travel and the shrink, so the white
   tile and its shadow shrink with the picture rather than hanging around it
   at full size. Both layers are promoted, and neither is ever read back. */
.fly{position:fixed;pointer-events:none;z-index:9999;will-change:transform}
.fly img{display:block;width:100%;height:100%;object-fit:contain;
  border-radius:10px;background:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);
  will-change:transform,opacity}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(8,14,20,.5);z-index:200;opacity:0;
  pointer-events:none;transition:opacity .3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--surface);
  z-index:201;transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;box-shadow:-18px 0 50px -20px rgba(0,0,0,.5)}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.dhead h3{font:700 16px var(--font-ui);letter-spacing:-.02em;margin:0;flex:1}
.dhead .n{font:600 11px var(--font-ui);color:var(--muted)}
.dclose{width:32px;height:32px;border-radius:4px;border:1px solid var(--edge);background:var(--surface);
  color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
.dclose:hover{border-color:var(--red);color:var(--red)}

/* guidance strip - the narrative layer */
.guide{padding:13px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 7%,var(--surface)),var(--surface))}
.guide p{margin:0;font:500 12.5px/1.55 var(--font-ui);color:var(--ink)}
.guide p b{font-weight:700}
.guide .prog{height:6px;border-radius:4px;background:var(--line);margin-top:10px;overflow:hidden}
.guide .prog i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:width .5s cubic-bezier(.22,1,.36,1)}
.guide.win{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 11%,var(--surface)),var(--surface))}

.ditems{flex:1;overflow-y:auto;padding:6px 20px}
.ci-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:13px;padding:15px 0;
  border-bottom:1px solid var(--line);align-items:start}
.ci-row:last-child{border-bottom:0}
.ci-row img{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--edge);
  border-radius:8px;padding:5px}
.ci-nm{font:600 12.5px/1.4 var(--font-ui);margin:0 0 4px}
.ci-pr{font:700 13px var(--font-ui);color:var(--red);font-variant-numeric:tabular-nums;margin:0}
.ci-ctl{display:flex;align-items:center;gap:0;border:1px solid var(--edge);border-radius:4px;
  overflow:hidden;margin-top:8px;width:fit-content}
.ci-ctl button{width:26px;height:26px;border:0;background:var(--soft);color:var(--ink);
  cursor:pointer;font-size:14px;line-height:1}
.ci-ctl button:hover{background:var(--blue);color:#fff}
.ci-ctl span{min-width:30px;text-align:center;font:600 12px var(--font-ui);
  font-variant-numeric:tabular-nums}
.ci-rm{background:none;border:0;color:var(--muted);cursor:pointer;font:500 10.5px var(--font-ui);
  text-decoration:underline;padding:0;margin-top:7px}
.ci-rm:hover{color:var(--red)}
.ci-line{font:700 13px var(--font-ui);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.dempty{padding:46px 24px;text-align:center}
.dempty svg{width:52px;height:52px;color:var(--line);margin-bottom:14px}
.dempty h4{font:700 15px var(--font-ui);margin:0 0 7px}
.dempty p{font:500 12.5px/1.6 var(--font-ui);color:var(--muted);margin:0 0 18px}

.dfoot{border-top:1px solid var(--line);padding:16px 20px 20px;background:var(--surface)}
.drow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;
  font:500 12.5px var(--font-ui);color:var(--muted)}
.drow.total{font:800 18px var(--font-ui);color:var(--ink);margin:11px 0 4px;
  font-variant-numeric:tabular-nums}
.drow.save{color:var(--green);font-weight:600}
.dtrust{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 14px;
  font:600 9.5px var(--font-ui);letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.dtrust span{display:flex;align-items:center;gap:5px}
.dtrust b{color:var(--green);font-size:11px}
.dcta{display:grid;gap:8px}
.dcta button,.dcta a{padding:13px;border-radius:4px;border:0;cursor:pointer;text-align:center;
  font:700 12.5px var(--font-ui);letter-spacing:.04em;text-decoration:none;display:block}
.dcta .pay{background:var(--blue);color:#fff}
.dcta .pay:hover{background:var(--blue-d)}
.dcta .wa{background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.dcta .wa:hover{background:#1da851}
.dcta .wa svg{width:17px;height:17px;fill:currentColor}
.dnote{font:500 10.5px/1.5 var(--font-ui);color:var(--muted);text-align:center;margin:11px 0 0}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;
  background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:6px;
  font:600 12.5px var(--font-ui);opacity:0;pointer-events:none;
  transition:opacity .28s,transform .28s;box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
  display:flex;align-items:center;gap:10px;max-width:min(420px,92vw)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:#4ade80}
@media(prefers-reduced-motion:reduce){
  /* The flight is not hidden here any more. It shortens itself instead — see
     `calm` in app.js — because hiding it outright left anyone with "reduce
     motion" set on their computer or phone with no sign of where the thing
     they just tapped had gone, in every browser on that machine at once. */
  .drawer{transition:none}.scrim{transition:none}.cartbtn.pop{animation:none}
}

/* ---- header: nothing wraps, search absorbs the slack ---- */
.hdr .w{flex-wrap:nowrap;gap:18px}
.logo{flex:0 0 auto;white-space:nowrap}
.srch{flex:1 1 auto;min-width:0;max-width:720px}
.srch input{min-width:0}
.acct{flex:0 0 auto;white-space:nowrap;gap:14px;justify-content:flex-end}
.acct > *{flex-shrink:0}
.cartbtn{white-space:nowrap;flex-shrink:0}
.cartbtn .ct{white-space:nowrap}
.cartbtn .ct b{white-space:nowrap;font-variant-numeric:tabular-nums}
.acct a{white-space:nowrap}
@media(max-width:1240px){.acct a{display:none}}
@media(max-width:1040px){
  .cartbtn .ct small{display:none}
  .cartbtn .ct b{font-size:11.5px}
}
@media(max-width:920px){
  .hdr .w{flex-wrap:wrap}
  .srch{flex:1 1 100%;max-width:none}
  .acct{flex:0 0 auto}
  .cartbtn .ct{display:flex}
}
@media(max-width:620px){.cartbtn .ct{display:none}}

/* ---- header spans edge to edge; search fills the middle ---- */
.hdr .w{display:flex;flex-wrap:nowrap;align-items:center;gap:20px;
  justify-content:space-between;width:100%}
.logo{flex:0 0 auto;margin-right:0}
.srch{flex:1 1 auto;min-width:0;max-width:none!important}
.acct{flex:0 0 auto;margin-left:0}
@media(max-width:920px){
  .hdr .w{flex-wrap:wrap}
  .srch{flex:1 1 100%}
}
/* ---- search suggestions ---- */
.srchwrap{position:relative;flex:1 1 auto;min-width:0;display:flex}
.sugg{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:70;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 44px -16px rgba(18,48,92,.45);overflow:hidden;display:none;
  max-height:min(70vh,470px);overflow-y:auto}
:root[data-theme="dark"] .sugg{box-shadow:0 18px 44px -14px rgba(0,0,0,.85)}
.sugg.on{display:block}
.sugg .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:11px 15px;cursor:pointer;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sugg .row:last-child{border-bottom:0}
.sugg .row:hover,.sugg .row.sel{background:var(--soft)}
.sugg .row.sel{box-shadow:inset 3px 0 0 var(--blue)}
.sugg .nm{font:500 12.5px/1.4 var(--font-ui);margin:0 0 3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sugg .nm mark{background:color-mix(in srgb,var(--blue) 22%,transparent);
  color:inherit;font-weight:700;padding:0 1px;border-radius:2px}
.sugg .mt{font:600 9.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:9px;align-items:center}
.sugg .mt .oos{color:var(--red)}
.sugg .mt .ins{color:var(--green)}
.sugg .px{font:700 13px var(--font-ui);color:var(--red);font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}
.sugg .px s{display:block;font:400 10px var(--font-ui);color:var(--muted)}
.sugg .head,.sugg .foot{padding:9px 15px;font:600 10px var(--font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--soft)}
.sugg .foot{text-align:center;cursor:pointer;color:var(--blue);letter-spacing:.06em;
  border-top:1px solid var(--line)}
.sugg .foot:hover{background:color-mix(in srgb,var(--blue) 9%,transparent)}
.sugg .none{padding:26px 18px;text-align:center;color:var(--muted);
  font:500 12.5px/1.6 var(--font-ui)}
.sugg .none b{color:var(--ink)}
.sugg .load{padding:18px;text-align:center;color:var(--muted);font:500 12px var(--font-ui)}

/* ---- suggestion thumbnails ---- */
.sugg .row{grid-template-columns:44px minmax(0,1fr) auto;gap:12px}
.sugg .th{width:44px;height:44px;border:1px solid var(--edge);border-radius:6px;
  background:#fff;object-fit:contain;padding:3px;flex-shrink:0}
.sugg .th.ph{display:grid;place-items:center;color:var(--line)}
.sugg .th.ph svg{width:20px;height:20px}

/* ---- add-to-cart inside a suggestion ---- */
.sugg .row{grid-template-columns:44px minmax(0,1fr) auto 36px}
.sadd{width:36px;height:36px;border-radius:4px;border:1px solid var(--edge);
  background:var(--surface);color:var(--blue);cursor:pointer;display:grid;place-items:center;
  transition:background .16s,color .16s,border-color .16s,transform .16s;padding:0}
.sadd svg{width:17px;height:17px}
.sadd:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.sadd:active{transform:scale(.92)}
.sadd.done{background:var(--green);border-color:var(--green);color:#fff}
.sadd.off{border:0;background:none;color:var(--line);font-size:15px;cursor:default}
@media(max-width:620px){.sugg .row{grid-template-columns:38px minmax(0,1fr) auto 32px}
  .sadd{width:32px;height:32px}}

/* ================= MEGA MENUS ================= */
.megawrap{position:absolute;left:0;right:0;top:100%;z-index:45}
.mega{display:none;background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(18,48,92,.45)}
:root[data-theme="dark"] .mega{box-shadow:0 22px 44px -18px rgba(0,0,0,.85)}
.mega.on{display:block;animation:megaIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mgrid{display:grid;grid-template-columns:1fr 1fr 2.2fr;gap:34px;padding:24px 16px 26px}
.mcol h4{font:700 10px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 13px}
.mcats{display:flex;flex-direction:column;gap:2px}
.mcats a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 9px;border-radius:5px;font:500 12.5px var(--font-ui);color:var(--ink)}
.mcats a:hover{background:var(--soft);color:var(--blue)}
.mcats em{font-style:normal;font:600 10.5px var(--font-ui);color:var(--muted);
  font-variant-numeric:tabular-nums}
.mbrands{display:flex;flex-wrap:wrap;gap:6px}
.bchip{border:1px solid var(--edge);border-radius:20px;padding:5px 12px;
  font:600 11px var(--font-ui);color:var(--ink)}
.bchip:hover{border-color:var(--blue);color:var(--blue);background:var(--soft)}
.mall{display:inline-block;margin-top:16px;font:700 11.5px var(--font-ui);color:var(--blue)}
.mall:hover{text-decoration:underline}
.mpicks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mp{display:grid;grid-template-rows:auto auto auto;gap:5px;padding:10px;border-radius:8px;
  border:1px solid transparent;transition:border-color .16s,background .16s;justify-items:start}
.mp:hover{border-color:var(--edge);background:var(--soft)}
.mp img{width:52px;height:52px;object-fit:contain;background:#fff;border:1px solid var(--edge);
  border-radius:6px;padding:3px}
.mpn{font:500 11.5px/1.35 var(--font-ui);color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mpp{font:700 12px var(--font-ui);color:var(--red);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:6px}
.mpp i{font-style:normal;background:var(--red);color:#fff;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:3px}
.navl a[data-menu].hot{color:var(--blue)}
@media(max-width:1100px){.mgrid{grid-template-columns:1fr 1fr;gap:24px}
  .mcol.wide{grid-column:1/-1}}
@media(max-width:920px){.megawrap{display:none}}

/* ---- caret icons ---- */
.navl a{display:flex;align-items:center;gap:6px}
.navl a .cv{width:11px;height:11px;flex-shrink:0;opacity:.45;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s,color .2s}
.navl a:hover .cv{opacity:.9;color:var(--blue)}
.navl a.hot .cv{opacity:1;color:var(--blue);transform:rotate(180deg)}
.catbtn .chev{width:15px;height:15px;flex-shrink:0;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.catwrap:hover .catbtn .chev,.catwrap:focus-within .catbtn .chev{transform:rotate(180deg)}
/* the roll clip must stay padding-free with the caret outside it */
.navl a .rl{flex:0 0 auto}
@media(max-width:920px){
  .navl a{justify-content:space-between}
  .navl a .cv{opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  .navl a .cv,.catbtn .chev{transition:none}
}
/* ================= CHECKOUT ================= */
.co{display:flex;flex-direction:column;height:100%}
.costeps{display:flex;gap:5px;padding:13px 20px;border-bottom:1px solid var(--line);
  background:var(--soft)}
.costep{flex:1;display:flex;flex-direction:column;gap:5px}
.costep .bar{height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.costep.on .bar,.costep.done .bar{background:var(--blue)}
.costep.done .bar{background:var(--green)}
.costep span{font:600 9px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.costep.on span{color:var(--blue)}
.costep.done span{color:var(--green)}
.cobody{flex:1;overflow-y:auto;padding:18px 20px}
.cohint{font:500 12px/1.6 var(--font-ui);color:var(--muted);margin:0 0 16px;
  padding:11px 13px;border-radius:8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 8%,var(--surface)),var(--surface));
  border:1px solid var(--edge)}
.cohint b{color:var(--ink)}
.fld{margin-bottom:13px}
.fld label{display:block;font:600 10.5px var(--font-ui);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;border:1.5px solid var(--edge);border-radius:6px;
  padding:11px 13px;font:500 13px var(--font-ui);background:var(--surface);color:var(--ink);
  transition:border-color .16s,box-shadow .16s}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent)}
.fld textarea{min-height:64px;resize:vertical}
.fld .err{color:var(--red);font:500 11px var(--font-ui);margin-top:5px;display:none}
.fld.bad input{border-color:var(--red)}
.fld.bad .err{display:block}
.fld .help{font:500 10.5px var(--font-ui);color:var(--muted);margin-top:5px}
.pays-opt{display:grid;gap:9px;margin-bottom:6px}
.payopt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--edge);
  border-radius:8px;padding:13px;cursor:pointer;transition:border-color .16s,background .16s}
.payopt:hover{border-color:var(--blue)}
.payopt.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
.payopt input{margin-top:2px;accent-color:var(--blue)}
.payopt b{display:block;font:700 13px var(--font-ui);margin-bottom:2px}
.payopt small{font:500 11.5px/1.5 var(--font-ui);color:var(--muted)}
.payopt .mp{background:var(--green);color:#fff;font:800 9px var(--font-ui);letter-spacing:.08em;
  padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:2px}
/* Checkout: which channels the buyer wants to hear on. Styled off .payopt so
   the two decisions in this drawer read as the same kind of control. */
.chans{margin-top:4px;display:grid;gap:8px}
.chans-t{font:700 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.chan{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--edge);
  border-radius:8px;padding:11px 13px;cursor:pointer;
  transition:border-color .16s,background .16s}
.chan:hover{border-color:var(--blue)}
.chan:has(input:checked){border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 6%,transparent)}
.chan:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.chan input{margin-top:2px;accent-color:var(--blue)}
.chan span{font:700 13px var(--font-ui)}
.chan small{display:block;font:500 11.5px/1.5 var(--font-ui);color:var(--muted);
  margin-top:2px}

.cosum{border-top:1px solid var(--line);padding:14px 20px;background:var(--surface)}
.cofoot{border-top:1px solid var(--line);padding:14px 20px 18px;display:grid;gap:8px}
.cobtn{padding:13px;border-radius:4px;border:0;cursor:pointer;
  font:700 12.5px var(--font-ui);letter-spacing:.04em}
.cobtn.go{background:var(--blue);color:#fff}
.cobtn.go:hover{background:var(--blue-d)}
.cobtn.go[disabled]{opacity:.55;cursor:default}
.cobtn.back{background:none;color:var(--muted);border:1px solid var(--edge)}
.cobtn.back:hover{color:var(--ink);border-color:var(--ink)}
/* waiting state */
.wait{text-align:center;padding:34px 20px}
.wait .ring{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--green);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wait h4{font:700 16px var(--font-ui);margin:0 0 8px}
.wait p{font:500 12.5px/1.65 var(--font-ui);color:var(--muted);margin:0 0 6px}
.wait .ph{font:800 17px var(--font-ui);color:var(--ink);
  font-variant-numeric:tabular-nums;margin:14px 0 6px}
.wait .tick{font:600 11px var(--font-ui);color:var(--muted);margin-top:16px}
.wait ol{text-align:left;max-width:280px;margin:20px auto 0;padding-left:20px;
  font:500 12px/1.9 var(--font-ui);color:var(--muted)}
/* result */
.res{text-align:center;padding:34px 20px}
.res .ic{width:66px;height:66px;border-radius:50%;margin:0 auto 18px;display:grid;
  place-items:center;font-size:32px;color:#fff}
.res.ok .ic{background:var(--green)}
.res.no .ic{background:var(--red)}
.res h4{font:800 18px var(--font-ui);margin:0 0 9px}
.res p{font:500 12.5px/1.65 var(--font-ui);color:var(--muted);margin:0 0 6px}
.res .rcpt{display:inline-block;margin-top:14px;background:var(--soft);
  border:1px dashed var(--edge);border-radius:6px;padding:10px 16px;
  font:700 13px var(--font-ui);letter-spacing:.06em}
.res .rcpt small{display:block;font:600 9px var(--font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.demo{margin:14px 20px 0;padding:10px 13px;border-radius:6px;font:500 11px/1.55 var(--font-ui);
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--ink)}

/* ---- nav bar: more vertical breathing room ---- */
.nav .w{padding-block:9px;align-items:center}
.catbtn{padding:14px 18px!important;line-height:1.2}
.navl{padding-left:24px;align-items:center}
.navl a{padding:15px 0!important}
.navl a .rl{height:1.25em}
.navl a .rl i{line-height:1.25em;height:1.25em}
@media(max-width:920px){
  .nav .w{padding-block:0}
  .navl a{padding:14px 4px!important}
}

/* ---- real logo + proper account icons ---- */
.logo img{display:block;max-height:42px;width:auto;object-fit:contain}
.logo{display:flex;align-items:center;flex:0 0 auto}
.acct .ic{display:grid;place-items:center;width:26px;height:26px}
.acct .ic svg{width:21px;height:21px;display:block}
.acct .ic b{position:absolute;top:-5px;right:-7px;background:var(--blue);color:#fff;
  font:700 9px var(--font-ui,Manrope,sans-serif);border-radius:9px;padding:1px 5px;line-height:1.4}
:root[data-theme="dark"] .logo img{filter:brightness(1.08)}
/* ================= ACCOUNTS ================= */
.authbtn{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  color:var(--ink);font:700 11.5px var(--font-ui);letter-spacing:.02em;padding:0;white-space:nowrap}
.authbtn:hover{color:var(--blue)}
a.authbtn{text-decoration:none}
.authbtn .acaret{width:13px;height:13px;margin-left:1px;color:var(--muted);
  transition:transform .2s,color .2s;flex-shrink:0}
.authbtn:hover .acaret{color:var(--blue)}
.authbtn.open .acaret{transform:rotate(180deg);color:var(--blue)}
.authbtn .av{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font:800 12px var(--font-ui);flex-shrink:0}
.authbtn .who{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.authbtn .who small{font:600 8.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
@media(max-width:1240px){.authbtn .who{display:none}}

.authmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px -16px rgba(18,48,92,.45);
  z-index:80;display:none;overflow:hidden}
.authmenu.on{display:block}
.authmenu a,.authmenu button{display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 14px;font:500 12.5px var(--font-ui);color:var(--ink);background:none;border:0;
  cursor:pointer;text-align:left;border-bottom:1px solid var(--line)}
.authmenu a:last-child,.authmenu button:last-child{border-bottom:0}
.authmenu a:hover,.authmenu button:hover{background:var(--soft);color:var(--blue)}
.authwrap{position:relative;display:flex;align-items:center;
  padding-left:14px;border-left:1px solid var(--line)}

.adrawer{position:fixed;top:0;right:0;bottom:0;width:min(410px,100%);background:var(--surface);
  z-index:201;transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;box-shadow:-18px 0 50px -20px rgba(0,0,0,.5)}
.adrawer.on{transform:none}
.atabs{display:flex;border-bottom:1px solid var(--line)}
.atabs button{flex:1;padding:15px 10px;background:none;border:0;cursor:pointer;
  font:700 12.5px var(--font-ui);letter-spacing:.03em;color:var(--muted);
  border-bottom:2px solid transparent}
.atabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
.abody{flex:1;overflow-y:auto;padding:20px}
.ahead{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ahead h3{font:800 16px var(--font-ui);margin:0;flex:1;letter-spacing:-.02em}
.aintro{font:500 12.5px/1.6 var(--font-ui);color:var(--muted);margin:0 0 18px}
.amsg{padding:11px 13px;border-radius:6px;font:600 12px var(--font-ui);margin-bottom:14px;display:none}
.amsg.on{display:block}
.amsg.err{background:color-mix(in srgb,var(--red) 11%,transparent);color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 35%,transparent)}
.amsg.ok{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.aform .fld{margin-bottom:13px}
.acheck{display:flex;gap:9px;align-items:flex-start;font:500 12px/1.5 var(--font-ui);
  color:var(--muted);margin:4px 0 16px}
.acheck input{margin-top:2px;accent-color:var(--blue)}
.abtn{width:100%;padding:13px;border-radius:4px;border:0;background:var(--blue);color:#fff;
  font:700 12.5px var(--font-ui);letter-spacing:.04em;cursor:pointer}
.abtn:hover{background:var(--blue-d)}
.abtn[disabled]{opacity:.6;cursor:default}
.aalt{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font:500 12px var(--font-ui);color:var(--muted);text-align:center}
.aalt button{background:none;border:0;color:var(--blue);font:700 12px var(--font-ui);cursor:pointer}
.aorders{display:flex;flex-direction:column;gap:9px}
.aorder{border:1px solid var(--line);border-radius:8px;padding:12px 13px;
  display:grid;grid-template-columns:1fr auto;gap:6px}
.aorder b{font:700 12.5px var(--font-ui)}
.aorder small{font:500 11px var(--font-ui);color:var(--muted)}
.aorder .amt{font:700 13px var(--font-ui);text-align:right;font-variant-numeric:tabular-nums}
.aorder .st{font:700 9px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;justify-self:end}
.st-paid{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.st-pending{background:color-mix(in srgb,var(--gold) 22%,transparent);color:#8a6d00}
.st-failed{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
/* checkout: guest vs account */
.gopt{display:grid;gap:9px;margin:6px 0 16px}
.gcard{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--edge);
  border-radius:8px;padding:12px 13px;cursor:pointer;transition:border-color .16s,background .16s}
.gcard:hover{border-color:var(--blue)}
.gcard.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
.gcard input{margin-top:2px;accent-color:var(--blue)}
.gcard b{display:block;font:700 12.5px var(--font-ui);margin-bottom:2px}
.gcard small{font:500 11.5px/1.5 var(--font-ui);color:var(--muted)}
/* ===================================================================
   HEADER — one consolidated responsive system.
   Supersedes the earlier scattered breakpoint rules.
   =================================================================== */

/* ---------- shared ---------- */
.topbar{z-index:60}
.hdr .w{display:flex;align-items:center;gap:18px;padding:14px 16px;flex-wrap:nowrap}
.logo img{max-height:42px;width:auto;transition:max-height .2s}
.srch{flex:1 1 auto;min-width:0;max-width:none}
.acct{flex:0 0 auto;display:flex;align-items:center;gap:14px;white-space:nowrap}
.burger{display:none}
.msearch{display:none}

/* ---------- ≥1280: everything visible ---------- */
@media(min-width:1280px){
  .navl{display:flex}
  .acct .authbtn{display:flex}
}

/* ---------- 1024–1279: tighten ---------- */
@media(max-width:1279px){
  .hdr .w{gap:14px}
  .logo img{max-height:38px}
  .acct{gap:11px}
  .cartbtn .ct small{display:none}
  .cartbtn .ct b{font-size:11.5px}
  .navl{gap:14px;font-size:11px}
}

/* ---------- ≤1023: tablet — search drops to its own row ---------- */
@media(max-width:1023px){
  .hdr .w{flex-wrap:wrap;row-gap:11px;padding:11px 14px}
  .burger{display:grid;order:0;width:40px;height:40px;flex:0 0 40px}
  .logo{order:1;flex:1 1 auto;justify-content:flex-start}
  .acct{order:2;flex:0 0 auto;gap:10px}
  .srch{order:3;flex:1 1 100%}
  .acct .authbtn .who{display:none}
  .acct .ic[data-opt]{display:none}          /* wishlist + compare fold away */
  .navl{display:none}
  .megawrap{display:none}
  .nav .w{padding:0}
  .catwrap{width:100%}
  .catbtn{width:100%;justify-content:space-between;border-radius:0!important;
    padding:13px 14px!important}
  .catmenu{position:static;width:100%;min-width:0;max-height:60vh;border-radius:0;
    box-shadow:none;border-left:0;border-right:0}
}

/* ---------- ≤767: phone ---------- */
@media(max-width:767px){
  .hdr .w{padding:10px 12px;gap:10px}
  .logo img{max-height:32px}
  .srch{order:3}
  .srch input{font-size:16px!important;padding:10px 12px}   /* 16px stops iOS zooming */
  .srch select{display:none}                                 /* ALL scope is desktop-only */
  .srch button{width:46px}
  .cartbtn{padding:5px 9px 5px 8px;gap:7px}
  .cartbtn .ct{display:none}
  .tt{width:34px;height:34px}
  .acct{gap:8px}
  .hero{height:auto!important;gap:12px}
  /* 340px could not hold a headline, the big figure, a model number, six spec
     chips, a price row and a photo — the photo was being sliced in half. This
     is the height the stack actually needs at 390px. */
  .banner{min-height:452px!important;padding:18px!important;align-content:start}
  .banner.art{padding:0!important}
  /* the corner flash sits over the top-right, so the headline is kept clear of
     it rather than running underneath */
  .banner > div{padding-right:96px}
  .boffer{top:10px;right:10px;font-size:11px;padding:5px 11px}
  .banner h2{font:900 24px/1.05 Roboto}
  .bsz{font-size:40px;margin:2px 0 6px}
  .bsku{margin-bottom:10px}
  .bspecs{gap:4px;margin-bottom:12px}
  .bspecs span{font-size:9px;padding:3px 6px}
  .bprice{gap:9px}
  .bnow{font-size:22px}
  .bhuge{font-size:30px}
  .bsub{font-size:13.5px;margin-bottom:14px}
  /* the photo gets the space that is left, not a fixed slab of it */
  .bimg{margin-top:12px}
  .bimg img{max-height:132px!important;width:auto}
  .potd{height:auto!important}
}

/* ---------- ≤400: very small ---------- */
@media(max-width:400px){
  .logo img{max-height:28px}
  .strip .wrap span:not(.tel){display:none}
  .acct .ic{width:24px;height:24px}
  .acct .ic svg{width:19px;height:19px}
}

/* ---------- mobile nav drawer ---------- */
.mnav{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);background:var(--surface);
  z-index:210;transform:translateX(-100%);transition:transform .34s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;box-shadow:18px 0 50px -22px rgba(0,0,0,.5)}
.mnav.on{transform:none}
.mnav-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.mnav-head img{max-height:30px}
.mnav-head .x{margin-left:auto;width:32px;height:32px;border:1px solid var(--edge);
  border-radius:4px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:17px}
.mnav-body{flex:1;overflow-y:auto;padding:6px 0}
.mnav-body h4{font:700 10px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:14px 16px 6px}
.mnav-body a{display:flex;align-items:center;gap:11px;padding:12px 16px;
  font:500 14px var(--font-ui);color:var(--ink);border-bottom:1px solid var(--line)}
.mnav-body a:hover{background:var(--soft);color:var(--blue)}
.mnav-body a svg{width:19px;height:19px;color:var(--blue);opacity:.85;flex-shrink:0}
.mnav-body a em{margin-left:auto;font-style:normal;font:600 11px var(--font-ui);
  color:var(--muted);background:var(--soft);border-radius:11px;padding:2px 8px}
.mnav-foot{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:8px}
.mnav-foot a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;
  border-radius:4px;font:700 12.5px var(--font-ui);text-decoration:none}
.mnav-foot .wa{background:#25D366;color:#fff}
.mnav-foot .call{border:1px solid var(--edge);color:var(--ink)}
@media(min-width:1024px){.mnav{display:none}}
@media(prefers-reduced-motion:reduce){.mnav{transition:none}}

/* ---- product cards navigate to the product page ---- */
.pc[data-href]{cursor:pointer}
.pc h3 a{color:inherit;text-decoration:none}
.pc h3 a:hover{color:var(--blue)}

/* ---- sharper card images ---- */
.pcimg img,.mp img,.fxi img{image-rendering:auto}
.pcimg img{width:auto;height:auto;max-width:100%;max-height:100%}

/* ---- card image box: one authoritative rule ----
   The image must not contribute its intrinsic height to the grid box, or
   min-height:auto stretches the card to the image's natural 503px. ---- */
.pcimg{aspect-ratio:1/.82!important;min-height:0!important;overflow:hidden!important;
  display:grid!important;place-items:center!important;padding:14px!important}
.pcimg > img{
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  min-width:0!important;min-height:0!important;
  object-fit:contain!important}
.pc{min-height:0}

/* ---- feature panels: taller, vertical product rotation ---- */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.fx{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:10px;
  background:#fff;display:grid;grid-template-columns:1fr 14px;
  height:340px;padding:0;box-shadow:var(--ring)}
.fxstack{position:relative;overflow:hidden}
.fxslide{position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,275px) minmax(0,1fr);
  gap:18px;align-items:center;padding:16px 16px 16px 16px;
  opacity:0;transform:translateY(28px);pointer-events:none;
  transition:opacity .5s ease,transform .62s cubic-bezier(.22,1,.36,1)}
.fxslide.on{opacity:1;transform:none;pointer-events:auto}
.fxslide.out{opacity:0;transform:translateY(-28px)}
/* The stage used to be a hard orange gradient. Most product photography here
   already has a white background, so the picture read as a white rectangle
   floating on a coloured block. A soft tint of the brand blue sits behind the
   product instead, and the padding is tighter so the item itself is bigger. */
.fxi{background:linear-gradient(155deg,
       color-mix(in srgb,var(--blue) 11%,#fff),
       color-mix(in srgb,var(--blue) 4%,#fff));
  border:1px solid color-mix(in srgb,var(--blue) 14%,transparent);
  border-radius:12px;padding:10px;display:grid;place-items:center;
  height:100%;min-height:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.fxi img{width:100%;height:100%;max-width:100%;max-height:100%;min-height:0;
  object-fit:contain;filter:drop-shadow(0 8px 16px rgba(18,48,92,.18))}
.fxb{min-width:0;display:flex;flex-direction:column;gap:7px;justify-content:center}
.fxbr{font:700 9.5px var(--font-ui);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.fxb h3{font:600 16px/1.3 var(--font-ui);margin:0;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fxb h3 a{color:inherit}
.fxb h3 a:hover{color:var(--blue)}
.fxb .pr{display:flex;align-items:center;gap:8px;margin:0;font-variant-numeric:tabular-nums}
.fxb .pr b{font:700 17px var(--font-ui);color:var(--ink)}
.fxoff{font-style:normal;background:var(--red);color:#fff;font:700 10px var(--font-ui);
  padding:2px 7px;border-radius:4px}
.fxd{font:500 11.5px/1.6 var(--font-ui);color:var(--muted);margin:2px 0 4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fxb .atc{width:auto;align-self:flex-start;padding:10px 24px;margin:4px 0 0!important}
.fxdots{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  padding:0 6px 0 0}
.fxdot{width:5px;height:5px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:height .3s,background .3s}
.fxdot.a{height:22px;background:var(--red)}
.fxdot:hover{background:var(--muted)}
@media(max-width:1100px){.fg{grid-template-columns:1fr}}
@media(max-width:620px){
  .fx{height:auto;min-height:300px}
  .fxslide{grid-template-columns:1fr;gap:12px;padding:16px}
  .fxi{height:150px}
}
@media(prefers-reduced-motion:reduce){.fxslide{transition:opacity .01s}}

/* ---- feature panel: the old rule's align-items:center collapsed .fxstack
   to zero height, hiding every absolutely-positioned slide ---- */
.fx[data-fx]{align-items:stretch!important;place-items:stretch!important;
  gap:0!important;padding:0!important}
.fx[data-fx] .fxstack{height:100%;min-height:0;align-self:stretch}
.fx[data-fx] .fxdots{align-self:center}

/* ---- header: solid, never translucent ---- */
.topbar{
  background:var(--surface)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.topbar .hdr,.topbar .nav{background:var(--surface)!important}
.topbar.stuck{box-shadow:0 4px 18px -10px rgba(18,48,92,.32)}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .topbar .hdr,
:root[data-theme="dark"] .topbar .nav{background:var(--surface)!important}
.mega{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---- mega menu: make the open state unmissable regardless of cascade ---- */
.megawrap{position:absolute;left:0;right:0;top:100%;z-index:70}
.mega{display:none}
.megawrap.open .mega.on,
.mega.on{display:block!important}
@media(max-width:1023px){.megawrap,.megawrap.open .mega.on,.mega.on{display:none!important}}

/* the panel is body-level and inline-styled by JS; keep CSS out of its way */
.megawrap{position:fixed!important;z-index:9999!important}
.mega{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface);box-shadow:0 22px 44px -22px rgba(18,48,92,.45)}
@media(max-width:1023px){.megawrap{display:none!important}}

/* ================= MEGA MENU — refined ================= */
.mega{
  border-top:0!important;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blue) 6%, var(--surface)) 0%,
      var(--surface) 210px),
    var(--surface);
  box-shadow:0 26px 50px -26px rgba(18,48,92,.4),
             0 1px 0 rgba(18,48,92,.05) inset;
  animation:megaFade .26s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
:root[data-theme="dark"] .mega{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 12%, var(--surface)) 0%,
      var(--surface) 210px), var(--surface);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.8);
}
/* brand gradient hairline across the top */
.mega:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, var(--blue) 0%,
    color-mix(in srgb, var(--blue) 55%, var(--red)) 45%,
    color-mix(in srgb, var(--gold, #f5c518) 70%, var(--blue)) 100%);
}
.mega{position:relative}
@keyframes megaFade{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* generous breathing room */
.mgrid{
  padding:34px 16px 38px!important;
  gap:0!important;
  grid-template-columns:1fr 1fr 2.3fr!important;
}
.mcol{padding:0 30px;position:relative}
.mcol + .mcol:before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.mcol:first-child{padding-left:0}
.mcol:last-child{padding-right:0}

/* column headings */
.mcol h4{
  font:700 10px var(--font-ui)!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;color:var(--muted)!important;
  margin:0 0 16px!important;display:flex;align-items:center;gap:8px;
}
.mcol h4:after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}

/* category rows */
.mcats a{
  padding:9px 11px!important;border-radius:7px!important;
  font:500 13px var(--font-ui)!important;
  transition:background .16s,color .16s,padding-left .16s;
}
.mcats a:hover{
  background:color-mix(in srgb, var(--blue) 8%, transparent)!important;
  color:var(--blue)!important;padding-left:15px!important;
}
.mcats em{
  font:600 10.5px var(--font-ui)!important;
  background:color-mix(in srgb, var(--blue) 9%, transparent)!important;
  color:var(--muted)!important;border-radius:20px;padding:2px 9px!important;
}
.mcats a:hover em{background:var(--blue)!important;color:#fff!important}

/* brand chips */
.mbrands{gap:7px!important}
.bchip{
  border:1px solid var(--edge)!important;border-radius:20px!important;
  padding:7px 14px!important;font:600 11.5px var(--font-ui)!important;
  background:var(--surface)!important;transition:all .16s;
}
.bchip:hover{
  border-color:var(--blue)!important;color:var(--blue)!important;
  background:color-mix(in srgb, var(--blue) 7%, transparent)!important;
  transform:translateY(-1px);
}
.mall{
  margin-top:20px!important;font:700 11.5px var(--font-ui)!important;
  display:inline-flex!important;align-items:center;gap:6px;
  padding:9px 16px;border-radius:6px;
  background:color-mix(in srgb, var(--blue) 9%, transparent);
  color:var(--blue)!important;transition:background .16s,gap .16s;
}
.mall:hover{background:var(--blue);color:#fff!important;gap:10px;text-decoration:none!important}

/* product picks */
.mpicks{gap:10px!important;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))!important}
.mp{
  padding:12px 11px!important;border-radius:10px!important;
  border:1px solid transparent!important;
  transition:border-color .16s,background .16s,transform .16s,box-shadow .16s;
}
.mp:hover{
  border-color:var(--edge)!important;
  background:var(--surface)!important;
  transform:translateY(-3px);
  box-shadow:0 12px 24px -14px rgba(18,48,92,.34);
}
.mp img{
  width:60px!important;height:60px!important;padding:4px!important;
  border-radius:8px!important;border:1px solid var(--edge)!important;background:#fff!important;
}
.mpn{font:500 11.5px/1.4 var(--font-ui)!important;margin-top:2px}
.mpp{font:700 12.5px var(--font-ui)!important;gap:7px!important;margin-top:1px}
.mpp i{font-size:9px!important;padding:2px 6px!important;border-radius:4px!important}

@media(max-width:1280px){
  .mgrid{grid-template-columns:1fr 1fr!important;padding:28px 16px 32px!important}
  .mcol.wide{grid-column:1/-1;padding:22px 0 0}
  .mcol.wide:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mega{animation:none}.mp:hover,.bchip:hover{transform:none}
}

/* ================= FAVOURITES ================= */
.pcimg{position:relative}
.favbtn{position:absolute;top:9px;right:9px;z-index:3;width:32px;height:32px;
  display:grid;place-items:center;padding:0;cursor:pointer;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  transition:color .18s,border-color .18s,transform .18s,box-shadow .18s}
.favbtn svg{width:17px;height:17px;fill:none;transition:fill .18s,stroke .18s}
.favbtn:hover{color:var(--red);border-color:var(--red);transform:scale(1.08);
  box-shadow:0 3px 10px rgba(224,43,43,.2)}
.favbtn.on{color:var(--red);border-color:var(--red)}
.favbtn.on svg{fill:var(--red);stroke:var(--red)}
.favbtn.pop{animation:favpop .34s cubic-bezier(.3,1.5,.5,1)}
@keyframes favpop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
@media(max-width:620px){.favbtn{width:29px;height:29px;top:7px;right:7px}
  .favbtn svg{width:15px;height:15px}}

/* header badge */
a.ic.favlink{text-decoration:none;transition:color .18s}
a.ic.favlink:hover{color:var(--red)}
a.ic.favlink.has{color:var(--red)}
a.ic.favlink.has svg{fill:rgba(224,43,43,.14)}

/* saved-items page card */
.fav-pc .favx{position:absolute;top:9px;right:9px;z-index:3;width:28px;height:28px;
  display:grid;place-items:center;padding:0;cursor:pointer;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  transition:color .18s,border-color .18s,transform .18s}
.fav-pc .favx svg{width:14px;height:14px}
.fav-pc .favx:hover{color:var(--red);border-color:var(--red);transform:rotate(90deg)}
.fav-pc.removing{opacity:0;transform:scale(.94);transition:opacity .25s,transform .25s}
.fav-since{margin:6px 0 0;font-size:11.5px;color:var(--muted)}

/* product detail save button */
.savebtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:44px;margin-top:9px;border-radius:4px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:700 13.5px var(--font-ui);letter-spacing:.02em;
  transition:color .18s,border-color .18s,background .18s}
.savebtn svg{width:18px;height:18px;fill:none;transition:fill .18s}
.savebtn:hover{border-color:var(--red);color:var(--red)}
.savebtn.on{border-color:var(--red);color:var(--red);background:rgba(224,43,43,.05)}
.savebtn.on svg{fill:var(--red)}
.savebtn .lbl-off{display:inline}.savebtn .lbl-on{display:none}
.savebtn.on .lbl-off{display:none}.savebtn.on .lbl-on{display:inline}


/* ===================== FOOTER (global) ===================== */
.ftr{background:linear-gradient(180deg,#0b5fd4 0%,#0a53be 100%);color:#fff;
  margin-top:30px;padding:38px 0 0;font-family:var(--font-ui);font-size:13.5px}
.ftr .w{max-width:1582px;margin:0 auto;padding:0 16px}
.ftr .ftr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;padding-bottom:26px}
.fcol{min-width:0}
.ftr h5{display:flex;align-items:center;gap:9px;margin:0 0 16px;
  font:600 15px var(--font-ui);color:#fff;letter-spacing:0;text-transform:none;opacity:1}
.ftr h5 svg{width:19px;height:19px;flex:0 0 19px;opacity:.95}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px;
  line-height:1.5;opacity:1;font-size:13.5px;font-weight:400}
.ftr li svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;opacity:.95}
.ftr li b{font-weight:600}
.ftr a{color:#fff;text-decoration:none;border-bottom:2px solid transparent;
  transition:border-color .18s,opacity .18s}
.ftr a:hover{border-bottom-color:var(--red);opacity:1}
.flinks li svg{width:14px;height:14px;flex:0 0 14px;margin-top:3px}
.fday{margin:16px 0 8px;font-weight:600;font-size:14px;
  border-bottom:2px solid var(--red);display:inline-block;padding-bottom:3px}
.fhrs{display:flex;align-items:center;gap:9px;margin:0;font-size:13.5px}
.fhrs svg{width:16px;height:16px;flex:0 0 16px}

/* payment tiles */
.pays{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.pays .pay{background:#fff;border-radius:4px;padding:5px 7px;width:74px;height:32px;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.pays .pay svg{width:100%;height:100%}
.fsoch{margin-top:4px}

/* social circles */
.socs{display:flex;gap:10px}
.socs a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:0;transition:transform .18s,filter .18s}
.socs a svg{width:17px;height:17px}
.socs a:hover{transform:translateY(-2px);filter:brightness(1.12)}
.socs .s-fb{background:#1877f2}
.socs .s-tw{background:#1da1f2}
.socs .s-tt{background:#111}
.socs .s-ig{background:#e4405f}

/* copyright */
.ftr .cpy{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0;padding:16px 0 18px;border-top:1px solid rgba(255,255,255,.22);
  font-size:12.5px;font-weight:500;text-align:center;opacity:.95;
  grid-column:auto;text-transform:uppercase;letter-spacing:.02em}
.ftr .cpy svg{width:15px;height:15px;flex:0 0 15px}

/* back to top */
.totop{position:fixed;right:18px;bottom:22px;width:40px;height:40px;z-index:70;
  border:0;border-radius:4px;cursor:pointer;background:#16181d;color:#fff;
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s,transform .22s,visibility .22s,background .18s}
.totop svg{width:19px;height:19px}
.totop:hover{background:var(--blue)}
.totop.on{opacity:1;visibility:visible;transform:none}
body.has-sticky .totop{bottom:88px}

@media(max-width:980px){.ftr .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media(max-width:600px){
  .ftr{padding-top:28px;font-size:13px}
  .ftr .ftr-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .totop{right:12px;bottom:14px;width:36px;height:36px}
}


/* ================= PRODUCT Q&A ================= */
.pfaq{padding:34px 0 8px}
.pfaq .w{max-width:1582px;margin:0 auto;padding:0 16px}
.pfaq h2{margin:0 0 6px;font:800 21px var(--font-ui);letter-spacing:-.015em;color:var(--ink)}
.pfaq-lead{margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.pfaq-lead a{color:var(--blue);text-decoration:none;font-weight:600}
.pfaq-lead a:hover{text-decoration:underline}
.pfaq details{margin-bottom:10px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);overflow:hidden;transition:border-color .18s}
.pfaq details[open]{border-color:rgba(21,101,216,.4)}
.pfaq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;cursor:pointer;font:700 14.5px var(--font-ui);color:var(--ink);
  list-style:none;transition:background .16s}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"";flex:0 0 9px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s,border-color .2s}
.pfaq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);
  border-color:var(--blue)}
.pfaq summary:hover{background:var(--soft)}
.pfaq details>div{padding:0 18px 16px;font-size:14px;line-height:1.7;color:var(--muted)}
.pfaq details>div p{margin:0 0 10px}
.pfaq details>div p:last-child{margin-bottom:0}
@media(max-width:620px){.pfaq{padding-top:24px}.pfaq h2{font-size:18.5px}
  .pfaq summary{padding:13px 15px;font-size:13.5px}}

/* checkout discount code */
.cocoup{margin:14px 0 10px}
.cocoup label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px}
.coup-row{display:flex;gap:8px}
.coup-row input{flex:1;height:42px;padding:0 13px;font-size:14px;font-family:inherit;
  border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em}
.coup-row input:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,101,216,.14)}
.coup-row button{flex:0 0 auto;height:42px;padding:0 18px;border-radius:4px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:700 13px var(--font-ui);transition:border-color .16s,color .16s}
.coup-row button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.coup-row button:disabled{opacity:.6;cursor:default}
.coup-msg{margin:7px 0 0;font-size:12.5px;min-height:16px;color:var(--muted)}


/* ================= COMPARE & RECENTLY VIEWED ================= */
.cmpbtn{position:absolute;top:47px;right:9px;z-index:3;width:32px;height:32px;
  display:grid;place-items:center;padding:0;cursor:pointer;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  transition:color .18s,border-color .18s,transform .18s}
.cmpbtn svg{width:16px;height:16px}
.cmpbtn:hover{color:var(--blue);border-color:var(--blue);transform:scale(1.08)}
.cmpbtn.on{color:#fff;background:var(--blue);border-color:var(--blue)}
@media(max-width:620px){.cmpbtn{width:29px;height:29px;top:42px;right:7px}
  .cmpbtn svg{width:14px;height:14px}}

button.ic.cmplink{border:0;background:none;cursor:pointer;padding:0;
  color:inherit;font:inherit;transition:color .18s}
button.ic.cmplink:hover{color:var(--blue)}
button.ic.cmplink.has{color:var(--blue)}

/* floating compare bar */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--ink);
  color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.25);
  animation:cmpup .28s cubic-bezier(.22,1,.36,1)}
@keyframes cmpup{from{transform:translateY(100%)}to{transform:none}}
.cb-in{max-width:1582px;margin:0 auto;padding:12px 16px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.cb-in b{font:800 14px var(--font-ui)}
.cb-n{font-size:12.5px;opacity:.72;flex:1;min-width:140px}
.cb-go{height:38px;padding:0 22px;border:0;border-radius:4px;cursor:pointer;
  background:var(--blue);color:#fff;font:700 13px var(--font-ui)}
.cb-go:hover{background:var(--blue-d)}
.cb-clr{height:38px;padding:0 16px;border:1px solid rgba(255,255,255,.32);
  border-radius:4px;cursor:pointer;background:none;color:#fff;
  font:700 13px var(--font-ui)}
.cb-clr:hover{border-color:#fff}

/* comparison panel */
.cmpscrim{position:fixed;inset:0;z-index:200;background:rgba(10,16,24,.55);
  backdrop-filter:blur(2px)}
.cmppanel{position:fixed;z-index:201;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:10px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.cp-head h3{margin:0;font:800 17px var(--font-ui);color:var(--ink)}
.cp-x{width:34px;height:34px;border:0;border-radius:4px;cursor:pointer;
  background:none;color:var(--muted);font-size:24px;line-height:1}
.cp-x:hover{background:var(--soft);color:var(--ink)}
.cp-body{overflow:auto;padding:0}
.cp-load{padding:40px;text-align:center;color:var(--muted)}
.cp-scroll{overflow-x:auto}
.cp-t{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
.cp-t th,.cp-t td{padding:12px 14px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:middle;color:var(--ink)}
.cp-t thead th{position:relative;vertical-align:top;min-width:170px;
  border-bottom:2px solid var(--line)}
.cp-t thead th img{display:block;width:88px;height:88px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px;
  margin-bottom:8px}
.cp-noimg{display:block;width:88px;height:88px;border:1px dashed var(--line);
  border-radius:6px;margin-bottom:8px}
.cp-t thead th a{color:var(--ink);text-decoration:none;font-weight:700;
  font-size:12.5px;line-height:1.35;display:block}
.cp-t thead th a:hover{color:var(--blue)}
.cp-t tbody th{width:150px;font-weight:600;color:var(--muted);font-size:12.5px;
  background:var(--soft)}
.cp-drop{position:absolute;top:0;right:6px;width:24px;height:24px;border:0;
  border-radius:50%;background:var(--soft);color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1}
.cp-drop:hover{background:var(--red);color:#fff}
.cp-price b{font-size:15px;color:var(--red)}
.cp-price s{color:var(--muted);font-size:12px;margin-right:5px}
.cp-yes{color:var(--green);font-weight:600}
.cp-no{color:var(--red);font-weight:600}
.cp-diff td{background:rgba(21,101,216,.055)}
.cp-buy{display:inline-flex;align-items:center;height:36px;padding:0 16px;
  border-radius:4px;background:var(--blue);color:#fff;text-decoration:none;
  font:700 12.5px var(--font-ui)}
.cp-buy:hover{background:var(--blue-d)}
.cp-key{margin:0;padding:12px 20px;font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}
.cp-key .k-diff{width:14px;height:14px;border-radius:3px;
  background:rgba(21,101,216,.16);display:inline-block}
@media(max-width:620px){.cmppanel{width:100vw;height:100vh;max-height:100vh;
  border-radius:0;top:0;left:0;transform:none}}

/* recently viewed */
.recent{padding:30px 0 4px}
.recent[hidden]{display:none}


/* ================= REVIEWS ================= */
.prev{padding:34px 0 8px}
.prev .w{max-width:1582px;margin:0 auto;padding:0 16px}
.prev-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;flex-wrap:wrap}
.prev-head h2{margin:0;font:800 21px var(--font-ui);letter-spacing:-.015em;color:var(--ink)}
.prev-write{height:40px;padding:0 20px;border:1px solid var(--blue);border-radius:4px;
  background:var(--surface);color:var(--blue);font:700 13px var(--font-ui);cursor:pointer;
  transition:background .18s,color .18s}
.prev-write:hover{background:var(--blue);color:#fff}
.prev-summary{display:grid;grid-template-columns:auto minmax(0,320px);gap:32px;
  align-items:center;padding:20px 22px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);margin-bottom:20px}
.prev-score{text-align:center}
.prev-score b{display:block;font:800 42px var(--font-ui);letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.prev-score small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
.prev-stars{display:inline-flex;gap:2px;margin-top:6px}
.prev-stars i{font-style:normal;font-size:17px;color:var(--line)}
.prev-stars i.on{color:var(--gold)}
.prev-stars.sm i{font-size:13px}
.prev-bars{display:flex;flex-direction:column;gap:6px}
.prev-bar{display:grid;grid-template-columns:32px 1fr 30px;gap:9px;align-items:center;
  font-size:12px;color:var(--muted)}
.prev-bar .tr{height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.prev-bar .tr i{display:block;height:100%;background:var(--gold);border-radius:99px}
.prev-bar .ct{text-align:right;font-variant-numeric:tabular-nums}
.prev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.prev-list li{padding:16px 18px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface)}
.prev-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.prev-meta b{font:700 13.5px var(--font-ui);color:var(--ink)}
.prev-meta time{font-size:12px;color:var(--muted);margin-left:auto}
.prev-vf{font:700 10.5px var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--green);background:rgba(31,167,74,.12);padding:2px 8px;border-radius:99px}
.prev-title{margin:0 0 5px;font:700 14.5px var(--font-ui);color:var(--ink)}
.prev-body{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.prev-reply{margin-top:12px;padding:12px 14px;border-left:3px solid var(--blue);
  background:var(--soft);border-radius:0 6px 6px 0}
.prev-reply b{display:block;font:700 12px var(--font-ui);color:var(--blue);margin-bottom:4px}
.prev-reply p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.prev-none{margin:0 0 20px;padding:26px;text-align:center;border:1px dashed var(--line);
  border-radius:10px;color:var(--muted);font-size:14px;line-height:1.6}

.prev-form{margin-top:20px;padding:22px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);display:flex;flex-direction:column;gap:14px}
.prev-form[hidden]{display:none}
.prev-form h3{margin:0;font:800 16px var(--font-ui);color:var(--ink)}
.prev-form label{display:flex;flex-direction:column;gap:6px;font:700 12.5px var(--font-ui);
  color:var(--ink)}
.prev-form label span{font-weight:500;color:var(--muted)}
.prev-form input,.prev-form textarea{height:42px;padding:0 13px;font:400 14px var(--font-ui);
  border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink)}
.prev-form textarea{height:auto;padding:11px 13px;line-height:1.6;resize:vertical}
.prev-form input:focus,.prev-form textarea:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,101,216,.14)}
.prev-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prev-rate{display:flex;gap:4px}
.prev-rate button{width:38px;height:38px;border:0;background:none;cursor:pointer;
  font-size:27px;line-height:1;color:var(--line);padding:0;transition:color .14s,transform .14s}
.prev-rate button:hover{transform:scale(1.14)}
.prev-rate button.on{color:var(--gold)}
.prev-msg{margin:0;min-height:18px;font-size:13px;color:var(--muted)}
.prev-msg.good{color:var(--green);font-weight:600}
.prev-msg.bad{color:var(--red);font-weight:600}
.prev-actions{display:flex;gap:9px}
.prev-send{height:44px;padding:0 24px;border:0;border-radius:4px;cursor:pointer;
  background:var(--blue);color:#fff;font:700 14px var(--font-ui)}
.prev-send:hover:not(:disabled){background:var(--blue-d)}
.prev-send:disabled{opacity:.6;cursor:default}
.prev-cancel{height:44px;padding:0 18px;border:1px solid var(--line);border-radius:4px;
  cursor:pointer;background:var(--surface);color:var(--muted);font:700 13.5px var(--font-ui)}
@media(max-width:700px){
  .prev-summary{grid-template-columns:minmax(0,1fr);gap:18px}
  .prev-two{grid-template-columns:1fr}
  .prev{padding-top:24px}
  .prev-head h2{font-size:18.5px}
}


/* ===================== mobile: no sideways scrolling =====================
   Grid and flex children default to min-width:auto — their content size. A
   long product name or an inner horizontal scroller then pushes the track,
   and the whole page, wider than the phone. Every layout container here opts
   its children out so the content wraps or scrolls inside its own box. */
.hero > *,.banner > *,.fg > *,.fx > *,.g4 > *,.g5 > *,.grid > *,
.trend > *,.ci-row > *,.sugg .row > *,.buyrow > *,.clayout > *,
.pcb > *,.acct > *{min-width:0}
.hs,.hrow{max-width:100%}
.pc h3,.pc .pr,.pc .stk,.pc .br{min-width:0;overflow-wrap:anywhere}

/* anything genuinely wider than a phone scrolls inside its own container */
.acc-tablewrap,.sck-tablewrap,.pg-prose table,.cp-scroll{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}


/* ============ mobile header: one clean row, then the search ============
   Two bugs fixed here.

   1. Every `order` rule targeted `.srch`, but the flex child is its wrapper
      `.srchwrap` — so the search kept its default order:0 and landed on row
      one, pushing the logo underneath it.
   2. The wishlist and compare icons used to fold away via `[data-opt]`. That
      attribute went when those two became real controls, so they reappeared
      and crowded the row. They are reachable from the drawer and the account
      area, so they fold away again here by class. */
@media(max-width:1023px){
  .hdr .w{align-items:center}
  .srchwrap{order:3;flex:1 1 100%;max-width:none;width:100%}
  .srch{max-width:none;width:100%}
  .acct .ic.favlink,.acct .ic.cmplink{display:none}
}
@media(max-width:767px){
  .srchwrap{order:3;flex:1 1 100%}
  .hdr .w{row-gap:10px}
  .logo{min-width:0}
  .logo img{max-height:30px;width:auto}
  .acct{gap:9px}
  .cartbtn{padding:5px 8px}
  .cartbtn .ci svg{width:20px;height:20px}
  .authbtn .av{width:26px;height:26px;font-size:11px}
  .authbtn .acaret{display:none}
}
@media(max-width:400px){
  .logo img{max-height:26px}
  .tt{width:30px;height:30px}
  .tt svg{width:16px;height:16px}
  .acct{gap:7px}
}

/* a product with no photo on file — a labelled placeholder rather than the
   browser's broken-image icon */
.noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;width:100%;height:100%;min-height:120px;color:var(--muted);
  background:var(--soft);border-radius:10px;text-align:center;padding:12px}
.noimg svg{width:38px;height:38px;opacity:.45;flex:0 0 auto}
.pcimg .noimg,.fxi .noimg{min-height:0}
.noimg span{font:600 12.5px var(--font-ui);letter-spacing:.02em}


/* The feature panels used an orange Add-to-cart while every other card on the
   site uses the primary blue. Same button, same colour, everywhere. */
.fx .atc.orange,.fxslide .atc.orange{background:var(--blue)}
.fx .atc.orange:hover,.fxslide .atc.orange:hover{background:var(--blue-d)}


/* ================= NAV: phone + quote call-to-action ================= */
.navcta{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
.navtel{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
  border:1px solid var(--line);border-radius:4px;background:var(--surface);
  color:var(--ink);font:700 12.5px var(--font-ui);text-decoration:none;
  white-space:nowrap;transition:border-color .18s,color .18s}
.navtel svg{width:16px;height:16px;flex:0 0 16px;color:var(--blue)}
.navtel:hover{border-color:var(--blue);color:var(--blue)}
.navquote{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border:0;border-radius:4px;cursor:pointer;background:var(--blue);color:#fff;
  font:700 12.5px var(--font-ui);white-space:nowrap;letter-spacing:.02em;
  transition:background .18s,transform .18s}
.navquote svg{width:16px;height:16px;flex:0 0 16px}
.navquote:hover{background:var(--blue-d);transform:translateY(-1px)}
.navquote:active{transform:none}
@media(max-width:1180px){.navtel span{display:none}.navtel{padding:0 11px}}
@media(max-width:1023px){
  .navcta{width:100%;margin:0;padding:10px 14px;gap:9px;
    border-top:1px solid var(--line);background:var(--surface)}
  .navtel,.navquote{flex:1 1 0;justify-content:center}
  .navtel span{display:inline}
}


/* ===================== REQUEST A QUOTE ===================== */
.qscrim{position:fixed;inset:0;z-index:300;background:rgba(10,16,24,.55);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.qscrim.on{opacity:1;visibility:visible}
.qpanel{position:fixed;z-index:301;left:50%;top:50%;
  transform:translate(-50%,-46%) scale(.98);width:min(680px,94vw);max-height:90vh;
  display:flex;flex-direction:column;background:var(--surface);border-radius:12px;
  overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.34);
  opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.qpanel.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.qhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--blue-d),var(--blue) 55%,#6d3bd6 125%)}
.qhead::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.6),transparent 62%);
  mask-image:linear-gradient(105deg,rgba(0,0,0,.6),transparent 62%)}
.qhead h2{margin:0;font:800 20px var(--font-ui);letter-spacing:-.02em;position:relative}
.qhead p{margin:5px 0 0;font-size:13px;opacity:.9;position:relative;max-width:46ch}
.qx{position:relative;width:34px;height:34px;flex:0 0 34px;border:0;cursor:pointer;
  border-radius:6px;background:rgba(255,255,255,.16);color:#fff;font-size:23px;line-height:1}
.qx:hover{background:rgba(255,255,255,.28)}

.qbody{overflow-y:auto;padding:22px 24px 26px}
.qf-sec{font:700 10.5px var(--font-ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:4px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.qf-sec:not(:first-child){margin-top:22px}
.qf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qf-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.qf-f.wide{grid-column:1/-1}
/* a wide field that follows a .qf-grid sits outside it, so it misses the
   grid's row gap — give it one of its own */
.qf-grid + .qf-f{margin-top:14px}
.qf-f label{font:700 12.5px var(--font-ui);color:var(--ink)}
.qf-f label b{color:var(--red)}
.qf-f label span{font-weight:500;color:var(--muted)}
.qf-f input,.qf-f textarea,.qf-f select{width:100%;height:44px;padding:0 13px;font:400 14px var(--font-ui);
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px;
  transition:border-color .16s,box-shadow .16s}
.qf-f textarea{height:auto;padding:11px 13px;line-height:1.6;resize:vertical}
.qf-f select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 12px center;background-size:17px}
.qf-f input:focus,.qf-f textarea:focus,.qf-f select:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,101,216,.14)}
.qf-f.bad input,.qf-f.bad textarea{border-color:var(--red)}
.qf-err{margin:0;font-size:12px;color:var(--red);font-weight:600;min-height:0}
.qf-err:empty{display:none}

.qf-vat{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.qf-lb{font:700 12.5px var(--font-ui);color:var(--ink)}
.qf-toggle{display:inline-flex;padding:4px;gap:4px;background:var(--soft);
  border:1px solid var(--line);border-radius:6px}
.qf-toggle button{border:0;background:none;cursor:pointer;padding:8px 16px;border-radius:4px;
  font:600 12.5px var(--font-ui);color:var(--muted);transition:all .16s}
.qf-toggle button.on{background:var(--surface);color:var(--ink);font-weight:700;
  box-shadow:0 1px 3px rgba(16,32,52,.16)}
.qf-toggle button:hover:not(.on){color:var(--blue)}

.qf-file{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:6px;color:var(--muted);
  font:600 13px var(--font-ui);transition:border-color .16s,color .16s,background .16s}
.qf-file svg{width:18px;height:18px;flex:0 0 18px}
.qf-file:hover{border-color:var(--blue);color:var(--blue);background:rgba(21,101,216,.04)}
.qf-file.has{border-style:solid;border-color:var(--green);color:var(--green)}

.qf-consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;cursor:pointer;
  font-size:13.5px;color:var(--muted);line-height:1.5}
.qf-consent input{width:17px;height:17px;flex:0 0 17px;margin-top:1px;accent-color:var(--blue)}
.qf-msg{margin:14px 0 0;font-size:13px;min-height:0;font-weight:600}
.qf-msg:empty{display:none}
.qf-msg.bad{color:var(--red)}
.qf-go{width:100%;height:50px;margin-top:16px;border:0;border-radius:4px;cursor:pointer;
  background:linear-gradient(100deg,var(--blue-d),var(--blue));color:#fff;
  font:700 15px var(--font-ui);letter-spacing:.02em;
  transition:filter .18s,transform .18s,box-shadow .18s}
.qf-go:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(21,101,216,.32)}
.qf-go:disabled{opacity:.65;cursor:default}
.qf-note{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px 0 0;font-size:12px;color:var(--muted)}
.qf-note svg{width:14px;height:14px;flex:0 0 14px}

/* receipt */
.qdone{text-align:center;padding:14px 6px 6px}
.qtick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;
  place-items:center;background:rgba(31,167,74,.12);color:var(--green);
  animation:qpop .42s cubic-bezier(.3,1.5,.5,1)}
.qtick svg{width:30px;height:30px}
@keyframes qpop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.qdone h3{margin:0 0 8px;font:800 20px var(--font-ui);letter-spacing:-.02em;color:var(--ink)}
.qdone p{margin:0 auto 18px;max-width:42ch;font-size:14px;line-height:1.65;color:var(--muted)}
.qref{padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--soft);
  margin-bottom:16px}
.qref span{display:block;font:700 10.5px var(--font-ui);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.qref b{display:block;margin-top:6px;font:800 23px var(--font-ui);letter-spacing:.03em;
  color:var(--ink)}
.qsmall{font-size:12.5px!important}

@media(max-width:620px){
  .qpanel{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;
    top:0;left:0;transform:none}
  .qpanel.on{transform:none}
  .qhead{padding:18px 18px}
  .qhead h2{font-size:18px}
  .qbody{padding:18px}
  .qf-grid{grid-template-columns:minmax(0,1fr)}
  .qf-f input,.qf-f textarea,.qf-f select{font-size:16px}
}


/* ================= sticky contact bar (phones) =================
   Locate us / Call / WhatsApp / Email / Get a quote, pinned within thumb
   reach. Above 980px it is hidden: the header already carries the phone
   number and the quote button there. */
.mbar{display:none}
@media(max-width:980px){
  .mbar{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;
    /* Above the page, below every overlay. The scrims sit at 200-300
       (.scrim 200, .cmpscrim 200, .qscrim 300) and the cart drawer at 201;
       at 900 this bar floated over the drawer and covered its buttons. */
    z-index:120;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(16,32,52,.10);
    /* clear of the home indicator on iPhones */
    padding-bottom:env(safe-area-inset-bottom,0)}
  .mbar > *{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:8px 2px 7px;border:0;background:none;
    font:600 9.5px/1.15 Roboto,system-ui,sans-serif;letter-spacing:.01em;
    color:var(--ink);text-align:center;cursor:pointer;text-decoration:none;
    -webkit-tap-highlight-color:transparent}
  .mbar svg{width:20px;height:20px;flex:0 0 20px;color:var(--blue)}
  .mbar .wa svg{color:#25D366}
  .mbar .quote{color:#fff;background:var(--blue)}
  .mbar .quote svg{color:#fff}
  .mbar > *:active{background:var(--soft)}
  .mbar .quote:active{background:var(--blue-d,#0f4ba3)}
  .mbar > * + *{border-left:1px solid var(--line)}
  /* the bar floats over the page, so give the document room to scroll past it */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  /* the header pair is now duplicated at the bottom; keep one of them */
  .navcta{display:none}
}
@media(max-width:980px) and (orientation:landscape){
  /* a landscape phone has little height to spare */
  .mbar > *{padding:5px 2px}
  .mbar svg{width:17px;height:17px;flex:0 0 17px}
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}

/* ================================================================
   Trending-category tabs: tell the reader the row scrolls.
   The strip is clipped by `overflow-x:auto`, so on a phone the sixth
   category simply isn't there — nothing on screen says to swipe.
   `.cshint` is appended by app.js only when the row actually overflows,
   and pinned with `position:sticky` inside the scroller so it rides the
   right edge; a negative margin means it overlays the last chip instead
   of widening the track. It fades out once the end is reached.
   ================================================================ */
.cshint{display:none}
@media(max-width:980px){
  .csbar.scrollable .cshint{
    display:flex;align-items:center;justify-content:flex-end;
    /* -12px cancels the strip's own padding, so the fade reaches the same
       edge the chips scroll under rather than stopping 12px short */
    position:sticky;right:-12px;z-index:1;
    flex:0 0 auto;width:64px;margin-left:-64px;align-self:stretch;
    pointer-events:none;
    /* browsers interpolate gradients with premultiplied alpha, so a bare
       `transparent` fades cleanly rather than darkening toward black */
    background:linear-gradient(90deg,transparent 0%,var(--page) 68%);
    color:var(--blue);
    transition:opacity .2s ease}
  .csbar.scrollable.atend .cshint{opacity:0}
  .cshint svg{width:16px;height:16px;margin-right:1px;
    animation:csnudge 1.9s ease-in-out 3}
}
@keyframes csnudge{
  0%,55%,100%{transform:translateX(0)}
  75%{transform:translateX(-5px)}
}
@media(prefers-reduced-motion:reduce){.cshint svg{animation:none}}

/* ---- light / dark logo -----------------------------------------------
   A dark-blue wordmark vanishes against the dark header, which is why the
   old rule here only brightened it by 8% and hoped. When a dark-background
   logo is uploaded in Branding & appearance the header carries both and
   swaps them, and the brightness hack is dropped for that file — it is
   already light and does not want lifting. */
.logo img.logo-dark{display:none}
:root[data-theme="dark"] .logo img.logo-light{display:none}
:root[data-theme="dark"] .logo img.logo-dark{display:block;filter:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo img.logo-light{display:none}
  :root:not([data-theme="light"]) .logo img.logo-dark{display:block;filter:none}
}

/* ---- feature panels in dark mode ---------------------------------------
   The panel painted itself white outright — `.fx{background:#fff}` for the
   card, and `.fxi ~ *` in the white-panels rule for the text column beside
   the picture — while the type inside it follows the theme. In dark mode
   that produced the one combination on this site that genuinely cannot be
   read: pale grey text on white. The name, the old price, the description
   and the brand line were all but invisible.

   The card now follows the theme the way .pc does. Two things deliberately
   do not:

   * The picture tile keeps its pale tint in both themes, for the same
     reason .pcimg keeps its white one — most product photography here is
     shot on white, and a dark tile shows the photo as a bright rectangle
     floating in a hole.
   * The "Photo coming soon" placeholder sits inside that light tile, so it
     is painted light too. Left on var(--soft) it came out as a dark slab in
     the middle of a pale panel, which is what the second card in the shop
     shows today.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] .fx{background:var(--surface)}
:root[data-theme="dark"] .fxi ~ *{background:var(--surface)}
:root[data-theme="dark"] .fxi .noimg,
:root[data-theme="dark"] .pcimg .noimg{background:rgba(18,48,92,.06);color:#5b6673}
:root[data-theme="dark"] .fxi .noimg svg,
:root[data-theme="dark"] .pcimg .noimg svg{opacity:.4}
/* the idle dots are drawn in --line, which on a dark card is a shade away
   from the card itself — there was no way to see how many slides there were */
:root[data-theme="dark"] .fxdot{background:color-mix(in srgb,var(--muted) 45%,transparent)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fx{background:var(--surface)}
  :root:not([data-theme="light"]) .fxi ~ *{background:var(--surface)}
  :root:not([data-theme="light"]) .fxi .noimg,
  :root:not([data-theme="light"]) .pcimg .noimg{background:rgba(18,48,92,.06);
    color:#5b6673}
  :root:not([data-theme="light"]) .fxi .noimg svg,
  :root:not([data-theme="light"]) .pcimg .noimg svg{opacity:.4}
  :root:not([data-theme="light"]) .fxdot{
    background:color-mix(in srgb,var(--muted) 45%,transparent)}
}

/* ---- sale badges in dark mode ------------------------------------------
   Every discount badge on the site is white on var(--red). Dark mode
   lightens that red to #ff6b6b so it reads against a near-black page, and
   white on it measures about 2.6:1 — under the 4.5:1 small bold type needs.
   The badge is the one place the red is a *ground* rather than ink, so in
   dark mode it takes the red back down until the white on it is legible.
   Kept in one rule across .fxoff, .pct, .sale and .pct2 so the badge on a
   feature panel and the badge on the product card beside it stay identical.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] .fxoff,
:root[data-theme="dark"] .pct,
:root[data-theme="dark"] .sale,
:root[data-theme="dark"] .potd .pct2{
  background:color-mix(in srgb,var(--red) 72%,#000);color:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fxoff,
  :root:not([data-theme="light"]) .pct,
  :root:not([data-theme="light"]) .sale,
  :root:not([data-theme="light"]) .potd .pct2{
    background:color-mix(in srgb,var(--red) 72%,#000);color:#fff}
}

/* ---- the hero frame on a phone -----------------------------------------
   Every hero background is 16:9 — the upload spec (core/specs.py
   HERO_BACKGROUND, 2400x1350) fixes it — but the frame on a phone was a
   452px-tall box sized for a slide that stacks a headline, six spec chips
   and a price. The artwork was drawn `contain` inside that taller box and
   centred, so a 390px phone showed roughly 125px of empty gradient above
   the picture, and the slider's own 330px min-height then clipped the
   bottom of it off. Blank space above, cropped artwork below.

   The frame now takes the artwork's own proportions, so the picture fills
   it exactly: nothing empty, nothing cut. `cover` rather than `contain`
   only so sub-pixel rounding cannot leave a hairline band.
   --------------------------------------------------------------------- */
@media(max-width:900px){
  .hero .slider{height:auto;min-height:0;aspect-ratio:16/9}
  .hero .slide .banner{min-height:0!important;height:100%}
  .hero .banner.art .bbg{object-fit:cover;object-position:center}

  /* A slide that lays out live wording needs more room than 16:9 gives it.
     A headline alone fits; a price block, spec chips, bullets, a button or
     a stat row do not, so the presence of any of those puts the taller
     frame back — and then the artwork is shown whole inside it rather than
     cropped, which is what the clipping above was. Browsers without :has()
     skip this and keep the short frame, which is the right fallback: today
     every slide here is ready-made artwork. */
  .hero:has(.bprice) .slider,.hero:has(.bspecs) .slider,
  .hero:has(.bsub) .slider,.hero:has(.bpill) .slider,
  .hero:has(.bcta) .slider,.hero:has(.bstat) .slider{
    aspect-ratio:auto;min-height:452px}
  .hero:has(.bprice) .banner.art .bbg,.hero:has(.bspecs) .banner.art .bbg,
  .hero:has(.bsub) .banner.art .bbg,.hero:has(.bpill) .banner.art .bbg,
  .hero:has(.bcta) .banner.art .bbg,.hero:has(.bstat) .banner.art .bbg{
    object-fit:contain}
}

/* ---- product description typography --------------------------------
   Descriptions are rendered through catalog/richtext.py, which turns the
   imported plain text into headings, paragraphs and lists. These rules give
   that structure a readable rhythm: a comfortable measure, clear heading
   steps, and bullets that line up. */
.prose{font-size:15px;line-height:1.7;color:var(--ink);max-width:78ch}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 14px;color:var(--muted)}
.prose h2,.prose h3,.prose h4{color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.prose h2{font-size:20px;font-weight:700;margin:28px 0 10px}
.prose h3{font-size:16.5px;font-weight:700;margin:24px 0 8px}
.prose h4{font-size:15px;font-weight:700;margin:20px 0 6px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 7px;padding-left:4px;color:var(--muted)}
.prose li::marker{color:var(--blue)}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--line);color:var(--muted)}
@media(max-width:640px){.prose{font-size:14.5px}.prose h3{font-size:16px;margin-top:20px}}

/* sold out: the buy button says so and cannot be pressed */
.cta.is-soldout,.cta.is-soldout:hover{background:var(--soft)!important;color:var(--muted)!important;
  border-color:var(--line)!important;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.qty button:disabled,.qty input:disabled{opacity:.5;cursor:not-allowed}
.qtyrow .cta.is-soldout{flex:1 1 auto;white-space:nowrap;min-width:0}