/*
 * Marquee Nights — VeloCMS theme (slug: "marquee-nights")
 * 1:1 port of the founder's Claude-Design canvas "Marquee Nights Theme.dc.html"
 * + "MN Header.dc.html" + "MN Footer.dc.html".
 *
 * "Every night is opening night." Palette: black #0A0A0B (page bg) · chassis
 * #131315 · surface #141416 (cards) · surface-low #101012 (alt bands) · haze
 * #2A2A2E (borders) · hot-pink #FF2E88 (single accent, held everywhere) ·
 * bone #EDEDED. Display: Big Shoulders Display (900, always uppercase) ·
 * Body: Archivo · Mono: JetBrains Mono (code, counters, live-loop badge).
 *
 * All values below are copied verbatim from the design's inline styles and
 * the 1g engineering-notes spec (color tokens, contrast receipts, spacing/
 * radius scale, hover table, motion keyframes, mobile-drawer spec). No
 * rounding, no reinterpretation.
 *
 * Scoped to [data-theme="marquee-nights"] (NOT main-scoped) so /shop and
 * /products/* resolve the same tokens. P-094 token bridge at the bottom.
 */

/* ═══════════════════ COLOR TOKENS (1g) ═══════════════════ */
[data-theme="marquee-nights"] {
  /* canonical (1g TOKENS block) */
  --mn-bg: #0A0A0B;              /* oklch(0.146 0.002 286) */
  --mn-text: #EDEDED;            /* oklch(0.946 0 0) */
  --mn-primary: #FF2E88;         /* oklch(0.655 0.253 356) */
  --mn-accent: #FF2E88;          /* one accent, held everywhere */

  /* supporting neutrals (1g) */
  --mn-surface: #141416;         /* cards — oklch(0.185 0.004 286) */
  --mn-surface-low: #101012;     /* alt bands — oklch(0.170 0.004 286) */
  --mn-border: #2A2A2E;          /* haze — oklch(0.300 0.008 286) */
  --mn-text-muted: rgba(237, 237, 237, 0.62);
  --mn-text-faint: rgba(237, 237, 237, 0.40); /* meta only */
  --mn-primary-hover: #FF579F;   /* oklch(0.70 0.22 356) */
  --mn-cta-ink: #0A0A0B;         /* text ON primary, always */

  /* bone alpha helpers used across the design (from inline rgba() values) */
  --mn-bone-85: rgba(237, 237, 237, 0.85);
  --mn-bone-72: rgba(237, 237, 237, 0.72);
  --mn-bone-62: rgba(237, 237, 237, 0.62);
  --mn-bone-55: rgba(237, 237, 237, 0.55);
  --mn-bone-50: rgba(237, 237, 237, 0.5);
  --mn-bone-40: rgba(237, 237, 237, 0.4);
  --mn-bone-35: rgba(237, 237, 237, 0.35);
  --mn-bone-32: rgba(237, 237, 237, 0.32);
  --mn-scrim: rgba(10, 10, 11, 0.72);       /* mobile drawer scrim */
  --mn-scrim-header: rgba(10, 10, 11, 0.85); /* live-loop badge chip */
  --mn-scrim-panel: rgba(10, 10, 11, 0.82); /* NEXT UP aside */

  /* fonts (registered Wave 0 — getThemeFontVars("marquee-nights")) */
  --mn-heading-font: var(--font-big-shoulders-display), "Arial Narrow", Impact,
    "Helvetica Neue", sans-serif;
  --mn-body-font: var(--font-archivo), "Helvetica Neue", Arial, system-ui,
    sans-serif;
  --mn-mono-font: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo,
    monospace;

  /* layout scale (1g SPACING & RADIUS) */
  --mn-container: 1296px;
  --mn-gutter: 72px;
  --mn-gutter-mobile: 20px;
  --mn-prose: 65ch;

  /* also expose engine names so the shared ThemeMobileMenu drawer inherits
     the correct palette (it reads --velo-bg / --velo-fg / --velo-border /
     --velo-accent) — P-103 portal drawer, matched to Marquee Nights */
  --velo-bg: var(--mn-surface-low);
  --velo-fg: var(--mn-text);
  --velo-border: var(--mn-border);
  --velo-accent: var(--mn-primary);
}

/* Body font inheritance for the whole theme surface */
[data-theme="marquee-nights"] {
  font-family: var(--mn-body-font);
  color: var(--mn-text);
  background: var(--mn-bg);
}

/* ═══════════════════ MOTION — entrances + ambient loops (1g) ═══════════════════ */
@keyframes mn-rise {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes mn-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
@keyframes mn-drift {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  50%      { transform: translate(2%, -2%) scale(1.1); }
}
@keyframes mn-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* NB: opacity is never animated on entrance classes — SSR content is fully
   visible on first frame (P-068). mn-rise mutates transform only, applied on
   load (no IO gate). mn-breathe / mn-drift / mn-kenburns are AMBIENT LOOPS —
   decorative overlays on the hero only, transform/opacity, GPU-composited. */
[data-theme="marquee-nights"] .mn-anim-eyebrow {
  animation: mn-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-theme="marquee-nights"] .mn-anim-h1 {
  animation: mn-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
[data-theme="marquee-nights"] .mn-anim-sub {
  animation: mn-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
[data-theme="marquee-nights"] .mn-anim-cta {
  animation: mn-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}
[data-theme="marquee-nights"] .mn-anim-aside {
  animation: mn-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}
[data-theme="marquee-nights"] .mn-anim-mobile-aside {
  animation: mn-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both;
}
/* upcoming-show list rows: index * 70ms stagger via inline --mn-delay */
[data-theme="marquee-nights"] .mn-anim-row {
  animation: mn-rise 500ms cubic-bezier(0.16, 1, 0.3, 1) var(--mn-delay, 0ms)
    both;
}
/* hero spotlight breathing (radial gradient overlay) */
[data-theme="marquee-nights"] .mn-breathe {
  animation: mn-breathe 7s ease-in-out infinite;
}
/* live-loop badge dot (video hero state) */
[data-theme="marquee-nights"] .mn-breathe-fast {
  animation: mn-breathe 1.6s ease-in-out infinite;
}
/* video hero: ken-burns pan on the <video>/poster itself */
[data-theme="marquee-nights"] .mn-kenburns {
  animation: mn-kenburns 14s ease-in-out infinite alternate;
}
/* video hero: two drifting radial-gradient blobs */
[data-theme="marquee-nights"] .mn-drift-a {
  animation: mn-drift 9s ease-in-out infinite;
}
[data-theme="marquee-nights"] .mn-drift-b {
  animation: mn-drift 12s ease-in-out infinite reverse;
}

/* No bounces, no springs — only the entrances + the three ambient loops. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="marquee-nights"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════ CHROME — header ═══════════════════ */
[data-theme="marquee-nights"] .mn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: var(--mn-gutter);
  background: var(--mn-bg);
  border-bottom: 1px solid var(--mn-border);
  position: sticky;
  top: 0;
  z-index: 40; /* 1g MOBILE DRAWER spec: header 40 · scrim 90 · panel 100 */
  box-sizing: border-box;
}
[data-theme="marquee-nights"] .mn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-brand-dot {
  width: 9px;
  height: 9px;
  background: var(--mn-primary);
  display: block;
  flex-shrink: 0;
}
[data-theme="marquee-nights"] .mn-brand-name {
  font-family: var(--mn-heading-font);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: 0.07em;
  color: var(--mn-text);
  line-height: 1;
  text-transform: uppercase;
}
[data-theme="marquee-nights"] .mn-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
[data-theme="marquee-nights"] .mn-nav-link {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mn-bone-62);
  text-decoration: none;
  padding-block: 8px;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-nav-link:hover {
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-nav-link.is-active {
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-nav-underline {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--mn-primary);
  opacity: 0;
}
[data-theme="marquee-nights"] .mn-nav-link.is-active .mn-nav-underline {
  opacity: 1;
}
[data-theme="marquee-nights"] .mn-header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
[data-theme="marquee-nights"] .mn-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mn-text);
  text-decoration: none;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-cart-link:hover {
  color: var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-account-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding-inline: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mn-text);
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-account-btn:hover {
  color: var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--mn-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════ MOBILE DRAWER (1e "Mobile 390 drawer open" · 1g) ═══════
 * Bespoke drawer for MarqueeNightsMobileMenu. The panel is portaled to
 * document.body (P-103) with data-theme="marquee-nights", so these rules
 * ([data-theme="marquee-nights"] .mn-drawer-*) resolve on the portaled subtree
 * and --mn-* tokens apply. 1g contract: panel min(78vw,304px) · bg #101012 ·
 * border-inline-start 1px haze · slides from inline-end · scrim rgba(10,10,11,
 * 0.72) flat · z header 40 / scrim 90 / panel 100 · links Big Shoulders 800
 * 36px caps · active #FF2E88 + 8px square · close 44×44 outlined box. */

/* hamburger trigger — hidden at desktop, shown < lg (mobile-shown block below) */
[data-theme="marquee-nights"] .mn-drawer-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mn-text);
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-drawer-trigger:hover {
  color: var(--mn-primary);
}

/* portaled root — full viewport; MUST override the [data-theme] opaque bg so
   the semi-transparent scrim shows the page through it */
[data-theme="marquee-nights"] .mn-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
}

/* scrim — flat rgba(10,10,11,0.72), no blur (1g), click closes */
[data-theme="marquee-nights"] .mn-drawer-scrim {
  position: absolute;
  inset: 0;
  background: var(--mn-scrim);
  z-index: 90;
  animation: mn-scrim-in 200ms ease-out both;
}
@keyframes mn-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* panel — slides in from inline-end, min(78vw,304px), surface-low bg */
[data-theme="marquee-nights"] .mn-drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(78vw, 304px);
  z-index: 100;
  background: var(--mn-surface-low);
  border-inline-start: 1px solid var(--mn-border);
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  animation: mn-drawer-in 240ms ease-out both;
}
@keyframes mn-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* RTL: the panel is on the reading-end; slide from the opposite physical side */
[dir="rtl"] [data-theme="marquee-nights"] .mn-drawer-panel {
  animation-name: mn-drawer-in-rtl;
}
@keyframes mn-drawer-in-rtl {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* in-drawer header: pink square + brand wordmark + outlined-box close */
[data-theme="marquee-nights"] .mn-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
[data-theme="marquee-nights"] .mn-drawer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
[data-theme="marquee-nights"] .mn-drawer-brand-dot {
  width: 8px;
  height: 8px;
  background: var(--mn-primary);
  display: block;
  flex-shrink: 0;
}
[data-theme="marquee-nights"] .mn-drawer-brand-name {
  font-family: var(--mn-heading-font);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mn-text);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="marquee-nights"] .mn-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--mn-border);
  border-radius: 2px;
  cursor: pointer;
  color: var(--mn-text);
  transition: border-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-drawer-close:hover {
  border-color: var(--mn-text);
}

/* nav — Big Shoulders 800 36px uppercase, active #FF2E88 + trailing square */
[data-theme="marquee-nights"] .mn-drawer-nav {
  display: flex;
  flex-direction: column;
}
[data-theme="marquee-nights"] .mn-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mn-text);
  text-decoration: none;
  padding-block: 10px;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-drawer-link:hover,
[data-theme="marquee-nights"] .mn-drawer-link:focus-visible {
  color: var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-drawer-link.is-active {
  color: var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-drawer-link-dot {
  width: 8px;
  height: 8px;
  background: var(--mn-primary);
  display: block;
  flex-shrink: 0;
}
[dir="rtl"] [data-theme="marquee-nights"] .mn-drawer-brand-name,
[dir="rtl"] [data-theme="marquee-nights"] .mn-drawer-link {
  letter-spacing: 0; /* tracking breaks connected Arabic script */
}

/* Subscribe filled CTA (magenta fill + ink text) */
[data-theme="marquee-nights"] .mn-drawer-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 24px;
  border-radius: 2px;
  text-decoration: none;
  margin-top: 24px;
  transition: background 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-drawer-subscribe:hover {
  background: var(--mn-primary-hover);
}

/* Account + Cart(n) footer rows (border-top) */
[data-theme="marquee-nights"] .mn-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
  border-top: 1px solid var(--mn-border);
  padding-top: 16px;
}
[data-theme="marquee-nights"] .mn-drawer-action {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mn-text);
  text-decoration: none;
  padding-block: 12px;
  min-height: 44px;
  box-sizing: border-box;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-drawer-action:hover {
  color: var(--mn-primary);
}

/* social row — pushed to the bottom (margin-top:auto) */
[data-theme="marquee-nights"] .mn-drawer-social {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  flex-wrap: wrap;
}
[data-theme="marquee-nights"] .mn-drawer-social-link {
  font-size: 12px;
  color: var(--mn-bone-55);
  text-decoration: none;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-drawer-social-link:hover {
  color: var(--mn-text);
}

/* reduced-motion: no slide/fade entrances (1g) */
@media (prefers-reduced-motion: reduce) {
  [data-theme="marquee-nights"] .mn-drawer-panel,
  [dir="rtl"] [data-theme="marquee-nights"] .mn-drawer-panel,
  [data-theme="marquee-nights"] .mn-drawer-scrim {
    animation-duration: 0.01ms;
  }
}

/* ═══════════════════ BUTTONS / CTAs ═══════════════════ */
[data-theme="marquee-nights"] .mn-cta-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-cta-filled:hover {
  background: var(--mn-primary-hover);
}
[data-theme="marquee-nights"] .mn-cta-filled:active {
  transform: translateY(1px);
}
[data-theme="marquee-nights"] .mn-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mn-bone-32);
  color: var(--mn-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 2px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-cta-outline:hover {
  border-color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-cta-outline:active {
  transform: translateY(1px);
}
/* product-detail large variant (padding 17-18px 24px, same visual family) */
[data-theme="marquee-nights"] .mn-cta-filled-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 24px;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-cta-filled-lg:hover {
  background: var(--mn-primary-hover);
}
[data-theme="marquee-nights"] .mn-cta-filled-lg:active {
  transform: translateY(1px);
}
[data-theme="marquee-nights"] .mn-cta-outline-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mn-bone-32);
  color: var(--mn-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 17px 24px;
  border-radius: 2px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-cta-outline-lg:hover {
  border-color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-cta-outline-lg:active {
  transform: translateY(1px);
}

/* ticket chip variants (tickets / few-left / sold-out) — colors set inline
   per-show via style attributes (data-driven), hover handled here via CSS
   custom properties set on the element (P-097: still zero JS handlers) */
[data-theme="marquee-nights"] .mn-ticket-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 9px 14px;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out,
    border-color 150ms ease-out;
  text-transform: uppercase;
}
[data-theme="marquee-nights"] .mn-ticket-chip.mn-chip-tickets {
  background: transparent;
  color: var(--mn-primary);
  border: 1px solid var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-ticket-chip.mn-chip-tickets:hover {
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
}
[data-theme="marquee-nights"] .mn-ticket-chip.mn-chip-few {
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
  border: 1px solid var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-ticket-chip.mn-chip-few:hover {
  background: var(--mn-primary-hover);
  border-color: var(--mn-primary-hover);
}
[data-theme="marquee-nights"] .mn-ticket-chip.mn-chip-soldout {
  background: transparent;
  color: var(--mn-text-faint);
  border: 1px solid var(--mn-border);
  pointer-events: none;
}
/* upcoming-dates row larger chip (12px 22px padding) */
[data-theme="marquee-nights"] .mn-ticket-chip-lg {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 12px 22px;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out,
    border-color 150ms ease-out;
  text-transform: uppercase;
}
[data-theme="marquee-nights"] .mn-ticket-chip-lg.mn-chip-tickets {
  background: transparent;
  color: var(--mn-primary);
  border: 1px solid var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-ticket-chip-lg.mn-chip-tickets:hover {
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
}
[data-theme="marquee-nights"] .mn-ticket-chip-lg.mn-chip-few {
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
  border: 1px solid var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-ticket-chip-lg.mn-chip-few:hover {
  background: var(--mn-primary-hover);
  border-color: var(--mn-primary-hover);
}
[data-theme="marquee-nights"] .mn-ticket-chip-lg.mn-chip-soldout {
  background: transparent;
  color: var(--mn-text-faint);
  border: 1px solid var(--mn-border);
  pointer-events: none;
}

/* ═══════════════════ FOCUS (all) — 1g ═══════════════════ */
[data-theme="marquee-nights"] a:focus-visible,
[data-theme="marquee-nights"] button:focus-visible,
[data-theme="marquee-nights"] input:focus-visible,
[data-theme="marquee-nights"] textarea:focus-visible {
  outline: 2px solid var(--mn-primary);
  outline-offset: 2px;
}
/* input focus ring (1g HOVER/PRESS/FOCUS: border + ring 0 0 0 3px) */
[data-theme="marquee-nights"] .mn-input:focus {
  border-color: var(--mn-primary);
  box-shadow: 0 0 0 3px rgba(255, 46, 136, 0.25);
}

/* ═══════════════════ POST / PRODUCT CARDS ═══════════════════ */
[data-theme="marquee-nights"] .mn-card {
  display: flex;
  flex-direction: column;
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms ease-out, box-shadow 200ms ease-out;
}
[data-theme="marquee-nights"] .mn-card:hover {
  transform: translateY(-4px);
  border-color: var(--mn-primary);
  box-shadow: 0 16px 40px -18px rgba(255, 46, 136, 0.35);
}
[data-theme="marquee-nights"] .mn-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.85);
  display: block;
}
[data-theme="marquee-nights"] .mn-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
}
[data-theme="marquee-nights"] .mn-card-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--mn-primary);
  text-transform: uppercase;
}
[data-theme="marquee-nights"] .mn-card-title {
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mn-bone-62);
}
[data-theme="marquee-nights"] .mn-card-meta {
  font-size: 12px;
  color: var(--mn-text-faint);
  font-variant-numeric: tabular-nums;
}

/* shop product card (square image, name/type/price row) */
[data-theme="marquee-nights"] .mn-product-card {
  display: flex;
  flex-direction: column;
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms ease-out, box-shadow 200ms ease-out;
}
[data-theme="marquee-nights"] .mn-product-card:hover {
  transform: translateY(-4px);
  border-color: var(--mn-primary);
  box-shadow: 0 16px 40px -18px rgba(255, 46, 136, 0.35);
}
[data-theme="marquee-nights"] .mn-product-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.88);
  display: block;
}
[data-theme="marquee-nights"] .mn-product-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 24px;
}
[data-theme="marquee-nights"] .mn-product-name {
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-product-type {
  font-size: 13px;
  color: var(--mn-bone-55);
}
[data-theme="marquee-nights"] .mn-product-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--mn-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═══════════════════ CATEGORY PILLS ═══════════════════ */
[data-theme="marquee-nights"] .mn-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--mn-border);
  color: var(--mn-bone-62);
  background: transparent;
  transition: color 150ms ease-out, border-color 150ms ease-out,
    background-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-pill:hover {
  color: var(--mn-text);
  border-color: var(--mn-bone-50);
}
[data-theme="marquee-nights"] .mn-pill.is-active {
  background: var(--mn-primary);
  color: var(--mn-cta-ink);
  border: 1px solid var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-pill.is-active:hover {
  background: var(--mn-primary-hover);
  border-color: var(--mn-primary-hover);
}

/* ═══════════════════ DATE / UPCOMING-SHOW ROWS ═══════════════════ */
[data-theme="marquee-nights"] .mn-date-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 10px;
  border-bottom: 1px solid var(--mn-border);
  transition: background-color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-date-row:hover {
  background: var(--mn-surface);
}
[data-theme="marquee-nights"] .mn-date-d {
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.03em;
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-date-venue {
  font-size: 17px;
  font-weight: 600;
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-date-city {
  font-size: 13px;
  color: var(--mn-bone-55);
}
/* NEXT UP card (hero aside) — from source: background rgba(10,10,11,0.82),
   border 1px #2A2A2E, padding 26px 26px 10px */
[data-theme="marquee-nights"] .mn-nextup-aside {
  background: var(--mn-scrim-panel);
  border: 1px solid var(--mn-border);
  padding: 26px 26px 10px;
  box-sizing: border-box;
}
/* NEXT UP aside compact row */
[data-theme="marquee-nights"] .mn-nextup-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 17px;
  border-top: 1px solid var(--mn-border);
}
[data-theme="marquee-nights"] .mn-nextup-d {
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.03em;
  color: var(--mn-text);
  min-width: 66px;
}
[data-theme="marquee-nights"] .mn-nextup-venue {
  font-size: 14px;
  font-weight: 600;
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-nextup-city {
  font-size: 12px;
  color: var(--mn-bone-55);
}

/* wide strips never overflow the document (P-140) — date list + pill row on
   narrow viewports scroll internally instead of pushing document width */
[data-theme="marquee-nights"] .mn-pill-scroll,
[data-theme="marquee-nights"] .mn-strip-safe {
  overflow-x: clip;
}

/* ═══════════════════ HERO GRID (desktop base) ═══════════════════ */
/* Same inline-vs-media-query trap as the display headings below: the two-
   column grid (copy + NEXT UP aside) and its padding must live in CSS, not
   inline, so the @media (max-width: 767px) override (single column, tighter
   padding) can actually win. */
[data-theme="marquee-nights"] .mn-hero-grid {
  grid-template-columns: 1.55fr 1fr;
  gap: 64px;
  padding: 110px 72px 88px;
}
/* "From the road" tour-diary + product-grid 3-col layouts — same base-in-CSS
   requirement so the mobile 1-col override (below) isn't defeated by an
   inline gridTemplateColumns on the same element. */
[data-theme="marquee-nights"] .mn-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* Shop product grid — same 3-col desktop layout as mn-grid-3, but the
   mobile override differs: the shop grid stays 2-up on 390px (source:
   167px+167px columns) while the tour-diary post grid fully stacks to
   1-col. Two classes, not a shared one, because the mobile behavior
   genuinely diverges per surface. */
[data-theme="marquee-nights"] .mn-grid-3-tight {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* prev/next adjacent-post nav — desktop 2-col grid; mobile stacks to a
   flex column (mobile override sets display:flex, so display must live
   here too or the inline display:"grid" wins). */
[data-theme="marquee-nights"] .mn-adjacent-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Product detail gallery/spec 2-col grid — desktop column split is
   data-conditional (--mn-product-cols set inline per element, see
   MarqueeNightsProductLayout); mobile forces a single column below. */
[data-theme="marquee-nights"] .mn-product-grid-detail {
  grid-template-columns: var(--mn-product-cols, 1fr);
  gap: 72px;
}
/* thumbnail 4-up grid inside the gallery column */
[data-theme="marquee-nights"] .mn-product-thumb-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* Section horizontal gutter (72px desktop → 20px mobile, --mn-gutter /
   --mn-gutter-mobile). Components set only paddingBlock inline (vertical
   rhythm, doesn't change at mobile) and let this class own padding-inline —
   an inline padding:"88px 72px" SHORTHAND would set the physical
   left/right longhands and permanently defeat the mobile padding-inline
   override otherwise (same P-140-class trap as the headings/grids above). */
[data-theme="marquee-nights"] .mn-section-pad {
  padding-inline: var(--mn-gutter);
}
/* Blog/Shop masthead band — full shorthand padding (all 4 sides vary at
   mobile), so this class owns padding entirely rather than splitting via
   mn-section-pad's padding-inline-only approach. */
[data-theme="marquee-nights"] .mn-page-hero {
  padding: 88px var(--mn-gutter) 48px;
}
/* Prose column horizontal gutter (32px desktop → 20px mobile) — narrower
   scale than the 72px section gutter since this wraps a 65ch text column. */
[data-theme="marquee-nights"] .mn-post-body-pad {
  padding-inline: 32px;
}

/* ═══════════════════ DISPLAY HEADINGS (desktop base) ═══════════════════ */
/* Desktop font-size/line-height live HERE (not inline in the JSX) so the
   @media (max-width: 767px) mobile overrides below can actually win. A
   non-!important media-query rule can never beat an inline style="" attr on
   the same element — an inline fontSize on the <h1> would silently defeat
   every mobile clamp (P-140-class). Non-responsive props (family, weight,
   letter-spacing, color, text-transform) stay inline in the components. */
[data-theme="marquee-nights"] .mn-hero-h1 {
  font-size: 148px;
  line-height: 0.9;
}
[data-theme="marquee-nights"] .mn-page-h1-lg {
  font-size: 104px;
  line-height: 0.9;
}
[data-theme="marquee-nights"] .mn-post-h1 {
  font-size: 76px;
  line-height: 0.92;
}
[data-theme="marquee-nights"] .mn-h2-lg {
  font-size: 58px;
  line-height: 0.95;
}
[data-theme="marquee-nights"] .mn-product-h1 {
  font-size: 66px;
  line-height: 0.92;
}

/* ═══════════════════ PROSE (post / page body) ═══════════════════ */
[data-theme="marquee-nights"] .mn-prose {
  font-size: 18px;
  line-height: 1.75;
  max-width: 65ch;
  color: var(--mn-bone-85);
}
[data-theme="marquee-nights"] .mn-prose p {
  margin: 0 0 26px;
}
[data-theme="marquee-nights"] .mn-prose h2 {
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mn-text);
  margin: 44px 0 18px;
}
[data-theme="marquee-nights"] .mn-prose h3 {
  font-family: var(--mn-heading-font);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mn-text);
  margin: 40px 0 14px;
}
[data-theme="marquee-nights"] .mn-prose blockquote {
  margin: 40px 0;
  padding: 0;
}
/* decorative giant quote-mark (source has a dedicated aria-hidden span; post
   content_html is raw editor HTML with no such span, so the same glyph is
   reproduced via ::before on the blockquote itself — 1:1 visual, semantic
   markup stays clean since editor content owns no custom classes) */
[data-theme="marquee-nights"] .mn-prose blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--mn-heading-font);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.5;
  color: var(--mn-primary);
}
[data-theme="marquee-nights"] .mn-prose blockquote p {
  font-family: var(--mn-heading-font);
  font-weight: 700;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mn-text);
  margin: 14px 0 0;
}
[data-theme="marquee-nights"] .mn-prose cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mn-bone-50);
}
[data-theme="marquee-nights"] .mn-prose pre {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: 4px;
  color: var(--mn-text);
  font-family: var(--mn-mono-font);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 22px 24px;
  overflow-x: auto;
  margin: 0 0 26px;
}
[data-theme="marquee-nights"] .mn-prose figure {
  margin: 40px 0;
}
[data-theme="marquee-nights"] .mn-prose figure img {
  width: 100%;
  display: block;
  filter: grayscale(1) contrast(1.06) brightness(0.9);
}
[data-theme="marquee-nights"] .mn-prose figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mn-bone-50);
  text-align: center;
}
[data-theme="marquee-nights"] .mn-prose img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}
[data-theme="marquee-nights"] .mn-prose a {
  color: var(--mn-primary);
  text-decoration: none;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-prose a:hover {
  color: var(--mn-primary-hover);
}

/* ═══════════════════ FOOTER ═══════════════════ */
[data-theme="marquee-nights"] .mn-footer {
  background: var(--mn-bg);
  border-top: 1px solid var(--mn-border);
  font-family: var(--mn-body-font);
}
[data-theme="marquee-nights"] .mn-footer-brand-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 56px var(--mn-gutter) 0;
}
[data-theme="marquee-nights"] .mn-footer-brand {
  font-family: var(--mn-heading-font);
  font-weight: 900;
  font-size: 64px;
  letter-spacing: 0.04em;
  color: var(--mn-text);
  line-height: 0.95;
  text-transform: uppercase;
}
[data-theme="marquee-nights"] .mn-footer-dot {
  width: 12px;
  height: 12px;
  background: var(--mn-primary);
  display: block;
  align-self: center;
  flex-shrink: 0;
}
[data-theme="marquee-nights"] .mn-footer-tagline {
  font-size: 14px;
  color: var(--mn-bone-62);
  letter-spacing: 0.02em;
}
[data-theme="marquee-nights"] .mn-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 40px var(--mn-gutter) 56px;
}
[data-theme="marquee-nights"] .mn-footer-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mn-bone-62);
  max-width: 34ch;
}
[data-theme="marquee-nights"] .mn-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="marquee-nights"] .mn-footer-col-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--mn-text-faint);
  text-transform: uppercase;
}
[data-theme="marquee-nights"] .mn-footer-link {
  font-size: 14px;
  color: var(--mn-bone-62);
  text-decoration: none;
  transition: color 150ms ease-out;
  width: fit-content;
}
[data-theme="marquee-nights"] .mn-footer-link:hover {
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-footer-booking-email {
  font-size: 14px;
  color: var(--mn-primary);
  text-decoration: none;
  transition: color 150ms ease-out;
  width: fit-content;
}
[data-theme="marquee-nights"] .mn-footer-booking-email:hover {
  color: var(--mn-primary-hover);
}
[data-theme="marquee-nights"] .mn-footer-booking-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mn-text-faint);
}
[data-theme="marquee-nights"] .mn-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--mn-gutter);
  border-top: 1px solid var(--mn-border);
}
[data-theme="marquee-nights"] .mn-footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: var(--mn-text-faint);
}
[data-theme="marquee-nights"] .mn-footer-bottom-link {
  color: var(--mn-text-faint);
  text-decoration: none;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-footer-bottom-link:hover {
  color: var(--mn-text);
}
[data-theme="marquee-nights"] .mn-footer-powered {
  font-size: 12px;
  color: var(--mn-text-faint);
  text-decoration: none;
  transition: color 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-footer-powered:hover {
  color: var(--mn-text);
}

/* ═══════════════════ INPUTS (subscribe forms) ═══════════════════ */
[data-theme="marquee-nights"] .mn-input {
  background: var(--mn-bg);
  border: 1px solid var(--mn-border);
  border-radius: 2px;
  color: var(--mn-text);
  font-family: var(--mn-body-font);
  font-size: 14px;
  padding: 15px 16px;
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
[data-theme="marquee-nights"] .mn-input::placeholder {
  color: var(--mn-text-faint);
}

/* ═══════════════════ RESPONSIVE (mobile 390) ═══════════════════ */
/* Desktop nav + right-side account collapse below lg (1024px); hamburger
   shown by the shared ThemeMobileMenu (lg:hidden). Header height 76 → 64,
   gutter 72 → 20 per the 1g SPACING & RADIUS scale. */
@media (max-width: 1023px) {
  [data-theme="marquee-nights"] .mn-nav-links,
  [data-theme="marquee-nights"] .mn-header-right .mn-account-btn {
    display: none;
  }
  /* hamburger trigger shown < lg (opposite of the desktop nav); pushed to the
     inline-end so the mobile header reads brand (start) + hamburger (end), the
     account/cart affordances having moved into the drawer footer. */
  [data-theme="marquee-nights"] .mn-drawer-trigger {
    display: flex;
    margin-inline-start: auto;
    margin-inline-end: -10px; /* optical align the 44px hit area to the gutter */
  }
  [data-theme="marquee-nights"] .mn-header {
    height: 64px;
    padding-inline: var(--mn-gutter-mobile);
  }
  [data-theme="marquee-nights"] .mn-footer-brand-row,
  [data-theme="marquee-nights"] .mn-footer-cols,
  [data-theme="marquee-nights"] .mn-footer-bottom {
    padding-inline: var(--mn-gutter-mobile);
  }
  [data-theme="marquee-nights"] .mn-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  [data-theme="marquee-nights"] .mn-footer-brand {
    font-size: 38px;
  }
}

/* Mobile 390 type scale (1g TYPE: "scale (desktop → mobile)": h1 hero
   148 → 62 · h1 page 104 → 56 · h1 post 76 → 46 · h2 58 → 40/30 · h3 28 → 23
   · body 18 → 16). Also collapses the hero/product two-column grids to a
   single column and shrinks gutters/padding to the mobile 20px scale — this
   is the P-140 defense for this theme: without the clamp, the 148px hero
   headline would overflow a 390px viewport horizontally. */
@media (max-width: 767px) {
  [data-theme="marquee-nights"] .mn-hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 56px 20px 32px;
    align-items: flex-start;
  }
  [data-theme="marquee-nights"] .mn-hero-h1 {
    font-size: 62px;
    line-height: 0.92;
  }
  [data-theme="marquee-nights"] .mn-nextup-aside {
    padding: 18px 18px 4px;
    margin-top: 8px;
  }
  [data-theme="marquee-nights"] .mn-page-hero {
    padding: 48px 20px 56px;
  }
  [data-theme="marquee-nights"] .mn-page-h1-lg {
    font-size: 56px;
  }
  [data-theme="marquee-nights"] .mn-post-h1 {
    font-size: 46px;
  }
  [data-theme="marquee-nights"] .mn-h2-lg {
    font-size: 40px;
  }
  [data-theme="marquee-nights"] .mn-product-h1 {
    font-size: 44px;
    line-height: 1.05;
  }
  /* "Upcoming dates" band rows — grid stays 3-col (date/venue+city/chip) but
     the fixed 180px date column collapses to a compact auto width + the
     ticket chip shrinks, so the row fits 390px without overflowing (source:
     mobile date column ~60px, chip 10px/9x11 padding). */
  [data-theme="marquee-nights"] .mn-date-row {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 16px 2px;
  }
  [data-theme="marquee-nights"] .mn-date-d {
    font-size: 22px;
  }
  [data-theme="marquee-nights"] .mn-date-venue {
    font-size: 14px;
  }
  [data-theme="marquee-nights"] .mn-date-city {
    font-size: 11px;
  }
  [data-theme="marquee-nights"] .mn-ticket-chip-lg {
    font-size: 10px;
    padding: 9px 11px;
  }
  /* NEXT UP aside rows — same compact-chip treatment as the dates band so
     the hero card never forces the aside wider than its 1fr column. */
  [data-theme="marquee-nights"] .mn-nextup-d {
    font-size: 18px;
    min-width: 52px;
  }
  [data-theme="marquee-nights"] .mn-ticket-chip {
    font-size: 10px;
    padding: 8px 10px;
  }
  [data-theme="marquee-nights"] .mn-prose {
    font-size: 16px;
  }
  [data-theme="marquee-nights"] .mn-prose h2 {
    font-size: 30px;
  }
  [data-theme="marquee-nights"] .mn-prose h3 {
    font-size: 23px;
  }
  [data-theme="marquee-nights"] .mn-section-pad {
    padding-inline: var(--mn-gutter-mobile);
  }
  [data-theme="marquee-nights"] .mn-grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  [data-theme="marquee-nights"] .mn-grid-3-tight {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  [data-theme="marquee-nights"] .mn-product-grid-detail {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  [data-theme="marquee-nights"] .mn-post-body-pad {
    padding-inline: 20px;
  }
  [data-theme="marquee-nights"] .mn-adjacent-nav {
    display: flex;
    flex-direction: column;
  }
  [data-theme="marquee-nights"] .mn-adjacent-nav > span {
    border-inline-end: none !important;
    border-bottom: 1px solid var(--mn-border);
    padding: 20px 0 !important;
    text-align: start !important;
  }
  [data-theme="marquee-nights"] .mn-subscribe-box {
    padding: 24px;
  }
  [data-theme="marquee-nights"] .mn-subscribe-form {
    flex-direction: column;
  }
}

/* ═══════════════════ RTL (1g HERO VIDEO SLOT & RTL) ═══════════════════ */
/* All offsets are logical (padding-inline / margin-inline / inset-inline-end
   / border-inline-start / text-align:end) in the layout components, so
   flex/grid mirror automatically. Tracking breaks connected Arabic script —
   zero it on caps-tracked labels under rtl. Gradients are vertical/radial
   only (no left/right-keyed decoration) so nothing needs a mirror rule. */
[dir="rtl"] [data-theme="marquee-nights"] .mn-nav-link,
[dir="rtl"] [data-theme="marquee-nights"] .mn-brand-name,
[dir="rtl"] [data-theme="marquee-nights"] .mn-pill,
[dir="rtl"] [data-theme="marquee-nights"] .mn-footer-col-label,
[dir="rtl"] [data-theme="marquee-nights"] .mn-cta-filled,
[dir="rtl"] [data-theme="marquee-nights"] .mn-cta-outline,
[dir="rtl"] [data-theme="marquee-nights"] .mn-cta-filled-lg,
[dir="rtl"] [data-theme="marquee-nights"] .mn-cta-outline-lg,
[dir="rtl"] [data-theme="marquee-nights"] .mn-ticket-chip,
[dir="rtl"] [data-theme="marquee-nights"] .mn-ticket-chip-lg,
[dir="rtl"] [data-theme="marquee-nights"] .mn-card-cat,
[dir="rtl"] [data-theme="marquee-nights"] .mn-card-title,
[dir="rtl"] [data-theme="marquee-nights"] .mn-product-name {
  letter-spacing: 0;
}

/*
 * ═══════════════════ P-094 TOKEN BRIDGE ═══════════════════
 * The commerce archetype + shared components consume the universal
 * --vb-color-* vocabulary. Map Marquee Nights palette → --vb-color-* at the
 * global [data-theme="marquee-nights"] scope (NOT main-scoped) so /shop and
 * /products/* resolve. No currentColor, no circular refs (1g).
 *
 * Contrast receipts (from the 1g CONTRAST RECEIPTS block):
 *   #0A0A0B on #FF2E88  5.7:1  AA  ← every filled CTA (primary-fg on primary)
 *   #EDEDED on #0A0A0B 16.9:1 AAA ← body text on bg
 * RULE (1g): never #EDEDED text on #FF2E88 fill (3.0:1 — fails). Filled CTAs
 * are always magenta fill + ink (#0A0A0B) text, never bone text.
 */
[data-theme="marquee-nights"] {
  --vb-color-primary: #FF2E88;      /* hot-pink — CTA fill */
  --vb-color-primary-fg: #0A0A0B;   /* ink label on hot-pink — 5.7:1 AA */
  --vb-color-bg: #0A0A0B;           /* black */
  --vb-color-fg: #EDEDED;           /* bone — 16.9:1 on bg */
  --vb-color-accent: #FF2E88;       /* hot-pink */
}