/* PR-0379 — SEO 960px only; jesbel motion/layout untouched */
@media (max-width: 960px) {
  .max-w-shell {
    max-width: 100%;
  }
}

/* PR-0380 — PDP title row (do not flex the whole info column) + gallery demo */
.mc-pdp-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.mc-pdp-title-row h1 {
  margin-top: 0;
  flex: 1 1 12rem;
}

body.mc-pdp main .hud-panel a[data-live-demo] {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
}
body.mc-pdp main .hud-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  min-height: 280px;
}
body.mc-pdp [data-live-demo-caption] {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 159, 0.45);
  background: rgba(8, 12, 16, 0.88);
  color: #e8fff4;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  pointer-events: none;
}
@media (min-width: 1024px) {
  body.mc-pdp main .hud-panel img {
    min-height: 420px;
  }
}

/* PR-0641/0642/0644/0645 — unified store type ramp + catalog/header/mobile.
   Live store home is a Tailwind SPA that does NOT load shop.css, so the
   operator-visible type scale for the home/catalog/header/mobile lives here.
   Layout/typography only — no checkout, no PHP, no bundle edits. */
:root {
  --mct-nav-h: 64px;
  --mct-fs-body: 1rem;        /* 16 — running body */
  --mct-fs-sm: 0.95rem;        /* 15 — card desc / meta */
  --mct-fs-chip: 0.72rem;      /* 11.5 — kickers / PREMIUM chip (uppercase) */
  --mct-fs-card-title: 1.0625rem; /* 17 — product card title */
  --mct-fs-card-price: 1.15rem;   /* 18.4 — card price (tabular) */
  --mct-fs-sec-title: 1.5rem;     /* 24 — section h2 */
  --mct-fs-nav: 0.95rem;          /* 15.2 — nav links */
  --mct-ramp-ease: 200ms;
}

/* ── DIP-0644 · store header wordmark / logo lockup / sticky bar ──
   Header inner uses .h-16 (4rem). Wordmark + sublabel sized for the dark
   bar; the main Store nav links (Store / All kits / How it works) sit on
   the ramp. The action buttons (.rounded-pill) keep their own scale so
   the cart badge and Sign in are not re-flowed. */
header .h-16 {
  height: var(--mct-nav-h);
}
header a[data-discover] .font-heading {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
header a[data-discover] .hud-label {
  font-size: var(--mct-fs-chip);
  letter-spacing: 0.12em;
}
header nav > a {
  font-size: var(--mct-fs-nav);
}

/* ── DIP-0641/0642 · catalog grid card: 16:10 thumb + title/price/chip stack ──
   The SPA renders each store card as a .hud-panel containing an
   a[href^="/product"] media box (aspect-[4/3]) + a body column.
   Override the Tailwind aspect to a consistent 16:10 and set the type ramp. */
#store article.hud-panel > a,
#store article.hud-panel > a.aspect-\[4\/3\],
#store .aspect-\[4\/3\] {
  aspect-ratio: 16 / 10 !important;
}
#store article.hud-panel > a {
  display: block;
  overflow: hidden;
}
#store article.hud-panel > a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
#store .hud-panel {
  min-width: 0;
  max-width: 100%;
}
#store .hud-panel > div {
  min-width: 0;
  max-width: 100%;
}
#store h3 {
  font-size: var(--mct-fs-card-title);
  line-height: 1.25;
}
#store .hud-label {
  font-size: var(--mct-fs-chip);
  letter-spacing: 0.12em;
}
/* card description line */
#store .text-muted-foreground {
  font-size: var(--mct-fs-sm);
}
/* price (the bold span in the border-t footer row) */
#store .border-t .font-heading {
  font-size: var(--mct-fs-card-price);
  font-variant-numeric: tabular-nums;
}


/* ── DIP-0645 · <720px: no horizontal overflow · readable type · full-width stack */
@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  #main,
  main,
  header,
  #top,
  #store,
  .max-w-shell {
    min-width: 0;
    max-width: 100%;
  }
  header .h-16,
  header nav {
    min-width: 0;
  }
  /* sticky header row: allow wrap / shrink so Cart+Sign in do not force 526px */
  header .h-16 {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--mct-nav-h);
    row-gap: 0.35rem;
  }
  #store {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #store h3 {
    font-size: var(--mct-fs-card-title);
  }
  #store article.hud-panel > a,
  #store .aspect-\[4\/3\] {
    aspect-ratio: 16 / 10 !important;
  }
  #store h2 {
    font-size: var(--mct-fs-sec-title);
  }
  #top h1 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  }
  /* kit comparison / wide tables */
  #store table,
  #all-kits table,
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* PR-0490 · Equal-size catalog cards; all products use one grid cell. */
#store > .grid{grid-auto-rows:1fr;align-items:stretch}
#store article.hud-panel{grid-column:auto;width:100%;height:100%}
#store article.hud-panel > a{flex-shrink:0}
#store article.hud-panel > div > .border-t{margin-top:auto;padding-top:1.25rem}
#store article.hud-panel > div > ul{margin-bottom:1.5rem}

/* editorial kickers above the section title (All kits / How it works) */
#all-kits .hud-label,
#how-it-works .hud-label {
  letter-spacing: 0.24em;
}
/* 1px champagne hairline reading as a section rule above the header */
#all-kits::before,
#how-it-works::before {
  content: "";
  display: block;
  width: min(100% - 2.5rem, 78rem);
  margin: 0 auto clamp(1.1rem, 3vw, 1.8rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #C9A86C 60%, transparent) 16%,
    color-mix(in srgb, #C9A86C 60%, transparent) 84%,
    transparent
  );
}
/* price vs compare-at as a quiet optical pair (tabular, muted, no pill)
   — applies wherever a line-through compare-at sits beside the price */
#store .border-t .font-heading {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.005em;
}
#store .border-t .font-heading + .line-through {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  margin-left: 0.4rem;
  vertical-align: baseline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ═════════════════════════════════════════════════════════════════
   DIP-0648 · Product card cinematic stage — CSS hover, focus ring,
   editorial chip. Transforms/overlay gated on prefers-reduced-motion.
   Does not touch the 16:10 aspect (0642) or the type ramp (0641). */
#store article.hud-panel > a img {
  transform: scale(1);
  transition: transform var(--mct-ramp-ease) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#store article.hud-panel > a {
  position: relative;
}
#store article.hud-panel > a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity var(--mct-ramp-ease) cubic-bezier(0.22, 1, 0.36, 1);
}
/* Override SPA Tailwind hover:scale-[1.03] utility to 1.04 */
@media (prefers-reduced-motion: no-preference) {
  #store .hover\:scale-\[1\.03\]:hover,
  #store .hover\:scale-\[1\.03\]:focus-visible,
  #store article.hud-panel > a.hover\:scale-\[1\.03\]:hover,
  #store article.hud-panel > a.hover\:scale-\[1\.03\]:focus-visible {
    --tw-scale-x: 1.04 !important;
    --tw-scale-y: 1.04 !important;
  }
  #store article.hud-panel > a:hover img,
  #store article.hud-panel > a:focus-visible img,
  #store .hud-panel:hover > a img {
    transform: scale(1.04);
  }
  #store article.hud-panel > a:hover::after,
  #store article.hud-panel > a:focus-visible::after,
  #store article.hud-panel > a:has(img):hover::after,
  #store article.hud-panel > a:has(img):focus-visible::after {
    opacity: 1;
  }
}
/* keyboard ring on the card link; hover never steals it (focus-visible only) */
#store article.hud-panel > a:focus-visible {
  outline: 2px solid var(--color-primary, #4ade9f);
  outline-offset: 2px;
  border-radius: 4px;
}
/* editorial chip for the card category label — quiet, tracked, not a pill */
#store .hud-panel .hud-label {
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════
   DIP-0649 · Cart + checkout visual system — match the store, editorial
   empty state, sticky order summary at >=1024. No Stripe / PHP / prices.
   The store header + type ramp already carry over via :root tokens;
   these rules refine the cart DOM (React-rendered line items / summary). */
/* editorial empty cart: kicker already global; tighten the panel */
.hud-panel.mx-auto.max-w-md {
  text-align: center;
  padding: 2.75rem 2rem;
  border-top: 2px solid var(--color-primary, #4ade9f);
}
/* cart line items: legible thumb + baseline-aligned price + each */
main ul.divide-y.divide-border > li {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  min-width: 0;
}
main ul.divide-y.divide-border a[aria-label],
main ul.divide-y.divide-border .rounded-pill[aria-label] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* sticky order summary at desktop; stacks below */
@media (min-width: 1024px) {
  .space-y-6.lg\:col-span-4 > .hud-panel {
    position: sticky;
    top: calc(var(--mct-nav-h) + 1.5rem);
    align-self: start;
  }
}
@media (max-width: 720px) {
  main ul.divide-y.divide-border > li {
    flex-direction: column;
    align-items: stretch;
  }
  main ul.divide-y.divide-border a[href^="/product"] {
    min-height: 44px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   DIP-0651 · Type loading + motion + reduced-motion pack.
   - Manrope (the declared heading face) resolved via local() + swap so
     there is no FOUT and no webfont vendor is added.
   - 200ms translateY(-4px) hover lift on catalog cards.
   - One store-wide prefers-reduced-motion kill switch.
   Loading + motion only — not sizes (0641) or aspect (0642). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local("Manrope"), local("Manrope Variable");
}
@media (prefers-reduced-motion: no-preference) {
  #store .hud-panel {
    transition: transform var(--mct-ramp-ease) cubic-bezier(0.22, 1, 0.36, 1),
      border-color var(--mct-ramp-ease) cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow var(--mct-ramp-ease) cubic-bezier(0.22, 1, 0.36, 1);
  }
  #store .hud-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7);
  }
}
/* store-wide reduced-motion kill switch: no transform / animation / overlay */
@media (prefers-reduced-motion: reduce) {
  #store .hud-panel,
  #store .hud-panel *,
  #store article.hud-panel > a,
  #store article.hud-panel > a img,
  #store article.hud-panel > a::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  #store *,
  #top *,
  #all-kits *,
  #how-it-works *,
  #moodboard-deal *,
  #moodboard-pack2-deal * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* PR-0508 · Incredible Deal moodboard strip above #store */
#moodboard-deal {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-w-shell, 78rem);
  padding: 0 var(--shell-padding-mobile, 1.25rem) 0.5rem;
}
@media (min-width: 768px) {
  #moodboard-deal {
    padding-left: var(--shell-padding, 2rem);
    padding-right: var(--shell-padding, 2rem);
  }
}
#moodboard-deal .mb-deal-panel {
  border: 1px solid color-mix(in srgb, #C9A86C 45%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201, 168, 108, 0.08), rgba(5, 10, 18, 0.4));
  padding: 1.25rem 1.35rem 1.4rem;
}
#moodboard-deal .hud-label {
  letter-spacing: 0.22em;
  color: #C9A86C;
}
#moodboard-deal h2 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.5rem;
}
#moodboard-deal .mb-deal-copy {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: var(--mct-fs-sm, 0.95rem);
  color: var(--color-muted-foreground, #9aa7b5);
}
#moodboard-deal .mb-deal-stage {
  margin-top: 0.85rem;
  border: 1px solid rgba(61, 224, 255, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #050a12;
}
#moodboard-deal .mb-deal-stage iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 280px;
  border: 0;
  background: #050a12;
}
#moodboard-deal .mb-deal-stagebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.8rem;
  background: rgba(7, 16, 24, 0.95);
  font-size: 0.85rem;
}
#moodboard-deal .mb-deal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.75rem;
}
@media (min-width: 720px) {
  #moodboard-deal .mb-deal-thumbs {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
#moodboard-deal .mb-deal-thumb {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(61, 224, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
#moodboard-deal .mb-deal-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
#moodboard-deal .mb-deal-thumb span {
  display: block;
  padding: 0.25rem 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  color: #9aa7b5;
}
#moodboard-deal .mb-deal-thumb.is-on,
#moodboard-deal .mb-deal-thumb:hover,
#moodboard-deal .mb-deal-thumb:focus-visible {
  border-color: #C9A86C;
  outline: none;
}
#moodboard-deal .mb-deal-thumb.is-on span { color: #C9A86C; }
#moodboard-deal .mb-deal-cta {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  color: #9aa7b5;
}
#moodboard-deal .mb-deal-price {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #e8fff4;
}
#moodboard-deal .mb-deal-stage-inner {
  position: relative;
  background: #050a12;
}
#moodboard-deal .mb-deal-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #050a12;
}
#moodboard-deal .mb-deal-poster[hidden] { display: none !important; }
#moodboard-deal .mb-deal-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#moodboard-deal .mb-deal-poster p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.4rem 0.8rem 0.65rem;
  background: linear-gradient(transparent, rgba(5, 10, 18, 0.94));
  color: #C9A86C;
  font-size: 0.82rem;
  font-weight: 650;
}
#moodboard-deal .mb-deal-stagebar {
  align-items: center;
}
#moodboard-deal .mb-deal-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#moodboard-deal .mb-deal-transport-btn,
#moodboard-deal .mb-deal-stagebar a[data-mb-open] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 108, 0.38);
  background: #0c1520;
  color: #e8fff4;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
#moodboard-deal .mb-deal-transport-btn[aria-pressed="true"] {
  border-color: #C9A86C;
  color: #C9A86C;
}
#moodboard-deal .mb-deal-transport-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#moodboard-deal .mb-deal-transport-btn:focus-visible,
#moodboard-deal .mb-deal-stagebar a[data-mb-open]:focus-visible,
#moodboard-deal .mb-deal-thumb:focus-visible {
  outline: 2px solid #C9A86C;
  outline-offset: 2px;
}
#moodboard-deal .mb-deal-thumb {
  min-height: 44px;
}
#moodboard-deal.mb-deal--pdp {
  margin-top: 1rem;
  margin-bottom: 1.15rem;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.mc-pdp[data-mc-demo-sku="moodboard-set"] .mc-pdp-pack1-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
#moodboard-deal.mb-deal--pdp-gallery {
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 0.85rem;
  padding: 0;
}
#moodboard-deal.mb-deal--pdp-gallery .mb-deal-panel {
  height: 100%;
}
/* Locked 16:10 stage. Mobile fills it like V2 (full-bleed 4:3 stack). Grid fills it with the board. */
#moodboard-deal.mb-deal--pdp-gallery .mb-deal-stage {
  background: #050a12;
}
#moodboard-deal.mb-deal--pdp-gallery .mb-deal-stage-inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  max-height: 72vh;
  overflow: hidden;
  background: #050a12;
}
@media (min-width: 1024px) {
  #moodboard-deal.mb-deal--pdp-gallery .mb-deal-stage-inner {
    min-height: 560px;
  }
}
#moodboard-deal.mb-deal--pdp-gallery .mb-deal-stage iframe,
#moodboard-deal.mb-deal--pdp-gallery[data-mb-mode="mobile"] .mb-deal-stage iframe,
#moodboard-deal.mb-deal--pdp-gallery[data-mb-mode="grid"] .mb-deal-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  border: 0;
}
#moodboard-deal[data-mb-mode="mobile"] .mb-deal-stage,
#moodboard-deal.mb-deal--pdp-gallery[data-mb-mode="mobile"] .mb-deal-stage {
  background: #050a12;
}
#moodboard-deal.mb-deal--pdp-gallery .mb-deal-thumb img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
body.mc-pdp[data-mc-demo-sku="moodboard-set"] main .hud-panel:has(img[src*="moodboard"]):not(:has(#moodboard-deal)) {
  display: none;
}
body.mc-pdp[data-mc-demo-sku="moodboard-set"] main .hud-panel:has(#moodboard-deal) img[src*="moodboard"],
body.mc-pdp[data-mc-demo-sku="moodboard-set"] main .hud-panel:has(#moodboard-deal) a[data-live-demo] {
  display: none;
}
/* Pack 1 live demo is #moodboard-deal on this page — not /moodboards/. */
body.mc-pdp[data-mc-demo-sku="moodboard-set"] [data-view-demo],
body.mc-pdp[data-mc-demo-sku="moodboard-set"] [data-live-demo-caption] {
  display: none !important;
}
#moodboard-deal.mb-deal--pdp .mb-deal-cta:empty {
  display: none;
}
body.mc-pdp[data-mc-demo-sku="moodboard-set"] .mc-pdp-pack1-stack > :not(:has(h1)) {
  display: none;
}


/* PR-0540 · Pack 2 deal uses the same carousel chrome as Pack 1. */
#moodboard-pack2-deal {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-w-shell, 78rem);
  padding: 0 var(--shell-padding-mobile, 1.25rem) 0.5rem;
}
@media (min-width: 768px) {
  #moodboard-pack2-deal {
    padding-left: var(--shell-padding, 2rem);
    padding-right: var(--shell-padding, 2rem);
  }
}
#moodboard-pack2-deal .mb-deal-panel {
  border: 1px solid color-mix(in srgb, #ff6aa8 45%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 106, 168, 0.1), rgba(20, 8, 16, 0.45));
  padding: 1.25rem 1.35rem 1.4rem;
}
#moodboard-pack2-deal .hud-label {
  letter-spacing: 0.22em;
  color: #ff6aa8;
}
#moodboard-pack2-deal h2 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.5rem;
}
#moodboard-pack2-deal .mb-deal-copy {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: var(--mct-fs-sm, 0.95rem);
  color: var(--color-muted-foreground, #c47a9a);
}
#moodboard-pack2-deal .mb-deal-stage {
  margin-top: 0.85rem;
  border: 1px solid rgba(255, 106, 168, 0.28);
  border-radius: 8px;
  overflow: hidden;
  background: #140810;
}
#moodboard-pack2-deal .mb-deal-stage iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 280px;
  border: 0;
  background: #140810;
}
#moodboard-pack2-deal .mb-deal-stagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.8rem;
  background: rgba(24, 10, 18, 0.95);
  font-size: 0.85rem;
}
#moodboard-pack2-deal .mb-deal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.75rem;
}
@media (min-width: 720px) {
  #moodboard-pack2-deal .mb-deal-thumbs {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
#moodboard-pack2-deal .mb-deal-thumb {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 106, 168, 0.25);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
#moodboard-pack2-deal .mb-deal-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
#moodboard-pack2-deal .mb-deal-thumb span {
  display: block;
  padding: 0.25rem 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  color: #c47a9a;
}
#moodboard-pack2-deal .mb-deal-thumb.is-on,
#moodboard-pack2-deal .mb-deal-thumb:hover,
#moodboard-pack2-deal .mb-deal-thumb:focus-visible {
  border-color: #ff6aa8;
  outline: none;
}
#moodboard-pack2-deal .mb-deal-thumb.is-on span { color: #ffd36a; }
#moodboard-pack2-deal .mb-deal-cta {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  color: #c47a9a;
}
#moodboard-pack2-deal .mb-deal-price {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #ffe8f4;
}
#moodboard-pack2-deal .mb-deal-stage-inner {
  position: relative;
  overflow: hidden;
  background: #140810;
}
#moodboard-pack2-deal .mb-deal-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #140810;
}
#moodboard-pack2-deal .mb-deal-poster[hidden] { display: none !important; }
#moodboard-pack2-deal .mb-deal-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#moodboard-pack2-deal .mb-deal-poster p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.4rem 0.8rem 0.65rem;
  background: linear-gradient(transparent, rgba(20, 8, 16, 0.94));
  color: #ffd36a;
  font-size: 0.82rem;
  font-weight: 650;
}
#moodboard-pack2-deal .mb-deal-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#moodboard-pack2-deal .mb-deal-transport-btn,
#moodboard-pack2-deal .mb-deal-stagebar a[data-mb-open] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 106, 168, 0.38);
  background: #1a0c14;
  color: #ffe8f4;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
#moodboard-pack2-deal .mb-deal-transport-btn[aria-pressed="true"] {
  border-color: #ff6aa8;
  color: #ffd36a;
}
#moodboard-pack2-deal .mb-deal-transport-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#moodboard-pack2-deal .mb-deal-transport-btn:focus-visible,
#moodboard-pack2-deal .mb-deal-stagebar a[data-mb-open]:focus-visible,
#moodboard-pack2-deal .mb-deal-thumb:focus-visible {
  outline: 2px solid #ff6aa8;
  outline-offset: 2px;
}
#moodboard-pack2-deal.mb-deal--pdp {
  margin-top: 1rem;
  margin-bottom: 1.15rem;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Pack 3 product gallery matches Pack 1 - GPT-6 Astra, 2026-09-11. */
#moodboard-pack3-deal {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-w-shell, 78rem);
  padding: 0 var(--shell-padding-mobile, 1.25rem) 0.5rem;
}
@media (min-width: 768px) {
  #moodboard-pack3-deal {
    padding-left: var(--shell-padding, 2rem);
    padding-right: var(--shell-padding, 2rem);
  }
}
#moodboard-pack3-deal .mb-deal-panel {
  border: 1px solid color-mix(in srgb, #C9A86C 45%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201, 168, 108, 0.08), rgba(5, 10, 18, 0.4));
  padding: 1.25rem 1.35rem 1.4rem;
}
#moodboard-pack3-deal .hud-label {
  letter-spacing: 0.22em;
  color: #C9A86C;
}
#moodboard-pack3-deal h2 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.5rem;
}
#moodboard-pack3-deal .mb-deal-copy {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: var(--mct-fs-sm, 0.95rem);
  color: var(--color-muted-foreground, #9aa7b5);
}
#moodboard-pack3-deal .mb-deal-stage {
  margin-top: 0.85rem;
  border: 1px solid rgba(61, 224, 255, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #050a12;
}
#moodboard-pack3-deal .mb-deal-stage iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 280px;
  border: 0;
  background: #050a12;
}
#moodboard-pack3-deal .mb-deal-stagebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.8rem;
  background: rgba(7, 16, 24, 0.95);
  font-size: 0.85rem;
}
#moodboard-pack3-deal .mb-deal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.75rem;
}
@media (min-width: 720px) {
  #moodboard-pack3-deal .mb-deal-thumbs {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
#moodboard-pack3-deal .mb-deal-thumb {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(61, 224, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
#moodboard-pack3-deal .mb-deal-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
#moodboard-pack3-deal .mb-deal-thumb span {
  display: block;
  padding: 0.25rem 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  color: #9aa7b5;
}
#moodboard-pack3-deal .mb-deal-thumb.is-on,
#moodboard-pack3-deal .mb-deal-thumb:hover,
#moodboard-pack3-deal .mb-deal-thumb:focus-visible {
  border-color: #C9A86C;
  outline: none;
}
#moodboard-pack3-deal .mb-deal-thumb.is-on span { color: #C9A86C; }
#moodboard-pack3-deal .mb-deal-cta {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  color: #9aa7b5;
}
#moodboard-pack3-deal .mb-deal-price {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #e8fff4;
}
#moodboard-pack3-deal .mb-deal-stage-inner {
  position: relative;
  background: #050a12;
}
#moodboard-pack3-deal .mb-deal-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #050a12;
}
#moodboard-pack3-deal .mb-deal-poster[hidden] { display: none !important; }
#moodboard-pack3-deal .mb-deal-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#moodboard-pack3-deal .mb-deal-poster p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.4rem 0.8rem 0.65rem;
  background: linear-gradient(transparent, rgba(5, 10, 18, 0.94));
  color: #C9A86C;
  font-size: 0.82rem;
  font-weight: 650;
}
#moodboard-pack3-deal .mb-deal-stagebar {
  align-items: center;
}
#moodboard-pack3-deal .mb-deal-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#moodboard-pack3-deal .mb-deal-transport-btn,
#moodboard-pack3-deal .mb-deal-stagebar a[data-mb-open] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 108, 0.38);
  background: #0c1520;
  color: #e8fff4;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
#moodboard-pack3-deal .mb-deal-transport-btn[aria-pressed="true"] {
  border-color: #C9A86C;
  color: #C9A86C;
}
#moodboard-pack3-deal .mb-deal-transport-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#moodboard-pack3-deal .mb-deal-transport-btn:focus-visible,
#moodboard-pack3-deal .mb-deal-stagebar a[data-mb-open]:focus-visible,
#moodboard-pack3-deal .mb-deal-thumb:focus-visible {
  outline: 2px solid #C9A86C;
  outline-offset: 2px;
}
#moodboard-pack3-deal .mb-deal-thumb {
  min-height: 44px;
}
#moodboard-pack3-deal.mb-deal--pdp {
  margin-top: 1rem;
  margin-bottom: 1.15rem;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] .mc-pdp-pack1-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
#moodboard-pack3-deal.mb-deal--pdp-gallery {
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 0.85rem;
  padding: 0;
}
#moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-panel {
  height: 100%;
}
#moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-stage {
  background: #050a12;
}
#moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-stage-inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  max-height: 72vh;
  overflow: hidden;
  background: #050a12;
}
@media (min-width: 1024px) {
  #moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-stage-inner {
    min-height: 560px;
  }
}
#moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-stage iframe,
#moodboard-pack3-deal.mb-deal--pdp-gallery[data-mb-mode="mobile"] .mb-deal-stage iframe,
#moodboard-pack3-deal.mb-deal--pdp-gallery[data-mb-mode="grid"] .mb-deal-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  border: 0;
}
#moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-thumb img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] main .hud-panel:has(img[src*="consequence-collage"]):not(:has(#moodboard-pack3-deal)) {
  display: none;
}
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] main .hud-panel:has(#moodboard-pack3-deal) img[src*="consequence-collage"],
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] main .hud-panel:has(#moodboard-pack3-deal) a[data-live-demo] {
  display: none;
}
/* Pack 1 live demo is #moodboard-pack3-deal on this page — not /moodboards/. */
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] [data-view-demo],
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] [data-live-demo-caption] {
  display: none !important;
}
#moodboard-pack3-deal.mb-deal--pdp .mb-deal-cta:empty {
  display: none;
}

#moodboard-pack3-deal {scroll-margin-top:90px;min-width:0}
#moodboard-pack3-deal iframe[hidden] {display:none!important}
#moodboard-pack3-deal .mb-deal-stage-inner:has(iframe[hidden]) {aspect-ratio:16/10}
#moodboard-pack3-deal .mb-deal-poster img {object-fit:contain}
#moodboard-pack3-deal details.mb-deal-copy {max-width:none;margin:0.4rem 0}
#moodboard-pack3-deal summary {cursor:pointer;min-height:44px;padding:10px 0}
@media(max-width:600px){#moodboard-pack3-deal.mb-deal--pdp-gallery .mb-deal-stage iframe{min-height:620px}}
#pack3-volume-details {scroll-margin-top:90px}
#pack3-volume-details h3,#pack3-volume-details p {margin:8px 0}
body.mc-pdp[data-mc-demo-sku="moodboard-pack3"] .mc-pdp-pack1-stack > :not(:has(h1)) {display:none}

/* PR-0545: Pack 2 follows this baseline's Pack 1 gallery geometry and controls. */
/* PR-0508 · Incredible Deal moodboard strip above #store */
#moodboard-pack2-deal {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-w-shell, 78rem);
  padding: 0 var(--shell-padding-mobile, 1.25rem) 0.5rem;
}
@media (min-width: 768px) {
  #moodboard-pack2-deal {
    padding-left: var(--shell-padding, 2rem);
    padding-right: var(--shell-padding, 2rem);
  }
}
#moodboard-pack2-deal .mb-deal-panel {
  border: 1px solid color-mix(in srgb, #C9A86C 45%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201, 168, 108, 0.08), rgba(5, 10, 18, 0.4));
  padding: 1.25rem 1.35rem 1.4rem;
}
#moodboard-pack2-deal .hud-label {
  letter-spacing: 0.22em;
  color: #C9A86C;
}
#moodboard-pack2-deal h2 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.5rem;
}
#moodboard-pack2-deal .mb-deal-copy {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: var(--mct-fs-sm, 0.95rem);
  color: var(--color-muted-foreground, #9aa7b5);
}
#moodboard-pack2-deal .mb-deal-stage {
  margin-top: 0.85rem;
  border: 1px solid rgba(61, 224, 255, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #050a12;
}
#moodboard-pack2-deal .mb-deal-stage iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 280px;
  border: 0;
  background: #050a12;
}
#moodboard-pack2-deal .mb-deal-stagebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.8rem;
  background: rgba(7, 16, 24, 0.95);
  font-size: 0.85rem;
}
#moodboard-pack2-deal .mb-deal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.75rem;
}
@media (min-width: 720px) {
  #moodboard-pack2-deal .mb-deal-thumbs {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
#moodboard-pack2-deal .mb-deal-thumb {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(61, 224, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
#moodboard-pack2-deal .mb-deal-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
#moodboard-pack2-deal .mb-deal-thumb span {
  display: block;
  padding: 0.25rem 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  color: #9aa7b5;
}
#moodboard-pack2-deal .mb-deal-thumb.is-on,
#moodboard-pack2-deal .mb-deal-thumb:hover,
#moodboard-pack2-deal .mb-deal-thumb:focus-visible {
  border-color: #C9A86C;
  outline: none;
}
#moodboard-pack2-deal .mb-deal-thumb.is-on span { color: #C9A86C; }
#moodboard-pack2-deal .mb-deal-cta {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  color: #9aa7b5;
}
#moodboard-pack2-deal .mb-deal-price {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #e8fff4;
}
#moodboard-pack2-deal .mb-deal-stage-inner {
  position: relative;
  background: #050a12;
}
#moodboard-pack2-deal .mb-deal-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #050a12;
}
#moodboard-pack2-deal .mb-deal-poster[hidden] { display: none !important; }
#moodboard-pack2-deal .mb-deal-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#moodboard-pack2-deal .mb-deal-poster p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.4rem 0.8rem 0.65rem;
  background: linear-gradient(transparent, rgba(5, 10, 18, 0.94));
  color: #C9A86C;
  font-size: 0.82rem;
  font-weight: 650;
}
#moodboard-pack2-deal .mb-deal-stagebar {
  align-items: center;
}
#moodboard-pack2-deal .mb-deal-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#moodboard-pack2-deal .mb-deal-transport-btn,
#moodboard-pack2-deal .mb-deal-stagebar a[data-mb-open] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 108, 0.38);
  background: #0c1520;
  color: #e8fff4;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
#moodboard-pack2-deal .mb-deal-transport-btn[aria-pressed="true"] {
  border-color: #C9A86C;
  color: #C9A86C;
}
#moodboard-pack2-deal .mb-deal-transport-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#moodboard-pack2-deal .mb-deal-transport-btn:focus-visible,
#moodboard-pack2-deal .mb-deal-stagebar a[data-mb-open]:focus-visible,
#moodboard-pack2-deal .mb-deal-thumb:focus-visible {
  outline: 2px solid #C9A86C;
  outline-offset: 2px;
}
#moodboard-pack2-deal .mb-deal-thumb {
  min-height: 44px;
}
#moodboard-pack2-deal.mb-deal--pdp {
  margin-top: 1rem;
  margin-bottom: 1.15rem;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.mc-pdp[data-mc-demo-sku="moodboard-pack2"] .mc-pdp-pack1-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
#moodboard-pack2-deal.mb-deal--pdp-gallery {
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 0.85rem;
  padding: 0;
}
#moodboard-pack2-deal.mb-deal--pdp-gallery .mb-deal-panel {
  height: 100%;
}
/* Grid box is the locked stage. Mobile letterboxes a phone column inside it. */
#moodboard-pack2-deal.mb-deal--pdp-gallery .mb-deal-stage {
  background: #050a12;
}
#moodboard-pack2-deal.mb-deal--pdp-gallery .mb-deal-stage-inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  max-height: 72vh;
  overflow: hidden;
  background: #050a12;
}
@media (min-width: 1024px) {
  #moodboard-pack2-deal.mb-deal--pdp-gallery .mb-deal-stage-inner {
    min-height: 560px;
  }
}
#moodboard-pack2-deal.mb-deal--pdp-gallery .mb-deal-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}
#moodboard-pack2-deal[data-mb-mode="mobile"] .mb-deal-stage,
#moodboard-pack2-deal.mb-deal--pdp-gallery[data-mb-mode="mobile"] .mb-deal-stage {
  background: #050a12;
}
#moodboard-pack2-deal.mb-deal--pdp-gallery[data-mb-mode="mobile"] .mb-deal-stage iframe,
#moodboard-pack2-deal.mb-deal--pdp-gallery[data-mb-mode="grid"] .mb-deal-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  border: 0;
}
#moodboard-pack2-deal.mb-deal--pdp-gallery .mb-deal-thumb img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}


/* Pack 1 live demo is #moodboard-pack2-deal on this page — not /moodboards/. */
body.mc-pdp[data-mc-demo-sku="moodboard-pack2"] [data-view-demo],
body.mc-pdp[data-mc-demo-sku="moodboard-pack2"] [data-live-demo-caption] {
  display: none !important;
}
#moodboard-pack2-deal.mb-deal--pdp .mb-deal-cta:empty {
  display: none;
}
body.mc-pdp[data-mc-demo-sku="moodboard-pack2"] .mc-pdp-pack1-stack > :not(:has(h1)) {
  display: none;
}

#moodboard-pack2-deal iframe[hidden]{display:none!important}