/* ═══════════════════════════════════════════════════════════════════════════════
   MR. WEEZ MERCH — store styles
   Loaded by index.html (carousel + cart) and by /shop/, /success/, /cancel/
   (which also rely on the .store-page base block below — they do NOT inherit the
   homepage's inline CSS). Design tokens mirror index.html exactly.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#111419; --ink-2:#0B0E12; --navy:#26366B; --paper:#E1E1E1;
  --mist:#B5C1E3; --ember:#DE4B2E;
  --glass:rgba(255,255,255,.06); --blur:30px;
  --pad:clamp(20px,5vw,80px); --maxw:1560px;
  --d-fam:'Archivo','Archivo Expanded',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --b-fam:'Hanken Grotesk',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --ease:cubic-bezier(.16,.84,.28,1);
}

/* ══════════ STANDALONE PAGE BASE (shop / success / cancel only) ══════════ */
body.store-page{
  margin:0;background:var(--ink-2);color:var(--paper);
  font-family:var(--b-fam);font-weight:300;font-size:clamp(15px,1.05vw,17.5px);
  line-height:1.7;letter-spacing:.005em;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.store-page *,.store-page *::before,.store-page *::after{box-sizing:border-box}
.store-page img{max-width:100%;height:auto;display:block}
.store-page a{color:inherit;text-decoration:none}
.store-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.store-page ::selection{background:var(--ember);color:#fff}
.store-page h1,.store-page h2,.store-page h3,.store-page .d{
  font-family:var(--d-fam);font-weight:800;font-stretch:125%;
  font-variation-settings:'wdth' 125,'wght' 800;
  text-transform:uppercase;line-height:.86;letter-spacing:-.018em;margin:0;
}
.store-page .d-900{font-weight:900;font-variation-settings:'wdth' 125,'wght' 900}
.store-page .em{color:var(--ember)}
.store-page .kicker{
  font-family:var(--b-fam);font-weight:600;font-size:clamp(10px,.78vw,12px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--mist);line-height:1.6;
}
.store-page .btn{
  display:inline-block;font-family:var(--b-fam);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;background:var(--paper);color:var(--ink);
  padding:1.05em 1.7em;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.store-page .btn:hover{background:var(--ember);color:#fff;transform:translateY(-2px)}
.store-page .btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(225,225,225,.34)}
.store-page .btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ember)}
.store-page :focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.store-page .glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);
  border:none;border-radius:22px;box-shadow:none;
}
@media(prefers-reduced-transparency:reduce){.store-page .glass{background:#161B26;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* standalone header (mirrors #nav on index) */
.store-page #nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  padding:14px var(--pad);background:rgba(11,14,18,.72);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
}
.store-page #nav .brand{display:flex;align-items:center;margin-right:auto}
.store-page #nav .brand img{width:clamp(146px,13vw,192px);height:auto}
.store-page #nav .links{display:flex;gap:clamp(18px,2.2vw,34px)}
.store-page #nav .links a{
  position:relative;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);opacity:.82;padding:6px 0;transition:opacity .3s var(--ease);
}
.store-page #nav .links a:hover{opacity:1}
.store-page #nav .links a[aria-current="page"]{opacity:1;box-shadow:0 1px 0 var(--ember)}
.store-page footer{
  padding:clamp(40px,5vh,70px) var(--pad);background:var(--ink-2);
  border-top:1px solid rgba(225,225,225,.08);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(181,193,227,.5);font-weight:600;
}
.store-page footer img{width:150px}

/* drifting chroma over the black ground — same palette/animation as the homepage
   merch section, toned for full-page black. */
.chroma-fixed{
  position:fixed;inset:-25%;z-index:0;pointer-events:none;opacity:.42;
  background:
    radial-gradient(42% 46% at 18% 28%,rgba(21,122,74,.62),transparent 66%),
    radial-gradient(40% 44% at 82% 24%,rgba(226,54,54,.48),transparent 66%),
    radial-gradient(46% 50% at 50% 88%,rgba(60,110,214,.55),transparent 66%),
    radial-gradient(38% 42% at 70% 66%,rgba(240,182,44,.5),transparent 66%),
    radial-gradient(36% 40% at 26% 74%,rgba(232,84,168,.44),transparent 66%);
  filter:blur(34px) saturate(130%);
  animation:sdrift 30s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes sdrift{
  0%{transform:translate3d(-2%,-1.5%,0) scale(1)}
  50%{transform:translate3d(2.5%,2%,0) scale(1.07)}
  100%{transform:translate3d(-1.5%,2.5%,0) scale(1.03)}
}
.store-page main{position:relative;z-index:1}

/* ══════════ NAV CART BUTTON (all pages) ══════════ */
.cartbtn{
  position:relative;display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--b-fam);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);padding:.85em 1.15em;box-shadow:inset 0 0 0 1px rgba(225,225,225,.34);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.cartbtn:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--ember)}
.cartbtn svg{width:16px;height:16px;display:block}
.cartbtn .ct{
  position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;
  display:none;align-items:center;justify-content:center;
  background:var(--ember);color:#fff;font-size:10.5px;letter-spacing:0;border-radius:99px;
}
.cartbtn.has .ct{display:inline-flex}
@media(max-width:520px){.cartbtn{padding:.85em .95em}.cartbtn .lbl{display:none}}

/* On phones the homepage hides #nav .links entirely; re-show ONLY links marked
   .nav-keep (Shop on the homepage, Home on store pages). */
@media(max-width:860px){
  #nav .links{display:flex!important;gap:0}
  #nav .links a{display:none}
  #nav .links a.nav-keep{display:inline-block}
}

/* ══════════ HOMEPAGE MERCH CAROUSEL ══════════ */
.mq{
  position:relative;margin-top:clamp(40px,5vw,72px);
  --edge:clamp(28px,6vw,110px);
}
.mq-view{
  overflow:hidden;padding:26px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge),#000 calc(100% - var(--edge)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge),#000 calc(100% - var(--edge)),transparent 100%);
}
.mq-track{
  display:flex;align-items:stretch;gap:clamp(16px,2.2vw,30px);
  width:max-content;will-change:transform;
  cursor:grab;touch-action:pan-y;
}
.mq-track.dragging{cursor:grabbing}
.mq-hint{
  margin-top:18px;text-align:center;
  font-weight:600;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(181,193,227,.55);
}

/* product card — used by the carousel AND the shop grid */
.mcard{
  position:relative;flex:0 0 auto;width:clamp(238px,24vw,330px);
  display:flex;flex-direction:column;text-align:center;
  background:rgba(11,14,18,.5);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-radius:20px;padding:clamp(18px,1.8vw,26px) clamp(16px,1.6vw,24px);
  box-shadow:inset 0 0 0 1px rgba(225,225,225,.09);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s var(--ease);
}
.mcard:hover,.mcard:focus-visible{
  transform:translateY(-8px);background:rgba(11,14,18,.66);
  box-shadow:inset 0 0 0 1px rgba(222,75,46,.55),0 30px 60px rgba(0,0,0,.45);
}
@media(prefers-reduced-transparency:reduce){.mcard{background:#141922;-webkit-backdrop-filter:none;backdrop-filter:none}}
.mcard .ph{
  height:clamp(190px,21vw,270px);display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(14px,1.4vw,20px);
}
.mcard .ph img{
  max-height:100%;width:auto;max-width:100%;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.4));
  transition:transform .6s var(--ease);
}
.mcard:hover .ph img{transform:scale(1.045)}
.mcard .cat{
  font-family:var(--b-fam);font-weight:600;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist);
}
.mcard .nm{
  font-family:var(--d-fam);font-weight:800;font-stretch:125%;
  font-variation-settings:'wdth' 125,'wght' 800;
  text-transform:uppercase;line-height:.96;letter-spacing:-.01em;
  font-size:clamp(17px,1.55vw,24px);margin:7px 0 4px;color:var(--paper);
  text-shadow:0 2px 18px rgba(11,14,18,.85);
}
.mcard .sub{font-size:12.5px;color:var(--mist);opacity:.85;min-height:1.4em}
.mcard .pr{
  font-family:var(--d-fam);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(15px,1.3vw,19px);color:var(--paper);margin-top:8px;
}
.mcard .go{
  margin:14px auto 0;display:inline-block;
  font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);
  padding:.7em 1.3em;box-shadow:inset 0 0 0 1px rgba(225,225,225,.3);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.mcard:hover .go,.mcard:focus-visible .go{background:var(--ember);color:#fff;box-shadow:inset 0 0 0 1px var(--ember)}

/* homepage section CTA row */
.merch-cta{display:flex;justify-content:center;margin-top:clamp(26px,3vw,44px)}

/* reduced motion / no-JS: the track becomes a native scroll row */
.mq-view.static{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-mask-image:none;mask-image:none;scrollbar-width:thin;
  padding-left:4px;padding-right:4px;
}
.mq-view.static .mq-track{cursor:auto}
.mq-view.static .mcard{scroll-snap-align:center}

/* ══════════ SHOP PAGE ══════════ */
.shop-hero{padding:clamp(46px,7vh,90px) var(--pad) clamp(10px,2vh,26px);max-width:var(--maxw);margin:0 auto}
.shop-hero h1{font-size:clamp(44px,7.4vw,120px)}
.shop-hero .lede{max-width:56ch;color:var(--mist);margin:clamp(14px,1.6vw,22px) 0 0;font-size:clamp(15px,1.12vw,18.5px)}
.prelaunch{
  display:inline-flex;align-items:center;gap:.7em;margin-top:18px;
  font-weight:600;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);
  padding:.7em 1.1em;background:rgba(222,75,46,.14);box-shadow:inset 0 0 0 1px rgba(222,75,46,.5);
}
.prelaunch i{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:0 0 auto}

.shop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr));
  gap:clamp(16px,2vw,28px);
  padding:clamp(26px,4vh,50px) var(--pad) clamp(70px,9vh,130px);
  max-width:var(--maxw);margin:0 auto;
}
.shop-grid .mcard{width:auto}
.mcard .meta{
  display:flex;justify-content:center;gap:6px;margin-top:10px;align-items:center;
}
.mcard .dot{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(225,225,225,.35)}
.mcard .sizes{font-size:10.5px;letter-spacing:.18em;color:rgba(181,193,227,.6);text-transform:uppercase;font-weight:600;margin-left:6px}

/* ══════════ PRODUCT DRAWER (modal) ══════════ */
.pd{
  position:fixed;inset:0;z-index:90;display:none;align-items:stretch;justify-content:flex-end;
}
.pd.open{display:flex}
.pd .veil{position:absolute;inset:0;background:rgba(5,7,10,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pd .panel{
  position:relative;z-index:1;width:min(980px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:#0E1218;box-shadow:-30px 0 80px rgba(0,0,0,.5);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  transform:translateX(28px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.pd.open .panel{transform:none;opacity:1}
@media(max-width:840px){.pd .panel{grid-template-columns:1fr;height:100%}}
.pd .x{
  position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--paper);
  background:rgba(11,14,18,.6);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(225,225,225,.2);
}
.pd .x:hover{box-shadow:inset 0 0 0 1px var(--ember)}
.pd .vis{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,5vw,60px);min-height:min(52vh,480px);
  background:
    radial-gradient(60% 55% at 50% 42%,rgba(38,54,107,.35),transparent 70%),
    linear-gradient(180deg,#12161e,#0B0E12);
}
.pd .vis img{max-height:min(58vh,520px);width:auto;max-width:100%;filter:drop-shadow(0 34px 44px rgba(0,0,0,.62))}
.pd .vis img.gallery-photo{filter:none;border-radius:12px;object-fit:contain;background:var(--ink-2)}
.pd .vis video{max-height:min(58vh,520px);width:auto;max-width:100%;border-radius:14px;filter:drop-shadow(0 34px 44px rgba(0,0,0,.62))}
/* .store-page img/video display rules would otherwise beat the UA [hidden] style */
.pd .vis [hidden]{display:none!important}
.pd .thumbs .vtn{font-size:15px;color:var(--paper);display:flex;align-items:center;justify-content:center}
.pd .thumbs{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.pd .thumbs button{width:52px;height:52px;padding:6px;background:rgba(255,255,255,.05);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(225,225,225,.14)}
.pd .thumbs button[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--ember)}
.pd .thumbs img{width:100%;height:100%;object-fit:contain}
.pd .info{padding:clamp(26px,3.4vw,52px) clamp(22px,3vw,48px) clamp(40px,5vw,64px)}
.pd .info .cat{font-weight:600;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}
.pd .info h2{font-size:clamp(30px,3.4vw,52px);margin:10px 0 6px}
.pd .info .pr{font-family:var(--d-fam);font-weight:800;font-stretch:125%;font-size:clamp(19px,1.8vw,26px);margin:6px 0 14px}
.pd .info .desc{color:var(--mist);font-size:15px;max-width:52ch}
.pd .lab{
  display:block;margin:22px 0 9px;
  font-weight:600;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(181,193,227,.75);
}
.pd .opts{display:flex;flex-wrap:wrap;gap:9px}
.pd .swatch{
  display:inline-flex;align-items:center;gap:.55em;padding:.6em 1em;
  font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(225,225,225,.22);transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.pd .swatch i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(225,225,225,.4)}
.pd .swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ember);background:rgba(222,75,46,.1)}
.pd .sz{
  min-width:52px;padding:.65em .5em;text-align:center;
  font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(225,225,225,.22);transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.pd .sz[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ember);background:rgba(222,75,46,.1)}
.pd .sz[disabled]{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.pd .qty{display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px rgba(225,225,225,.22)}
.pd .qty button{width:42px;height:42px;font-size:17px;color:var(--paper)}
.pd .qty button:hover{background:rgba(255,255,255,.08)}
.pd .qty output{min-width:40px;text-align:center;font-weight:600;font-size:14px}
.pd .buyrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.pd .status{
  margin-top:18px;display:none;align-items:flex-start;gap:.7em;
  font-size:12.5px;line-height:1.55;color:var(--mist);
  padding:.9em 1.1em;background:rgba(181,193,227,.07);box-shadow:inset 0 0 0 1px rgba(181,193,227,.22);
}
.pd .status.show{display:flex}
.pd .status i{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:0 0 auto;margin-top:.5em}

/* add-to-cart button (shared look with .btn but self-contained) */
button.addbtn,a.addbtn{
  display:inline-block;font-family:var(--b-fam);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;background:var(--paper);color:var(--ink);
  padding:1.05em 1.9em;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
button.addbtn:hover,a.addbtn:hover{background:var(--ember);color:#fff;transform:translateY(-2px)}
button.addbtn[disabled],a.addbtn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
button.addbtn[disabled]:hover,a.addbtn[disabled]:hover{background:var(--paper);color:var(--ink)}

/* ══════════ CART DRAWER ══════════ */
.cart{position:fixed;inset:0;z-index:95;display:none;justify-content:flex-end}
.cart.open{display:flex}
.cart .veil{position:absolute;inset:0;background:rgba(5,7,10,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cart .panel{
  position:relative;z-index:1;width:min(440px,100%);height:100%;
  display:flex;flex-direction:column;background:#0E1218;box-shadow:-30px 0 80px rgba(0,0,0,.5);
  transform:translateX(28px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.cart.open .panel{transform:none;opacity:1}
.cart header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid rgba(225,225,225,.09);
}
.cart header h2{font-size:clamp(20px,2vw,26px)}
.cart .x{width:40px;height:40px;font-size:18px;color:var(--paper);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(225,225,225,.2)}
.cart .x:hover{box-shadow:inset 0 0 0 1px var(--ember)}
.cart .lines{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 22px}
.cart .empty{padding:46px 0;text-align:center;color:var(--mist);font-size:14px}
.cline{
  display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(225,225,225,.07);
}
.cline .im{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:12px;padding:8px}
.cline .im img{max-width:100%;max-height:100%;object-fit:contain}
.cline .nm{font-family:var(--d-fam);font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:14.5px;line-height:1.05}
.cline .vv{font-size:11.5px;color:var(--mist);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:3px}
.cline .qty{display:inline-flex;align-items:center;margin-top:8px;box-shadow:inset 0 0 0 1px rgba(225,225,225,.18)}
.cline .qty button{width:30px;height:30px;font-size:15px;color:var(--paper)}
.cline .qty button:hover{background:rgba(255,255,255,.08)}
.cline .qty output{min-width:30px;text-align:center;font-size:12.5px;font-weight:600}
.cline .tot{font-family:var(--d-fam);font-weight:800;font-stretch:125%;font-size:15px;text-align:right}
.cline .rm{display:block;margin:8px 0 0 auto;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:rgba(181,193,227,.6)}
.cline .rm:hover{color:var(--ember)}
.cart .foot{padding:18px 22px 26px;border-top:1px solid rgba(225,225,225,.09)}
.cart .subrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart .subrow .k{font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist)}
.cart .subrow .v{font-family:var(--d-fam);font-weight:900;font-stretch:125%;font-size:24px}
.cart .shipnote{font-size:11.5px;color:rgba(181,193,227,.6);margin:0 0 14px}
.cart .checkout{width:100%;text-align:center}
.cart .checkout[disabled]{opacity:.4;cursor:not-allowed}
.cart .notice{
  display:none;margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--mist);
  padding:.9em 1.1em;background:rgba(222,75,46,.1);box-shadow:inset 0 0 0 1px rgba(222,75,46,.4);
}
.cart .notice.show{display:block}

/* ══════════ TOAST ══════════ */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:99;
  font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
  background:rgba(14,18,24,.92);padding:.95em 1.5em;box-shadow:inset 0 0 0 1px rgba(222,75,46,.55),0 18px 40px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ══════════ SUCCESS / CANCEL PAGES ══════════ */
.status-wrap{
  min-height:calc(100svh - 220px);display:flex;align-items:center;justify-content:center;
  padding:clamp(50px,9vh,110px) var(--pad);
}
.status-card{max-width:640px;width:100%;padding:clamp(30px,4.5vw,58px);text-align:left;position:relative;z-index:1}
.status-card h1{font-size:clamp(36px,5.4vw,72px);margin:12px 0 16px}
.status-card p{color:var(--mist);margin:0 0 12px;font-size:15.5px}
.status-card .orderbox{
  margin:22px 0 6px;padding:16px 18px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(225,225,225,.12);font-size:14px;
}
.status-card .orderbox .row{display:flex;justify-content:space-between;gap:14px;padding:5px 0}
.status-card .orderbox .row span:last-child{font-weight:600}
.status-card .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ══════════ REDUCED MOTION ══════════ */
@media(prefers-reduced-motion:reduce){
  .chroma-fixed{animation:none;opacity:.3}
  .mcard,.mcard .ph img,.pd .panel,.cart .panel,#toast{transition:none}
  .mq-view{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-mask-image:none;mask-image:none;
  }
  .mq-view .mcard{scroll-snap-align:center}
}

/* ══════════ 3D RENDER LOOPS — transparent video inside the cards + drawer (2026-09-19) ══════════
   Skeeter's Blender mockups (walking tee / walking hoodie / knit-reveal) encoded with a real
   alpha channel, so the garment floats over the glass card exactly like the old cut-out
   images did. store.js swaps in the poster still for reduced-motion / Save-Data / failures. */
.mcard .ph{position:relative}
.mcard .ph::after{                       /* soft ground shadow = "3D floor contact", costs nothing per frame */
  content:"";position:absolute;left:50%;bottom:-4px;width:64%;height:22px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,0) 72%);pointer-events:none;
}
.mcard .ph img{position:relative;z-index:1}
.mcard .ph video.spin{
  position:relative;z-index:1;display:block;max-height:100%;width:auto;max-width:100%;
  background:transparent;object-fit:contain;pointer-events:none;
  transition:transform .6s var(--ease);
}
.mcard:hover .ph video.spin,.mcard:focus-visible .ph video.spin{transform:scale(1.045)}
@media(min-width:900px){                 /* desktop GPUs can afford the per-frame shadow that sells the float */
  .mcard .ph video.spin{filter:drop-shadow(0 22px 28px rgba(0,0,0,.5))}
}
.pd .vis video{background:transparent;border-radius:0;object-fit:contain}

/* ══════════ COLLECTION MARK — clean wordmark ABOVE the pieces (Unbounded 900) ══════════
   Leon 2026-09-19: "sharper and cleaner", "too low" → solid white Unbounded, sitting above the
   cards with breathing room (no overlap). The looping animation is a soft ember light sweep
   travelling through the letters every ~5 s (gradient clipped to the text). */
.merch-mark{
  position:relative;z-index:2;pointer-events:none;text-align:center;
  margin:clamp(4px,.8vw,14px) auto clamp(14px,2.2vw,32px);max-width:var(--maxw);
}
.merch-mark .k{
  display:block;margin-bottom:clamp(8px,1vw,14px);
  font-family:var(--b-fam);font-weight:600;font-size:clamp(10px,.78vw,12px);letter-spacing:.34em;text-transform:uppercase;color:var(--mist);
}
.merch-mark .t{
  display:inline-block;font-family:'Unbounded','Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(30px,7.8vw,120px);line-height:1;letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;color:#fff;
  background:linear-gradient(105deg,#fff 0 38%,#FFD9CF 44%,#DE4B2E 47%,#FFD9CF 50%,#fff 56% 100%);
  background-size:320% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:markSweep 5.2s cubic-bezier(.4,0,.2,1) infinite;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55));
}
@keyframes markSweep{0%{background-position:120% 0}70%,100%{background-position:-120% 0}}
.shop-mark{margin-top:clamp(18px,3vh,40px);margin-bottom:clamp(6px,1vw,14px)}

/* ══════════ CARD PEEK — finger / hover on a piece shows the product image behind the animation ══════════
   Leon 2026-09-19: "when they put their finger on it, show the image behind the animation; double
   tap to go purchase it." Desktop: hover = image, click = shop. Touch: 1st tap = image (+ hint),
   2nd tap within ~3 s = shop (store.js sets .peek / data-armed). Touch devices get the native
   swipe row (.mq-view.static) instead of the drifting track. */
.mcard .ph video.spin,.mcard .ph > img:not(.still){transition:opacity .35s var(--ease),transform .6s var(--ease)}
.mcard .ph img.still{
  position:absolute;inset:0;margin:auto;z-index:2;max-height:100%;width:auto;max-width:100%;
  border-radius:10px;filter:none;background:var(--ink-2);
  opacity:0;transform:scale(.96);pointer-events:none;
  transition:opacity .35s var(--ease),transform .5s var(--ease);
}
.mcard.peek .ph video.spin,.mcard.peek .ph > img:not(.still){opacity:.1;transform:scale(1.03)}
.mcard.peek .ph img.still{opacity:1;transform:none}
@media(hover:hover){
  .mcard:hover .ph video.spin,.mcard:hover .ph > img:not(.still){opacity:.1}
  .mcard:hover .ph img.still{opacity:1;transform:none}
}
.mcard .hint{
  position:absolute;left:50%;bottom:-8px;z-index:3;transform:translate(-50%,6px);
  font-family:var(--b-fam);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  color:#fff;background:var(--ember);padding:.6em 1.05em;border-radius:99px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.mcard.peek .hint{opacity:1;transform:translate(-50%,0)}
@media(hover:none){
  .mq-view.static{scrollbar-width:none}
  .mq-view.static::-webkit-scrollbar{display:none}
}

/* ══════════ REDUCED MOTION (renders + mark) ══════════ */
@media(prefers-reduced-motion:reduce){
  .merch-mark .t{animation:none;background:none;-webkit-text-fill-color:#fff;color:#fff}
  .mcard .ph video.spin,.mcard .ph img{transition:none}
}