:root{
  --bg:#07080a; --bg2:#0d1015; --card:#12161d; --line:#232a35; --line2:#2e3745;
  --ink:#f3f5f8; --muted:#98a3b3; --accent:#ff6a13; --accent2:#7a3200;
  --ok:#2ecc71; --radius:16px; --max:1320px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Archivo Black','Arial Black',Impact,var(--font);
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 16px;background:var(--accent);color:#07080a;
  font-weight:900;z-index:9999;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.65;overflow-x:hidden;
  background-image:radial-gradient(1200px 600px at 15% -5%,rgba(255,106,19,.10),transparent 60%),
                   radial-gradient(900px 500px at 95% 8%,rgba(255,106,19,.055),transparent 60%);
  background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2,h3,h4{font-family:var(--display);line-height:1.06;letter-spacing:-.025em;margin:0 0 .5em;
  text-transform:uppercase;font-weight:900}
h1{font-size:clamp(1.8rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.4rem,3.6vw,2.3rem)}
h3{font-size:clamp(1.05rem,2.2vw,1.35rem)}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.center{text-align:center}
.accentword{color:var(--accent)}

/* ============ MOTION PRIMITIVES ============ */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}
  100%{transform:translate(0,0) scale(1)}}
@keyframes kenburns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.18) translate(-1.5%,-1.5%)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes shine{0%{left:-120%}60%,100%{left:130%}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes bounceIn{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus-visible,.chip:focus-visible,.size:focus-visible,.stylechip:focus-visible,
.swatch:focus-visible,.thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============ TOP BAR ============ */
.promo{position:relative;overflow:hidden;width:100%;
  background:linear-gradient(90deg,#ff6a13,#ffa056,#ff6a13);
  background-size:200% 100%;animation:sheen 9s linear infinite;color:#0a0b0d;
  font-weight:900;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  text-align:center;padding:9px 12px}
@keyframes sheen{0%{background-position:0% 0}100%{background-position:200% 0}}
header{position:sticky;top:0;z-index:60;background:rgba(7,8,10,.86);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);
  transition:box-shadow .3s,background .3s}
header.stuck{box-shadow:0 10px 40px rgba(0,0,0,.6);background:rgba(7,8,10,.96)}
.nav{display:flex;align-items:center;gap:14px;height:68px}
.logo{font-family:var(--display);font-size:1.15rem;letter-spacing:-.03em;display:flex;
  align-items:center;gap:10px;white-space:nowrap}
.logo .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#ff9a4d);color:#0a0b0d;font-size:.95rem;flex:none;
  box-shadow:0 0 0 0 rgba(255,106,19,.5);transition:box-shadow .3s,transform .3s}
.logo:hover .mark{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 24px rgba(255,106,19,.55)}
.nav .links{display:flex;gap:22px;margin-left:auto;font-size:.85rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.nav .links a{color:var(--muted);position:relative;padding:4px 0;transition:color .18s}
.nav .links a:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--accent);transition:width .25s ease}
.nav .links a:hover{color:var(--ink)}
.nav .links a:hover:after,.nav .links a[aria-current]:after{width:100%}
.nav .links a[aria-current]{color:var(--ink)}
.burger{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--ink);
  width:44px;height:40px;border-radius:10px;display:none;font-size:1.15rem;cursor:pointer}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--bg2);padding:8px 0}
.mobnav.open{display:block;animation:bounceIn .25s ease}
.mobnav a{display:block;padding:12px 18px;font-weight:800;border-bottom:1px solid var(--line);
  text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}
@media(max-width:980px){.nav .links{display:none}.burger{display:block}}

/* ============ COUNTDOWN BAR ============ */
.cdbar{background:linear-gradient(90deg,rgba(255,106,19,.16),rgba(255,106,19,.04));
  border-bottom:1px solid var(--line);padding:10px 0}
.cdbar .in{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.cdbar .lbl{color:var(--muted)}
.cd{display:flex;gap:7px}
.cd b{background:#000;border:1px solid var(--line2);border-radius:8px;padding:5px 9px;
  font-family:var(--display);font-size:1rem;min-width:44px;text-align:center;color:var(--accent);
  display:inline-block}
.cd b span{display:block;font-family:var(--font);font-size:.55rem;color:var(--muted);
  letter-spacing:.1em;font-weight:700}

/* ============ HOME WEEK 1 HOOK ============ */
.wksec{padding:44px 0 6px}
.wkhead{max-width:920px;margin-bottom:20px}
.wkhead .eyebrow{margin-bottom:10px}
.wkhead p{color:var(--muted);max-width:78ch}
.wkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:24px}
.wk{display:flex;flex-direction:column;gap:6px;background:var(--card);
  border:1px solid var(--line);border-top:3px solid var(--ca);border-radius:var(--radius);
  padding:18px 16px 15px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.wk:hover{transform:translateY(-3px);border-color:var(--ca);box-shadow:var(--shadow)}
.wk-name{font-family:var(--display);font-size:.98rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ca);margin:0 0 2px}
.wk-game{font-weight:700;font-size:.94rem}
.wk-note{color:var(--muted);font-size:.82rem;line-height:1.5}
.wk-go{margin-top:auto;padding-top:8px;font-size:.8rem;font-weight:800;color:var(--ca)}
.wkcta{margin-top:20px}
@media(max-width:1000px){.wkgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wkgrid{grid-template-columns:1fr}}

/* ============ WHY THIS LOCKER STRIP ============ */
.whystrip{background:linear-gradient(180deg,var(--bg2),#0e1218);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:36px;padding:22px 0 26px;position:relative;overflow:hidden}
.whystrip:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.9}
.whyhead{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.whylabel{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:900;white-space:nowrap}
.whylabel:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px rgba(255,106,19,.6);flex:none}
.whyline{height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
.whystrip .wkin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.whystrip .wkin>div{background:rgba(255,255,255,.02);border:1px solid rgba(35,42,53,.9);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  transition:border-color .2s,background .2s,transform .2s}
.whystrip .wkin>div:hover{background:rgba(255,255,255,.04);border-color:var(--line2);transform:translateY(-2px)}
.whystrip .wkin>div b{font-family:var(--display);font-size:.86rem;letter-spacing:.01em;
  text-transform:uppercase;line-height:1.25;white-space:nowrap}
.whystrip .wkin>div span{font-size:.76rem;color:var(--muted);line-height:1.4}
@media(max-width:1200px){.whystrip .wkin{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.whystrip .wkin{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.whystrip .wkin{grid-template-columns:1fr}.whyhead{margin-bottom:14px}}

/* ============ HERO ============ */
.hero{position:relative;min-height:clamp(420px,58vw,640px);display:flex;align-items:center;
  overflow:hidden;border-bottom:1px solid var(--line)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
  animation:kenburns 26s ease-in-out infinite alternate}
.hero:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,8,10,.97) 5%,rgba(7,8,10,.62) 48%,rgba(7,8,10,.92))}
.hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:1;
  animation:drift 18s ease-in-out infinite}
.hero .blob.a{width:340px;height:340px;background:var(--accent);left:-60px;top:-40px}
.hero .blob.b{width:280px;height:280px;background:#3aa0ff;right:8%;bottom:-70px;
  animation-duration:23s;opacity:.22}
.hero .wrap{position:relative;z-index:3;padding-top:56px;padding-bottom:56px}
.hero p.lede{max-width:56ch;color:#dbe1ea;font-size:clamp(1rem,1.8vw,1.16rem)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(255,106,19,.55);background:rgba(255,106,19,.09);
  padding:6px 14px;border-radius:99px;margin-bottom:18px}
.eyebrow .dot{width:7px;height:7px;border-radius:99px;background:var(--accent);
  animation:pulse 1.5s infinite}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;background:linear-gradient(135deg,var(--accent),#ff9145);color:#0a0b0d;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;padding:15px 28px;border-radius:12px;border:0;
  cursor:pointer;font-size:.92rem;font-family:var(--font);
  transition:transform .16s cubic-bezier(.2,.8,.3,1.2),box-shadow .2s;
  box-shadow:0 8px 26px rgba(255,106,19,.28)}
.btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 14px 40px rgba(255,106,19,.45)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn:before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg)}
.btn:hover:before{animation:shine .8s ease}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.btn.block{width:100%}
.btn.lg{padding:18px 32px;font-size:1rem}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ============ TICKER ============ */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);padding:11px 0;white-space:nowrap;position:relative}
.ticker:before,.ticker:after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2}
.ticker:before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.ticker:after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.ticker .track{display:inline-flex;gap:34px;animation:marquee 32s linear infinite;will-change:transform}
.ticker:hover .track{animation-play-state:paused}
.ticker i{font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--muted);display:inline-flex;align-items:center;gap:34px}
.ticker i:after{content:'';width:6px;height:6px;border-radius:99px;background:var(--accent);
  display:inline-block}
.ticker i.hot{color:var(--accent)}

/* ============ TRUST ============ */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.trust div{background:var(--bg);padding:18px 12px;text-align:center;font-size:.74rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  transition:background .25s}
.trust div:hover{background:var(--bg2)}
.trust b{display:block;color:var(--ink);font-size:.92rem;margin-bottom:3px;font-family:var(--display)}
@media(max-width:700px){.trust{grid-template-columns:repeat(2,1fr)}}

section{padding:clamp(42px,6vw,74px) 0}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:28px;flex-wrap:wrap}
.sechead>div{flex:1 1 auto;min-width:0}
.sechead h2{margin-bottom:6px}
.sechead p{margin:0;color:var(--muted);max-width:92ch}
.link{color:var(--accent);font-weight:900;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.08em;white-space:nowrap;transition:gap .2s}
.link:hover{text-decoration:underline}

/* ============ COLLECTION CARDS ============ */
.colgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.colcard{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  min-height:330px;display:flex;align-items:flex-end;background:var(--card);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .3s,box-shadow .35s}
.colcard:hover{transform:translateY(-8px);border-color:var(--ca,var(--accent));
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.colcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66;
  transition:transform .8s cubic-bezier(.2,.8,.3,1),opacity .35s}
.colcard:hover img{transform:scale(1.1);opacity:.82}
.colcard:after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,7,9,.97) 18%,rgba(6,7,9,.1))}
.colcard .body{position:relative;z-index:2;padding:24px;width:100%}
.colcard h3{margin-bottom:6px;transition:transform .3s}
.colcard:hover h3{transform:translateX(5px)}
.colcard .cnt{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:#07080a;background:var(--ca,var(--accent));padding:4px 10px;
  border-radius:6px;margin-bottom:10px}
.colcard .go{position:absolute;right:22px;bottom:24px;width:40px;height:40px;border-radius:99px;
  border:1.5px solid var(--line2);display:grid;place-items:center;color:var(--ink);
  transition:background .3s,transform .3s,border-color .3s;z-index:3}
.colcard:hover .go{background:var(--ca,var(--accent));color:#07080a;transform:translateX(4px);
  border-color:transparent}

/* ============ PRODUCT GRID / CARDS ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:11px}}
.card{position:relative;background:linear-gradient(180deg,var(--card),#0e1218);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .25s,box-shadow .3s}
.card:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  background:linear-gradient(90deg,var(--ca,var(--accent)),transparent);
  opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-7px);border-color:var(--ca,var(--accent));
  box-shadow:0 22px 55px rgba(0,0,0,.6)}
.card:hover:before{opacity:1}
/* the fix: product photos sit on a lit pedestal, not a flat white hole */
.card .ph{position:relative;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#ffffff 0%,#f0f3f7 46%,#dfe5ee 78%,#cdd6e2 100%)}
.card .ph:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 -34px 44px -26px rgba(10,12,16,.55),
             inset 0 0 0 1px rgba(255,255,255,.55)}
.card .ph .glow{position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
  width:78%;height:26%;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse,var(--ca,var(--accent)) 0%,transparent 70%);
  opacity:.22;filter:blur(14px);transition:opacity .35s,transform .5s}
.card:hover .ph .glow{opacity:.5;transform:translateX(-50%) scale(1.15)}
.card .ph img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;
  box-sizing:border-box;padding:6%;transition:transform .55s cubic-bezier(.2,.8,.3,1),opacity .35s;
  filter:drop-shadow(0 12px 18px rgba(12,16,22,.28))}
.card:hover .ph img{transform:scale(1.07)}
.card .ph img.alt{position:absolute;inset:0;opacity:0}
.card:hover .ph img.alt{opacity:1}
.card .ph .sweep{position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);pointer-events:none}
.card:hover .ph .sweep{animation:shine 1s ease}
.card .body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:.9rem;margin:0;line-height:1.3;text-transform:none;font-family:var(--font);
  font-weight:700;letter-spacing:0;transition:color .2s}
.card:hover h3{color:var(--ca,var(--accent))}
@media(max-width:560px){.card h3{font-size:.8rem}}
.card .price{font-family:var(--display);font-size:1.1rem;color:var(--ca,var(--accent));
  margin-top:auto}
.card .meta{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;
  font-weight:800}
.tagpill{position:absolute;top:10px;left:10px;z-index:4;background:rgba(7,8,10,.86);color:#fff;
  font-size:.6rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px)}
.tagpill.hot{background:var(--accent);color:#07080a;border-color:transparent;
  box-shadow:0 0 18px rgba(255,106,19,.6)}
.tagpill.thr{background:rgba(255,255,255,.9);color:#07080a;border-color:transparent}

/* ============ TOOLS ============ */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px;
  padding:15px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.tools input,.tools select{background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  padding:12px 14px;border-radius:10px;font-size:.9rem;font-family:var(--font);
  transition:border-color .2s,box-shadow .2s}
.tools input:focus,.tools select:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,106,19,.16)}
.tools input{flex:1;min-width:190px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--bg);border:1px solid var(--line2);color:var(--muted);padding:9px 15px;
  border-radius:99px;font-size:.77rem;font-weight:800;cursor:pointer;text-transform:uppercase;
  letter-spacing:.05em;font-family:var(--font);transition:all .2s}
.chip:hover{color:var(--ink);border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#07080a;
  box-shadow:0 6px 18px rgba(255,106,19,.3)}

.crumbs{font-size:.76rem;color:var(--muted);padding:16px 0;letter-spacing:.04em}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.45;margin:0 7px}

/* ============ PDP ============ */
.pdp{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:38px;
  align-items:start;padding-bottom:44px}
@media(max-width:920px){.pdp{grid-template-columns:1fr;gap:24px}}
.gallery{position:sticky;top:86px}
@media(max-width:920px){.gallery{position:static}}
.stage{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#ffffff 0%,#eff2f7 48%,#dbe2ec 80%,#c7d1de 100%)}
.stage:after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -60px 70px -50px rgba(10,12,16,.5),inset 0 0 0 1px rgba(255,255,255,.6)}
.stage .glow{position:absolute;left:50%;bottom:-12%;transform:translateX(-50%);width:70%;height:24%;
  border-radius:50%;background:radial-gradient(ellipse,var(--accent),transparent 70%);
  opacity:.3;filter:blur(20px)}
.stage img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;
  box-sizing:border-box;padding:3%;
  filter:drop-shadow(0 20px 26px rgba(12,16,22,.3));animation:bounceIn .4s ease}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px;margin-top:11px}
.thumb{background:linear-gradient(180deg,#fff,#e6ebf2);border:2px solid var(--line);
  border-radius:10px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;padding:0;
  transition:transform .2s,border-color .2s}
.thumb:hover{transform:translateY(-3px)}
.thumb.on{border-color:var(--accent);box-shadow:0 0 16px rgba(255,106,19,.4)}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6%}
.buybox h1{margin-bottom:12px}
.pricerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.pricebig{font-family:var(--display);font-size:2.3rem;color:var(--accent)}
.strike{color:var(--muted);text-decoration:line-through;font-weight:700}
.save{background:rgba(46,204,113,.14);color:var(--ok);font-weight:900;font-size:.72rem;
  padding:5px 10px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase}
.stars{color:#ffc531;font-size:.95rem;letter-spacing:2px}
.opts{margin:18px 0}
.opts .lbl{font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.size{border:1.5px solid var(--line2);background:var(--bg2);color:var(--ink);min-width:52px;
  padding:11px 13px;border-radius:9px;font-weight:800;font-size:.84rem;cursor:pointer;
  font-family:var(--font);transition:all .18s}
.size:hover{border-color:var(--accent);transform:translateY(-2px)}
.size.on{border-color:var(--accent);background:var(--accent);color:#07080a}
.stylelist{display:flex;flex-wrap:wrap;gap:8px}
.stylechip{border:1.5px solid var(--line2);background:var(--bg2);padding:10px 14px;border-radius:9px;
  font-size:.8rem;font-weight:700;cursor:pointer;transition:all .18s}
.stylechip:hover{border-color:var(--accent);transform:translateY(-2px)}
.stylechip.on{border-color:var(--accent);color:var(--accent);background:rgba(255,106,19,.08)}
.swatchrow{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:56px;height:56px;border-radius:10px;overflow:hidden;border:2px solid var(--line);
  background:linear-gradient(180deg,#fff,#e6ebf2);cursor:pointer;padding:0;transition:all .2s}
.swatch:hover{transform:translateY(-3px)}
.swatch.on{border-color:var(--accent);box-shadow:0 0 16px rgba(255,106,19,.4)}
.swatch img{width:100%;height:100%;object-fit:contain;padding:5%}
.ships{font-size:.84rem;color:var(--muted);margin-top:14px;display:grid;gap:7px}
.ships b{color:var(--ink)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.badge{font-size:.69rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:99px;padding:7px 12px;color:var(--muted);
  transition:all .2s}
.badge:hover{border-color:var(--accent);color:var(--accent)}
.urgency{display:flex;align-items:center;gap:9px;background:rgba(255,106,19,.11);
  border:1px solid rgba(255,106,19,.4);border-radius:11px;padding:12px 14px;
  font-size:.82rem;font-weight:700;margin-bottom:15px}
.dot{width:8px;height:8px;border-radius:99px;background:var(--accent);
  animation:pulse 1.4s infinite;flex:none}
.trendbox{background:linear-gradient(135deg,rgba(255,106,19,.16),rgba(255,106,19,.03));
  border:1px solid rgba(255,106,19,.45);border-radius:12px;padding:14px 16px;margin-bottom:16px;
  font-size:.86rem}
.trendbox b{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  display:flex;align-items:center;gap:7px;margin-bottom:5px}

/* ============ CONTENT ============ */
.prose{max-width:76ch}
.prose h2{margin-top:1.5em}
.prose ul{padding-left:1.15em;color:#ccd4e0}
.prose li{margin-bottom:.45em}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:border-color .3s}
.panel:hover{border-color:var(--line2)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left}
th{background:var(--bg2);text-transform:uppercase;font-size:.71rem;letter-spacing:.08em}
tr:hover td{background:rgba(255,255,255,.02)}
details{border:1px solid var(--line);border-radius:11px;padding:15px 17px;margin-bottom:9px;
  background:var(--card);transition:border-color .25s}
details:hover{border-color:var(--line2)}
details[open]{border-color:var(--accent)}
details summary{cursor:pointer;font-weight:800;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:after{content:'+';float:right;color:var(--accent);font-weight:900;font-size:1.2rem;
  line-height:1;transition:transform .25s}
details[open] summary:after{content:'-';transform:rotate(180deg)}
details p{margin:11px 0 0;color:var(--muted)}

/* stat counters */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 12px;
  transition:transform .3s,border-color .3s}
.stat:hover{transform:translateY(-5px);border-color:var(--accent)}
.stat b{display:block;font-family:var(--display);font-size:2rem;color:var(--accent);line-height:1}
.stat span{font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:700}

/* sticky mobile CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(7,8,10,.97);
  border-top:1px solid var(--line2);padding:11px 14px;display:none;gap:12px;align-items:center;
  backdrop-filter:blur(14px);box-shadow:0 -10px 34px rgba(0,0,0,.55)}
.sticky .p{font-family:var(--display);color:var(--accent);font-size:1.2rem;white-space:nowrap}
.sticky .btn{flex:1}
@media(max-width:920px){.sticky{display:flex}body{padding-bottom:78px}}

/* back to top */
.totop{position:fixed;right:16px;bottom:96px;z-index:65;width:46px;height:46px;border-radius:99px;
  background:var(--accent);color:#07080a;border:0;display:grid;place-items:center;cursor:pointer;
  font-size:1.1rem;font-weight:900;opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s,transform .3s;box-shadow:0 10px 30px rgba(255,106,19,.4)}
.totop.on{opacity:1;pointer-events:auto;transform:none}
@media(min-width:921px){.totop{bottom:26px}}

footer{border-top:1px solid var(--line);background:var(--bg2);padding:48px 0 30px;
  font-size:.87rem;color:var(--muted)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
footer h2,footer h4{font-size:.76rem;letter-spacing:.13em;color:var(--ink);margin-bottom:13px}
footer a{display:block;padding:4px 0;color:var(--muted);transition:color .2s,transform .2s}
footer a:hover{color:var(--accent);transform:translateX(3px)}
.legal{border-top:1px solid var(--line);margin-top:30px;padding-top:19px;font-size:.76rem;
  line-height:1.6}
.disclaim{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;
  padding:15px 17px;font-size:.78rem;color:var(--muted);margin-top:20px}


/* ================= LIGHT SECTIONS (catalogue + PDP) ================= */
.light{
  --bg:#f5f8fc; --bg2:#eaeff7; --card:#ffffff; --line:#dde4ee; --line2:#c4cfdf;
  --ink:#0e1420; --muted:#5c6a7e;
  background:#f5f8fc; color:var(--ink);
}
.light a{color:inherit}
.light h1,.light h2,.light h3,.light h4{color:#0b111b}
.light .muted{color:#5c6a7e}
.light section{background:transparent}
.light .crumbs{color:#5c6a7e}
.light .crumbs a:hover{color:var(--accent)}

.light .card{background:#fff;border-color:#e2e8f1;
  box-shadow:0 4px 14px rgba(16,24,40,.06)}
.light .card:hover{box-shadow:0 20px 46px rgba(16,24,40,.16)}
.light .card .ph{background:radial-gradient(circle at 50% 30%,#ffffff 0%,#f5f8fc 58%,#e9eff7 100%)}
.light .card .ph:after{box-shadow:inset 0 -26px 34px -28px rgba(16,24,40,.16),
  inset 0 0 0 1px rgba(16,24,40,.05)}
.light .card .ph .glow{opacity:.16}
.light .card:hover .ph .glow{opacity:.34}
.light .card h3{color:#0e1420}
.light .card .meta{color:#6b7788}
.light .tagpill{background:rgba(255,255,255,.94);color:#0e1420;
  border-color:rgba(16,24,40,.14);box-shadow:0 2px 8px rgba(16,24,40,.08)}
.light .tagpill.hot{background:var(--accent);color:#fff;border-color:transparent}
.light .tagpill.thr{background:#0e1420;color:#fff}

.light .tools{background:#fff;border-color:#e2e8f1;box-shadow:0 4px 14px rgba(16,24,40,.05)}
.light .tools input,.light .tools select{background:#f7f9fc;border-color:#d6deea;color:#0e1420}
.light .chip{background:#fff;border-color:#d6deea;color:#5c6a7e}
.light .chip:hover{color:#0e1420}
.light .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.light .panel{background:#fff;border-color:#e2e8f1;box-shadow:0 4px 14px rgba(16,24,40,.05)}
.light .prose ul,.light .prose li{color:#3b4757}
.light .prose p{color:#2c3644}
.light th{background:#eef2f8;color:#0e1420}
.light td,.light th{border-color:#dfe5ee}
.light tr:hover td{background:#f7f9fc}
.light details{background:#fff;border-color:#e2e8f1}
.light details p{color:#5c6a7e}

/* PDP in light mode */
.light .stage{border-color:#e2e8f1;
  background:radial-gradient(circle at 50% 28%,#ffffff 0%,#f6f9fd 55%,#e9eff7 100%);
  box-shadow:0 10px 34px rgba(16,24,40,.08)}
.light .stage:after{box-shadow:inset 0 -50px 60px -55px rgba(16,24,40,.22),
  inset 0 0 0 1px rgba(16,24,40,.05)}
.light .stage .glow{opacity:.18}
.light .thumb{background:#fff;border-color:#dde4ee}
.light .thumb.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,19,.18)}
.light .size,.light .stylechip,.light .swatch{background:#fff;border-color:#d6deea;color:#0e1420}
.light .size:hover,.light .stylechip:hover{border-color:var(--accent)}
.light .size.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.light .stylechip.on{background:rgba(255,106,19,.08);color:#b34400;border-color:var(--accent)}
.light .swatch.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,19,.18)}
.light .badge{border-color:#d6deea;color:#5c6a7e}
.light .badge:hover{border-color:var(--accent);color:var(--accent)}
.light .ships{color:#5c6a7e}
.light .ships b{color:#0e1420}
.light .strike{color:#8b95a5}
.light .eyebrow{background:rgba(255,106,19,.10);border-color:rgba(255,106,19,.45)}
.light .urgency{background:rgba(255,106,19,.09);border-color:rgba(255,106,19,.38);color:#7a3200}
.light .trendbox{background:linear-gradient(135deg,rgba(255,106,19,.13),rgba(255,106,19,.03));
  border-color:rgba(255,106,19,.42);color:#3b4757}
.light .stat{background:#fff;border-color:#e2e8f1}
.light .link{color:#c2510b}
.light .btn.ghost{color:#0e1420;border-color:#c4cfdf}
.light .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.light .sechead p{color:#5c6a7e}

/* soft divider so the light block meets the dark chrome cleanly */
.lightedge{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}

.feat{margin:0;padding-left:1.1em;color:#cdd5e0}
.light .feat{color:#3b4757}
.light .feat li{color:#3b4757}


/* ============================================================
   FLATTEN THE STACK
   Product mockups are JPEGs on a WHITE square. Any tinted or
   gradient photo panel behind them creates a visible second
   surface. So: card = white, photo area = white, page = grey.
   One border, one soft shadow, nothing else.
   ============================================================ */
.light .card{
  background:#fff;border:1px solid #e5eaf2;border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s}
.light .card:hover{
  transform:translateY(-5px);border-color:#d3dce8;
  box-shadow:0 16px 34px rgba(16,24,40,.13)}
.light .card:before{display:none}
.light .card .ph{background:#fff}
.light .card .ph:after{display:none}
.light .card .ph .glow{display:none}
.light .card .ph .sweep{display:none}
.light .card .ph img{padding:0;filter:none}
.light .card:hover .ph img{transform:scale(1.045)}
.light .card .body{
  padding:14px 15px 16px;border-top:1px solid #f0f3f8;background:#fff;
  border-radius:0 0 14px 14px}
.light .card h3{color:#111827}
.light .card:hover h3{color:#111827}
.light .card .meta{color:#8a94a4;font-size:.67rem}
.light .card .price{color:#111827;font-size:1.05rem}

/* badges: flat, quiet, single layer */
.light .tagpill{
  background:#fff;color:#5c6a7e;border:1px solid #e5eaf2;box-shadow:none;
  backdrop-filter:none;font-weight:800}
.light .tagpill.hot{background:var(--accent);color:#fff;border-color:var(--accent)}
.light .tagpill.thr{background:#111827;color:#fff;border-color:#111827}

/* PDP main image: same treatment */
.light .stage{
  background:#fff;border:1px solid #e5eaf2;border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.light .stage:after{display:none}
.light .stage .glow{display:none}
.light .stage img{padding:0;filter:none}
.light .thumb{
  background:#fff;border:1px solid #e5eaf2;border-radius:10px;box-shadow:none}
.light .thumb img{padding:4%}
.light .thumb.on{border:2px solid var(--accent);box-shadow:none}
.light .swatch{background:#fff;border:1px solid #e5eaf2;box-shadow:none}
.light .swatch.on{border:2px solid var(--accent);box-shadow:none}

/* panels sit flat on the page too */
.light .panel{box-shadow:none;border-color:#e5eaf2}
.light .tools{box-shadow:none;border-color:#e5eaf2}
.light details{border-color:#e5eaf2}
.light .stat{box-shadow:none;border-color:#e5eaf2}


/* ---------- live headlines block ---------- */
.newsbox{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0 24px;
  background:var(--card)}
.newsbox h3{font-size:.95rem;margin:0 0 12px;display:flex;align-items:center;gap:9px}
.newsbox h3:before{content:'';width:8px;height:8px;border-radius:99px;background:var(--accent);
  animation:pulse 1.6s infinite}
ul.news{list-style:none;margin:0;padding:0}
ul.news li{padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem;line-height:1.45}
ul.news li:last-child{border-bottom:0}
ul.news a{font-weight:600}
ul.news a:hover{color:var(--accent);text-decoration:underline}
.light .newsbox{background:#fff;border-color:#e5eaf2}
.light ul.news li{border-color:#eef1f6;color:#2c3644}

/* ---------- product intro description under title ---------- */
.buybox p.desc{font-size:.97rem;line-height:1.62;color:var(--ink);margin-top:6px}
.buybox p.desc em{font-style:italic}
.buybox p.desc strong{color:var(--ink)}

/* ---------- trusted-checkout note on the buy button ---------- */
.checkoutnote{display:flex;gap:11px;align-items:flex-start;background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.35);border-radius:12px;padding:12px 14px;margin:12px 0 4px}
.checkoutnote .lock{font-size:1.1rem;line-height:1.4;flex:0 0 auto}
.checkoutnote p{margin:0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.checkoutnote strong{color:var(--ink);display:block;margin-bottom:2px}
.light .checkoutnote{background:rgba(46,204,113,.07);border-color:rgba(46,204,113,.35)}
.light .checkoutnote strong{color:#123}

/* ---------- product details full-width panels ---------- */
.detailcols{grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.detailcols{grid-template-columns:1fr}}

/* ============ HERO SLIDER ============ */
/* Slides are stacked in a single CSS grid cell: the section is always as tall
   as the tallest slide, so switching slides never jumps the page. */
.hslider{padding:0;position:relative;overflow:hidden;
  display:block;min-height:0}          /* not a flex row - dots must sit under the slides */
.hslider .slides{display:grid;position:relative}
.hslider .slide{grid-area:1/1;min-height:clamp(420px,58vw,640px);display:flex;align-items:center;
  position:relative;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .55s ease,visibility .55s}
.hslider .slide.on{opacity:1;visibility:visible}
/* explicitly cancel the generic .hero ken-burns animation - it fought the
   slider's own transform and pushed the subject out of frame */
.hslider .slide img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;opacity:1;animation:none;transform:scale(1.015);
  transition:transform 7s ease,opacity .8s}
.hslider .slide.on img.bg{transform:scale(1)}
.hslider .slide:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,8,10,.62) 8%,rgba(7,8,10,.08) 55%,rgba(7,8,10,.78))}
.hslider .slide .wrap{position:relative;z-index:3;padding-top:54px;padding-bottom:54px}
.hslider .slide h1,.hslider .slide .hero-title{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hslider .slide .hero-title{font-family:var(--display);line-height:1.06;letter-spacing:-.025em;margin:0 0 .5em;
  text-transform:uppercase;font-weight:900;font-size:clamp(1.8rem,5.4vw,3.5rem)}
.hslider .slide p.lede{color:#f0f3f8;max-width:56ch;font-size:clamp(1rem,1.8vw,1.16rem);
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hslider .slide .eyebrow{background:rgba(7,8,10,.5);border-color:rgba(255,255,255,.4);color:#fff}
.hslider .slide .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(7,8,10,.35)}
.hslider .slide .btn.ghost:hover{color:var(--accent);border-color:var(--accent)}
.hslider .hdots{position:relative;z-index:4;display:flex;gap:8px;justify-content:center;padding:14px 0 4px}
.hslider .hdot{width:26px;height:4px;border-radius:99px;border:0;background:rgba(255,255,255,.5);cursor:pointer;
  transition:all .25s;padding:0}
.hslider .hdot.on{background:var(--accent);width:44px}

/* ---- phones: stop cropping the 16:9 art, stack image over copy ---- */
@media(max-width:760px){
  .hslider:after{display:none}   /* section-wide side gradient would muddy the stacked layout */
  .hslider .slide{display:block;min-height:0}
  /* the inherited .hero ken-burns zoom (scale 1.06 -> 1.18) is what was cutting
     the artwork off on phones. Killed here, and the image keeps its own 16:9
     ratio instead of being cropped into a tall box. */
  .hslider .slide img.bg{position:relative;inset:auto;height:auto;aspect-ratio:16/9;
    object-fit:cover;object-position:50% 45%;animation:none;transform:none;transition:none}
  .hslider .slide.on img.bg{transform:none}
  /* gradient only over the image band, fading it into the page background */
  .hslider .slide:after{bottom:auto;height:56.25vw;
    background:linear-gradient(180deg,rgba(7,8,10,.30) 0%,rgba(7,8,10,.05) 42%,rgba(7,8,10,.72) 82%,var(--bg) 100%)}
  .hslider .slide .wrap{padding:18px 18px 26px;margin-top:-8px}
  .hslider .slide .hero-title{font-size:clamp(1.55rem,7.2vw,2.25rem);text-shadow:none;margin-bottom:.45em}
  .hslider .slide p.lede{font-size:.95rem;line-height:1.55;text-shadow:none;color:#c9d2de;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
  .hslider .slide .eyebrow{font-size:.63rem;letter-spacing:.12em;padding:5px 11px;margin-bottom:12px}
  .hslider .slide .btnrow{margin-top:18px;gap:10px;flex-direction:column;align-items:stretch}
  .hslider .slide .btnrow .btn{width:100%}
  .hslider .slide .btn.lg{padding:14px 18px;font-size:.86rem}
  .hslider .blob{display:none}
  /* bigger tap targets for the dots without changing how they look */
  .hslider .hdots{padding:16px 0 2px;gap:12px}
  .hslider .hdot{height:5px;width:30px;position:relative}
  .hslider .hdot:before{content:'';position:absolute;left:-6px;right:-6px;top:-14px;bottom:-14px}
  .hslider .hdot.on{width:46px}
}
@media(max-width:380px){
  .hslider .slide .hero-title{font-size:1.45rem}
  .hslider .slide p.lede{-webkit-line-clamp:3}
}

/* ============ NEWS TICKER (headlines, not product cards) ============ */
.newsticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);padding:15px 0;white-space:nowrap;position:relative}
.newsticker:before,.newsticker:after{content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2}
.newsticker:before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.newsticker:after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.newsticker .track{display:inline-flex;align-items:center;gap:44px;
  animation:marquee 70s linear infinite;will-change:transform}
.newsticker:hover .track{animation-play-state:paused}
.newsticker a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.newsticker i{font-style:normal;font-weight:700;font-size:1.05rem;color:#dfe6ef;
  display:inline-flex;align-items:center;gap:44px;letter-spacing:.01em;line-height:1.4}
.newsticker i:after{content:'\2726';color:var(--accent);font-size:.7rem;display:inline-block}
.newsticker i.hot{color:#fff}
.newsticker a:hover i{color:var(--accent)}
.newsticker a:hover i.hot{color:var(--accent)}

/* ============ CUSTOM DESIGN ============ */
.customimg{border-radius:18px;overflow:hidden;border:1px solid #e5eaf2;
  box-shadow:0 14px 40px rgba(16,24,40,.10);margin-bottom:26px}
.customimg img{width:100%;height:auto;display:block}
.customform{background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:28px 30px;
  box-shadow:0 10px 30px rgba(16,24,40,.07);max-width:760px;margin:0 auto}
.customform .cf-head{font-family:var(--display);font-size:1.25rem;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;color:#111827;margin-bottom:6px}
.customform form{display:grid;gap:14px}
.customform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.customform label{display:grid;gap:6px;font-size:.74rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#5c6a7e}
.customform input,.customform select,.customform textarea{font-family:var(--font);font-size:.95rem;
  color:#0e1420;background:#f7f9fc;border:1px solid #d6deea;border-radius:10px;padding:11px 13px;
  transition:border-color .2s,box-shadow .2s;width:100%}
.customform input:focus,.customform select:focus,.customform textarea:focus{outline:0;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,19,.14);background:#fff}
.customform textarea{resize:vertical}
.customform select{appearance:auto}
.customform .btn{margin-top:4px}
.formmsg{margin:0;font-size:.84rem;color:#5c6a7e;text-align:center}
@media(max-width:640px){.customform .row{grid-template-columns:1fr}.customform{padding:22px 18px}}

/* custom design: black, professional section */
.customsec{background:#06070a;border-top:1px solid #1a202b;border-bottom:1px solid #1a202b;
  background-image:radial-gradient(1100px 500px at 15% -5%,rgba(255,106,19,.12),transparent 60%),
                   radial-gradient(800px 400px at 90% 10%,rgba(255,106,19,.06),transparent 60%)}
.customsec .sechead p{color:#a7b1bf}
.customsec h2{color:#fff}
.customsec .eyebrow{background:rgba(255,106,19,.14);border-color:rgba(255,106,19,.5)}
.customrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:stretch;
  max-width:1200px;margin:0 auto}
.customimg{border-radius:20px;overflow:hidden;border:1px solid #232b38;
  box-shadow:0 18px 50px rgba(0,0,0,.6);display:flex;align-items:stretch;min-height:560px;
  height:100%;background:#0a0d11;position:relative}
.customimg:before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45));pointer-events:none}
.customimg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;position:relative;z-index:0}
.customform{background:#0e1116;border:1px solid #232b38;border-radius:20px;padding:36px 36px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:center;
  height:100%;min-height:560px}
.customform form{display:grid;gap:15px}
.customform .cf-head{font-family:var(--display);font-size:1.4rem;font-weight:900;
  letter-spacing:-.01em;color:#fff;margin:0 0 2px;text-transform:none}
.customform .cf-sub{margin:0 0 6px;font-size:.95rem;color:#9aa6b5;line-height:1.5}
.customform .row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.customform label{display:grid;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#8b96a5}
.customform input,.customform select,.customform textarea{font-family:var(--font);font-size:.95rem;
  color:#e6ebf1;background:#0a0d11;border:1px solid #2a3341;border-radius:10px;padding:12px 14px;
  transition:border-color .2s,box-shadow .2s;width:100%}
.customform input::placeholder,.customform textarea::placeholder{color:#5d6877}
.customform select{color:#e6ebf1}
.customform select option{background:#0a0d11;color:#e6ebf1}
.customform input:focus,.customform select:focus,.customform textarea:focus{outline:0;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,19,.2);background:#0e1218}
.customform textarea{resize:vertical}
.customform .btn{margin-top:8px}
.formmsg{margin:0;font-size:.84rem;color:#9aa6b5;text-align:center}
@media(max-width:820px){.customrow{grid-template-columns:1fr;gap:24px;align-items:start}.customimg{max-height:460px;min-height:auto}.customimg img{height:100%;max-height:460px;object-fit:cover;object-position:center top}.customform{height:auto;min-height:auto}}
@media(max-width:640px){.customform .row{grid-template-columns:1fr}.customform{padding:22px 18px}}

/* ============ CUSTOM SHIRT POPUP ============ */
.cs-pop{position:fixed;right:22px;bottom:92px;z-index:120;width:320px;background:#0e1116;
  border:1px solid #2a3341;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.65);
  transform:translateY(24px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .35s}
.cs-pop.on{transform:translateY(0);opacity:1}
.cs-pop[hidden]{display:none}
.cs-pop img{width:100%;height:220px;object-fit:cover;object-position:center top;display:block;
  border-bottom:1px solid #2a3341}
.cs-pop .cs-pop-body{padding:18px 20px 20px}
.cs-pop .cs-pop-kicker{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);background:rgba(255,106,19,.14);
  border:1px solid rgba(255,106,19,.5);padding:4px 9px;border-radius:99px;margin-bottom:10px}
.cs-pop h3{margin:0 0 8px;font-size:1.25rem;color:#fff;text-transform:none}
.cs-pop h3 .accentword{color:var(--accent)}
.cs-pop p{margin:0 0 14px;font-size:.86rem;color:#a7b1bf;line-height:1.5}
.cs-pop .btn{padding:12px 16px;font-size:.85rem}
.cs-pop-close{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border-radius:99px;
  border:0;background:rgba(7,8,10,.65);color:#fff;font-size:.85rem;cursor:pointer;display:grid;
  place-items:center;backdrop-filter:blur(4px);transition:background .2s}
.cs-pop-close:hover{background:var(--accent);color:#07080a}
@media(max-width:640px){.cs-pop{width:280px;right:12px;bottom:84px}}
@media(min-width:921px){.cs-pop{bottom:26px}}

/* ============ FAN TREND INDEX + LIVE PLAYER MOMENTS ============ */
.ftisec{padding:36px 0 10px;border-top:1px solid var(--line)}
.fti-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fti-chip{display:flex;flex-direction:column;gap:4px;background:var(--card);
  border:1px solid var(--line);border-top:3px solid var(--ca,var(--accent));
  border-radius:14px;padding:14px 16px;transition:transform .2s,border-color .2s,box-shadow .2s}
.fti-chip:hover{transform:translateY(-3px);border-color:var(--ca,var(--accent));box-shadow:var(--shadow)}
.fti-chip b{font-family:var(--display);font-size:1.15rem;color:var(--ca,var(--accent));letter-spacing:.02em}
.fti-chip span{font-size:.84rem;font-weight:700;color:var(--ink)}
@media(max-width:900px){.fti-chips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fti-chips{grid-template-columns:1fr}}

.ftibox{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0 24px;
  background:var(--card)}
.ftibox-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:6px}
.ftibox h3{font-size:.95rem;margin:0;display:flex;align-items:center;gap:9px}
.ftibox h3:before{content:'';width:8px;height:8px;border-radius:99px;background:var(--accent);
  animation:pulse 1.6s infinite}
.fti-board{display:grid;gap:8px}
.fti-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:8px 12px;
  align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.fti-row:last-child{border-bottom:0}
.fti-name{font-weight:800}
.fti-bar{height:8px;background:rgba(255,106,19,.12);border-radius:99px;overflow:hidden}
.fti-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ca,var(--accent)),#ff9145);
  border-radius:99px}
.fti-bar.lg{height:12px;margin:8px 0 10px}
.fti-score{font-family:var(--display);color:var(--accent);font-size:1rem;min-width:2.2ch;text-align:right}
.fti-meta{grid-column:1/-1;font-size:.72rem;color:var(--muted);margin-top:-4px}
.fti-gap{color:var(--accent);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.68rem}
.fti-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fti-card{display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--card);
  border:1px solid var(--line);border-top:3px solid var(--ca,var(--accent));
  border-radius:14px;padding:16px 18px}
.fti-rank{font-family:var(--display);font-size:1.4rem;color:var(--ca,var(--accent));padding-top:2px}
.fti-card h3{margin:0 0 4px;text-transform:none;font-size:1.05rem}
.fti-scoreline{display:flex;align-items:baseline;gap:6px;margin:2px 0 8px}
.fti-scoreline b{font-family:var(--display);font-size:1.6rem;color:var(--ca,var(--accent));line-height:1}
.fti-scoreline span{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fti-shop{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.moment-shop{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#07080a;background:var(--accent);
  border-radius:99px;padding:5px 10px}
.moment-shop:hover{filter:brightness(1.08)}
@media(max-width:820px){.fti-grid{grid-template-columns:1fr}
  .fti-row{grid-template-columns:1fr auto;}}

ul.moments{list-style:none;margin:0;padding:0}
li.moment{padding:12px 0;border-bottom:1px dashed var(--line)}
li.moment:last-child{border-bottom:0}
.moment-who{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.who{font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(255,106,19,.45);background:rgba(255,106,19,.1);
  border-radius:99px;padding:3px 8px}
.momentsbox .moment-shop,.momentsbox .fti-gap{display:inline-block;margin:8px 8px 0 0}
.light .ftibox,.light .fti-card{background:#fff;border-color:#e5eaf2}
.light .fti-row{border-color:#eef1f6}
.light .fti-bar{background:rgba(255,106,19,.12)}
.light .fti-chip{background:#fff;border-color:#e5eaf2}
.light li.moment{border-color:#eef1f6}
.light .who{background:rgba(255,106,19,.1)}
.light .stat b{color:var(--accent)}
code{font-size:.82em;background:rgba(255,106,19,.1);padding:1px 6px;border-radius:6px}