/* ==========================================================================
   REGARDO — Customer Experience
   Personality: editorial, image-led, emotional, trustworthy.
   Serif display + generous rhythm + immersive imagery.
   ========================================================================== */

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.site-header.is-stuck { box-shadow: var(--sh-2); }

/* Transparent-over-hero variant used on the homepage */
.site-header--over {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
}
.site-header--over .brand__word,
.site-header--over .nav__link,
.site-header--over .header__action { color: var(--text-on-dark); }
.site-header--over .brand__mark { color: var(--text-on-dark); }
.site-header--over .nav__link:hover { color: #fff; }
.site-header--over .header__action:hover { background: rgba(255,255,255,.14); }
.site-header--over .btn--ghost { color: rgba(255,255,255,.86); }
.site-header--over .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-header--over .header__cta,
.site-header--over .btn--primary { background: #fff; color: var(--ev-900); box-shadow: var(--sh-3); }
.site-header--over .btn--primary:hover { background: var(--n-100); }
.site-header--over.is-stuck {
  position: fixed; background: var(--surface); border-bottom-color: var(--border-subtle);
  box-shadow: var(--sh-2);
}
.site-header--over.is-stuck .brand__word,
.site-header--over.is-stuck .brand__mark,
.site-header--over.is-stuck .nav__link,
.site-header--over.is-stuck .header__action { color: var(--text); }
.site-header--over.is-stuck .nav__link { color: var(--text-secondary); }
.site-header--over.is-stuck .header__cta,
.site-header--over.is-stuck .btn--primary { background: var(--brand); color: var(--brand-on); box-shadow: var(--sh-1); }
.site-header--over.is-stuck .btn--ghost { color: var(--text-secondary); }

.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-8);
}


/* ---- Primary nav + mega menu -------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding-inline: var(--s-3);
  font-size: var(--t-body-s); font-weight: var(--w-medium);
  color: var(--text-secondary); border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-expanded="true"] { color: var(--text); }
.nav__link svg { width: 13px; height: 13px; opacity: .55; transition: transform var(--d-fast) var(--ease-out); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item { position: relative; }

.mega {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: var(--mega-w, 620px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  padding: var(--s-5);
  opacity: 0; transform: translateY(-6px);
  pointer-events: none; visibility: hidden;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), visibility var(--d-base);
  display: grid; gap: var(--s-5);
}
.mega.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.mega--split { grid-template-columns: 1fr 232px; }
.mega--wide { --mega-w: 760px; }
.mega__cols { display: grid; grid-template-columns: repeat(var(--mc, 2), minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.mega__group-title {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); font-weight: var(--w-bold); margin-bottom: var(--s-3);
}
.mega__link {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-2) var(--s-2); margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-sm);
  transition: background-color var(--d-fast) var(--ease-out);
}
.mega__link:hover { background: var(--n-50); }
.mega__link-title { font-size: var(--t-body-s); font-weight: var(--w-semibold); color: var(--text); }
.mega__link-desc { font-size: var(--t-caption); color: var(--text-muted); margin-top: 1px; }
.mega__feature {
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  display: block; min-height: 200px;
}
.mega__feature .ph { height: 100%; border-radius: 0; }
.mega__feature-copy { position: absolute; inset: auto 0 0 0; padding: var(--s-4); color: #fff; }

.header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.header__action {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-secondary);
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.header__action:hover { background: var(--n-100); color: var(--text); }
.header__action svg { width: 19px; height: 19px; }
.header__cta { flex: none; }

/* Compact search that appears in the header once the hero scrolls away */
.header-search {
  display: none; place-items: center;
  width: 40px; height: 40px; padding: 0; flex: none;
  margin-left: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 50%; box-shadow: var(--sh-1);
  transition: box-shadow var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  cursor: pointer;
}
.header-search:hover { box-shadow: var(--sh-2); background: var(--ev-800); border-color: var(--ev-800); }
.header-search:hover > svg { color: #fff; }
.header-search.is-visible { display: grid; }
/* One element in the right-hand cluster claims the free space; the rest sit
   next to it. The search icon takes that job when it is showing, otherwise the
   city chip does, so nothing drifts into the middle of the header. */
.header-search.is-visible ~ .city-chip,
.header-search.is-visible ~ .header__actions { margin-left: var(--s-2); }
.city-chip { margin-left: auto; }
.city-chip + .header__actions { margin-left: var(--s-2); }
/* The pill's label segments are kept in the markup for assistive text only —
   every interaction happens in the search overlay, so the header shows one icon. */
.header-search__seg, .header-search__div, .header-search__go { display: none; }
.header-search > svg { width: 18px; height: 18px; color: var(--text-muted); }

@media (max-width: 1023.98px) {
  .header__inner { gap: var(--s-4); }
}

/* ==========================================================================
   MOBILE HEADER + DRAWER + BOTTOM NAV
   These are designed for mobile, not collapsed from desktop.
   ========================================================================== */
.mobile-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--surface); border-bottom: 1px solid var(--border-subtle);
}
.mobile-header__inner { height: 56px; display: flex; align-items: center; gap: var(--s-3); }
.mobile-header--over { background: transparent; border-bottom-color: transparent; position: fixed; left: 0; right: 0; }
.mobile-header--over .header__action, .mobile-header--over .brand__word, .mobile-header--over .brand__mark { color: var(--text-on-dark); }
.mobile-header.is-stuck { box-shadow: var(--sh-2); }

/* Mobile sticky search bar on discovery pages */
.msearch {
  display: flex; align-items: center; gap: var(--s-3);
  height: 46px; padding-inline: var(--s-4);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-full); box-shadow: var(--sh-2);
  width: 100%; text-align: left;
}
.msearch svg { width: 17px; height: 17px; color: var(--ev-700); flex: none; }
.msearch__label { font-size: var(--t-meta); font-weight: var(--w-semibold); color: var(--text); }
.msearch__sub { font-size: var(--t-caption); color: var(--text-muted); }

.drawer {
  /* The shared .scrim sits at --z-panel (90), above --z-drawer (80). Stacked
     below it, the drawer was painted *through* the scrim's tint and 2px
     backdrop-filter — the menu came out dimmed and blurred along with the page
     behind it, and the scrim also swallowed every click meant for the links.
     Same trap the modal dialog hit; here the drawer is lifted above the scrim
     instead, staying below --z-modal (100) so a dialog still wins. */
  position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-panel) + 1);
  width: min(340px, 88vw);
  background: var(--surface); box-shadow: var(--sh-5);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--d-panel) var(--ease-out);
}
.drawer.is-open { transform: none; }
.drawer__head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-3); }
.drawer__foot { padding: var(--s-4) var(--s-5) max(var(--s-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); display: grid; gap: var(--s-3); }
.drawer__section + .drawer__section { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border-subtle); }
.drawer__label { padding-inline: var(--s-3); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: var(--w-bold); margin-bottom: var(--s-2); }
.drawer__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md);
  font-size: var(--t-body-s); font-weight: var(--w-medium); color: var(--text);
}
.drawer__link:hover, .drawer__link.is-active { background: var(--ev-50); color: var(--ev-800); }
.drawer__link svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.drawer__link.is-active svg { color: var(--ev-700); }
.drawer__link-arrow { margin-left: auto; color: var(--text-faint); }

.mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.6);
  border-top: 1px solid var(--border);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.mobile-nav__item {
  display: grid; place-items: center; gap: 3px; align-content: center;
  font-size: var(--t-micro); font-weight: var(--w-semibold);
  color: var(--text-muted); position: relative;
  transition: color var(--d-fast) var(--ease-out);
}
.mobile-nav__item svg { width: 21px; height: 21px; }
.mobile-nav__item.is-active { color: var(--ev-800); }
.mobile-nav__item.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2.5px; background: var(--ev-800); border-radius: 0 0 3px 3px;
}
.mobile-nav__badge {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  min-width: 15px; height: 15px; padding-inline: 4px;
  background: var(--clay-500); color: #fff;
  font-size: 9px; font-weight: var(--w-bold);
  border-radius: var(--r-full); display: grid; place-items: center;
  border: 1.5px solid var(--surface);
}
.has-mobile-nav { padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .mobile-nav { display: none; } .has-mobile-nav { padding-bottom: 0; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-14);
  overflow: hidden;
  background: var(--ev-950);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .ph { width: 100%; height: 100%; border-radius: 0; }
.hero__media img { transform: scale(1.04); animation: hero-drift 22s var(--ease-in-out) infinite alternate; }
@keyframes hero-drift { to { transform: scale(1.11) translate3d(-1.2%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; transform: none; } }

/* Hero slider — several frames sharing one veil/copy/console, crossfading
   into each other; the homepage's hero is the only place this is used. */
.hero__track { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s var(--ease-in-out);
}
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide .ph { width: 100%; height: 100%; border-radius: 0; }
.hero__slide img { transform: scale(1.04); animation: hero-drift 22s var(--ease-in-out) infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide img { animation: none; transform: none; }
  .hero__slide { transition: opacity .4s linear; }
}

/* The headline/subtitle swap with the slide — a quick fade, not a jump. */
.hero__title, .hero__sub { transition: opacity .25s ease, transform .25s ease; }
.hero__title.is-swapping, .hero__sub.is-swapping { opacity: 0; transform: translateY(6px); }

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(4,27,25,.92) 0%, rgba(4,27,25,.55) 42%, rgba(4,27,25,.30) 72%, rgba(4,27,25,.52) 100%),
    linear-gradient(105deg, rgba(4,27,25,.62) 0%, rgba(4,27,25,.12) 58%);
}
.hero__copy { max-width: 660px; color: var(--text-on-dark); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  font-size: var(--t-micro); font-weight: var(--w-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: rgba(255,255,255,.78);
  padding: 6px var(--s-3); border-radius: var(--r-full);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}
.hero__eyebrow svg { width: 14px; height: 14px; }
@media (max-width: 419.98px) { .hero__eyebrow { white-space: normal; } }
.hero__title {
  font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: var(--t-display-xl); line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: #fff; margin-top: var(--s-5);
}
.hero__title em { font-style: italic; color: var(--clay-200); }
.hero__sub {
  font-size: var(--t-body-l); line-height: var(--lh-relaxed);
  color: rgba(255,255,255,.80); margin-top: var(--s-5); max-width: 46ch;
}
.hero__trust {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__trust-item { color: rgba(255,255,255,.72); font-size: var(--t-meta); }
.hero__trust-num { display: block; font-size: var(--t-h2); font-weight: var(--w-bold); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Compact variant — inner listing pages (Venues, Cities, Services, Offers).
   Same treatment as the homepage hero, just short enough to read as a page
   banner rather than a full first screen, and without the trust strip. */
.hero--compact {
  min-height: auto;
  padding-top: calc(var(--header-h) + var(--s-10));
  padding-bottom: var(--s-10);
}
.hero--compact .hero__title { font-size: var(--t-display-l); margin-top: var(--s-4); }
.hero--compact .hero__sub { font-size: var(--t-body); }
.crumbs--on-dark, .crumbs--on-dark a { color: rgba(255,255,255,.68); }
.crumbs--on-dark a:hover { color: #fff; }
.crumbs--on-dark .crumbs__sep { color: rgba(255,255,255,.32); }
.crumbs--on-dark [aria-current] { color: #fff; font-weight: var(--w-medium); }
@media (max-width: 767.98px) {
  .hero--compact { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-8); }
}

/* ==========================================================================
   SEARCH CONSOLE — the product's centrepiece control, not a form
   ========================================================================== */
.console {
  position: relative; z-index: 3;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 70px -24px rgba(4,27,25,.55), var(--sh-2);
  padding: 7px;
  margin-top: var(--s-10);
  max-width: 1000px;
}
.console__tabs {
  display: flex; gap: 2px; padding: 0 var(--s-2) var(--s-1);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.console__tabs::-webkit-scrollbar { display: none; }
.console__tab { flex: none; }
.console__tab {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  font-size: var(--t-meta); font-weight: var(--w-semibold); color: var(--text-muted);
  transition: all var(--d-fast) var(--ease-out);
}
.console__tab.is-active { color: var(--ev-800); background: var(--ev-50); }
.console__row {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr .9fr auto;
  align-items: stretch;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.console__cell {
  position: relative; padding: var(--s-3) var(--s-4);
  border-left: 1px solid var(--border-subtle);
  min-width: 0; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out);
}
.console__cell:first-child { border-left: 0; }
.console__cell:hover { background: var(--n-25); }
.console__cell:focus-within { background: var(--ev-50); }
.console__k {
  font-size: var(--t-micro); font-weight: var(--w-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
  display: block; margin-bottom: 3px;
}
.console__v {
  width: 100%; border: 0; outline: 0; background: none; padding: 0;
  font-size: var(--t-body-s); font-weight: var(--w-semibold); color: var(--text);
  text-overflow: ellipsis;
}
.console__v::placeholder { color: var(--text-faint); font-weight: var(--w-regular); }
.console__submit { padding: 5px; display: grid; }
.console__submit .btn { height: 100%; min-height: 54px; padding-inline: var(--s-6); }

/* Autocomplete suggestions under the location cell */
.console__pop {
  position: absolute; top: calc(100% + 6px); left: -1px; z-index: 30;
  min-width: 300px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: var(--s-2);
  display: none;
}
.console__cell.is-open .console__pop { display: block; }
.console__pop-item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); text-align: left;
  font-size: var(--t-body-s);
}
.console__pop-item:hover, .console__pop-item[aria-selected="true"] { background: var(--n-50); }
.console__pop-item svg { width: 16px; height: 16px; color: var(--text-faint); flex: none; }
.console__pop-sub { font-size: var(--t-caption); color: var(--text-muted); }

.console__quick { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-1); flex-wrap: wrap; }
.console__quick-label { font-size: var(--t-caption); color: var(--text-muted); }
.console__quick .chip { height: 28px; font-size: var(--t-caption); }
@media (hover: none) { .console__quick .chip { height: 36px; font-size: var(--t-meta); } }

@media (max-width: 1023.98px) {
  .console__row { grid-template-columns: 1fr 1fr; }
  .console__cell:nth-child(3) { border-left: 0; }
  .console__cell:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .console__submit { grid-column: 1 / -1; border-top: 1px solid var(--border-subtle); }
  .console__submit .btn { min-height: 48px; }
}
@media (max-width: 767.98px) {
  .console { margin-top: var(--s-8); padding: 6px; }
  .console__row { grid-template-columns: 1fr; }
  .console__cell { border-left: 0; }
  .console__cell + .console__cell { border-top: 1px solid var(--border-subtle); }
  .console__pop { position: fixed; inset: auto var(--s-4) var(--s-4) var(--s-4); min-width: 0; }
}

/* ==========================================================================
   VENUE CARD — the most important component in the customer app
   ========================================================================== */
.vcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  min-width: 0;
}
.vcard__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--n-100);
}
.vcard__media .ph { border-radius: 0; }
.vcard:hover .vcard__media img { transform: scale(1.045); }

/* Swipeable gallery inside the card */
.vcard__slides {
  display: flex; width: 100%; height: 100%;
  scroll-snap-type: x mandatory; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.vcard__slides::-webkit-scrollbar { display: none; }
.vcard__slide { flex: 0 0 100%; scroll-snap-align: center; }
.vcard__slide .ph { height: 100%; }
.vcard__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--ev-900);
  display: grid; place-items: center; box-shadow: var(--sh-2);
  opacity: 0; transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.vcard__nav svg { width: 15px; height: 15px; }
.vcard__nav--prev { left: var(--s-3); }
.vcard__nav--next { right: var(--s-3); }
.vcard:hover .vcard__nav, .vcard:focus-within .vcard__nav { opacity: 1; }
.vcard__nav:hover { transform: translateY(-50%) scale(1.08); }
.vcard__nav[disabled] { opacity: 0 !important; }
@media (hover: none) { .vcard__nav { display: none; } }

.vcard__dots {
  position: absolute; left: 0; right: 0; bottom: var(--s-3);
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.vcard__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: all var(--d-fast) var(--ease-out);
}
.vcard__dot.is-active { background: #fff; width: 16px; border-radius: var(--r-full); }

.vcard__top {
  position: absolute; inset: var(--s-3) var(--s-3) auto var(--s-3);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2);
  pointer-events: none;
}
.vcard__top > * { pointer-events: auto; }
.vcard__tags { display: flex; flex-wrap: wrap; gap: 5px; max-width: 78%; }

.vcard__wish {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--n-700);
  box-shadow: var(--sh-2);
  transition: all var(--d-fast) var(--ease-out);
}
.vcard__wish svg { width: 17px; height: 17px; transition: transform var(--d-fast) var(--ease-spring); }
.vcard__wish:hover { background: #fff; transform: scale(1.06); }
.vcard__wish[aria-pressed="true"] { color: var(--clay-500); }
.vcard__wish[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.1); }

.vcard__imgcount {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--s-2); border-radius: var(--r-sm);
  background: rgba(18,17,16,.60); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--t-micro); font-weight: var(--w-semibold);
}
.vcard__imgcount svg { width: 12px; height: 12px; }

.vcard__body { padding: var(--s-4) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.vcard__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.vcard__name {
  font-size: var(--t-h4); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight); color: var(--text);
  line-height: 1.3;
}
.vcard:hover .vcard__name { color: var(--ev-800); }
.vcard__loc { font-size: var(--t-meta); color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.vcard__loc svg { width: 13px; height: 13px; flex: none; }

.vcard__facts {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--t-meta); color: var(--text-secondary);
}
.vcard__fact { display: inline-flex; align-items: center; gap: 5px; }
.vcard__fact svg { width: 14px; height: 14px; color: var(--text-faint); }

.vcard__amenities { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.vcard__amenity {
  font-size: var(--t-caption); color: var(--text-muted);
  background: var(--n-50); border: 1px solid var(--border-subtle);
  padding: 2px var(--s-2); border-radius: var(--r-xs);
}

.vcard__foot {
  margin-top: auto; padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
}
.vcard__price-label { font-size: var(--t-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--w-bold); }
.vcard__price {
  font-size: var(--t-h3); font-weight: var(--w-bold);
  letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.vcard__price-unit { font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--text-muted); }
.vcard__avail { font-size: var(--t-caption); }

/* Whole card is a link; the wish button escapes it */
.vcard__link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.vcard__link:focus-visible { box-shadow: var(--sh-focus-card); }
.vcard__top, .vcard__nav, .vcard__dots, .vcard__imgcount, .vcard__cta { z-index: 2; position: relative; }
.vcard__top { position: absolute; }
.vcard__nav { position: absolute; }
.vcard__dots { position: absolute; }
.vcard__imgcount { position: absolute; }

/* Horizontal variant — search results on tablet, wishlist, compare */
.vcard--row { flex-direction: row; gap: var(--s-5); align-items: stretch; }
.vcard--row .vcard__media { flex: 0 0 clamp(200px, 32%, 300px); }
.vcard--row .vcard__body { padding: var(--s-1) var(--s-4) var(--s-1) 0; }
@media (max-width: 767.98px) { .vcard--row { flex-direction: column; gap: 0; } .vcard--row .vcard__media { flex: none; } }

/* Editorial feature card — used for Premium Collection & Featured */
.vcard--feature .vcard__media { border-radius: var(--r-xl); aspect-ratio: 3 / 4; }
.vcard--feature .vcard__overlay {
  position: absolute; inset: auto 0 0 0; padding: var(--s-6);
  color: #fff; z-index: 2;
}
.vcard--feature .vcard__name, .vcard--feature:hover .vcard__name { color: #fff; font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-regular); }
.vcard--feature .vcard__loc, .vcard--feature .vcard__facts { color: rgba(255,255,255,.80); }
.vcard--feature .vcard__fact svg { color: rgba(255,255,255,.6); }

/* ==========================================================================
   CATEGORY / CITY / SERVICE TILES
   ========================================================================== */
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--n-100);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.tile:hover { box-shadow: var(--sh-3); }
.tile:hover .ph img { transform: scale(1.06); }
.tile { height: 100%; }
.tile > .ph { height: 100%; }
.tile__copy {
  position: absolute; inset: auto 0 0 0; padding: var(--s-5);
  color: #fff; z-index: 2; display: flex; flex-direction: column; gap: 3px;
}
.tile__title {
  display: block; font-size: var(--t-h4); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight); line-height: 1.25;
}
.tile__meta {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: var(--t-caption); color: rgba(255,255,255,.78); line-height: 1.45;
}
.tile--tall .ph { aspect-ratio: 3 / 4; }
.tile--wide .ph { aspect-ratio: 16 / 10; }

/* Event category chips-with-icon strip (no imagery needed) */
.evt {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-3); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  text-align: center; transition: all var(--d-base) var(--ease-out);
}
.evt:hover { border-color: var(--ev-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
.evt__icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--ev-50); color: var(--ev-700); border: 1px solid var(--ev-100);
}
.evt__icon svg { width: 22px; height: 22px; }
.evt__name { font-size: var(--t-body-s); font-weight: var(--w-semibold); }
.evt__count { font-size: var(--t-caption); color: var(--text-muted); }

/* ==========================================================================
   HOW IT WORKS / TRUST / STATS
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); counter-reset: step; }
.steps__item { position: relative; padding-top: var(--s-6); border-top: 2px solid var(--border); counter-increment: step; }
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: calc(var(--s-6) * -1 - 3px); left: 0;
  font-family: var(--font-mono); font-size: var(--t-caption);
  font-weight: var(--w-bold); color: var(--clay-500);
  background: var(--bg-page); padding-right: var(--s-3);
}
.steps__item.is-lit { border-top-color: var(--ev-700); }
.steps__title { font-size: var(--t-h4); font-weight: var(--w-semibold); }
.steps__text { font-size: var(--t-meta); color: var(--text-secondary); margin-top: var(--s-2); line-height: var(--lh-relaxed); }
@media (max-width: 767.98px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (max-width: 439.98px) { .steps { grid-template-columns: 1fr; } }

.trust-band { background: var(--ev-950); color: var(--text-on-dark); }
.trust-band .display-m, .trust-band .h2 { color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.trust-item { padding-left: var(--s-5); border-left: 1px solid rgba(255,255,255,.14); }
.trust-item__title { font-size: var(--t-body-s); font-weight: var(--w-semibold); color: #fff; }
.trust-item__text { font-size: var(--t-meta); color: var(--text-on-dark-dim); margin-top: var(--s-2); line-height: var(--lh-relaxed); }
.trust-item__icon { width: 20px; height: 20px; color: var(--clay-300); margin-bottom: var(--s-3); }
@media (max-width: 767.98px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (max-width: 439.98px) { .trust-grid { grid-template-columns: 1fr; } }

/* Asymmetric editorial split — a lead column with a narrower companion rail. */
.split-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: start;
}
@media (max-width: 1023.98px) { .split-lead { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); } }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.review { padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.review__head { display: flex; gap: var(--s-3); align-items: center; }
.review__name { font-size: var(--t-body-s); font-weight: var(--w-semibold); }
.review__meta { font-size: var(--t-caption); color: var(--text-muted); }
.review__quote { margin-top: var(--s-4); font-size: var(--t-body-s); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.review__venue {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-caption); color: var(--text-muted);
}
.review__venue .ph { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; }
.review__aspects { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.review--editorial {
  background: none; border: 0; border-left: 2px solid var(--clay-300);
  border-radius: 0; padding: 0 0 0 var(--s-5);
}
.review--editorial .review__quote {
  font-family: var(--font-display); font-size: 1.375rem; line-height: 1.42;
  color: var(--text); letter-spacing: var(--tracking-tight); margin-top: 0;
}

.rating-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--s-8); align-items: center; }
.rating-summary__score { text-align: center; }
.rating-summary__num { font-size: 3.25rem; font-weight: var(--w-bold); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rating-summary__bars { display: grid; gap: var(--s-2); }
.rating-summary__bar { display: grid; grid-template-columns: 46px 1fr 40px; align-items: center; gap: var(--s-3); font-size: var(--t-caption); color: var(--text-muted); }
@media (max-width: 575.98px) { .rating-summary { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ==========================================================================
   OFFERS
   ========================================================================== */
.offer {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: var(--s-5);
  background: linear-gradient(140deg, var(--ev-800), var(--ev-950));
  color: var(--text-on-dark);
  border: 1px solid rgba(255,255,255,.08);
}
.offer--clay { background: linear-gradient(140deg, var(--clay-600), var(--clay-800)); }
.offer--sand { background: linear-gradient(140deg, #7A6A52, #4A4032); }
.offer::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.offer__code {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: var(--w-bold);
  padding: 5px var(--s-3); border-radius: var(--r-sm);
  background: rgba(255,255,255,.14); border: 1px dashed rgba(255,255,255,.34);
  letter-spacing: .04em;
}
.offer__title { font-size: var(--t-h3); font-weight: var(--w-semibold); margin-top: var(--s-3); color: #fff; letter-spacing: var(--tracking-tight); }
.offer__text { font-size: var(--t-meta); color: var(--text-on-dark-dim); margin-top: var(--s-2); }
.offer__foot { margin-top: var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-2xl);
  background: var(--ev-900); color: var(--text-on-dark);
  padding: var(--s-16) var(--s-12);
}
.cta-band__media { position: absolute; inset: 0; z-index: -2; opacity: .30; }
.cta-band__media .ph { height: 100%; border-radius: 0; }
.cta-band__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(7,42,39,.96) 20%, rgba(7,42,39,.62) 100%); }
.cta-band__title { font-family: var(--font-display); font-size: var(--t-display-m); color: #fff; line-height: 1.08; letter-spacing: var(--tracking-display); }
.cta-band__text { color: var(--text-on-dark-dim); font-size: var(--t-body-l); margin-top: var(--s-4); max-width: 48ch; line-height: var(--lh-relaxed); }
.cta-band__actions { margin-top: var(--s-8); display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 767.98px) { .cta-band { padding: var(--s-10) var(--s-5); border-radius: var(--r-xl); } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ev-950); color: var(--text-on-dark-dim); padding-block: var(--s-16) var(--s-8); }
.footer__top { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-12); padding-bottom: var(--s-10); border-bottom: 1px solid rgba(255,255,255,.10); }
.footer__pitch { font-size: var(--t-meta); line-height: var(--lh-relaxed); margin-top: var(--s-4); max-width: 34ch; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.footer__title { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-bold); color: rgba(255,255,255,.55); margin-bottom: var(--s-4); }
.footer__list { display: grid; gap: var(--s-3); }
.footer__link { font-size: var(--t-meta); color: rgba(255,255,255,.72); transition: color var(--d-fast) var(--ease-out); }
.footer__link:hover { color: #fff; }
.footer__mid { padding-block: var(--s-8); border-bottom: 1px solid rgba(255,255,255,.10); display: grid; grid-template-columns: 1fr auto; gap: var(--s-8); align-items: center; }
.footer__cities { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer__city { font-size: var(--t-caption); color: rgba(255,255,255,.62); }
.footer__city:hover { color: #fff; }
.newsletter { display: flex; gap: var(--s-2); max-width: 400px; }
.newsletter .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.newsletter .input::placeholder { color: rgba(255,255,255,.42); }
.newsletter .input:focus { border-color: var(--ev-400); box-shadow: 0 0 0 3px rgba(91,152,144,.24); background: rgba(255,255,255,.10); }
.footer__bottom { padding-top: var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-caption); }
.footer__legal { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.footer__social { display: flex; gap: var(--s-2); }
.footer__social a {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.12);
  transition: all var(--d-fast) var(--ease-out);
}
.footer__social a:hover { background: rgba(255,255,255,.08); color: #fff; }
.footer__social svg { width: 16px; height: 16px; }
@media (max-width: 1023.98px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__mid { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) { .footer__cols { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ==========================================================================
   SEARCH RESULTS WORKSPACE
   ========================================================================== */
.results-layout { display: grid; grid-template-columns: 292px 1fr; gap: var(--s-8); align-items: start; }
@media (max-width: 1023.98px) { .results-layout { grid-template-columns: 1fr; gap: var(--s-5); } }

.filter-rail {
  position: sticky; top: calc(var(--header-h) + var(--s-5));
  max-height: calc(100vh - var(--header-h) - var(--s-10));
  overflow-y: auto; padding-right: var(--s-2);
}
.filter-group { padding-block: var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.filter-group:first-child { padding-top: 0; }
.filter-group__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; font-size: var(--t-body-s); font-weight: var(--w-semibold);
  margin-bottom: var(--s-3); cursor: pointer;
}
.filter-group__head svg { width: 15px; height: 15px; color: var(--text-faint); transition: transform var(--d-fast) var(--ease-out); }
.filter-group.is-collapsed .filter-group__head svg { transform: rotate(-90deg); }
.filter-group.is-collapsed .filter-group__body { display: none; }
.filter-group__body { display: grid; gap: var(--s-2); }
.filter-more { font-size: var(--t-meta); font-weight: var(--w-semibold); color: var(--ev-700); margin-top: var(--s-2); }

.range { display: grid; gap: var(--s-3); }
.range__inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2); align-items: center; }
.range__track { position: relative; height: 3px; background: var(--n-200); border-radius: var(--r-full); margin-block: var(--s-3); }
.range__fill { position: absolute; height: 100%; background: var(--ev-700); border-radius: inherit; }
.range__histogram { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.range__bar { flex: 1; background: var(--n-200); border-radius: 1px 1px 0 0; min-height: 3px; }
.range__bar.is-in { background: var(--ev-300); }

.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.results-count { font-size: var(--t-meta); color: var(--text-muted); }
.results-count strong { color: var(--text); font-weight: var(--w-semibold); }
.applied-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }

.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
@media (min-width: 1320px) { .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .results-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* Mobile filter bar — full-bleed sticky strip; its inner container supplies the gutter */
.mfilter-bar {
  position: sticky; top: 56px; z-index: var(--z-sticky);
  background: rgba(252,251,249,.96);
  backdrop-filter: blur(10px);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}
.mfilter-bar > .container { display: flex; gap: var(--s-2); align-items: center; }
.mfilter-bar .chip-row { flex: 1; min-width: 0; }

/* ==========================================================================
   VENUE DETAIL
   ========================================================================== */
.vgallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; border-radius: var(--r-xl); overflow: hidden; }
.vgallery__cell { position: relative; overflow: hidden; background: var(--n-100); }
.vgallery__cell:first-child { grid-row: span 2; }
.vgallery__cell .ph { width: 100%; height: 100%; border-radius: 0; }
.vgallery__cell:hover img { transform: scale(1.04); }
.vgallery__more {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding-inline: var(--s-4);
  background: rgba(255,255,255,.95); color: var(--ev-900);
  border-radius: var(--r-md); font-size: var(--t-meta); font-weight: var(--w-semibold);
  box-shadow: var(--sh-3); z-index: 3;
}
.vgallery__actions { position: absolute; top: var(--s-4); right: var(--s-4); display: flex; gap: var(--s-2); z-index: 3; }
@media (max-width: 899.98px) {
  .vgallery { grid-template-columns: 1fr; grid-template-rows: none; border-radius: 0; margin-inline: calc(var(--gutter) * -1); gap: 0;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .vgallery::-webkit-scrollbar { display: none; }
  .vgallery__cell { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
  .vgallery__cell:first-child { grid-row: auto; }
}

.venue-layout { display: grid; grid-template-columns: 1fr 384px; gap: var(--s-10); align-items: start; }
@media (max-width: 1119.98px) { .venue-layout { grid-template-columns: 1fr; gap: var(--s-8); } }

.venue-id { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.venue-id__title { font-family: var(--font-display); font-size: var(--t-display-m); line-height: 1.08; letter-spacing: var(--tracking-display); }
.venue-id__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); font-size: var(--t-meta); color: var(--text-secondary); }

.venue-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.venue-fact { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.venue-fact__k { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: var(--w-bold); }
.venue-fact__v { font-size: var(--t-body-s); font-weight: var(--w-semibold); margin-top: 4px; }
@media (max-width: 767.98px) { .venue-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.venue-nav {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: rgba(252,251,249,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.venue-section { padding-block: var(--s-10); border-bottom: 1px solid var(--border-subtle); scroll-margin-top: calc(var(--header-h) + 60px); }
.venue-section:last-child { border-bottom: 0; }
.venue-section__title { font-size: var(--t-h2); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); margin-bottom: var(--s-5); }

.amenity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
.amenity { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-body-s); color: var(--text-secondary); }
.amenity svg { width: 17px; height: 17px; color: var(--ev-600); flex: none; }
.amenity--off { color: var(--text-faint); text-decoration: line-through; }
.amenity--off svg { color: var(--text-faint); }
@media (max-width: 767.98px) { .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399.98px) { .amenity-grid { grid-template-columns: 1fr; } }

/* Space cards on the venue page */
.space-card { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-5); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.space-card .ph { border-radius: var(--r-md); }
.space-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; }
@media (max-width: 639.98px) { .space-card { grid-template-columns: 1fr; } }

/* Booking panel — the whole aside sticks, so nothing scrolls over the panel */
.book-sticky {
  position: sticky; top: calc(var(--header-h) + var(--s-5));
  display: grid; gap: var(--s-4);
}
.book-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  overflow: hidden;
}
.book-panel__head { padding: var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.book-panel__price { display: flex; align-items: baseline; gap: var(--s-2); }
.book-panel__amount { font-size: 1.75rem; font-weight: var(--w-bold); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.book-panel__unit { font-size: var(--t-meta); color: var(--text-muted); }
.book-panel__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.book-panel__foot { padding: var(--s-5); border-top: 1px solid var(--border-subtle); background: var(--surface-2); }
.book-panel__assure { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-caption); color: var(--text-muted); }
.book-panel__assure svg { width: 14px; height: 14px; color: var(--ev-600); flex: none; }

/* Mobile sticky booking bar */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s-4);
  box-shadow: 0 -4px 20px -6px rgba(31,29,26,.14);
}
.book-bar__price { min-width: 0; }
.book-bar .btn { flex: 1; max-width: 190px; }
@media (min-width: 1120px) { .book-bar { display: none; } }

/* ==========================================================================
   BOOKING CHECKOUT
   ========================================================================== */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-10); align-items: start; }
@media (max-width: 1023.98px) { .checkout-layout { grid-template-columns: 1fr; gap: var(--s-6); } }

.checkout-progress {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: rgba(252,251,249,.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: var(--s-4);
  /* The bar sits directly in <main>, not inside a padded wrapper, so the old
     negative gutter pushed it past both screen edges; its inner .container
     already provides the gutter. */
}
.checkout-step { padding-block: var(--s-8); }
.checkout-step__num { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--clay-500); font-weight: var(--w-bold); }
.checkout-step__title { font-size: var(--t-h2); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); margin-top: var(--s-2); }
.checkout-step__hint { font-size: var(--t-body-s); color: var(--text-secondary); margin-top: var(--s-2); }

.summary-card { position: sticky; top: calc(var(--header-h) + var(--s-16)); }
.summary-card__venue { display: flex; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border-subtle); }
.summary-card__venue .ph { width: 64px; height: 64px; border-radius: var(--r-md); flex: none; }

.hold-timer {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--warn-bg); border: 1px solid var(--warn-br);
  color: var(--warn-fg); font-size: var(--t-meta); font-weight: var(--w-semibold);
}
.hold-timer svg { width: 15px; height: 15px; flex: none; }
.hold-timer__clock { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.hold-timer.is-urgent { background: var(--err-bg); border-color: var(--err-br); color: var(--err-fg); animation: pulse-soft 1.6s ease-in-out infinite; }
@keyframes pulse-soft { 50% { opacity: .72; } }

/* Payment page: form + amount rail */
.pay-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-8); align-items: start;
}
@media (max-width: 899.98px) {
  .pay-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .pay-layout > aside { order: -1; }
}

/* Slot picker */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
.slot {
  position: relative; padding: var(--s-4); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); text-align: left;
  transition: all var(--d-fast) var(--ease-out);
}
.slot:hover:not(.is-unavailable) { border-color: var(--ev-400); }
.slot input { position: absolute; opacity: 0; }
.slot:has(input:checked) { border-color: var(--ev-700); background: var(--ev-50); box-shadow: 0 0 0 1px var(--ev-700); }
.slot.is-unavailable { opacity: .5; cursor: not-allowed; background: var(--n-50); }
.slot__name { font-size: var(--t-body-s); font-weight: var(--w-semibold); }
.slot__time { font-size: var(--t-caption); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.slot__price { font-size: var(--t-meta); font-weight: var(--w-semibold); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   COMPARE TABLE
   ========================================================================== */
.compare-wrap { overflow-x: auto; }
.compare { border-collapse: separate; border-spacing: 0; min-width: 720px; width: 100%; font-size: var(--t-body-s); }
.compare th, .compare td { padding: var(--s-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; text-align: left; }
.compare thead th { position: sticky; top: var(--header-h); background: var(--bg-page); z-index: 2; }
.compare tbody th {
  position: sticky; left: 0; background: var(--bg-page); z-index: 1;
  font-size: var(--t-meta); font-weight: var(--w-semibold); color: var(--text-muted);
  width: 168px; white-space: nowrap;
}
.compare tr:hover td { background: var(--n-25); }
.compare .is-best { color: var(--ok-fg); font-weight: var(--w-semibold); }


/* ==========================================================================
   CUSTOMER ACCOUNT AREA — quiet, list-led; NOT the owner dashboard
   ========================================================================== */
.account-layout { display: grid; grid-template-columns: 232px 1fr; gap: var(--s-10); align-items: start; }
@media (max-width: 899.98px) { .account-layout { grid-template-columns: 1fr; gap: var(--s-5); } }
.account-nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: 2px; }
.account-nav__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md);
  font-size: var(--t-body-s); font-weight: var(--w-medium); color: var(--text-secondary);
  transition: all var(--d-fast) var(--ease-out);
}
.account-nav__link:hover { background: var(--n-100); color: var(--text); }
.account-nav__link.is-active { background: var(--ev-50); color: var(--ev-800); font-weight: var(--w-semibold); }
.account-nav__link svg { width: 17px; height: 17px; flex: none; color: currentColor; opacity: .8; }
.account-nav__count { margin-left: auto; font-size: var(--t-caption); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Booking row on customer bookings list — image-led, not a table */
.bk-row {
  display: grid; grid-template-columns: 132px 1fr auto; gap: var(--s-5);
  padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.bk-row:hover { box-shadow: var(--sh-2); border-color: var(--border-strong); }
.bk-row .ph { border-radius: var(--r-md); }
.bk-row__id { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--text-muted); }
.bk-row__title { font-size: var(--t-h4); font-weight: var(--w-semibold); margin-top: 3px; }
.bk-row__facts { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); font-size: var(--t-meta); color: var(--text-secondary); }
.bk-row__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
@media (max-width: 767.98px) {
  .bk-row { grid-template-columns: 88px 1fr; }
  .bk-row__right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); }
}

/* Invoice document */
.invoice { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-10); max-width: 800px; margin-inline: auto; }
.invoice__head { display: flex; justify-content: space-between; gap: var(--s-8); padding-bottom: var(--s-8); border-bottom: 2px solid var(--ev-900); flex-wrap: wrap; }
.invoice__no { font-family: var(--font-mono); font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: -0.01em; }
.invoice__parties { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); padding-block: var(--s-8); }
.invoice__table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.invoice__table th { text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--border); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.invoice__table td { padding: var(--s-3) 0; border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 767.98px) { .invoice { padding: var(--s-5); } .invoice__parties { grid-template-columns: 1fr; gap: var(--s-5); } }

/* Reviews carousel — cards keep an even height across the rail */
.rail--reviews { align-items: stretch; }
.rail--reviews > .review { height: 100%; }

/* ==========================================================================
   CITY GATE — the first question the site asks, and the header chip that
   lets a visitor change the answer later
   ========================================================================== */
.city-gate__dialog { overflow: hidden; max-height: min(92vh, 780px); }

/* The opening panel is the visitor's first sight of the brand, so it carries
   the mark and the display face rather than reading as a consent prompt. */
.city-gate__hero {
  position: relative; padding: var(--s-8) var(--s-7) var(--s-7);
  background:
    radial-gradient(120% 100% at 85% -10%, rgba(255,255,255,.10), transparent 60%),
    var(--ev-900);
  color: #fff;
}
.city-gate__mark {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; margin-bottom: var(--s-4);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.city-gate__mark svg { width: 22px; height: 22px; color: #fff; }
.city-gate__title {
  font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: var(--t-display-m); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); color: #fff;
}
.city-gate__sub {
  margin-top: var(--s-3); max-width: 44ch;
  font-size: var(--t-body-s); line-height: var(--lh-relaxed);
  color: rgba(255,255,255,.72);
}
.city-gate__dismiss {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); color: #fff;
  transition: background var(--d-fast) var(--ease-out);
}
.city-gate__dismiss:hover { background: rgba(255,255,255,.20); }
.city-gate__dismiss svg { width: 17px; height: 17px; }

.city-gate__body { padding: var(--s-6) var(--s-7); display: grid; gap: var(--s-5); }

/* The shortcut, weighted as the primary path without shouting */
.city-gate__locate {
  display: flex; align-items: center; gap: var(--s-4); width: 100%;
  padding: var(--s-4); text-align: left;
  border: 1px solid var(--ev-200); border-radius: var(--r-lg);
  background: var(--ev-50); color: var(--text);
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.city-gate__locate:hover { border-color: var(--ev-400); background: var(--ev-100); }
.city-gate__locate:active { transform: scale(.995); }
.city-gate__locate[disabled] { opacity: .65; cursor: default; transform: none; }
.city-gate__locate-icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ev-800); color: #fff;
}
.city-gate__locate-icon svg { width: 19px; height: 19px; }
.city-gate__locate-title { display: block; font-weight: var(--w-semibold); font-size: var(--t-body-s); }
.city-gate__locate-note { display: block; font-size: var(--t-caption); color: var(--text-muted); margin-top: 2px; }
.city-gate__locate-go { flex: none; color: var(--ev-700); display: grid; place-items: center; }
.city-gate__locate-go svg { width: 17px; height: 17px; }
.city-gate__locate:hover .city-gate__locate-go { transform: translateX(2px); }
.city-gate__spin {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2px solid var(--ev-200); border-top-color: var(--ev-700);
  animation: city-spin .7s linear infinite;
}
@keyframes city-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .city-gate__spin { animation-duration: 2s; } }

.city-gate__or {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-micro); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .1em; font-weight: var(--w-bold);
}
.city-gate__or::before, .city-gate__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}

/* The list scrolls; the fade tells you so without a scrollbar shouting it */
.city-gate__scroll {
  position: relative; max-height: 236px; overflow-y: auto;
  margin: 0 calc(var(--s-2) * -1); padding: 2px var(--s-2) var(--s-2);
  overscroll-behavior: contain;
}
.city-gate__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s-2);
}
.city-opt {
  position: relative; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-3); text-align: left; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.city-opt:hover { border-color: var(--ev-400); background: var(--ev-50); box-shadow: var(--sh-1); }
.city-opt:focus-visible { border-color: var(--ev-700); }
.city-opt.is-active { border-color: var(--ev-700); background: var(--ev-50); }
.city-opt__name {
  display: block; font-size: var(--t-body-s); font-weight: var(--w-semibold);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.city-opt__meta {
  display: block; font-size: var(--t-caption); color: var(--text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The venue count is a number, not a sentence — nine rows of "1 venue" is noise */
.city-opt__count {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full);
  display: grid; place-items: center; margin-left: auto;
  font-size: var(--t-micro); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  background: var(--n-100); color: var(--text-muted);
}
.city-opt:hover .city-opt__count { background: var(--ev-100); color: var(--ev-800); }
.city-opt__tick { display: none; flex: none; color: var(--ev-700); }
.city-opt__tick svg { width: 16px; height: 16px; }
.city-opt.is-active .city-opt__count { display: none; }
.city-opt.is-active .city-opt__tick { display: grid; place-items: center; margin-left: auto; }

.city-gate__empty { font-size: var(--t-meta); color: var(--text-muted); padding: var(--s-4) 0; }

.city-gate__foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-7); margin: 0;
  border-top: 1px solid var(--border-subtle); background: var(--n-50);
  font-size: var(--t-caption); color: var(--text-muted);
}
.city-gate__foot svg { width: 14px; height: 14px; color: var(--text-faint); flex: none; }

@media (max-width: 575.98px) {
  .city-gate__hero { padding: var(--s-6) var(--s-5) var(--s-5); }
  .city-gate__body { padding: var(--s-5); gap: var(--s-4); }
  .city-gate__foot { padding: var(--s-3) var(--s-5); }
  .city-gate__scroll { max-height: 45vh; }
}

/* Header chip — always says where the listings are coming from */
.city-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--text);
  font-size: var(--t-meta); font-weight: var(--w-semibold); white-space: nowrap;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.city-chip:hover { border-color: var(--ev-700); background: var(--ev-50); }
.city-chip > svg { width: 15px; height: 15px; color: var(--ev-700); }
.city-chip__caret { width: 13px; height: 13px; color: var(--text-muted); }
@media (max-width: 767.98px) { .city-chip__name { display: none; } .city-chip { padding: 0 var(--s-2); } }

/* Label for the venues a row had to borrow from outside the chosen city */
.section-note {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-4);
  font-size: var(--t-meta); color: var(--text-muted);
}
.section-note::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.section-note svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; }

/* QA-012: the 7-step progress bar overflowed tablets (768-1199px). Keep it on one
   line: the back link truncates, and only the current step keeps its label. */
.checkout-progress .row--between { flex-wrap: nowrap; }
.checkout-progress .row--between > a { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.checkout-progress .row--between > a > span { overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.checkout-progress .row--between > p,
.checkout-progress .hold-timer { flex-shrink: 0; white-space: nowrap; }
.checkout-progress .stepper { min-width: 0; }
@media (max-width: 1199.98px) {
  .checkout-progress .stepper__step:not(.is-current) .stepper__label { display: none; }
  .checkout-progress .row--between > a > span { max-width: 10rem; }
}