/* cards-store — theme tokens & nav/footer mirror escapeonthego.com (coralGray dark) */
:root {
  --gold:        oklch(64% 0.25 30);
  --gold-light:  oklch(74% 0.18 30);
  --gold-pale:   oklch(30% 0.06 30);
  --navy:        oklch(14% 0.01 258);
  --teal:        oklch(62% 0.20 178);
  --cream:       oklch(18% 0.01 258);
  --cream-dark:  oklch(22% 0.01 258);
  --text:        oklch(90% 0.01 258);
  --text-muted:  oklch(65% 0.01 258);
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;
  --radius:       14px;
  --shadow:       0 4px 24px rgba(0,0,0,0.3);
  --panel:        oklch(24% 0.01 258);
  --border:       oklch(30% 0.01 258);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--cream); color: var(--text); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
.nav a:link, .nav a:visited, .nav a:active, .nav a:focus { color: inherit; }
img { max-width: 100%; }
h1,h2,h3,h4 { font-family: var(--font-display); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Nav (matches escapeonthego.com) */
.nav { position: sticky; top: 0; z-index: 100; background: oklch(18% 0.01 258); transition: box-shadow 0.2s, background 0.2s; }
.nav__inner { max-width: 1160px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { padding: 8px 14px; border-radius: 8px; font-weight: 600; font-family: var(--font-display); font-size: 15px; color: oklch(85% 0.01 258) !important; transition: all 0.15s; background: none; }
.nav__link:hover { color: var(--gold); background: var(--gold-pale); }
.nav__link--active { color: var(--gold); }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 6px; border-radius: 8px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: white !important; border-radius: 2px; transition: all 0.2s; }
.nav__mobile { border-top: 1px solid oklch(22% 0.01 258); padding: 16px 0 20px; display: flex; flex-direction: column; }
.nav__mobile-link { padding: 12px 24px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: oklch(85% 0.01 258); text-align: left; transition: color 0.15s; cursor: pointer; border: none; background: none; width: 100%; }
.nav__mobile-link:hover { color: var(--gold); }
.nav__item { position: relative; }
.nav__caret { font-size: 9px; margin-left: 5px; opacity: 0.65; }
.nav__dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 215px; background: oklch(24% 0.01 258); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,0.45); padding: 6px; display: flex; flex-direction: column; z-index: 110; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; }
.nav__item:hover > .nav__dropdown, .nav__item:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-link { padding: 10px 14px; border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: oklch(85% 0.01 258) !important; transition: all 0.15s; }
.nav__dropdown-link:hover { color: var(--gold) !important; background: var(--gold-pale); }
.nav__mobile-link--sub { padding-left: 44px; font-size: 16px; font-weight: 600; color: oklch(75% 0.01 258) !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 50px; font-weight: 700; font-family: var(--font-display); font-size: 15px; transition: all 0.2s; text-decoration: none; white-space: nowrap; border: none; cursor: pointer; }
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--primary { background: var(--gold); color: white; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.btn--primary:hover { background: oklch(58% 0.27 30); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.4); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.cart-btn { position: relative; margin-left: 8px; padding: 9px 12px; border-radius: 8px; color: oklch(85% 0.01 258); display: inline-flex; transition: all 0.15s; }
.cart-btn:hover { color: var(--gold); background: var(--gold-pale); }
.cart-btn__badge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: white; font-size: 11px; font-weight: 800; font-family: var(--font-display); display: flex; align-items: center; justify-content: center; }

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .cart-btn { margin-left: auto; }
  .nav__inner { gap: 8px; }
}

/* Sections */
.section { padding: 80px 0; }
.section--tight { padding: 40px 0 80px; }
.section--cream { background: var(--cream-dark); }

/* Product grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 28px; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid { grid-template-columns: 1fr; } }

.product-card { background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.product-card__imgwrap { position: relative; aspect-ratio: 5 / 7; overflow: hidden; background: oklch(28% 0.01 258); }
.product-card__imgwrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.product-card__age { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); color: white; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 50px; }
.product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card__title { font-weight: 800; font-size: 19px; line-height: 1.2; }
.product-card__subtitle { color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.product-card__desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; flex: 1; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.product-card__price { font-family: var(--font-display); font-weight: 900; font-size: 22px; }

/* Quantity stepper */
.stepper { display: inline-flex; align-items: center; gap: 2px; background: oklch(18% 0.01 258); border-radius: 50px; padding: 3px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; font-size: 17px; font-weight: 800; font-family: var(--font-display); color: var(--text); display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.stepper button:hover { background: var(--gold-pale); color: var(--gold); }
.stepper__qty { min-width: 22px; text-align: center; font-weight: 800; font-family: var(--font-display); font-size: 15px; }

/* Bundle card */
.bundle-card { background: linear-gradient(135deg, var(--gold-pale), oklch(24% 0.01 258)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bundle-card__info { max-width: 640px; }
.bundle-card__kicker { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.bundle-card__title { font-weight: 900; font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.bundle-card__desc { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin-bottom: 14px; }
.bundle-card__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.bundle-card__price > span:first-child { font-family: var(--font-display); font-weight: 900; font-size: 30px; }
.bundle-card__compare { color: var(--text-muted); text-decoration: line-through; font-size: 16px; }
.bundle-card__save { background: var(--gold); color: white; font-family: var(--font-display); font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 50px; }
@media (max-width: 640px) { .bundle-card { flex-direction: column; align-items: flex-start; } }

/* Steps */
.steps__title { font-weight: 900; font-size: clamp(22px, 3vw, 32px); margin-bottom: 14px; text-align: center; }
.steps__sub { color: var(--text-muted); font-size: 16px; line-height: 1.7; max-width: 640px; margin: 0 auto 22px; text-align: center; }
.hero-badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.info-badge { display: inline-flex; align-items: center; gap: 8px; background: oklch(24% 0.01 258); padding: 10px 18px; border-radius: 50px; box-shadow: var(--shadow); font-weight: 600; color: var(--text); font-size: 14px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { background: var(--panel); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.step__num { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: white; font-family: var(--font-display); font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.step p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Contact section bits (shared with book.html) */
.contact-method { display: flex; align-items: center; gap: 14px; }
.contact-method__icon { font-size: 28px; }
.book-card-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.book-card-value { font-weight: 700; color: var(--text); margin-top: 2px; }

/* Modal (bundle builder) */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden], .drawer[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal__panel { position: relative; background: var(--panel); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.6); width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 26px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.modal__head h2 { font-weight: 900; font-size: 22px; }
.modal__close { font-size: 28px; line-height: 1; color: var(--text-muted); padding: 4px 10px; border-radius: 8px; }
.modal__close:hover { color: var(--text); background: var(--gold-pale); }
.modal__sub { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
.modal__rows { display: flex; flex-direction: column; }
.modal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.modal__row:last-child { border-bottom: none; }
.modal__row-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.modal__row-sub { color: var(--text-muted); font-size: 12.5px; }
.modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.modal__remaining { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--gold); }

/* Cart drawer */
.drawer { position: fixed; inset: 0; z-index: 300; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(430px, 100%); background: var(--panel); box-shadow: -20px 0 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 12px; }
.drawer__head h2 { font-weight: 900; font-size: 22px; }
.drawer__body { flex: 1; overflow: auto; padding: 10px 22px; }
.drawer__foot { border-top: 1px solid var(--border); padding: 16px 22px 92px; display: flex; flex-direction: column; gap: 12px; }
.drawer__note { color: var(--text-muted); font-size: 12.5px; text-align: center; margin-top: 2px; }

.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; }
.cart-line:last-child { border-bottom: none; }
.cart-line__img { width: 44px; height: 62px; border-radius: 8px; object-fit: cover; object-position: top; flex: 0 0 auto; background: oklch(28% 0.01 258); }
.cart-line__main { flex: 1; min-width: 0; }
.cart-line__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.25; }
.cart-line__sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.cart-line__price { font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-top: 4px; }
.cart-line__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-line__remove { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 6px; border-radius: 6px; }
.cart-line__remove:hover { color: oklch(70% 0.19 25); background: var(--gold-pale); }
.cart-empty { text-align: center; color: var(--text-muted); padding: 48px 10px; font-size: 15px; }

.totals { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.totals__row { display: flex; justify-content: space-between; color: var(--text-muted); }
.totals__row strong { color: var(--text); font-weight: 700; }
.totals__row--save strong { color: var(--teal); }
.totals__row--total { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; font-size: 17px; color: var(--text); }
.totals__row--total strong { font-family: var(--font-display); font-weight: 900; font-size: 20px; }

.checkout__err { background: oklch(24% 0.02 25); border: 1px solid oklch(45% 0.15 25); color: oklch(80% 0.12 25); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }

/* ===== Hero scroll story ===== */

/* Structure & stacking ladder — z-indexes are local to the stage's own stacking
   context (isolation: isolate), so they stay far below nav (100) and modal/drawer (300). */
.hero__scroll { height: 800vh; }
/* Stage glow: warm gold spotlight + teal wash keeps every beat colorful
   against calm navy — the puzzle exhibits hang on it like a gallery wall. */
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 58% 44% at 50% 36%, oklch(72% 0.20 30 / 0.22), transparent 70%),
    radial-gradient(ellipse 46% 36% at 10% 80%, oklch(62% 0.20 178 / 0.14), transparent 70%),
    radial-gradient(ellipse 42% 30% at 90% 68%, oklch(72% 0.20 30 / 0.11), transparent 70%);
}
.hero__band { z-index: 3; }
.hero__floater { z-index: 4; }
.hero__card { z-index: 6; }
.hero__copy { z-index: 8; }
.hero__locks { z-index: 9; }
.hero-js [data-hero-el] { will-change: transform; }

/* Home positions (desktop). No transforms here — hero.js adds scroll transforms
   additively on top of these static positions. */

/* Readability: dim whatever art drifts into the bottom band where the copy and
   locks live. Sits above floaters (4) but below the cards (6) and copy (8). */
.hero__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42vh;
  background: linear-gradient(to top, oklch(14% 0.01 258 / 0.97), oklch(14% 0.01 258 / 0.72) 55%, transparent);
  z-index: 5; pointer-events: none;
}
/* Short viewports (iPad-class): the copy rides higher over the cards, so the
   band has to climb with it. */
@media (max-height: 900px) {
  .hero__stage::after { height: 58vh; }
  .hero__card img { width: clamp(170px, 20vw, 265px); }
  .hero__copy { padding-bottom: 12vh; }
}

.hero__band { position: absolute; left: 0; width: 100%; }
/* Bunting hangs below the sticky nav — once the page scrolls, the stage
   tucks behind the nav, and top:0 would clip the flag tops off. */
.hero__band--bunting { top: 72px; }
@media (max-width: 719px) { .hero__band--bunting { top: 68px; } }
.hero__band img { width: 100%; height: auto; display: block; }

/* Confetti: a scatter of drifting brand-color flecks so the early beats
   feel festive instead of empty. Pure CSS, ignored by hero.js. */
.hero__confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__confetti i {
  position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0.5;
  background: var(--gold); animation: heroDrift 9s ease-in-out infinite alternate;
}
.hero__confetti i:nth-child(1)  { left: 24vw; top: 10vh; background: var(--gold);    animation-delay: -0.4s; }
.hero__confetti i:nth-child(2)  { left: 38vw; top: 22vh; background: var(--teal);    animation-delay: -1.8s; width: 7px; height: 7px; }
.hero__confetti i:nth-child(3)  { left: 63vw; top: 14vh; background: oklch(60% 0.19 25); animation-delay: -3.1s; }
.hero__confetti i:nth-child(4)  { left: 78vw; top: 30vh; background: var(--gold);    animation-delay: -2.2s; width: 11px; height: 11px; }
.hero__confetti i:nth-child(5)  { left: 15vw; top: 30vh; background: var(--teal);    animation-delay: -5.0s; }
.hero__confetti i:nth-child(6)  { left: 50vw; top: 30vh; background: oklch(60% 0.19 25); animation-delay: -6.3s; width: 7px; height: 7px; }
.hero__confetti i:nth-child(7)  { left: 92vw; top: 52vh; background: var(--gold);    animation-delay: -4.4s; }
.hero__confetti i:nth-child(8)  { left: 9vw;  top: 55vh; background: oklch(60% 0.19 25); animation-delay: -7.5s; }
.hero__confetti i:nth-child(9)  { left: 36vw; top: 46vh; background: var(--teal);    animation-delay: -8.1s; width: 11px; height: 11px; }
.hero__confetti i:nth-child(10) { left: 70vw; top: 44vh; background: var(--gold);    animation-delay: -1.0s; width: 7px; height: 7px; }
.hero__confetti i:nth-child(11) { left: 58vw; top: 52vh; background: var(--teal);    animation-delay: -2.9s; }
.hero__confetti i:nth-child(12) { left: 27vw; top: 20vh; background: var(--gold);    animation-delay: -6.8s; width: 7px; height: 7px; }
@keyframes heroDrift { from { transform: translate3d(0, -8px, 0) rotate(-14deg); } to { transform: translate3d(7px, 10px, 0) rotate(16deg); } }

.hero__floater { position: absolute; }
.hero__floater img { width: 100%; height: auto; display: block; }
/* Sparse spotlight lanes: pieces live in the outer thirds only; the center
   belongs to the cards and the copy. At most two pieces share the stage. */
.hero__floater--mantel { left: 67vw; top: 45vh; width: clamp(240px, 25vw, 400px); }
.hero__floater--advent { left: 7vw; top: 44vh; width: clamp(200px, 24vw, 340px); }
.hero__floater--wreath { left: 70vw; top: 13vh; width: clamp(140px, 16vw, 220px); }
.hero__floater--candy { left: 4vw; top: 89vh; width: clamp(180px, 36vw, 460px); }
.hero__floater--holly-a { left: 3vw; top: 6vh; width: clamp(60px, 7vw, 100px); }
.hero__floater--holly-b { left: 88vw; top: 8vh; width: clamp(50px, 6vw, 90px); }
/* Paper pieces: opaque crops of the cards' real framed panels, matted like
   polaroids so they read as physical clues rather than floating artwork. */
.hero__floater--paper img { border: 5px solid oklch(90% 0.02 85 / 0.95); border-radius: 6px; box-shadow: var(--shadow); }
/* Cutout pieces: transparent PNGs — the shadow follows the art's shape. */
.hero__floater--cutout img { filter: drop-shadow(0 12px 26px oklch(14% 0.01 258 / 0.55)); }
.hero__floater--cake { left: 6vw; top: 34vh; width: clamp(150px, 17vw, 260px); }
.hero__floater--fossils { left: 64vw; top: 42vh; width: clamp(220px, 27vw, 400px); }
.hero__floater--gift-tags { left: 6vw; top: 34vh; width: clamp(210px, 24vw, 360px); }
.hero__floater--manifest { left: 7vw; top: 16vh; width: clamp(240px, 26vw, 400px); }
.hero__floater--note { left: 64vw; top: 38vh; width: clamp(190px, 22vw, 320px); }

.hero__card { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hero__card img { width: clamp(200px, 24vw, 320px); height: auto; border-radius: 10px; box-shadow: var(--shadow); }

/* Copy stack: the four beats share one grid cell so they crossfade in place.
   pointer-events none — the full-stage layer would otherwise block hover on
   every floater and card beneath it; only the CTA stays clickable. */
.hero__copy { position: absolute; inset: 0; z-index: 8; display: grid; place-items: end center; align-content: end; text-align: center; padding: 0 24px 17vh; pointer-events: none; }
.hero__copy .hero__cta { pointer-events: auto; }
.hero__beat { grid-area: 1 / 1; }
.hero__beat-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 6vw, 72px); color: var(--text); line-height: 1.05; text-shadow: 0 0 5px oklch(14% 0.01 258 / 1), 0 0 16px oklch(14% 0.01 258 / 0.85), 0 2px 4px oklch(14% 0.01 258 / 0.9); }
.hero__beat-title--finale { font-size: clamp(26px, 4.6vw, 52px); }
.hero__beat-sub { font-family: var(--font-body); font-weight: 400; color: #fff; max-width: 36rem; margin: 12px auto 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; text-shadow: 0 0 3px oklch(14% 0.01 258 / 1), 0 0 8px oklch(14% 0.01 258 / 1), 0 0 18px oklch(14% 0.01 258 / 0.85); }
.hero__beat-sub span { display: block; }
.hero__beat-sub span + span { margin-top: 4px; }
.hero__beat-sub > span:first-child { -webkit-text-stroke: 1px oklch(14% 0.01 258 / 0.9); paint-order: stroke fill; }
.hero__beat-sub-2 { font-weight: 700; color: #fff; }
.hero__cta { margin-top: 22px; }

/* Locks widget is never JS-transformed, so its CSS translate is safe. */
.hero__locks { position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%); z-index: 9; text-align: center; }
.hero__locks-row { display: flex; gap: 16px; justify-content: center; color: oklch(56% 0.10 30); }
.hero__locks svg { width: 24px; height: 24px; }
.hero__locks-caption { font-size: 11px; color: oklch(78% 0.01 258); letter-spacing: 0.08em; margin-top: 6px; text-transform: uppercase; font-family: var(--font-display); text-shadow: 0 1px 2px oklch(14% 0.01 258 / 0.9); }

/* The newest lock pops when its beat arrives — a little unlock "event". */
@keyframes lockPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.55) rotate(-8deg); }
  100% { transform: scale(1); }
}
.hero[data-beat="1"] .hero__lock[data-hero-lock="1"],
.hero[data-beat="2"] .hero__lock[data-hero-lock="2"],
.hero[data-beat="3"] .hero__lock[data-hero-lock="3"],
.hero[data-beat="4"] .hero__lock[data-hero-lock="4"] { animation: lockPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* The caption narrates progress (font-size:0 swap keeps the static line
   for no-JS/reduced-motion, where all four locks show open). */
.hero-js .hero[data-beat] .hero__locks-caption { font-size: 0; }
.hero-js .hero[data-beat="1"] .hero__locks-caption::after { content: "Lock 1 of 4 open — keep scrolling..."; font-size: 11px; }
.hero-js .hero[data-beat="2"] .hero__locks-caption::after { content: "Lock 2 of 4 open"; font-size: 11px; }
.hero-js .hero[data-beat="3"] .hero__locks-caption::after { content: "Lock 3 of 4 open"; font-size: 11px; }
.hero-js .hero[data-beat="4"] .hero__locks-caption::after,
.hero-js .hero[data-beat="5"] .hero__locks-caption::after { content: "Unlocked"; font-size: 11px; color: var(--gold-light); }

/* Celebration when the fourth lock opens (or the CTA is clicked). */
@keyframes titlePop {
  0% { transform: scale(0.92); opacity: 0.4; }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes heroBurst {
  0% { transform: scale(1) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.9) rotate(25deg); opacity: 0.95; }
  100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
}
.hero[data-complete="1"] .hero__beat-title--finale { animation: titlePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hero[data-complete="1"] .hero__confetti i { animation: heroBurst 0.8s ease-out; }
.hero[data-complete="1"] .hero__locks-row { color: var(--gold); }

/* ---- Hover-to-inspect: puzzles invite a closer look (fine pointers only) ---- */
@media (hover: hover) and (pointer: fine) {
  .hero__floater, .hero__card { pointer-events: none; }
  /* Only pieces actually on stage in the current beat are hoverable, so
     faded-out floaters never ghost-tooltip. Floaters inspect (tooltip);
     cards open the product quick view, so they take the pointer cursor. */
  .hero[data-beat="1"] .hero__card img, .hero[data-beat="2"] .hero__card img,
  .hero[data-beat="1"] .hero__card-inner, .hero[data-beat="2"] .hero__card-inner {
    pointer-events: auto; cursor: pointer;
  }
  .hero[data-beat="2"] .hero__floater--mantel,
  .hero[data-beat="3"] .hero__floater--manifest,
  .hero[data-beat="4"] .hero__floater--cake, .hero[data-beat="4"] .hero__floater--fossils,
  .hero[data-beat="4"] .hero__floater--gift-tags,
  .hero[data-beat="5"] .hero__floater--note, .hero[data-beat="5"] .hero__floater--advent,
  .hero[data-beat="5"] .hero__floater--wreath { pointer-events: auto; cursor: zoom-in; }
  .hero__card-inner:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
  .hero__floater img, .hero__card img { transition: transform 0.25s ease; }
  .hero__floater:hover img, .hero__card:hover img { transform: scale(1.07); }
  .hero__floater:hover::after, .hero__card:hover::after {
    content: attr(data-clue);
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
    background: oklch(20% 0.01 258 / 0.95); border: 1px solid var(--gold-pale);
    color: var(--text); font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
    letter-spacing: 0.01em; text-transform: none; line-height: 1.35;
    padding: 7px 11px; border-radius: 8px; white-space: nowrap; max-width: 300px;
    pointer-events: none; z-index: 10; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
  /* Cards are full-stage divs; anchor their tooltip to the visible card instead. */
  .hero__card:hover::after { bottom: auto; top: 24vh; }
  /* Corner piece: grow the tooltip leftward so it stays on screen. */
  .hero__floater--mantel:hover::after { left: auto; right: -5px; transform: none; }
}

/* Scroll-hint cue — fades in a beat after load and retires (via data-scrolled
   from hero.js) once the visitor starts scrolling. */
.hero__scrollhint { position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%); z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 2px; color: oklch(80% 0.01 258); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.hero__scrollhint svg { animation: heroHint 1.5s ease-in-out infinite alternate; }
@keyframes heroHint { from { transform: translateY(0); } to { transform: translateY(6px); } }
.hero-js .hero:not([data-scrolled]) .hero__scrollhint { opacity: 1; transition-delay: 1.2s; }
:root:not(.hero-js) .hero__scrollhint { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#shop { scroll-margin-top: 84px; }

/* Copy visibility — hero.js sets data-beat on [data-hero-root]; beats crossfade in place. */
.hero-js .hero__beat { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.65s ease, transform 0.65s ease, visibility 0s linear 0.65s; }
/* Failed-load fallback: if hero.js never runs, beat 1 still shows. Scoped to the
   absence of data-beat so the hide rule above can never fight it; data-beat rules below outrank both. */
.hero-js .hero:not([data-beat]) .hero__beat--1 { opacity: 1; visibility: visible; transform: none; }
.hero-js .hero[data-beat="1"] .hero__beat--1,
.hero-js .hero[data-beat="2"] .hero__beat--2,
.hero-js .hero[data-beat="3"] .hero__beat--3,
.hero-js .hero[data-beat="4"] .hero__beat--4,
.hero-js .hero[data-beat="5"] .hero__beat--5 { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }

/* Locks unlock cumulatively: data-beat="N" means locks 1..N are open. */
.hero__lock-shackle { transform-origin: 9px 11px; transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.45s ease; }
.hero__lock-body { transition: color 0.45s ease; }
.hero[data-beat="1"] .hero__lock[data-hero-lock="1"],
.hero[data-beat="2"] .hero__lock[data-hero-lock="1"], .hero[data-beat="2"] .hero__lock[data-hero-lock="2"],
.hero[data-beat="3"] .hero__lock[data-hero-lock="1"], .hero[data-beat="3"] .hero__lock[data-hero-lock="2"], .hero[data-beat="3"] .hero__lock[data-hero-lock="3"],
.hero[data-beat="4"] .hero__lock,
.hero[data-beat="5"] .hero__lock { color: var(--gold); }
.hero[data-beat="1"] .hero__lock[data-hero-lock="1"] .hero__lock-shackle,
.hero[data-beat="2"] .hero__lock[data-hero-lock="1"] .hero__lock-shackle, .hero[data-beat="2"] .hero__lock[data-hero-lock="2"] .hero__lock-shackle,
.hero[data-beat="3"] .hero__lock[data-hero-lock="1"] .hero__lock-shackle, .hero[data-beat="3"] .hero__lock[data-hero-lock="2"] .hero__lock-shackle, .hero[data-beat="3"] .hero__lock[data-hero-lock="3"] .hero__lock-shackle,
.hero[data-beat="4"] .hero__lock-shackle,
.hero[data-beat="5"] .hero__lock-shackle { transform: translateY(-2px) rotate(-28deg); }

/* hero-js pre-states (anti-flash: match the hero.js intro-from states exactly —
   the one-time load intro starts from these and blends into the scroll state). */
.hero-js [data-hero-el="bunting"],
.hero-js [data-hero-el="card-bday"],
.hero-js .hero__floater { opacity: 0; }
.hero-js [data-hero-el="card-dino"] { opacity: 0; transform: translate3d(-60vw, 8vh, 0) rotate(-16deg) scale(0.8); }
.hero-js [data-hero-el="card-xmas"] { opacity: 0; transform: translate3d(60vw, 8vh, 0) rotate(16deg) scale(0.8); }

/* Idle motion lives on inner wrappers only, so scroll transforms on [data-hero-el] compose. */
[data-hero-idle="bob"] { animation: heroBob var(--idle-dur, 5s) ease-in-out var(--idle-delay, 0s) infinite alternate; }
@keyframes heroBob { from { transform: translateY(-1.2vh) rotate(-1deg); } to { transform: translateY(1.2vh) rotate(1deg); } }
[data-hero-idle="sway"] { animation: heroSway var(--idle-dur, 7s) ease-in-out var(--idle-delay, 0s) infinite alternate; }
@keyframes heroSway { from { transform: rotate(-1.1deg) translateX(-0.4vw); } to { transform: rotate(1.1deg) translateX(0.4vw); } }

/* Static mode — no JS or reduced motion (the head script never adds .hero-js in those cases).
   Collage at home positions, finale copy + CTA, all four locks open. */
:root:not(.hero-js) .hero__scroll { height: auto; }
:root:not(.hero-js) .hero__stage { position: relative; height: auto; min-height: 100svh; padding: 12vh 0 16vh; }
:root:not(.hero-js) .hero__band,
:root:not(.hero-js) .hero__floater { opacity: 0.9; }
:root:not(.hero-js) [data-hero-el="card-dino"] { transform: translate(-16vw, 6vh) rotate(-8deg) scale(0.85); }
:root:not(.hero-js) [data-hero-el="card-xmas"] { transform: translate(16vw, 6vh) rotate(8deg) scale(0.85); }
/* Beats release back into flow: 1-3 collapse to stacked lead-in titles, 4 shows in full. */
:root:not(.hero-js) .hero__beat { grid-area: auto; }
:root:not(.hero-js) .hero__beat--1 .hero__beat-sub,
:root:not(.hero-js) .hero__beat--2 .hero__beat-sub,
:root:not(.hero-js) .hero__beat--3 .hero__beat-sub,
:root:not(.hero-js) .hero__beat--4 .hero__beat-sub { display: none; }
:root:not(.hero-js) .hero__beat--1 .hero__beat-title,
:root:not(.hero-js) .hero__beat--2 .hero__beat-title,
:root:not(.hero-js) .hero__beat--3 .hero__beat-title,
:root:not(.hero-js) .hero__beat--4 .hero__beat-title { font-size: clamp(20px, 3vw, 30px); margin: 6px 0 0; }
:root:not(.hero-js) .hero__lock { color: var(--gold); }
:root:not(.hero-js) .hero__lock-shackle { transform: translateY(-2px) rotate(-28deg); }

@media (prefers-reduced-motion: reduce) { [data-hero-idle] { animation: none; } .hero__scrollhint { display: none; } .hero__confetti i { animation: none; } .hero__lock, .hero__beat-title--finale { animation: none !important; } .hero__floater img, .hero__card img { transition: none; } }

/* Breakpoints */
@media (max-width: 719px) {
  .hero__scroll { height: 700vh; }
  /* Mobile cast: the three cards, the mantelpiece under the beat-2 fan,
     the manifest in beat 3, the cake through beat 4, and both gallery
     pieces. Timing lives in hero.js's MOBILE table so no beat runs empty. */
  .hero__floater--fossils,
  .hero__floater--gift-tags,
  .hero__floater--candy,
  .hero__floater--holly-a,
  .hero__floater--holly-b,
  .hero__floater--note { display: none; }
  .hero__floater--mantel { left: 8vw; top: 34vh; width: clamp(280px, 84vw, 360px); }
  .hero__floater--manifest { left: 14vw; top: 30vh; width: clamp(220px, 70vw, 300px); }
  .hero__floater--cake { left: 14vw; top: 34vh; width: clamp(200px, 60vw, 280px); }
  .hero__floater--advent { left: 10vw; top: 32vh; width: clamp(220px, 72vw, 300px); }
  .hero__floater--wreath { left: 14vw; top: 12vh; width: clamp(150px, 42vw, 220px); }
  .hero__copy { padding-bottom: 20vh; }
  .hero__locks { bottom: 2.5vh; }
  .hero__card img { width: clamp(150px, 44vw, 220px); }
}

@media (min-width: 1080px) {
  .hero__floater--mantel { width: clamp(260px, 27vw, 430px); }
  .hero__floater--cake { width: clamp(170px, 18vw, 280px); }
  .hero__floater--fossils { width: clamp(250px, 29vw, 440px); }
  .hero__floater--gift-tags { width: clamp(230px, 26vw, 400px); }
  .hero__floater--advent { width: clamp(230px, 26vw, 380px); }
  .hero__floater--wreath { width: clamp(150px, 17vw, 240px); }
  .hero__floater--manifest { width: clamp(260px, 28vw, 440px); }
  .hero__floater--note { width: clamp(210px, 24vw, 350px); }
  .hero__floater--candy { width: clamp(200px, 36vw, 520px); }
  .hero__floater--holly-a { width: clamp(68px, 7.5vw, 115px); }
  .hero__floater--holly-b { width: clamp(56px, 6.5vw, 100px); }
  .hero__beat-title { font-size: clamp(38px, 6.4vw, 84px); }
  .hero__beat-title--finale { font-size: clamp(30px, 5vw, 60px); }
}

/* ===== Product detail modal ===== */

/* Panel rides on the existing .modal/.modal__backdrop/.modal__close rules;
   these override the bundle panel's width/padding so the spread sits flush. */
.detail-panel { width: min(92vw, 720px); max-height: 92dvh; border: 1px solid var(--border); padding: 0; }
/* Author display rules beat the UA's [hidden], so hidden variants need an explicit out
   (same trick as .modal[hidden] above). */
.detail__media[hidden], .detail__inside[hidden], .detail__ages[hidden], .detail__actions .btn[hidden] { display: none; }

.detail__close { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,0.5); color: white; backdrop-filter: blur(4px); }
.detail__close:hover { color: white; background: rgba(0,0,0,0.7); }

/* Media: one fixed stage that both views share — the portrait cover and the
   landscape spread both letterbox onto it, crossfading via data-view. */
.detail__media { position: relative; aspect-ratio: 4 / 3; background: oklch(28% 0.01 258); border-bottom: 1px solid var(--border); }
.detail__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; opacity: 0; transition: opacity 0.3s ease; }
.detail__media[data-view="front"] .detail__front,
.detail__media[data-view="inside"] .detail__inside { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .detail__img { transition: none; } }

/* Pager: segmented pill pinned to the media's bottom edge. */
.detail__pager { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 50px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.12); z-index: 2; }
.detail__page { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; color: oklch(80% 0.01 258); background: transparent; border: 0; border-radius: 50px; padding: 6px 14px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.detail__page:hover { color: white; }
.detail__page[aria-selected="true"] { background: var(--gold); color: oklch(16% 0.01 258); }

.detail__body { padding: 22px 26px 26px; }
.detail__body h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text); line-height: 1.2; }
.detail__subtitle { color: var(--text-muted); font-size: 15px; margin-top: 4px; }
.detail__ages { display: inline-block; background: var(--gold-pale); color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 50px; margin-top: 10px; }
.detail__desc { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; max-width: 60ch; margin-top: 12px; }

.detail__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.detail__actions .btn { min-width: 200px; }
/* Ghost button pairs with .btn--primary inside the detail actions. */
.btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--gold-pale); border-color: var(--gold); color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.4); }

/* Grid cards open the detail modal — they get a pointer and a hover lift. */
.product-card { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.product-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 640px) {
  .detail-panel { width: 100%; }
  .detail__body { padding: 20px 18px 22px; }
  .detail__actions { flex-direction: column; }
  .detail__actions .btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card { transition: none; }
  .product-card:hover { transform: none; }
}