/* ==========================================================================
   Branson Show Tickets — Redesign
   Brand: deep blue + orange, with a warm paper/Ozark feel
   ========================================================================== */

:root {
  /* Brand */
  --blue:        #2E7DBA;
  --blue-600:   #1F6AA8;
  --blue-700:   #185A91;
  --blue-900:   #0E2F4D;
  --blue-950:   #081f33;

  --orange:     #EE7B22;
  --orange-600: #D8650F;
  --orange-100: #FFE9D6;

  /* Light→dark blue sweep: nav bar, announce bar, check icons, map button and
     the gradient hover states. Three stops so it reads as one smooth band.
     White-label sites re-point the ends (brand.gradient_start/_end) and the
     middle is blended from them — see partials/bst/brand-overrides. */
  --grad-a:     #2EC8E7;
  --grad-b:     #1E8BE8;
  --grad-c:     #1F6AD8;
  --grad:       linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 50%, var(--grad-c) 100%);

  /* Neutrals */
  --paper:      #FBFAF6;
  --paper-2:    #F3EFE7;
  --ink:        #15212E;
  --ink-2:      #2C3A4A;
  --muted:      #6B7686;
  --line:       #E5E1D8;
  --white:      #ffffff;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,30,50,.06), 0 1px 1px rgba(15,30,50,.04);
  --shadow:    0 6px 18px rgba(15,30,50,.08), 0 2px 6px rgba(15,30,50,.05);
  --shadow-lg: 0 24px 60px rgba(15,30,50,.18), 0 8px 20px rgba(15,30,50,.08);

  /* Type */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-script: 'Caveat', cursive;

  /* Layout */
  --container: 1240px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 8px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section   { padding: 96px 0; }
/* Hero-adjacent sections. The hero already carries its own bottom padding, so a
   further 96px on top pushed the detail-page tabs below the fold. Applied only
   to the FIRST section after a hero — mid-page sections keep the 96px rhythm.
   NOTE: also overridden in the max-width:820px block, which redefines .section
   later in this file and would otherwise win at equal specificity. */
.section--tight { padding-top: 40px; }
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-700);
  padding: 6px 12px;
  background: #DCEBF7;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow--orange { color: var(--orange-600); background: var(--orange-100); }
.eyebrow--light  { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head--light { color: #fff; }
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title--sm {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.section-head--light .section-title { color: #fff; }
.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}
.section-sub { color: var(--muted); font-size: 17px; margin-top: 14px; }
.section-sub--light { color: rgba(255,255,255,.78); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 6px 14px rgba(238,123,34,.32);
}
.btn--primary:hover { background: var(--orange-600); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(238,123,34,.4); }
.btn--ghost {
  background: rgba(255,255,255,.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.btn--ghost:hover { background: rgba(255,255,255,.22); }
.btn--outline {
  background: transparent;
  color: var(--blue-700);
  border: 1.5px solid var(--blue);
}
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--white {
  background: #fff; color: var(--blue-900);
}
.btn--white:hover { background: var(--orange); color: #fff; }
.btn--sm { padding: 10px 16px; font-size: 13.5px; }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--gradient-blue {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad) border-box;
  color: var(--blue-700);
  border: 2px solid transparent;
  box-shadow: none;
  transition: color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn--gradient-blue:hover {
  background: var(--grad);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(31, 106, 216, .35);
}

/* ===========================================================================
   ANNOUNCEMENT BAR
   =========================================================================== */
.announce {
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 0;
  text-align: center;
  letter-spacing: .02em;
}
.announce__inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
}
.announce__dot { width: 8px; height: 8px; border-radius: 50%; background: #FFD54D; box-shadow: 0 0 0 4px rgba(255,213,77,.25); }
.announce__hl { color: #FFD54D; font-weight: 800; }
.announce__sep { opacity: .55; }
.announce__phone { font-weight: 800; color: #FFD54D; padding-left: 6px; }
.announce__phone:hover { color: #fff; }

/* ===========================================================================
   HEADER
   =========================================================================== */
.hero-wrap { position: relative; }
.site-header { background: #fff; box-shadow: 0 1px 0 var(--line); position: sticky; top: 0; z-index: 50; transition: background .25s ease, box-shadow .25s ease, color .25s ease; }

/* Transparent overlay header (over the hero) */
.site-header--overlay { position: absolute; left: 0; right: 0; top: 0; background: transparent; box-shadow: none; z-index: 30; }
.site-header--overlay .site-header__inner { padding: 14px 24px; }
.site-header--overlay .logo__name,
.site-header--overlay .logo__name--thin { color: #fff; }
.site-header--overlay .logo__tld { color: rgba(255,255,255,.78); }
.site-header--overlay .search {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.25);
}
.site-header--overlay .search input { color: #fff; }
.site-header--overlay .search input::placeholder { color: rgba(255,255,255,.7); }
.site-header--overlay .search button { background: var(--orange); }
.site-header--overlay .header-phone { color: #fff; }
.site-header--overlay .header-phone strong { color: #fff; }
.site-header--overlay .header-phone small { color: rgba(255,255,255,.78); }
.site-header--overlay .header-phone:hover { background: rgba(255,255,255,.12); }

/* Hide the phone block while the header is transparent over the hero; reveal once scrolled */
.site-header--overlay .header-phone {
  display: none;
}
.site-header--overlay.is-scrolled .header-phone {
  display: inline-flex;
}
.site-header--overlay .cart-btn {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.site-header--overlay .cart-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.site-header--overlay .primary-nav { background: transparent; }
.site-header--overlay .primary-nav__inner { border-top: 1px solid rgba(255,255,255,.18); }
.site-header--overlay .primary-nav a { color: rgba(255,255,255,.92); }
.site-header--overlay .primary-nav a:hover, .site-header--overlay .primary-nav a.is-active { color: #fff; }

/* When scrolled, the overlay header becomes a normal solid sticky header */
.site-header--overlay.is-scrolled {
  position: fixed;
  top: 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,30,50,.08);
  animation: dropDown .35s ease both;
}
.site-header--overlay.is-scrolled .logo__name { color: var(--ink); }
.site-header--overlay.is-scrolled .logo__name--thin { color: var(--ink-2); }
.site-header--overlay.is-scrolled .logo__tld { color: var(--muted); }
.site-header--overlay.is-scrolled .search { background: var(--paper-2); border-color: transparent; }
.site-header--overlay.is-scrolled .search input { color: var(--ink); }
.site-header--overlay.is-scrolled .search input::placeholder { color: var(--muted); }
.site-header--overlay.is-scrolled .search button { background: var(--blue); }
.site-header--overlay.is-scrolled .header-phone { color: var(--blue-700); }
.site-header--overlay.is-scrolled .header-phone strong { color: var(--ink); }
.site-header--overlay.is-scrolled .header-phone small { color: var(--muted); }
.site-header--overlay.is-scrolled .cart-btn { background: var(--paper-2); border-color: transparent; color: var(--ink); }
.site-header--overlay.is-scrolled .primary-nav { background: var(--grad); }
.site-header--overlay.is-scrolled .primary-nav__inner { border-top: 0; }
.site-header--overlay.is-scrolled .primary-nav a { color: rgba(255,255,255,.88); }

@keyframes dropDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 24px;
}

/* Search icon button (in header meta) */
.search-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.search-btn:hover { background: #EAF3FB; color: var(--blue-700); }

/* On the transparent overlay header, match the cart-button glass style */
.site-header--overlay .search-btn {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.site-header--overlay .search-btn:hover { background: rgba(255,255,255,.22); }
.site-header--overlay.is-scrolled .search-btn {
  background: var(--paper-2);
  border-color: transparent;
  color: var(--ink);
}
.site-header--overlay.is-scrolled .search-btn:hover { background: #EAF3FB; color: var(--blue-700); }

/* ---------------------------------------------------------------------------
   Site-wide search panel

   Lives at the very top of <body> (partials/bst/search-panel), in normal flow,
   so opening it PUSHES the announce bar, header and hero down instead of
   covering them. It is therefore always on a light surface — the old
   .site-header--overlay variants are gone with the nesting that needed them.

   It still animates on max-height, but the open height is --search-panel-h,
   measured from the real content by script.js and kept current by a
   ResizeObserver. The old fixed 120px cap clipped anything taller — which the
   in-flow mobile suggest list definitely is.
   --------------------------------------------------------------------------- */
.search-panel {
  position: relative;
  z-index: 60;                      /* above the sticky header + primary nav */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #fff;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.search-panel.is-open {
  max-height: var(--search-panel-h, 400px);
  opacity: 1;
  overflow: visible;                /* let the suggest dropdown escape */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(15,30,50,.06);
}

.search-panel__form {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
}
.search-panel__icon { color: var(--blue); flex-shrink: 0; }
.search-panel__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 18px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 0;
  letter-spacing: -.01em;
}
.search-panel__form input::placeholder { color: var(--muted); font-weight: 400; }

.search-panel__close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .2s, color .2s, transform .2s;
}
.search-panel__close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }

@media (max-width: 700px) {
  .search-panel__form { gap: 10px; padding: 14px 0; }
  /* 16px keeps iOS Safari from zooming the viewport when the field focuses. */
  .search-panel__form input { font-size: 16px; padding: 10px 0; }
  .search-panel__close { width: 42px; height: 42px; }   /* 42px+ stays tappable */
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(238,123,34,.28), inset 0 -3px 0 rgba(0,0,0,.08);
}
.logo__word { display: inline-flex; align-items: baseline; gap: 2px; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo__name--thin { font-weight: 400; color: var(--ink-2); }
.logo__tld { color: var(--muted); font-weight: 600; font-size: 14px; }
.logo--light .logo__name { color: #fff; }
.logo--light .logo__name--thin { color: rgba(255,255,255,.7); }
.logo--light .logo__tld { color: rgba(255,255,255,.55); }

/* White-label clones: the uploaded logo IS the lockup (no name text beside
   it), so it gets the lockup's full height and enough width for a wide
   word-mark — the old 180px cap is what shrank those to a sliver. With BOTH
   variants uploaded the header renders two <img>s and the rules below swap
   them per header state; display lives here (never inline on the imgs, which
   would out-rank the state rules). Default = the solid header → color logo;
   transparent overlay → white logo; scrolled back to solid → color. */
.logo__img { height: 48px; width: auto; max-width: 320px; object-fit: contain; object-position: left center; display: block; }
.logo__img--light { display: none; }
.site-header--overlay .logo__img--light { display: block; }
.site-header--overlay .logo__img--dark { display: none; }
.site-header--overlay.is-scrolled .logo__img--light { display: none; }
.site-header--overlay.is-scrolled .logo__img--dark { display: block; }

/* Search */
.search {
  display: flex;
  align-items: center;
  background: var(--paper-2);
  border-radius: 999px;
  padding: 4px 6px 4px 18px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.search input {
  border: 0; background: transparent; outline: none;
  flex: 1; padding: 10px 4px; font-size: 14.5px; color: var(--ink);
}
.search input::placeholder { color: var(--muted); }
.search button {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
  transition: background .2s;
}
.search button:hover { background: var(--blue-700); }

/* Header meta */
.header-meta { display: flex; align-items: center; gap: 18px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-700);
  padding: 6px 10px;
  border-radius: 12px;
  transition: background .2s;
}
.header-phone:hover { background: #EAF3FB; }
.header-phone svg { color: var(--orange); }
.header-phone strong { display: block; font-size: 15px; color: var(--ink); }
.header-phone small { display: block; color: var(--muted); font-size: 11.5px; }
.cart-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background .2s;
}
.cart-btn:hover { background: #EAF3FB; color: var(--blue-700); }
.cart-btn__count {
  position: absolute; top: -4px; right: -4px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid #fff;
  font-weight: 700;
}

/* Primary Nav */
.primary-nav {
  background: var(--blue);
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-600) 100%);
  color: #fff;
}
/* Search page only: match the scrolled BST header's brand gradient. */
.bst-search .primary-nav {
  background: var(--grad);
}
.primary-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
}
.primary-nav a {
  display: inline-block;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.88);
  position: relative;
  transition: color .2s;
}
.primary-nav a:hover, .primary-nav a.is-active { color: #fff; }
.primary-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 8px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.nav-cta {
  background: var(--orange);
  color: #fff;
  padding: 5px 18px;
  margin: 8px 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  transition: background .2s, transform .15s;
}
.nav-cta:hover { background: var(--orange-600); transform: translateY(-1px); }

/* ===========================================================================
   HERO CAROUSEL — full-bleed with torn-paper reflection
   =========================================================================== */
.hero {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero__stage {
  position: relative;
  width: 100%;
}
.hero__viewport {
  overflow: hidden;
  position: relative;
}
.hero__track {
  display: flex;
  transition: transform .8s cubic-bezier(.6,.0,.2,1);
}
.hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 92vh;
  min-height: 650px;
  max-height: 775px;
  background: linear-gradient(180deg, #cdd9e3 0%, #eef2f6 60%, #fbfaf6 100%);
}
/* Image fills the entire slide */
.hero__image {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center 30%;
}
/* Soften the bottom of the image so text stays readable + overall darkening */
.hero__image::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background:
    linear-gradient(180deg, rgba(8,31,51,.65) 0%, rgba(8,31,51,.5) 30%, rgba(8,31,51,.5) 55%, rgba(8,31,51,.85) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Water-line removed — the join is now seamless */
.hero__slide::before { content: none; }
/* Reflection removed — hidden */
.hero__reflect, .hero__reflect::after { display: none; }

/* Title content fills the slide and centers in the space BELOW the overlay
   header — the top padding reserves the header zone so wrapping titles
   (e.g. "Abby Lee Miller LIVE…") never crash into the header. */
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  z-index: 3;
  padding: 150px 24px 90px;
  pointer-events: none;
}
.hero__content > * { pointer-events: auto; }
.hero__eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.4);
  margin-bottom: 20px;
}
.hero__content h1,
.hero__content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 72px);
  letter-spacing: -0.035em;
  margin: 0 auto 14px;
  line-height: .98;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 6px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  max-width: 1100px;
}
.hero__content p {
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 520px;
  margin: 0 auto;
  color: #fff;
  opacity: .96;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.hero__actions { display: flex; gap: 12px; margin-top: 24px; justify-content: center; flex-wrap: wrap; }

/* Nav buttons */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  display: grid; place-items: center;
  z-index: 15;
  transition: background .2s, color .2s, transform .15s;
}
.hero__nav:hover { background: var(--orange); color: #fff; transform: translateY(-50%) scale(1.05); border-color: var(--orange); }
.hero__nav--prev { left: 28px; }
.hero__nav--next { right: 28px; }

/* Progress pills. One per slide; the active one widens and an orange fill
   sweeps across it over the slide's duration (--hero-dur, set by the carousel
   JS from the block's autocycle_ms). The slide advances when the fill lands
   (animationend), so the pill IS the timer — pausing the animation pauses the
   carousel, and it resumes from where it stopped rather than from zero. */
.hero__dots {
  position: absolute;
  bottom: 86px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  z-index: 15;
}
/* The button is a 28px-tall hit target; the visible 8px pill is the inner
   track, so the tap area stays comfortable without stretching the shape. */
.hero__dots button {
  position: relative;
  width: 26px; height: 28px;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.hero__dots button.is-active { width: 64px; }
.hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
.hero__dot-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 8px; margin-top: -4px;
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  overflow: hidden;
  transition: background .3s;
}
.hero__dots button:hover .hero__dot-track { background: rgba(255,255,255,.65); }
.hero__dots button.is-active .hero__dot-track { background: rgba(255,255,255,.28); }
.hero__dot-fill {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__dots button.is-active .hero__dot-fill { animation: hero-dot-fill var(--hero-dur, 6.5s) linear forwards; }
.hero__dots.is-paused .hero__dot-fill { animation-play-state: paused; }
/* Not cycling (autocycle_ms = 0 or reduced motion): the active pill is simply full. */
.hero__dots.is-static button.is-active .hero__dot-fill { animation: none; transform: scaleX(1); }
@keyframes hero-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__dots button { transition: none; }
  .hero__dots button.is-active .hero__dot-fill { animation: none; transform: scaleX(1); }
}

/* Crowd silhouette (cheering hands) under the carousel */
.hero__tear {
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  width: 100%;
  height: 220px;
  display: block;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 -2px 6px rgba(0,0,0,.15));
}


/* ===========================================================================
   BOOK YOUR BRANSON — 4-up experience cards
   =========================================================================== */
.book__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.exp-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.exp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.exp-card__media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  background-size: cover;
  background-position: center;
  background-color: #d8dde3;
}
.exp-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.15) 100%);
}
.exp-card__heart {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background .2s, color .2s;
  cursor: pointer;
  z-index: 1;
}
.exp-card__heart:hover { background: #fff; color: var(--orange); }
.exp-card__tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--blue-900);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 1;
}
.exp-card__tag--bogo {
  background: var(--orange);
}
.exp-card__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.exp-card__body h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.exp-card__meta {
  display: flex; gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.exp-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.exp-card__meta svg { color: var(--blue); }
.exp-card__body p {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 18px;
  line-height: 1.55;
  flex: 1;
}
.exp-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.price small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--blue-900);
  letter-spacing: -0.02em;
}
.book__more { text-align: center; margin-top: 40px; }
/* Tighten the spacing where the book section meets "Why travelers pick us"
   (sections are 96px top+bottom = ~192px combined). */
/* padding-top also trimmed: this is the first section under the home hero. */
.book { padding-top: 48px; padding-bottom: 56px; }

/* ===========================================================================
   WHY CHOOSE US — overlapping polaroids
   =========================================================================== */
.why {
  padding-top: 39px;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(238,123,34,.07), transparent 70%),
    radial-gradient(ellipse 60% 70% at 10% 90%, rgba(46,125,186,.08), transparent 70%),
    var(--paper);
  position: relative;
  overflow: hidden;
}
.why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why__copy .section-title { margin-bottom: 20px; }
.lead { font-size: 18px; color: var(--ink-2); margin: 0 0 28px; max-width: 540px; }
.why__list {
  display: grid;
  gap: 16px;
  margin: 0 0 32px;
}
.why__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.why__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 2px 6px rgba(31, 106, 216, .3);
}
.why__list strong { display: block; font-size: 16px; color: var(--ink); }
.why__list small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.why__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.why__cta-sub { font-size: 14px; color: var(--muted); }
.why__cta-sub a { color: var(--blue-700); font-weight: 600; }

/* Photo stack — click-to-front interactive, fans up-right */
.photo-stack {
  position: relative;
  width: 100%;
  min-height: 540px;
  perspective: 1400px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 360px;
  height: 440px;
  margin: -220px 0 0 -180px;     /* center self around 50%/50% */
  background: #fff;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(15,30,50,.22), 0 8px 18px rgba(15,30,50,.10);
  cursor: pointer;
  transition:
    transform 1s cubic-bezier(.2,.7,.2,1.05),
    box-shadow .4s ease,
    filter .4s ease;
}
.photo-card__img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  background-color: #ddd;
}
.photo-card__cap {
  position: absolute;
  bottom: 24px; left: 24px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease .2s, transform .45s ease .2s;
}

/* Fan positions: 0 = front (largest, slight left tilt), 3 = back (most rotated, peeking up-right) */
.photo-card[data-pos="0"] {
  transform: translate(0, 0) rotate(-4deg) scale(1);
  z-index: 4;
  box-shadow: 0 38px 76px rgba(15,30,50,.28), 0 12px 28px rgba(15,30,50,.14);
}
.photo-card[data-pos="0"] .photo-card__cap { opacity: 1; transform: translateY(0); }
.photo-card[data-pos="1"] {
  transform: translate(46px, -28px) rotate(4deg) scale(.96);
  z-index: 3;
}
.photo-card[data-pos="2"] {
  transform: translate(82px, -50px) rotate(10deg) scale(.92);
  z-index: 2;
  filter: brightness(.96);
}
.photo-card[data-pos="3"] {
  transform: translate(112px, -70px) rotate(15deg) scale(.88);
  z-index: 1;
  filter: brightness(.92);
}
.photo-card[data-pos="0"]:hover { transform: translate(0, -6px) rotate(-3deg) scale(1.02); }

.photo-stack__badge {
  position: absolute;
  top: 4%; left: 6%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 26px rgba(238,123,34,.45);
  z-index: 10;
  pointer-events: none;
}

.why__body { font-size: 15.5px; color: var(--ink-2); margin: 0 0 28px; max-width: 560px; line-height: 1.65; }

/* ===========================================================================
   REVIEWS — dark blue testimonial grid
   =========================================================================== */
.reviews {
  position: relative;
  padding: 110px 0 120px;
  color: #fff;
  overflow: hidden;
}
.reviews__bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.reviews__photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.6) contrast(1.05) brightness(.7);
  opacity: .55;
}
.reviews__bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,47,77,.55) 0%, rgba(8,31,51,.78) 60%, rgba(8,31,51,.92) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}
.reviews__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
  z-index: 3;
}
/* Sun-flare in the corner for atmosphere (matches the reference) */
.reviews__flare {
  position: absolute;
  left: -10%; bottom: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle at 30% 70%, rgba(238,123,34,.32) 0%, rgba(238,123,34,.12) 30%, transparent 60%);
  z-index: 2;
  pointer-events: none;
}
.reviews__bg::after { /* dot pattern reasserted above; keep */ }
.reviews .container { position: relative; z-index: 1; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 60px;
}
.review {
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 56px 24px 24px;
  border-radius: var(--radius);
  margin-top: 38px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.review:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0,0,0,.32);
}
.review__avatar {
  position: absolute;
  top: -38px;
  left: 24px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.review__quote-mark {
  position: absolute;
  top: -22px;
  right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 0;
  padding-top: 14px;
  box-shadow: 0 6px 12px rgba(238,123,34,.4);
}
.review h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.review__excerpt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin: 0 0 4px;
}
.review__by-top {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}
.review__by-top em { color: var(--ink); font-style: italic; font-weight: 500; }
.review p:not(.review__excerpt):not(.review__by-top) {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}
.reviews__cta { text-align: center; margin-top: 56px; }

/* ===========================================================================
   ABOUT BRANSON
   =========================================================================== */
.about__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: stretch;
}
.about__copy { display: flex; flex-direction: column; }
.about__copy .eyebrow { align-self: flex-start; }
.about__copy p { font-size: 17px; color: var(--ink-2); margin: 0 0 16px; max-width: 620px; }
.about__copy p a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.about__copy p a:hover { color: var(--orange-600, var(--orange)); }
.about__copy .section-title { margin-bottom: 24px; }
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px dashed var(--line);
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  color: var(--blue-700);
  letter-spacing: -.02em;
  line-height: 1;
}
.stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

.about__guide {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.about__guide h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 18px;
  color: var(--blue-900);
}
.about__guide ul { display: grid; gap: 14px; flex: 1; }

.guide-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  transition: background .2s, transform .15s;
}
.guide-card:hover { background: #EAF3FB; transform: translateX(2px); }
.guide-card__img {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 92px;
}
.guide-card__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.25) 100%);
}
.guide-card__body {
  padding: 12px 14px 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.guide__cat {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 1;
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.guide__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.guide__date {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.about__guide-more {
  display: inline-block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--blue-700);
  font-weight: 700;
  font-size: 14px;
}

/* ===========================================================================
   READY TO BOOK CTA BANNER
   =========================================================================== */
.cta-banner-wrap {
  padding: 40px 0 80px;
  background: var(--paper);
}
.cta-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: stretch;
  background: linear-gradient(135deg, #0E2F4D 0%, #081f33 100%);
  border-radius: 28px;
  overflow: hidden;
  padding: 48px;
  color: #fff;
  box-shadow: 0 30px 60px rgba(15,30,50,.22), 0 12px 26px rgba(15,30,50,.14);
}
.cta-banner::before {
  /* faint silhouette pattern */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(238,123,34,.15), transparent 50%),
    radial-gradient(circle at 0% 0%, rgba(46,125,186,.18), transparent 40%);
  pointer-events: none;
}

.cta-banner__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.cta-banner__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cta-banner__photo-frame {
  position: absolute;
  inset: 0;
  border: 4px solid rgba(255,255,255,.08);
  border-radius: 18px;
  pointer-events: none;
}

.cta-banner__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-banner__badge {
  position: absolute;
  top: -24px;
  right: -16px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 1.05;
  box-shadow: 0 14px 30px rgba(238,123,34,.55);
  transform: rotate(-8deg);
  z-index: 5;
}
.cta-banner__badge span,
.cta-banner__badge strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 0.8;
  text-align: center;
  margin: 0;
}
.cta-banner__badge strong { margin-top: -2px; }

.cta-banner__eyebrow {
  font-family: var(--font-script);
  color: var(--orange);
  font-size: 24px;
  margin-bottom: 8px;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 18px;
  text-wrap: balance;
}
.cta-banner__text {
  font-size: 15.5px;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 24px;
}

.cta-banner__phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 4px;
  transition: color .2s;
}
.cta-banner__phone:hover { color: var(--orange); }
.cta-banner__phone svg { color: var(--orange); }
.cta-banner__hours {
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
  margin: 0 0 26px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.cta-banner__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-banner__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  transition: color .15s;
}
.cta-banner__link:hover { color: #fff; }

@media (max-width: 900px) {
  .cta-banner {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 32px;
  }
  .cta-banner__media { min-height: 260px; }
  .cta-banner__badge { width: 88px; height: 88px; top: -16px; right: -8px; }
  .cta-banner__badge span,
  .cta-banner__badge strong { font-size: 17px; }
}

/* ===========================================================================
   TRUST STRIP
   =========================================================================== */
.trust {
  background: var(--paper-2);
  padding: 38px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust__title {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 56px;
}
.trust__logo-img {
  height: 84px;
  width: auto;
  object-fit: contain;
  filter: grayscale(.05);
  transition: transform .2s ease, filter .2s ease;
}
.trust__logo-img:hover {
  transform: translateY(-3px) scale(1.05);
  filter: grayscale(0);
}
@media (max-width: 720px) {
  .trust__logo-img { height: 64px; }
  .trust__row { gap: 20px 32px; }
}

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer {
  background: var(--blue-950);
  color: rgba(255,255,255,.7);
  padding: 80px 0 28px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.site-footer__about p { font-size: 14px; margin: 18px 0; max-width: 360px; }
.site-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.site-footer__pay span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  color: rgba(255,255,255,.75);
}
.site-footer h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.site-footer ul { display: grid; gap: 8px; }
.site-footer ul a { font-size: 14px; transition: color .15s; }
.site-footer ul a:hover { color: var(--orange); }
.site-footer address { font-style: normal; font-size: 14px; line-height: 1.7; }
.site-footer address a { color: #fff; }
.site-footer__social { display: flex; gap: 8px; margin-top: 16px; }
.site-footer__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  color: #fff;
  transition: background .2s, color .2s;
}
.site-footer__social a:hover { background: var(--orange); }
.site-footer__legal {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.site-footer__legal a:hover { color: var(--orange); }

/* ===========================================================================
   COUPONS PILL (floating)
   =========================================================================== */
.coupons-pill {
  position: fixed;
  bottom: 18px; left: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: #fff;
  padding: 12px 18px 12px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(238,123,34,.4);
  transition: transform .2s;
}
.coupons-pill:hover { transform: translateY(-2px) scale(1.02); background: var(--orange-600); }
.coupons-pill__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--orange);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 14px;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1080px) {
  .book__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .about__inner { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .why__inner { grid-template-columns: 1fr; gap: 60px; }
  .why__stack { min-height: 520px; max-width: 600px; }
}
@media (max-width: 820px) {
  .section { padding: 64px 0; }
  /* Must be restated here: .section above resets padding-top at equal
     specificity and sits later in the file than .section--tight. */
  .section--tight { padding-top: 32px; }
  .reviews { padding: 64px 0; }
  .site-header__inner { gap: 14px; }
  .header-phone small { display: none; }
  .primary-nav__inner { overflow-x: auto; }
  .primary-nav a { padding: 14px 12px; font-size: 13px; }
  .nav-cta { display: none; }
  .hero { padding: 0; }
  .hero__slide { min-height: 560px; height: 80vh; }
  /* Keep arrows on mobile, just smaller and tucked closer to the edges */
  .hero__nav { width: 40px; height: 40px; }
  .hero__nav--prev { left: 12px; }
  .hero__nav--next { right: 12px; }
  .hero__content { padding: 110px 20px 80px; }
  .hero__dots { bottom: 56px; }
  .site-header--overlay .primary-nav__inner { overflow-x: auto; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .book__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  /* Tighter card + smaller fan so the up-right fanned cards never clip off the
     right edge on a phone (usable half-width is only ~156px at 360px). */
  .photo-card { width: 240px; height: 320px; margin: -160px 0 0 -120px; }
  .photo-card[data-pos="1"] { transform: translate(16px, -12px) rotate(4deg) scale(.96); }
  .photo-card[data-pos="2"] { transform: translate(30px, -22px) rotate(8deg) scale(.93); }
  .photo-card[data-pos="3"] { transform: translate(42px, -32px) rotate(12deg) scale(.9); }
  .photo-stack { min-height: 420px; transform: translateX(-20px); }
  .hero__nav { width: 36px; height: 36px; }
  .hero__content h1, .hero__content h2 { font-size: clamp(28px, 7vw, 44px); }
}

/* ===========================================================================
   CART DRAWER (right-side slide-in)
   =========================================================================== */
body.no-scroll { overflow: hidden; }

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.cart-drawer.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.cart-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer__head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.cart-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.cart-drawer__close:hover { background: #f3f5f8; }

.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 16px;
}
.cart-drawer__empty p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.cart-drawer__list[hidden],
.cart-drawer__empty[hidden],
.cart-drawer__foot[hidden] {
  display: none;
}

.cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.cart-item {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.cart-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}
.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart-item__body strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.cart-item__body small {
  font-size: 12px;
  color: var(--muted);
}
.cart-item__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  margin-top: 2px;
}
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item__qty button {
  width: 28px;
  height: 28px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cart-item__qty button:hover { background: #f3f5f8; }
.cart-item__qty span {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.cart-item__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
}
.cart-item__remove:hover { background: #fdecec; color: #c33; }

.cart-drawer__foot {
  padding: 16px 20px 22px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.cart-drawer__totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cart-drawer__totals span {
  font-size: 14px;
  color: var(--ink-2);
}
/* Subtotal reads as a line item now — the grand total below is the hero figure. */
.cart-drawer__totals strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
/* "Taxes & Fees" (VBRAN-230) — quiet line-item row between subtotal and total. */
.cart-drawer__tax {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cart-drawer__tax span,
.cart-drawer__tax strong { font-size: 14px; color: var(--ink-2); font-weight: 600; }
/* Grand total — takes over the big display treatment the subtotal used to have. */
.cart-drawer__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cart-drawer__grand span {
  font-size: 14px;
  color: var(--ink-2);
}
.cart-drawer__grand strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}
/* "You've Saved" line above the pop-out's subtotal. Green to match the
   checkout's savings row (.co-totals__row--saved) so the same figure reads the
   same way in both places. */
.cart-drawer__saved {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cart-drawer__saved span,
.cart-drawer__saved strong { color: #1F8A5B; font-weight: 800; font-size: 14px; }
/* Original/retail subtotal, struck through before the price actually paid.
   Same orange as the checkout's .co-totals__was and the ticket cards. */
.cart-drawer__amounts { display: inline-flex; align-items: baseline; gap: 8px; }
.cart-drawer__was { color: var(--orange-600); text-decoration: line-through; font-size: 14px; }
.cart-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.cart-drawer__cta:hover { background: var(--orange-600, var(--orange)); transform: translateY(-1px); }
.cart-drawer__pay {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}
.cart-drawer__pay span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
}
.cart-drawer__reassure {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

@media (max-width: 480px) {
  .cart-drawer__panel { width: 100vw; }
}

.menu-toggle { display: none; }

@media (max-width: 700px) {
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.14);
    border: 1px solid transparent;
    border-radius: 10px;
    gap: 4px;
    grid-auto-rows: 2px;
    align-content: center;
    flex-shrink: 0;
  }
  .menu-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-header--overlay.is-scrolled .menu-toggle {
    background: var(--paper-2);
    border-color: transparent;
  }
  .site-header--overlay.is-scrolled .menu-toggle span { background: var(--ink); }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .primary-nav { display: none; }
  .primary-nav.is-open { display: block; }
  .primary-nav__inner { display: block; padding: 0; overflow-x: visible; }
  .primary-nav ul { display: flex; flex-direction: column; flex-wrap: nowrap; }
  .primary-nav li { width: 100%; }
  .primary-nav a {
    display: block;
    /* width: 100%; */
    padding: 14px 20px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .nav-cta { display: inline-flex; margin: 12px 20px; text-align: center;}

  .site-header--overlay .primary-nav {
    background: var(--grad);
  }

  /* Mobile header: show only the orange B icon, hide the wordmark */
  .site-header__inner { gap: 10px; padding: 12px 16px; }
  .logo { gap: 0; margin-right: auto; }
  .logo__mark { width: 40px; height: 40px; font-size: 22px; }
  .logo__word { display: none; }
  /* Uploaded white-label logo: shorter and narrower so it sits beside the
     search/cart buttons instead of pushing them off the bar. */
  .logo__img { height: 36px; max-width: 200px; }
  .header-phone { display: none; }
  .header-meta { gap: 6px; flex-shrink: 0; }
  .search-btn, .cart-btn { width: 40px; height: 40px; flex-shrink: 0; }
}

/* ==========================================================================
   ATTRACTIONS PAGE
   ========================================================================== */

/* ---------- HERO BANNER ---------- */
.attr-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: var(--blue-900);
}
.attr-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,31,51,.8) 0%, rgba(8,31,51,.65) 30%, rgba(8,31,51,.7) 65%, rgba(8,31,51,.92) 100%);
}
.attr-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 150px 24px 70px;
}
.attr-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-shadow: 0 4px 24px rgba(0,0,0,.4);
  text-wrap: balance;
}
.attr-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}
.attr-hero__sub {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 17px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* ---------- INTRO STRIP ---------- */
.attr-intro {
  background: var(--paper);
  /* Tight top: the hero above already carries its own bottom padding. */
  padding: 28px 0 8px;
}
.attr-intro__text {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.attr-intro__text a { color: var(--blue-700); font-weight: 600; }
.attr-intro__text a:hover { color: var(--orange-600); text-decoration: underline; }

/* ---------- LAYOUT: main (left) + sidebar (right) ---------- */
.attr-section { padding: 40px 0 88px; background: var(--paper); }
.attr-layout {
  display: grid;
  /* minmax(0,…) lets the main column shrink to its share instead of growing
     to its content's min-content and pushing the sidebar off-screen. */
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
  max-width: min(1600px, calc(100vw - 24px));
  padding: 0 12px;
}

/* ---------- MAIN PANEL ---------- */
.attr-main {
  min-width: 0; /* allow the grid track to shrink (prevents card blow-out) */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 28px;
}

/* ---------- TOOLBAR ---------- */
.attr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  row-gap: 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.attr-toolbar__group { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; }
.attr-toolbar__group label {
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: -.01em;
}
.attr-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 36px 9px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  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='%232E7DBA' stroke-width='3' 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 12px center;
  transition: border-color .2s;
}
.attr-select:hover { border-color: var(--blue); }
/* Long option labels (e.g. property names) would otherwise autosize the
   select and push toolbar neighbors onto a second line. */
.attr-select--compact { max-width: 231px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #DCEBF7; }

/* Toolbar name search (shows listing). Mirrors .attr-select's chrome; the
   group flexes so the input soaks up leftover toolbar width, and wraps to a
   full-width row on narrow screens. */
.attr-toolbar__group--search { flex: 1 1 220px; min-width: 200px; }
.attr-search { position: relative; width: 100%; max-width: 340px; }
.attr-search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--blue); pointer-events: none;
}
.attr-search input {
  width: 100%;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px 9px 38px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .2s;
}
.attr-search input::placeholder { color: var(--muted); font-weight: 500; }
.attr-search input:hover { border-color: var(--blue); }
.attr-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #DCEBF7; }
.attr-toolbar__count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attr-toolbar__count strong { color: var(--ink); }
.attr-toolbar__spacer { flex: 1; }
.btn--map {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 14px rgba(31,106,216,.32);
  flex-shrink: 0;
}
.btn--map:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(31,106,216,.4); }

/* ---------- CARD GRID ---------- */
.attr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* ---------- ATTRACTION CARD ---------- */
.attr-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  perspective: 1200px;
  transition: box-shadow .3s ease;
}
.attr-card:hover { box-shadow: var(--shadow-lg); }

/* Flip disabled — cards stay on the front face for predictable clicking
   (the whole card is a link to the detail page; no hover flip). */
.attr-card__inner {
  position: relative;
}
.attr-card__face--front { position: relative; }
.attr-card__face--back {
  display: none; /* back/description face removed; detail lives on the show page */
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.attr-card__back-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--blue-900);
}
.attr-card__back-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
  overflow: auto;
}
.attr-card__back-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.attr-card__media {
  position: relative;
  /* Capped height (instead of width-driven aspect-ratio) so cards stay a
     sensible size at any column width and the full card fits the viewport. */
  height: clamp(170px, 14vw, 220px);
  background-size: cover;
  background-position: center;
  background-color: #cdd5dc;
  /* Clips the diagonal BOGO ribbon to the corner. */
  overflow: hidden;
}
.attr-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,31,51,.05) 40%, rgba(8,31,51,.5) 100%);
}
.attr-card__price {
  position: absolute;
  top: 16px; left: 0;
  z-index: 3;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  padding: 9px 16px 9px 18px;
  box-shadow: 0 8px 18px rgba(238,123,34,.4);
  border-radius: 0 6px 6px 0;
  /* A struck "was" price makes the flag longer — never let it wrap (VBRAN-234). */
  white-space: nowrap;
}
.attr-card__price small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 1px;
}
.attr-card__price s { opacity: .7; font-weight: 600; font-size: 13px; margin-right: 4px; }
/* Show cards anchor the price at the bottom-left so it sits consistently
   clear of the top-left BOGO ribbon and the top-right "Featured" pill. The
   offset clears the body panel, which overlaps the image bottom by 42px
   (.attr-card__body margin), so the tab never covers the category eyebrow. */
.attr-card__price--bottom { top: auto; bottom: 50px; }
/* Diagonal "BOGO 50% Off" corner ribbon — clipped by the media's overflow. */
.attr-card__ribbon {
  position: absolute;
  top: 30px; left: -50px;
  z-index: 4;
  width: 180px;
  transform: rotate(-45deg);
  background: var(--orange);
  box-shadow: 0 6px 16px rgba(238,123,34,.45);
  text-align: center;
  pointer-events: none;
}
.attr-card__ribbon span {
  display: block;
  padding: 5px 0;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.attr-card__featured {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--paper-2);
  color: #000;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
.attr-card__heart {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 6;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s;
  opacity: 0;
  transform: translateY(6px);
}
.attr-card:hover .attr-card__heart { opacity: 1; transform: translateY(0); }
.attr-card__heart:hover { background: #fff; color: var(--orange); }
.attr-card__body {
  position: relative;
  margin: -42px 16px 0;
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 20px;
  box-shadow: 0 -2px 0 rgba(0,0,0,.02);
  transition: margin .3s ease;
}
.attr-card__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 8px;
}
.attr-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--blue-900);
  line-height: 1.15;
  margin-bottom: 8px;
  text-wrap: balance;
}
.attr-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.attr-card__loc svg { color: var(--orange); flex-shrink: 0; }
.attr-card__offer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--orange);
  margin: -6px 0 14px;
}
.attr-card__stars--new {
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0;
}
.attr-card__meta--lodging { justify-content: flex-start; }
.lodging-cta {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
  background: #F6A04E;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(246,160,78,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.lodging-cta:hover { background: #ef8f36; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(246,160,78,.45); }
.lodging-cta:active { transform: translateY(0); }
.attr-card__face--back .lodging-cta { margin-top: auto; }
.attr-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
/* Full-card click target → detail page. Sits under the cart button + CTA so the
   whole card (either face) is clickable without the hover-flip stealing the
   click, while the cart stays its own action. */
.attr-card__link {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}
.attr-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.attr-card__meta svg { color: var(--blue); flex-shrink: 0; }
.attr-card__stars { margin-right: auto; color: #F5B915; letter-spacing: 1px; font-size: 13px; }
.attr-card__cta {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-700);
  white-space: nowrap;
  transition: gap .2s, color .2s;
}
.attr-card:hover .attr-card__cta { gap: 9px; color: var(--orange-600); }

/* eyebrow + add-to-cart sit on one row at the top of the body */
.attr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.attr-card__head .attr-card__eyebrow {
  margin-bottom: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Add-to-cart pill — opens the ticket modal. z-index keeps it above the
   stretched card link (z=5) so it stays clickable. */
.attr-card__cart {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--orange-100);
  color: var(--orange-600);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, background .2s, transform .15s;
}
.attr-card__cart svg { width: 16px; height: 16px; }
.attr-card__cart:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }

.attr-card[data-featured="true"] { box-shadow: var(--shadow-sm); }
.attr-card[data-featured="true"]:hover { box-shadow: var(--shadow-lg); }

/* Empty state */
.attr-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.attr-empty strong { display: block; font-size: 18px; color: var(--ink); margin-bottom: 6px; }

/* ---------- SIDEBAR: CATEGORIES FILTER ---------- */
.attr-sidebar { position: sticky; top: 96px; }
.filter-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.filter-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--paper-2);
  color: var(--ink);
}
.filter-card__head svg { color: var(--ink-2); }
.filter-card__head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter-list { padding: 8px; }
.filter-list button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  transition: background .18s, color .18s;
}
.filter-list button:hover { background: var(--grad); color: #fff; }
.filter-list button.is-active {
  background: var(--paper-2);
  color: var(--ink);
}
.filter-list__count {
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-list button:hover .filter-list__count { background: rgba(255,255,255,.22); color: #fff; }
.filter-list button.is-active .filter-list__count { background: var(--orange); color: #fff; }

/* Help / contact promo card in sidebar */
.filter-promo {
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  background: linear-gradient(150deg, var(--blue-900) 0%, var(--blue-950) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.filter-promo::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(238,123,34,.25), transparent 55%);
}
.filter-promo > * { position: relative; z-index: 1; }
.filter-promo__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  box-shadow: 0 10px 22px rgba(238,123,34,.45);
}
.filter-promo h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.filter-promo p { font-size: 13.5px; color: rgba(255,255,255,.78); margin: 0 0 16px; line-height: 1.55; }
.filter-promo__phone {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  margin-bottom: 4px;
}
.filter-promo__phone:hover { color: var(--orange); }
.filter-promo small { color: rgba(255,255,255,.6); font-size: 12px; }

/* Pagination */
/* Shows listing foot bar: Per Page + result count (left), pagination (right). */
.attr-footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.attr-footbar__left { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Pagination sits inside the foot bar here, so drop its standalone separator. */
.attr-footbar .attr-pagination { margin-top: 0; padding-top: 0; border-top: none; }

.attr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* The catalog listings render <button>s from JS; search paginates server-side
   and needs real <a> links (shareable, crawlable) — both share this styling. */
.attr-pagination button,
.attr-pagination a {
  min-width: 46px;
  height: 46px;
  padding: 0 6px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .15s;
}
.attr-pagination button:hover:not(:disabled),
.attr-pagination a:hover:not(.is-disabled) {
  border-color: var(--blue);
  color: var(--blue-700);
  transform: translateY(-2px);
}
.attr-pagination button.is-active,
.attr-pagination a.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 8px 16px rgba(238,123,34,.35);
}
.attr-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.attr-pagination a.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.attr-pagination__arrow svg { width: 18px; height: 18px; }

/* Attractions responsive */
@media (max-width: 1080px) {
  .attr-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
  .attr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .attr-layout { grid-template-columns: 1fr; }
  .attr-sidebar { position: static; order: -1; }
  .filter-promo { display: none; }
  /* Cap the category list height on mobile so it scrolls internally instead of
     pushing the shows grid far down the page. */
  .filter-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 560px) {
  .attr-grid { grid-template-columns: 1fr; }
  .attr-toolbar { flex-wrap: wrap; gap: 12px; }
  .attr-toolbar__group--search { flex-basis: 100%; }
  .attr-search { max-width: none; }
  .attr-toolbar__spacer { display: none; }
  .btn--map { width: 100%; justify-content: center; }
}

/* ---------- Map modal (View Map → Google Map popup) ---------- */
.map-modal {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.map-modal.is-open { opacity: 1; pointer-events: auto; }
.map-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}
.map-modal__panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(960px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 64px));
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease;
}
.map-modal.is-open .map-modal__panel { transform: translate(-50%, -50%) scale(1); }
.map-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--grad);
  color: #fff;
}
.map-modal__head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}
.map-modal__close {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: grid; place-items: center;
  transition: background .15s;
}
.map-modal__close:hover { background: rgba(255,255,255,.32); }
.map-modal__body { flex: 1; min-height: 0; position: relative; }
.map-modal__body iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* Leaflet map that replaced the static Google embed on the attractions
   listing. It needs a real height before init — Leaflet measures its container
   at construction, and a 0-height parent is the classic "grey tiles" bug. */
.attr-map { width: 100%; height: 100%; background: #e8edf1; }
/* Red pins, matching the legacy site. divIcon has no styling of its own, so the
   marker is just this SVG; the negative margins in the icon anchor put the
   point of the pin on the coordinate rather than the middle of the box. */
.attr-pin { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.attr-pin svg { display: block; }
/* Cluster bubbles restyled from markercluster's default green/yellow to the
   same red, so a cluster reads as "several pins" rather than a new symbol. */
.attr-cluster {
  background: rgba(214, 45, 32, .85);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font: 700 13px/32px 'Poppins', Arial, sans-serif;
  text-align: center;
  width: 34px; height: 34px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.attr-map__popup-name { font-weight: 700; font-size: 14px; color: var(--ink, #1a1d26); }
.attr-map__popup-link { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--orange, #F37920); font-weight: 600; }
/* Shown instead of an empty grey square when the listing's filters match
   nothing — otherwise the map looks broken rather than empty. */
.attr-map__empty {
  position: absolute; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 20px;
  background: rgba(255,255,255,.92);
  font-size: 15px; font-weight: 600; color: var(--muted, #6b7280);
  text-align: center;
}
/* The display:flex above beats the UA stylesheet's [hidden] { display: none },
   so the attribute alone does nothing and the overlay stays up permanently —
   washing out the map AND, at z-index 500, swallowing every hover and click
   meant for the pins. Same trap as .tm__when/.tm__pick (2722) and
   .sched-daybar/.weekstrip (3265); re-hide explicitly, as they do. */
.attr-map__empty[hidden] { display: none; }
/* The card a pin points at, flashed after the map scrolls it into view. */
.attr-card.is-map-target { animation: attrCardFlash 1.6s ease-out 1; }
@keyframes attrCardFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,45,32,0); }
  15%      { box-shadow: 0 0 0 4px rgba(214,45,32,.55); }
}

/* ---------- Time-selection modal (multi-time shows) ----------
   Reuses the .ticket-modal / .tm-* styling; these are the only extras:
   each showtime is a .tm-row with a radio, status line, price and "Select" pill. */
.tm-row--time { gap: 14px; align-items: center; padding-left: 6px; padding-right: 6px; }
.tm-row--time.is-selected { background: #FFF6EE; border-radius: 12px; }
.tm-radio { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer; }
.tm-row__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.tm-pick {
  flex-shrink: 0; padding: 9px 18px; border-radius: 999px;
  background: #F6A04E; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
  box-shadow: 0 8px 18px rgba(246,160,78,.36);
  transition: background .2s, transform .15s;
}
.tm-pick:hover { background: #ef8f36; transform: translateY(-1px); }
.tm-row--time.is-out { opacity: .6; }
.tm-pick.is-out { background: var(--paper-2); color: var(--muted); box-shadow: none; cursor: not-allowed; font-weight: 700; }
/* Drop the time list below the absolute close button so the first row's Select
   isn't covered (two-column layout only; scoped to the time modal). */
@media (min-width: 681px) { .time-modal .tm__list { padding-top: 52px; } }

/* ---------- Ticket modal (cart icon → per-attraction order popup) ---------- */
.ticket-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.ticket-modal.is-open { opacity: 1; visibility: visible; }
.ticket-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(26, 26, 26, 0.95);
}
.ticket-modal__dialog {
  position: relative; width: 100%; max-width: 760px;
  /* 60% of the old near-full-viewport cap: tier rows now carry promo +
     description lines, so unclamped the dialog towers — the list scrolls
     inside (.tm__list) instead. Phones keep the taller cap below. */
  max-height: calc((100vh - 48px) * .6); overflow: hidden;
  background: #fff; border-radius: 22px;
  box-shadow: 0 40px 90px rgba(8,31,51,.4);
  transform: translateY(24px) scale(.97);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  display: grid; grid-template-columns: 300px 1fr;
}
.ticket-modal.is-open .ticket-modal__dialog { transform: translateY(0) scale(1); }
.ticket-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink-2);
  display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s;
}
.ticket-modal__close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }

/* Left aside: heading + summary + CTA + phone */
.tm__aside {
  padding: 30px 28px; background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.tm__attr { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.tm__aside h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--ink); margin: 8px 0 0; line-height: 1.3; }
.tm__summary { margin-top: auto; padding-top: 24px; }
.tm__summary-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.tm__summary-row span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.tm__summary-row strong { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--blue-900); }
.tm__add {
  width: 100%; background: #F6A04E; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  padding: 15px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 12px 26px rgba(246,160,78,.4);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.tm__add:hover { background: #ef8f36; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(246,160,78,.5); }
.tm__add:active { transform: translateY(0); }
.tm__add.is-added { background: #1F8A5B; box-shadow: 0 12px 26px rgba(31,138,91,.4); }
.tm__foot { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }
.tm__foot a { font-weight: 800; color: var(--orange); }

/* Right: ticket rows with steppers */
/* Right column: chosen showtime (Show Date / Show Time) above the scrolling rows. */
/* max-height: inherit picks up the dialog's viewport cap — the dialog's grid
   row is auto-height, so without a cap of its own this column just grows to
   its content and the list never scrolls (the dialog clips instead). */
.tm__main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; max-height: inherit; }
/* Only the tier list scrolls — date/time header and special-request stay put. */
.tm__when, .tm__pick, .tm__request { flex-shrink: 0; }
/* Right padding clears the absolute close button (top/right:16px, 36px wide) so
   the top-right date/time field doesn't sit under the X. */
.tm__when { display: flex; gap: 18px; padding: 22px 64px 4px 28px; }
.tm__when-field { flex: 1; min-width: 0; }
.tm__when-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.tm__when-val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--blue-700); }
/* These blocks use display:flex, which would otherwise beat the [hidden]
   attribute the modal JS toggles — keep hidden meaning hidden. */
.tm__when[hidden], .tm__pick[hidden] { display: none !important; }
/* Activity date/time picker (scheduled tickets) */
.tm__pick { display: flex; flex-wrap: wrap; gap: 18px; padding: 22px 64px 4px 28px; }
.tm__pick-input { width: 100%; padding: 9px 12px; border: 1px solid #d9dee5; border-radius: 8px; font: inherit; font-size: 15px; color: var(--blue-700); background: #fff; }
.tm__pick-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,97,255,.15); }
.tm__pick-error { flex: 1 1 100%; margin: 2px 0 0; color: #dc3545; font-size: 13px; font-weight: 600; }
.tm__list { padding: 22px 28px; display: flex; flex-direction: column; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.tm__optional { font-weight: 500; color: #9aa3ad; text-transform: none; letter-spacing: 0; }
.tm__pick-note { flex-basis: 100%; margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft, #5b6b7c); }
.phone-order-notice { text-align: center; padding: 18px 6px 6px; }
.phone-order-notice__msg { font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.45; }
.phone-order-notice__call { margin: 0 0 6px; color: var(--ink); }
.phone-order-notice__call a { font-weight: 800; color: var(--blue); text-decoration: none; font-size: 18px; }
.phone-order-notice__call a:hover { text-decoration: underline; }
.phone-order-notice__hours { color: #9aa3ad; }
.tm__request { padding: 0 28px 20px; }
.tm__request-toggle { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--blue); text-decoration: underline; }
.tm__request-text { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; color: var(--ink); resize: vertical; }
.tm__request-text::placeholder { color: #9aa3ad; }
/* Chosen showtime echoed on the cart line + checkout summary. */
.cart-item__when { display: block; font-size: 12px; font-weight: 700; color: var(--blue-700); margin-top: 2px; }
.co-item__when { font-size: 12.5px; font-weight: 700; color: var(--blue-700); margin: 2px 0; }
.tm-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; }
.tm-row + .tm-row { border-top: 1px solid var(--line); }
.tm-row__info { flex: 1; }
.tm-row__name { font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.tm-row__price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--orange); margin-top: 3px; display: inline-block; }
.tm-row__price s { color: var(--muted); font-weight: 500; font-size: 13px; font-family: var(--font-sans); margin-right: 5px; }
.tm-row__price.free { color: var(--blue-700); }
.tm-row__desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.tm-row__promo { font-size: 13px; font-weight: 800; color: var(--orange, #F37920); margin-top: 4px; }

/* Stepper */
.stepper { display: inline-flex; align-items: center; border-radius: 999px; overflow: hidden; flex-shrink: 0; border: 1.5px solid var(--line); }
.stepper button { width: 34px; height: 34px; display: grid; place-items: center; font-weight: 800; font-size: 18px; line-height: 1; color: var(--blue-700); transition: background .15s, color .15s; }
.stepper button:hover { background: var(--blue); color: #fff; }
.stepper__val { min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stepper.has-qty { border-color: var(--orange); background: #FFF6EE; }

/* ---------- Schedules booking modal (showtime → tickets) — compact ---------- */
.sched-book__dialog { display: block; max-width: 820px; overflow-y: auto; }
/* Two-column layout: pin head/banner/CTA and scroll ONLY the ticket rows,
   instead of scrolling the whole dialog. Phones keep whole-dialog scroll —
   the stacked single column has no room for a pinned frame. */
@media (min-width: 681px) {
  .sched-book__dialog { display: flex; flex-direction: column; overflow: hidden; }
  .sched-book__head, .sched-book__banner { flex-shrink: 0; }
  /* minmax(0,1fr) forces the single implicit row to the body's real height —
     an auto row would size to content and break the inner scroll chain. */
  .sched-book__body { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .sched-book__left { overflow-y: auto; }
  .sched-book__right { min-height: 0; }
  .sched-book__grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .sched-book__grid-head { flex-shrink: 0; }
  #bookRows { overflow-y: auto; min-height: 0; }
}
/* Align the close button with the compact header title (default sits too low). */
.sched-book .ticket-modal__close { top: 10px; right: 12px; width: 32px; height: 32px; }
.sched-book__head { display: flex; align-items: center; padding: 11px 48px 10px 20px; border-bottom: 1px solid var(--line); }
.sched-book__head h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.sched-book__banner { width: 100%; height: 112px; overflow: hidden; background: var(--paper); }
.sched-book__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sched-book__body { display: grid; grid-template-columns: 1fr 1.05fr; }
.sched-book__left { padding: 14px 18px; border-right: 1px solid var(--line); }
.sched-book__right { padding: 14px 18px; display: flex; flex-direction: column; }
.sched-book__blurb { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.sched-book__when { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.sched-book__when > div { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.sched-book__lbl { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.sched-book__when strong { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--blue-700); }
.sched-book__timesel { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--blue-700); background: transparent; border: 0; padding: 0 18px 0 0; margin: -2px 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C2742E' stroke-width='3' 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 center; }
.sched-book__timesel:focus { outline: none; }
.sched-book__grid-head { display: flex; gap: 14px; padding-bottom: 5px; border-bottom: 2px solid var(--line); }
.sched-book__grid-head span { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--ink); }
.sched-book__grid-head span:first-child { width: 72px; flex-shrink: 0; }
.sched-book__row { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.sched-book__row + .sched-book__row { border-top: 1px solid var(--line); }
.sched-book__qty { width: 72px; flex-shrink: 0; height: 32px; border: 1.5px solid var(--line); border-radius: 8px; padding: 0 8px; font-weight: 700; font-size: 14px; color: var(--ink); background: #fff; }
.sched-book__qty:focus { outline: none; border-color: var(--orange); }
.sched-book__tname { font-size: 13.5px; color: var(--ink); }
.sched-book__tname b { font-weight: 800; }
.sched-book__age { color: var(--muted); font-weight: 600; }
.sched-book__price { font-family: var(--font-display); font-weight: 800; color: var(--blue-700); }
.sched-book__price.free { color: #1F8A5B; }
.sched-book__bogo { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 800; color: var(--orange); }
.sched-book__special { margin-top: 10px; }
.sched-book__special-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sched-book__special-toggle svg { transition: transform .18s; }
.sched-book__special-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.sched-book__special-input { width: 100%; margin-top: 8px; border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; color: var(--ink); resize: vertical; }
.sched-book__special-input:focus { outline: none; border-color: var(--orange); }
.sched-book__add {
  width: 100%; margin-top: 12px; background: #F6A04E; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; padding: 11px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 18px rgba(246,160,78,.36); transition: background .2s, transform .15s, box-shadow .2s;
}
.sched-book__add:hover { background: #ef8f36; transform: translateY(-2px); }
.sched-book__phone { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 10px 0 0; line-height: 1.45; }
.sched-book__phone a { display: block; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--blue-700); margin: 3px 0 1px; }
.sched-book__phone small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }

/* ---------- Schedules added-to-cart confirmation ---------- */
.sched-cart__dialog { display: block; max-width: 440px; }
.sched-cart__body { padding: 38px 30px 30px; text-align: center; }
.sched-cart__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #E7F4ED; color: #1F8A5B; margin-bottom: 16px; }
.sched-cart__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.sched-cart__sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 8px 0 0; }
.sched-cart__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.sched-cart__primary {
  width: 100%; background: #F6A04E; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; padding: 14px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 10px 22px rgba(246,160,78,.38); transition: background .2s, transform .15s, box-shadow .2s;
}
.sched-cart__primary:hover { background: #ef8f36; transform: translateY(-2px); }
.sched-cart__secondary {
  width: 100%; background: #fff; color: var(--blue-700); border: 1.5px solid var(--line);
  font-weight: 800; font-size: 15px; padding: 12px; border-radius: 999px; transition: background .15s, border-color .15s;
}
.sched-cart__secondary:hover { background: var(--paper); border-color: #D9D2C6; }

/* ---------- Schedules notice modal (within 24h / no online booking) ---------- */
.sched-notice__dialog { display: block; max-width: 620px; }
.sched-notice__head { display: flex; align-items: center; padding: 18px 56px 16px 28px; border-bottom: 1px solid var(--line); }
.sched-notice__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #C2453B; line-height: 1.3; }
.sched-notice__msg { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); line-height: 1.35; padding: 36px 28px; margin: 0; border-bottom: 1px solid var(--line); }
.sched-notice__phone { text-align: center; padding: 24px 28px; }
.sched-notice__phone span { display: block; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.sched-notice__phone a { display: block; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--blue-700); margin: 6px 0 3px; }
.sched-notice__phone small { color: var(--muted); font-size: 13px; }
.sched-notice__foot { display: flex; justify-content: flex-end; padding: 16px 28px 20px; }
.sched-notice__btn { border: 1px solid var(--line); border-radius: 8px; padding: 9px 20px; font-weight: 700; font-size: 14px; color: var(--ink-2); background: #fff; transition: background .15s, border-color .15s; }
.sched-notice__btn:hover { background: var(--paper); border-color: #D9D2C6; }

@media (max-width: 680px) {
  /* Single-column stack needs the vertical room back. */
  .ticket-modal__dialog { grid-template-columns: 1fr; max-height: calc(100vh - 48px); }
  .tm__aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .tm__summary { margin-top: 20px; }
  .sched-book__body { grid-template-columns: 1fr; }
  .sched-book__left { border-right: 0; border-bottom: 1px solid var(--line); }
  .sched-notice__msg { font-size: 20px; padding: 28px 22px; }
}
@media (max-width: 560px) {
  .tm__list { padding: 18px 20px; }
  .tm__aside { padding: 26px 22px; }
}

/* ==========================================================================
   CHECKOUT PAGE
   ========================================================================== */

/* ---------- page header banner (acts as the hero so the overlay header sits over it) ---------- */
.checkout-top {
  position: relative;
  padding: 150px 0 56px;
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.checkout-top .container { position: relative; z-index: 1; text-align: center; }
.checkout-top h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.025em; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* ---------- progress steps (on a light band beneath the hero) ---------- */
.checkout-steps-wrap {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.checkout-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.checkout-step {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700;
  color: var(--muted);
}
.checkout-step span {
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.checkout-step.is-active { color: var(--ink); }
.checkout-step.is-active span {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 4px 12px rgba(238,123,34,.5);
}
.checkout-step.is-done { color: var(--ink); }
.checkout-step.is-done span {
  background: #1F8A5B; border-color: #1F8A5B; color: #fff;
}
.checkout-step__sep {
  width: 38px; height: 2px;
  background: var(--line);
  margin: 0 14px; border-radius: 2px;
}

/* ---------- layout ---------- */
.checkout { background: var(--paper-2); padding: 40px 0 90px; }
.checkout__grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start;
}

/* ---------- form card ---------- */
.co-form {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 32px; box-shadow: 0 14px 36px rgba(8,31,51,.06);
}
.co-block + .co-block { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.co-sec-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--blue-900); letter-spacing: -.01em; margin: 0 0 20px;
}
.co-sec-num {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad);
  color: #fff; font-size: 14px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}

/* ---------- form controls ---------- */
.co-field { display: flex; flex-direction: column; gap: 7px; }
.co-field label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.co-input, .co-select {
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: #fff; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.co-input::placeholder { color: var(--muted); }
.co-input:focus, .co-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #DCEBF7; }
/* Browsers paint autofilled fields with a pale blue/yellow background that
   clashes with the clean white inputs. Force the fill back to white (the inset
   box-shadow trick is the only way to override the UA autofill background) so
   filled fields match empty ones — same clean look as the VB checkout. */
.co-input:-webkit-autofill,
.co-input:-webkit-autofill:hover,
.co-select:-webkit-autofill,
.co-select:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}
.co-input:-webkit-autofill:focus,
.co-select:-webkit-autofill:focus {
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px #DCEBF7;
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px #DCEBF7;
}
.co-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  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='%232E7DBA' stroke-width='3' 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 12px center; padding-right: 38px;
}
.co-row { display: grid; gap: 16px; margin-bottom: 16px; }
.co-row:last-child { margin-bottom: 0; }
.co-row.cols-2 { grid-template-columns: 1fr 1fr; }

/* ---------- partner note ---------- */
.co-note {
  display: flex; gap: 12px; align-items: flex-start;
  background:
    linear-gradient(#F1F7FC, #F1F7FC) padding-box,
    var(--grad) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 16px 18px; margin-top: 22px;
}
.co-note__icon { color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.co-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.co-note strong { color: var(--blue-900); }

/* ---------- order summary ---------- */
.co-summary {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px; position: sticky; top: 24px;
  box-shadow: 0 14px 36px rgba(8,31,51,.06);
}
.co-summary h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--blue-900); margin: 0 0 16px; }
.co-items { max-height: 324px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.co-items::-webkit-scrollbar { width: 6px; }
.co-items::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.co-items::-webkit-scrollbar-thumb:hover { background: #c9c3b6; }
.co-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.co-item + .co-item { border-top: 1px solid var(--line); }
.co-item__img { width: 52px; height: 52px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; }
.co-item__info { flex: 1; min-width: 0; }
.co-item__name { font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: -.01em; }
.co-item__tier { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.co-item__price { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.co-item__remove { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: background .15s, color .15s; }
.co-item__remove:hover { background: #fdecec; color: #c33; }

.co-empty { font-size: 14px; color: var(--muted); padding: 20px 0; margin: 0; }
.co-empty a { color: var(--blue-700); font-weight: 700; }

.co-totals { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.co-totals__row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.co-totals__row .free { color: #1F8A5B; font-weight: 700; }
.co-totals__row--grand { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.co-totals__row--grand span { font-weight: 700; color: var(--ink); }
.co-totals__row--grand strong { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--blue-900); }
/* Amount saved vs. retail — green so it stands out above the total. */
.co-totals__row--saved span,
.co-totals__row--saved strong { color: #1F8A5B; font-weight: 800; }
/* Original/retail subtotal, struck through before the price actually paid.
   Orange to match the struck price inside a ticket card, which inherits
   .book-card__tiers .t-price (var(--orange-600)). */
.co-totals__was { color: var(--orange-600); text-decoration: line-through; margin-right: 8px; }

.co-pay {
  width: 100%; margin-top: 22px;
  background: #F6A04E; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  padding: 16px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 12px 26px rgba(246,160,78,.4);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.co-pay:hover { background: #ef8f36; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(246,160,78,.5); }
.co-pay:disabled { background: var(--paper-2); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.co-pay.is-done { background: #1F8A5B; box-shadow: 0 12px 26px rgba(31,138,91,.4); }
.co-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.co-trust svg { color: #1F8A5B; flex-shrink: 0; }
.co-error { margin: 0 0 4px; padding: 12px 14px; border-radius: 10px; background: #fdeaea; border: 1px solid #f5c2c0; color: #b42318; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.co-error[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .co-summary { position: static; }
}
@media (max-width: 520px) {
  .co-row.cols-2 { grid-template-columns: 1fr; }
  .co-form { padding: 24px; }
}

/* ==========================================================================
   SHOW SCHEDULES PAGE
   Weekly agenda timeline (left) + show directory (right). Ported from the
   standalone schedules design (schedule-options.css shared/agenda/directory
   styles + schedules.css page chrome). No class collisions with the above.
   ========================================================================== */

/* ---------- shared: day tab strip ---------- */
.day-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.day-tab {
  position: relative;
  flex: 0 1 150px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 10px; text-align: center; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s, background .2s;
}
.day-tab:hover { border-color: var(--blue); transform: translateY(-2px); }
.day-tab__dow { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-900); }
.day-tab__date { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.day-tab__count { display: block; font-size: 11px; font-weight: 700; color: var(--orange-600); margin-top: 6px; }
.day-tab.is-active {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 12px 26px rgba(238,123,34,.34);
}
.day-tab.is-active .day-tab__dow,
.day-tab.is-active .day-tab__date,
.day-tab.is-active .day-tab__count { color: #fff; }
.day-tab.is-active::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px; background: var(--orange); border-radius: 3px;
}
/* Weekly view highlights every day — drop the single-day pointer so 7 don't appear */
.day-tabs.is-week .day-tab.is-active::after { display: none; }

/* avail dot + legend */
.avail { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.avail--ok { background: #1F8A5B; }
.avail--ltd { background: #E8A23B; }
.avail--out { background: #C2C7CE; }
.legend { display: flex; gap: 18px; justify-content: center; margin: 18px 0 0; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
/* Schedules grid: legend on the left, Print/Email on the right. Wraps to two
   left-aligned rows on narrow screens rather than squashing the legend. */
.sched-tools-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; }
.sched-tools-row .legend { margin: 0; justify-content: flex-start; }
.sched-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.sched-tools .show-cal__tool { padding: 8px 16px; font-size: 13px; }
/* No width:100% on the children and no centring: flex-wrap alone gives the right
   behaviour at every width. They share a line while they fit, and a wrapped line
   holding a single item resolves space-between to flex-start — so on a phone the
   buttons land left-aligned with the legend's first dot rather than centred. */
/* Tablet: the legend and the two buttons only just fit side by side around
   700px. Trim the gaps and button padding through this band so the row holds one
   line instead of wrapping on a few pixels of font-rendering difference. */
@media (max-width: 900px) {
  .sched-tools-row .legend { gap: 12px; font-size: 12.5px; }
  .sched-tools { gap: 8px; }
  .sched-tools .show-cal__tool { padding: 8px 12px; font-size: 12.5px; }
}
/* Hidden on screen; the @media print block at the end of this file reveals it. */
.sched-print { display: none; }

/* ---------- DAY VIEW: show cards (no initials tile) ---------- */
.r1__list { display: flex; flex-direction: column; gap: 14px; }
.scard {
  display: flex; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(8,31,51,.05), 0 8px 24px rgba(8,31,51,.06);
  transition: transform .2s, box-shadow .2s;
}
.scard:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(8,31,51,.1); }
.scard__panel {
  flex: none; width: 146px; color: #fff; padding: 12px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: linear-gradient(155deg, var(--blue) 0%, var(--blue-700) 100%);
}
.scard__panel--alt { background: linear-gradient(155deg, var(--blue-900) 0%, var(--blue-950) 100%); }
.scard__date { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; opacity: .85; }
.scard__times { display: flex; flex-direction: column; gap: 4px; }
/* Every slot the same size — no primary/secondary distinction. */
.scard__time { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.scard__time .avail { box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); }
.scard__body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 11px 18px; }
.scard__meta { flex: 1; min-width: 0; }
.scard__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--blue-900); letter-spacing: -.01em; line-height: 1.25; }
.scard__venue { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; }
.scard__venue svg { color: var(--orange); flex-shrink: 0; }
.scard__right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.scard__price { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.scard__price small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.scard__price s { color: var(--muted); font-weight: 500; font-size: 12.5px; margin-right: 5px; }
.btn-buy {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F6A04E; color: #fff; font-weight: 800; font-size: 13px;
  padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(246,160,78,.34);
  transition: background .2s, transform .15s;
}
.btn-buy:hover { background: #ef8f36; transform: translateY(-1px); }

/* ---------- WEEK VIEW: Design-A look (white time-chip pills), compact rows ---------- */
.weekgrid {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(8,31,51,.05), 0 8px 24px rgba(8,31,51,.06);
}
.weekgrid__head, .weekgrid__row { display: grid; grid-template-columns: minmax(220px, 280px) repeat(7, 1fr); }
.weekgrid__head { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-700) 100%); color: #fff; }
.weekgrid__lab { padding: 10px 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; align-self: center; }
.weekgrid__dh { padding: 8px 4px; text-align: center; border-left: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; justify-content: center; }
.weekgrid__d1 { font-size: 12.5px; font-weight: 800; }
.weekgrid__d2 { font-size: 11px; opacity: .82; font-weight: 600; }
.weekgrid__row { border-top: 1px solid var(--line); }
.weekgrid__row:hover { background: #FCFAF6; }
.weekgrid__info { padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; min-width: 0; }
.weekgrid__name { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--blue-900); line-height: 1.2; letter-spacing: -.01em; }
.weekgrid__venue { font-size: 12px; color: var(--muted); line-height: 1.2; }
.weekgrid__price { font-family: var(--font-display); font-size: 13px; font-weight: 700; margin-top: 1px; color: var(--orange); }
.weekgrid__price s { color: var(--muted); font-weight: 500; margin-right: 5px; }
.weekgrid__pricelbl { color: var(--blue-900); font-weight: 700; }
.weekgrid__cell { border-left: 1px solid var(--line); padding: 5px 5px; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; min-height: 40px; }
.weekgrid__none { color: var(--muted); opacity: .5; font-size: 14px; }
.weekgrid__idle { grid-column: 2 / -1; display: grid; place-items: center; border-left: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 13px; padding: 10px; }
.timechip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 8px;
  box-shadow: 0 1px 1.5px rgba(8,31,51,.04); transition: border-color .12s, box-shadow .12s, transform .12s;
}
.timechip:hover { border-color: #D9D2C6; box-shadow: 0 3px 8px rgba(8,31,51,.09); transform: translateY(-1px); }
.timechip--out { color: var(--muted); border-style: dashed; cursor: default; box-shadow: none; }
.timechip--out:hover { transform: none; box-shadow: none; border-color: var(--line); }
.timechip--out .timechip__t { text-decoration: line-through; }

/* ---------- show directory (right) ---------- */
.r3__dir { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(8,31,51,.05); position: sticky; top: 24px; }
.r3__dir-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: linear-gradient(180deg, var(--blue) 0%, var(--blue-600) 100%); color: #fff; }
.r3__dir-head h3 { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.r3__dir-list { padding: 8px; max-height: 460px; overflow-y: auto; }
.dir-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 10px; text-align: left; cursor: pointer;
  transition: background .15s;
}
.dir-item:hover { background: var(--paper-2); }
.dir-item.is-active { background: #FFF1E6; }
.dir-item__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.dir-item__name small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.dir-item__price { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--orange); white-space: nowrap; }

/* ---------- hero banner ---------- */
.sched-hero {
  position: relative; min-height: 340px; display: flex; align-items: center;
  background-size: cover; background-position: center; background-color: var(--blue-900);
}
.sched-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,31,51,.6) 0%, rgba(8,31,51,.4) 45%, rgba(8,31,51,.82) 100%);
}
.sched-hero__inner { position: relative; z-index: 1; width: 100%; text-align: center; color: #fff; padding: 130px 24px 56px; }
.sched-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -.025em; text-shadow: 0 4px 22px rgba(0,0,0,.4); }
.sched-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--orange); }
.sched-hero__sub { margin: 14px auto 0; max-width: 620px; font-size: 17px; color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* ---------- section + tools ---------- */
.sched-section { background: var(--paper); padding: 28px 0 90px; }
/* header card: title + hide switch · date · search */
.sched-head {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 26px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.sched-head__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3vw, 27px); color: var(--blue-900); letter-spacing: -.02em; margin: 0; }
.sched-head__title span { color: var(--orange); }
.sched-head__tools { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* hide-not-playing switch */
.hideswitch { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; background: none; border: 0; text-align: left; }
.hideswitch__track { width: 46px; height: 26px; border-radius: 999px; background: #D9DBDF; position: relative; transition: background .2s; flex: none; }
.hideswitch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.hideswitch.is-on .hideswitch__track { background: var(--orange); }
.hideswitch.is-on .hideswitch__track::after { transform: translateX(20px); }
.hideswitch__lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.2; max-width: 168px; }
.hideswitch__lbl small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.hideswitch[hidden] { display: none; }

/* pill inputs (date + search) */
.pill-input { display: flex; align-items: center; gap: 9px; background: var(--paper-2); border: 1.5px solid transparent; border-radius: 999px; padding: 9px 16px; }
.pill-input:focus-within { border-color: var(--orange); background: #fff; }
.pill-input svg { flex: none; color: var(--orange); }
.pill-input input { border: 0; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--ink); width: 100%; }
.pill-input--date input { width: 132px; font-weight: 600; cursor: pointer; }
.pill-input--search { width: 248px; }
.pill-input input::placeholder { color: var(--muted); font-weight: 500; }

/* controls row: view toggle + day pills / week strip */
.sched-controls { display: flex; align-items: stretch; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.sched-controls > .sched-daybar, .sched-controls > .weekstrip { flex: 1; min-width: 0; }
/* flex/grid display would override the default [hidden] rule — re-hide explicitly */
.sched-daybar[hidden], .weekstrip[hidden] { display: none; }

.viewtoggle { display: flex; gap: 4px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-sm); }
.viewtoggle__btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; padding: 0 18px; border-radius: 10px; color: var(--muted); background: transparent; transition: background .16s, color .16s; }
.viewtoggle__btn svg { opacity: .85; }
.viewtoggle__btn.is-on { background: var(--blue-900); color: #fff; }

/* week strip (range label + prev/next) */
.weekstrip { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 20px; box-shadow: var(--shadow-sm); }
.weekstrip__label { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--blue-900); letter-spacing: -.01em; }
.weekstrip__nav { margin-left: auto; display: flex; gap: 8px; }
.weekstrip__btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 11px; cursor: pointer; transition: border-color .14s, color .14s, transform .12s; }
.weekstrip__btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-700); transform: translateY(-1px); }
.weekstrip__btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- layout ---------- */
.sched-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; margin-top: 22px; }
.sched-layout--noside { grid-template-columns: 1fr; }
.sched-layout--noside .sched-dir { display: none; }
.sched-main { min-width: 0; }

/* legend sits between controls and body */
.sched-section .legend { justify-content: flex-start; margin: 16px 2px 4px; }

/* day pills: keep all 7 on one row */
.sched-daybar .day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sched-daybar .day-tab { flex: none; padding: 12px 6px; }
.sched-daybar .day-tab__dow { font-size: 14px; }
.sched-daybar .day-tab__date { font-size: 12px; margin-top: 3px; }
.sched-daybar .day-tab__count { font-size: 10.5px; margin-top: 5px; }

/* sticky sidebar */
.sched-dir { position: sticky; top: 24px; }

/* empty states */
.sched-empty { text-align: center; color: var(--muted); padding: 50px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; font-weight: 600; }
.sched-empty--grid { border: 0; border-radius: 0; background: transparent; }

@media (max-width: 1080px) {
  .sched-layout, .sched-layout--noside { grid-template-columns: 1fr; }
  .sched-dir { position: static; }
  .weekgrid { overflow-x: auto; }
  .weekgrid__head, .weekgrid__row { min-width: 760px; }
}
@media (max-width: 620px) {
  .sched-head { gap: 16px; }
  .sched-head__tools { width: 100%; }
  .pill-input--search { flex: 1; width: auto; }
  .sched-controls { flex-direction: column; }
  .viewtoggle { width: 100%; }
  .viewtoggle__btn { flex: 1; justify-content: center; }
  .sched-daybar .day-tabs { grid-template-columns: repeat(4, 1fr); }
  .scard { flex-direction: column; }
  .scard__panel { width: 100%; flex-direction: row; align-items: center; gap: 14px; }
  .scard__time { margin-top: 0; }
}

/* ==========================================================================
   SPECIALS & DEALS PAGE — Eventy Classic layout (paginated, 1 deal per page)
   Ported verbatim from the standalone specials.css design. Uses brand tokens;
   no class collisions with the above.
   ========================================================================== */

/* ---------- Section wrapper (bottom space before footer) ---------- */
.sp-section { padding-bottom: 90px; }

/* ---------- Hero banner (transparent overlay header sits on top) ---------- */
.sp-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--blue-900);
  padding: 200px 0 70px;
  /* Gap to the first section below; the hero's own 70px is left alone. */
  margin-bottom: 32px;
}
.sp-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,31,51,.62) 0%, rgba(8,31,51,.55) 55%, rgba(8,31,51,.82) 100%);
}
.sp-hero__inner { position: relative; z-index: 1; text-align: center; }
.sp-hero h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 12px 0 12px; text-shadow: 0 2px 18px rgba(8,31,51,.4); }
.sp-hero em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--orange); }
.sp-hero p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 620px; margin: 0 auto; }

/* ---------- Toolbar (count) ---------- */
.sp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.sp-toolbar__count { font-size: 14px; color: var(--muted); }
.sp-toolbar__count b { color: var(--ink); font-weight: 700; }
.sp-toolbar__hint { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.sp-toolbar__hint svg { color: var(--orange); }

/* ---------- Countdown ---------- */
.countdown { display: flex; gap: 8px; }
.cd-block {
  flex: 1; text-align: center;
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-600) 100%);
  color: #fff; border-radius: 12px; padding: 12px 6px;
  box-shadow: 0 6px 14px rgba(238,123,34,.28);
}
.cd-block b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-block small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-top: 5px; }
/* Compact countdown for deal cards (limited-time offers). */
.countdown--card { gap: 6px; margin: 4px 0 14px; }
.countdown--card .cd-block { padding: 7px 4px; border-radius: 9px; box-shadow: 0 4px 10px rgba(238,123,34,.24); }
.countdown--card .cd-block b { font-size: 17px; }
.countdown--card .cd-block small { font-size: 8.5px; margin-top: 3px; }
/* Specials info-card countdown — neutral flip-clock look (matches legacy site). */
.countdown--special { gap: 6px; margin: 16px 0; }
.countdown--special .cd-block { background: var(--paper-2); border: 1px solid var(--line); color: var(--blue-900); box-shadow: none; padding: 9px 4px; border-radius: 10px; }
.countdown--special .cd-block b { font-size: 22px; }
.countdown--special .cd-block small { color: var(--muted); opacity: 1; font-size: 8.5px; margin-top: 4px; }

/* ---------- Price + info cards ---------- */
.price-row { margin: 18px 0 4px; padding-top: 16px; border-top: 1px dashed var(--line); }
.price-row__num small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.price-row__num b { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--blue-900); letter-spacing: -.02em; line-height: 1; }
/* Old-site savings treatment: prominent orange price + blue "%" savings badge. */
.price-row__num .price-row__main { font-size: 28px; color: var(--orange); line-height: 1.1; }
.price-row__save { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--blue-700); font-weight: 800; font-size: 15px; }
.price-row__save-badge { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-700); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; line-height: 1; }

.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.info-card__title { font-size: 18px; font-weight: 800; color: var(--blue-900); margin: 0 0 16px; position: relative; padding-bottom: 12px; letter-spacing: -.01em; }
.info-card__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--orange); border-radius: 2px; }
.info-rows { display: grid; gap: 14px; margin-bottom: 4px; }
.info-rows li { display: flex; align-items: flex-start; gap: 12px; }
.info-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: #DCEBF7; color: var(--blue-700); display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.info-rows small { display: block; font-size: 11.5px; color: var(--muted); }
.info-rows strong { display: block; font-size: 15px; color: var(--ink); }
.btn--block { display: flex; justify-content: center; width: 100%; margin-top: 10px; }

/* ---------- The deal (Eventy Classic) ---------- */
.sp1-list { display: grid; gap: 48px; }
.sp1 { display: grid; grid-template-columns: 0.95fr 1.05fr 360px; gap: 32px; align-items: start; }
.sp1[hidden] { display: none; }
.sp1__media { position: relative; }
.sp1__img { aspect-ratio: 4/5; border-radius: var(--radius-lg); background-size: cover; background-position: center; background-color: #d8dde3; box-shadow: var(--shadow); }
.sp1__ribbon { position: absolute; top: 16px; left: 16px; background: var(--blue-900); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 13px; border-radius: 8px; }
.sp1__ribbon--alt { background: var(--orange); }
.sp1__main h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--blue-900); margin-bottom: 12px; }
.sp1__lede { font-size: 16px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.6; }
.sp1__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0 0 24px; }
.sp1__feats li { position: relative; padding-left: 26px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.sp1__feats li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.sp1__choose { background: var(--paper-2); border-radius: var(--radius); padding: 16px 18px; }
.sp1__choose-h { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 10px; }
.sp1__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp1__chips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sp1__side { align-self: start; }

/* ---------- Pagination (matches schedules) ---------- */
.sp-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 48px; }
.sp-pagination button { min-width: 44px; height: 44px; padding: 0 6px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 700; font-size: 15px; display: grid; place-items: center; transition: background .18s, color .18s, border-color .18s, transform .15s; }
.sp-pagination button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-700); transform: translateY(-2px); }
.sp-pagination button.is-active { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 8px 16px rgba(238,123,34,.35); }
.sp-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.sp-pagination svg { width: 18px; height: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sp1 { grid-template-columns: 1fr 1fr; }
  .sp1__side { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .sp1__side .info-card { margin-bottom: 0; }
}
@media (max-width: 820px) {
  .sp1 { grid-template-columns: 1fr; }
  .sp1__media { max-width: 460px; }
  .sp1__side { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sp1__feats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FREE BRANSON COUPONS MODAL — site-wide multi-step lead-capture popup.
   Mirrors the ticket modal's chrome (dark scrim, white rounded panel,
   scale-in, circular rotating close) in a vertical single-column layout.
   ========================================================================== */
.coupons-modal {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.coupons-modal.is-open { opacity: 1; visibility: visible; }
/* Solid dark scrim — no backdrop-filter blur (per request) */
.coupons-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(26, 26, 26, 0.95) !important;
  border: 1px solid #333 !important;
  color: #fff !important;
}
.coupons-modal__dialog {
  position: relative; width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px);
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(8,31,51,.4);
  transform: translateY(24px) scale(.97);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.coupons-modal.is-open .coupons-modal__dialog { transform: translateY(0) scale(1); }
.coupons-modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink-2);
  display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s;
}
.coupons-modal__close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }

/* Header + progress */
.cm__head { padding: 26px 30px 16px; background: var(--paper); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.cm__eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.cm__head h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--blue-900); }
.cm__head p { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.cm__progress { margin-top: 16px; height: 5px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.cm__progress-bar { display: block; height: 100%; width: 16.66%; background: linear-gradient(90deg, var(--orange), var(--orange-600)); border-radius: 999px; transition: width .3s ease; }

/* Scrollable form body */
.cm__form { padding: 22px 30px; overflow-y: auto; flex: 1; min-height: 0; }
.cm__step { display: none; }
.cm__step.is-active { display: block; animation: cmFade .25s ease; }
@keyframes cmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Fields */
.cm__field { margin-bottom: 16px; }
.cm__field > label,
.cm__sublabel { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.cm__sublabel { margin-top: 4px; margin-bottom: 12px; }
.cm__help { margin: -6px 0 12px; font-size: 13px; color: var(--muted, #6b7280); line-height: 1.5; }
.cm__minilabel { font-size: 12px !important; font-weight: 600 !important; color: var(--muted) !important; }
.cm__form input[type=text],
.cm__form input[type=email],
.cm__form input[type=tel],
.cm__form input[type=date],
.cm__form select,
.cm__form textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.cm__form input:focus,
.cm__form select:focus,
.cm__form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,125,186,.15); }
.cm__form textarea { resize: vertical; }
.cm__form .cm__error { border-color: #D64545 !important; box-shadow: 0 0 0 3px rgba(214,69,69,.15); }

.cm__grid { display: grid; gap: 14px; }
.cm__grid--2 { grid-template-columns: 1fr 1fr; }

.cm__radios { display: flex; gap: 22px; }
.cm__radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }

/* Checkbox groups */
.cm__checks { gap: 8px 18px; margin-bottom: 16px; }
.cm__checks--col { display: grid; grid-template-columns: 1fr; }
.cm__check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; line-height: 1.4; }
.cm__check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); }
.cm__checklist { max-height: 240px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 11px; margin-bottom: 4px; }
.cm__consent { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.cm__intro { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; }
.cm__field--full { grid-column: 1 / -1; }

/* Sticky nav footer */
.cm__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 30px; border-top: 1px solid var(--line); background: var(--paper); flex-shrink: 0; }
.cm__nav[hidden] { display: none; }
.cm__back { font-size: 14px; font-weight: 700; color: var(--blue-700); padding: 8px 4px; }
.cm__back:hover { color: var(--blue-900); }
.cm__back[hidden] { display: none; }
.cm__nav .cm__next { margin-left: auto; background: #F6A04E; box-shadow: 0 12px 26px rgba(246,160,78,.4); }
.cm__nav .cm__next:hover { background: #ef8f36; transform: translateY(-1px); }

/* Thank-you state */
.cm__done { padding: 48px 34px 40px; text-align: center; }
.cm__done[hidden] { display: none; }
.cm__done-ico { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #E7F6EC; color: #2E9A4C; display: grid; place-items: center; }
.cm__done h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--blue-900); margin-bottom: 10px; }
.cm__done p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 22px; }
.cm__done p a { font-weight: 800; color: var(--orange); }

@media (max-width: 480px) {
  .cm__grid--2 { grid-template-columns: 1fr; }
  .cm__head, .cm__form, .cm__nav { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   FRITZ'S ADVENTURE — ATTRACTION DETAIL PAGE
   (uses shared tokens; ticket-modal styles live above)
   ============================================================ */

/* ---------- detail sub-tabs ---------- */
.dtabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }
.dtab { padding: 12px 18px; font-size: 14.5px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .18s, border-color .18s; }
.dtab:hover { color: var(--blue-700); }
.dtab.is-active { color: var(--blue-900); border-color: var(--orange); }
.dtab-panel { display: none; }
.dtab-panel.is-active { display: block; animation: dFade .3s ease both; }
@keyframes dFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dtab-panel p { font-size: 16px; color: var(--ink-2); line-height: 1.7; margin: 0 0 16px; }
.dtab-panel p em { font-style: italic; font-weight: 600; color: var(--ink); }
.fa-empty { padding: 22px 24px; background: var(--surface-2, #f6f8fb); border: 1px solid var(--line, #e5e9f0); border-radius: var(--radius-lg, 14px); color: var(--ink-2); }
.fa-empty a { color: var(--blue-700, #1d4ed8); font-weight: 700; white-space: nowrap; }
.d-subhead { font-size: 20px; font-weight: 800; color: var(--blue-900); letter-spacing: -.01em; margin: 30px 0 16px; }

/* ---------- gallery (mosaic) ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 6px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery .g-img {
  position: relative;
  background-size: cover; background-position: center; background-color: #d8dde3;
  cursor: pointer; overflow: hidden;
  /* reveal start-state */
  opacity: 0; transform: translateY(40px) scale(.98);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.gallery .g-img.in-view { opacity: 1; transform: none; }
/* mosaic spans — top row 3 tiles, bottom row 2 tiles (taller) */
.gallery .g-img:nth-child(1) { grid-column: span 2; grid-row: span 1; }
.gallery .g-img:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.gallery .g-img:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.gallery .g-img:nth-child(4) { grid-column: span 3; grid-row: span 1; }
.gallery .g-img:nth-child(5) { grid-column: span 3; grid-row: span 1; }
.gallery .g-img:nth-child(6) { display: none; }
.gallery .g-img__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.gallery .g-img:hover .g-img__photo { transform: scale(1.08); }
.gallery .g-img::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,31,51,.0); transition: background .3s;
}
.gallery .g-img:hover::after { background: rgba(8,31,51,.45); }
.gallery .g-zoom {
  position: absolute; inset: 0; margin: auto;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--blue-900);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s;
  z-index: 2; pointer-events: none;
}
.gallery .g-img:hover .g-zoom { opacity: 1; transform: scale(1); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 30px; background: rgba(8,31,51,.9); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: scale(.96); transition: transform .3s; }
.lightbox.is-open img { transform: scale(1); }
.lightbox__close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; }
.lightbox__close:hover { background: var(--orange); transform: rotate(90deg); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; display: grid; place-items: center; transition: background .2s; }
.lightbox__nav:hover { background: var(--orange); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

/* ---------- hints ---------- */
.hints { display: grid; gap: 12px; }
.hints li { position: relative; padding-left: 28px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.hints li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--orange-100); color: var(--orange-600); font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* ---------- testimonial-style reviews ---------- */
.tm-reviews { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; }
.tm-reviews__intro { position: relative; }
.tm-reviews__eyebrow { display: inline-block; font-family: var(--font-script); font-size: 26px; color: var(--orange); line-height: 1; margin-bottom: 6px; }
.tm-reviews__intro h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; color: var(--blue-900); margin: 0 0 14px; }
.tm-reviews__intro h3 em { font-style: normal; color: var(--orange); }
.tm-reviews__intro p { font-size: 15px; color: var(--ink-2); line-height: 1.65; margin: 0 0 24px; }
.tm-reviews__controls { display: flex; gap: 12px; margin-bottom: 20px; }
.tm-reviews__arrow { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--blue-700); font-size: 20px; font-weight: 700; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.tm-reviews__arrow:hover { transform: translateY(-2px); }
.tm-reviews__arrow--prev { background: var(--orange); color: #fff; border-color: var(--orange); }
.tm-reviews__arrow--prev:hover { background: var(--orange-600); }
.tm-reviews__arrow--next:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.tm-reviews__write { display: inline-flex; }
.tm-reviews__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 18px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; }
.tm-reviews__track::-webkit-scrollbar { display: none; }
.tm-rv {
  flex: 0 0 300px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 26px; box-shadow: var(--shadow-sm);
  text-align: center; transition: transform .25s, box-shadow .25s;
}
.tm-rv:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tm-rv__top { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.tm-rv__mark { font-family: var(--font-serif); font-size: 46px; font-weight: 700; color: var(--orange); line-height: .7; }
.tm-rv__avatar { width: 74px; height: 74px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.tm-rv h4 { font-size: 18px; font-weight: 800; color: var(--blue-900); margin-bottom: 2px; }
.tm-rv__role { display: block; font-size: 12.5px; font-weight: 700; color: var(--orange-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.tm-rv__stars { color: #F5B915; font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; }
.tm-rv p { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0 0 12px; }
.tm-rv__date { font-size: 12px; color: var(--muted); }

/* ---------- map ---------- */
.mp-loc { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.mp-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mp-embed iframe { display: block; width: 100%; height: 360px; border: 0; }
.mp-map { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--blue-700); cursor: pointer; transition: color .2s; }
.mp-map:hover { color: var(--orange-600); }

/* ---------- immersive hero ---------- */
.fa-hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; background-size: cover; background-position: center; padding-top: 120px; }
.fa-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,31,51,.2) 0%, rgba(8,31,51,.55) 55%, rgba(8,31,51,.92) 100%); }
.fa-hero__inner { position: relative; z-index: 1; color: #fff; padding-bottom: 54px; }
.fa-locwrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fa-tag { display: inline-block; margin: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.fa-hero__inner h1 { font-size: clamp(36px, 5vw, 62px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 12px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.fa-hero__inner p { font-size: 18px; opacity: .92; max-width: 560px; margin: 0 0 26px; }
.fa-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fa-price { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); border-radius: var(--radius); padding: 10px 18px; }
.fa-price small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
/* Struck "was" price beside the hero price (VBRAN-234) — same treatment as the card price flags. */
.fa-price s { opacity: .7; font-weight: 600; font-size: 15px; margin-right: 6px; }
.fa-price b { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.fa-loc { font-size: 14px; opacity: .85; }

/* ---------- body grid ---------- */
/* No margin-top: the enclosing .section--tight owns the hero gap. */
.fa-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.fa-side { position: sticky; top: 80px; display: grid; gap: 20px; }

/* booking card — editorial style */
.book-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; }
.book-card__body { padding: 36px 34px 34px; }
.book-card__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.book-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: -.01em; color: var(--ink); line-height: 1.05; margin: 0 0 16px; }
.book-card__intro { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0 0 22px; }
.book-card__intro strong { color: var(--orange-600); font-weight: 700; }
.book-card__tiers { display: grid; gap: 0; margin: 0 0 26px; }
.book-card__tiers li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink-2); padding: 14px 0; border-bottom: 1px solid var(--line); }
.book-card__tiers li:first-child { border-top: 1px solid var(--line); }
.book-card__tiers .t-name { font-weight: 600; }
.book-card__tiers .t-price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--orange-600); white-space: nowrap; }
.book-card__tiers .t-price.free { color: #1F8A5B; }
/* rectangular outlined CTA with long arrow */
.book-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%;
  padding: 18px 22px; background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 0;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.book-card__cta:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
/* Solid orange variant — stands out without needing hover (package page Buy CTA) */
.book-card__cta--solid { background: var(--orange); color: #fff; border-color: var(--orange); }
.book-card__cta--solid:hover { background: var(--orange-600); border-color: var(--orange-600); color: #fff; }
.book-card__cta svg { flex-shrink: 0; transition: transform .25s; }
.book-card__cta:hover svg { transform: translateX(5px); }
.book-card__phone { text-align: center; margin-top: 14px; }
.book-card__phone small { display: block; font-size: 12px; color: var(--muted); }
.book-card__phone a { font-size: 20px; font-weight: 800; color: var(--orange-600); }

/* Inline order form (voucher attraction detail pages) — compact legacy layout:
   one bold intro line (no card header), quantity dropdown LEFT of each tier,
   name + struck-was/now price inline on one row, orange Add To Cart pill, then
   the phone fallback in a light-orange band bled to the card edges. The order
   total line stays hidden until a quantity is picked. */
.book-card__body--order { padding-top: 20px; }
.book-order__intro { font-weight: 800; font-size: 13px; color: var(--ink); margin: 0 0 2px; }
.book-order__row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.book-order__row:last-child { border-bottom: 0; }
.book-order__qty { width: 56px; flex-shrink: 0; height: 30px; border: 1.5px solid var(--line); border-radius: 7px; padding: 0 6px; font-weight: 700; font-size: 13px; color: var(--ink); background: #fff; }
.book-order__qty:focus { outline: none; border-color: var(--orange); }
.book-order__name { font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.book-order__name b { font-weight: 800; }
.book-order__name s { color: var(--muted); font-weight: 600; margin: 0 2px 0 4px; }
.book-order__price { color: var(--orange-600); font-weight: 800; }
.book-order__price.free { color: var(--blue-700); font-weight: 800; }
/* Scale the reused modal promo/blurb lines down inside the compact card. */
.book-order .tm-row__promo { font-size: 12px; margin-top: 2px; }
.book-order .tm-row__desc { font-size: 11.5px; margin-top: 2px; }
/* Slimmer pill than the modal's — the sidebar card shouldn't shout. */
.book-order__add { margin-top: 12px; padding: 10px 14px; font-size: 14px; gap: 7px; }
.book-order__foot {
  /* Cancel .book-card__body padding so the band spans edge to edge, and clip
     to the card's rounded corners via its overflow:hidden. */
  margin: 14px -34px -34px;
  padding: 12px 34px 16px;
  background: #FFF6EE;
  border-top: 1px solid var(--orange-100);
}
.book-order__phone { text-align: center; margin: 0; }
.book-order__phone small { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.book-order__phone a { display: block; font-size: 18px; font-weight: 800; color: var(--orange-600); margin: 1px 0; }

/* light-orange add-to-cart (matches scrolled cart accent) */
.btn--cart { background: #F6A04E; color: #fff; box-shadow: 0 6px 14px rgba(246,160,78,.42); }
.btn--cart:hover { background: #ef8f36; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(246,160,78,.5); }

/* ===== Custom Package Wizard (Choose Package Details tab) ===== */
.pw { max-width: 760px; }

/* progress */
.pw__progress { height: 6px; border-radius: 99px; background: #e9eef4; overflow: hidden; }
.pw__bar { display: block; height: 100%; width: 16.66%; background: linear-gradient(90deg, var(--orange), var(--orange-600)); border-radius: 99px; transition: width .3s ease; }
.pw__count { font-size: 13px; font-weight: 700; color: var(--muted); margin: 8px 0 18px; }

/* steps */
.pw__step { display: none; }
.pw__step.is-active { display: block; animation: dFade .3s ease both; }
.pw__title { font-size: 19px; font-weight: 800; color: var(--blue-900); margin: 0 0 6px; }
.pw__title .pw__hint { font-size: 14px; font-weight: 600; color: var(--muted); }
.pw__sub { font-size: 14.5px; color: var(--ink-2); margin: 0 0 16px; }
.pw__note { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }

/* fields */
.pw__grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.pw__field { margin-bottom: 4px; }
.pw__field > label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.pw input[type=date],
.pw select,
.pw__combo-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.pw input[type=date]:focus,
.pw select:focus,
.pw__combo-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,125,186,.15); }
.pw input:disabled { background: #eef1f4; color: var(--muted); cursor: not-allowed; }
/* smaller sub-heading for the revealed "When are you traveling?" block */
.pw__title--sm { font-size: 16px; margin-top: 18px; }
.pw__dates { margin-top: 4px; }
/* lodging is locked to the package's included property */
.pw__combo-input--locked { background: #f3f5f8; color: var(--ink-2); cursor: default; font-weight: 600; }
/* "Included" badge in the review step */
.pw__incl { font-size: 12.5px; font-weight: 800; color: var(--blue-700); letter-spacing: .02em; }
/* disabled Continue (e.g. before "Yes" + dates, or before 4 shows) */
.pw__nav .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* show / attraction type-to-search combobox */
.pw__combo { position: relative; }
/* Trigger button styled like the native select it replaces (native long
   dropdowns grow to the full screen on macOS — hence the custom panel). */
.pw__combo-btn { text-align: left; position: relative; padding-right: 40px; cursor: pointer; }
.pw__combo-btn::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 1.8px solid var(--ink-2); border-bottom: 1.8px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.pw__combo-btn.is-empty { color: var(--muted); }
/* The panel owns the popup chrome; the list stays the scroll container so the
   sticky group dividers below keep working. */
.pw__combo-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.pw__combo-panel[hidden] { display: none; }
.pw__combo-search {
  display: block; width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  padding: 10px 12px; border: 0; border-bottom: 1.5px solid var(--line);
  border-radius: 10px 10px 0 0; background: #fff; outline: none;
}
.pw__combo-search::placeholder { color: var(--muted); }
.pw__combo-search:focus { box-shadow: inset 0 0 0 2px rgba(46,125,186,.15); }
.pw__combo-empty { margin: 0; padding: 14px 12px; text-align: center; font-size: 14px; color: var(--muted); }
.pw__combo-empty[hidden] { display: none; }
.pw__combo-list {
  max-height: min(368px, 52vh); overflow-y: auto; margin: 0; padding: 4px; list-style: none;
}
/* Sticky "Featured Shows" / "All Shows" dividers inside the scrolling panel. */
.pw__combo-group {
  position: sticky; top: -4px; z-index: 1; margin: 0 -4px; padding: 9px 16px 7px;
  background: var(--paper, #f7f9fb); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.pw__combo-group + .pw__combo-group,
.pw__combo-opt + .pw__combo-group { margin-top: 4px; }
.pw__combo-opt { padding: 10px 12px; border-radius: 8px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.pw__combo-opt[hidden] { display: none; }
.pw__combo-opt:hover,
.pw__combo-opt.is-highlighted,
.pw__combo-opt.is-active { background: #f4f7fb; color: var(--ink); }
/* is-active = the row's chosen option; is-highlighted = keyboard cursor. */
.pw__combo-opt.is-active { font-weight: 700; }

/* show/attraction checklists */
.pw__checklist { max-height: 320px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 2px; }
.pw__check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.pw__check:hover { background: #f4f7fb; }
.pw__check input { accent-color: var(--blue); flex-shrink: 0; }
.pw__check-name { flex: 1; }
.pw__check-price { font-weight: 700; color: var(--ink); }

/* review & pricing — white card like .book-card */
.pw__review { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 8px 22px; }
.pw__line { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 14.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.pw__line:last-child { border-bottom: 0; }
.pw__line--head { font-weight: 800; color: var(--blue-900); }
.pw__save { color: #2E9A4C; font-weight: 700; }
.pw__total { font-size: 17px; font-weight: 800; color: var(--blue-900); }

/* error */
.pw__error { font-size: 13.5px; font-weight: 600; color: #D64545; margin: 12px 0 0; }
.pw__error[hidden] { display: none; }

/* nav */
.pw__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.pw__nav [hidden] { display: none; }
.pw__back { font-size: 14px; font-weight: 700; color: var(--blue-700); padding: 8px 4px; }
.pw__back:hover { color: var(--blue-900); }
.pw__nav #pwNext { margin-left: auto; }

/* done state */
.pw__done { margin-top: 22px; padding: 28px 24px; text-align: center; background: #f4faf5; border: 1.5px solid #d4ecd9; border-radius: 14px; }
.pw__done[hidden] { display: none; }
.pw__done-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #E7F6EC; color: #2E9A4C; display: grid; place-items: center; }
.pw__done h4 { font-size: 20px; font-weight: 800; color: var(--blue-900); margin: 0 0 8px; }
.pw__done p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }

/* ----- ticket-pool heading (shows / attractions) ----- */
.pw__ticketcount { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--blue-900); letter-spacing: -.01em; margin: 0 0 4px; }
.pw__left { font-family: var(--font-display); color: var(--orange-600); }
.pw__select--locked { background: #f3f5f8; color: var(--ink-2); font-weight: 600; }

/* ----- repeating show / attraction rows ----- */
.pw__row { padding: 16px 0; border-top: 1px solid var(--line); }
.pw__row:first-child { border-top: 0; }
.pw__row-head { display: flex; align-items: center; gap: 10px; }
.pw__row-name { flex: 1; min-width: 0; }
.pw__qty { flex: 0 0 110px; }
.pw__del {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1.5px solid #D64545; border-radius: var(--radius-sm); background: #fff; color: #D64545; cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.pw__del:hover { background: #D64545; color: #fff; transform: translateY(-1px); }

/* ----- add-another button (themed outline, fills on hover) ----- */
.pw__addrow {
  width: 100%; margin-top: 16px; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 14.5px;
  color: var(--blue-700); background: #fff; border: 1.5px dashed var(--blue); border-radius: var(--radius);
  padding: 14px; transition: background .15s, color .15s, border-color .15s;
}
.pw__addrow:hover:not(:disabled) { background: var(--blue); color: #fff; border-style: solid; }
.pw__addrow:disabled { opacity: .45; cursor: not-allowed; color: var(--muted); border-color: var(--line); border-style: solid; }

/* ----- running summary card (clean themed card, like the finish card) ----- */
.pw__summary {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.pw__summary:empty { display: none; }
.pw__sum-row { display: flex; gap: 16px; padding: 14px 20px; font-size: 14.5px; background: #fff; }
.pw__sum-row + .pw__sum-row { border-top: 1px solid var(--line); }
.pw__sum-row > span:first-child { flex: 0 0 130px; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.pw__sum-row > span:last-child { color: var(--ink-2); }
.pw__sum-list { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.7; }
.pw__sum-list b { font-family: var(--font-display); color: var(--orange-600); }

@media (max-width: 560px) {
  .pw__grid { grid-template-columns: 1fr; }
  .pw__nav { flex-wrap: wrap; }
  .pw__nav #pwNext { width: 100%; }
  .pw__row-head { flex-wrap: wrap; }
  .pw__row-name { flex: 1 1 100%; }
  .pw__sum-row { flex-direction: column; gap: 2px; }
  .pw__sum-row > span:first-child { flex: none; }
}

/* ===== "Book more, save more" savings tagline ===== */
/* detail-page book-card — diagonal corner ribbon (top-right) */
.book-card { position: relative; }
.book-card__ribbon {
  position: absolute; top: 40px; right: -56px; z-index: 4; width: 220px;
  transform: rotate(45deg); text-align: center;
  background: linear-gradient(90deg, var(--orange), var(--orange-600)); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 6px 0; box-shadow: 0 6px 14px rgba(238,123,34,.4);
}
/* wizard Step 5 — savings cues (green save, citation badge, struck original) */
.pw__badge { display: inline-block; background: #E7F6EC; color: #2E9A4C; font-weight: 700; font-size: 11px; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.pw__orig { color: var(--muted); text-decoration: line-through; font-weight: 600; margin-right: 6px; }
/* wizard Step 5 banner above the pricing breakdown */
.pw__save-banner {
  display: flex; align-items: center; gap: 7px;
  background: var(--orange-100); color: var(--orange-600);
  font-size: 14px; font-weight: 800; padding: 11px 16px; border-radius: 10px; margin-bottom: 14px;
}
/* checkout — tagline next to the total */
.co-totals__note { margin: 4px 0 0; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--orange-600); }

/* side info cards */
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.team { text-align: center; background: linear-gradient(150deg, var(--blue-900) 0%, var(--blue-950) 100%); border: 0; color: #fff; position: relative; overflow: hidden; }
.team::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(238,123,34,.25), transparent 55%); }
.team > * { position: relative; z-index: 1; }
.team__img { width: 100%; aspect-ratio: 16/9; border-radius: 12px; background-size: cover; background-position: center; margin-bottom: 16px; }
.team h4 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.team__phone { display: block; font-size: 26px; font-weight: 800; color: #fff; margin: 4px 0; }
.team small { color: rgba(255,255,255,.8); font-size: 13px; }

/* Roomier "Questions? Ready to book?" widget on the package page — old-site
   proportions (taller image, more padding, larger phone) with our blue palette. */
.side-card.team--lg { padding: 30px; }
.team--lg .team__img { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.team--lg h4 { font-size: 21px; margin-bottom: 10px; }
.team--lg .team__phone { font-size: 34px; margin: 8px 0; }
.team--lg small { font-size: 14px; }

/* Sticky "Buy This Package" bar (package page) — hidden until revealed by JS. */
.pkg-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.12);
  transform: translateY(100%); transition: transform .28s ease;
}
.pkg-buybar.is-visible { transform: translateY(0); }
.pkg-buybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.pkg-buybar__info { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pkg-buybar__name { font-weight: 800; color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg-buybar__price { font-weight: 800; color: var(--orange-600); font-size: 18px; flex-shrink: 0; }
.pkg-buybar .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .pkg-buybar__inner { padding: 10px 0; gap: 10px; }
  .pkg-buybar__name { font-size: 13px; }
  .pkg-buybar__price { font-size: 16px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .fa-grid { grid-template-columns: 1fr; }
  .fa-side { position: static; grid-template-columns: 1fr 1fr; }
  .book-card { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .fa-hero { min-height: 440px; padding-top: 96px; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery .g-img:nth-child(1),
  .gallery .g-img:nth-child(2),
  .gallery .g-img:nth-child(3),
  .gallery .g-img:nth-child(4),
  .gallery .g-img:nth-child(5) { grid-column: span 1; }
  .gallery .g-img:nth-child(1) { grid-column: span 2; }
  .gallery .g-zoom { width: 60px; height: 60px; font-size: 13px; }
  .fa-side { grid-template-columns: 1fr; }
  .tm-reviews { grid-template-columns: 1fr; gap: 24px; }
  .tm-rv { flex-basis: 80%; }
}

/* ============================================================
   SHOW CALENDAR — split feature-panel + month grid date picker
   (detail page). Reuses the .avail / .legend availability colors
   (ok #1F8A5B · ltd #E8A23B · out #C2C7CE)
   ============================================================ */
.show-cal { display: grid; grid-template-columns: 240px 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; max-width: 780px; }

/* left feature panel — show photo + dark overlay + big selected date */
.show-cal__feature { position: relative; min-height: 340px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; padding: 28px 26px; color: #fff; }
.show-cal__feature-overlay { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(8,31,51,.5), rgba(8,31,51,.9)); }
.show-cal__feature > *:not(.show-cal__feature-overlay):not(.show-cal__reset) { position: relative; z-index: 1; }
.show-cal__reset { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; transition: background .18s; }
.show-cal__reset:hover { background: rgba(255,255,255,.32); }
.show-cal__fmonth { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.show-cal__fday { font-family: var(--font-display); font-weight: 800; font-size: 92px; line-height: .9; margin: 6px 0; }
.show-cal__fdow { font-size: 15px; font-weight: 700; opacity: .92; }
.show-cal__nav { display: flex; gap: 10px; margin-top: 24px; }
.show-cal__nav button { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 22px; font-weight: 700; line-height: 1; display: grid; place-items: center; transition: background .18s, border-color .18s, opacity .18s; }
.show-cal__nav button:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); }
.show-cal__nav button:disabled { opacity: .3; cursor: not-allowed; }

/* Print / Email actions above the calendar */
.show-cal__tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.show-cal__tool { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 800; color: var(--blue-900); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.show-cal__tool:hover { border-color: var(--orange); color: var(--orange); background: #fff8f2; }
.show-cal__tool svg { flex: none; }

/* Shown when an emailed ?month= fell outside the browse window and was clamped */
.show-cal__notice { background: #FEF3C7; color: #92400E; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; margin: 0 0 16px; }

/* Print-only schedule list — revealed by the @media print block at EOF */
.show-cal-print { display: none; }

/* right panel — legend + weekday header + month grid + showtimes */
.show-cal__panel { padding: 22px; }
.show-cal__legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.show-cal__legend span { display: inline-flex; align-items: center; gap: 7px; }
.show-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.show-cal__dow span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.show-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-cell { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; background: transparent; transition: background .15s, transform .15s; }
.cal-cell__num { font-size: 15px; font-weight: 700; color: var(--ink); }
.cal-cell__dot { width: 7px; height: 7px; border-radius: 50%; }
.cal-cell--empty { background: transparent; }
.cal-cell--dark .cal-cell__num, .cal-cell--past .cal-cell__num { color: #C2C7CE; }
.cal-cell--out .cal-cell__num { color: var(--muted); }
.cal-cell--ok .cal-cell__dot { background: #1F8A5B; }
.cal-cell--ltd .cal-cell__dot { background: #E8A23B; }
.cal-cell--out .cal-cell__dot { background: #C2C7CE; }
.cal-cell--ok, .cal-cell--ltd { cursor: pointer; }
.cal-cell--ok:hover, .cal-cell--ltd:hover { background: var(--paper-2); transform: translateY(-1px); }
.cal-cell.is-selected { background: var(--orange); }
.cal-cell.is-selected .cal-cell__num { color: #fff; }
.cal-cell.is-selected .cal-cell__dot { background: #fff; }

/* Capped panel height — long slot lists (tee times run 40+ per day) scroll
   inside the card instead of stretching the page. */
.show-cal__day { margin-top: 18px; max-height: 430px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.show-cal__day:empty { display: none; }
.cal-day__head { font-size: 15px; font-weight: 800; color: var(--blue-900); margin-bottom: 12px; }
.cal-time { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--paper); }
.cal-time__when { display: flex; align-items: center; gap: 12px; }
.cal-time__time { font-size: 16px; font-weight: 800; color: var(--ink); }
.cal-time__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; }
.cal-time__badge--ok { color: #1F8A5B; }
.cal-time__badge--ltd { color: #C77F12; }
.cal-time__add { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #F6A04E; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 14px rgba(246,160,78,.42); transition: background .18s, transform .15s; }
.cal-time__add:hover { background: #ef8f36; transform: translateY(-1px); }
.cal-time__add.is-out { background: #EEF0F2; color: var(--muted); box-shadow: none; cursor: default; }

@media (max-width: 680px) {
  .show-cal { grid-template-columns: 1fr; max-width: 460px; }
  .show-cal__feature { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 18px 20px; }
  .show-cal__fday { font-size: 56px; margin: 0; }
  .show-cal__nav { margin-top: 0; }
}

/* ============================================================
   SHOW DETAIL — special-offer band, price comparison,
   customer-review cards, low-price guarantee, why-choose-us
   ============================================================ */
.book-card__offer { display: flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(90deg, var(--orange), var(--orange-600)); color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-align: center; padding: 11px 16px; }

/* write-a-review modal */
.rvm { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rvm[hidden] { display: none; }
.rvm__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.rvm__dialog { position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: 28px; max-height: 90vh; overflow-y: auto; }
.rvm__close { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.rvm__close:hover { color: var(--blue-900); }
.rvm__title { font-size: 22px; font-weight: 800; color: var(--blue-900); margin: 0 0 4px; }
.rvm__sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.rvm__field { display: block; margin-bottom: 16px; }
.rvm__label { display: block; font-size: 13.5px; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; }
.rvm__form input[type=text], .rvm__form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink-2); background: #fff; }
.rvm__form input[type=text]:focus, .rvm__form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,97,255,.12); }
.rvm__form textarea { resize: vertical; min-height: 110px; }
.rvm__stars { display: inline-flex; gap: 4px; }
.rvm__star { background: none; border: 0; font-size: 30px; line-height: 1; color: #d9dee6; cursor: pointer; transition: color .12s, transform .12s; padding: 0; }
.rvm__star:hover { transform: scale(1.1); }
.rvm__star.is-on, .rvm__star.is-hover { color: #F5B915; }
.rvm__error { background: #FDECEA; color: #B23B2E; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; margin: 0 0 14px; }
.rvm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.rvm__done { text-align: center; padding: 10px 0; }
.rvm__done-icon { width: 56px; height: 56px; border-radius: 50%; background: #E7F6EC; color: #1B9E4B; display: grid; place-items: center; font-size: 28px; font-weight: 800; margin: 0 auto 14px; }
.rvm__done h3 { font-size: 20px; font-weight: 800; color: var(--blue-900); margin: 0 0 8px; }
.rvm__done p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }

/* customer review cards */
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rv-head h3 { font-size: 20px; font-weight: 800; color: var(--blue-900); }
.rv-head span { font-size: 14px; font-weight: 700; color: var(--muted); }
.rv-card { display: flex; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.rv-card__avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.rv-card__body h4 { font-size: 16px; font-weight: 800; color: #B23B2E; margin-bottom: 6px; }
.rv-card__stars { color: #F5B915; font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; }
.rv-card__stars small { color: var(--muted); font-size: 12.5px; letter-spacing: 0; margin-left: 6px; font-weight: 600; }
.rv-card__body p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 10px; }
/* Review headline (SMASH Vendor Reviews carry one; guest reviews don't). */
.rv-card__title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.35; }
.rv-card__by { font-size: 13px; font-style: italic; color: var(--muted); }
.rv-card__body h4 a { color: inherit; text-decoration: none; }
.rv-card__body h4 a:hover { text-decoration: underline; }
/* Google's own author photo, in place of the initial tile. */
.rv-card__avatar--photo { object-fit: cover; }
/* Platform mark, top-right of the card — Google requires the attribution. */
.rv-card__source { flex-shrink: 0; align-self: flex-start; opacity: .85; }

/* Shared star row — partials/bst/_stars.blade.php.
   Always five glyphs; the unearned ones are dimmed rather than dropped, so a
   3-star card reads as "3 of 5" without the reader counting. The lit colour is
   inherited from whatever contains the row (gold on review cards, white in the
   hero pill), so only the OFF state needs declaring here. */
.stars { letter-spacing: 1px; white-space: nowrap; }
.stars__s--off { color: #d9dee6; }
/* Same grey the write-a-review picker uses for unpicked stars (.rvm__star). */

/* The hero pill sits on a dark photo with white text, where #d9dee6 reads as
   LIT rather than unlit. The dim tone has to invert with its background. */
.fa-tag .stars__s--off { color: rgba(255,255,255,.45); }

/* Review source tabs (Our Reviews / Google / …).
   Pills rather than the underlined .dtabs at the top of the page, so the strip
   reads as a control inside the reviews block and not a second page-level tab
   bar. Separate class names are load-bearing, not cosmetic: .dtab-panel is
   display:none by default and the detail-tabs script claims every .dtab on the
   page — see partials/bst/_reviews-tabs.blade.php. */
.rvtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rvtab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--muted); transition: color .18s, border-color .18s, background .18s; }
.rvtab:hover { color: var(--blue-700); border-color: var(--blue-700); }
.rvtab.is-active { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.rvtab__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--ink-2); font-size: 11.5px; font-weight: 800; }
.rvtab.is-active .rvtab__count { background: rgba(255, 255, 255, .22); color: #fff; }

.rvtab-panel { display: none; }
.rvtab-panel.is-active { display: block; }
/* The sort control only orders OUR reviews, so the tab script hides it on the
   others. Needs saying explicitly — .rvw-sort's own `display: inline-flex`
   outranks the browser's default [hidden] rule. */
.rvw-sort[hidden] { display: none; }

/* Why a short list is short, plus the required link back to the platform. */
.rv-source-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.rv-source-note a { color: var(--blue-700); font-weight: 700; }

@media (max-width: 560px) {
  .rv-card { flex-direction: column; gap: 12px; }
  .rv-card__source { align-self: flex-end; margin-top: -6px; }
  .rvtab { padding: 7px 13px; font-size: 12.5px; }
}

/* ============================================================
   POINTE ROYALE / LODGING DETAIL — stay date-range picker,
   unit cards, empty-reviews state. Reuses .show-cal and .cal-cell styles.
   ============================================================ */
/* date-range states layered on the shared calendar cells */
.cal-cell--start, .cal-cell--end { background: var(--orange); }
.cal-cell--start .cal-cell__num, .cal-cell--end .cal-cell__num { color: #fff; }
.cal-cell--start .cal-cell__dot, .cal-cell--end .cal-cell__dot { background: #fff; }
.cal-cell--inrange { background: #FFF1E3; border-radius: 0; }
.cal-cell--inrange .cal-cell__num { color: var(--orange-600); }

.stay-hint { font-size: 14px; color: var(--muted); margin: 18px 2px 0; }
.stay-summary { font-size: 14.5px; font-weight: 800; color: var(--blue-900); margin: 20px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* unit cards (revealed once a stay range is chosen) */
.unit-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.unit-card__media { width: 120px; height: 90px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--paper-2); }
.unit-card__title { font-size: 16px; font-weight: 800; color: var(--blue-900); margin-bottom: 4px; }
.unit-card__meta { font-size: 13px; font-weight: 700; color: var(--orange-600); margin-bottom: 6px; }
.unit-card__feat { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.unit-card__buy { text-align: right; white-space: nowrap; }
.unit-card__rate { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); }
.unit-card__rate small { font-size: 12px; font-weight: 600; color: var(--muted); }
.unit-card__total { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.unit-card__add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: #F6A04E; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 14px rgba(246,160,78,.42); transition: background .18s, transform .15s; }
.unit-card__add:hover { background: #ef8f36; transform: translateY(-1px); }

/* empty customer-reviews state */
.rv-empty { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 24px; box-shadow: var(--shadow-sm); }
.rv-empty p { font-size: 15px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.6; }
.rv-empty strong { display: block; color: var(--blue-900); font-size: 16px; }

@media (max-width: 560px) {
  .unit-card { grid-template-columns: 1fr; text-align: left; }
  .unit-card__media { width: 100%; height: 150px; }
  .unit-card__buy { text-align: left; }
}

/* ============================================================
   PACKAGE DETAIL — trip summary + "choose package details" form
   ============================================================ */
.trip-summary { background: var(--paper-2); border-left: 4px solid var(--orange); border-radius: 12px; padding: 20px 22px; margin-bottom: 26px; }
.trip-summary__eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.trip-summary__head { font-size: 19px; font-weight: 800; color: var(--blue-900); line-height: 1.25; margin: 0 0 6px; }
.trip-summary__sub { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0; }

.pkg-form { max-width: 560px; }
.pkg-form__field { margin-bottom: 16px; }
.pkg-form label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.pkg-form__select, .pkg-form__input { width: 100%; padding: 12px 14px; font-size: 15px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; transition: border-color .18s, box-shadow .18s; }
.pkg-form__select:focus, .pkg-form__input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,123,34,.15); }
.pkg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pkg-form__continue { margin-top: 4px; }
.pkg-form__step { margin-top: 18px; }
.pkg-form__subhead { font-size: 15px; font-weight: 800; color: var(--blue-900); margin: 4px 0 12px; }
.pkg-form__step[hidden], .pkg-form__cart[hidden] { display: none; }
.pkg-form__cart { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pkg-form__note { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }

@media (max-width: 480px) {
  .pkg-form__row { grid-template-columns: 1fr; }
}

/* Recommendation sections ("You Might Also Like" / "Pair With a Package"):
   trim the stacked top padding + heading margin so the header sits close to the
   content above instead of far below it. Bottom is trimmed too so the gap above
   a following reco section (e.g. "Pair With a Package") shrinks equally. */
.reco-section { padding-top: 24px; padding-bottom: 48px; }
.reco-section .d-subhead { margin-top: 0; }

/* ===== Multi-product search (shared between BST + VB stylesheets) ===== */
.search-suggest__item { display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; color:#1a2330; border-bottom:1px solid #eef1f5; }
.search-suggest__item:hover, .search-suggest__item.is-active { background:#f5f7fa; }
.search-suggest__thumb { width:44px; height:44px; border-radius:8px; background:#dfe5ee center/cover no-repeat; flex:0 0 auto; }
.search-suggest__text { display:flex; flex-direction:column; min-width:0; }
.search-suggest__label { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggest__type { font-size:12px; color:#6b7686; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Inventory-type pill ("Show" / "Hotel" / "Travel Guide") on each suggestion. */
.search-suggest__badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--grad-b); background:rgba(30,139,232,.1); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.search-suggest__type .search-suggest__product { margin-left:0; }
.search-suggest__empty { padding:14px; color:#6b7686; font-size:14px; }
.search-suggest__all { display:block; width:100%; text-align:center; padding:10px; background:#fff; border:0; border-top:1px solid #eef1f5; color:#0061ff; font-weight:600; cursor:pointer; font-size:13px; }
.search-panel .container { position:relative; }
.search-panel .search-suggest { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:70; max-height:70vh; overflow-y:auto; background:#fff; border-radius:12px; box-shadow:0 12px 32px rgba(8,31,51,.16); }
.search-suggest__summary { font-size:12px; color:#6b7686; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* On a phone, an absolutely-positioned 70vh dropdown blankets the page. Put it
   in flow instead so it grows the document — nothing gets covered, and the
   panel is at the top of the page so it's all scrollable. */
@media (max-width:700px) {
  .search-panel .search-suggest {
    position:static; max-height:none; overflow:visible;
    border-radius:0; box-shadow:none; border-top:1px solid #eef1f5;
    margin-bottom:10px;
  }
}

.search-page__form { display:flex; gap:8px; margin-bottom:20px; }
.search-page__form input { flex:1; padding:14px 18px; border:1px solid #d6dce6; border-radius:10px; font-size:16px; }
.search-page__form button { padding:0 24px; border:0; border-radius:10px; background:#F37920; color:#fff; font-weight:700; cursor:pointer; }
.search-page__heading { margin:18px 0 8px; }
.search-count { color:#6b7686; font-size:14px; margin-bottom:8px; }
.search-facets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.search-facet { font-size:12px; background:#eef1f5; border-radius:999px; padding:4px 12px; color:#48515f; }
.search-facet em { font-style:normal; opacity:.6; }
.search-empty { color:#6b7686; padding:30px 0; }
.search-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.search-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e7ebf1; border-radius:14px; overflow:hidden; text-decoration:none; color:#1a2330; transition:box-shadow .15s, transform .15s; }
.search-card:hover { box-shadow:0 8px 24px rgba(8,31,51,.12); transform:translateY(-2px); }
.search-card__media { position:relative; height:130px; background:#cfd7e2 center/cover no-repeat; }
.search-card__type { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; background:rgba(8,31,51,.78); color:#fff; padding:3px 8px; border-radius:6px; }
.search-card__body { padding:12px 14px; }
.search-card__eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#8a93a3; }
.search-group { margin-top:22px; }
.search-group__heading { font-size:15px; font-weight:700; color:#1b2733; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.search-group__heading em { font-style:normal; font-size:12px; font-weight:600; color:#8a93a3; }
.search-card__tags { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.search-card__product { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--grad-b); background:rgba(30,139,232,.1); padding:2px 7px; border-radius:999px; }
.search-suggest__product { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--grad-b); background:rgba(30,139,232,.1); padding:1px 6px; border-radius:999px; margin-left:6px; }
.search-card__title { font-size:15px; font-weight:700; margin:4px 0 8px; line-height:1.25; }
.search-card__meta { display:flex; align-items:center; gap:8px; font-size:13px; color:#48515f; }
.search-card__price { font-weight:700; color:#137a4a; }
/* "Was" price — muted and lighter so the sale price stays the loud one. */
.search-card__retail { color:#8a93a3; font-weight:400; }
.search-suggest__prices { display:inline-flex; align-items:center; gap:6px; }
.search-suggest__prices s { color:#8a93a3; }

/* Short description on the result card — clamped to two lines so cards in a row
   keep a common height regardless of how much copy the item carries. */
.search-card__desc {
  font-size:13px; line-height:1.45; color:#6b7686; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Inventory-type chips on the results page are links (they filter), unlike the
   inert category pills VB renders with the same class. */
a.search-facet {
  text-decoration:none; transition:background .15s, color .15s;
}
a.search-facet:hover { background:#e2e8f0; color:#1b2733; }
a.search-facet.is-active { background:var(--orange); color:#fff; }
a.search-facet.is-active em { opacity:.8; }

/* Per Page control inside the search foot bar. */
.search-page .attr-toolbar__group { display:inline-flex; align-items:center; gap:8px; margin:0; }
.search-page .attr-toolbar__group label { font-size:13px; color:#6b7686; }

.vb-search { position:relative; }
.vb-search__form { display:flex; align-items:center; background:#f1f4f8; border-radius:999px; padding:6px 14px; }
.vb-search__icon { color:#8a93a3; font-size:13px; margin-right:8px; }
.vb-search__form input { border:0; background:transparent; outline:none; font-size:14px; width:140px; }
.vb-search__suggest { position:absolute; top:calc(100% + 8px); right:0; width:340px; background:#fff; border:1px solid #e7ebf1; border-radius:12px; box-shadow:0 12px 32px rgba(8,31,51,.16); overflow:hidden; }
@media (max-width:991px){ .vb-search__form input { width:110px; } .vb-search__suggest { width:280px; } }

/* ============================================================
   TRAVEL GUIDE / BLOG POST DETAIL
   Magazine hero + classic sidebar (ported from blog-post.css
   and the shared .post-body/.side-* rules in blog-options.css)
   ============================================================ */

/* ---------- magazine hero (under the transparent overlay header) ---------- */
.bp-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}
.bp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,31,51,.28) 0%, rgba(8,31,51,.55) 50%, rgba(8,31,51,.92) 100%); }
.bp-hero__inner { position: relative; z-index: 1; color: #fff; padding-bottom: 50px; max-width: 920px; }
.bp-crumbs { font-size: 13px; color: rgba(255,255,255,.72); display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bp-crumbs a { color: #fff; font-weight: 600; }
.bp-crumbs span { color: var(--orange); }
.bp-cat { display: inline-block; margin: 16px 0 14px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.bp-hero__inner h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.025em; line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,.4); text-wrap: balance; }
.bp-author { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14.5px; color: rgba(255,255,255,.9); }
.bp-author strong { color: #fff; }
.bp-author__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }

/* ---------- body: article + classic sidebar ---------- */
.bp-section { padding-top: 32px; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.bp-main { max-width: 760px; }
.bp-side { display: grid; gap: 26px; position: sticky; top: 80px; }

/* ---------- shared article body typography ---------- */
.post-body { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.post-body .lead { font-size: 20px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.post-body p { margin: 0 0 20px; }
.post-body a { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(46,125,186,.4); }
.post-body a:hover { color: var(--orange-600); }
.post-body h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -.02em; color: var(--blue-900); margin: 40px 0 16px; line-height: 1.2; scroll-margin-top: 90px;
}
.post-body h3 { font-weight: 800; font-size: 21px; color: var(--ink); margin: 28px 0 10px; letter-spacing: -.01em; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 26px; display: grid; gap: 9px; }
.post-body ul { padding: 0; }
.post-body ul li { position: relative; padding-left: 26px; }
.post-body ul li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
/* Compact list rows: paragraphs inside list items shouldn't add block margin —
   the list `gap` handles row spacing. Keep a small gap only between stacked
   paragraphs within the same item, and let nested lists (e.g. the blog price
   tables) sit closer under their label. */
.post-body li > p { margin: 0; }
.post-body li > p + p { margin-top: 6px; }
.post-body li > ul, .post-body li > ol { margin: 6px 0 0; gap: 7px; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 8px 0 24px; }
.post-body blockquote {
  margin: 30px 0; padding: 22px 26px; border-left: 4px solid var(--orange);
  background: var(--orange-100); border-radius: 0 12px 12px 0;
  font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--blue-900); line-height: 1.5;
}

.post-share { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.post-share > span { font-weight: 700; color: var(--ink); font-size: 14px; }

/* ---------- sidebar blocks ---------- */
.side-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.side-title { font-size: 17px; font-weight: 800; color: var(--blue-900); margin-bottom: 16px; position: relative; padding-bottom: 12px; }
.side-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--orange); border-radius: 2px; }
.side-search { display: flex; gap: 0; }
.side-search input { flex: 1; border: 1.5px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; padding: 12px 14px; font: inherit; font-size: 14px; outline: none; }
.side-search input:focus { border-color: var(--blue); }
.side-search button { background: var(--blue); color: #fff; border-radius: 0 10px 10px 0; padding: 0 16px; display: grid; place-items: center; transition: background .2s; }
.side-search button:hover { background: var(--orange); }

.recent { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.recent:last-child { border-bottom: 0; }
.recent__thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; background-size: cover; background-position: center; background-color: #d8dde3; }
.recent__title { display: block; font-size: 14px; font-weight: 700; color: var(--blue-900); line-height: 1.3; transition: color .18s; }
.recent:hover .recent__title { color: var(--orange-600); }
.recent__date { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

.side-block--cta { text-align: center; background: linear-gradient(160deg, var(--orange), var(--orange-600)); border: 0; color: #fff; }
.side-cta__seal { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); display: grid; place-items: center; margin: 0 auto 12px; font-weight: 800; font-size: 20px; }
.side-block--cta h4 { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.side-block--cta p { font-size: 14px; opacity: .92; margin: 0 0 16px; }
.side-block--cta .btn--primary { background: #fff; color: var(--orange-600); }
.side-block--cta .btn--primary:hover { background: var(--blue-900); color: #fff; }

.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tagchip { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .18s, color .18s; }
.tagchip:hover { background: var(--grad); color: #fff; border-color: transparent; }

@media (max-width: 1020px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-side { position: static; }
}
@media (max-width: 720px) {
  .bp-hero { min-height: 420px; }
  .bp-section { padding-top: 24px; }
}

/* ============================================================
   TRAVEL GUIDE / BLOG INDEX (listing) — Classic Rows
   Ported from blog.css + blog-list-options.css (Option 1).
   Reuses .side-* / .recent / .tagchip already defined above.
   ============================================================ */

/* full-bleed hero under the transparent overlay header */
.blog-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}
.blog-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,31,51,.3) 0%, rgba(8,31,51,.55) 50%, rgba(8,31,51,.88) 100%); }
.blog-hero__inner { position: relative; z-index: 1; color: #fff; padding-bottom: 44px; }
.blog-hero__crumbs { font-size: 13px; color: rgba(255,255,255,.78); display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.blog-hero__crumbs a { color: #fff; font-weight: 600; }
.blog-hero__crumbs span { color: var(--orange); }
.blog-hero__inner h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.02em; margin: 12px 0 8px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.blog-hero__inner h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--orange); }
.blog-hero__inner p { font-size: 16px; color: rgba(255,255,255,.85); max-width: 560px; margin: 0; }

.blog-section { padding-top: 32px; }
.blog-section .l1-grid { margin-top: 0; }

/* listing grid + rows */
.l1-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.brows { display: grid; gap: 32px; }
.brow { display: grid; grid-template-columns: 300px 1fr; gap: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .15s; }
.brow:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.brow__media { display: block; border-radius: var(--radius); background-size: cover; background-position: center; background-color: #d8dde3; min-height: 200px; }
.brow__body { display: flex; flex-direction: column; }
.brow__body h2 { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 10px; }
.brow__body h2 a { color: var(--blue-900); transition: color .18s; }
.brow__body h2 a:hover { color: var(--orange-600); }
.brow__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.post-cat { color: var(--blue-700); font-weight: 600; }
.brow__body p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.brow .btn { align-self: flex-start; }
.brow .btn--outline:hover { background: var(--grad); border-color: transparent; color: #fff; }

/* sticky sidebar + pager */
.blist-side { display: grid; gap: 26px; position: sticky; top: 80px; align-self: start; }
.blist-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 50px; flex-wrap: wrap; }
.blist-pager__nums { display: flex; gap: 8px; }
.blist-pager__nums a, .blist-pager__nums button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 700; display: grid; place-items: center; transition: all .18s; }
.blist-pager__nums a:hover, .blist-pager__nums button:hover { border-color: var(--blue); color: var(--blue-700); }
.blist-pager__nums a.is-active, .blist-pager__nums button.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.blist-pager__nums span { align-self: center; color: var(--muted); }
.blist-pager .btn.is-disabled { opacity: .45; pointer-events: none; }

@media (max-width: 1020px) {
  .l1-grid { grid-template-columns: 1fr; }
  .blist-side { position: static; }
}
@media (max-width: 720px) {
  .blog-hero { min-height: 320px; }
  .blog-section { padding-top: 24px; }
  .brow { grid-template-columns: 1fr; }
  .brow__media { min-height: 200px; aspect-ratio: 16/9; }
}

/* ============================================================
   Lodging detail — Available Units tab (live room types + nightly
   rates) and Customer Reviews tab. Ported from the legacy
   lodging-options.css (.datebar/.grow) + detail-options.css (.rv-*).
   ============================================================ */
.datebar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(180deg, var(--blue) 0%, var(--blue-600) 100%); color: #fff; border-radius: 16px; padding: 16px 22px; margin-bottom: 26px; box-shadow: 0 10px 24px rgba(46,125,186,.22); }
.datebar__group { display: flex; flex-direction: column; }
.datebar__label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .82; }
.datebar__val { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.datebar__arrow { font-size: 18px; opacity: .7; }
.datebar__nights { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.datebar__change { margin-left: auto; }
.datebar { position: relative; }
.datebar--soft { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.datebar--soft .datebar__label { color: var(--muted); opacity: 1; }
.datebar--soft .datebar__val { color: var(--blue-900); }
.datebar--soft .datebar__arrow { color: var(--orange); opacity: 1; }
.datebar--soft .datebar__nights { background: var(--orange-100); color: var(--orange-600); border-color: transparent; }

/* Change-Dates two-month range picker — right-aligned dropdown under the bar.
   Reuses .show-cal__dow/__grid + .cal-cell (incl. --start/--end/--inrange). */
.lodge-cal { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 640px; max-width: 92vw; padding: 22px 24px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lodge-cal::before { content: ''; position: absolute; top: -8px; right: 64px; width: 16px; height: 16px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.lodge-cal__months { display: flex; gap: 28px; }
.lodge-cal__cal { flex: 1; min-width: 0; }
.lodge-cal__month { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--blue-900); margin-bottom: 12px; }
.lodge-cal__nav { position: absolute; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lodge-cal__nav--prev { left: 18px; }
.lodge-cal__nav--next { right: 18px; }
.lodge-cal__nav:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: #fff; }
.lodge-cal__nav:disabled { opacity: .3; cursor: not-allowed; }

/* Range highlight — blue (scoped here so the global orange range elsewhere is untouched). */
.lodge-cal .cal-cell { aspect-ratio: auto; padding: 7px 0; }
.lodge-cal .cal-cell--past { cursor: not-allowed; }
.lodge-cal .cal-cell--past .cal-cell__num { text-decoration: line-through; color: #C2C7CE; }
.lodge-cal .cal-cell--inrange { background: #E8F1F8; border-radius: 0; }
.lodge-cal .cal-cell--inrange .cal-cell__num { color: var(--blue-600); }
.lodge-cal .cal-cell--start, .lodge-cal .cal-cell--end { background: var(--blue); }
.lodge-cal .cal-cell--start .cal-cell__num, .lodge-cal .cal-cell--end .cal-cell__num { color: #fff; }
.lodge-cal .cal-cell--start { border-radius: 8px 0 0 8px; }
.lodge-cal .cal-cell--end { border-radius: 0 8px 8px 0; }

.lodge-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.lodge-cal__range { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lodge-cal__actions { display: flex; gap: 10px; }
.lodge-cal__apply { font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: #37A24A; border: 1px solid #37A24A; border-radius: var(--radius-sm); padding: 10px 18px; cursor: pointer; }
.lodge-cal__apply:hover:not(:disabled) { background: #2F8C40; }
.lodge-cal__apply:disabled { background: #C7D0CC; border-color: #C7D0CC; cursor: not-allowed; }

@media (max-width: 720px) {
  .lodge-cal { width: 92vw; padding: 18px 16px 14px; }
  .lodge-cal__months { flex-wrap: wrap; gap: 18px; }
  .lodge-cal__cal { flex-basis: 100%; }
}

.occ-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--blue-700); background: #DCEBF7; border-radius: 999px; padding: 5px 12px; }
.amenities { display: flex; flex-wrap: wrap; gap: 7px; }
.amenities span { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--paper-2); border-radius: 7px; padding: 5px 10px; }

.o2-list { display: grid; gap: 22px; }
.grow { display: grid; grid-template-columns: 320px 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .15s; }
.grow:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.grow__media { position: relative; min-height: 240px; background-size: cover; background-position: center; background-color: #d8dde3; }
.grow__smoke { position: absolute; top: 14px; left: 14px; background: var(--blue-900); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 5px 10px; }
.grow__body { padding: 24px 26px; display: flex; flex-direction: column; }
.grow__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.grow__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--blue-900); letter-spacing: -.015em; margin: 0; }
.grow .amenities { margin-bottom: 16px; }
.grow__week { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.grow__day { text-align: center; border-left: 1px solid var(--line); }
.grow__day:first-child { border-left: 0; }
.grow__dhead { background: var(--paper-2); padding: 8px 4px; font-size: 11px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.grow__dhead b { display: block; color: var(--blue-900); }
.grow__drate { padding: 12px 4px; font-size: 12.5px; font-weight: 700; color: var(--blue-900); }
.grow__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px dashed var(--line); }
.grow__note { font-size: 12.5px; color: var(--muted); max-width: 380px; margin: 0; line-height: 1.5; }
.grow__note a { color: var(--orange-600); font-weight: 700; }
.grow__more { display: block; margin-top: 4px; font-style: italic; }
.grow__actions { display: flex; gap: 9px; }
.lodge-units__empty { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; color: var(--muted); font-size: 14.5px; box-shadow: var(--shadow-sm); }
.lodge-units__empty a { color: var(--orange-600); font-weight: 700; }

/* Customer Reviews tab */
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rv-head__count { font-size: 15px; font-weight: 700; color: var(--ink); }
.rv-empty { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.7; box-shadow: var(--shadow-sm); }
.rv-empty a { color: var(--orange-600); font-weight: 700; }
.rv-card { display: flex; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.rv-card + .rv-card { margin-top: 16px; }
.rv-card__avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.rv-card__body h4 { font-size: 17px; font-weight: 800; color: var(--blue-900); margin-bottom: 6px; }
.rv-card__stars { color: #F5B915; font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; }
.rv-card__stars small { color: var(--muted); font-size: 12.5px; letter-spacing: 0; margin-left: 6px; }
.rv-card__body p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 10px; }
/* Review headline (SMASH Vendor Reviews carry one; guest reviews don't). */
.rv-card__title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.35; }
.rv-card__by { font-size: 13px; font-weight: 700; color: var(--ink); }
.rv-card__by em { font-weight: 400; color: var(--muted); }

@media (max-width: 820px) {
  .grow { grid-template-columns: 1fr; }
  .grow__media { min-height: 200px; }
  .grow__week { grid-template-columns: repeat(3, 1fr) !important; }
  .datebar__change { margin-left: 0; }
  .rv-card { flex-direction: column; gap: 12px; }
}

/* ============================================================
   SHOW / ATTRACTION DETAIL — review bits that aren't the modal.
   The write-a-review form itself now uses the .rvm* dialog above,
   the same one lodging uses; what's left here is the honeypot, the
   anonymous toggle, the sort control and the already-reviewed note.
   ============================================================ */
.rvw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rvw-anon { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); margin: -6px 0 16px; cursor: pointer; }
.rvw-anon input { width: 16px; height: 16px; accent-color: var(--blue); }
.rvw-optional { font-style: normal; font-weight: 600; color: var(--muted); }
.rvw-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.rvw-sort select { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink-2); background: #fff; cursor: pointer; }
/* .rvw-own and .rvw-pending-badge removed deliberately: the guest's own pending
   review is now rendered as an ordinary .rv-card. A gold border marked it out
   just as plainly as the words did. */
.rvw-done-note { background: #ECFDF5; color: #065F46; border-radius: 10px; padding: 12px 16px; font-size: 14.5px; font-weight: 700; margin-bottom: 22px; max-width: 640px; }

/* ============================================================
   EMAIL THIS SCHEDULE — modal on the show detail page
   (sits on the shared .ticket-modal overlay/dialog chrome)
   ============================================================ */
/* display:block overrides the shared .ticket-modal__dialog, which is a
   300px + 1fr grid for the booking modal's image column. This modal is a single
   column — without the override the form (and the success panel, once the form
   is hidden) renders into the 300px track and leaves dead space on the right. */
.share-modal__dialog { display: block; max-width: 460px; padding: 32px 30px 26px; }
.share-modal__title { font-size: 21px; font-weight: 800; color: var(--blue-900); margin: 0 0 8px; }
.share-modal__intro { font-size: 14.5px; color: var(--ink-2); margin: 0 0 20px; }
.share-modal__label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.share-modal__input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink); }
.share-modal__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,31,58,.10); }
.share-modal__err { background: #FEF2F2; color: #991B1B; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; margin: 14px 0 0; }
.share-modal__actions { margin-top: 18px; }
.share-modal__btn { width: 100%; background: var(--orange); color: #fff; border: 0; border-radius: 10px; padding: 13px 20px; font-size: 15px; font-weight: 800; cursor: pointer; transition: filter .18s; }
.share-modal__btn:hover:not(:disabled) { filter: brightness(1.07); }
.share-modal__btn:disabled { opacity: .6; cursor: not-allowed; }
.share-modal__fine { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.share-modal__done { text-align: center; padding: 12px 0 4px; color: var(--ink-2); }
.share-modal__done svg { color: #1F8A5B; margin-bottom: 12px; }
.share-modal__done h3 { font-size: 20px; font-weight: 800; color: var(--blue-900); margin: 0 0 8px; }
.share-modal__done p { font-size: 14.5px; margin: 0 0 20px; }

/* ============================================================
   PRINT — the show schedule, and nothing else.
   MUST stay at the end of this file: it overrides
   `.dtab-panel { display:none }` above, and losing that
   cascade prints a blank page.
   ============================================================ */
@media print {
  @page { margin: 12mm; }

  body { background: #fff !important; color: #000 !important; }

  /* Site chrome, sales furniture and every overlay.
     Note: .site-footer, never a bare `footer` — the printout has a <footer>
     of its own (.scp__foot) that must survive. */
  .announce, .search-panel, .site-header, .fa-hero, .dtabs, .fa-side,
  .site-footer, #gallery, .gallery, .d-subhead, .cal-intro, .hints, .mp-embed,
  .ticket-modal, .coupons-modal, .coupons-pill, .cart-drawer,
  /* .rvm: the write-a-review modal now sits OUTSIDE #reviews, so that
     selector no longer covers it. It carries `hidden` when closed, but an
     open dialog must not print either. */
  #reviews, .rvm, .rv-list, .reco-section,
  .show-cal, .show-cal__tools, .show-cal__notice { display: none !important; }

  /* The visitor may hit Cmd-P from any tab — force the schedule panel open */
  .dtab-panel { display: none !important; }
  .dtab-panel[data-dpanel="cal"] { display: block !important; }
  .show-cal-print { display: block !important; }

  /* ---- /show-schedules grid: swap the live page for .sched-print ----
     The grid is built in JS and is far too wide for a sheet of paper; the print
     block carries a rebuilt table of whatever week/view/filters were on screen. */
  .sched-section .sched-head, .sched-section .sched-controls,
  .sched-section .sched-tools-row, .sched-section .sched-layout,
  .sched-section .sched-dir, .sched-hero, .sched-section .legend { display: none !important; }
  .sched-print { display: block !important; }

  .scp__filters { font-size: 9.5pt; font-style: italic; color: #444; margin: 0 0 10px; }

  /* Week grid: 7 day columns. Landscape is the sane orientation for this, but
     the table still has to survive portrait, hence the small type and the
     name column being the only wide one. */
  .scp__wk { border-collapse: collapse; width: 100%; font-size: 8pt; table-layout: fixed; }
  .scp__wk tr { break-inside: avoid; }
  .scp__wk th, .scp__wk td { border: 1px solid #bbb; padding: 3px 4px; text-align: center; vertical-align: top; }
  .scp__wk tr:first-child th { background: #eee; font-size: 8.5pt; }
  .scp__wk .scp__wname { width: 22%; text-align: left; font-size: 8.5pt; }
  .scp__wdate { font-weight: normal; color: #444; }
  .scp__wprice { display: block; font-weight: normal; color: #444; }
  .scp__wt { display: block; white-space: nowrap; }
  .scp__wnone { color: #999; }

  /* Day list reuses .scp__tbl from the detail page so both printouts read as
     one system; only the venue line is new. */
  .scp__dvenue { display: block; font-weight: normal; font-size: 9pt; color: #555; }
  .scp__dprice { white-space: nowrap; }

  .scp__head { border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 16px; }
  .scp__head h1, .scp__head h2 { font-size: 22pt; margin: 0 0 6px; }
  .scp__sum { font-size: 10.5pt; margin: 0 0 8px; }
  .scp__meta { font-size: 10pt; font-weight: bold; margin: 0 0 2px; }
  .scp__url { font-size: 9pt; color: #444; margin: 0; }
  .scp__month { font-size: 14pt; margin: 18px 0 8px; break-after: avoid; }
  .scp__month--later { font-size: 12pt; }
  .scp__none { font-size: 10pt; font-style: italic; margin: 0 0 8px; }
  .scp__tbl { border-collapse: collapse; width: 100%; font-size: 10.5pt; }
  .scp__tbl tr { break-inside: avoid; }
  .scp__tbl th, .scp__tbl td { border-bottom: 1px solid #bbb; padding: 5px 8px; text-align: left; vertical-align: top; }
  .scp__tbl th { width: 26%; white-space: nowrap; }
  .scp__tbl td:last-child { width: 22%; color: #444; }
  .scp__foot { border-top: 1px solid #999; margin-top: 18px; padding-top: 8px; font-size: 9pt; color: #444; }
}

/* ============================================================
   Coupons thank-you page (/coupons/thank-you)
   ============================================================ */
.ct { padding: 44px 0 64px; background: var(--paper, #fafaf7); }
.ct__head { text-align: center; max-width: 820px; margin: 0 auto 30px; }
.ct__head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; color: #2E7D32; margin-bottom: 12px; }
.ct__head p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

.ct__grid { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ct__grid--single { grid-template-columns: minmax(0, 1fr); }

/* Shared pill button (voucher card + claim modal) */
.vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--orange); color: #fff; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 22px; cursor: pointer; box-shadow: 0 6px 14px rgba(238,123,34,.34); transition: background .2s, transform .15s, box-shadow .2s; }
.vbtn:hover { background: var(--orange-600); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(216,101,15,.42); }
.vbtn--done, .vbtn--done:hover { background: #1F8A5B; box-shadow: 0 6px 14px rgba(31,138,91,.34); transform: none; cursor: default; }

/* Voucher card — ticket stub */
.vcard { width: 100%; max-width: 400px; font-family: var(--font-sans); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 6px 18px rgba(15,30,50,.08), 0 2px 6px rgba(15,30,50,.05); overflow: hidden; }
.vcard__stub { position: relative; display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, var(--orange) 0%, var(--orange-600) 100%); color: #fff; padding: 18px 22px; }
/* perforation — the dot colour is the card's own background */
.vcard__stub::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; background-image: radial-gradient(circle at 6px 6px, #fff 5px, transparent 5px); background-size: 16px 12px; background-repeat: repeat-x; }
.vcard__seal { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.5); display: grid; place-items: center; flex-shrink: 0; }
.vcard__stubtxt { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .08em; line-height: 1.15; }
.vcard__body { padding: 26px 24px 24px; }
.vcard__kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--orange-600); margin-bottom: 8px; }
.vcard__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--blue-900); line-height: 1.3; margin: 0 0 14px; }
.vcard__lede { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; }
.vcard__phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 29px; letter-spacing: -.02em; color: var(--blue-900); margin-bottom: 16px; text-decoration: none; white-space: nowrap; transition: color .18s; }
.vcard__phone svg { color: var(--orange); flex-shrink: 0; }
.vcard__phone:hover { color: var(--orange-600); }
.vcard__or { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vcard__or::before, .vcard__or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.vcard__cta { width: 100%; }
.vcard__timer { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 18px; }
.vcard__timer-label { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.vclock { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.vclock b { background: var(--blue-900); color: #fff; font-size: 26px; font-weight: 800; border-radius: 9px; padding: 6px 10px; line-height: 1; }
.vclock i { font-style: normal; color: var(--orange); font-weight: 800; font-size: 20px; }
.ct--expired .vclock { opacity: .55; }
.vcard__fine { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 14px 0 0; text-align: center; }

/* PDF viewer */
.ct__pdf { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ct__toolbar { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2, #f5f5f2); }
.ct__tool { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.ct__tool:hover { border-color: var(--blue); color: var(--blue-700); }
.ct__viewer { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #333; }
.ct__viewer-fallback { font-size: 13px; color: var(--muted); padding: 10px 14px; margin: 0; }
.ct__viewer-fallback a { color: var(--blue-700); font-weight: 700; }
.ct__nopdf { padding: 40px 28px; text-align: center; }
.ct__nopdf h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--blue-900); margin-bottom: 10px; }
.ct__nopdf p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ct__nopdf a { font-weight: 800; color: var(--orange); }

/* Claim modal — hero seal */
.vmodal-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(8,31,51,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .26s, visibility .26s; }
.vmodal-overlay.is-open { opacity: 1; visibility: visible; }
.vmodal { position: relative; width: 100%; max-width: 430px; background: #fff; border-radius: 20px; text-align: center; padding: 38px 30px 28px; box-shadow: 0 26px 64px rgba(8,31,51,.4); transform: scale(.96); transition: transform .26s cubic-bezier(.2,.7,.2,1); }
.vmodal-overlay.is-open .vmodal { transform: scale(1); }
.vmodal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.vmodal__close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }
.vseal { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(140deg, var(--orange), var(--orange-600)); color: #fff; display: inline-grid; place-items: center; margin-bottom: 16px; box-shadow: 0 10px 24px rgba(216,101,15,.4); }
.vmodal h3 { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; color: var(--blue-900); margin: 0 0 12px; line-height: 1.2; }
.vmodal p { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0 0 18px; }
.vprice { background: var(--paper); border: 1px dashed var(--line); border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.vprice__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vprice__nums { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-variant-numeric: tabular-nums; }
.vprice__nums s { font-size: 19px; color: var(--muted); text-decoration-thickness: 2px; }
.vprice__nums b { font-family: var(--font-display); font-size: 38px; font-weight: 800; color: var(--orange); line-height: 1; }
.vprice__save { display: inline-block; margin-top: 9px; background: #E4F4EC; color: #1F8A5B; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; }
.vmodal__cta { width: 100%; }
.vmodal__fine { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 13px 0 0; }

@media (max-width: 900px) {
  .ct__grid { grid-template-columns: 1fr; }
  .vcard { max-width: none; }
  .ct__viewer { height: 70vh; }
}
@media (max-width: 560px) {
  .vcard__phone { font-size: 25px; }
  .vmodal { padding: 32px 22px 24px; }
  .vprice__nums b { font-size: 32px; }
}
@media (max-width: 480px) {
  .ct { padding: 28px 0 44px; }
}