/* =========================================================
   PRINT VYBE — MIDNIGHT NEON v4
   Full redesign: hero brand film + GSAP-driven motion.
   Functional hooks preserved for script.js / shopify.js:
   .product .product-img .quick .tag .price .product-info
   .filter-pill .modal* .cart-drawer* .pv-toast .page-loader
   .tf-* .dropzone .tribute-* .cart-btn .cart-count
   ========================================================= */

:root{
  --bg: #0a0910;        /* near-black page */
  --ink: #f4f0fc;       /* LIGHT foreground (text) */
  --ink-2: #cabfe6;     /* muted light text */
  --acid: #ffd400;      /* gold pop */
  --hot: #ff3d5a;       /* coral-red flame */
  --orange: #ff7a1a;    /* orange flame */
  --sun: #ffc21a;       /* gold */
  --violet: #7a2ff2;    /* logo purple */
  --blue: #2e7bff;      /* electric blue */
  --lilac: #a98bff;     /* soft purple */
  --paper: #16131f;     /* dark elevated surface */
  --chip: #221d33;      /* dark chip/pill surface */
  --deep: #060510;      /* darker-than-page sections */
  --muted: #9b8fc2;
  --border: #2b2542;
  --radius: 22px;
  --flame: linear-gradient(120deg, #ffd400 0%, #ff9a1a 26%, #ff3d5a 54%, #7a2ff2 100%);
  --flame-warm: linear-gradient(90deg, #ffc21a, #ff7a1a, #ff3d5a);
  --font-mega: 'Anton', 'Archivo Black', sans-serif;
  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background: var(--acid); color: #0a0910;}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background: var(--deep);}
::-webkit-scrollbar-thumb{background: var(--chip); border-radius: 8px; border: 2px solid var(--deep);}
::-webkit-scrollbar-thumb:hover{background: var(--violet);}

/* ============================
   FILM GRAIN + SCROLL PROGRESS
   ============================ */
.grain{
  position: fixed;
  inset: -60%;
  width: 220%;
  height: 220%;
  z-index: 3000;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter 0.9s steps(4) infinite;
}
@keyframes grain-jitter{
  0%{ transform: translate(0,0);}
  25%{ transform: translate(-2%,1.6%);}
  50%{ transform: translate(1.4%,-2%);}
  75%{ transform: translate(-1.2%,-1%);}
  100%{ transform: translate(0,0);}
}
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 4000;
  pointer-events: none;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:100%;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: left;
}

/* ============================
   ANNOUNCEMENT MARQUEE
   ============================ */
.announce{
  background: var(--flame);
  background-size: 200% 100%;
  animation: flame-shift 8s linear infinite;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  padding: 10px 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 20;
}
@keyframes flame-shift{
  0%{ background-position: 0% 50%;}
  100%{ background-position: 200% 50%;}
}
.announce-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  animation: scroll-x 28s linear infinite;
  width:max-content;
}
.announce-track span{flex-shrink:0;}
@keyframes scroll-x{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============================
   NAV
   ============================ */
.nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1), backdrop-filter .4s;
}
.nav.scrolled{
  background: rgba(10,9,16,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.nav.hide{ transform: translateY(-110%); }
.nav-inner{
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.logo{
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  display:inline-flex;
  align-items:center;
}
.logo span{color: var(--hot);}
.logo sup{font-size:10px; margin-left:2px;}
.logo.big{font-size: 38px;}
.logo-img{ height: 52px; width:auto; filter: drop-shadow(0 4px 18px rgba(255,122,26,.35)); }
.logo-img + .logo-text{ display:none; }

.nav-links{
  display:flex; gap:30px;
  justify-content:center;
}
.nav-links a{
  font-weight:600;
  font-size:14px;
  letter-spacing: .02em;
  position:relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left;}
.nav-links a.active{ color: var(--sun);}
.nav-links a.active::after{ transform: scaleX(1);}

.nav-actions{
  display:flex; gap:12px;
  justify-content:flex-end;
  align-items:center;
}
.cart-btn{
  background: var(--flame);
  background-size: 160% 160%;
  color: #fff;
  padding: 11px 18px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(255,61,90,.3);
  transition: transform .2s, box-shadow .25s, background-position .4s;
}
.cart-btn:hover{ transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 10px 28px rgba(255,122,26,.45);}
.cart-count{
  background: #0a0910;
  color: var(--acid);
  width: 22px; height: 22px;
  border-radius:50%;
  font-size: 11px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition: transform .2s;
}
.burger{
  display:none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: rgba(22,19,31,.6);
  position: relative;
  z-index: 1001;
}
.burger span{
  position:absolute;
  left: 13px; right: 13px;
  height: 2px;
  background: var(--ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), top .35s, background .3s;
}
.burger span:nth-child(1){ top: 18px;}
.burger span:nth-child(2){ top: 26px;}
.burger.open span:nth-child(1){ top: 22px; transform: rotate(45deg); background: var(--acid);}
.burger.open span:nth-child(2){ top: 22px; transform: rotate(-45deg); background: var(--acid);}

/* ============================
   FULL-SCREEN MENU
   ============================ */
.menu{
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  visibility: hidden;
}
.menu.open{ pointer-events: auto; visibility: visible;}
.menu-bg{
  position:absolute; inset:0;
  /* explicit opaque base — a var() color in the `background` *shorthand* final
     layer fails to paint on some mobile browsers, which let page content show
     through the menu. Split color + image so the dark base always renders. */
  background-color: var(--deep);
  background-image:
    radial-gradient(60% 50% at 80% 20%, rgba(122,47,242,.35), transparent 65%),
    radial-gradient(50% 45% at 15% 85%, rgba(255,61,90,.28), transparent 60%);
  transform: translateY(-100%);
}
.menu-links{
  position: relative;
  z-index: 2;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  gap: 4px;
}
.menu-links a{
  display:flex;
  align-items: baseline;
  gap: 22px;
  font-family: var(--font-mega);
  font-size: clamp(44px, 9vh, 92px);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: .01em;
  overflow: hidden;
  width: max-content;
}
.menu-links a i{
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.menu-links a b{
  font-weight: 400;
  display:inline-block;
  transition: color .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.menu-links a:hover b{
  transform: translateX(14px);
  background: var(--flame-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menu-foot{
  position:absolute;
  bottom: 34px; left: 8vw; right: 8vw;
  z-index: 2;
  display:flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ============================
   HERO — BRAND FILM
   ============================ */
.vhero{
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  margin-top: -79px;             /* pull the film up behind the transparent nav */
  isolation: isolate;
  overflow: clip;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vhero-media{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.vhero-video{
  width: 100%;
  height: 115%;                  /* headroom for scroll parallax */
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.06);
  will-change: transform;
}
.vhero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,5,16,.62) 0%, rgba(6,5,16,.18) 34%, rgba(6,5,16,.30) 62%, rgba(10,9,16,.97) 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 50%, rgba(6,5,16,.55) 100%);
}
.vhero-embers{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode: screen;
}
.vhero-content{
  position: relative;
  z-index: 2;
  padding: 0 5vw clamp(20px, 3svh, 30px);
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
.badge-row{
  display:flex; gap:10px; margin-bottom: clamp(16px, 2.8svh, 26px);
}
.badge{
  background: rgba(22,19,31,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.badge.ghost{ background: transparent; }
.badge.dark{ background: var(--acid); color: #0a0910; border-color: var(--acid);}

.vhero-title{
  font-family: var(--font-mega);
  font-weight: 400;
  font-size: clamp(74px, 15.5svh, 196px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 clamp(18px, 2.6svh, 26px) -4px;
}
.vh-line{
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.02em;
}
.vh-word{ display: inline-block; }
.vh-word.flame{
  background: var(--flame);
  background-size: 160% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flame-shift 7s linear infinite;
  filter: drop-shadow(0 6px 36px rgba(255,90,40,.35));
}
.vh-word.flame .vh-char{
  background: var(--flame);
  background-size: 700% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vh-char{ display:inline-block; will-change: transform; }
.vhero-sub{
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 460px;
  color: #e7defa;
  text-shadow: 0 2px 18px rgba(6,5,16,.8);
  margin-bottom: clamp(22px, 3.2svh, 34px);
  line-height: 1.55;
}
.hero-cta{
  display:flex; gap:14px;
  flex-wrap:wrap;
  margin-bottom: clamp(20px, 3.4svh, 36px);
}
.btn-primary{
  background: var(--flame);
  background-size: 180% 180%;
  color: #fff;
  padding: 18px 32px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(255,61,90,.4), 0 2px 10px rgba(122,47,242,.35);
  transition: transform .25s, box-shadow .25s, background-position .5s;
}
.btn-primary::after{
  content:'';
  position:absolute;
  top:0; left:-80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-primary:hover{ transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 14px 40px rgba(255,122,26,.55), 0 4px 16px rgba(122,47,242,.45);}
.btn-primary:hover::after{ left: 130%; }
.btn-ghost{
  padding: 18px 32px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  border: 1.5px solid rgba(244,240,252,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s, color .25s, border-color .25s;
}
.btn-ghost:hover{ background: var(--ink); color: #0a0910; border-color: var(--ink);}

.vhero-foot{
  position: relative;
  z-index: 2;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 5vw clamp(22px, 3.6svh, 34px);
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
}
.hero-meta{ display:flex; gap: 40px;}
.hero-meta div{ display:flex; flex-direction:column;}
.hero-meta strong{
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.hero-meta span{
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.scroll-cue{
  display:flex; align-items:center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.scroll-line{
  width: 60px;
  height: 1px;
  background: rgba(244,240,252,.3);
  position:relative;
  overflow:hidden;
}
.scroll-line::after{
  content:'';
  position:absolute; left:0; top:0;
  width: 30%; height:100%;
  background: var(--hot);
  animation: scroll-cue 2s ease-in-out infinite;
}
@keyframes scroll-cue{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(220%);}
}

/* ============================
   GIANT MARQUEE DIVIDER
   ============================ */
.marquee-giant{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--deep);
  padding: 22px 0;
  overflow: hidden;
}
.mg-track{
  display:flex;
  align-items:center;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-mega);
  font-size: clamp(54px, 8vw, 120px);
  text-transform: uppercase;
  line-height: 1;
  animation: scroll-x 24s linear infinite;
  will-change: transform;
}
.mg-track span{
  background: var(--flame);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mg-track span.hollow{
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(244,240,252,.4);
}
.mg-track em{
  font-style: normal;
  font-size: 0.45em;
  color: var(--acid);
  -webkit-text-fill-color: var(--acid);
}

/* ============================
   SECTION HEADS / TYPE
   ============================ */
.section-head{
  max-width: 1500px;
  margin: 0 auto;
  padding: 90px 5vw 44px;
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  flex-wrap: wrap;
  gap: 30px;
}
.eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 18px;
}
.eyebrow.light{color: var(--acid);}
.eyebrow.center{ display:block; text-align:center;}
.section-head h2,
.bento-title,
.cta h2{
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.section-head em,
.bento-title em,
.cta em,
.page-head h1 em{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  background: var(--flame-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-right: 0.14em;
  padding-bottom: 0.12em;
  line-height: 1.04;
}
.sw{ display:inline-block; overflow:hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em;}
.sw > .sw-in{ display:inline-block; will-change: transform;}
.view-all{
  font-weight: 600;
  font-size: 16px;
  position: relative;
  padding-bottom: 4px;
}
.view-all::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background: var(--flame);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.view-all:hover::after{ transform: scaleX(.4);}

/* ============================
   LANES — interactive list
   ============================ */
.lanes{
  position: relative;
  padding-bottom: 110px;
}
.lane-list{
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5vw;
  display:flex;
  flex-direction: column;
}
.lane-row{
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto 60px;
  align-items: center;
  gap: 22px;
  padding: 26px 10px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}
.lane-row:last-child{ border-bottom: 1px solid var(--border);}
.lane-row::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(122,47,242,.16), rgba(255,61,90,.10) 50%, transparent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.lane-row:hover::before{ transform: scaleY(1);}
.lr-idx{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  position: relative; z-index: 1;
  transition: color .3s;
}
.lane-row:hover .lr-idx{ color: var(--acid);}
.lr-thumb{ display:none; }
.lr-name{
  font-family: var(--font-mega);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 86px);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  position: relative; z-index: 1;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.lane-row:hover .lr-name{
  transform: translateX(18px);
  background: var(--flame);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lr-tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative; z-index: 1;
  text-align: right;
}
.lr-arrow{
  font-size: 28px;
  font-weight: 700;
  justify-self: end;
  position: relative; z-index: 1;
  opacity: .25;
  transform: translateX(-12px) rotate(-45deg);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), color .3s;
}
.lane-row:hover .lr-arrow{
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  color: var(--acid);
}
/* floating photo that chases the cursor */
.lane-preview{
  position: fixed;
  top: 0; left: 0;
  width: clamp(260px, 24vw, 360px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: rotate(-5deg) scale(.85);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1.5px rgba(122,47,242,.5);
  will-change: transform;
}
.lane-preview img{
  width:100%; height:100%;
  object-fit: cover;
}
.lane-preview .lp-flame{
  display:none;
  position:absolute; inset:0;
  background: var(--flame);
  background-size: 200% 200%;
  animation: flame-shift 6s linear infinite;
}
.lane-preview.flame-only img{ visibility: hidden;}
.lane-preview.flame-only .lp-flame{ display:block;}

/* ============================
   RAIL — horizontal product strip
   ============================ */
.rail{ position: relative; background: var(--deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.rail-pin{
  padding: 0 0 90px;
  overflow: hidden;
}
.rail-head{ padding-top: 80px; padding-bottom: 50px;}
.rail-hint{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.rail-track{
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0 5vw;
  will-change: transform;
}
.rail-track .product{
  width: clamp(270px, 25vw, 360px);
  flex: none;
}
.rail-end{
  flex: none;
  width: clamp(230px, 20vw, 300px);
  border-radius: var(--radius);
  border: 1.5px dashed var(--border);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--font-mega);
  text-transform: uppercase;
  transition: border-color .3s, background .3s, transform .3s;
}
.re-big{
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: .95;
  text-align: center;
  background: var(--flame);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.re-arrow{ font-size: 40px; color: var(--acid); transition: transform .3s;}
.rail-end:hover{ border-color: var(--violet); background: rgba(122,47,242,.08); transform: translateY(-6px);}
.rail-end:hover .re-arrow{ transform: translateX(10px);}

/* ============================
   PRODUCT CARDS (shared: rail + shop)
   ============================ */
.product{
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.product:hover{
  transform: translateY(-8px);
  border-color: rgba(122,47,242,.65);
  box-shadow: 0 0 0 1px rgba(122,47,242,.5), 0 26px 60px rgba(122,47,242,.28), 0 10px 28px rgba(0,0,0,.5);
}
.product.hidden{ display:none;}
.product-img{
  position:relative;
  aspect-ratio: 1 / 1.05;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation: isolate;
}
.product-img img{
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.product:hover .product-img img{
  transform: scale(1.07) rotate(.4deg);
  filter: contrast(1.05) saturate(1.1);
}
/* tinted washes behind transparent PNGs */
.product-img[class*="tint-"]::before{
  content:'';
  position:absolute; inset:0;
  z-index: 0;
}
.tint-red::before{    background: linear-gradient(135deg, #2a1218 0%, #471c22 100%);}
.tint-lime::before{   background: linear-gradient(135deg, #20240f 0%, #3a4214 100%);}
.tint-ink::before{    background: linear-gradient(135deg, #1b1726 0%, #2b2542 100%);}
.tint-smoke::before{  background: linear-gradient(135deg, #1d1d22 0%, #34343c 100%);}
.tint-blues::before{  background: linear-gradient(135deg, #131a2b 0%, #1f2c4d 100%);}
.tint-alabama::before{background: linear-gradient(135deg, #2a1016 0%, #4d1c26 100%);}
.tint-vikings::before{background: linear-gradient(135deg, #1d1430 0%, #342055 100%);}
.tint-auburn::before{ background: linear-gradient(135deg, #241408 0%, #45260d 100%);}
.tint-boots::before{  background: linear-gradient(135deg, #241c10 0%, #44331e 100%);}
.tint-lilac::before{  background: linear-gradient(135deg, #1d1630 0%, #322353 100%);}
.tint-eagles::before{ background: linear-gradient(135deg, #0f1f17 0%, #1d3a2b 100%);}
.tint-scrub::before{  background: linear-gradient(135deg, #0f2220 0%, #1c403c 100%);}

.tag{
  position:absolute;
  top: 14px; left: 14px;
  background: var(--chip);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  z-index: 3;
  border: 1px solid var(--border);
}
.tag.new{ background: var(--acid); color: #0a0910; border-color: var(--acid);}
.tag.hot{ background: var(--hot); color: #fff; border-color: var(--hot);}
.tag.limited{ background: var(--chip); color: var(--acid);}
.tag.soon{ background: var(--chip); color: var(--ink);}
.tag.custom{ background: var(--flame); color:#fff; border-color: transparent; }

.quick{
  position:absolute;
  bottom: 14px; right: 14px;
  background: var(--flame);
  background-size: 160% 160%;
  color: #fff;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(255,61,90,.35);
  transition: transform .25s, box-shadow .25s, background-position .4s, opacity .25s;
}
.product:hover .quick{ transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 10px 24px rgba(255,122,26,.5);}
.quick:active{ transform: translateY(0) scale(.95);}
.quick.added{ background: var(--acid); color: #0a0910;}
.product-info{
  padding: 16px 18px 19px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  border-top: 1px solid var(--border);
  background: var(--paper);
}
.product-info h3{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.price{
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.price s{ color: var(--muted); margin-right:6px; font-weight: 400;}

/* sold out */
.product.soldout .product-img{ filter: grayscale(0.7) opacity(0.85); }
.product.soldout .quick{ background: #4a4456; cursor: not-allowed; box-shadow:none;}
.product.soldout .quick:hover{ transform:none;}

/* coming soon (legacy) */
.product.soon{ cursor: default;}
.soon-label{
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.3;
  z-index: 2;
  text-align: center;
  padding: 0 16px;
}

/* custom-design cards (anime / games / cartoons / cars) */
.product.custom .custom-link{ display:block; color: inherit; }
.product.custom .custom-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  border: 2px dashed rgba(122,47,242,.55);
  border-radius: calc(var(--radius) - 8px);
  margin: 8px;
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(255,154,26,.12), transparent 70%),
    linear-gradient(135deg, rgba(255,212,0,.07), rgba(122,47,242,.12));
  transition: background .3s, border-color .3s;
}
.product.custom .product-img.custom-zone{ aspect-ratio: 1 / 1.01;}
.product.custom:hover .custom-zone{
  border-color: var(--violet);
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(255,154,26,.22), transparent 70%),
    linear-gradient(135deg, rgba(255,212,0,.12), rgba(122,47,242,.2));
}
.custom-ico{
  width: 54px; height: 54px;
  color: var(--lilac);
  transition: transform .3s, color .3s;
}
.product.custom:hover .custom-ico{ transform: translateY(-5px); color: var(--acid); }
.custom-label{
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: -0.02em;
}
.custom-cta-text{
  background: var(--flame-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* ============================
   MANIFESTO
   ============================ */
.manifesto{
  background: var(--deep);
  color: var(--ink);
  padding: 56px 0 0;
  overflow:hidden;
}
.manifesto-marquee{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  overflow:hidden;
}
.manifesto-track{
  display:flex;
  gap: 40px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 80px);
  animation: scroll-x 20s linear infinite;
  width: max-content;
  align-items:center;
  letter-spacing: -0.02em;
  will-change: transform;
}
.manifesto-track span:not(.dot){
  background: var(--flame);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manifesto-track .dot{
  color: var(--acid);
  font-size: 0.5em;
}
.manifesto-body{
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 32px 84px;
  text-align:center;
}
.manifesto-body p{
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.38;
  margin: 24px 0 42px;
  color: #efe9fb;
  font-weight: 500;
}
.manifesto-body .mline{
  display:block;
  overflow:hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.manifesto-body .mline > span{ display:inline-block; will-change: transform;}
.manifesto-body em{
  color: var(--acid);
  font-style: italic;
}
.btn-light{
  display:inline-block;
  background: var(--ink);
  color: #0a0910;
  padding: 18px 32px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.btn-light:hover{ transform: translateY(-3px); background: var(--acid); box-shadow: 0 12px 30px rgba(255,212,0,.25);}

/* ============================
   BENTO / ABOUT
   ============================ */
.bento{
  max-width: 1500px;
  margin: 0 auto;
  padding: 100px 5vw 90px;
  text-align: center;
}
.bento-title{ margin-bottom: 44px;}
.bento-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  text-align: left;
}
.bento-card{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  position:relative;
  overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, color .35s, box-shadow .35s, border-color .35s;
}
.bento-card:hover{
  transform: translateY(-6px);
  background: var(--acid);
  border-color: var(--acid);
  box-shadow: 0 18px 50px rgba(255,212,0,.22);
}
.bento-card:hover h3,
.bento-card:hover p,
.bento-card:hover .bento-num{ color:#0a0910;}
.bento-card.big:hover{
  background: var(--flame);
  border-color: transparent;
  box-shadow: 0 18px 55px rgba(255,61,90,.35);
}
.bento-card.big:hover h3,
.bento-card.big:hover p,
.bento-card.big:hover .bento-num{ color:#fff;}
.bento-num{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 34px;
  transition: color .3s;
}
.bento-card h3{
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  transition: color .3s;
}
.bento-card p{
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  transition: color .3s;
}

/* ============================
   CTA
   ============================ */
.cta{
  padding: 0 5vw 110px;
}
.cta-inner{
  max-width: 1340px;
  margin: 0 auto;
  background:
    radial-gradient(60% 90% at 80% 110%, rgba(122,47,242,.55), transparent 60%),
    radial-gradient(50% 80% at 10% -10%, rgba(255,122,26,.45), transparent 60%),
    linear-gradient(135deg, #160a2e 0%, #2a1450 100%);
  border: 1px solid rgba(122,47,242,.4);
  color: #fff;
  border-radius: 32px;
  padding: 84px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-glow{
  position:absolute;
  width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(255,61,90,.4) 0%, rgba(255,194,26,.22) 35%, transparent 62%);
  top: -240px; left: 50%;
  transform: translateX(-50%);
  pointer-events:none;
  animation: cta-drift 12s ease-in-out infinite alternate;
}
@keyframes cta-drift{
  0%{ transform: translateX(-50%) scale(1);}
  100%{ transform: translateX(-44%) scale(1.12);}
}
.cta-orb{
  position:absolute;
  border-radius: 50%;
  filter: blur(36px);
  pointer-events: none;
  opacity: .8;
}
.cta-orb-1{
  width: 180px; height: 180px;
  background: rgba(255,122,26,.5);
  left: 6%; bottom: -40px;
  animation: orb-float 9s ease-in-out infinite alternate;
}
.cta-orb-2{
  width: 140px; height: 140px;
  background: rgba(46,123,255,.45);
  right: 8%; top: 10%;
  animation: orb-float 7s ease-in-out infinite alternate-reverse;
}
@keyframes orb-float{
  from{ transform: translateY(0) translateX(0);}
  to{ transform: translateY(-46px) translateX(28px);}
}
.cta-inner > *:not(.cta-glow):not(.cta-orb){ position:relative; z-index:2;}
.cta-inner .badge{ margin-bottom: 24px;}
.cta-inner h2{ color: #fff;}
.cta-inner em{ color: var(--acid); -webkit-text-fill-color: var(--acid); background: none;}
.cta-inner p{
  font-size: 18px;
  color: #d9cdf2;
  margin: 20px 0 40px;
  max-width: 540px;
  margin-left:auto; margin-right:auto;
}
.cta-form{
  display:flex;
  max-width: 540px;
  margin: 0 auto;
  background: rgba(10,9,16,.75);
  border: 1px solid rgba(122,47,242,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 6px;
  gap: 6px;
}
.cta-form input{
  flex:1;
  padding: 16px 20px;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.cta-form input::placeholder{ color: var(--muted);}
.cta-form button{
  background: var(--flame);
  background-size: 160% 160%;
  color: #fff;
  padding: 16px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: background-position .4s, transform .25s;
}
.cta-form button:hover{ background-position: 100% 0; transform: translateY(-1px);}

/* ============================
   FOOTER
   ============================ */
.footer{
  background: var(--deep);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.footer-top{
  max-width: 1500px;
  margin: 0 auto;
  padding: 80px 5vw 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.footer-logo p{
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}
.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer-cols h4{
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer-cols a{
  display:block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--ink-2);
  transition: color .2s, transform .25s;
}
.footer-cols a:hover{ color: var(--sun); transform: translateX(5px);}
.footer-giant{
  padding: 30px 0 10px;
  text-align: center;
  line-height: .9;
  white-space: nowrap;
}
.footer-giant span{
  font-family: var(--font-mega);
  font-size: clamp(58px, 11.5vw, 200px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  background: linear-gradient(90deg, #ffd400, #ff9a1a, #ff3d5a, #7a2ff2 48%, rgba(244,240,252,.07) 52%);
  background-size: 215% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(244,240,252,.16);
}
.footer-marquee{
  border-top: 1px solid var(--border);
  overflow:hidden;
  padding: 26px 0;
  margin-top: 26px;
}
.footer-track{
  display:flex;
  gap: 40px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.03em;
  animation: scroll-x 25s linear infinite;
  width: max-content;
  line-height: 1;
  will-change: transform;
}
.footer-track span:not(.star){
  background: var(--flame-warm);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-track .star{ color: var(--hot);}

/* ============================
   PAGE HEAD (sub-pages)
   ============================ */
.page-head{
  max-width: 1500px;
  margin: 0 auto;
  padding: 90px 5vw 40px;
  position: relative;
}
.page-head .eyebrow{ margin-bottom: 18px;}
.page-head h1{
  font-family: var(--font-mega);
  font-weight: 400;
  font-size: clamp(58px, 11vw, 170px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.page-head p{
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--ink-2);
  max-width: 560px;
  margin-top: 24px;
  line-height: 1.55;
}
.page-head .crumb{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 22px;
  display: inline-block;
}
.page-head .crumb a:hover{ color: var(--sun);}

/* ============================
   SHOP GRID + FILTERS
   ============================ */
.shop{
  padding-bottom: 110px;
  background: var(--bg);
}
.shop .section-head{ padding-top: 30px;}
.shop-grid{
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5vw;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.filter-pills{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.filter-pill{
  background: var(--chip);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  transition: all .25s;
}
.filter-pill:hover{ background: var(--acid); color: #0a0910; border-color: var(--acid); transform: translateY(-2px);}
.filter-pill.active{ background: var(--flame); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(255,61,90,.3);}

/* ============================
   CAT STRIP (legacy pill row)
   ============================ */
.cat-strip{
  background: var(--deep);
  padding: 24px 32px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cat-pill{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 12px 24px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: all .25s;
}
.cat-pill:hover{ background: var(--acid); color: #0a0910; border-color: var(--acid); transform: translateY(-2px);}

/* ============================
   MEMORIAL & TRIBUTE
   ============================ */
.tribute{ background: var(--bg); color: var(--ink);}
.tribute-inner{ max-width: 1500px; margin: 0 auto;}
.tribute .section-head{ padding: 90px 5vw 40px;}
.tribute .eyebrow.light{ color: var(--hot);}
.tribute-body{ padding: 0 5vw 110px;}
.tribute-lead{
  max-width: 780px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 56px;
}
.tribute-lead em{
  color: var(--sun);
  font-style: italic;
}
/* custom-design category chips */
.custom-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 56px;
}
.custom-tags .badge{ font-size: 12px; padding: 9px 16px; }
.tribute-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 70px;
}
.trib-shot{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 3/4;
  background: var(--paper);
  position: relative;
}
.trib-shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.trib-shot:hover img{ transform: scale(1.06);}
.tribute-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}
.trib-step{
  border-top: 2px solid var(--border);
  padding-top: 22px;
  position: relative;
}
.trib-step::before{
  content:'';
  position:absolute;
  top: -2px; left: 0;
  width: 46px; height: 2px;
  background: var(--flame-warm);
}
.trib-num{
  font-family: var(--font-display);
  font-size: 26px;
  background: var(--flame-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.trib-step h4{
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 10px 0 8px;
}
.trib-step p{ color: var(--muted); font-size: 15px; line-height: 1.5;}

/* form card */
.tribute-form-wrap{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: start;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(122,47,242,.16), transparent 60%),
    #0d0b14;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px;
}
.tribute-form-intro .badge.dark{ margin-bottom: 20px;}
.tribute-form-intro h3{
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.tribute-form-intro p{ color: var(--ink-2); font-size: 16px; line-height: 1.55; margin-bottom: 14px;}
.tribute-note{ color: var(--acid) !important; font-weight: 600;}
.tribute-form .tf-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tf-field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px;}
.tf-field label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tf-field label span{ color: var(--hot);}
.tf-field input,
.tf-field select,
.tf-field textarea{
  background: var(--deep);
  border: 1.5px solid var(--border);
  color: var(--ink);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.tf-field textarea{ min-height: 130px; resize: vertical;}
.tf-field select{ cursor: pointer;}
.tf-field input::placeholder,
.tf-field textarea::placeholder{ color: #5e5578;}
.tf-field input:focus,
.tf-field select:focus,
.tf-field textarea:focus{
  outline: none;
  border-color: var(--acid);
  box-shadow: 0 0 0 3px rgba(255,212,0,0.14);
}
.tf-field.invalid input,
.tf-field.invalid textarea{ border-color: var(--hot);}
.tf-err{ display: none; color: var(--hot); font-size: 13px;}
.tf-field.invalid .tf-err{ display: block;}
.dropzone{
  border: 1.5px dashed var(--border);
  background: var(--deep);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  display: block;
  transition: border-color .2s, background .2s;
}
.dropzone:hover,
.dropzone.drag{ border-color: var(--acid); background: rgba(255,212,0,0.04);}
.dz-icon{
  display: inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--flame);
  color: #fff;
  font-size: 20px; font-weight: 700; margin-bottom: 12px;
}
.dropzone strong{ display: block; font-weight: 700; margin-bottom: 4px;}
.dz-hint{ color: var(--muted); font-size: 14px;}
.dz-files{ margin-top: 12px; color: var(--acid); font-size: 14px; font-weight: 600;}
.tribute-submit{
  width: 100%;
  background: var(--flame);
  background-size: 160% 160%;
  color: #fff;
  padding: 18px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  margin-top: 8px;
  box-shadow: 0 8px 26px rgba(255,61,90,.3);
  transition: transform .25s, background-position .4s, box-shadow .25s;
}
.tribute-submit:hover{ transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 14px 34px rgba(255,122,26,.45);}
.tf-note{ color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 16px;}
.tribute-success{
  display: none;
  margin-top: 20px;
  border: 1.5px solid var(--acid);
  background: rgba(255,212,0,0.06);
  border-radius: 16px;
  padding: 22px 24px;
}
.tribute-success.show{ display: block;}
.tribute-success strong{
  display: block;
  font-family: var(--font-display);
  color: var(--acid);
  font-size: 20px;
  margin-bottom: 6px;
}
.tribute-success p{ color: var(--ink-2); font-size: 15px; line-height: 1.55;}

/* ============================
   LOOKBOOK
   ============================ */
.lookbook{
  background: var(--bg);
  color: var(--ink);
  padding-bottom: 110px;
}
.look-grid{
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5vw;
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 340px 340px;
  gap: 16px;
}
.look{
  border-radius: var(--radius);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.look-a{ grid-row: span 2; }
.look-d{ grid-column: span 2; }
.look img{
  position:absolute;
  inset: -12% 0;
  width:100%; height:124%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.look:hover img{ transform: scale(1.05); }
.look::before{
  content:'';
  position:absolute; inset:0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6,5,16,0.82) 0%, rgba(6,5,16,0.18) 42%, transparent 70%);
}
.look:hover{
  transform: translateY(-6px);
  box-shadow: 0 0 0 1.5px rgba(122,47,242,.55), 0 24px 60px rgba(122,47,242,.25);
}
.look-overlay{
  position:absolute;
  left: 24px; bottom: 24px;
  right: 24px;
  color: #fff;
  z-index: 2;
  display:flex; flex-direction:column;
  gap: 6px;
}
.look-overlay span{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--acid);
}
.look-overlay strong{
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 360px;
}

/* ============================
   PRODUCT MODAL
   ============================ */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1600;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.modal.open{ pointer-events: auto; opacity: 1;}
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(6,5,16,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.modal-shell{
  position: relative;
  width: min(1180px, 94vw);
  max-height: 92vh;
  margin: 4vh auto 0;
  background: var(--paper);
  border-radius: 28px;
  border: 1px solid var(--border);
  overflow: hidden;
  transform: scale(.94) translateY(24px);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.modal.open .modal-shell{
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-close{
  position:absolute;
  top:18px; right:18px;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--chip);
  border: 1px solid var(--border);
  z-index: 5;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s, background .25s, color .25s;
}
.modal-close:hover{ transform: rotate(90deg); background: var(--hot); color: #fff;}
.modal-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  max-height: 92vh;
}
.modal-gallery{
  background: var(--deep);
  padding: 28px;
  display:flex; flex-direction:column;
  gap: 14px;
  overflow:hidden;
}
.modal-main{
  position:relative;
  flex:1;
  min-height: 0;
  background: var(--chip);
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
}
.modal-main img{
  width:100%; height:100%;
  object-fit: cover;
  transition: opacity .35s ease;
}
.modal-main img.fade-in{
  animation: fadeUp .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes fadeUp{
  from{ opacity:0; transform: scale(1.03);}
  to{ opacity:1; transform: scale(1);}
}
.modal-badge{
  position:absolute;
  top: 18px; left: 18px;
  background: var(--chip);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  border: 1px solid var(--border);
}
.modal-thumbs{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.modal-thumbs::-webkit-scrollbar{ height: 6px;}
.modal-thumbs::-webkit-scrollbar-thumb{ background: var(--chip); border-radius: 100px;}
.thumb{
  flex-shrink: 0;
  width: 76px; height: 76px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow:hidden;
  cursor:pointer;
  opacity: 0.55;
  transition: opacity .2s, transform .2s, border-color .2s, box-shadow .2s;
  padding: 0;
  background: var(--paper);
}
.thumb img{ width:100%; height:100%; object-fit: cover;}
.thumb:hover{ opacity: 0.9; transform: translateY(-2px);}
.thumb.active{ opacity: 1; border-color: var(--violet); box-shadow: 0 0 0 2px rgba(122,47,242,.4);}
.modal-info{
  padding: 56px 44px 44px;
  overflow-y: auto;
  display:flex; flex-direction:column;
}
.modal-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}
.modal-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.modal-rating{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
}
.modal-rating .stars{ color: var(--sun); letter-spacing: 2px;}
.modal-rating .rating-num{ color: var(--muted);}
.modal-price{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 26px;
  font-family: var(--font-mono);
}
.modal-price s{ color: var(--muted); font-size: 18px;}
.modal-price strong{ font-size: 30px; font-family: var(--font-display); letter-spacing: -0.02em;}
.modal-price .save{
  background: var(--acid);
  color: #0a0910;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-left: 6px;
}
.modal-desc{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.modal-option{ margin-bottom: 24px;}
.opt-label{
  display:flex; justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.opt-label a{
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 400;
}
.color-pills{ display:flex; gap: 10px;}
.color-pill{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c);
  border: 1.5px solid var(--border);
  position:relative;
  transition: transform .2s;
}
.color-pill:hover{ transform: scale(1.1);}
.color-pill.active{ box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--acid);}
.size-pills{ display:flex; gap: 8px; flex-wrap:wrap;}
.size-pill{
  min-width: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--chip);
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  transition: all .2s;
}
.size-pill:hover{ border-color: var(--lilac);}
.size-pill.active{ background: var(--flame); color: #fff; border-color: transparent;}
.modal-actions{
  display:flex; gap: 10px;
  margin-top: 14px;
  margin-bottom: 30px;
}
.modal-add{
  flex:1;
  background: var(--flame);
  background-size: 160% 160%;
  color: #fff;
  padding: 18px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 26px rgba(255,61,90,.3);
  transition: background-position .4s, transform .25s, box-shadow .25s;
}
.modal-add:hover{ background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,122,26,.45);}
.modal-fav{
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--border);
  font-size: 22px;
  transition: all .2s;
}
.modal-fav:hover{ background: var(--hot); color: #fff; transform: scale(1.05); border-color: var(--hot);}
.modal-meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.modal-meta div{ display:flex; flex-direction:column; gap: 2px;}
.modal-meta strong{
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.modal-meta span{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ============================
   CART DRAWER + TOAST (shopify.js)
   ============================ */
.pv-toast{
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(160%);
  background: var(--chip); color: var(--ink);
  border: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 14px 22px; border-radius: 100px; z-index: 2000;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5); max-width: 90vw;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.pv-toast.show{ transform: translateX(-50%) translateY(0); }

.cart-drawer{ position: fixed; inset: 0; z-index: 1500; pointer-events: none; }
.cart-drawer__scrim{
  position: absolute; inset: 0; background: rgba(6,5,16,0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s ease;
}
.cart-drawer.open{ pointer-events: auto; }
.cart-drawer.open .cart-drawer__scrim{ opacity: 1; }
.cart-drawer__panel{
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 92vw);
  background: #100d18; color: var(--ink);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.cart-drawer.open .cart-drawer__panel{ transform: translateX(0); }
.cart-drawer__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 24px 18px; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em;
}
.cart-drawer__close{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--chip); border: 1px solid var(--border); font-size: 15px;
  transition: background .2s, transform .3s, color .2s;
}
.cart-drawer__close:hover{ background: var(--hot); color: #fff; transform: rotate(90deg); }
.cart-drawer__lines{ flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 18px; }
.cart-drawer__empty{
  margin: auto; text-align: center; color: var(--muted);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.8;
}
.cart-drawer__empty span{ color: var(--ink); }
.cart-line{ display: flex; gap: 14px; }
.cart-line__img{ width: 74px; height: 92px; border-radius: 12px; overflow: hidden; background: var(--chip); flex-shrink: 0; border: 1px solid var(--border);}
.cart-line__img img{ width: 100%; height: 100%; object-fit: cover; }
.cart-line__ph{ width: 100%; height: 100%; background: var(--flame); opacity:.4;}
.cart-line__body{ flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cart-line__title{ font-weight: 700; font-size: 15px; line-height: 1.25; }
.cart-line__price{ font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); }
.cart-line__qty{ display: flex; align-items: center; gap: 10px; margin-top: auto; }
.cart-line__qty button{
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; font-size: 16px; line-height: 1;
  transition: background .2s, color .2s, border-color .2s;
}
.cart-line__qty button:hover{ background: var(--acid); color: #0a0910; border-color: var(--acid); }
.cart-line__qty span{ font-family: var(--font-mono); font-weight: 700; min-width: 18px; text-align: center; }
.cart-line__remove{
  width: auto !important; height: auto !important; border: none !important;
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-radius: 0 !important;
}
.cart-line__remove:hover{ background: transparent !important; color: var(--hot) !important; }
.cart-drawer__foot{ padding: 22px 24px 26px; border-top: 1px solid var(--border); }
.cart-drawer__row{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: 18px; margin-bottom: 6px;
}
.cart-drawer__note{ font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.cart-drawer__checkout{
  width: 100%; background: var(--flame); background-size: 160% 160%; color: #fff;
  padding: 18px; border-radius: 100px; font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 26px rgba(255,61,90,.25);
  transition: background-position .4s, transform .25s, opacity .2s;
}
.cart-drawer__checkout:hover:not(:disabled){ background-position: 100% 0; transform: translateY(-2px); }
.cart-drawer__checkout:disabled{ opacity: 0.45; cursor: not-allowed; }

/* ============================
   PAGE LOADER
   ============================ */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--deep);
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  /* no-JS / failed-CDN safety: self-destruct */
  animation: loader-failsafe 0.5s linear 5s forwards;
}
@keyframes loader-failsafe{
  to{ opacity: 0; visibility: hidden; pointer-events: none;}
}
.loader-curtain{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 110%, rgba(122,47,242,.4), transparent 60%),
    var(--deep);
}
.loader-inner{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.loader-text{
  font-family: var(--font-display);
  font-size: clamp(44px, 8.5vw, 100px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.loader-text span{
  background: var(--flame);
  background-size: 200% 100%;
  animation: flame-shift 3s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loader-count{
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--muted);
}
.loader-bar{
  width: 220px;
  height: 3px;
  background: var(--chip);
  border-radius: 100px;
  overflow:hidden;
}
.loader-fill{
  width: 0%;
  height: 100%;
  background: var(--flame);
}
.page-loader.done{ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s, visibility .5s;}

/* legacy cursor elements (removed feature — keep dead) */
.cursor, .cursor-dot{ display: none !important; }

/* ?nofx debug/static mode — un-viewport the hero so full-page captures work */
body.nofx .vhero{ height: 820px; min-height: 0; }

/* ============================
   REDUCED MOTION
   ============================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto;}
  .grain{ animation: none;}
  .announce, .vh-word.flame, .loader-text span{ animation: none;}
  .announce-track, .mg-track, .manifesto-track, .footer-track{ animation-duration: 200s;}
  .cta-glow, .cta-orb-1, .cta-orb-2{ animation: none;}
  .scroll-line::after{ animation: none;}
  *{ transition-duration: .01ms !important;}
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 820px){
  .vhero-title{ font-size: clamp(74px, 16svh, 118px); }
}
@media (max-height: 700px) and (min-width: 641px){
  .vhero{ min-height: 100svh; }
  .vhero-content{ padding-bottom: 16px; }
  .badge-row{ margin-bottom: 12px; }
  .vhero-title{
    font-size: clamp(72px, 15svh, 108px);
    margin-bottom: 14px;
  }
  .vhero-sub{
    max-width: 560px;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 18px;
  }
  .hero-cta{ margin-bottom: 18px; }
  .btn-primary, .btn-ghost{ padding: 14px 24px; }
  .vhero-foot{ padding-bottom: 16px; }
  .hero-meta strong{ font-size: 22px; }
}
@media (max-width: 1024px){
  .nav-links{ display:none;}
  .burger{ display:block;}
  .nav-inner{ grid-template-columns: 1fr auto;}
  .shop-grid{ grid-template-columns: repeat(2,1fr);}
  .bento-grid{ grid-template-columns: repeat(2,1fr);}
  .bento-card.big{ grid-column: span 2;}
  .bento-card.wide{ grid-column: span 2;}
  .look-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 280px 280px;
  }
  .look-a{ grid-row: span 1; grid-column: span 2;}
  .look-d{ grid-column: span 2;}
  .footer-top{ grid-template-columns: 1fr;}
  .tribute-gallery{ grid-template-columns: 1fr 1fr;}
  .tribute-form-wrap{ grid-template-columns: 1fr; gap: 32px; padding: 36px;}
  .lane-preview{ display: none;}
  .lane-row{ grid-template-columns: 44px 84px 1fr 40px; gap: 16px;}
  .lr-tag{ display:none;}
  .lr-thumb{
    display:block;
    width: 84px; height: 60px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
  }
  .lr-thumb-flame{
    background: var(--flame);
    background-size: 200% 200%;
    animation: flame-shift 6s linear infinite;
  }
  /* rail falls back to native horizontal scroll */
  .rail-track{
    overflow-x: auto;
    width: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .rail-track .product{ scroll-snap-align: start; width: min(74vw, 320px);}
  .rail-track::-webkit-scrollbar{ height: 6px;}
  .rail-hint::after{ content: '';}
}
@media (max-width: 900px){
  .modal-grid{
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-main{ min-height: 320px;}
  .modal-info{ padding: 32px 24px;}
}
@media (max-width: 640px){
  .nav-inner{ padding: 12px 18px;}
  .logo-img{ height: 44px;}
  .vhero{ min-height: 560px; margin-top: -71px;}
  .vhero-content{ padding-bottom: 16px;}
  .badge-row{ margin-bottom: 14px;}
  .vhero-title{
    font-size: clamp(62px, 12svh, 96px);
    line-height: 0.84;
    margin-bottom: 16px;
  }
  .vhero-sub{
    font-size: 15.5px;
    margin-bottom: 20px;
  }
  .hero-cta{ margin-bottom: 20px;}
  .btn-primary, .btn-ghost{ padding: 15px 24px; font-size: 15px;}
  .vhero-foot{ padding-bottom: 20px;}
  .hero-meta{ gap: 22px;}
  .hero-meta strong{ font-size: 20px;}
  .scroll-cue{ display:none;}
  .section-head{ padding: 64px 20px 30px;}
  .lane-list{ padding: 0 20px;}
  .lane-row{ padding: 18px 2px; grid-template-columns: 30px 64px 1fr 30px; gap: 12px;}
  .lr-thumb{ width: 64px; height: 48px;}
  .lr-arrow{ font-size: 20px;}
  .rail-head{ padding-top: 60px; padding-bottom: 30px;}
  .rail-track{ padding: 0 20px 20px; gap: 14px;}
  .shop-grid{ grid-template-columns: 1fr; padding: 0 20px;}
  .bento{ padding: 70px 20px 60px;}
  .bento-grid{ grid-template-columns: 1fr;}
  .bento-card.big, .bento-card.wide{ grid-column: span 1;}
  .look-grid{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 260px);
    padding: 0 20px;
  }
  .look-a, .look-d{ grid-column: span 1;}
  .tribute .section-head{ padding: 60px 20px 30px;}
  .tribute-body{ padding: 0 20px 70px;}
  .tribute-gallery{ grid-template-columns: 1fr 1fr; gap: 12px;}
  .tribute-steps{ grid-template-columns: 1fr; gap: 18px;}
  .tribute-form-wrap{ padding: 28px 20px;}
  .tribute-form .tf-row{ grid-template-columns: 1fr;}
  .cta{ padding: 0 20px 70px;}
  .cta-inner{ padding: 64px 20px;}
  .cta-form{ flex-direction: column; border-radius: 18px;}
  .cta-form button{ border-radius: 14px;}
  .footer-top{ padding: 56px 20px 36px;}
  .footer-cols{ grid-template-columns: 1fr 1fr;}
  .page-head{ padding: 64px 20px 28px;}
  .menu-links a{ font-size: clamp(38px, 7.5vh, 64px);}
}
@media (max-width: 640px) and (max-height: 720px){
  .vhero-foot{ display:none; }
  .hero-cta{ margin-bottom: 0; }
}