/* ============================================================
   SCREEN SKINZ — Mockup V3 "Glow-Up" design system
   Extracted from the Claude Design export (Screen Skinz Glow-Up.dc.html):
   navy #081F2D + coral #F65E4E, Bricolage Grotesque display,
   Outfit body, pill buttons, navy-tinted soft shadows.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Outfit:wght@400;500;600;700;800&family=Caveat:wght@700&display=swap');

:root{
  /* palette */
  --navy:#081F2D; --navy-2:#0E2536; --navy-footer:#0C1F2D; --navy-grad:linear-gradient(170deg,#0E2A3E,#081F2D);
  --coral:#F65E4E; --coral-dark:#E8402F;
  --ink-60:#4A5B66; --ink-40:#7A8890; --ink-30:#8A97A0; --strike:#A8B0B6;
  --on-dark:#9FB6C4; --on-dark-2:#8FA6B4; --on-dark-3:#7A93A3;
  --page:#F7F9FA; --sec:#F3F6F8; --sub-nav:#F1F4F6; --tile:#EFF2F4; --pillbg:#F0F3F5;
  --gold-bg:#F0D9A8; --gold-ink:#6B4E10; --star:#C9A227; --star-2:#E8A13A;
  --line:rgba(8,31,45,.08); --line-strong:rgba(8,31,45,.15);
  /* type */
  --disp:'Bricolage Grotesque',sans-serif; --body:'Outfit',sans-serif;
  /* radius */
  --r-pill:999px; --r-hero:28px; --r-card:24px; --r-ugc:22px; --r-md:18px; --r-tile:18px; --r-sm:14px; --r-xs:12px;
  /* shadows (navy-tinted, per design) */
  --sh-mega:0 40px 70px rgba(8,31,45,.22);
  --sh-card:0 14px 32px rgba(8,31,45,.12);
  --sh-ugc:0 10px 30px rgba(8,31,45,.14);
  --sh-chip:0 4px 12px rgba(8,31,45,.12);
  --maxw:1240px;
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--navy);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--body);cursor:pointer}
input,select{font-family:var(--body)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--ink-40)}
h1,h2,h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--navy);text-wrap:balance}
.sec-title{margin:0;font:800 clamp(24px,3vw,32px) var(--disp);text-transform:uppercase}
.sec-title-lg{margin:0;font:800 clamp(26px,3.4vw,38px) var(--disp);text-transform:uppercase}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes popin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-pill);font:700 12px var(--body);letter-spacing:.1em;padding:15px 28px;transition:background .18s,color .18s,border-color .18s,transform .18s;text-transform:uppercase;white-space:nowrap}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--coral);color:#fff}
.btn-inverse{background:#fff;color:var(--navy)}
.btn-inverse:hover{background:var(--coral);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid rgba(8,31,45,.2)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-lg{padding:17px 34px;font-size:12.5px}
.btn-block{width:100%}
.badge-save{background:var(--gold-bg);color:var(--gold-ink);border-radius:var(--r-pill);padding:4px 12px;font:700 11px var(--body);letter-spacing:.03em}

/* ---------------- announce marquee ---------------- */
.announce{background:var(--navy);color:#DCE8F0;overflow:hidden;padding:9px 0;font-size:12px;letter-spacing:.14em;font-weight:600}
.announce-track{display:flex;width:max-content;animation:marq 22s linear infinite}
.announce-track>div{display:flex;gap:36px;padding-right:36px;white-space:nowrap}
.announce .dot{color:var(--coral)}

/* ---------------- header / nav ---------------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav-top{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.nav-search{display:flex;align-items:center;gap:10px;background:var(--pillbg);border-radius:var(--r-pill);padding:9px 16px;max-width:280px;color:#9AA5AC;font:500 13px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.nav-logo img{height:40px;object-fit:contain;display:block}
.nav-logo{justify-self:center}
.nav-utils{display:flex;gap:18px;align-items:center;justify-self:end}
.nav-utils .divider{width:1px;height:22px;background:var(--line-strong)}
.nav-util-link{display:flex;align-items:center;gap:6px;font:500 14px var(--body);color:var(--navy);white-space:nowrap;cursor:pointer}
.nav-icon{display:flex;background:none;border:none;padding:0;color:var(--navy);position:relative}
.cart-badge{position:absolute;top:-7px;right:-8px;background:var(--coral);color:#fff;border-radius:var(--r-pill);min-width:17px;height:17px;display:none;align-items:center;justify-content:center;font:700 10.5px var(--body);padding:0 3px}
.cart-badge.show{display:flex}
.nav-sub{background:var(--sub-nav);border-top:1px solid rgba(8,31,45,.06)}
.nav-sub-inner{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.nav-link{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--body);color:var(--navy);cursor:pointer;background:none;border:none;padding:0}
.nav-link:hover,.nav-link.open{color:var(--coral)}
.nav-link .caret{transition:transform .2s}
.nav-link.open .caret{transform:rotate(180deg)}
.nav-link .pill-tag{background:var(--gold-bg);color:#7A5A14;border-radius:var(--r-pill);padding:3px 9px;font:700 10px var(--body);letter-spacing:.04em}
.nav-sep{color:var(--line-strong)}
.nav-cta{border:none;background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:11px 22px;font:700 12px var(--body);letter-spacing:.08em}
.nav-cta:hover{background:var(--coral)}
.hamb{display:none}

/* mega menu */
.mega{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid rgba(8,31,45,.06);box-shadow:var(--sh-mega);animation:popin .22s ease;overflow:hidden}
.mega.open{display:block}
.mega-grid{max-width:var(--maxw);margin:0 auto;padding:28px 24px 30px;display:grid;gap:22px;align-items:stretch}
.mega-grid.collabs{grid-template-columns:230px 1fr 1fr 1fr}
.mega-grid.cols3{grid-template-columns:1fr 1fr 1.6fr}
.mega-list{display:flex;flex-direction:column;gap:2px}
.mega-list.bordered{border-right:1px solid var(--line);padding-right:20px}
.mega-list.bordered-l{border-left:1px solid var(--line);padding-left:20px}
.mega-eyebrow{display:flex;gap:8px;align-items:center;font:700 11px var(--body);letter-spacing:.16em;color:var(--ink-30);padding:0 10px 10px}
.mega-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--r-xs);font:600 13.5px var(--body);color:var(--navy);cursor:pointer}
.mega-item:hover{background:var(--sub-nav)}
.mega-item img{width:22px;height:22px;object-fit:contain}
.mega-item .mark{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font:800 9px var(--disp);color:#fff}
.mega-item.more{color:var(--coral);font-size:12.5px}
.mega-card{position:relative;border-radius:20px;overflow:hidden;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;transition:transform .22s;cursor:pointer}
.mega-card:hover{transform:translateY(-4px)}
.mega-card img.art{position:absolute;top:-4%;right:-16%;width:78%;transform:rotate(10deg);mix-blend-mode:multiply}
.mega-card .k{position:relative;font:700 10.5px var(--body);letter-spacing:.12em}
.mega-card .t{position:relative;font:800 20px var(--disp)}
.mega-card .s{position:relative;font:600 12px var(--body);margin-top:4px}
.mega-feature{position:relative;border-radius:20px;overflow:hidden;min-height:230px;display:flex;align-items:center;padding:24px;gap:18px;transition:transform .22s;cursor:pointer}
.mega-feature:hover{transform:translateY(-4px)}

/* mobile menu */
.mobile-menu{position:fixed;inset:0 20% 0 0;max-width:360px;background:#fff;z-index:80;transform:translateX(-102%);transition:transform .3s ease;display:flex;flex-direction:column;gap:4px;padding:18px;overflow-y:auto}
.mobile-menu.open{transform:none}
.mm-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mm-link{display:flex;justify-content:space-between;align-items:center;padding:13px 8px;font:700 15px var(--body);color:var(--navy);border-bottom:1px solid var(--line)}
.mm-sub{display:flex;flex-direction:column;padding:4px 8px 10px}
.mm-sub a{padding:9px 10px;font:500 14px var(--body);color:var(--ink-60);border-radius:10px}
.mm-sub a:hover{background:var(--sub-nav)}

/* ---------------- footer ---------------- */
.site-footer{background:var(--navy-footer);padding:40px 20px 24px;margin-top:0}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:32px}
.footer-logo{height:34px;width:fit-content;object-fit:contain}
.footer-main{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;align-items:flex-start}
.footer-news{background:#fff;border-radius:var(--r-md);padding:26px;max-width:320px;display:flex;flex-direction:column;gap:12px;text-align:center}
.footer-news h4{margin:0;font:800 19px var(--disp);color:var(--navy);text-transform:uppercase}
.footer-news p{margin:0;font:400 12.5px/1.5 var(--body);color:#5A6B76}
.footer-news input{width:100%;border:1px solid rgba(8,31,45,.18);border-radius:var(--r-pill);padding:12px 16px;font:500 13px var(--body);color:var(--navy);outline:none}
.footer-news input:focus{border-color:var(--navy)}
.footer-news .fine{font:400 10.5px var(--body);color:var(--ink-30)}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;flex:1;justify-content:space-between;max-width:640px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h5{margin:0;font:700 12.5px var(--body);color:#fff}
.footer-col a{font:400 12.5px var(--body);color:var(--on-dark)}
.footer-col a:hover{color:#fff}
.footer-social{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.footer-social svg{cursor:pointer}
.shop-follow{display:inline-flex;gap:6px;align-items:center;background:#5A31F4;color:#fff;border-radius:var(--r-pill);padding:7px 14px;font:600 11px var(--body);cursor:pointer}
.footer-bottom{display:flex;flex-direction:column;gap:14px;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:20px}
.footer-bottom img{height:24px;object-fit:contain}
.footer-bottom .copy{font:400 11.5px var(--body);color:var(--on-dark-3)}

/* ---------------- toast ---------------- */
.toast-host{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:12px 24px;font:600 14px var(--body);box-shadow:0 12px 32px rgba(8,31,45,.4);opacity:0;transform:translateY(14px);transition:all .25s ease;white-space:nowrap}
.toast.show{opacity:1;transform:none}

/* ---------------- cart drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(8,31,45,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:70}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);background:#fff;z-index:80;transform:translateX(102%);transition:transform .3s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0;font:800 17px var(--disp);text-transform:uppercase}
.drawer-close{border:none;background:var(--pillbg);border-radius:var(--r-pill);width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.drawer-items{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:14px}
.cart-line{display:flex;gap:12px;align-items:center}
.cart-line-img{width:64px;height:76px;border-radius:var(--r-sm);background:var(--tile);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.cart-line-img img{max-width:80%;max-height:88%;object-fit:contain;mix-blend-mode:multiply}
.cart-line-info{flex:1;min-width:0}
.cart-line-info h4{margin:0 0 2px;font:600 13.5px var(--body);text-transform:none;color:var(--navy);font-family:var(--body)}
.cart-line-info p{margin:0 0 6px;font:400 11.5px var(--body);color:var(--ink-30)}
.qty{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px 8px}
.qty button{border:none;background:none;font:600 15px var(--body);color:var(--navy);padding:0 4px}
.qty span{font:600 12.5px var(--body)}
.cart-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cart-line-right .price{font:700 13.5px var(--body)}
.cart-line-remove{border:none;background:none;font:500 11px var(--body);color:var(--ink-30);text-decoration:underline;padding:0}
.cart-empty{text-align:center;padding:44px 10px;display:flex;flex-direction:column;gap:10px;align-items:center}
.cart-empty h4{margin:0;font:800 18px var(--disp);text-transform:uppercase}
.cart-empty p{margin:0;font:400 13.5px var(--body);color:var(--ink-40);max-width:30ch}
.tier-bar{padding:14px 20px;border-bottom:1px solid var(--line);background:var(--sec)}
.tier-msg{font:500 12.5px var(--body);color:var(--ink-60);margin-bottom:8px}
.tier-track{height:6px;border-radius:var(--r-pill);background:#E2E9ED;overflow:hidden}
.tier-fill{height:100%;border-radius:var(--r-pill);background:var(--coral);transition:width .3s}
.tier-nodes{display:flex;justify-content:space-between;margin-top:7px}
.tier-node{font:600 9.5px var(--body);letter-spacing:.04em;color:var(--ink-30);display:flex;gap:4px;align-items:center}
.tier-node .dot{width:7px;height:7px;border-radius:var(--r-pill);background:#D5DDE2}
.tier-node.reached{color:var(--navy)}
.tier-node.reached .dot{background:var(--coral)}
.drawer-upsell{margin:0 20px 10px;display:flex;gap:12px;align-items:center;background:var(--sec);border-radius:var(--r-sm);padding:10px 12px}
.drawer-upsell img{width:38px;height:48px;object-fit:contain;mix-blend-mode:multiply}
.drawer-upsell .du-info{flex:1;display:flex;flex-direction:column;gap:2px}
.drawer-upsell b{font:600 12px var(--body)}
.drawer-upsell span{font:500 11px var(--body);color:var(--ink-30)}
.drawer-upsell button{border:none;background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:8px 16px;font:700 11px var(--body);letter-spacing:.06em}
.drawer-upsell button:hover{background:var(--coral)}
.drawer-foot{display:flex;flex-direction:column;gap:10px;padding:14px 20px 20px;border-top:1px solid var(--line)}
.drawer-savings{display:flex;justify-content:space-between;font:600 12.5px var(--body);color:#0A7D4F}
.drawer-subtotal{display:flex;justify-content:space-between;align-items:baseline}
.drawer-subtotal .lbl{font:700 11px var(--body);letter-spacing:.14em;color:var(--ink-30)}
.drawer-subtotal .val{font:800 19px var(--disp)}
.drawer-note{display:flex;gap:8px;align-items:center;justify-content:center;font:500 11.5px var(--body);color:var(--ink-40)}

/* ---------------- product card (home / neutral pages) ---------------- */
.pcard{display:flex;flex-direction:column;gap:12px;cursor:pointer;position:relative}
.pcard:hover{opacity:.94}
.pcard-media{position:relative;border-radius:var(--r-sm);background:var(--tile);aspect-ratio:1/1.15;display:flex;align-items:center;justify-content:center;padding:26px;overflow:hidden;transition:box-shadow .2s}
.pcard:hover .pcard-media{box-shadow:var(--sh-card)}
.pcard-media img.render{max-width:72%;max-height:82%;object-fit:contain;mix-blend-mode:multiply}
.pcard-media .save{position:absolute;top:12px;right:12px;background:var(--gold-bg);color:var(--gold-ink);border-radius:var(--r-pill);padding:5px 12px;font:700 11px var(--body);letter-spacing:.03em}
.pcard-media .brand{position:absolute;bottom:14px;left:14px;width:34px;height:34px;object-fit:contain;background:#fff;border-radius:var(--r-pill);padding:5px;box-shadow:var(--sh-chip)}
.pcard-media .fav{position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:var(--r-pill);background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--navy);box-shadow:0 4px 12px rgba(8,31,45,.1);border:none;z-index:2}
.pcard-media .fav.on{color:var(--coral)}
.pcard-body{display:flex;flex-direction:column;gap:4px}
.pcard-vendor{font:600 11px var(--body);letter-spacing:.1em;color:var(--ink-30)}
.pcard-name{font:600 14.5px/1.3 var(--body);color:var(--navy)}
.pcard-price{font:700 14px var(--body);color:var(--navy)}
.pcard-price .was{font:500 13px var(--body);color:var(--strike);text-decoration:line-through;margin-left:4px}
.pcard-stars{font:600 12px var(--body);color:var(--star-2)}

/* checkerboard placeholder tile (asset-pending marker, per design) */
.ph-tile{background:repeating-linear-gradient(45deg,#E9EEF1 0 14px,#E0E7EB 14px 28px);display:flex;align-items:center;justify-content:center}
.ph-label{font:500 11px ui-monospace,Menlo,monospace;color:#7A8B96;text-align:center;line-height:1.6;padding:0 16px}

/* ---------------- world / portal card ---------------- */
.world-card{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:transform .25s;cursor:pointer}
.world-card:hover{transform:translateY(-6px)}
.world-card img.art{position:absolute;top:-6%;right:-14%;width:72%;transform:rotate(10deg);mix-blend-mode:multiply}
.world-card img.mark{width:44px;height:44px;object-fit:contain;margin-bottom:8px;position:relative}
.world-card .t{position:relative;font:800 26px var(--disp)}
.world-card .s{position:relative;font:600 13px var(--body);margin-top:6px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip-link{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid rgba(8,31,45,.1);border-radius:var(--r-pill);padding:7px 14px;font:600 12.5px var(--body);color:var(--ink-60)}
.chip-link:hover{border-color:var(--navy)}
.chip-link img{height:16px}

/* ---------------- league rail card ---------------- */
.league-rail{display:flex;gap:16px;overflow-x:auto;padding:4px 24px 10px;scrollbar-width:none;scroll-behavior:smooth}
.league-rail::-webkit-scrollbar{display:none}
.league-card{flex:none;width:250px;border-radius:var(--r-tile);overflow:hidden;position:relative;background:linear-gradient(140deg,#1A2F40 0%,#0C1F2D 55%,#081826 100%);padding:20px;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:4px;transition:transform .22s;cursor:pointer}
.league-card:hover{transform:translateY(-4px)}
.league-card .ghost{position:absolute;right:-34px;top:-20px;width:150px;height:210px;transform:rotate(14deg);border-radius:var(--r-tile);background:linear-gradient(160deg,#050B10,#0E1C28);border:1px solid rgba(255,255,255,.07)}
.league-card img.render{position:absolute;right:-26px;top:-14px;width:150px;transform:rotate(14deg);mix-blend-mode:multiply;opacity:.85}
.league-card .t{position:relative;font:800 24px var(--disp);color:#fff;text-transform:uppercase}
.league-card .s{position:relative;font:500 12.5px var(--body);color:var(--on-dark-2)}
.league-card img.logo{position:absolute;bottom:14px;right:14px;width:30px;height:30px;object-fit:contain;background:#fff;border-radius:var(--r-pill);padding:4px}

/* rail nav arrows + dots */
.rail-nav{display:flex;gap:18px;align-items:center;justify-content:center;padding-top:16px}
.rail-btn{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:#fff;display:flex;align-items:center;justify-content:center;color:#5A6B76}
.rail-btn:hover{background:var(--navy);color:#fff}
.rail-dots{display:flex;gap:6px;align-items:center}
.rail-dots span{width:6px;height:6px;border-radius:var(--r-pill);background:rgba(8,31,45,.2)}
.rail-dots span.on{width:7px;height:7px;background:var(--navy)}

/* ---------------- UGC rail ---------------- */
.ugc-rail{display:flex;gap:18px;overflow-x:auto;padding:6px 24px 18px;scrollbar-width:none;scroll-behavior:smooth}
.ugc-rail::-webkit-scrollbar{display:none}
.ugc-card{flex:none;width:236px;background:#fff;border-radius:var(--r-ugc);padding:7px;box-shadow:var(--sh-ugc);cursor:pointer}
.ugc-frame{aspect-ratio:9/15.5;border-radius:16px;overflow:hidden;position:relative;background:var(--navy)}
.ugc-frame video,.ugc-frame img.poster{width:100%;height:100%;object-fit:cover;display:block}
.ugc-handle{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;align-items:center;background:rgba(20,20,20,.45);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:6px 12px;font:600 11.5px var(--body);color:#fff}
.ugc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:var(--r-pill);background:rgba(10,20,30,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.ugc-card.playing .ugc-play{opacity:0}

/* ---------------- reviews rail (home) ---------------- */
.rev-rail{display:flex;gap:18px;overflow-x:auto;padding:6px 24px 18px;scrollbar-width:none;scroll-behavior:smooth;align-items:stretch}
.rev-rail::-webkit-scrollbar{display:none}
.rev-photo{flex:none;width:300px;border-radius:var(--r-tile);overflow:hidden;min-height:280px}
.rev-card{flex:none;width:340px;border-radius:var(--r-tile);background:#FBFCFD;border:1px solid rgba(8,31,45,.07);padding:28px 26px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.rev-stars{font:600 12px var(--body);letter-spacing:3px;color:var(--star)}
.rev-title{font:800 14.5px var(--disp);color:var(--navy);text-transform:uppercase;letter-spacing:.03em}
.rev-card p{margin:0;font:400 13.5px/1.55 var(--body);color:var(--ink-60)}
.rev-meta{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:auto}
.rev-name{font:700 13px var(--body);color:var(--navy)}
.rev-verified{display:flex;gap:5px;align-items:center;font:600 12px var(--body);color:#0E5FA8}
.rev-product{width:100%;border-top:1px solid var(--line);padding-top:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;font:600 12.5px var(--body);color:#33434E;cursor:pointer}
.rev-product:hover{opacity:.7}

/* ---------------- perks bar ---------------- */
.perks{background:#fff;border-top:1px solid rgba(8,31,45,.06);padding:30px 20px}
.perks-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.perk{display:flex;gap:14px;align-items:center;justify-content:center;color:var(--navy)}
.perk b{display:block;font:700 13.5px var(--body)}
.perk span{display:block;font:400 12.5px var(--body);color:var(--ink-40)}

/* ---------------- accordion ---------------- */
.acc-item{border-bottom:1px solid rgba(8,31,45,.1)}
.acc-head{border:none;background:transparent;width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 2px;font:700 14.5px var(--body);color:var(--navy);text-align:left;gap:12px}
.acc-head .ind{font:400 17px var(--body);color:var(--coral)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-body-inner{padding:0 2px 15px;font:400 14px/1.6 var(--body);color:var(--ink-60)}

/* ---------------- themed collection template (driven by --t-* vars from applyTheme) ---------------- */
body[data-page="collection"]{background:var(--t-page,#F7F9FA)}
.col-hero{background:var(--t-hero);padding:52px 20px 40px;position:relative;overflow:hidden}
.col-hero .blob-a{position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:var(--r-pill);background:var(--t-blob-a)}
.col-hero .blob-b{position:absolute;bottom:-90px;left:-40px;width:240px;height:240px;border-radius:var(--r-pill);background:var(--t-blob-b)}
:root[data-theme-type="sport"] .col-hero .blob-a{inset:0;top:0;right:0;width:auto;height:auto;border-radius:0}
.col-hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center;position:relative}
.col-hero-copy{display:flex;flex-direction:column;gap:16px;animation:popin .4s ease}
.col-badge-row{display:flex;gap:10px;align-items:center}
.col-badge-row img{width:38px;height:38px;object-fit:contain}
.col-badge-mark{width:38px;height:38px;border-radius:10px;background:var(--t-mark-bg);display:flex;align-items:center;justify-content:center;font:800 16px var(--disp);color:#fff}
.col-license{background:var(--t-license-bg);border-radius:var(--r-pill);padding:6px 14px;font:700 11.5px var(--body);letter-spacing:.1em;color:var(--t-license-color)}
.col-headline{margin:0;font:800 clamp(36px,4.6vw,58px)/1.02 var(--disp);color:var(--t-headline);text-transform:none}
:root[data-theme-type="sport"] .col-headline{font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase}
.col-sub{margin:0;font:400 16px/1.6 var(--body);color:var(--t-sub);max-width:420px}
.col-chips{display:flex;gap:8px;flex-wrap:wrap}
.col-chip{background:var(--t-chip-off-bg);border-radius:var(--r-pill);padding:9px 18px;font:600 13px var(--body);color:var(--t-chip-off-color)}
.col-chip.on{background:var(--t-chip-on-bg);font-weight:700;color:var(--t-chip-on-color);box-shadow:var(--t-chip-shadow)}
.col-hero-art{display:flex;justify-content:center}
/* no drop-shadow filter here — a filter isolates the element and kills mix-blend-mode */
.col-hero-art img{width:min(300px,80%);animation:floaty 6s ease-in-out infinite;mix-blend-mode:multiply}
.col-hero-ph{width:min(280px,80%);aspect-ratio:9/16;border-radius:36px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 14px,rgba(255,255,255,.3) 14px 28px);display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.8)}
:root[data-theme-type="sport"] .col-hero-ph{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 14px,rgba(255,255,255,.04) 14px 28px);border-color:rgba(255,255,255,.25)}
.col-hero-ph .ph-label{color:var(--t-ph-label)}
.col-band{background:var(--t-band-bg);padding:32px 20px;border-bottom:1px solid var(--t-band-border)}
.col-band-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px}
.col-band-title{font:800 18px var(--disp);letter-spacing:.06em;color:var(--t-band-title);text-transform:uppercase}
.col-band-logos{display:flex;gap:clamp(24px,5vw,64px);align-items:center;flex-wrap:wrap;justify-content:center}
.col-band-logos img{height:40px;object-fit:contain}
.col-story{max-width:var(--maxw);margin:0 auto;padding:48px 20px 4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:40px;align-items:center}
.col-story-img{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--t-ph-a) 0 16px,var(--t-ph-b) 16px 32px);display:flex;align-items:center;justify-content:center}
.col-story-img .ph-label{color:var(--t-ph-label)}
.col-story-copy{display:flex;flex-direction:column;gap:14px}
.col-eyebrow{font:700 12px var(--body);letter-spacing:.16em;color:var(--t-eyebrow)}
.col-story-head{margin:0;font:800 clamp(26px,3.2vw,38px)/1.1 var(--disp);color:var(--t-story-head);text-transform:none}
:root[data-theme-type="sport"] .col-story-head{text-transform:uppercase}
.col-story-text{margin:0;font:400 15px/1.65 var(--body);color:var(--t-story-text);max-width:460px}
.col-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
.col-stat-num{font:800 22px var(--disp);color:var(--t-stat-num)}
.col-stat-lab{font:500 12px var(--body);color:var(--t-stat-lab)}
/* browse */
.col-browse{max-width:var(--maxw);margin:0 auto;padding:40px 20px;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.flt-side{flex:0 0 236px;display:flex;flex-direction:column;gap:14px;min-width:220px}
.flt-panel{background:var(--t-panel-bg);border:1px solid var(--t-panel-border);border-radius:var(--r-tile);padding:16px}
.flt-head{font:700 11px var(--body);letter-spacing:.14em;color:var(--t-muted)}
.flt-clear{cursor:pointer;font:700 10px var(--body);letter-spacing:.06em;text-decoration:underline;color:var(--t-clear);background:none;border:none;padding:0}
.flt-teams{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.flt-team{cursor:pointer;aspect-ratio:1;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font:800 12px var(--disp);background:var(--t-team-bg);color:var(--t-team-color);border:none;padding:0}
.flt-team.on{background:var(--t-accent);color:#fff}
.flt-row{cursor:pointer;display:flex;gap:10px;align-items:center;padding:7px 0}
.flt-box{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font:700 11px var(--body);flex:none;border:1.5px solid var(--t-box-border);color:transparent}
.flt-row.on .flt-box{background:var(--t-accent);border-color:var(--t-accent);color:#fff}
.flt-lab{font:500 13px var(--body);color:var(--t-row-lab)}
.flt-group{font:700 12.5px var(--body);padding:8px 0 2px;color:var(--t-group-lab)}
.flt-divider{height:1px;margin:10px 0;background:var(--t-divider)}
.col-results{flex:1 1 480px;min-width:300px}
.col-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.col-toolbar select,.col-toolbar input{border-radius:var(--r-pill);padding:10px 16px;font:600 12.5px var(--body);outline:none;background:var(--t-input-bg);color:var(--t-input-color);border:1px solid var(--t-input-border)}
.col-toolbar select{cursor:pointer}
.col-toolbar input{flex:1;min-width:150px}
.col-toolbar input::placeholder{color:var(--t-muted)}
.col-count{font:600 11.5px var(--body);letter-spacing:.08em;margin-left:auto;color:var(--t-muted)}
.col-empty{padding:40px 0;text-align:center;font:500 14px var(--body);color:var(--t-muted)}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
/* themed product card */
.tcard{cursor:pointer;background:var(--t-card-bg);border-radius:var(--r-card);padding:14px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--t-card-border);transition:transform .2s,box-shadow .2s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.tcard-tile{border-radius:var(--r-tile);aspect-ratio:1/1.1;background:var(--t-tile);overflow:hidden;display:flex;justify-content:center;padding:14px 26px 0;position:relative}
.tcard-tile img{width:100%;max-width:160px;object-fit:contain;transform:translateY(6px);mix-blend-mode:multiply}
.tcard-tile.ph{background:repeating-linear-gradient(45deg,var(--t-ph-a) 0 14px,var(--t-ph-b) 14px 28px);align-items:center;padding:14px}
.tcard-tile.ph .ph-label{color:var(--t-ph-label);line-height:1.5}
.tcard-tile .save{position:absolute;top:10px;right:10px;background:var(--gold-bg);color:var(--gold-ink);border-radius:var(--r-pill);padding:4px 10px;font:700 10.5px var(--body)}
.tcard-vendor{font:600 10.5px var(--body);letter-spacing:.1em;color:var(--t-vendor)}
.tcard-name{font:700 14.5px var(--body);color:var(--t-name);line-height:1.25}
.tcard-foot{display:flex;align-items:center;justify-content:space-between}
.tcard-price{font:700 15px var(--body);color:var(--t-price)}
.tcard-price .was{font:500 12.5px var(--body);color:var(--t-old);text-decoration:line-through;margin-left:4px}
.tcard-stars{font:600 12px var(--body);color:var(--star-2)}
/* themed CTA banner */
.col-cta{background:var(--t-cta-bg);border-radius:var(--r-hero);padding:36px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.col-cta-title{font:800 26px var(--disp);color:var(--t-cta-title)}
:root[data-theme-type="sport"] .col-cta-title{text-transform:uppercase}
.col-cta-sub{font:400 15px var(--body);color:var(--t-cta-sub);margin-top:6px;max-width:480px}
.col-cta-btn{border:none;background:var(--t-cta-btn-bg);color:var(--t-cta-btn-color);border-radius:var(--r-pill);padding:15px 28px;font:700 14.5px var(--body)}
.col-cta-btn:hover{opacity:.88}

/* ---------------- page hero (secondary pages) ---------------- */
.page-hero{background:var(--navy-grad);padding:56px 20px 48px;text-align:center;color:#fff}
.page-hero h1{margin:0;font:800 clamp(30px,4vw,46px) var(--disp);color:#fff}
.page-hero p{margin:12px auto 0;font:400 15px/1.6 var(--body);color:var(--on-dark);max-width:52ch}
.page-hero .eyebrow{display:inline-block;font:700 11.5px var(--body);letter-spacing:.18em;color:var(--coral);margin-bottom:12px}

/* ---------------- forms ---------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:700 10.5px var(--body);letter-spacing:.12em;color:var(--ink-30)}
.field input,.field select,.field textarea{border:1px solid rgba(8,31,45,.16);border-radius:var(--r-xs);padding:12px 14px;font:500 13.5px var(--body);color:var(--navy);outline:none;background:#fff;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy)}
.card{background:#fff;border-radius:var(--r-hero);padding:32px;border:1px solid rgba(8,31,45,.07)}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .mega-grid.collabs{grid-template-columns:1fr 1fr}
  .mega-grid.collabs .mega-list{grid-column:1/-1;border-right:none;padding-right:0}
  .mega-grid.cols3{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-search{display:none}
  .nav-top{grid-template-columns:auto 1fr auto}
  .hamb{display:flex}
  .nav-utils .nav-util-link{display:none}
  .nav-sub-inner{gap:16px;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;scrollbar-width:none}
  .mega{display:none !important}
  .footer-cols{gap:28px}
}