/* ============ Mad Smokes — site additions on top of kit.css ============ */
@import url("./kit.css");

html, body { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Logo: oversized only on home, normal in-header elsewhere */
.brand-center img {
  height: 48px !important;
  width: auto !important;
  margin-top: 0 !important;
  display: block;
  transition: height var(--dur-3) var(--ease-out);
}
/* On home: bigger but constrained so it never overlaps the tools cluster.
   max-width caps the wordmark width even when height could push wider. */
body[data-route="home"] .brand-center img {
  height: 110px !important;
  max-width: min(46vw, 520px) !important;
  width: auto !important;
  object-fit: contain;
  margin-top: 6px !important;
}
@media (min-width: 1100px) {
  body[data-route="home"] .brand-center img { height: 130px !important; }
}

/* Header layout: nav (left), logo (center), tools (right) */
.site-header .shell.header-grid {
  grid-template-columns: auto 1fr auto !important;
}
.nav-left { justify-self: start !important; }
.header-tools { justify-self: end !important; flex-wrap: nowrap; gap: 10px; }
.age-chip { white-space: nowrap; }

/* Make sure the tools cluster always paints above the absolute logo on home. */
body[data-route="home"] .header-tools { position: relative; z-index: 70; }

/* ----- Top notice bar ----- */
.notice { letter-spacing: .18em; }

/* ----- Header tweaks ----- */
.site-header { height: 64px; }
.nav-left { display: flex; gap: 20px; }
.nav a { cursor: pointer; }

/* ----- Buttons additions ----- */
.btn-ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-soft); }
.btn-acid-outline { background: transparent; color: var(--acid); border-color: var(--acid); box-shadow: 3px 3px 0 var(--acid); }
.btn-acid-outline:hover { background: var(--acid); color: var(--ink); }

/* ----- Hero variations ----- */
/* Poster hero — 3 tile layout */
.hero-poster-tiles {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  margin: 40px 0 112px;
  align-items: stretch;
  /* Hero height — left tile and right stack both fill this */
  min-height: clamp(720px, 86vh, 960px);
}
.hero-poster-tiles .hp-left {
  background: var(--acid); color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sticker-lg);
  padding: clamp(36px, 3.4vw, 60px) clamp(32px, 3.2vw, 56px);
  position: relative; overflow: hidden;
  transform: rotate(-1deg);
  display: flex; flex-direction: column; justify-content: center;
  container-type: inline-size;
}
.hero-poster-tiles .hp-left::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: .12; pointer-events: none;
}
.hero-poster-tiles .hp-left .eyebrow {
  display: inline-block; align-self: flex-start;
  background: var(--ink); color: var(--acid);
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .18em;
  padding: 6px 12px; border-radius: 999px; text-transform: uppercase;
  position: relative; z-index: 2;
}
.hero-poster-tiles .hp-left h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 13cqi, 112px);
  line-height: .85; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink); margin: 16px 0 0;
  text-shadow: 6px 6px 0 var(--bone);
  position: relative; z-index: 2;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: nowrap;
}
.hero-poster-tiles .hp-left .lead {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(15px, 2.1cqi, 20px);
  max-width: 92%; margin: 22px 0 28px;
  color: var(--ink); position: relative; z-index: 2;
  text-wrap: pretty;
}
.hero-poster-tiles .hp-left .cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 2;
}

.hero-poster-tiles .hp-right-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;   /* TV and comic equal height */
  gap: 36px;
  container-type: inline-size;
  min-height: 0;
}

/* Right top — TV mini (replaces former red price tile) */
.hero-poster-tiles .hp-tv {
  display: flex; align-items: center; justify-content: center;
  transform: rotate(1.5deg);
  filter: drop-shadow(8px 8px 0 var(--bone)) drop-shadow(10px 10px 0 var(--ink));
  position: relative;
  min-height: 0;
}
.hero-poster-tiles .hp-tv .hp-tv-tape {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 5;
  margin-top: 0;
  font-size: 12px;
  padding: 6px 16px;
  white-space: nowrap;
}
.hero-poster-tiles .hp-tv .tv-screen {
  width: 100%; height: 100%;
  aspect-ratio: auto;            /* fill the row, don't enforce 4:3 */
  transform: none;
  border-radius: 18px;
}
.hero-poster-tiles .hp-tv .tv-play {
  width: 72px; height: 72px;
  border-width: 3px;
}
.hero-poster-tiles .hp-tv .tv-caption {
  font-size: clamp(10px, .9vw, 13px);
  bottom: 44px;
  padding: 7px 10px;
  max-width: 84%;
}
.hero-poster-tiles .hp-tv .tv-chrome {
  top: 16px; left: 16px; right: 16px; font-size: 10px;
}
.hero-poster-tiles .hp-tv .tv-bottom {
  bottom: 16px; left: 16px; right: 16px; font-size: 9px;
}
.hero-poster-tiles .hp-tv .tv-screen::before { inset: 10px; border-radius: 12px; }

/* Right top — red $30 starting tile (legacy, kept for fallback) */
.hero-poster-tiles .hp-price {
  background: var(--blood); color: var(--bone);
  border: 2px solid var(--ink);
  box-shadow:
    10px 10px 0 var(--bone),
    10px 10px 0 2px var(--ink);
  transform: rotate(2deg);
  padding: 28px 32px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  font-family: var(--font-display); text-transform: uppercase;
  position: relative; overflow: hidden;
}
.hero-poster-tiles .hp-price .strike {
  text-decoration: line-through; opacity: .75;
  font-size: 28px; line-height: 1;
}
.hero-poster-tiles .hp-price .num {
  font-family: var(--font-display);
  font-size: clamp(88px, 28cqi, 200px);
  line-height: .85; letter-spacing: -.03em;
  margin-top: 6px;
  text-shadow: 6px 6px 0 var(--ink);
}
.hero-poster-tiles .hp-price .lbl {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 14px; letter-spacing: .22em;
  margin-top: 10px;
}

/* Right bottom — skull / comic tile */
.hero-poster-tiles .hp-skull {
  background: var(--acid);
  border: 2px solid var(--ink);
  /* No box-shadow — the green offset shadow is applied via filter below */
  transform: rotate(-1.5deg);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  align-self: stretch;
  filter: drop-shadow(-8px 8px 0 var(--acid-deep)) drop-shadow(-10px 10px 0 var(--ink));
}
.hero-poster-tiles .hp-skull::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: .12; pointer-events: none;
}
.hero-poster-tiles .hp-skull .skull {
  height: 92%;
  max-height: 460px;
  filter: drop-shadow(8px 8px 0 var(--ink));
  position: relative; z-index: 2;
}
.hero-poster-tiles .hp-skull .skull.wiggle { animation: smokeWiggle 5s ease-in-out infinite; }
@keyframes smokeWiggle {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-8px); }
}

@media (max-width: 860px) {
  .hero-poster-tiles { grid-template-columns: 1fr; }
  .hero-poster-tiles .hp-left { min-height: 0; }
  .hero-poster-tiles .hp-right-stack { grid-template-rows: auto auto; }
  .hero-poster-tiles .hp-skull { min-height: 360px; }
}

/* Legacy single-block poster styles (kept for back-compat with other variants) */
.hero-poster {
  background: var(--acid); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: var(--shadow-sticker-lg);
  padding: 64px 56px 80px; position: relative; overflow: hidden;
  transform: rotate(-1deg); margin: 28px 0 56px;
}
.hero-poster .eyebrow {
  display: inline-block; background: var(--ink); color: var(--acid);
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .18em;
  padding: 6px 12px; border-radius: 999px; text-transform: uppercase;
}
.hero-poster h1 {
  font-family: var(--font-display); font-size: clamp(64px, 11vw, 168px);
  line-height: .82; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink); margin: 18px 0 0;
  text-shadow: 6px 6px 0 var(--bone);
  position: relative; z-index: 2;
}
.hero-poster .lead {
  font-family: var(--font-ui); font-weight: 600; font-size: 19px;
  max-width: 540px; margin: 24px 0 32px; color: var(--ink); position: relative; z-index: 2;
}
.hero-poster .cta-row { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; }
.hero-poster .skull {
  position: absolute; right: -40px; bottom: -50px; height: 460px; opacity: .95;
  filter: drop-shadow(8px 8px 0 var(--ink));
  pointer-events: auto;
  z-index: 1;
  transition: transform var(--dur-3) var(--ease-snap);
}
.hero-poster .skull.wiggle { animation: smokeWiggle 5s ease-in-out infinite; }
@keyframes smokeWiggle {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-8px); }
}
.hero-poster::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: .12; pointer-events: none;
}
.hero-poster .price-stamp {
  position: absolute; top: 36px; right: 56px;
  background: var(--blood); color: var(--bone); border: 2px solid var(--ink);
  padding: 12px 18px; font-family: var(--font-display); font-size: 18px;
  text-transform: uppercase; transform: rotate(8deg);
  box-shadow: var(--shadow-sticker);
  z-index: 3;
}
.hero-poster .price-stamp .num {
  font-family: var(--font-display); font-size: 36px; display: block; line-height: 1;
  letter-spacing: -.02em;
}
.hero-poster .price-stamp .strike {
  text-decoration: line-through; opacity: .7; font-size: 14px;
}

/* Hero variant: photo flat-lay (placeholder) */
.hero-flat {
  background: var(--bone-warm); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-sticker-lg);
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 28px 0 56px; min-height: 480px; overflow: hidden;
}
.hero-flat .left { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.hero-flat h1 {
  font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px);
  line-height: .9; text-transform: uppercase; color: var(--ink); margin: 0;
  text-shadow: 4px 4px 0 var(--acid);
}
.hero-flat .right {
  background: linear-gradient(135deg, var(--bone-warm), var(--bone-shadow));
  display: flex; align-items: center; justify-content: center;
  border-left: 2px solid var(--ink); position: relative;
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 18px 18px;
}
.hero-flat .right .stack-img {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 32px;
  width: 100%;
}
.hero-flat .product-tile {
  background: var(--bone); border: 2px solid var(--ink); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sticker-sm);
}
.hero-flat .product-tile img { height: 60%; }

/* Hero variant: huge mascot */
.hero-mascot {
  background: var(--ink); color: var(--bone);
  border: 2px solid var(--bone); box-shadow: var(--shadow-sticker-lg);
  padding: 48px 48px 0; position: relative; overflow: hidden;
  margin: 28px 0 56px; min-height: 540px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  gap: 32px;
}
.hero-mascot h1 {
  font-family: var(--font-display); font-size: clamp(72px, 12vw, 200px);
  line-height: .82; text-transform: uppercase; color: var(--acid); margin: 0;
  text-shadow: 6px 6px 0 var(--bone);
  -webkit-text-stroke: 2px var(--bone);
}
.hero-mascot .lead { color: var(--bone); max-width: 480px; margin: 22px 0 28px; font-size: 18px; font-weight: 600; }
.hero-mascot .skull-big {
  height: 540px; align-self: end; justify-self: end;
  filter: drop-shadow(10px 10px 0 var(--bone));
}

/* ----- Marquee variations ----- */
.poster-band { padding: 18px 0; }
.poster-band .marquee { font-size: 36px; gap: 56px; }
.poster-band.acid { background: var(--acid); }
.poster-band.acid .marquee { color: var(--ink); -webkit-text-stroke: 0; }
.poster-band.bone { background: var(--bone); }
.poster-band.bone .marquee { color: var(--ink); -webkit-text-stroke: 0; }
.poster-band.ember { background: var(--ember); }
.poster-band.ember .marquee { color: var(--ink); -webkit-text-stroke: 0; }

/* ----- Section headers ----- */
.section-head h2 { font-size: 64px; line-height: .9; letter-spacing: -.01em; }
.section-head .sticker-tag {
  background: var(--acid); color: var(--ink); border: 2px solid var(--ink);
  padding: 4px 12px; font-family: var(--font-ui); font-weight: 700;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: var(--shadow-sticker-sm); transform: rotate(-2deg);
  display: inline-block; margin-bottom: 10px;
}

/* ----- Search ----- */
.search-bar {
  display: flex; align-items: center; gap: 12px; background: var(--bone);
  border: 2px solid var(--ink); padding: 14px 18px;
  box-shadow: var(--shadow-sticker-sm); border-radius: 4px;
}
.search-bar input {
  flex: 1; border: 0; background: transparent; outline: 0;
  font-family: var(--font-ui); font-weight: 500; font-size: 16px; color: var(--ink);
}
.search-bar input::placeholder { color: var(--smoke-300); }
.search-bar .key {
  font-family: var(--font-mono); font-size: 11px; color: var(--smoke-400);
  border: 1px solid var(--smoke-200); padding: 2px 6px; border-radius: 2px;
}

/* ----- Product card detail ----- */
.product .strength {
  display: inline-flex; gap: 3px; align-items: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--smoke-400);
  text-transform: uppercase; letter-spacing: .1em;
  margin-top: 4px;
}
.product .bars { display: inline-flex; gap: 2px; }
.product .bars span {
  width: 8px; height: 10px; background: var(--smoke-200); border: 1px solid var(--ink);
}
.product .bars span.on { background: var(--ink); }
.product .pack-info { font-family: var(--font-mono); font-size: 11px; color: var(--smoke-400); }
.product .img { aspect-ratio: 1; }

/* List view */
.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-list .product {
  display: grid; grid-template-columns: 100px 1fr auto auto; gap: 18px; align-items: center;
  background: var(--bone); border: 2px solid var(--ink); padding: 14px 18px;
  box-shadow: var(--shadow-sticker-sm); border-radius: 4px; color: var(--ink);
}
.shop-list .product .img { aspect-ratio: 1; width: 100px; margin: 0; }

/* 3-up density */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* ----- Sticker decorations ----- */
.deco-sticker {
  position: absolute;
  background: var(--acid); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--font-display); font-size: 14px; padding: 8px 12px;
  box-shadow: var(--shadow-sticker-sm); text-transform: uppercase;
  pointer-events: none; z-index: 5;
}
.deco-sticker.bone { background: var(--bone); }
.deco-sticker.ember { background: var(--ember); color: var(--bone); }
.deco-sticker.blood { background: var(--blood); color: var(--bone); }

/* ----- PDP ----- */
.pdp { grid-template-columns: 1.2fr 1fr; gap: 56px; margin-top: 32px; }
.pdp .gallery {
  background: var(--bone-warm); border: 2px solid var(--ink); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sticker-lg);
  position: relative; overflow: hidden;
}
.pdp .gallery::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 12px 12px; opacity: .12;
}
.pdp .gallery img {
  height: 70%;
  filter: drop-shadow(6px 6px 0 var(--ink));
  transition: transform var(--dur-3) var(--ease-snap);
  position: relative; z-index: 1;
}
.pdp .gallery:hover img { transform: rotate(2deg) scale(1.05); }
.pdp .thumbs { display: flex; gap: 10px; margin-top: 14px; }
.pdp .thumbs .thumb {
  background: var(--bone-warm); border: 2px solid var(--ink); width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-sticker-sm);
}
.pdp .thumbs .thumb img { height: 60%; }
.pdp .thumbs .thumb.active { border-color: var(--acid); box-shadow: var(--shadow-sticker-acid); }

.pdp h1 { font-size: 64px; }
.pdp .breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--smoke-300); text-transform: uppercase; letter-spacing: .12em; }
.pdp .breadcrumb a { color: var(--smoke-300); }
.pdp .breadcrumb a:hover { color: var(--acid); }

.spec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--ink-soft); border: 2px solid var(--ink-2); padding: 18px;
  border-radius: 4px; margin-top: 16px;
}
.spec-grid .spec { display: flex; flex-direction: column; gap: 4px; }
.spec-grid dt {
  font-family: var(--font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.spec-grid dd {
  font-family: var(--font-mono); font-size: 14px; color: var(--bone); margin: 0;
  font-weight: 700;
}
.spec-grid .strength-bars { display: inline-flex; gap: 3px; }
.spec-grid .strength-bars span {
  width: 12px; height: 16px; background: var(--ink-2); border: 1px solid var(--bone);
}
.spec-grid .strength-bars span.on { background: var(--acid); }

.qty-stepper {
  display: inline-flex; align-items: stretch; border: 2px solid var(--ink);
  background: var(--bone); border-radius: 4px; box-shadow: var(--shadow-sticker-sm);
}
.qty-stepper button {
  background: transparent; border: 0; width: 44px; cursor: pointer;
  font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--ink);
}
.qty-stepper button:hover { background: var(--acid); }
.qty-stepper input {
  width: 56px; text-align: center; border: 0; border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink); font-family: var(--font-mono); font-weight: 700;
  font-size: 16px; background: var(--bone); color: var(--ink);
}

.pdp .stock-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase;
}
.stock-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--success); display: inline-block; }
.stock-dot.low { background: var(--ember); }
.stock-dot.out { background: var(--blood); }

/* Reviews */
.reviews { margin-top: 64px; }
.reviews-summary { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.review-big { font-family: var(--font-display); font-size: 96px; line-height: 1; color: var(--acid); margin: 0; }
.review-bars { display: flex; flex-direction: column; gap: 6px; }
.review-bar-row { display: grid; grid-template-columns: 32px 1fr 40px; align-items: center; gap: 10px; }
.review-bar-row .bar { background: var(--ink-2); border: 1px solid var(--ink); height: 12px; position: relative; }
.review-bar-row .bar .fill { background: var(--acid); height: 100%; }
.review-bar-row .num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

.review-card {
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-sticker-sm); border-radius: 4px;
  transform: rotate(-.4deg);
}
.review-card:nth-child(even) { transform: rotate(.4deg); }
.review-card .stars { color: var(--ember); font-family: var(--font-mono); font-size: 14px; letter-spacing: 2px; }
.review-card .who { font-family: var(--font-ui); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.review-card .when { font-family: var(--font-mono); font-size: 11px; color: var(--smoke-400); }
.review-card .title { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin: 8px 0 4px; }
.review-card .body { font-size: 13px; line-height: 1.55; color: var(--smoke-500); }

/* Cross-sell */
.cross-sell { margin-top: 80px; }
.cross-sell h3 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; margin: 0 0 18px; color: var(--bone); }

/* ----- Brand pillars / about ----- */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 64px 0 128px;
}
/* Bumper spacing — give the "Why we're cheaper" section breathing room */
.section-head:has(+ .pillars) { margin-top: 112px; }

/* Generous vertical rhythm for ALL major home sections */
.section-head { margin: 96px 0 32px !important; }
.grid-3, .grid-4 { margin-bottom: 96px; }
.mini-banner { margin: 128px 0 !important; }
.brand-strip { margin: 32px 0 128px !important; }
.promo-strip { margin: 128px 0 64px !important; }
.hero-poster-tiles { margin: 28px 0 112px !important; }
.poster-band { margin: 64px 0; }
.pillar {
  background: var(--ink-soft); border: 2px solid var(--ink-2); padding: 28px;
  border-radius: 4px; position: relative;
}
.pillar:nth-child(2) { background: var(--acid); color: var(--ink); border-color: var(--ink); transform: rotate(-1deg); box-shadow: var(--shadow-sticker); }
.pillar h3 { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; margin: 0 0 8px; }
.pillar p { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.pillar:nth-child(2) p { color: var(--ink-2); }
.pillar .num { font-family: var(--font-mono); font-size: 12px; color: var(--smoke-300); position: absolute; top: 18px; right: 18px; letter-spacing: .12em; }
.pillar:nth-child(2) .num { color: var(--ink-2); }

/* ----- Brands strip ----- */
.brand-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin: 32px 0 64px;
}
.brand-card {
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sticker-sm);
  font-family: var(--font-display); font-size: 22px; text-transform: uppercase;
  cursor: pointer; transition: transform var(--dur-2) var(--ease-snap);
  border-radius: 4px;
}
.brand-card:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: var(--shadow-sticker); background: var(--acid); }
.brand-card .count { font-family: var(--font-mono); font-size: 11px; color: var(--smoke-400); display: block; margin-top: 4px; font-weight: 400; }

/* ----- FAQ ----- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 4px; box-shadow: var(--shadow-sticker-sm);
  overflow: hidden;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px 22px; cursor: pointer; user-select: none;
}
.faq-q .q-text { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; line-height: 1.1; }
.faq-q .chevron { font-family: var(--font-mono); font-size: 22px; transition: transform var(--dur-2) var(--ease-snap); }
.faq-item.open .chevron { transform: rotate(45deg); }
.faq-a { padding: 0 22px 20px; font-size: 14px; line-height: 1.6; color: var(--smoke-500); display: none; }
.faq-item.open .faq-a { display: block; }

/* ----- Account / order tracking ----- */
.account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 32px; margin-top: 32px; }
.account-nav { display: flex; flex-direction: column; gap: 6px; }
.account-nav a {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; padding: 12px 14px; color: var(--bone);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  border-radius: 4px;
}
.account-nav a:hover { background: var(--ink-soft); }
.account-nav a.active { background: var(--acid); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sticker-sm); }

.order-row {
  background: var(--ink-soft); border: 2px solid var(--ink-2); padding: 18px;
  border-radius: 4px; margin-bottom: 12px;
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 18px;
}
.order-row .order-id { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--bone); }
.order-row .order-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.order-row .status {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 999px;
}
.status.delivered { background: var(--bone); color: var(--ink); }
.status.shipped { background: var(--acid); color: var(--ink); }
.status.processing { background: var(--ember); color: var(--ink); }

/* Tracker timeline */
.tracker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 32px 0; position: relative;
}
.tracker-step {
  text-align: center; position: relative; padding: 24px 14px 18px;
}
.tracker-step .dot {
  width: 28px; height: 28px; border-radius: 999px; background: var(--ink-soft);
  border: 2px solid var(--ink-2); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-3);
}
.tracker-step.done .dot { background: var(--acid); border-color: var(--ink); color: var(--ink); }
.tracker-step.current .dot {
  background: var(--acid); border-color: var(--ink); color: var(--ink);
  box-shadow: 0 0 0 4px rgba(212,245,55,.25);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(212,245,55,.25); }
  50% { box-shadow: 0 0 0 10px rgba(212,245,55,.05); }
}
.tracker-step .label { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.tracker-step .when { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.tracker-line {
  position: absolute; top: 38px; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--ink-2); z-index: -1;
}
.tracker-line .fill { background: var(--acid); height: 100%; transition: width var(--dur-3); }

/* ----- Checkout ----- */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.checkout-steps {
  display: flex; gap: 0; margin-bottom: 28px; counter-reset: step;
  border: 2px solid var(--ink-2); border-radius: 4px; overflow: hidden;
}
.checkout-step {
  flex: 1; padding: 14px 18px; background: var(--ink-soft); cursor: pointer;
  border-right: 2px solid var(--ink-2); display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.checkout-step:last-child { border-right: 0; }
.checkout-step .step-num {
  width: 24px; height: 24px; border-radius: 999px; background: var(--ink-2); color: var(--fg-3);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: 11px; flex: 0 0 24px;
}
.checkout-step.active { background: var(--acid); color: var(--ink); }
.checkout-step.active .step-num { background: var(--ink); color: var(--acid); }
.checkout-step.done { color: var(--bone); }
.checkout-step.done .step-num { background: var(--bone); color: var(--ink); }

.checkout-form { display: grid; gap: 16px; }
.checkout-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-form .row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.checkout-form fieldset {
  border: 2px solid var(--ink-2); padding: 22px; border-radius: 4px; margin: 0;
}
.checkout-form legend {
  font-family: var(--font-display); font-size: 22px; text-transform: uppercase;
  color: var(--bone); padding: 0 8px;
}

.summary-card {
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  padding: 22px; box-shadow: var(--shadow-sticker); border-radius: 4px;
  position: sticky; top: 88px;
}
.summary-card h4 { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; margin: 0 0 14px; }
.summary-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--smoke-200); }
.summary-line:last-child { border-bottom: 0; }
.summary-line .l { font-family: var(--font-ui); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.summary-line .v { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.summary-line.total .l { font-size: 15px; }
.summary-line.total .v { font-size: 22px; color: var(--ink); }

.payment-method {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.payment-method label {
  flex: 1; min-width: 180px; cursor: pointer; padding: 16px;
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 4px; box-shadow: var(--shadow-sticker-sm);
  display: flex; align-items: center; gap: 12px;
}
.payment-method label.active { background: var(--acid); }
.payment-method label input { accent-color: var(--ink); }
.payment-method .pm-name { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.payment-method .pm-sub { font-family: var(--font-mono); font-size: 11px; color: var(--smoke-500); }

/* ----- Confirmation ----- */
.confirm-card {
  background: var(--acid); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: var(--shadow-sticker-lg); padding: 56px 48px;
  text-align: center; position: relative; overflow: hidden;
  margin: 56px auto; max-width: 720px; transform: rotate(-.5deg);
}
.confirm-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 16px 16px; opacity: .1; pointer-events: none;
}
.confirm-card h1 { font-family: var(--font-display); font-size: 80px; line-height: .9; text-transform: uppercase; margin: 0; color: var(--ink); text-shadow: 4px 4px 0 var(--bone); }
.confirm-card .skull { height: 120px; margin: 0 auto 18px; display: block; filter: drop-shadow(4px 4px 0 var(--ink)); }
.confirm-card p { font-family: var(--font-ui); font-weight: 600; color: var(--ink); font-size: 16px; max-width: 480px; margin: 16px auto; }
.confirm-card .order-num {
  display: inline-block; background: var(--ink); color: var(--acid);
  font-family: var(--font-mono); font-weight: 700; padding: 10px 18px;
  border: 2px solid var(--ink); margin-top: 14px; letter-spacing: .12em;
}

/* ----- Cursor mascot ----- */
.cursor-skull {
  position: fixed; pointer-events: none; z-index: 200;
  width: 40px; height: 40px; transform: translate(-50%, -50%);
  transition: opacity var(--dur-3) ease;
  opacity: 0;
}
body.fun-mode .cursor-skull { opacity: .85; }
.cursor-skull img { width: 100%; height: 100%; }

/* ----- Skull rain easter egg ----- */
.skull-rain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden;
}
.skull-rain .drop {
  position: absolute; top: -10vh; width: 60px; height: 60px;
  animation: drop linear forwards;
}
@keyframes drop {
  to { transform: translateY(120vh) rotate(360deg); }
}
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, -6px); }
  80% { transform: translate(4px, 6px); }
}
body.shake { animation: shake .4s ease-out; }

/* ----- Confetti smoke puff ----- */
.smoke-puff {
  position: fixed; pointer-events: none; z-index: 1000;
  width: 80px; height: 80px;
}
.smoke-puff span {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-radius: 999px; background: var(--acid); border: 1px solid var(--ink);
  animation: puff .9s ease-out forwards;
}
@keyframes puff {
  to { transform: translate(var(--dx, 30px), var(--dy, -40px)) scale(0); opacity: 0; }
}

/* ----- Eye spin (inline svg) ----- */
.spin-slow { animation: rotate 8s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

/* ----- Page intro ----- */
.page-title {
  font-family: var(--font-display); font-size: 88px; line-height: .9;
  text-transform: uppercase; color: var(--bone); margin: 32px 0 8px;
  letter-spacing: -.01em;
}
.page-title em { font-style: normal; color: var(--acid); }
.page-sub { font-family: var(--font-ui); font-weight: 500; font-size: 16px; color: var(--fg-2); max-width: 600px; }

/* ----- Theme: bone-light ----- */
body.theme-bone {
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-2: var(--smoke-500);
  --fg-3: var(--smoke-400);
  --bg-elev-1: var(--bone-warm);
  --bg-elev-2: var(--bone-shadow);
  background: var(--bone);
}
body.theme-bone .site-header { background: var(--bone); border-bottom-color: var(--ink); }
body.theme-bone .nav a { color: var(--ink); }
body.theme-bone .nav a:hover { color: var(--blood); }
body.theme-bone .icon-btn { color: var(--ink); }
body.theme-bone .section-head h2 { color: var(--ink); }
body.theme-bone .pdp h1 { color: var(--ink); }
body.theme-bone .hero-mascot { background: var(--bone); color: var(--ink); border-color: var(--ink); }
body.theme-bone .hero-mascot h1 { color: var(--ink); -webkit-text-stroke: 0; text-shadow: 6px 6px 0 var(--acid); }
body.theme-bone .hero-mascot .lead { color: var(--ink-2); }
body.theme-bone .hero-mascot .skull-big { filter: drop-shadow(10px 10px 0 var(--ink)); }
body.theme-bone .pillar { background: var(--bone-warm); border-color: var(--ink-2); color: var(--ink); }
body.theme-bone .pillar p { color: var(--smoke-500); }
body.theme-bone .pillar .num { color: var(--smoke-400); }
body.theme-bone .checkout-step { background: var(--bone-warm); color: var(--smoke-500); }
body.theme-bone .checkout-step.done { color: var(--ink); }
body.theme-bone .order-row { background: var(--bone-warm); border-color: var(--ink-2); color: var(--ink); }
body.theme-bone .order-row .order-id { color: var(--ink); }
body.theme-bone .account-nav a { color: var(--ink); }
body.theme-bone .site-footer { background: var(--bone-warm); color: var(--smoke-500); }
body.theme-bone .site-footer h5 { color: var(--ink); }
body.theme-bone .site-footer a { color: var(--smoke-500); }
body.theme-bone .review-big { color: var(--ember); }
body.theme-bone .cross-sell h3 { color: var(--ink); }
body.theme-bone .page-title { color: var(--ink); }

/* Theme: ember accent */
body.theme-ember { --acid: var(--ember); --acid-bright: #FF7A3F; --acid-deep: #C7401A; --action: var(--ember); --fg-accent: var(--ember); --border-acid: var(--ember); }
body.theme-ember .review-big { color: var(--ember); }

/* Hide nav on small screens — but design width 1280, ignore */

/* Smooth nav active */
.nav a.active { color: var(--acid); }

/* CTA button when sticker */
.btn-sticker {
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--font-display); font-size: 18px; padding: 12px 22px;
  text-transform: uppercase; box-shadow: var(--shadow-sticker);
  cursor: pointer; transition: transform var(--dur-2) var(--ease-snap);
  letter-spacing: .02em;
}
.btn-sticker:hover { transform: rotate(-2deg) translateY(-2px); }

/* Promo strip */
.promo-strip {
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink);
  padding: 18px 24px; box-shadow: var(--shadow-sticker-sm); border-radius: 4px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  margin: 64px 0 24px;
}
.promo-strip h3 { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; margin: 0; line-height: 1; }
.promo-strip p { font-family: var(--font-ui); font-size: 13px; color: var(--smoke-500); margin: 6px 0 0; }

/* Scroll-only: poster sticky-ish */
.shop-toolbar {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  margin: 32px 0 24px;
}

/* mini banner */
.mini-banner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 2px solid var(--ink); box-shadow: var(--shadow-sticker); margin: 64px 0;
}
.mini-banner .left, .mini-banner .right { padding: 36px 32px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.mini-banner .left { background: var(--ink); color: var(--bone); }
.mini-banner .right { background: var(--acid); color: var(--ink); border-left: 2px solid var(--ink); }
.mini-banner h3 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; margin: 0 0 6px; line-height: .95; }
.mini-banner p { font-size: 14px; max-width: 320px; }
.mini-banner .right p { color: var(--ink-2); }

/* The "MAD" wordmark big repeating */
.wordmark-strip {
  background: var(--ink); border-top: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  padding: 8px 0; overflow: hidden;
}
.wordmark-strip .row {
  display: flex; gap: 28px; white-space: nowrap; align-items: center;
  font-family: var(--font-display); font-size: 60px; line-height: 1;
  color: var(--bone); -webkit-text-stroke: 2px var(--bone); -webkit-text-fill-color: transparent;
  animation: scroll 28s linear infinite;
}
.wordmark-strip .row .star { color: var(--acid); -webkit-text-stroke: 0; -webkit-text-fill-color: var(--acid); }

/* ----- Deal of the Week strip ----- */
.deal-strip {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  background: var(--ink-soft); color: var(--bone);
  border: 2px solid var(--bone);
  box-shadow: 8px 8px 0 var(--acid);
  margin: 112px 0; min-height: 320px;
  position: relative;
}
.deal-left {
  padding: 36px 36px 36px 40px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px;
  position: relative; z-index: 2;
}
.deal-pricerow {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin: 4px 0 2px;
}
.deal-headline {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 120px);
  line-height: .9;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--acid);
}
.deal-headline span {
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--bone);
  margin-left: 4px;
  font-weight: 400;
  font-family: var(--font-mono);
}
.deal-was {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--smoke-400);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ember);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.deal-blurb { font-size: 15px; line-height: 1.55; max-width: 480px; margin: 0; color: var(--fg-2); }
.deal-blurb strong {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; font-size: 17px; letter-spacing: 0.02em;
  color: var(--bone);
  display: block; margin-bottom: 4px;
}
.deal-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-2);
}
.deal-meta span { display: inline-flex; align-items: center; gap: 6px; }
.deal-meta i { width: 14px; height: 14px; color: var(--acid); }

.deal-right {
  position: relative;
  background: var(--acid);
  border-left: 2px solid var(--bone);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  min-height: 320px;
}
.deal-right::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(10,10,7,0.08) 14px 16px);
  pointer-events: none;
}
.deal-skull {
  width: 200px; height: 200px;
  filter: drop-shadow(4px 4px 0 var(--ink));
  position: relative; z-index: 1;
  transform: rotate(-6deg);
}
.deal-stamp {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--ember); color: var(--bone);
  border: 2px solid var(--ink);
  padding: 8px 12px;
  font-family: var(--font-display); font-size: 14px;
  text-transform: uppercase; line-height: 1.05; letter-spacing: 0.04em;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 3;
  text-align: center;
}
@media (max-width: 760px) {
  .deal-strip { grid-template-columns: 1fr; }
  .deal-right { min-height: 240px; border-left: 0; border-top: 2px solid var(--bone); }
}

/* Theme: bone variant */
body.theme-bone .deal-strip { background: var(--bone); color: var(--ink); border-color: var(--ink); box-shadow: 8px 8px 0 var(--ember); }
body.theme-bone .deal-headline { color: var(--ink); }
body.theme-bone .deal-headline span { color: var(--ink-2); }
body.theme-bone .deal-blurb { color: var(--ink-2); }
body.theme-bone .deal-blurb strong { color: var(--ink); }
body.theme-bone .deal-meta { color: var(--ink-2); }
body.theme-bone .deal-meta i { color: var(--ink); }
body.theme-bone .deal-right { border-left-color: var(--ink); }