/* colors_and_type.css is loaded directly from app/layout.tsx as a sibling
   <link> tag, so it's already in the cascade by the time this stylesheet
   parses. The previous @import here pointed at /assets/colors_and_type.css
   (legacy path) and 404'd on every page load. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ============ LAYOUT ============ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container-narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
section { padding: var(--sp-8) 0; }
@media (max-width: 720px) { section { padding: var(--sp-7) 0; } }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "✦";
  color: var(--accent);
  font-size: 10px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: var(--sp-3) 0 var(--sp-5);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}

/* Per-section accent rotation: each section gets its own brand color */
#about .section-title em,
#about .eyebrow::before { color: var(--bm-pink); }
#music .section-title em,
#music .eyebrow::before { color: var(--bm-pink-lavender); }
#videos .section-title em,
#videos .eyebrow::before { color: var(--bm-purple); }
#videos .section-title em.alt { color: var(--bm-teal); }
#shows .section-title em,
#shows .eyebrow::before { color: var(--bm-blue); }
#gallery .section-title em,
#gallery .eyebrow::before { color: var(--bm-teal); }
.newsletter .section-title em,
.newsletter .eyebrow::before { color: var(--bm-pink); }
.section-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
}

.section-head { margin-bottom: var(--sp-7); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 251, 250, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  gap: var(--sp-5);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.nav-logo img {
  height: 56px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--nav-link, var(--fg-2));
  transition: color var(--dur-2) var(--ease-soft), opacity var(--dur-2) var(--ease-soft);
}
.nav-links a:hover { color: var(--nav-link, var(--accent)); opacity: 1; }

/* Each nav link wears a different palette color */
.nav-links li:nth-child(1) a { --nav-link: var(--bm-pink-lavender); }   /* Music */
.nav-links li:nth-child(2) a { --nav-link: var(--bm-purple); }          /* Videos */
.nav-links li:nth-child(3) a { --nav-link: var(--bm-blue); }            /* Shows */
.nav-links li:nth-child(4) a { --nav-link: var(--bm-teal); }            /* Merch */
.nav-links li:nth-child(5) a { --nav-link: var(--bm-pink); }            /* Gallery */
.nav-links li:nth-child(6) a { --nav-link: var(--bm-text-secondary); }  /* About */

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--bm-pink);
  color: var(--bm-text-primary);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}
.nav-cta:hover { background: var(--bm-teal); color: var(--bm-text-light); box-shadow: var(--shadow-glow-teal); }
.nav-cta:active { transform: scale(0.98); }

/* Cart button in nav */
.nav-cart {
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative;
  width: 40px; height: 40px;
  margin-left: 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.nav-cart:hover { border-color: var(--accent); color: var(--accent); }
.nav-cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-warm); color: #fff;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-1);
  transition: transform var(--dur-2) var(--ease-soft), opacity var(--dur-2);
}
.nav-cart-count[data-empty="true"] { opacity: 0; transform: scale(0.4); }
.nav-cart-count.bump { animation: cart-bump 0.42s var(--ease-soft); }
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur-1) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: var(--fg-on-dark);
}
.btn-primary:hover { box-shadow: var(--shadow-glow-teal); }
.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--fg-1); background: var(--fg-1); color: var(--fg-on-dark); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-6);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-1);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bm-pink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.hero-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7.2vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: var(--sp-4) 0 var(--sp-5);
  text-wrap: balance;
}
.hero-display em {
  font-style: italic;
  color: var(--bm-pink);
}
.hero-display em + br + em,
.hero-display em:nth-of-type(2) {
  color: var(--bm-purple);
}
.hero-script {
  font-family: var(--font-script);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  color: var(--bm-pink-lavender);
  display: inline-block;
  transform: translateY(-4px) rotate(-2deg);
}
.hero-lead {
  font-size: var(--fs-18);
  font-weight: 300;
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 50ch;
  margin: 0 0 var(--sp-6);
}
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.hero-meta-item .label {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.hero-meta-item .value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-20);
  color: var(--fg-1);
}
.hero-photo-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bm-surface-cool);
  box-shadow: var(--shadow-3);
}
.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero-photo-tag {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  background: rgba(252, 251, 250, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: var(--fs-12);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-1);
}
.hero-photo-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm);
}

/* ============ MARQUEE / TICKER ============ */
.ticker {
  background: var(--fg-1);
  color: var(--fg-on-dark);
  padding: var(--sp-4) 0;
  overflow: hidden;
  border-top: 1px solid var(--fg-1);
  border-bottom: 1px solid var(--fg-1);
}
.ticker-track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: scroll 32s linear infinite;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-32);
  white-space: nowrap;
}
.ticker-item span.dot { color: var(--bm-pink); }
.ticker-item:nth-child(3n) span.dot { color: var(--bm-pink-lavender); }
.ticker-item:nth-child(3n+1) span.dot { color: var(--bm-teal); }
.ticker-item:nth-child(3n+2) span.dot { color: var(--bm-purple); }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ ABOUT ============ */
.about {
  background: var(--bm-surface-blush);
  padding-bottom: var(--sp-6);
}
.music { padding-top: var(--sp-6); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: var(--sp-8);
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.about-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.about-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 400;
  margin: 0 0 var(--sp-3);
  font-style: italic;
}
.about-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.about-quote::before { content: "“"; color: var(--bm-pink); margin-right: 0.05em; }
.about-quote::after { content: "”"; color: var(--bm-pink); }
.about-body p {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  gap: var(--sp-5);
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.about-stat:nth-child(1) .num { color: var(--bm-pink); }
.about-stat:nth-child(2) .num { color: var(--bm-purple); }
.about-stat:nth-child(3) .num { color: var(--bm-teal); }
.about-stat .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-32);
  color: var(--accent);
  line-height: 1;
}
.about-stat .label {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 4px;
}
.about-sig {
  font-family: var(--font-script);
  font-size: var(--fs-32);
  color: var(--fg-1);
  margin-top: var(--sp-5);
  display: inline-block;
}

/* ============ MUSIC / AUDIO PLAYER ============ */
.music-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: stretch;
}
.music-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.music-right .tracklist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.music-right .tracklist::-webkit-scrollbar { width: 6px; }
.music-right .tracklist::-webkit-scrollbar-track { background: transparent; }
.music-right .tracklist::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.music-right .tracklist::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
@media (max-width: 900px) {
  .music-grid { grid-template-columns: 1fr; align-items: start; }
  .music-right .tracklist { overflow-y: visible; }
}

.player-card {
  background: linear-gradient(180deg, var(--fg-1) 0%, #2a2928 100%);
  color: var(--fg-on-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-3);
  position: relative;
  overflow: hidden;
}
.player-art {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bm-surface-cool);
  margin-bottom: var(--sp-5);
  position: relative;
}
.player-art-grad {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 25% 25%, var(--grad-1, var(--bm-pink)) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, var(--grad-2, var(--bm-pink-lavender)) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, var(--grad-3, var(--bm-teal)) 0%, transparent 60%),
    linear-gradient(135deg, var(--grad-2, var(--bm-pink-lavender)), var(--grad-3, var(--bm-teal-soft)));
  display: grid;
  place-items: center;
}
.player-art-grad .wordmark {
  font-family: var(--font-logo);
  font-size: 64px;
  color: rgba(29,29,28,0.85);
  transform: rotate(-4deg);
  text-align: center;
  line-height: 0.9;
}
.player-art-grad .wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: rgba(29,29,28,0.7);
  margin-top: 4px;
  transform: rotate(0deg);
}
.player-track-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.player-track-info .title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-32);
  line-height: 1.1;
  margin: 0;
}
.player-track-info .meta {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(252,251,250,0.6);
  margin-top: 6px;
}
.player-track-info .duration {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: rgba(252,251,250,0.7);
}
.player-progress {
  position: relative;
  height: 4px;
  background: rgba(252,251,250,0.15);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 6px;
}
.player-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}
.player-progress-knob {
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(62,183,178,0.18);
}
.player-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(252,251,250,0.55);
  margin-bottom: var(--sp-4);
}
.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.player-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(252,251,250,0.7);
  transition: color var(--dur-2), background var(--dur-2);
}
.player-btn:hover { color: var(--fg-on-dark); background: rgba(252,251,250,0.08); }
.player-btn.play {
  width: 56px; height: 56px;
  background: var(--accent);
  color: var(--fg-on-dark);
}
.player-btn.play:hover { background: var(--accent); box-shadow: var(--shadow-glow-teal); }

.tracklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tracklist-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  transition: background var(--dur-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: 1px solid transparent;
}
.tracklist-row:hover { background: var(--bm-surface-cool); }
.tracklist-row.active {
  background: var(--bm-surface-cool);
  border-color: var(--border);
}
.tracklist-row .num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
  text-align: center;
}
.tracklist-row.active .num { color: var(--accent); }
.tracklist-row .play-icon { display: none; }
.tracklist-row.active .play-icon, .tracklist-row:hover .play-icon { display: block; }
.tracklist-row.active .num.show, .tracklist-row:hover .num.show { display: none; }
.tracklist-row .info .title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-20);
  color: var(--fg-1);
  line-height: 1.2;
}
.tracklist-row .info .sub {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  margin-top: 2px;
}
.tracklist-row .tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--bm-surface-blush);
  color: var(--fg-2);
}
.tracklist-row .tag { background: var(--bm-surface-blush); color: var(--bm-pink); }
.tracklist-row .tag.live { background: var(--bm-surface-cool); color: var(--bm-teal); }
.tracklist-row .tag.demo { background: color-mix(in srgb, var(--bm-purple) 12%, white); color: var(--bm-purple); }
.tracklist-row .tag.color-pink     { background: var(--bm-surface-blush); color: var(--bm-pink); }
.tracklist-row .tag.color-lavender { background: color-mix(in srgb, var(--bm-pink-lavender) 18%, white); color: color-mix(in srgb, var(--bm-pink-lavender) 80%, var(--fg-1)); }
.tracklist-row .tag.color-purple   { background: color-mix(in srgb, var(--bm-purple) 12%, white); color: var(--bm-purple); }
.tracklist-row .tag.color-teal     { background: var(--bm-surface-cool); color: var(--bm-teal); }
.tracklist-row .tag.color-blue     { background: var(--bm-surface-cool); color: var(--bm-blue); }
.tracklist-row .tag.color-amber    { background: color-mix(in srgb, #d97706 12%, white); color: #b45309; }
.tracklist-row .tag.color-charcoal { background: color-mix(in srgb, var(--fg-1) 10%, white); color: var(--fg-1); }
.tracklist-row .tag.color-cream    { background: var(--bm-surface-blush); color: var(--fg-2); }
.tracklist-row .duration {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
}

.streaming-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.streaming-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--fg-2);
  transition: all var(--dur-2) var(--ease-soft);
}
.streaming-link:hover { color: var(--fg-1); border-color: var(--fg-1); }

/* Streaming brand colors — applied to the icon only, label stays neutral */
.streaming-icon { flex-shrink: 0; transition: color var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-soft); }
.streaming-link[data-social="spotify"] .streaming-icon { color: #1DB954; }
.streaming-link[data-social="apple"]   .streaming-icon { color: #FA243C; }
.streaming-link[data-social="youtube"] .streaming-icon { color: #FF0000; }
.streaming-link:hover .streaming-icon { transform: scale(1.08); }

/* ============ VIDEOS ============ */
.videos { background: var(--bg-2); padding: var(--sp-6) 0; }
.video-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } }

.video-featured {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--fg-1);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.video-featured:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.video-thumb-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-2);
}
.video-thumb-row:hover { background: var(--bg-1); }
.video-thumb-row .thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--fg-1);
}
.video-meta .title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-20);
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.video-meta .sub {
  font-size: var(--fs-12);
  color: var(--fg-muted);
}
.video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(252,251,250,0.92);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fg-1);
  transition: transform var(--dur-2) var(--ease-soft), background var(--dur-2);
  pointer-events: none;
}
.video-featured:hover .video-play-icon,
.video-thumb-row:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  color: var(--fg-on-dark);
}
.video-play-icon-sm {
  width: 36px; height: 36px;
}
.video-overlay-tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: rgba(29,29,28,0.7);
  backdrop-filter: blur(8px);
  color: var(--fg-on-dark);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Tag library colors. Slightly stronger blend than the tracklist palette
   so the pill stays legible on top of a video poster. */
.video-overlay-tag.color-pink     { background: var(--bm-pink); color: var(--fg-on-dark); }
.video-overlay-tag.color-lavender { background: var(--bm-pink-lavender); color: var(--fg-1); }
.video-overlay-tag.color-purple   { background: var(--bm-purple); color: var(--fg-on-dark); }
.video-overlay-tag.color-teal     { background: var(--bm-teal); color: var(--fg-on-dark); }
.video-overlay-tag.color-blue     { background: var(--bm-blue); color: var(--fg-on-dark); }
.video-overlay-tag.color-amber    { background: #d97706; color: var(--fg-on-dark); }
.video-overlay-tag.color-charcoal { background: var(--fg-1); color: var(--fg-on-dark); }
.video-overlay-tag.color-cream    { background: var(--bm-surface-blush); color: var(--fg-1); }
.video-feature-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, transparent, rgba(29,29,28,0.85));
  color: var(--fg-on-dark);
}
.video-feature-cap .title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  margin: 0;
}
.video-feature-cap .sub {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.8;
}

/* ============ SHOWS / CALENDAR ============ */
.shows { padding: var(--sp-6) 0; }
.shows-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.shows-tabs {
  display: inline-flex;
  background: var(--bm-surface-cool);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.shows-tab {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--fg-2);
  transition: all var(--dur-2) var(--ease-soft);
}
.shows-tab.active {
  background: var(--bg-1);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}

.shows-list {
  display: flex;
  flex-direction: column;
}
.show-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-2);
}
.show-row:first-child { border-top: 1px solid var(--border); }
.show-row:hover { background: var(--bm-surface-cool); margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); border-radius: var(--r-sm); }
@media (max-width: 720px) {
  .show-row { grid-template-columns: 70px 1fr; gap: var(--sp-4); }
  .show-row .show-actions, .show-row .show-meta-extra { grid-column: 2 / -1; }
}

/* Show-info wraps optional event photo + text. Flex so the photo sits to the left
   when present and the text reflows neatly, without any change to the show-row grid. */
.show-info {
  display: flex; align-items: center; gap: var(--sp-4); min-width: 0;
}
.show-info-text { min-width: 0; flex: 1; }
.show-photo {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background-size: cover; background-position: center;
  background-color: var(--bm-surface-cool);
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  .show-photo { width: 44px; height: 44px; }
}

/* Optional venue link — looks like the venue name but underlines on hover. */
.venue-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-soft);
}
.venue-link:hover { border-bottom-color: var(--accent); }

/* Tiny map-pin icon next to the venue name — links out to Google Maps. */
.show-map-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px;
  border-radius: 50%;
  color: var(--fg-2); background: transparent;
  vertical-align: -3px;
  transition: color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}
.show-map-pin:hover { color: var(--accent); background: var(--bm-surface-cool); }

/* Calendar icon next to map-pin — downloads an .ics for upcoming shows. */
.show-cal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 4px;
  border-radius: 50%;
  color: var(--fg-2); background: transparent;
  vertical-align: -3px;
  transition: color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}
.show-cal:hover { color: var(--accent); background: var(--bm-surface-cool); }
.show-date {
  text-align: center;
  border-right: 1px solid var(--border);
  padding-right: var(--sp-4);
}
.show-date .month {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 600;
}
.show-date .day {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: 1;
  color: var(--fg-1);
  font-weight: 400;
  margin: 4px 0 2px;
}
.show-date .dow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.show-info .venue {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0;
}
.show-info .city {
  font-size: var(--fs-14);
  color: var(--fg-2);
  margin-top: 2px;
}
.show-info .city .sep { color: var(--fg-muted); margin: 0 6px; }
.show-meta-extra {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.show-meta-extra .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bm-surface-blush);
  color: var(--fg-2);
  font-weight: 500;
  margin-right: 6px;
}
.show-meta-extra .badge { background: var(--bm-surface-blush); color: var(--bm-pink); }
.show-meta-extra .badge.solo { background: var(--bm-surface-cool); color: var(--bm-blue); }
.show-meta-extra .badge.full { background: color-mix(in srgb, var(--bm-purple) 14%, white); color: var(--bm-purple); }

/* Tag library colors — mirror the swatch palette used in admin → Tags so
   the public pill matches the color Brooklyn picks there. */
.show-meta-extra .badge.color-pink     { background: var(--bm-surface-blush); color: var(--bm-pink); }
.show-meta-extra .badge.color-lavender { background: color-mix(in srgb, var(--bm-pink-lavender) 18%, white); color: color-mix(in srgb, var(--bm-pink-lavender) 80%, var(--fg-1)); }
.show-meta-extra .badge.color-purple   { background: color-mix(in srgb, var(--bm-purple) 14%, white); color: var(--bm-purple); }
.show-meta-extra .badge.color-teal     { background: var(--bm-surface-cool); color: var(--bm-teal); }
.show-meta-extra .badge.color-blue     { background: var(--bm-surface-cool); color: var(--bm-blue); }
.show-meta-extra .badge.color-amber    { background: color-mix(in srgb, #d97706 12%, white); color: #b45309; }
.show-meta-extra .badge.color-charcoal { background: color-mix(in srgb, var(--fg-1) 10%, white); color: var(--fg-1); }
.show-meta-extra .badge.color-cream    { background: var(--bm-surface-blush); color: var(--fg-2); }
.show-actions { display: flex; gap: var(--sp-2); align-items: center; }
.show-tickets {
  padding: 10px 18px;
  background: var(--fg-1);
  color: var(--fg-on-dark);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-2);
}
a.show-tickets:hover { background: var(--accent); }
.show-tickets.sold {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.show-tickets.sold:hover { background: transparent; color: var(--fg-muted); }
.show-tickets.past {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
/* Gig-status colors flow from Settings → Tags → Gig status. The pill
   pulls the same palette as every other tag swatch in the system. The
   color- classes win against the default .show-tickets dark fill. */
.show-tickets.color-pink     { background: var(--bm-pink); color: var(--fg-on-dark); border: none; }
.show-tickets.color-lavender { background: var(--bm-pink-lavender); color: var(--fg-1); border: none; }
.show-tickets.color-purple   { background: var(--bm-purple); color: var(--fg-on-dark); border: none; }
.show-tickets.color-teal     { background: var(--bm-teal); color: var(--fg-on-dark); border: none; }
.show-tickets.color-blue     { background: var(--bm-blue); color: var(--fg-on-dark); border: none; }
.show-tickets.color-amber    { background: #d97706; color: var(--fg-on-dark); border: none; }
.show-tickets.color-charcoal { background: var(--fg-1); color: var(--fg-on-dark); border: none; }
.show-tickets.color-cream    { background: var(--bm-surface-blush); color: var(--fg-1); border: 1px solid var(--border); }
/* Anchor variant (Tickets link) should keep its hover lift, but only if
   the user hasn't pinned a swatch — once a color class is in play, the
   hover preserves that color so the link doesn't flash to teal. */
a.show-tickets.color-pink:hover     { background: var(--bm-pink); }
a.show-tickets.color-lavender:hover { background: var(--bm-pink-lavender); }
a.show-tickets.color-purple:hover   { background: var(--bm-purple); }
a.show-tickets.color-teal:hover     { background: var(--bm-teal); }
a.show-tickets.color-blue:hover     { background: var(--bm-blue); }
a.show-tickets.color-amber:hover    { background: #d97706; }
a.show-tickets.color-charcoal:hover { background: var(--fg-1); }
a.show-tickets.color-cream:hover    { background: var(--bm-surface-blush); color: var(--fg-1); }

.shows-empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--fg-muted);
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--fs-24);
}

/* ============ MERCH ============ */
.merch { background: var(--bm-surface-cool); }
.merch-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bm-surface-cool);
  padding: 4px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-6);
}
.merch-filter button {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-soft);
  font-family: var(--font-body);
}
.merch-filter button.active {
  background: var(--bg-1);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}
.merch-filter button:hover:not(.active) { color: var(--fg-1); }

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-5) var(--sp-4);
}
.merch-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-soft);
}
.merch-card:hover { transform: translateY(-3px); }

.merch-photo {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--bm-surface-cool);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.merch-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur-2);
}
.merch-photo .merch-img {
  position: absolute; inset: 0;
  opacity: 0;
}
.merch-photo .merch-img.active { opacity: 1; }

.merch-tag-overlay {
  position: absolute;
  top: 12px; left: 12px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  background: var(--bg-1);
  color: var(--fg-1);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.merch-tag-overlay.sold { background: var(--fg-1); color: var(--fg-on-dark); }
.merch-tag-overlay.low { background: var(--accent-warm); color: var(--fg-1); }
.merch-tag-overlay.preorder { background: var(--accent); color: var(--fg-on-dark); }

/* Merch "Badge" tag (m.tag from the library) — opposite corner from the
   inventory pill so both can show simultaneously without overlapping. */
.merch-badge-overlay {
  position: absolute;
  top: 12px; right: 12px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  background: var(--bg-1);
  color: var(--fg-1);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-weight: 600;
  z-index: 2;
}
.merch-badge-overlay.color-pink     { background: var(--bm-pink); color: var(--fg-on-dark); }
.merch-badge-overlay.color-lavender { background: var(--bm-pink-lavender); color: var(--fg-1); }
.merch-badge-overlay.color-purple   { background: var(--bm-purple); color: var(--fg-on-dark); }
.merch-badge-overlay.color-teal     { background: var(--bm-teal); color: var(--fg-on-dark); }
.merch-badge-overlay.color-blue     { background: var(--bm-blue); color: var(--fg-on-dark); }
.merch-badge-overlay.color-amber    { background: #d97706; color: var(--fg-on-dark); }
.merch-badge-overlay.color-charcoal { background: var(--fg-1); color: var(--fg-on-dark); }
.merch-badge-overlay.color-cream    { background: var(--bm-surface-blush); color: var(--fg-1); }

.merch-photo-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(252,251,250,0.92);
  color: var(--fg-1);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2);
  z-index: 2;
}
.merch-photo-nav.prev { left: 10px; }
.merch-photo-nav.next { right: 10px; }
.merch-photo:hover .merch-photo-nav { opacity: 1; }
.merch-photo-nav:hover { background: var(--bg-1); }

.merch-dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.merch-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(252,251,250,0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--dur-2);
}
.merch-dot.active { background: var(--bg-1); width: 18px; border-radius: 3px; }

.merch-meta {
  padding: 0 4px 4px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.merch-cat {
  font-size: 10px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 600;
  margin-bottom: 4px;
}
.merch-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-24);
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--fg-1);
  min-height: calc(2 * 1.15em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.merch-sub {
  font-size: var(--fs-14);
  color: var(--fg-2);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-normal);
  min-height: calc(1 * var(--lh-normal) * 1em);
}
.merch-row {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  align-items: baseline;
  gap: var(--sp-3);
}
.merch-price {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--fg-1);
}
.merch-sizes {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}
.merch-empty {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  color: var(--fg-muted);
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--fs-20);
}

@media (max-width: 720px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
  .merch-name { font-size: var(--fs-20); }
  .merch-photo-nav { opacity: 1; width: 32px; height: 32px; background: rgba(252,251,250,0.85); }
}
@media (max-width: 420px) {
  .merch-grid { grid-template-columns: 1fr; }
  .merch-filter button { padding: 7px 14px; font-size: 13px; }
}

/* ============ PHOTO GALLERY — playful asymmetric mosaic ============ */
.gallery {
  background: linear-gradient(135deg, var(--bm-surface-blush) 0%, var(--bm-surface-cool) 100%);
  overflow: hidden;
}
.gallery-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 60px;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.gallery-tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bm-surface-cool);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-soft), box-shadow var(--dur-3) var(--ease-soft);
}
.gallery-tile:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: var(--shadow-3); z-index: 2; }
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-4) var(--ease-soft);
}
.gallery-tile:hover img { transform: scale(1.04); }

/* Tile size + position presets */
.gt-1  { grid-column: span 5; grid-row: span 7; transform: rotate(-1.2deg); }
.gt-2  { grid-column: span 4; grid-row: span 4; transform: rotate(1.5deg); }
.gt-3  { grid-column: span 3; grid-row: span 5; transform: rotate(-2deg); }
.gt-4  { grid-column: span 4; grid-row: span 3; transform: rotate(0.8deg); }
.gt-5  { grid-column: span 3; grid-row: span 4; transform: rotate(-0.8deg); }
.gt-6  { grid-column: span 5; grid-row: span 6; transform: rotate(1.4deg); }
.gt-7  { grid-column: span 4; grid-row: span 5; transform: rotate(-1.6deg); }
.gt-8  { grid-column: span 3; grid-row: span 4; transform: rotate(2deg); }

.gallery-tile img.pos-upper  { object-position: center 25%; }
.gallery-tile img.pos-center { object-position: center center; }

/* Decorative scribble accents (desktop only — read as "X" on small screens) */
@media (min-width: 901px) {
.gallery-mosaic::before,
.gallery-mosaic::after {
  content: "";
  position: absolute;
  width: 80px; height: 80px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.gallery-mosaic::before {
  top: -10px; left: 36%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%233EB7B2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 40 Q 25 20, 40 40 T 70 40'/%3E%3C/svg%3E");
}
.gallery-mosaic::after {
  bottom: -10px; right: 28%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23FDA2C5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 50 Q 25 30, 40 50 T 70 50'/%3E%3C/svg%3E");
}
}

/* Mobile: simpler 2-column stagger */
@media (max-width: 720px) {
  .gallery-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 50px;
  }
  .gt-1 { grid-column: span 6; grid-row: span 6; }
  .gt-2, .gt-3, .gt-4, .gt-5, .gt-6, .gt-7, .gt-8 { grid-column: span 3; grid-row: span 4; }
}

/* ============ BOOKING ============ */
.booking { background: var(--fg-1); color: var(--fg-on-dark); position: relative; overflow: hidden; }
.booking::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--bm-pink) 22%, transparent) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--bm-purple) 28%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
.booking .container { position: relative; }
.booking .section-title { color: var(--fg-on-dark); }
.booking .section-title em { color: var(--bm-pink); }
.booking .section-lead { color: rgba(252,251,250,0.7); }
.booking .eyebrow { color: rgba(252,251,250,0.6); }
.booking .eyebrow::before { color: var(--bm-pink-lavender); }
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }

.booking-info p {
  color: rgba(252,251,250,0.75);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  margin: 0 0 var(--sp-5);
}
.booking-checklist {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.booking-checklist li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-16);
  color: rgba(252,251,250,0.85);
}
.booking-checklist li:nth-child(1)::before { background: rgba(253,162,197,0.18); border-color: rgba(253,162,197,0.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FDA2C5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.booking-checklist li:nth-child(2)::before { background: rgba(227,164,239,0.18); border-color: rgba(227,164,239,0.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E3A4EF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.booking-checklist li:nth-child(3)::before { background: rgba(98,93,199,0.22); border-color: rgba(98,93,199,0.45); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23625DC7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.booking-checklist li:nth-child(4)::before { background: rgba(62,183,178,0.18); border-color: rgba(62,183,178,0.4); }
.booking-checklist li::before {
  content: "";
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(62,183,178,0.18);
  border: 1px solid rgba(62,183,178,0.4);
  display: grid; place-items: center;
  color: var(--accent);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233EB7B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.form {
  background: rgba(252,251,250,0.04);
  border: 1px solid rgba(252,251,250,0.08);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(252,251,250,0.55);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: rgba(252,251,250,0.06);
  border: 1px solid rgba(252,251,250,0.12);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--fg-on-dark);
  font-size: var(--fs-16);
  font-family: var(--font-body);
  transition: border-color var(--dur-2);
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(252,251,250,0.35); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FCFBFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field select option { background: var(--fg-1); color: var(--fg-on-dark); }
.form-submit {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.form-fineprint {
  font-size: var(--fs-12);
  color: rgba(252,251,250,0.5);
  max-width: 40ch;
  text-wrap: pretty;
  line-height: 1.45;
}
.form-success {
  background: rgba(62,183,178,0.15);
  border: 1px solid rgba(62,183,178,0.3);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  color: var(--fg-on-dark);
}
.form-success .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  margin: 0 auto var(--sp-4);
}
.form-success h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-32);
  margin: 0 0 var(--sp-3);
  color: var(--fg-on-dark);
}
.form-success p {
  color: rgba(252,251,250,0.75);
  margin: 0;
}

/* ============ NEWSLETTER ============ */
.newsletter {
  background: var(--bm-surface-cool);
  text-align: center;
}
.newsletter .container-narrow > .eyebrow { display: inline-flex; }
.newsletter h2 { margin: var(--sp-3) auto var(--sp-3); }
.newsletter p { font-size: var(--fs-18); color: var(--fg-2); max-width: 50ch; margin: 0 auto var(--sp-6); }
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.newsletter-names input {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-size: var(--fs-16);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-2);
}
.newsletter-names input:focus { border-color: var(--accent); }
.newsletter-form > input[type="email"] {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-size: var(--fs-16);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-2);
}
.newsletter-form > input[type="email"]:focus { border-color: var(--accent); }
.newsletter-form button {
  padding: 12px 20px;
  background: var(--fg-1);
  color: var(--fg-on-dark);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2);
}
.newsletter-form button:hover { background: var(--accent); }
@media (max-width: 480px) {
  .newsletter-names { grid-template-columns: 1fr; }
}
.newsletter-note {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  margin-top: var(--sp-3);
}

/* ============ FOOTER ============ */
.footer {
  background: var(--fg-1);
  color: var(--fg-on-dark);
  padding: var(--sp-8) 0 var(--sp-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--sp-3);
}
.footer-brand .wordmark {
  font-family: var(--font-logo);
  font-size: 56px;
  line-height: 1;
  color: var(--fg-on-dark);
}
.footer-brand .tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(252,251,250,0.5);
  margin-top: 6px;
}
.footer-brand p {
  color: rgba(252,251,250,0.6);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  margin: var(--sp-4) 0 var(--sp-4);
  max-width: 30ch;
}
.footer h4 {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(252,251,250,0.5);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-list a {
  font-size: var(--fs-14);
  color: rgba(252,251,250,0.85);
  transition: color var(--dur-2);
}
.footer-list a:hover { color: var(--accent); }
.footer-socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer-social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--social-color, rgba(252,251,250,0.5));
  background: transparent;
  display: grid; place-items: center;
  color: var(--social-color, rgba(252,251,250,0.7));
  transition: all var(--dur-2) var(--ease-soft);
}
.footer-social-link[data-social="instagram"] { --social-color: var(--bm-pink-lavender); }
.footer-social-link[data-social="facebook"]  { --social-color: var(--bm-teal); }
.footer-social-link[data-social="youtube"]   { --social-color: var(--bm-pink); }
.footer-social-link:hover {
  background: var(--social-color, var(--accent));
  border-color: var(--social-color, var(--accent));
  color: var(--bm-text-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -6px var(--social-color, var(--accent));
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(252,251,250,0.1);
  font-size: var(--fs-12);
  color: rgba(252,251,250,0.45);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.footer-sig {
  font-family: var(--font-script);
  font-size: var(--fs-24);
  color: rgba(252,251,250,0.7);
}

/* ============ MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(29,29,28,0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: fadeIn var(--dur-3) var(--ease-soft);
}
.modal.open { display: flex; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 1024px;
  aspect-ratio: 16/9;
  background: black;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: pop var(--dur-3) var(--ease-soft);
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute;
  top: -48px; right: 0;
  color: var(--fg-on-dark);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(252,251,250,0.1);
  border: 1px solid rgba(252,251,250,0.2);
}
.modal-close:hover { background: rgba(252,251,250,0.2); }
.modal iframe { width: 100%; height: 100%; border: 0; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   Skip link (a11y) + mobile menu
   ============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--fg-1);
  color: var(--fg-on-dark);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 600;
  z-index: 200;
  transition: top var(--dur-2);
}
.skip-link:focus { top: 8px; }

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  flex-direction: column;
  gap: 0;
  z-index: 99;
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu a {
  display: block;
  padding: 14px 4px;
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu .mobile-menu-cta {
  margin-top: var(--sp-3);
  background: var(--fg-1);
  color: var(--fg-on-dark);
  text-align: center;
  border-radius: var(--r-pill);
  padding: 14px 24px;
  border-bottom: 0;
  font-weight: 600;
}

/* ============================================================
   Tablet (≤ 980px)
   ============================================================ */
@media (max-width: 980px) {
  :root {
    --sp-9: 80px;
    --sp-8: 56px;
    --sp-7: 40px;
  }
  .container { padding: 0 var(--sp-4); }
  .hero { padding: var(--sp-6) 0 var(--sp-7); }
  .hero-photo-wrap { aspect-ratio: 4/5; max-height: 560px; }
  .video-thumb-row { grid-template-columns: 130px 1fr; }
}

/* ============================================================
   Mobile (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --fs-56: 40px;
    --fs-44: 32px;
    --fs-32: 24px;
    --fs-24: 20px;
    --fs-20: 17px;
    --sp-9: 64px;
    --sp-8: 44px;
    --sp-7: 32px;
  }
  body { font-size: var(--fs-14); }
  .container, .container-narrow { padding: 0 var(--sp-3); }
  section { padding: var(--sp-7) 0; }

  /* Nav */
  .nav-cta { display: none; }
  /* keep nav sticky on mobile so the hamburger is always reachable */

  /* Hero */
  .hero-display { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-lead { font-size: var(--fs-16); }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .hero-meta { gap: var(--sp-4); }
  .hero-meta-item { flex: 1 1 45%; }
  .hero-photo-wrap { aspect-ratio: 4/5; }

  /* Ticker */
  .ticker-item { font-size: var(--fs-24); gap: var(--sp-3); }
  .ticker-track { gap: var(--sp-5); }

  /* Music */
  .player-card { padding: var(--sp-5); }
  .player-track-info .title { font-size: var(--fs-24); }
  .tracklist-row { grid-template-columns: 28px 1fr auto; padding: var(--sp-3); gap: var(--sp-3); }
  .tracklist-row .tag { display: none; }
  .tracklist-row .info .title { font-size: var(--fs-18); }
  .streaming-row { justify-content: center; }
  .streaming-link { flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* Videos */
  .video-thumb-row { grid-template-columns: 110px 1fr; gap: var(--sp-3); }
  .video-feature-cap { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .video-feature-cap .title { font-size: var(--fs-20); }

  /* Shows */
  .shows-head { gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .show-row { padding: var(--sp-4) 0; }
  .show-info .venue { font-size: var(--fs-18); }
  .show-meta-extra { margin-top: var(--sp-2); }
  .show-actions { margin-top: var(--sp-2); }

  /* Gallery */
  .gallery-tile { transform: rotate(0deg) !important; }

  /* Booking */
  .booking { padding: var(--sp-7) 0; }
  .form { padding: var(--sp-5); }
  .form-submit { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .form-submit .btn { justify-content: center; }
  .form-fineprint { text-align: center; }

  /* Footer */
  .footer { padding: var(--sp-7) 0 var(--sp-4); }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }
}

/* Extra-small (≤ 420px) */
@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-photo-tag { font-size: 10px; padding: 6px 10px; }
  .player-controls { gap: var(--sp-3); }
  .player-btn.play { width: 56px; height: 56px; }
  .nav-logo img { height: 44px; }
}

/* Inputs need 16px+ on iOS to avoid auto-zoom */
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   CART — slide-out drawer + add-to-cart UI on merch cards
   ============================================================ */

/* Add-to-cart row on merch card */
.merch-buy {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: auto;
  padding-top: var(--sp-3);
}
.merch-size {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 0 12px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-1);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg-1);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231D1D1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
  transition: border-color var(--dur-2);
}
.merch-size:focus { outline: none; border-color: var(--accent); }
.merch-add {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px;
  padding: 0 16px;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--fg-on-dark);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-soft), transform var(--dur-1);
}
.merch-add:hover { background: var(--accent-warm); color: var(--fg-1); }
.merch-add:active { transform: scale(0.98); }
.merch-add:disabled {
  background: var(--bg-2); color: var(--fg-muted);
  cursor: not-allowed; opacity: 0.7;
}
.merch-add.added {
  background: var(--accent);
  pointer-events: none;
}

/* Drawer + overlay */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(29,29,28,0.55);
  backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-soft);
}
.cart-overlay[data-open="true"] { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-1);
  z-index: 100;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 40px rgba(29,29,28,0.18);
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease-soft);
  overflow: hidden;
}
.cart-drawer[data-open="true"] { transform: translateX(0); }

.cart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.cart-eyebrow {
  display: block;
  font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-warm); font-weight: 600; margin-bottom: 4px;
}
.cart-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 32px; line-height: 1.1; margin: 0;
  letter-spacing: -0.01em;
}
.cart-title em { color: var(--accent); }
.cart-close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--fg-2);
  border-radius: 50%; cursor: pointer;
  transition: background var(--dur-2);
}
.cart-close:hover { background: var(--bg-2); color: var(--fg-1); }

.cart-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 24px 20px;
  -webkit-overflow-scrolling: touch;
}
.cart-empty {
  padding: 56px 16px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cart-empty .icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bm-surface-blush);
  display: grid; place-items: center;
  color: var(--accent-warm);
}
.cart-empty .ttl {
  font-family: var(--font-display); font-style: italic;
  font-size: 26px; color: var(--fg-1);
}
.cart-empty .body { color: var(--fg-2); font-size: var(--fs-14); max-width: 28ch; line-height: var(--lh-normal); }
.cart-empty .keep-shopping {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--fg-1); color: var(--fg-on-dark);
  font-size: var(--fs-14); font-weight: 600;
  cursor: pointer; border: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-img {
  width: 72px; height: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.cart-line-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.cart-line-info { min-width: 0; }
.cart-line-name {
  font-size: var(--fs-14); font-weight: 600;
  line-height: 1.3; margin: 0 0 2px;
  color: var(--fg-1);
}
.cart-line-meta {
  font-size: 12px; color: var(--fg-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}
.cart-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  height: 30px;
  background: var(--bg-1);
}
.cart-qty button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--fg-1); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.cart-qty button:hover { color: var(--accent); }
.cart-qty button:disabled { color: var(--fg-muted); cursor: not-allowed; }
.cart-qty .q {
  min-width: 22px; text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.cart-line-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px;
}
.cart-line-price {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.cart-line-remove {
  border: 0; background: transparent;
  color: var(--fg-muted); cursor: pointer;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.cart-line-remove:hover { color: var(--accent-warm); }

.cart-foot {
  flex: 0 0 auto;
  padding: 18px 24px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: 12px;
}
.cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-style: italic;
  font-size: 24px;
  color: var(--fg-1);
}
.cart-summary-row span:last-child {
  font-family: var(--font-mono); font-style: normal;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.cart-summary-note {
  font-size: 12px; color: var(--fg-muted);
  margin-top: 2px;
}
.cart-checkout {
  width: 100%; justify-content: center;
  height: 50px; font-size: var(--fs-14);
}
.cart-checkout:disabled {
  background: var(--bg-2); color: var(--fg-muted);
  cursor: not-allowed; box-shadow: none;
}
.cart-trust {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.cart-trust .trust-item {
  display: inline-flex; align-items: center; gap: 5px;
}

/* Toast — "added to bag" */
.cart-toast {
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--fg-1); color: var(--fg-on-dark);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none;
  z-index: 120;
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-soft);
}
.cart-toast[data-show="true"] {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.cart-toast .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--fg-on-dark);
}

@media (max-width: 720px) {
  .cart-drawer { width: 100vw; }
  .cart-title { font-size: 26px; }
  .merch-buy { flex-direction: column; }
  .merch-size { width: 100%; }
}