/* =========================
   BREAKPOINTS & MOBILE NAV
   ========================= */

/* hamburger button (hidden desktop) */
.hamburger {
  display: none;
  position: relative;
  width: 46px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--color-lighter-grey);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  justify-self: end;
  margin-left: auto;
}

.hamburger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 17px;
}
.hamburger span:nth-child(3) {
  top: 24px;
}
body.nav-open .hamburger span:nth-child(1) {
  top: 17px;
  transform: rotate(45deg);
}
body.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .hamburger span:nth-child(3) {
  top: 17px;
  transform: rotate(-45deg);
}

body.nav-open {
  overflow: hidden;
}

/* tablet: tighten hero header height */
@media (max-width: 1100px) {
  .bundles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --drawer-gap: 45px;
  }
  .mobile-nav {
    /* make sure the drawer is positioned off the header, not with margins */
    position: fixed; /* or sticky if your drawer uses that */
    top: calc(
      var(--header-h) + var(--fang-depth) + var(--drawer-gap) +
        env(safe-area-inset-top, 0px)
    ) !important;
    left: 0;
    right: 0;
    /* if you see any weird spacing, kill default margins/padding here */
    margin-top: 0 !important;
  }

  /* inner wrapper (if you have one) shouldn’t add extra spacing */
  .mobile-nav .mobile-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* switch to mobile nav */
@media (max-width: 900px) {
  .main-nav.left,
  .main-nav.right,
  .preorder-link {
    display: none !important;
  }
  .hamburger {
    display: grid;
    align-items: center;
  }
  .site-header .header-inner {
    min-height: 84px;
  }
  :root {
    --header-h: 84px;
  }
}

/* shows: collapse columns earlier */
@media (max-width: 980px) {
  .show-card {
    grid-template-columns: 100px 1fr 160px;
  }
  .show-venue {
    display: none;
  }
}

/* phone layout */
@media (max-width: 640px) {
  .hero-logo {
    max-width: 60vw;
    margin-left: 0;
    height: auto;
  }
  .ep-title {
    font-size: clamp(3.2rem, 12vw, 4.2rem);
  }
  .shows .container {
    padding-top: 4rem;
  }
  .show-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 0.5rem;
  }
  .show-date {
    grid-auto-flow: column;
    justify-content: start;
    gap: 0.6rem;
  }
  .show-cta {
    justify-self: start;
  }
}
/* ========== MOBILE FIXES (<= 900px) ========== */
@media (max-width: 900px) {
  /* 1) Header / spacing shim */
  :root {
    --header-h: 84px;
  }
  body:before {
    height: var(--header-h);
  }
  .container {
    padding: 0 1rem;
  }

  /* 2) Hero – smaller, centered */
  .hero {
    min-height: calc(95vh - var(--header-h));
    padding: 0 1rem 2rem;
    align-items: center;
  }
  .hero-logo {
    height: 120px;
    max-width: 70vw;
    margin: 0 0 0.5rem;
  }
  .ep-title {
    font-size: clamp(3rem, 12vw, 4.25rem);
    margin-bottom: 0.25rem;
  }
  .hero-meta {
    transform: none;
  }
  .cta-btn {
    font-size: 1.25rem;
    padding: 0.75rem 1.25rem;
    border-radius: 16px;
  }

  /* 3) Press – let it grow (fixes the overlap with Merch) */
  .press {
    height: auto;
    padding: 3rem 0;
  }
  .press-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .press-quote {
    padding: 1.25rem;
  }
  .press-nav {
    display: none;
  } /* optional: hide arrows on small screens */

  /* 4) Merch – stack sidebar above grid */
  .merch {
    padding: 3rem 0;
  }
  .merch .container {
    padding: 0 1rem;
  }
  .merch-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .merch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  /* very narrow phones: 1 per row */
  @media (max-width: 520px) {
    .merch-grid {
      grid-template-columns: 1fr;
    }
  }

  /* 5) Shows – tighter padding; cards full-width; CTA easy to tap */
  .shows {
    padding: 3rem 0;
  }
  .shows .container {
    padding-top: 1rem;
  }
  .show-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .show-cta {
    justify-content: flex-start;
  }
  .show-cta .btn {
    padding: 0.75rem 1rem;
  }

  /* 6) Gallery – a little breathing room on phones (JS handles masonry) */
  .gallery {
    padding: 3rem 0;
  }
}

/* Ultra small devices */
@media (max-width: 400px) {
  .logo img {
    height: 72px;
  }
  .ep-title {
    font-size: clamp(2.5rem, 11vw, 3.25rem);
  }
}
/* ====== GLOBAL TWEAKS ====== */
@media (max-width: 900px) {
  .container {
    padding: 0 1rem;
  }
  :root {
    --header-h: 84px;
  }
}

/* ====== HERO ====== */
@media (max-width: 700px) {
  .hero {
    min-height: calc(88vh - var(--header-h));
    padding-bottom: 2.5rem;
  }
  .hero-content {
    margin-top: 10vh;
  }
  .hero-logo {
    max-width: 60vw;
    margin: 0 0 -1rem 0; /* stop the logo sitting over the title */
  }
  .ep-title {
    font-size: clamp(3.2rem, 12vw, 5rem);
    margin-bottom: 0.25rem;
  }
  .ep-sub {
    font-size: 1rem;
  }
  .cta-btn {
    font-size: 1.25rem;
    padding: 0.75rem 1.25rem;
    border-radius: 18px;
  }
}

/* ====== MERCH ====== */
@media (max-width: 1024px) {
  .merch-layout {
    grid-template-columns: 1fr; /* stack sidebar above products */
    gap: 1.25rem;
  }
  .merch-sidebar {
    order: 0;
  }
  .merch-main {
    order: 1;
  }
  .merch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (max-width: 560px) {
  .merch-grid {
    grid-template-columns: 1fr;
  }
  .merch-card {
    border-radius: 12px;
  }
  .merch .container {
    padding: 0 1rem;
  }
}

/* Fix big pill buttons overflowing in cards */
@media (max-width: 560px) {
  .bundle-card .price-row,
  .action-row {
    gap: 0.5rem;
  }
  .bundle-card .btn {
    width: auto;
  }
}

/* ====== SHOWS (bg & header) ====== */
@media (max-width: 900px) {
  .shows {
    padding: 3rem 0 4rem;
  }
  .shows-bg {
    background-size: cover; /* cover instead of 100% width */
    background-position: center;
    opacity: 0.28;
  }
  .shows .container {
    padding-top: 2.25rem;
  }
  .shows-head {
    align-items: flex-end;
    gap: 0.75rem;
  }
  .shows-head h2 {
    font-size: 1.4rem;
  }
  .shows-head h2::after {
    width: 220px;
  }
}

/* Shows tabs drifting off the right */
@media (max-width: 700px) {
  .shows__tabs {
    flex: 0 0 auto;
    width: 100%;
    justify-content: space-between;
    padding: 0.2rem;
  }
  #btn-upcoming,
  #btn-past {
    padding: 0.45rem 0.9rem;
  }
}

/* Make each show card feel native on mobile */
@media (max-width: 640px) {
  .show-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 14px;
  }
  .show-date {
    grid-auto-flow: column;
    justify-content: start;
    gap: 0.6rem;
  }
  .show-card > * {
    padding-left: 0;
  }
  .show-card > *:not(:first-child)::before {
    display: none;
  } /* kill vertical dividers */
  .show-cta {
    justify-content: flex-start;
  }
}

/* ====== PRESS ====== */
@media (max-width: 900px) {
  .press {
    height: auto;
    padding: 3.5rem 0 4rem;
  } /* remove fixed height causing empty gap */
  .press-quote {
    padding: 1.25rem 1rem;
  }
  .press-head h2::after {
    width: 220px;
  }
}
@media (max-width: 600px) {
  .press-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ====== GALLERY (keep Masonry + spacing sane) ====== */
@media (max-width: 900px) {
  .gallery {
    padding: 3rem 0 4rem;
  }
  .gallery .container {
    padding: 0 1rem;
  }
  .gallery-head h2::after {
    width: 220px;
  }
}

/* Force 4-up gallery on mobile (match desktop layout but smaller) */
@media (max-width: 900px) {
  #gallery-grid {
    display: grid !important; /* ensure not overridden by other styles */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important; /* slightly tighter spacing for small screens */
  }
  /* keep the portrait tile shape consistent */
  #gallery-grid .gallery-item {
    aspect-ratio: 2 / 3;
  }
  #gallery-grid .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ====== LIGHTBOX (UI polish on small screens) ====== */
@media (max-width: 700px) {
  .lb__img {
    max-height: 82vh;
  }
  .lb__cap {
    font-size: 0.9rem;
    gap: 0.5rem;
  }
  .lb__nav,
  .lb__close {
    width: 48px;
    height: 48px;
  }
  .lb__prev {
    left: 12px;
  }
  .lb__next {
    right: 12px;
  }
  .lb__close {
    top: 12px;
    right: 12px;
  }
}
/* =========================
   GLOBAL MOBILE TWEAKS
   ========================= */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }
  .container {
    padding: 0 1rem;
    max-width: 100%;
  }
  :root {
    --header-h: 84px;
  }
}

/* =========================
   HERO (logo/title/callout)
   ========================= */
@media (max-width: 900px) {
  .hero {
    min-height: calc(100vh - var(--header-h));
    padding: 0 1rem 2.5rem;
  }
  .hero-content {
    margin-top: calc(18vh - var(--header-h));
  }
  .hero-logo {
    max-width: 68vw;
    height: auto;
    margin: 0 0 -1rem 0;
  }
  .ep-title {
    font-size: clamp(3.2rem, 11vw, 5.2rem);
    margin-bottom: 0;
  }
  .hero-meta {
    transform: none;
  }
  .ep-sub {
    font-size: 1rem;
  }
  .cta-btn {
    font-size: 1.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 16px;
  }
}

/* =========================
   ABOUT (stack columns)
   ========================= */
@media (max-width: 900px) {
  .about {
    padding: 3rem 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-bio h2::after,
  .about-block h3::after {
    width: 220px;
  }
  .about-block {
    margin-bottom: 2.5rem;
  }
}

/* =========================
   SHOWS (tabs & spacing)
   ========================= */
@media (max-width: 900px) {
  .shows {
    padding: 3.5rem 0;
  }
  .shows .container {
    padding-top: 3.5rem;
  }
  .shows-head {
    align-items: flex-start;
    gap: 0.75rem;
  }
  .shows__tabs {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
    padding: 0.25rem;
  }
  .shows__tabs button {
    flex: 1 1 auto;
    white-space: nowrap;
  }
  /* card tightening already exists; ensure no clipping */
  #shows-panels {
    overflow: visible !important;
    height: auto !important;
  }
}

/* =========================
   MERCH (single column on mobile)
   ========================= */
@media (max-width: 900px) {
  .merch {
    padding: 3.5rem 0;
  }
  .merch .container {
    padding: 0 1rem;
  }
  .merch-layout {
    grid-template-columns: 1fr;
  }
  .merch-title::after {
    width: 220px;
  }
  .merch-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .merch-pager {
    grid-template-columns: 100px 1fr 100px;
  }
}

/* =========================
   PRESS (prevent huge gap/overflow)
   ========================= */
@media (max-width: 900px) {
  .press {
    padding: 3rem 0;
    height: auto;
  }
  .press-head h2::after {
    width: 220px;
  }
  .press-quote {
    padding: 1.25rem;
  }
}

/* =========================
   GALLERY (keeps your JS masonry happy)
   ========================= */
@media (max-width: 900px) {
  .gallery {
    padding: 3rem 0;
  }
  .gallery-head h2::after {
    width: 220px;
  }
  /* safety: ensure the grid can shrink and not enforce columns via CSS */
  #gallery-grid {
    width: 100%;
  }
  /* put these near your nav/header rules */
  .site-header .header-inner {
    position: relative;
  }

  /* hard-center the logo */

  /* keep the other groups anchored left/right */
  .site-header .main-nav.left {
    justify-self: start;
  }
  .site-header .right-group {
    justify-self: end;
  }

  .about-hero img {
    width: 150%;
    height: 100%;
    margin-left: -6rem;
    margin-bottom: -5rem;
  }
}

/* =========================
   LIGHTBOX controls (center glyphs)
   ========================= */
.lb__nav,
.lb__close {
  display: inline-grid; /* stronger than generic grid */
  place-items: center; /* centers icon */
  line-height: 0; /* remove inline glyph line-height wobble */
  padding-bottom: 1px; /* tiny optical nudge (you liked this!) */
}

/* Keep the burger always visible on tablet & mobile */
@media (max-width: 1180px) {
  .hamburger {
    position: fixed; /* out of header flow, pinned to viewport */
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(
      env(safe-area-inset-right, 0px) + 22px
    ); /* nudge in from the edge */
    z-index: 10000;
    margin-left: 0; /* kill any auto margin from grid */
  }
  /* Nudge header content so the fixed burger doesn't overlap — keep the logo centered */
  .site-header .header-inner {
    padding: 0 clamp(56px, 6vw, 88px); /* balanced left/right gutters across tablet sizes */
  }
}

/* Keep the header fang centered under the logo on mobile */
@media (max-width: 900px) {
  .site-header {
    --fang-x: calc(50% + 6px); /* small optical nudge to the right */
  }
}
/* Shows header + tabs: mobile layout */
@media (max-width: 720px) {
  .shows-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .bundle-card .btn {
    font-size: 0.6rem;
  }

  .bundle-card .meta {
    font-size: 0.7rem;
  }

  .bundle-card .title {
    font-size: 0.8rem;
  }
  .shows__tabs {
    width: 100%;
    justify-content: space-between;
    padding: 4px; /* keeps the rounded container look */
    overflow: hidden; /* prevents inner overflow shimmer */
  }

  .shows__tabs button {
    flex: 1 1 0;
    text-align: center;
    padding: 0.6rem 0.5rem;
    border-radius: 999px;
  }
}
@media (max-width: 720px) {
  .shows .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .about-hero img {
    height: auto;
    max-height: none;
  }
}
/* Backdrop behind the mobile drawer */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: none;
}
body.nav-open .nav-backdrop {
  display: block;
}

/* Compact, centered drawer */
.mobile-nav {
  position: fixed;
  top: calc(
    var(--header-h) + var(--fang-depth) + var(--drawer-gap, 45px) +
      env(safe-area-inset-top, 0px)
  );
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  max-height: calc(100dvh - var(--header-h) - 24px);
  height: auto;
  overflow: auto;

  background: rgba(24, 22, 27, 0.98);
  border: 1px solid var(--color-lighter-grey);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  z-index: 998;

  padding: 16px 20px 24px;
}
.mobile-nav .stack {
  margin: 0;
  padding: 8px 0 0;
  display: grid;
  gap: 8px;
  list-style: none; /* remove bullets in mobile drawer */
  padding-left: 0; /* kill default ul indent */
}
.mobile-nav .stack li {
  list-style: none;
}
.mobile-nav .stack li a {
  display: block;
  padding: 14px 6px;
  border-bottom: 1px solid var(--color-grey);
  text-decoration: none;
  color: var(--color-text);
  font-family: "Cinzel", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.mobile-nav .stack li:last-child a {
  border-bottom: 0; /* rounded end “after Contact” */
}

/* Drawer visibility */
.mobile-nav {
  display: none;
}
body.nav-open .mobile-nav {
  display: block;
}

.shows {
  position: relative;
  min-height: 100vh;
}
.shows .container {
  position: relative;
  z-index: 1;
}
.shows-bg {
  position: absolute;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  background: url("../images/live-bg.jpg") top center;
  background-size: 150%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.3;
  filter: contrast(1.05) saturate(1.05) brightness(0.85);
}
#shows-panels {
  height: auto !important;
  overflow: visible !important;
} /* ensure no height collapse */

#nav-toggle {
  border: 0;
  background: none;
}
/* Optional: tidy mobile drawer spacing */
/* mobile drawer pre-order pill */
.mobile-nav .mobile-preorder {
  display: block !important;
  margin: 0.5rem 0 0.75rem;
}
/* Drawer content = vertical stack */
.mobile-nav .mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px; /* tiny offset so it clears the logo */
  padding-top: 0; /* undo earlier padding */
  position: static; /* no abs container needed */
}

/* Pre-Order pill as a normal block at the top of the panel */
.mobile-nav .mobile-preorder,
.mobile-nav .preorder-link {
  position: static; /* <— important: no absolute */
  align-self: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: var(--color-accent-orange);
  color: var(--color-bg) !important;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 4px auto 10px; /* small space above the list */
  z-index: auto; /* let the panel handle stacking */
}

/* The nav list follows normally */
.mobile-nav .stack {
  margin-top: 0;
}

/* Mobile drawer spacing tweaks */
.mobile-nav {
  /* move the whole panel a touch down under the header/logo */
  padding-top: 18px; /* was 8px */
}

/* Pre-order pill: sit lower, not hugging the top */
.mobile-nav .preorder-link {
  position: static !important;
  display: block;
  text-align: center;
  margin: 18px 16px 8px; /* ↑ more top space, ↓ smaller gap to menu */
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: var(--color-accent-orange);
  color: var(--color-bg) !important;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Menu list: tighten the gap to the pill and sit higher */
.mobile-nav .stack {
  margin-top: 6px !important; /* pull list up toward the pill/logo */
  padding-top: 0; /* in case any padding was added earlier */
}

/* Make sure tap target stays above everything */
.site-header .hamburger {
  z-index: 10001;
}

/* =========================
   SHOWS — mobile row layout (>=480px)
   Keeps desktop-like row on phones while staying readable
   ========================= */
@media (max-width: 900px) and (min-width: 480px) {
  .shows-head h2 {
    margin-top: 2px;
    font-size: 1rem;
  }
  /* Put the card back into a row: [date | details | CTA] */
  .show-card {
    grid-template-columns: 84px 1fr auto !important; /* overrides earlier 1fr stack */
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  /* Date column: compact vertical stack, aligned to the left edge */
  .show-date {
    display: grid;
    grid-auto-flow: row;
    justify-items: center; /* center the day/mon/year within the 84px rail */
    align-content: center;
    justify-self: start; /* keep the whole date block flush-left in the card */
    padding-left: 0;
  }
  .show-date .day {
    font-size: 1.6rem;
  }
  .show-date .mon {
    letter-spacing: 0.12em;
  }
  .show-date .year {
    opacity: 0.75;
  }

  /* Main text column */
  .show-main {
    text-align: left;
  }
  .show-main .title {
    margin: 0;
  }
  .show-venue {
    display: none;
  } /* optional on small screens */

  /* CTA column: keep button tidy */
  .show-cta {
    justify-content: flex-end;
  }
  .show-cta .btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
  }

  /* Remove vertical dividers on small row layout for a cleaner look */
  .show-card > * {
    padding-left: 0;
  }
  .show-card > *:not(:first-child)::before {
    display: none;
  }
}

/* Ultra‑small phones (<480px) keep the stacked layout but fix the centered date */
@media (max-width: 479px) {
  .show-card {
    text-align: left;
  }
  .show-date {
    justify-self: start;
    grid-auto-flow: row; /* ensure it's a vertical stack, not side‑by‑side */
    justify-items: center;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  /* About */
  .about-bio h2::after,
  .about-block h3::after,
  /* Press / Gallery / Merch / Shows headings if they use the same divider */
  .press-head h2::after,
  .gallery-head h2::after,
  .merch-title::after,
  .shows-head h2::after {
    margin-left: 0; /* stop centering */
    margin-right: auto; /* pin to the left */
    background-position: left center; /* ensure the graphic starts at the left */
  }
}

/* === Merch mobile enforce & desktop guard === */
@media (max-width: 900px) {
  .merch .merch-grid {
    display: grid;
    grid-template-columns: 1fr !important; /* force single column after re-renders */
    gap: 1rem !important;
  }
  .merch .merch-card .inner {
    padding: 0.9rem 1rem 1.1rem;
  }
  .merch .action-row .btn {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 901px) {
  .merch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .merch .merch-grid,
  .merch [data-grid],
  .merch [class*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
/* === ULR UK/EU overflow fix — mobile only === */
@media (max-width: 900px) {
  /* Only when merch.js has flagged the grid as ULR UK/EU */
  #merch-grid[data-source="ulr_uk"] {
    max-width: 100%;
    overflow-x: hidden; /* stop page from widening/zooming out */
  }

  /* Ensure nothing inside a card can force width */
  #merch-grid[data-source="ulr_uk"] .merch-card {
    min-width: 0;
  }

  /* Contain the media box and make the image scale down */
  #merch-grid[data-source="ulr_uk"] .product-media {
    overflow: hidden;
  }
  #merch-grid[data-source="ulr_uk"] .product-media img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover; /* keeps a nice crop if their image is huge */
  }

  /* Long titles shouldn’t stretch the card */
  #merch-grid[data-source="ulr_uk"] .title {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }
}

/* iPad / Tablet (<=1180px) — hamburger, centered header logo, lock logo aspect, prevent hero logo stretching */
@media (max-width: 1180px) {
  /* Header: show burger, hide desktop nav + header preorder pill */
  .main-nav.left,
  .main-nav.right,
  .preorder-link {
    display: none !important;
  }

  .hamburger {
    display: grid;
    align-items: center;
  }

  /* Compact header height & centered grid */
  .site-header .header-inner {
    min-height: 84px;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* keep logo centered */
    align-items: center;
  }
  :root {
    --header-h: 84px;
  }

  /* Header logo (top bar): width-led, never distort */
  .logo {
    grid-column: 2;
    justify-self: center;
  }
  .logo img {
    width: clamp(110px, 12vw, 180px);
    height: auto !important;
    max-width: none; /* override any earlier max-width */
    object-fit: contain;
  }

  /* Hero logo: prevent stretching on iPad widths */
  .hero-logo {
    width: clamp(260px, 40vw, 560px);
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
  }
}

/* Slightly tighter portrait iPad tweaks */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header .header-inner {
    padding: 0 0.75rem;
  }
  .logo img {
    width: clamp(120px, 14vw, 190px);
  }
}

/* ===== Header sigil (top logo) — prevent width squash on iPad ===== */
@media (max-width: 1180px) {
  /* Force height-led sizing; kill any earlier width clamps */
  .logo img {
    width: auto !important; /* do not control width */
    height: min(
      64px,
      calc(var(--header-h) - 16px)
    ) !important; /* keep within header */
    max-width: none !important; /* avoid inherited caps */
    object-fit: contain; /* safety, no distortion */
    display: block; /* remove inline gaps */
  }
}
/* Discography tabs — mobile layout */
@media (max-width: 900px) {
  /* move the tabs into normal flow */
  .discog-tabs,
  .discography-tabs {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: flex;
    gap: 8px;
    align-items: center;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 92vw;
    margin: 0 auto 14px;
    padding: 4px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-grey);
    border-radius: 999px;
    z-index: 1; /* sit above bg, below header */
  }
  .discog-tabs::-webkit-scrollbar,
  .discography-tabs::-webkit-scrollbar {
    display: none;
  }

  /* tab buttons */
  .discog-tabs button,
  .discography-tabs button,
  .discog-tabs .tab,
  .discography-tabs .tab {
    flex: 0 0 auto;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-lighter-grey);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* active state */
  .discog-tabs .is-active,
  .discography-tabs .is-active,
  .discog-tabs [aria-selected="true"],
  .discography-tabs [aria-selected="true"] {
    background: var(--color-accent-orange);
    color: var(--color-bg);
    border-color: transparent;
  }

  /* content spacing */
  .discog-panels,
  .discography-panels {
    margin-top: 10px;
  }

  /* big cover images shouldn’t overflow */
  .discog-card img,
  .discography-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
  }
}

/* ======================================================
   DISCOGRAPHY — MOBILE (keep original, just stack)
   Place tabs directly under the H2; no rails, no scroll box
   ====================================================== */
@media (max-width: 900px) {
  /* 1) Stack heading and tabs (desktop likely uses a row) */
  .discog-head {
    display: block !important;
  }
  .discog-head h2 {
    margin: 0 0 10px !important;
  }

  /* 2) Use the original horizontal tab list, but positioned below H2 */
  .discog-head .discog-tabs,
  #discography .discog-tabs,
  #discography .discography-tabs,
  #discography nav[role="tablist"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;

    display: flex !important;
    flex-wrap: wrap !important; /* wrap like desktop */
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important; /* space under H2 */
    padding: 0 !important; /* remove any pill-container chrome */
    overflow: visible !important; /* no horizontal scroll box */

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* 3) Pills: keep original styles, just prevent stretching */
  .discog-head .discog-tabs > *,
  #discography .discog-tabs > *,
  #discography .discography-tabs > *,
  #discography nav[role="tablist"] > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* 4) Hide any right-side vertical rail version on phones */
  #discography .tabs-rail,
  #discography [class*="tabs-rail"],
  #discography .tabs-vertical,
  #discography [aria-orientation="vertical"] {
    display: none !important;
  }
}
@media (min-width: 700px) and (max-width: 1024px) {
  .merch .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Single column stack is fine, but make each piece full-width */
  .merch-layout {
    grid-template-columns: 1fr;
  }

  .merch-sidebar,
  .merch-main,
  #merch-grid,
  .merch-pager,
  .acc-group,
  .merch-cats,
  .merch-card {
    width: 100% !important;
    max-width: 100% !important; /* overrides the 392/400px phone cap */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Minimal mobile overflow fix for merch (keeps feed logic intact) */
@media (max-width: 900px) {
  /* The grid itself must not extend beyond viewport */
  #merch-grid {
    max-width: 392px;
    width: 100%;
  }
  .acc-group,
  .merch-cats,
  .merch-card {
    max-width: 392px;
  }
}

@media (max-width: 384px) {
  /* The grid itself must not extend beyond viewport */
  #merch-grid {
    max-width: 352px;
    width: 100%;
  }
  .acc-group,
  .merch-cats,
  .merch-card {
    max-width: 352px;
  }

  .merch-pager {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    width: 100%;
    max-width: min(400px, 100%); /* same cap as the grid */
    margin: 1rem auto;
    box-sizing: border-box;
  }

  .pager-prev,
  .pager-next {
    flex: 0 0 88px; /* tweak to taste (80–100px) */
    min-width: 88px;
  }

  /* Pages strip: grows, stays centered, never overflows container */
  .pager-pages {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0; /* critical to prevent overflow */
    overflow-x: auto; /* safe fallback if many pages */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pager-pages::-webkit-scrollbar {
    display: none;
  }

  /* Page dots */
  .pager-page {
    flex: 0 0 40px; /* fixed dots */
  }

  /* Defensive: kill any absolute positioning a theme/feed adds */
  .merch-pager,
  .pager-prev,
  .pager-next,
  .pager-pages {
    position: static !important;
  }
}

/* iPad/tablet fix: let Press grow to fit content, avoid overlap with Merch */
@media (min-width: 901px) and (max-width: 1180px) {
  .press {
    height: auto !important; /* stop 50vh from main.css causing overlap */
    padding: 3rem 0 4rem !important; /* ensure enough bottom space */
    overflow: visible !important; /* just in case */
  }
  .press-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .press-quote {
    /* keeps the quote block tidy */
    margin-bottom: 2rem;
  }
  .press + .merch {
    /* guard: ensure separation even if custom margins exist */
    margin-top: 2rem;
    clear: both; /* defensive; in case of any floated elements */
  }
}

@media (max-width: 480px) {
  .hero-streams .stream-icons a {
    font-size: 1.6rem;
  }
}
@media (max-width: 1180px) {
  .bundles-grid .bundle-card:nth-child(4),
  .bundles-grid .bundle-card:nth-child(5) {
    grid-column: auto;
    justify-self: center;
    position: static;
    left: auto;
    right: auto;
  }

  .bundle-card[data-handle="everything-bundle"] {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 680px;
  }

  .bundle-card[data-handle="everything-bundle"] .media {
    aspect-ratio: 16 / 9;
  }

  .bundle-card[data-handle="everything-bundle"] img {
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  .bundles-grid {
    grid-template-columns: 1fr;
  }

  .bundles-grid .bundle-card {
    justify-self: center;
    max-width: 520px;
  }

  .bundle-card[data-handle="everything-bundle"] {
    max-width: 100%;
  }
}