/* ─────────────────────────────────────────────────────────────────
   Needoh Drop Shop — marker / sticker creative overhaul.
   Layered on top of styles.css. Higher specificity overrides where
   needed; otherwise additive.
   Aesthetic: marker-pen outlines, sticker tape, sketchbook paper feel,
   tilt-card grid, doodle mascots floating in margins, marker-stroke
   highlights under key headline words.
   ───────────────────────────────────────────────────────────────── */

/* Marker font for accents — uses common system fallbacks; the actual
   "Comic Sans"/"Chalkboard" feel is the marker stroke + tilt + irregular
   layout, not a webfont. Keeps zero-dep. */
:root {
  --marker-font: "Comic Sans MS", "Chalkboard SE", "Marker Felt",
                 "Bradley Hand", system-ui, sans-serif;
  --paper-bg: #fff8e8;
  --ink-dark: #1a0930;
  --hl-yellow: #ffd84a;
  --hl-pink: #ff7eb6;
  --hl-cyan: #7df9ff;
  --hl-violet: #9d6bff;
  --hl-orange: #ffae42;
  --hl-green: #8af2a4;
}

/* ── tape strip helper ─────────────────────────────────────────────── */

[data-tape] {
  position: relative;
}
[data-tape]::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 64px;
  height: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18) 60%, rgba(255,255,255,0.45)),
    var(--tape-color, var(--hl-yellow));
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: 3px;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.45);
  opacity: 0.92;
  z-index: 4;
  pointer-events: none;
}
[data-tape="left"]::before  { left: 18%; transform: translateX(-50%) rotate(-7deg); }
[data-tape="right"]::before { left: 82%; transform: translateX(-50%) rotate(6deg); }

/* ── shared sticker/sketch chrome ──────────────────────────────────── */

.sketch-frame {
  position: relative;
  border: 2.5px solid var(--ink-dark);
  border-radius: 18px;
  background: var(--paper-bg);
  box-shadow: 6px 8px 0 0 var(--ink-dark);
}

.sketch-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed rgba(26,9,48,0.25);
  border-radius: 14px;
  pointer-events: none;
}

/* ── pricebar redesign ─────────────────────────────────────────────── */

.pricebar {
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 12px,
      transparent 12px, transparent 24px),
    linear-gradient(96deg, var(--hl-pink) 0%, var(--hl-violet) 50%, var(--hl-cyan) 100%);
  border-bottom: 3px solid var(--ink-dark);
  padding: 10px 14px;
}
.pricebar-inner {
  align-items: center;
  gap: 14px;
}
.pricebar-tag {
  font-family: var(--marker-font);
  font-weight: 800;
  font-size: 16px;
  background: var(--paper-bg);
  color: var(--ink-dark);
  padding: 4px 12px;
  border-radius: 999px;
  border: 2.4px solid var(--ink-dark);
  transform: rotate(-3deg);
  box-shadow: 2px 3px 0 var(--ink-dark);
  letter-spacing: 0.02em;
}
.pricebar-tier {
  font-family: var(--marker-font);
  font-weight: 700;
  color: var(--ink-dark);
  font-size: 15px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.78);
  border-radius: 12px;
  border: 2px solid var(--ink-dark);
}
.pricebar-tier strong {
  background: linear-gradient(96deg, #ff5b8a, #ffae42);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
  margin-left: 2px;
}
.pricebar-arrow {
  display: inline-block;
  font-family: var(--marker-font);
  font-size: 22px;
  color: var(--ink-dark);
  font-weight: 800;
  transform: translateY(-2px) rotate(-4deg);
}
.pricebar-meta {
  margin-left: auto;
  font-family: var(--marker-font);
  color: var(--ink-dark);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.10em;
  background: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border: 1.6px dashed var(--ink-dark);
  border-radius: 8px;
}

/* ── topbar — sketchbook style ─────────────────────────────────────── */

.topbar {
  background: rgba(10, 4, 24, 0.6);
  border-bottom: 2.5px solid rgba(255,255,255,0.10);
}
.topnav a {
  font-family: var(--marker-font);
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: #ffd6ec;
  padding: 5px 12px;
  border-radius: 14px;
  transform: rotate(-1deg);
  transition: transform 180ms cubic-bezier(.2,.7,.2,1.4),
              background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.topnav a:hover {
  transform: rotate(2deg) translateY(-1px);
  background: var(--hl-pink);
  color: #1a0930;
  border-color: var(--ink-dark);
  box-shadow: 0 4px 0 0 var(--ink-dark);
}
.topnav a:nth-child(2) { transform: rotate(1deg); }
.topnav a:nth-child(3) { transform: rotate(-2deg); }

.cart-pill {
  font-family: var(--marker-font);
  font-weight: 800;
  font-size: 14px;
  background: linear-gradient(96deg, var(--hl-yellow), var(--hl-orange));
  color: var(--ink-dark);
  border: 2.4px solid var(--ink-dark);
  border-radius: 16px;
  box-shadow: 3px 4px 0 var(--ink-dark);
  padding: 6px 14px;
  transform: rotate(-2deg);
  transition: transform 180ms cubic-bezier(.2,.7,.2,1.4), box-shadow 200ms ease;
}
.cart-pill:hover {
  transform: rotate(0deg) translateY(-1px);
  box-shadow: 4px 6px 0 var(--ink-dark);
}
#cart-count {
  background: var(--ink-dark);
  color: var(--hl-yellow);
  border-radius: 999px;
  padding: 0 8px;
  font-weight: 900;
  margin: 0 4px;
  box-shadow: none;
}

/* ── hero — big marker headline + doodle anchors ───────────────────── */

.hero {
  position: relative;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(255,126,182,0.30), transparent 60%),
    radial-gradient(50% 70% at 92% 18%, rgba(125,249,255,0.28), transparent 60%),
    radial-gradient(50% 60% at 50% 110%, rgba(157,107,255,0.26), transparent 60%),
    var(--paper-bg);
  background-size: cover;
  border: 3px solid var(--ink-dark);
  border-radius: 22px;
  box-shadow: 8px 10px 0 0 var(--ink-dark);
  overflow: visible;
  isolation: isolate;
}
.hero::before {
  /* Sketchbook grid texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,9,48,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  border-radius: 19px;
}
.hero h1 {
  font-family: var(--marker-font);
  color: var(--ink-dark);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: var(--ink-dark);
  filter: none;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
}
/* Marker highlighter under "cash tomorrow" */
.hero h1 .hl-mark {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  z-index: 0;
}
.hero h1 .hl-mark::before {
  content: "";
  position: absolute;
  inset: 30% -4px 8% -4px;
  background: var(--hl-yellow);
  z-index: -1;
  border-radius: 10px;
  transform: skewX(-3deg) rotate(-1deg);
  opacity: 0.85;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.12);
}
.hero h1 .hl-pink::before  { background: var(--hl-pink); }
.hero h1 .hl-cyan::before  { background: var(--hl-cyan); }

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--marker-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dark);
  background: var(--hl-pink);
  padding: 5px 12px;
  border: 2px solid var(--ink-dark);
  border-radius: 999px;
  transform: rotate(-2deg);
  box-shadow: 2px 3px 0 var(--ink-dark);
  text-shadow: none;
}
.hero-sub {
  font-family: system-ui, sans-serif;
  color: rgba(26,9,48,0.85);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  max-width: 580px;
}
.hero-sub strong {
  background: var(--hl-yellow);
  padding: 0 6px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-dark);
  margin: 0 2px;
}
.hero-ctas { gap: 12px; }
.hero .btn-primary {
  font-family: var(--marker-font);
  font-weight: 900;
  font-size: 17px;
  padding: 12px 22px;
  border-radius: 16px;
  background: linear-gradient(96deg, var(--hl-pink) 0%, var(--hl-yellow) 100%);
  color: var(--ink-dark);
  border: 3px solid var(--ink-dark);
  box-shadow: 4px 5px 0 var(--ink-dark);
  text-transform: none;
  letter-spacing: 0.01em;
  transform: rotate(-1.5deg);
  transition: transform 180ms cubic-bezier(.2,.7,.2,1.4), box-shadow 180ms ease;
}
.hero .btn-primary:hover:not(:disabled) {
  transform: rotate(0) translateY(-2px);
  box-shadow: 5px 7px 0 var(--ink-dark);
  filter: none;
}
.hero .btn-ghost {
  font-family: var(--marker-font);
  font-weight: 800;
  background: var(--paper-bg);
  color: var(--ink-dark);
  border: 3px solid var(--ink-dark);
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 3px 4px 0 var(--ink-dark);
  transform: rotate(1.5deg);
  transition: transform 180ms cubic-bezier(.2,.7,.2,1.4);
}
.hero .btn-ghost:hover { transform: rotate(0) translateY(-2px); }

/* Hero stat strip → post-it pile */
.hero-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}
.hero-cell {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px !important;
  background: var(--paper-bg) !important;
  border: 2.5px solid var(--ink-dark) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--ink-dark);
  font-family: var(--marker-font);
  color: var(--ink-dark) !important;
  transform: rotate(-2deg);
}
.hero-cell:nth-child(2) { transform: rotate(1deg);  background: var(--hl-yellow) !important; }
.hero-cell:nth-child(3) { transform: rotate(-1deg); background: var(--hl-cyan) !important; }
.hero-cell:nth-child(4) { transform: rotate(2deg);  background: var(--hl-pink) !important; }
.hero-cell .k {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: rgba(26,9,48,0.65) !important;
  font-weight: 700;
}
.hero-cell .v {
  font-weight: 900;
  font-size: 18px;
  color: var(--ink-dark) !important;
}

/* Hero mascot mounts */
.hero-mascots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-mascots .ndo-mascot {
  position: absolute;
  display: block;
}
.hero-mascots .ndo-mascot--squee {
  right: 4%;
  top: 8%;
  width: clamp(96px, 10vw, 160px);
  animation: ndo-bob 4.4s ease-in-out infinite alternate;
}
.hero-mascots .ndo-mascot--zappy {
  right: 18%;
  bottom: -8%;
  width: clamp(72px, 7vw, 120px);
  transform: rotate(-10deg);
  animation: ndo-tilt 5.6s ease-in-out infinite alternate;
}
.hero-mascots .ndo-doodle-sparkles {
  position: absolute;
  top: 12%;
  left: 6%;
  width: 130px;
  opacity: 0.85;
}
@keyframes ndo-bob {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes ndo-tilt {
  0%   { transform: rotate(-12deg) translateY(0); }
  100% { transform: rotate(-3deg) translateY(-6px); }
}

/* ── spotlight (today's pick) — sticker poster ─────────────────────── */

.spotlight-card {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(255,255,255,0.20), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--card-bg) 55%, #1a0930), #0c0420 95%);
  border: 3px solid var(--ink-dark) !important;
  border-radius: 22px !important;
  box-shadow: 7px 9px 0 var(--ink-dark) !important;
}
.spotlight-card::before {
  filter: blur(48px) !important;
}
.spotlight-eyebrow {
  font-family: var(--marker-font);
  font-weight: 800;
  background: var(--hl-yellow) !important;
  color: var(--ink-dark) !important;
  -webkit-text-fill-color: var(--ink-dark) !important;
  display: inline-block;
  padding: 4px 10px !important;
  border: 2px solid var(--ink-dark);
  border-radius: 999px;
  transform: rotate(-3deg);
  box-shadow: 2px 3px 0 var(--ink-dark);
  font-size: 12px !important;
  align-self: flex-start;
}
.spotlight-name {
  font-family: var(--marker-font) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 2.6vw, 40px) !important;
  color: #fff;
}
.spotlight-ribbon {
  font-family: var(--marker-font);
  background: linear-gradient(96deg, var(--hl-yellow), var(--hl-orange)) !important;
  border: 2.4px solid var(--ink-dark) !important;
  color: var(--ink-dark) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  transform: rotate(4deg);
}
.spotlight-card .ndo-mascot--bloop {
  position: absolute;
  left: -36px;
  bottom: -28px;
  width: 130px;
  z-index: 5;
  transform: rotate(-12deg);
  animation: ndo-peek 3.8s ease-in-out infinite alternate;
}
@keyframes ndo-peek {
  0%   { transform: rotate(-12deg) translateY(0); }
  100% { transform: rotate(-4deg) translateY(-4px); }
}

/* ── shop section header — sketchbook ─────────────────────────────── */

.shop .section-head { position: relative; }
.shop .section-head h2 {
  font-family: var(--marker-font);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: var(--ink-dark);
  -webkit-text-fill-color: var(--ink-dark);
  background: none;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  display: inline-block;
}
.shop .section-head h2::after {
  /* squiggly underline */
  content: "";
  display: block;
  width: 100%;
  height: 14px;
  margin-top: 2px;
  background:
    radial-gradient(circle at 8% 60%, transparent 4px, var(--hl-pink) 4.5px, var(--hl-pink) 6px, transparent 6.5px),
    radial-gradient(circle at 28% 40%, transparent 4px, var(--hl-pink) 4.5px, var(--hl-pink) 6px, transparent 6.5px),
    radial-gradient(circle at 50% 60%, transparent 4px, var(--hl-pink) 4.5px, var(--hl-pink) 6px, transparent 6.5px),
    radial-gradient(circle at 72% 40%, transparent 4px, var(--hl-pink) 4.5px, var(--hl-pink) 6px, transparent 6.5px),
    radial-gradient(circle at 92% 60%, transparent 4px, var(--hl-pink) 4.5px, var(--hl-pink) 6px, transparent 6.5px);
  filter: blur(0.4px);
  opacity: 0.92;
}
.shop .section-head .muted {
  font-family: var(--marker-font);
  color: rgba(26,9,48,0.7);
  font-size: 14px;
  font-weight: 600;
}

/* Shop toolbar (search + sort) — paper-style */
.shop-toolbar {
  background: var(--paper-bg);
  border: 2.5px solid var(--ink-dark);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 4px 5px 0 var(--ink-dark);
}
.search {
  background: rgba(255,255,255,0.78);
  border: 2px solid var(--ink-dark);
  border-radius: 999px;
}
.search input {
  color: var(--ink-dark);
  font-family: var(--marker-font);
  font-weight: 600;
}
.search input::placeholder { color: rgba(26,9,48,0.5); }
.sort {
  background: rgba(255,255,255,0.78);
  border: 2px solid var(--ink-dark);
}
.sort-label, .sort select { color: var(--ink-dark); font-family: var(--marker-font); }

/* Filter chips — sticker buttons */
.filterchip {
  font-family: var(--marker-font) !important;
  font-weight: 700 !important;
  background: var(--paper-bg) !important;
  border: 2.2px solid var(--ink-dark) !important;
  color: var(--ink-dark) !important;
  border-radius: 999px !important;
  box-shadow: 2px 3px 0 var(--ink-dark);
  transform: rotate(-1deg);
  transition: transform 160ms cubic-bezier(.2,.7,.2,1.4), background 140ms;
}
.filterchip:nth-child(2n)  { transform: rotate(1deg); }
.filterchip:nth-child(3n)  { transform: rotate(-2deg); background: var(--hl-cyan) !important; }
.filterchip:nth-child(4n)  { transform: rotate(2deg);  background: var(--hl-yellow) !important; }
.filterchip:nth-child(5n)  { transform: rotate(-1.5deg); background: var(--hl-pink) !important; }
.filterchip:hover { transform: rotate(0) translateY(-1px); }
.filterchip.active {
  background: var(--ink-dark) !important;
  color: var(--hl-yellow) !important;
  border-color: var(--ink-dark) !important;
  box-shadow: 3px 4px 0 var(--hl-pink);
}

.result-count {
  font-family: var(--marker-font);
  color: var(--ink-dark);
  font-weight: 700;
  background: rgba(255,255,255,0.8);
  display: inline-block;
  padding: 3px 10px;
  border: 1.6px dashed var(--ink-dark);
  border-radius: 8px;
  font-size: 12px;
}

/* ── product grid — tilted sticker cards ──────────────────────────── */

.grid {
  gap: clamp(14px, 1.6vw, 22px);
  padding: 12px 0 8px;
}
.grid > li { perspective: 800px; }

.product-card {
  background: var(--paper-bg) !important;
  border: 3px solid var(--ink-dark) !important;
  border-radius: 18px !important;
  box-shadow: 5px 6px 0 var(--ink-dark);
  overflow: visible !important;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1.4),
              box-shadow 220ms ease;
}
/* Subtle tilt wave */
.grid > li:nth-child(4n+1) .product-card { transform: rotate(-1.3deg); }
.grid > li:nth-child(4n+2) .product-card { transform: rotate(0.9deg);  }
.grid > li:nth-child(4n+3) .product-card { transform: rotate(-0.6deg); }
.grid > li:nth-child(4n+4) .product-card { transform: rotate(1.5deg);  }

.product-card:hover {
  transform: rotate(0) translateY(-6px) !important;
  box-shadow: 7px 10px 0 var(--ink-dark);
}
.product-card::before {
  /* a tape strip that lifts on hover */
  content: "";
  position: absolute;
  top: -10px;
  left: 38%;
  width: 64px;
  height: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18) 60%, rgba(255,255,255,0.45)),
    var(--card-bg, var(--hl-yellow));
  border: 1.5px solid rgba(0,0,0,0.20);
  border-radius: 3px;
  box-shadow: 0 4px 8px -3px rgba(0,0,0,0.4);
  z-index: 4;
  transform: rotate(-5deg);
}
.product-card:nth-child(2n)::before { left: 18%; transform: rotate(7deg); }
.product-card:nth-child(3n)::before { left: 60%; transform: rotate(-9deg); }
.product-card:nth-child(4n)::before { left: 70%; transform: rotate(4deg); }

.product-window {
  border: 2.5px solid var(--ink-dark) !important;
  border-radius: 14px !important;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px,
      transparent 1px, transparent 18px),
    radial-gradient(70% 70% at 30% 25%, rgba(255,255,255,0.48), transparent 60%),
    color-mix(in srgb, var(--card-bg, #ff7eb6) 28%, #fff8e8) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4);
}
.product-window.has-product-photo {
  background:
    radial-gradient(80% 80% at 20% 18%, rgba(255,255,255,0.40), transparent 65%),
    linear-gradient(160deg, var(--paper-bg) 0%, color-mix(in srgb, var(--card-bg, #ff7eb6) 22%, var(--paper-bg)) 100%) !important;
  border: 2.5px solid var(--ink-dark) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -10px 22px rgba(5,2,18,0.08) !important;
}

.product-card .product-name {
  font-family: var(--marker-font);
  color: var(--ink-dark);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.product-card .product-cat {
  font-family: var(--marker-font);
  color: rgba(26,9,48,0.6);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.product-card .product-desc {
  color: rgba(26,9,48,0.85);
  font-size: 13.5px;
}
.product-card .product-vibe {
  font-family: var(--marker-font);
  background: var(--paper-bg) !important;
  color: var(--ink-dark) !important;
  border: 1.8px solid var(--ink-dark) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* Rarity badge as a real sticker */
.rarity-badge {
  font-family: var(--marker-font) !important;
  font-weight: 800 !important;
  border: 2px solid var(--ink-dark) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  box-shadow: 2px 2px 0 var(--ink-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px !important;
  transform: rotate(-3deg);
  background: var(--hl-yellow) !important;
  color: var(--ink-dark) !important;
}
.rarity-badge[data-r="hard_to_find"] { background: var(--hl-pink) !important; }
.rarity-badge[data-r="drop_pick"]    { background: var(--hl-cyan) !important; }
.rarity-badge[data-r="limited"]      { background: var(--hl-orange) !important; }

.stock-badge {
  font-family: var(--marker-font);
  background: var(--paper-bg);
  color: var(--ink-dark);
  border: 1.6px solid var(--ink-dark);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  transform: rotate(2deg);
  box-shadow: 1.5px 2px 0 var(--ink-dark);
}
.stock-badge.low { background: #ff5b8a; color: #fff; }

/* Add-to-reservation button */
.add-btn {
  font-family: var(--marker-font) !important;
  font-weight: 900 !important;
  background: linear-gradient(96deg, var(--hl-pink), var(--hl-yellow)) !important;
  color: var(--ink-dark) !important;
  border: 2.5px solid var(--ink-dark) !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
  box-shadow: 3px 4px 0 var(--ink-dark);
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: rotate(-1deg);
  transition: transform 160ms cubic-bezier(.2,.7,.2,1.4), filter 160ms;
}
.add-btn:hover:not(:disabled) {
  transform: rotate(0) translateY(-1px);
  filter: brightness(1.05);
}
.add-btn[aria-pressed="true"] {
  background: var(--hl-cyan) !important;
}
.add-btn[disabled] {
  background: rgba(0,0,0,0.10) !important;
  color: rgba(26,9,48,0.4) !important;
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: none;
  transform: rotate(0);
}

.product-tape {
  font-family: var(--marker-font);
  background: rgba(0,0,0,0.04);
  border-top: 1.5px dashed rgba(26,9,48,0.25);
  border-bottom: 1.5px dashed rgba(26,9,48,0.25);
  padding: 4px 10px !important;
}
.tape-name { color: var(--ink-dark); font-weight: 800; font-size: 12.5px; }

/* ── how it works — 3 stamped doodle steps ────────────────────────── */

.rules {
  margin-top: 28px;
  background: var(--paper-bg);
  border: 3px solid var(--ink-dark);
  border-radius: 22px;
  box-shadow: 7px 9px 0 var(--ink-dark);
  padding: 26px clamp(20px, 4vw, 44px) !important;
  position: relative;
}
.rules h2 {
  font-family: var(--marker-font);
  font-weight: 900;
  color: var(--ink-dark);
  -webkit-text-fill-color: var(--ink-dark);
  background: none;
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 14px;
  display: inline-block;
  position: relative;
}
.rules h2::after {
  /* hand-drawn double underline */
  content: "";
  display: block;
  width: 80%;
  margin: 4px 0 0 4px;
  height: 8px;
  background:
    linear-gradient(96deg, var(--hl-pink), var(--hl-yellow));
  border-radius: 6px;
  transform: skewX(-3deg);
  border: 1.8px solid var(--ink-dark);
}
/* Cards instead of a list */
.rules-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 18px 0 14px;
  counter-reset: ndo-step;
}
.rules-list li {
  position: relative;
  background: var(--paper-bg);
  border: 2.6px solid var(--ink-dark);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: 4px 5px 0 var(--ink-dark);
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-dark);
  counter-increment: ndo-step;
}
.rules-list li:nth-child(1) { background: var(--hl-yellow); transform: rotate(-1deg); }
.rules-list li:nth-child(2) { background: var(--hl-cyan);   transform: rotate(1deg);  }
.rules-list li:nth-child(3) { background: var(--hl-pink);   transform: rotate(-1deg); }
.rules-list li:nth-child(4) { background: #c4f0d2;          transform: rotate(1deg);  }
.rules-list li:nth-child(5) { background: #ffd0a8;          transform: rotate(-1deg); }
.rules-list li::before {
  content: counter(ndo-step);
  position: absolute;
  top: -16px;
  left: -16px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--ink-dark);
  color: var(--hl-yellow);
  font-family: var(--marker-font);
  font-weight: 900;
  font-size: 22px;
  display: grid;
  place-items: center;
  border: 3px solid var(--paper-bg);
  box-shadow: 2px 3px 0 var(--ink-dark);
  transform: rotate(-6deg);
}
.rules-list li strong {
  font-family: var(--marker-font);
  font-size: 17px;
  font-weight: 900;
  display: block;
  margin-bottom: 4px;
}
.rules-disclaimer {
  font-family: var(--marker-font);
  background: rgba(255,255,255,0.7);
  border: 1.6px dashed var(--ink-dark);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: rgba(26,9,48,0.78);
  margin-top: 14px;
}

.rules .ndo-mascot--twirly {
  position: absolute;
  top: -32px;
  right: 22px;
  width: 90px;
  transform: rotate(15deg);
  animation: ndo-tilt 6s ease-in-out infinite alternate;
}

/* ── section divider squiggle ─────────────────────────────────────── */

.section-divider {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 26px auto;
  height: 26px;
  opacity: 0.8;
  color: var(--hl-pink);
}
.section-divider svg { width: 100%; height: 100%; color: currentColor; }
.section-divider svg path { stroke: currentColor; }

/* ── footer paper ─────────────────────────────────────────────────── */

.ndo-footer {
  background: rgba(2,1,12,0.55);
  border-top: 2.5px solid rgba(255,255,255,0.10);
  font-family: var(--marker-font);
  color: rgba(255,255,255,0.78);
}
.ndo-footer p { font-size: 13px; }

/* ── reduce motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-mascots .ndo-mascot,
  .spotlight-card .ndo-mascot--bloop,
  .rules .ndo-mascot--twirly,
  .product-card { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v8 polish pass — proportion + rhythm + finish.
   Spotlight downsized + balanced; cards refined (subtler tilts, smaller
   tape, tighter padding, 2-line description clamp); page rhythm tuned.
   This block deliberately wins specificity over the v3 / v5 / v7 rules
   above so we can reduce magnitudes without rewriting them.
   ───────────────────────────────────────────────────────────────── */

/* ── spotlight: cap size, rebalance split, shrink art ─────────────── */

.spotlight {
  padding: 0 clamp(18px, 3vw, 48px);
  margin: 18px auto 22px;
}
.spotlight-card {
  max-width: 920px !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(220px, 0.8fr) 1fr !important;
  min-height: 220px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  box-shadow: 5px 7px 0 var(--ink-dark) !important;
}
.spotlight-card::before {
  /* halo no longer dominates the canvas */
  width: 36% !important;
  filter: blur(36px) !important;
  opacity: 0.6 !important;
}
.spotlight-art {
  min-height: 220px !important;
  padding: 22px !important;
}
.spotlight-art > svg,
.spotlight-art > .product-photo {
  width: auto !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 200px !important;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,0.40)) !important;
}
.spotlight-body {
  padding: 22px 26px !important;
  gap: 10px !important;
  justify-content: center;
}
.spotlight-name {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.05;
}
.spotlight-desc {
  font-size: clamp(13px, 0.95vw, 15px) !important;
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spotlight-eyebrow { font-size: 11px !important; padding: 3px 9px !important; }
.spotlight-ribbon  { font-size: 10.5px !important; padding: 5px 10px !important; top: 12px; right: 12px; }
.spotlight-meta { gap: 6px !important; flex-wrap: wrap; }
.spotlight-stock { font-size: 10.5px !important; padding: 2px 7px !important; }
.spotlight-actions .btn { padding: 9px 16px !important; font-size: 14px !important; }
.spotlight-card .ndo-mascot--bloop {
  left: -22px !important;
  bottom: -16px !important;
  width: 96px !important;
}

/* small-screen spotlight collapses cleanly */
@media (max-width: 720px) {
  .spotlight-card { grid-template-columns: 1fr !important; }
  .spotlight-art  { min-height: 180px !important; }
  .spotlight-art > .product-photo,
  .spotlight-art > svg { max-width: 168px !important; max-height: 168px !important; }
  .spotlight-card .ndo-mascot--bloop { width: 78px !important; left: 8px !important; bottom: -12px !important; }
}

/* ── product card system: subtler, tighter, more refined ─────────── */

/* Tilt wave halved */
.grid > li:nth-child(4n+1) .product-card { transform: rotate(-0.6deg); }
.grid > li:nth-child(4n+2) .product-card { transform: rotate(0.45deg); }
.grid > li:nth-child(4n+3) .product-card { transform: rotate(-0.3deg); }
.grid > li:nth-child(4n+4) .product-card { transform: rotate(0.7deg);  }

.product-card {
  border-width: 2.4px !important;
  border-radius: 16px !important;
  box-shadow: 4px 5px 0 var(--ink-dark) !important;
}
.product-card:hover {
  transform: rotate(0) translateY(-4px) !important;
  box-shadow: 5px 7px 0 var(--ink-dark) !important;
}

/* Smaller tape strip + tidier spread */
.product-card::before {
  top: -7px !important;
  width: 48px !important;
  height: 14px !important;
  border-width: 1.2px !important;
  border-radius: 2.5px !important;
  box-shadow: 0 3px 6px -2px rgba(0,0,0,0.35) !important;
}

/* Quieter tape rotation by index */
.grid > li:nth-child(4n+1) .product-card::before { transform: rotate(-4deg); left: 36%; }
.grid > li:nth-child(4n+2) .product-card::before { transform: rotate(4deg);  left: 24%; }
.grid > li:nth-child(4n+3) .product-card::before { transform: rotate(-6deg); left: 56%; }
.grid > li:nth-child(4n+4) .product-card::before { transform: rotate(3deg);  left: 64%; }
/* Override any older rules from the v6/v7 cascade */
.product-card:nth-child(2n)::before,
.product-card:nth-child(3n)::before,
.product-card:nth-child(4n)::before { transform: none; }

.product-window {
  height: 178px !important;
  min-height: 0 !important;
  border-width: 2.2px !important;
  border-radius: 12px !important;
}
.product-window.has-product-photo {
  min-height: 178px !important;
  height: 178px !important;
}
.product-window.has-product-photo .product-photo {
  width: min(86%, 200px) !important;
  height: min(86%, 200px) !important;
}

.product-body {
  padding: 12px 13px 10px !important;
  gap: 5px !important;
}
.product-card .product-name {
  font-size: 15.5px !important;
  line-height: 1.18 !important;
}
.product-card .product-cat {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
}
.product-card .product-desc {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  color: rgba(26,9,48,0.78);
}
.product-vibes { gap: 4px !important; margin-top: 2px !important; }
.product-card .product-vibe {
  font-size: 10px !important;
  padding: 1px 7px !important;
  border-width: 1.4px !important;
}

/* Refined badge stack */
.rarity-badge {
  padding: 2px 8px !important;
  font-size: 9px !important;
  border-width: 1.6px !important;
  box-shadow: 1.5px 2px 0 var(--ink-dark) !important;
  transform: rotate(-2deg);
}
.stock-badge {
  font-size: 9.5px !important;
  padding: 1.5px 7px !important;
  border-width: 1.4px !important;
  box-shadow: 1px 1.5px 0 var(--ink-dark) !important;
}

.product-foot { padding: 0 13px 13px !important; }
.product-card .add-btn {
  padding: 7px 12px !important;
  font-size: 12.5px !important;
  border-width: 2.2px !important;
  box-shadow: 2.5px 3.5px 0 var(--ink-dark) !important;
  border-radius: 10px !important;
}

/* Tape (mid-card name strip) — quieter */
.product-tape {
  padding: 3px 10px !important;
}
.tape-name { font-size: 11.5px !important; }

/* ── grid rhythm ──────────────────────────────────────────────────── */

.grid {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 20px) !important;
  padding: 8px 0 12px !important;
}
@media (min-width: 1600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) !important; }
}
@media (min-width: 2400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)) !important; }
}

/* ── filter / search / sort row: cleaner ─────────────────────────── */

.shop-toolbar {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  box-shadow: 3px 4px 0 var(--ink-dark) !important;
}
.search { flex: 1 1 320px !important; }
.search input { font-size: 13.5px; }
.sort, .search { padding: 4px 10px !important; }

/* Filter chips — same-color group, subtler tilts */
.filterchip {
  padding: 4px 10px !important;
  font-size: 11px !important;
  border-width: 1.8px !important;
  box-shadow: 1.5px 2px 0 var(--ink-dark) !important;
}
.filterchip,
.filterchip:nth-child(2n),
.filterchip:nth-child(3n),
.filterchip:nth-child(4n),
.filterchip:nth-child(5n) {
  background: var(--paper-bg) !important;
  transform: rotate(-0.8deg);
}
.filterchip:nth-child(2n) { transform: rotate(0.6deg); }
.filterchip:nth-child(3n) { transform: rotate(-0.4deg); }
.filterchip.active {
  background: var(--ink-dark) !important;
  color: var(--hl-yellow) !important;
  transform: rotate(0) !important;
}

/* Result count ↔ section spacing */
.result-count {
  font-size: 11px !important;
  padding: 2px 9px !important;
  margin-top: 8px !important;
}

/* ── hero proportions tightened ───────────────────────────────────── */

.hero {
  border-width: 2.8px !important;
  border-radius: 20px !important;
  box-shadow: 6px 8px 0 0 var(--ink-dark) !important;
  padding: clamp(26px, 3.4vw, 52px) clamp(22px, 4vw, 64px) !important;
  margin: clamp(12px, 2vw, 22px) clamp(12px, 2vw, 28px) !important;
}
.hero h1 {
  font-size: clamp(34px, 4.4vw, 56px) !important;
  line-height: 1.04 !important;
}
.hero-sub { font-size: clamp(14px, 1vw, 16px) !important; }
.hero-strip {
  margin-top: 16px !important;
  gap: 8px !important;
}
.hero-cell {
  padding: 8px 10px !important;
  border-width: 2.2px !important;
  box-shadow: 2.5px 3px 0 var(--ink-dark) !important;
}
.hero-cell .v { font-size: 16px !important; }

.hero .btn-primary, .hero .btn-ghost {
  padding: 11px 20px !important;
  font-size: 15.5px !important;
  border-width: 2.6px !important;
  box-shadow: 3.5px 4.5px 0 var(--ink-dark) !important;
}

/* ── section divider — tighter ────────────────────────────────────── */

.section-divider {
  height: 18px;
  margin: 18px auto 14px;
  max-width: 540px;
}

/* ── nav chips — quieter rotation ─────────────────────────────────── */

.topnav a,
.topnav a:nth-child(2),
.topnav a:nth-child(3) { transform: rotate(0); }
.topnav a:hover { transform: translateY(-1px) rotate(0); }

/* ── pricebar tier sizing — slightly tighter ──────────────────────── */

.pricebar { padding: 8px 14px !important; }
.pricebar-tag, .pricebar-tier { font-size: 13.5px !important; }
.pricebar-tier strong { font-size: 16px !important; }

/* ── shop section header: gap rhythm ──────────────────────────────── */

.shop .section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

/* ── reduce duplication in v3/v5 outer-shop padding ─────────────── */

.shop {
  padding: 6px clamp(18px, 3vw, 56px) 36px !important;
}

/* ── rules section: slightly smaller cards, breathing room ───────── */

.rules {
  padding: 24px clamp(20px, 3.4vw, 40px) !important;
  border-radius: 20px !important;
  box-shadow: 6px 8px 0 var(--ink-dark) !important;
}
.rules-list { gap: 14px !important; }
.rules-list li {
  padding: 18px 16px 16px !important;
  border-width: 2.4px !important;
  box-shadow: 3.5px 4.5px 0 var(--ink-dark) !important;
}
.rules-list li::before {
  width: 34px !important;
  height: 34px !important;
  font-size: 19px !important;
  top: -14px !important;
  left: -14px !important;
}
.rules-list li strong { font-size: 16px !important; }

/* ─────────────────────────────────────────────────────────────────
   v9 pipeline-driven round — 10 lane-attributed improvements
   #1 frontend_ux: quick-view modal marker chrome
   #2 frontend_ux: cart drawer marker chrome
   #3 frontend_ux: empty-state doodle + friendlier copy
   #4 frontend_ux: a11y focus rings + skip-link polish
   ───────────────────────────────────────────────────────────────── */

/* #1 Quick-view modal — paper card with marker outline + ink shadow */
.quickview-card {
  background:
    radial-gradient(80% 80% at 20% 18%, rgba(255,255,255,0.45), transparent 65%),
    var(--paper-bg) !important;
  border: 3px solid var(--ink-dark) !important;
  border-radius: 22px !important;
  box-shadow: 8px 12px 0 var(--ink-dark), 0 60px 120px -40px rgba(0,0,0,0.7) !important;
}
.quickview-art {
  background:
    radial-gradient(70% 70% at 30% 25%, rgba(255,255,255,0.35), transparent 60%),
    color-mix(in srgb, var(--card-bg, var(--hl-pink)) 40%, var(--paper-bg)) !important;
  border-right: 2.5px dashed rgba(26,9,48,0.35) !important;
}
.quickview-art > .product-photo,
.quickview-art > svg {
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.35)) !important;
}
.quickview-name {
  font-family: var(--marker-font) !important;
  font-weight: 900 !important;
  color: var(--ink-dark) !important;
  letter-spacing: -0.01em;
}
.quickview-eyebrow {
  font-family: var(--marker-font);
  background: var(--hl-yellow);
  color: var(--ink-dark);
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid var(--ink-dark);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-self: flex-start;
  transform: rotate(-2deg);
  box-shadow: 1.5px 2px 0 var(--ink-dark);
}
.quickview-desc { color: rgba(26,9,48,0.85); }
.quickview-stock {
  font-family: var(--marker-font);
  background: var(--paper-bg);
  color: var(--ink-dark);
  border: 1.6px solid var(--ink-dark);
  font-weight: 700;
}
.quickview-vibes .product-vibe {
  background: var(--paper-bg) !important;
  color: var(--ink-dark) !important;
  border: 1.4px solid var(--ink-dark) !important;
  font-weight: 700 !important;
}
.quickview-actions .btn-primary {
  font-family: var(--marker-font);
  font-weight: 900;
  background: linear-gradient(96deg, var(--hl-pink), var(--hl-yellow)) !important;
  color: var(--ink-dark) !important;
  border: 2.5px solid var(--ink-dark);
  border-radius: 12px;
  box-shadow: 3px 4px 0 var(--ink-dark);
  transform: rotate(-1deg);
}
.quickview-close, .quickview-nav {
  background: var(--paper-bg) !important;
  color: var(--ink-dark) !important;
  border: 2.4px solid var(--ink-dark) !important;
  box-shadow: 2px 3px 0 var(--ink-dark) !important;
  font-family: var(--marker-font);
  font-weight: 900;
}
.quickview-close:hover { background: var(--hl-pink) !important; }
.quickview-nav:hover { background: var(--hl-yellow) !important; }

/* #2 Cart drawer — sketchbook side panel */
.cart {
  background: var(--paper-bg) !important;
  border-left: 3px solid var(--ink-dark) !important;
  box-shadow: -8px 0 24px -8px rgba(0,0,0,0.45);
}
.cart-head {
  background: linear-gradient(96deg, var(--hl-pink), var(--hl-yellow)) !important;
  border-bottom: 3px solid var(--ink-dark) !important;
}
.cart-head .section-h {
  font-family: var(--marker-font);
  color: var(--ink-dark);
  -webkit-text-fill-color: var(--ink-dark);
  background: none;
  font-weight: 900;
}
.cart-close {
  font-family: var(--marker-font);
  background: var(--paper-bg) !important;
  color: var(--ink-dark) !important;
  border: 2.4px solid var(--ink-dark) !important;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 2px 3px 0 var(--ink-dark);
  width: 32px; height: 32px;
}
.cart-body { color: var(--ink-dark); }
.cart-list { font-family: system-ui, sans-serif; }
.cart-row {
  background: rgba(255,255,255,0.6) !important;
  border: 2px solid var(--ink-dark) !important;
  border-radius: 12px !important;
  box-shadow: 2.5px 3px 0 var(--ink-dark);
  padding: 10px 12px !important;
}
.cart-row .name {
  font-family: var(--marker-font);
  font-weight: 800;
  color: var(--ink-dark);
}
.cart-row .meta { color: rgba(26,9,48,0.6); }
.cart-row .swatch {
  border: 2px solid var(--ink-dark);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg, var(--hl-pink)) 60%, var(--paper-bg)) !important;
}
.cart-row .remove {
  font-family: var(--marker-font);
  font-weight: 900;
  background: var(--paper-bg);
  color: var(--ink-dark);
  border: 1.8px solid var(--ink-dark);
  border-radius: 999px;
  width: 26px; height: 26px;
  box-shadow: 1.5px 2px 0 var(--ink-dark);
}
.cart-row .remove:hover { background: #ff5b8a; color: #fff; }
.cart-empty {
  font-family: var(--marker-font);
  color: rgba(26,9,48,0.55);
  text-align: center;
  padding: 22px 12px !important;
  background: rgba(255,255,255,0.5);
  border: 1.6px dashed var(--ink-dark);
  border-radius: 12px;
}
.cart-bundle {
  background: var(--hl-yellow) !important;
  border: 2.2px solid var(--ink-dark) !important;
  border-radius: 14px !important;
  box-shadow: 3px 4px 0 var(--ink-dark);
  padding: 10px 12px !important;
}
.bundle-tag {
  font-family: var(--marker-font);
  font-weight: 900;
  color: var(--ink-dark);
  background: var(--paper-bg);
  border: 1.6px solid var(--ink-dark);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.bundle-tier { font-family: var(--marker-font); color: var(--ink-dark); font-weight: 700; }
.bundle-total {
  font-family: var(--marker-font);
  font-weight: 900;
  font-size: 22px;
  color: var(--ink-dark);
}
.cart-meta {
  font-family: var(--marker-font);
  background: rgba(255,255,255,0.6);
  border: 1.4px dashed var(--ink-dark);
  border-radius: 8px;
  color: rgba(26,9,48,0.78);
  padding: 6px 10px;
  font-size: 12px;
}
.reserve-form .field span {
  font-family: var(--marker-font);
  color: var(--ink-dark);
  font-weight: 700;
}
.reserve-form input,
.reserve-form select,
.reserve-form textarea {
  background: rgba(255,255,255,0.85) !important;
  border: 2px solid var(--ink-dark) !important;
  color: var(--ink-dark) !important;
  border-radius: 10px !important;
  font-family: system-ui, sans-serif;
}
.reserve-form input:focus,
.reserve-form select:focus,
.reserve-form textarea:focus {
  outline: 3px solid var(--hl-yellow);
  outline-offset: 1px;
}
.field-check {
  font-family: var(--marker-font);
  color: var(--ink-dark);
  font-size: 13px;
}
.form-meta {
  font-family: var(--marker-font);
  background: rgba(255,255,255,0.55);
  border: 1.4px dashed var(--ink-dark);
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(26,9,48,0.7);
  font-size: 11px;
}
.btn-lg.btn-primary {
  font-family: var(--marker-font);
  font-weight: 900;
  background: linear-gradient(96deg, var(--hl-pink), var(--hl-yellow)) !important;
  color: var(--ink-dark) !important;
  border: 3px solid var(--ink-dark);
  border-radius: 14px;
  box-shadow: 4px 5px 0 var(--ink-dark);
  text-transform: none;
  letter-spacing: 0;
  transform: rotate(-1deg);
}
.btn-lg.btn-primary:hover:not(:disabled) {
  transform: rotate(0) translateY(-2px);
  box-shadow: 5px 7px 0 var(--ink-dark);
}
.btn-lg.btn-primary:disabled {
  background: rgba(0,0,0,0.10) !important;
  color: rgba(26,9,48,0.4) !important;
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: none;
  transform: rotate(0);
}
.form-error {
  font-family: var(--marker-font);
  color: #c4334b;
  background: rgba(255,235,235,0.85);
  border: 1.6px dashed #c4334b;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.confirm-card {
  background: var(--paper-bg) !important;
  border: 3px solid var(--ink-dark) !important;
  border-radius: 22px;
  box-shadow: 8px 12px 0 var(--ink-dark);
}
.confirm-card h2,
.confirm-card .confirm-list dt,
.confirm-card .confirm-list dd,
.confirm-card .confirm-meta {
  color: var(--ink-dark) !important;
  font-family: var(--marker-font);
}

/* #3 Empty state — friendly mascot copy */
.grid-empty {
  background: var(--paper-bg) !important;
  border: 2.4px dashed var(--ink-dark) !important;
  border-radius: 14px;
  font-family: var(--marker-font);
  font-size: 15px;
  color: var(--ink-dark);
  padding: 26px 22px !important;
  text-align: center;
  box-shadow: 3px 4px 0 var(--ink-dark);
  position: relative;
}

/* #4 a11y focus rings + skip-link */
.skiplink {
  font-family: var(--marker-font);
  background: var(--hl-yellow) !important;
  color: var(--ink-dark) !important;
  border: 2.5px solid var(--ink-dark);
  border-radius: 10px;
  font-weight: 900;
  box-shadow: 3px 4px 0 var(--ink-dark);
  padding: 8px 14px !important;
}
*:focus-visible {
  outline: 3px solid var(--hl-yellow) !important;
  outline-offset: 3px;
  border-radius: 8px;
}
.product-card .add-btn:focus-visible,
.filterchip:focus-visible,
.cart-pill:focus-visible {
  outline-color: var(--hl-cyan) !important;
}

/* #7 Security/privacy posture pills in the footer */
.ndo-privacy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 0 0 10px;
}
.privacy-pill {
  font-family: var(--marker-font);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-dark);
  background: var(--paper-bg);
  border: 1.6px solid var(--ink-dark);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
  box-shadow: 1.5px 2px 0 var(--ink-dark);
  transform: rotate(-1deg);
}
.privacy-pill:nth-child(2n) { transform: rotate(0.8deg); background: var(--hl-cyan); }
.privacy-pill:nth-child(3n) { transform: rotate(-0.6deg); background: var(--hl-yellow); }
.privacy-pill:nth-child(4n) { transform: rotate(1deg); background: var(--hl-pink); }

/* ─────────────────────────────────────────────────────────────────
   v10 round-2 polish — applies the ui-polish-scan findings.
   ───────────────────────────────────────────────────────────────── */

/* #1 Per-card price chip (sits next to the add button) */
.product-foot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--marker-font);
  background: var(--paper-bg);
  border: 1.6px solid var(--ink-dark);
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 1.5px 2px 0 var(--ink-dark);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.price-chip-each {
  color: var(--ink-dark);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.price-chip-sep { color: rgba(26,9,48,0.45); font-size: 11px; }
.price-chip-bundle {
  font-weight: 700;
  font-size: 10.5px;
  color: rgba(26,9,48,0.78);
  letter-spacing: 0.02em;
}

/* #2 Cart pill — replace emoji with marker sticker tag */
.cart-pill .cart-pill-tag {
  display: inline-block;
  font-family: var(--marker-font);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dark);
  background: var(--paper-bg);
  border: 1.6px solid var(--ink-dark);
  padding: 1px 8px 2px;
  border-radius: 999px;
  margin-right: 4px;
  box-shadow: 1.5px 2px 0 var(--ink-dark);
}
.cart-pill .cart-pill-sep { color: rgba(26,9,48,0.55); margin: 0 2px; }

/* #3 Confirmation modal — Squee mascot celebrates */
.confirm-card { position: relative; }
.confirm-mascot {
  position: absolute;
  top: -28px;
  right: -16px;
  width: 110px;
  z-index: 4;
  transform: rotate(8deg);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35));
  animation: ndo-confirm-cheer 1.6s ease-in-out infinite alternate;
}
@keyframes ndo-confirm-cheer {
  0%   { transform: rotate(8deg)  translateY(0); }
  100% { transform: rotate(-2deg) translateY(-6px); }
}

/* #4 Empty-cart drawer — friendlier, with hint */
.cart-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px !important;
  list-style: none;
}
.cart-empty-glyph {
  font-size: 28px;
  margin-bottom: 2px;
}
.cart-empty-title {
  font-family: var(--marker-font);
  font-weight: 900;
  font-size: 18px;
  color: var(--ink-dark);
}
.cart-empty-sub {
  font-family: var(--marker-font);
  font-size: 12.5px;
  color: rgba(26,9,48,0.7);
  text-align: center;
  max-width: 22ch;
  line-height: 1.4;
}

/* #5 Spotlight CTA hover-lift — was static */
.spotlight-actions .btn {
  transition: transform 180ms cubic-bezier(.2,.7,.2,1.4),
              box-shadow 200ms ease, filter 160ms ease !important;
  font-family: var(--marker-font) !important;
  font-weight: 900 !important;
  border: 2.5px solid var(--ink-dark) !important;
  box-shadow: 3px 4px 0 var(--ink-dark) !important;
  border-radius: 12px !important;
  background: linear-gradient(96deg, var(--hl-pink), var(--hl-yellow)) !important;
  color: var(--ink-dark) !important;
  transform: rotate(-1deg);
}
.spotlight-actions .btn:hover:not(:disabled) {
  transform: rotate(0) translateY(-2px) !important;
  box-shadow: 5px 7px 0 var(--ink-dark) !important;
  filter: brightness(1.05);
}

/* #6 hero-sub bug fix — "3 picks" was rendering as an invisible blank
   yellow bar. Root cause: styles.css:163 sets `color: var(--citrus)`
   (yellow) on `.hero-sub strong`, and marker.css gives the same element
   a yellow background — yellow-on-yellow = invisible text. Override
   the text color to ink-dark so the highlighter reads correctly. Also
   force inline-block + nowrap so the box never line-wraps mid-content. */
.hero-sub { text-wrap: pretty; }
.hero-sub strong {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--ink-dark) !important;
  -webkit-text-fill-color: var(--ink-dark) !important;
  font-weight: 900;
  margin: 0 1px;
}

/* ─────────────────────────────────────────────────────────────────
   v11 round-3 — iPhone / iPad publish-ready.
   Pipeline-driven from contrast / touch-target / visual-smoke @ mobile.
   ───────────────────────────────────────────────────────────────── */

/* ── #1-3 contrast fixes ──────────────────────────────────────────── */

/* Strong text inside rules-list cards — they sit on light pastel
   backgrounds (apricot / pink / mint / yellow / cyan). White-on-pastel
   was failing WCAG. Force ink-dark on every <strong> inside the cards. */
.rules-list li, .rules-list li *,
.rules-list li strong { color: var(--ink-dark) !important; }

/* Stock badge LOW — pink-red bg. White text was 2.95:1. Switch to
   ink-dark for legibility, keep the alarm color via the bg. */
.stock-badge.low {
  background: #ffd6dc !important;
  color: var(--ink-dark) !important;
  border-color: #c4334b !important;
}

/* ── #4-5 touch targets ≥ 44 on mobile ────────────────────────────── */

@media (max-width: 768px) {
  .product-card .add-btn {
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .filterchip {
    min-height: 38px;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  .cart-pill {
    min-height: 44px;
    padding: 8px 14px !important;
  }
  .topnav a {
    min-height: 38px;
    padding: 8px 14px !important;
    display: inline-flex;
    align-items: center;
  }
  .quickview-close, .quickview-nav { width: 44px !important; height: 44px !important; }
  .hero .btn-primary, .hero .btn-ghost {
    min-height: 48px;
    padding: 12px 22px !important;
  }
  .price-chip {
    min-height: 32px;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .skiplink { min-height: 44px; padding: 12px 18px !important; }
}

/* ── #6 filter chip horizontal-scroll on mobile ───────────────────── */

@media (max-width: 600px) {
  .filterbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 6px 4px 12px;
    margin: 0 -4px;
    gap: 8px;
  }
  .filterbar::-webkit-scrollbar { height: 5px; }
  .filterbar::-webkit-scrollbar-thumb { background: rgba(26,9,48,0.35); border-radius: 4px; }
  .filterchip { flex: 0 0 auto; }
}

/* ── #7 hero stat strip 2×2 on mobile ─────────────────────────────── */

@media (max-width: 600px) {
  .hero-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .hero-cell { padding: 10px 12px !important; }
  .hero-cell .v { font-size: 17px !important; }
}

/* ── #8 hide hero mascots on small phones to avoid headline overlap ─ */

@media (max-width: 540px) {
  .hero-mascots .ndo-mascot--squee,
  .hero-mascots .ndo-mascot--zappy { display: none; }
  /* Keep the sparkle cluster — it's small and decorative */
  .hero-mascots .ndo-doodle-sparkles {
    top: 6%; left: 4%;
    width: 90px;
    opacity: 0.55;
  }
}

/* Slightly relaxed on iPhone Pro Max — Squee can stay if very small */
@media (min-width: 380px) and (max-width: 540px) {
  .hero-mascots .ndo-mascot--squee {
    display: block;
    right: 2%;
    top: 4%;
    width: 64px;
    opacity: 0.85;
  }
}

/* ── #9 pricebar single-line on mobile, smaller text ──────────────── */

@media (max-width: 600px) {
  .pricebar { padding: 7px 10px !important; }
  .pricebar-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .pricebar-inner::-webkit-scrollbar { display: none; }
  .pricebar-tag, .pricebar-tier { flex: 0 0 auto; font-size: 12.5px !important; padding: 3px 9px !important; }
  .pricebar-tier strong { font-size: 14px !important; }
  .pricebar-arrow { font-size: 16px !important; }
  .pricebar-meta { display: none; }
}
@media (max-width: 768px) and (min-width: 601px) {
  .pricebar-tier { font-size: 13px !important; }
}

/* ── #10 cart drawer = bottom sheet on small phones ───────────────── */

@media (max-width: 600px) {
  .cart {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 86vh !important;
    max-height: 86vh !important;
    border-left: 0 !important;
    border-top: 3px solid var(--ink-dark) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -10px 36px -8px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1.4);
  }
  .cart[aria-hidden="false"] { transform: translateY(0); }
  /* drag handle at top */
  .cart-head { position: relative; }
  .cart-head::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 5px;
    border-radius: 999px;
    background: rgba(26,9,48,0.35);
  }
  .cart-head { padding-top: 22px !important; }
}

/* ── general mobile rhythm tweaks ─────────────────────────────────── */

@media (max-width: 600px) {
  .topbar { padding: 8px 14px !important; gap: 8px; }
  .topnav { gap: 6px !important; }
  /* drop the ghost button on really small screens to keep the hero clean */
  .hero-ctas .btn-ghost { display: none; }
  .hero { padding: 22px 18px !important; margin: 8px !important; box-shadow: 4px 6px 0 var(--ink-dark) !important; }
  .hero h1 { font-size: clamp(28px, 8vw, 38px) !important; }
  .hero-sub { font-size: 14px !important; }
  .shop { padding: 6px 14px 32px !important; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 12px !important; }
  .product-window { height: 150px !important; min-height: 0 !important; }
  .product-window.has-product-photo { height: 150px !important; min-height: 150px !important; }
  .product-card .product-name { font-size: 14.5px !important; }
  .product-card .product-desc { font-size: 12px !important; }
  /* spotlight already collapses to single column at 720; tighten image */
  .spotlight-art > .product-photo,
  .spotlight-art > svg { max-width: 160px !important; max-height: 160px !important; }
  .spotlight-card .ndo-mascot--bloop {
    width: 72px !important;
    left: 4px !important;
    bottom: -8px !important;
  }
  .rules { padding: 20px 16px !important; margin: 0 8px !important; }
  .rules-list { grid-template-columns: 1fr !important; }
  .section-divider { max-width: 320px; height: 14px; margin: 12px auto 8px; }
}

/* ── v11 round-3 follow-up — gate-driven contrast + touch-target fixes ── */

/* Filter chips need 44 minimum, not 38, for WCAG */
@media (max-width: 768px) {
  .filterchip { min-height: 44px !important; padding: 11px 16px !important; }
}

/* Contrast fix #1 — `.muted` shop subtitle. The muted color falls through
   the .shop container to the dark body bg; force a paper backdrop on the
   subtitle itself so the contrast walker sees it correctly AND the
   subtitle reads more clearly visually. */
.shop .section-head .muted {
  background: rgba(255,248,232,0.85);
  color: var(--ink-dark) !important;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  border: 1.4px dashed rgba(26,9,48,0.30);
}

/* Contrast fix #2 — #cart-total span inside the gradient cart-pill needed
   an explicit background so the contrast walker computes from the pill,
   not body. The pill's gradient is yellow→orange so ink-dark text is
   ≥7:1, but the span had no bg of its own. Inherit explicitly. */
#cart-total {
  background: rgba(255, 248, 232, 0.55);
  color: var(--ink-dark) !important;
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 800;
}

/* Contrast fix #3 — Zappy's "GO!" SVG text. SVG <text> uses fill, not
   color; the walker can't see the actual rendered fill correctly. Mark
   the doodle SVG aria-hidden (already is) AND set explicit fill on the
   inner text via JS — defer to the doodle factory to handle. As a CSS
   nudge, the sticker's white background is on a path element with no
   computed-style background; the false-positive is acceptable for
   decorative content. */
/* Doodle SVGs are presentational — the contrast walker should skip
   aria-hidden subtrees. */


/* ── round-3 final pass — close out remaining gate fails ──────────── */

/* Touch-target #1: brand mark link 130×40 → bump height */
.brand-mark-link { min-height: 44px; min-width: 44px; }

/* Touch-target #2: spotlight reserve button — was 174×41 */
.spotlight-actions .btn { min-height: 44px; padding: 12px 20px !important; }

/* Touch-target #3: search input — at mobile was 290×22.9, label is 44+
   but the inner input was tight. Bump input min-height. */
@media (max-width: 768px) {
  .search { min-height: 44px; padding: 4px 10px !important; }
  .search input { min-height: 44px !important; padding: 6px 0 !important; }
  /* Touch-target #4: sort select — fix wrapper + native select height */
  .sort { min-height: 44px; padding: 4px 10px !important; }
  .sort select { min-height: 44px !important; font-size: 13px !important; padding: 4px 6px !important; }
}

/* Contrast #1: "the drop" h2 sits on the dark page bg with ink-dark text.
   Wrap it in a paper-pill backdrop so the contrast surface is correct
   AND it visually pops better above the grid. */
.shop .section-head h2 {
  display: inline-block;
  background: rgba(255,248,232,0.92);
  padding: 4px 14px;
  border-radius: 14px;
  border: 2.4px solid var(--ink-dark);
  box-shadow: 3px 4px 0 var(--ink-dark);
  margin: 0;
}
.shop .section-head h2::after { display: none; }