/* ═══════════════════════════════════════════════════════════════
   VIBESCAPE HOME — hero, ticket grid, ticket drawer, workshops, nature.
   Built from the Figma "Vibescape" homepage frame and the
   vibescape-ticket-drawer-simple.html prototype. Prefix: vh-.
   Loaded after vibescape-bookings.css (which still styles the checkout popup).
   ═══════════════════════════════════════════════════════════════ */

/* Avenir (Book) — used for the "Included with every ticket" band */
@font-face {
  font-family: "Avenir LT Std";
  src: url("../fonts/avenir-lt-std-book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body.vibescape-home-page { background: #fff !important; }

.vh-home,
.vh-root {
  --vh-bg: #F7EFE4;
  --vh-cream: #FCF3EA;
  --vh-surface: #fff;
  --vh-sunk: #FBF6EF;
  --vh-ink: #24112E;
  --vh-muted: #6B5C70;
  --vh-line: #EADFD1;
  --vh-head: #400068;
  --vh-violet: #7A1FE0;
  --vh-lav: #F1E6FF;
  --vh-lav-line: #D9C2F7;
  --vh-magenta: #F23CF9;
  --vh-orange: #B85C1E;
  --vh-save: #0F7A47;
  --vh-save-bg: #E3F5EB;
  --vh-serif: "Averia Serif Libre", Georgia, "Times New Roman", serif;
  --vh-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--vh-sans);
  color: var(--vh-ink);
  -webkit-font-smoothing: antialiased;
}
.vh-home *, .vh-home *::before, .vh-home *::after,
.vh-root *, .vh-root *::before, .vh-root *::after { box-sizing: border-box; }

/* The booking wrapper doubles as the homepage section: undo its page-level padding/background. */
.vibescape-booking.vh-root { padding: 0; background: transparent; }
.vh-icon { flex: none; }

.vh-title { font: 700 clamp(32px, 4vw, 46px)/1.1 var(--vh-serif); color: var(--vh-head); margin: 0; text-align: center; }
.vh-title-left { text-align: left; }
.vh-lede { max-width: 700px; margin: 14px auto 0; color: var(--vh-muted); font-size: 16px; line-height: 1.6; text-align: center; }
.vh-lede-left { margin-left: 0; text-align: left; }
.vh-eyebrow { margin: 0 0 10px; font: 600 12px/1 var(--vh-sans); letter-spacing: .14em; text-transform: uppercase; color: #E08A3C; }

.vh-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--vh-magenta); color: var(--vh-head); font: 700 13px/1 var(--vh-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; padding: 15px 28px; }
.vh-pill:hover { filter: brightness(1.06); }
.vh-pill-orange { background: #E08A3C; color: #fff; text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 10px 16px; white-space: nowrap; }

/* ─────────────── hero ─────────────── */
/* The site header is fixed and overlays the page (106px tall), so the hero clears it plus an 80px gap */
.vh-hero { background: #496029; padding: 186px 77px 0; }
/* Homepage header tint from the Figma: slate over the olive band */
html body.vibescape-home-page #vs-header.e-con { background: rgba(54, 67, 62, .94) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Same header restyle the draft homepage uses (vibescape-draft.css, scoped there to page 93), for the Tickets page */
html body.vibescape-home-page #vs-header.e-con { border-bottom: none !important; height: 106px !important; min-height: 106px !important; padding: 24px 64px !important; font-family: var(--font-satoshi) !important; }
html body.vibescape-home-page #vs-header .elementor-widget-image img { height: 44px !important; }
html body.vibescape-home-page .vs-xh-left.e-con { gap: 48px !important; }
html body.vibescape-home-page #vs-header .xpro-nav-menu { gap: 40px !important; }
html body.vibescape-home-page #vs-header .xpro-nav-menu > li > a { font-family: var(--font-satoshi) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .025em !important; text-transform: none !important; }
html body.vibescape-home-page .btn-outline-pill.elementor-button, html body.vibescape-home-page .elementor-button.btn-outline-pill { background: transparent !important; color: #fff !important; font-family: var(--font-satoshi) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .05em !important; padding: 12px 24px !important; border: 1px solid rgba(255,255,255,.4) !important; border-radius: 9999px !important; }
@media (max-width: 1024px) { html body.vibescape-home-page #vs-header.e-con { padding: 20px 40px !important; } }
@media (max-width: 768px) {
  html body.vibescape-home-page #vs-header.e-con { height: 84px !important; min-height: 84px !important; padding: 16px 24px !important; }
  html body.vibescape-home-page .vs-xh-right .hide-mobile { display: none !important; }
}
.vh-hero-frame {
  position: relative; min-height: 460px; border-radius: 12px 12px 0 0; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,22,0,.5) 0%, rgba(8,22,0,0) 62%),
    linear-gradient(180deg, rgba(8,22,0,0) 40%, rgba(8,22,0,.62) 100%),
    var(--vh-hero, none) center / cover no-repeat, #2f3b12;
  display: flex; align-items: flex-end; padding: 44px 42px;
}
/* finished hero artwork (photo + shadow + sticker in one image): show it as-is */
.vh-hero-frame.has-art { background: var(--vh-hero) center / cover no-repeat, #2f3b12; }
.vh-hero-title { font: 600 44px/1.25 var(--vh-sans); color: #fff; margin: 0 0 30px; letter-spacing: -.01em; }
.vh-hero-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; color: #fff; font-size: 22px; line-height: 1.2; }
.vh-hero-meta li { display: flex; align-items: center; gap: 14px; }
.vh-hero-meta .vh-icon { width: 25px; height: 25px; }
.vh-sticker-img { position: absolute; right: 78px; bottom: 64px; width: 356px; height: auto; pointer-events: none; }
/* CSS stand-in for the sticker until hero-sticker.svg/png is dropped into uploads/vibescape/ */
.vh-sticker { position: absolute; right: 78px; bottom: 64px; width: 356px; height: 268px; pointer-events: none; }
.vh-sticker-tix { position: absolute; left: 0; top: 0; transform: rotate(-8deg); background: #3d0066; color: var(--vh-magenta); font: 900 italic 92px/1 var(--vh-sans); letter-spacing: -.03em; padding: 30px 40px 26px; border-radius: 16px; text-shadow: 4px 4px 0 #F59A3E, 8px 8px 0 #8E2EFD; -webkit-mask: radial-gradient(circle 16px at 0 50%, transparent 98%, #000) , linear-gradient(#000, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 16px at 0 50%, transparent 98%, #000), linear-gradient(#000, #000); mask-composite: intersect; }
.vh-sticker-burst { position: absolute; right: 0; bottom: 0; width: 158px; height: 158px; display: grid; place-content: center; text-align: center; color: var(--vh-head); background: #F59A3E; clip-path: polygon(50% 0, 58% 9%, 69% 3%, 74% 14%, 86% 11%, 87% 24%, 98% 28%, 94% 40%, 100% 50%, 94% 60%, 98% 72%, 87% 76%, 86% 89%, 74% 86%, 69% 97%, 58% 91%, 50% 100%, 42% 91%, 31% 97%, 26% 86%, 14% 89%, 13% 76%, 2% 72%, 6% 60%, 0 50%, 6% 40%, 2% 28%, 13% 24%, 14% 11%, 26% 14%, 31% 3%, 42% 9%); transform: rotate(6deg); }
.vh-sticker-burst b { font: 900 54px/1 var(--vh-sans); }
.vh-sticker-burst i { font: 800 18px/1 var(--vh-sans); font-style: normal; letter-spacing: .04em; }

/* ─────────────── tickets section ─────────────── */
.vh-stay { background: #fff; padding: 72px 0 0; }
.vh-stay-intro { padding: 0 24px; }

/* Venue slider: three photos in view, infinite, any number of slides (see vibescape-drawer.js) */
.vh-venue { --vh-gap: 19px; position: relative; max-width: 1264px; margin: 44px auto 0; padding: 0 60px; }
.vh-venue-viewport { overflow: hidden; border-radius: 18px; touch-action: pan-y; cursor: grab; }
.vh-venue-viewport.is-dragging { cursor: grabbing; }
.vh-venue-track { display: flex; gap: var(--vh-gap); will-change: transform; }
.vh-venue-track.is-animating { transition: transform .5s cubic-bezier(.22,.8,.26,1); }
.vh-venue-slide { flex: 0 0 calc((100% - 2 * var(--vh-gap)) / 3); margin: 0; aspect-ratio: 368 / 290; border-radius: 18px; overflow: hidden; background: var(--vh-lav); user-select: none; }
.vh-venue-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vh-venue-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--vh-head); background: #fff; color: var(--vh-head); display: grid; place-items: center; cursor: pointer; z-index: 2; padding: 0; transition: background .15s, color .15s; }
.vh-venue-prev { left: 0; } .vh-venue-next { right: 0; }
.vh-venue-nav .vh-icon { stroke-width: 1.6; }

.vh-perks { max-width: 1440px; margin: 36px auto 0; padding: 0 102px; }
.vh-perks-label { margin: 0 0 14px; text-align: center; font: 600 12px/1 var(--vh-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vh-head); }
.vh-perks-list { list-style: none; margin: 0; padding: 0 30px; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; border: 1px solid #E9DFD2; border-radius: 20px; background: #fff; font-family: "Avenir LT Std", Avenir, "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.35; color: #3d3743; }
.vh-perks-list li { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vh-perks-list li span { white-space: nowrap; }
.vh-perks-list li:nth-child(3) span { white-space: normal; max-width: 152px; } /* only "Movie Night, Talk Den, Showcase & Bazaar" wraps to two lines, as in the Figma */
.vh-perks-list .vh-icon { color: var(--vh-violet); width: 28px; height: 28px; stroke-width: 1.5; }
.vh-perk-img { width: auto; height: auto; max-width: none; flex: none; display: block; }

.vh-tickets { margin-top: 72px; background: var(--vh-cream); border-radius: 110px 110px 0 0; padding: 56px 76px 96px; }
.vh-filter-wrap { position: sticky; top: 100px; z-index: 6; display: flex; justify-content: center; margin-bottom: 44px; }
.vh-filter { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--vh-line); border-radius: 999px; box-shadow: 0 10px 30px rgba(64,0,104,.08); }
.vh-filter-btn { border: 0; background: transparent; border-radius: 999px; padding: 14px 24px; font: 600 14px/1 var(--vh-sans); color: var(--vh-head); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.vh-filter-btn.is-active { background: var(--vh-head); color: #fff; }
.vh-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--vh-lav); color: var(--vh-head); font-size: 11px; }
.vh-filter-btn.is-active .vh-count { background: rgba(255,255,255,.22); color: #fff; }

.vh-group { max-width: 1240px; margin: 0 auto 60px; }
.vh-group[hidden] { display: none; }
.vh-group-title { font: 700 clamp(26px, 3vw, 34px)/1.1 var(--vh-serif); color: var(--vh-head); margin: 0 0 6px; }
.vh-group-sub { margin: 0 0 26px; color: #4a4450; font-size: 15px; }
.vh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }

/* Ticket stub: name + price, dashed perforation with a notch each side, then chips + button */
.vh-card { position: relative; background: #fff; border-radius: 24px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(64,0,104,.06); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.vh-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(64,0,104,.12); }
.vh-card.is-sold-out { cursor: default; }
.vh-card.is-sold-out:hover { transform: none; box-shadow: 0 1px 3px rgba(64,0,104,.06); }
.vh-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 30px 28px 28px 36px; min-height: 124px; }
.vh-card-title { min-width: 0; max-width: 55%; }
.vh-card-name { font: 600 28px/1.17 var(--vh-sans); color: var(--vh-head); margin: 0; letter-spacing: -.015em; }
.vh-badge-popular { display: inline-block; margin-bottom: 8px; font: 700 11px/1 var(--vh-sans); border-radius: 999px; padding: 6px 10px; background: #FDE9D2; color: #8A4A12; }
.vh-card-pricebox { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; padding-top: 0; }
.vh-was { color: #bdbdbd; font: 600 18px/1.25 var(--vh-sans); letter-spacing: -.01em; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.vh-card-price { font: 700 28px/1.2 var(--vh-sans); color: var(--vh-magenta); letter-spacing: -.015em; }
.vh-card[data-type="camper"] .vh-card-price { color: #9B33FF; }
.vh-sold-img { display: block; width: 146px; height: auto; margin: -8px -8px 0 0; }
/* fine dotted perforation (2px dots, 3px gaps), as in the Figma */
.vh-perf { position: relative; height: 2px; margin: 0 24px; background: repeating-linear-gradient(90deg, #4d4851 0 2px, transparent 2px 5px); }
.vh-perf::before, .vh-perf::after { content: ""; position: absolute; top: -21px; width: 44px; height: 44px; border-radius: 50%; background: var(--vh-cream); }
.vh-perf::before { left: -46px; }
.vh-perf::after { right: -46px; }
.vh-card-bottom { padding: 28px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.vh-facts { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
/* Ticket items: Inter, regular weight, to sit with the name and price */
.vh-card .vh-fact, .vh-card .vh-fact span { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.vh-fact { background: #FFF2FF; border-radius: 8px; padding: 9px 9px; display: flex; align-items: center; gap: 7px; min-height: 33px; font-size: 11px; font-weight: 400; line-height: 1.3; color: #46404c; letter-spacing: 0; white-space: nowrap; }
.vh-fact .vh-icon { color: var(--vh-magenta); width: 14px; height: 14px; }
.vh-btn { margin-top: auto; width: 100%; border: 0; border-radius: 8px; padding: 0 18px; height: 53px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--vh-magenta); color: var(--vh-head); font: 700 17px/1 var(--vh-sans); cursor: pointer; transition: filter .15s; }
.vh-btn:hover { filter: brightness(1.06); }
.vh-card[data-type="camper"] .vh-btn { background: var(--vh-violet); color: #fff; }
.vh-btn-disabled, .vh-btn:disabled { background: #EBDCEF !important; color: #9b8aa3 !important; cursor: not-allowed; filter: none; }

.vh-build { max-width: 860px; margin: 24px auto 0; padding: 30px 36px; border: 1.5px dashed var(--vh-violet); border-radius: 22px; background: rgba(255,255,255,.55); }
.vh-build-title { margin: 0 0 6px; font-weight: 700; font-size: 18px; color: var(--vh-head); }
.vh-build-sub { margin: 0 0 18px; color: var(--vh-muted); font-size: 15px; }

/* ─────────────── workshops + nature ─────────────── */
.vh-block { background: var(--vh-cream); padding: 80px 76px 20px; }
.vh-nature { padding-top: 40px; padding-bottom: 96px; }
.vh-block > * { max-width: 1288px; margin-left: auto; margin-right: auto; }
.vh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.vh-feature { background: #fff; border: 1px solid var(--vh-line); border-radius: 22px; overflow: hidden; }
.vh-feature-img { position: relative; height: 360px; background: var(--vh-lav) center / cover no-repeat; }
.vh-tag { position: absolute; left: 24px; top: 24px; background: rgba(255,255,255,.92); color: var(--vh-head); font: 600 12px/1 var(--vh-sans); border-radius: 999px; padding: 9px 14px; }
.vh-feature-body { padding: 26px 32px 32px; }
.vh-feature-body h3 { font: 700 28px/1.1 var(--vh-serif); color: var(--vh-head); margin: 0 0 12px; }
.vh-feature-body p { margin: 0 0 18px; color: var(--vh-muted); font-size: 15px; line-height: 1.6; }
.vh-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vh-chips li { background: var(--vh-lav); color: var(--vh-head); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; }
.vh-nature-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vh-photo-card { position: relative; min-height: 420px; border-radius: 22px; overflow: hidden; display: flex; align-items: flex-end; background: var(--vh-head) center / cover no-repeat; }
.vh-photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,6,30,0) 40%, rgba(20,6,30,.78) 100%); }
.vh-photo-copy { position: relative; z-index: 1; padding: 28px 32px; color: #fff; }
.vh-photo-copy h3 { font: 700 30px/1.1 var(--vh-serif); margin: 0 0 6px; }
.vh-photo-copy p { margin: 0; font-size: 14px; opacity: .9; }

/* ─────────────── drawer ─────────────── */
html.vh-lock { overflow: hidden; }
.vh-scrim { position: fixed; inset: 0; z-index: 9999; background: rgba(38,8,58,.5); opacity: 0; transition: opacity .25s; }
.vh-scrim[hidden], .vh-drawer[hidden] { display: none; }
.vh-scrim.is-open { opacity: 1; }
.vh-drawer {
  position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  background: var(--vh-bg); display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  box-shadow: -24px 0 60px rgba(30,0,50,.18); outline: none;
}
.vh-drawer.is-open { transform: none; }
.vibescape-booking .vb-modal-overlay { z-index: 10001; }
.vh-drawer :focus-visible, .vh-root :focus-visible { outline: 3px solid var(--vh-violet); outline-offset: 2px; border-radius: 10px; }

.vh-d-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--vh-line); background: #fff; flex: none; }
.vh-d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vh-d-eyebrow { margin: 0 0 6px; font: 700 11px/1 var(--vh-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vh-head); }
.vh-d-title { font: 700 clamp(26px, 3.2vw, 32px)/1.08 var(--vh-serif); color: var(--vh-head); margin: 0; }
.vh-d-meta { margin: 6px 0 0; color: var(--vh-muted); font-size: 14px; }
/* padding: 0 + min sizes: the theme gives every <button> 12px 24px, which squashed this into an oval with the X off-centre */
.vh-d-close { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; line-height: 0; border-radius: 50%; border: 1px solid var(--vh-line); background: #fff; color: var(--vh-head); display: grid; place-items: center; cursor: pointer; }
.vh-d-close svg { display: block; width: 18px; height: 18px; }
.vh-presets { margin-top: 16px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.vh-chip-group { flex: none; align-self: center; font-size: 12px; font-weight: 600; color: var(--vh-muted); padding: 0 4px 0 8px; }
.vh-chip-group:first-child { padding-left: 0; }
.vh-chip { flex: none; border: 1px solid var(--vh-line); background: var(--vh-sunk); border-radius: 999px; padding: 9px 14px; font: 600 14px/1 var(--vh-sans); color: var(--vh-ink); white-space: nowrap; min-height: 40px; cursor: pointer; }
.vh-chip[aria-pressed="true"] { background: var(--vh-head); color: #fff; border-color: var(--vh-head); }

.vh-d-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 14px; }
.vh-sec { background: #fff; border: 1px solid var(--vh-line); border-radius: 20px; padding: 18px 16px; }
.vh-d-h { font: 700 21px/1.15 var(--vh-serif); color: var(--vh-head); margin: 0; }
.vh-sub { color: var(--vh-muted); font-size: 14px; margin: 4px 0 14px; }
.vh-hint { background: var(--vh-lav); border-radius: 14px; padding: 12px 14px; font-size: 14px; margin: 0 0 14px; }
.vh-hint b { color: var(--vh-head); }

.vh-base { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.vh-base-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--vh-muted); }
.vh-base-list li { padding-left: 22px; position: relative; }
.vh-base-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--vh-lav); }
.vh-base-list li::after { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 4px; border-left: 2px solid var(--vh-violet); border-bottom: 2px solid var(--vh-violet); transform: rotate(-45deg); }
.vh-base-amt { font-weight: 700; white-space: nowrap; }

.vh-opts { display: grid; gap: 8px; }
.vh-opts-ws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vh-opt { position: relative; text-align: left; border: 1.5px solid var(--vh-line); background: var(--vh-sunk); border-radius: 16px; padding: 12px 16px 12px 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; cursor: pointer; font: 400 15px/1.35 var(--vh-sans); color: var(--vh-ink); transition: border-color .15s, background .15s; }
.vh-opt:hover { border-color: var(--vh-lav-line); }
.vh-opt[aria-checked="true"], .vh-opt[aria-pressed="true"] { border-color: var(--vh-violet); background: var(--vh-lav); }
.vh-opt-name { flex: 1 1 auto; font-weight: 600; }
.vh-opt-price { order: 2; font-size: 14px; font-weight: 600; }
.vh-opt-price.inc { color: var(--vh-violet); }
.vh-opt-price.sv { color: var(--vh-save); }
.vh-opt-desc { flex-basis: 100%; order: 3; font-size: 13px; color: var(--vh-muted); }
.vh-opt-mark { position: absolute; left: 14px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--vh-lav-line); background: #fff; }
.vh-opt[aria-checked="true"] .vh-opt-mark { border: 7px solid var(--vh-violet); }
.vh-opt.is-check .vh-opt-mark { border-radius: 7px; }
.vh-opt.is-check[aria-pressed="true"] .vh-opt-mark { border: 0; background: var(--vh-violet); }
.vh-opt.is-check[aria-pressed="true"] .vh-opt-mark::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }
.vh-opts-ws .vh-opt { padding: 10px 12px 10px 42px; }
.vh-opts-ws .vh-opt-mark { left: 12px; margin-top: -10px; width: 20px; height: 20px; }
.vh-opts-ws .vh-opt-name { flex-basis: 100%; }
.vh-opts-ws .vh-opt-price { order: 3; font-size: 13px; }

.vh-tabs { display: inline-flex; background: var(--vh-sunk); border: 1px solid var(--vh-line); border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.vh-tab { border: 0; background: transparent; border-radius: 999px; padding: 8px 16px; min-height: 40px; font: 600 14px/1 var(--vh-sans); color: var(--vh-ink); cursor: pointer; }
.vh-tab[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); color: var(--vh-head); }
.vh-cnt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--vh-violet); color: #fff; font-size: 12px; margin-left: 6px; padding: 0 6px; }

.vh-sum { margin-bottom: 8px; }
.vh-lines { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; }
.vh-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vh-line); }
.vh-line-l small { display: block; color: var(--vh-muted); font-size: 13px; margin-top: 2px; }
.vh-line-r { white-space: nowrap; font-weight: 600; }
.vh-lines li.is-pkg .vh-line-l > span { font-weight: 600; }
.vh-saving { display: flex; justify-content: space-between; gap: 12px; background: var(--vh-save-bg); color: var(--vh-save); border-radius: 14px; padding: 12px 14px; margin-top: 14px; font-size: 14px; font-weight: 600; }
.vh-nudge { margin-top: 12px; border: 1.5px dashed var(--vh-violet); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.vh-nudge p { margin: 0 0 10px; }
.vh-nudge button { border: 0; border-radius: 999px; background: var(--vh-head); color: #fff; font: 700 14px/1 var(--vh-sans); padding: 10px 16px; min-height: 40px; cursor: pointer; }

.vh-d-foot { flex: none; background: #fff; border-top: 1px solid var(--vh-line); padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 18px); }
.vh-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.vh-total span { color: var(--vh-muted); font-size: 14px; }
.vh-total strong { font: 800 30px/1 var(--vh-sans); letter-spacing: -.01em; }
.vh-cta { width: 100%; border: 0; border-radius: 999px; background: var(--vh-head); color: #fff; font: 700 17px/1 var(--vh-sans); padding: 16px 20px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.vh-cta:hover { filter: brightness(1.15); }
.vh-fine { font-size: 12px; color: var(--vh-muted); margin: 10px 0 0; text-align: center; }

/* The floating "Call Us" pill (z-index 99999) must not sit on top of the drawer's checkout button. */
html.vh-lock .vb-call-fab { display: none !important; }

/* The theme styles every <button> (blue hover/focus) — pin ours so states never leak through. */
.vh-root button { font-family: var(--vh-sans); text-transform: none; letter-spacing: normal; box-shadow: none; text-shadow: none; }
.vh-root .vh-d-close, .vh-root .vh-d-close:hover, .vh-root .vh-d-close:focus, .vh-root .vh-d-close:active { background: #fff; color: var(--vh-head); border-color: var(--vh-line); }
.vh-root .vh-d-close:hover { border-color: var(--vh-lav-line); background: var(--vh-lav); }
.vh-root .vh-venue-nav, .vh-root .vh-venue-nav:hover, .vh-root .vh-venue-nav:focus { background: #fff; color: var(--vh-head); }
.vh-root .vh-filter-btn, .vh-root .vh-filter-btn:hover, .vh-root .vh-filter-btn:focus { background: transparent; color: var(--vh-head); }
.vh-root .vh-filter-btn.is-active, .vh-root .vh-filter-btn.is-active:hover, .vh-root .vh-filter-btn.is-active:focus { background: var(--vh-head); color: #fff; }
.vh-root .vh-btn, .vh-root .vh-btn:hover, .vh-root .vh-btn:focus { background: var(--vh-magenta); color: var(--vh-head); }
.vh-root .vh-card[data-type="camper"] .vh-btn, .vh-root .vh-card[data-type="camper"] .vh-btn:hover, .vh-root .vh-card[data-type="camper"] .vh-btn:focus { background: var(--vh-violet); color: #fff; }
.vh-root .vh-btn-disabled, .vh-root .vh-btn-disabled:hover, .vh-root .vh-btn:disabled, .vh-root .vh-card[data-type="camper"] .vh-btn:disabled { background: #EBDCEF; color: #9b8aa3; }
.vh-root .vh-venue-nav:hover { background: var(--vh-head); color: #fff; }
.vh-root .vh-chip, .vh-root .vh-chip:hover, .vh-root .vh-chip:focus { background: var(--vh-sunk); color: var(--vh-ink); }
.vh-root .vh-chip:hover { border-color: var(--vh-lav-line); }
.vh-root .vh-chip[aria-pressed="true"], .vh-root .vh-chip[aria-pressed="true"]:hover, .vh-root .vh-chip[aria-pressed="true"]:focus { background: var(--vh-head); color: #fff; border-color: var(--vh-head); }
.vh-root .vh-opt, .vh-root .vh-opt:hover, .vh-root .vh-opt:focus { background: var(--vh-sunk); color: var(--vh-ink); }
.vh-root .vh-opt[aria-checked="true"], .vh-root .vh-opt[aria-pressed="true"], .vh-root .vh-opt[aria-checked="true"]:hover, .vh-root .vh-opt[aria-pressed="true"]:hover, .vh-root .vh-opt[aria-checked="true"]:focus, .vh-root .vh-opt[aria-pressed="true"]:focus { background: var(--vh-lav); }
.vh-root .vh-tab, .vh-root .vh-tab:hover, .vh-root .vh-tab:focus { background: transparent; color: var(--vh-ink); }
.vh-root .vh-tab[aria-selected="true"], .vh-root .vh-tab[aria-selected="true"]:hover, .vh-root .vh-tab[aria-selected="true"]:focus { background: #fff; color: var(--vh-head); }
.vh-root .vh-cta, .vh-root .vh-cta:hover, .vh-root .vh-cta:focus { background: var(--vh-head); color: #fff; }
.vh-root .vh-nudge button, .vh-root .vh-nudge button:hover, .vh-root .vh-nudge button:focus { background: var(--vh-head); color: #fff; }
.vh-home h1, .vh-home h2, .vh-home h3, .vh-home h4, .vh-root h2, .vh-root h3, .vh-root h4 { text-transform: none; letter-spacing: normal; }
.vh-photo-copy h3, .vh-photo-copy p { color: #fff; }
.vh-hero-title { color: #fff; }

@media (prefers-reduced-motion: reduce) { .vh-drawer, .vh-scrim, .vh-card, .vh-opt { transition: none !important; } }

/* ─────────────── responsive (baseline — mobile design to follow) ─────────────── */
@media (max-width: 1100px) {
  .vh-hero { padding: 140px 24px 0; }
  .vh-hero-title { font-size: 36px; }
  .vh-hero-meta { font-size: 18px; }
  .vh-sticker, .vh-sticker-img { transform: scale(.7); transform-origin: bottom right; right: 24px; }
  .vh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-tickets, .vh-block { padding-left: 24px; padding-right: 24px; }
  .vh-perks { padding: 0 24px; }
  .vh-perks-list { flex-wrap: wrap; justify-content: center; padding: 18px 24px; gap: 16px 28px; }
  .vh-perks-list li span { white-space: normal; }
  .vh-venue { padding: 0 52px; }
  .vh-venue-slide { flex-basis: calc((100% - var(--vh-gap)) / 2); }
  .vh-tickets { border-radius: 64px 64px 0 0; }
}
@media (max-width: 720px) {
  .vh-hero-frame { padding: 28px 22px; min-height: 380px; }
  .vh-hero { padding-top: 120px; }
  .vh-hero-title { font-size: 30px; }
  .vh-hero-meta { font-size: 16px; gap: 12px; }
  .vh-sticker, .vh-sticker-img { transform: scale(.5); transform-origin: top right; right: 12px; top: 12px; bottom: auto; }
  .vh-grid, .vh-two { grid-template-columns: 1fr; }
  .vh-venue { padding: 0 52px; --vh-gap: 14px; }
  .vh-venue-slide { flex-basis: 100%; }
  .vh-card-name { font-size: 24px; }
  .vh-grid { gap: 24px; }
  .vh-filter { flex-wrap: wrap; justify-content: center; border-radius: 28px; }
  .vh-filter-wrap { top: 72px; }
  .vh-nature-head { flex-direction: column; align-items: flex-start; }
  .vh-opts-ws { grid-template-columns: 1fr; }
  .vh-perks-list { justify-content: flex-start; }
}