/*
 * STOT Shared System
 *
 * This file is the public-facing design reference for future add-ons.
 * Keep new website pages and plugins aligned to these tokens, surfaces,
 * forms, buttons, cards, and spacing rules before adding one-off styles.
 */

:root {
  --stot-color-bg: #F5F0EA;
  --stot-color-surface: rgba(255, 255, 255, 0.92);
  --stot-color-surface-solid: #ffffff;
  --stot-color-panel: #B2EBF2;
  --stot-color-text: #1C1B1F;
  --stot-color-muted: #424242;
  --stot-color-brand: #006B75;
  --stot-color-brand-strong: #00363C;
  --stot-color-brand-soft: #B2EBF2;
  --stot-color-accent: #E05C40;
  --stot-color-border: #BDBDBD;
  --stot-color-border-strong: #9E9E9E;
  --stot-color-dark: #00363C;
  --stot-radius-sm: 4px;
  --stot-radius: 12px;
  --stot-radius-lg: 16px;
  --stot-shadow: 0 18px 40px rgba(28, 27, 31, 0.08);
  --stot-shadow-soft: 0 10px 24px rgba(28, 27, 31, 0.06);
  --stot-header-height: 150px;
  --stot-header-row1-height: 75px;
  --stot-header-row2-height: 75px;
  --stot-shell-max: 1280px;
  --stot-bottom-nav-height: 0px;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--stot-color-text);
  background:
    radial-gradient(circle at top left, rgba(0, 107, 117, 0.08), transparent 26%),
    radial-gradient(circle at top right, rgba(224, 92, 64, 0.06), transparent 24%),
    linear-gradient(180deg, #F8F4EF 0%, #F5F0EA 22%, #F5F0EA 100%);
}

main {
  min-height: calc(100vh - 240px);
}

a {
  text-underline-offset: 0.18em;
}

.stot-shell {
  max-width: var(--stot-shell-max);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
}

.stot-header {
  /* Slightly more opaque than before + backdrop blur so page sections
     (Why-Timor paper, hero ocean) don't bleed through the sticky header
     when scrolling. The previous 0.92 alpha with no blur let coloured
     sections show through and made the header feel translucent in a
     glitchy way rather than intentional. */
  background: rgba(251, 248, 242, 0.96);
  border-bottom: 1px solid rgba(15, 31, 36, 0.06);
  box-shadow: 0 6px 18px rgba(16, 36, 59, 0.05);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

/* Fallback for browsers without backdrop-filter — go fully opaque. */
@supports not (backdrop-filter: blur(1px)) {
  .stot-header { background: #FBF8F2; }
}

/* ── Two-row header layout ───────────────────────────────────────────────── */

.stot-header__row1 {
  border-bottom: none;
}

.stot-header__top-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--stot-header-row1-height);
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}

.stot-header__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

.stot-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stot-brand .custom-logo {
  max-height: 58px;
}

/* ── Glamore — the official SOT brand wordmark face ──────────────────── */
@font-face {
  font-family: 'Glamore';
  src: url('../fonts/glamore.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Text wordmark: "S.O.T." + "stays of timor" in Glamore ───────────── */
.stot-brand--text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  color: var(--stot-color-text, #1c1b1f);
  font-family: 'Glamore', Georgia, serif;
  line-height: 1;
  padding: 2px 0;
}
.stot-brand--text:hover { color: var(--stot-color-brand, #006B75); }
.stot-brand__mark {
  /* Glamore is the heritage display face. SOT brand rule: always lowercase. */
  font-family: 'Glamore', Georgia, serif;
  font-size: var(--stot-brand-mark-size, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: lowercase;
}
.stot-brand__tag {
  /* Per SOT brand rule: both lines of the wordmark use Glamore. */
  font-family: 'Glamore', Georgia, serif;
  font-size: var(--stot-brand-tag-size, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: lowercase;
  margin-top: 2px;
  color: var(--stot-color-text, #1c1b1f);
}
@media (max-width: 600px) {
  .stot-brand__mark { font-size: var(--stot-brand-mark-size-mobile, 1.75rem); }
  .stot-brand__tag  { font-size: var(--stot-brand-tag-size-mobile, 0.7rem); letter-spacing: 0.12em; margin-top: 1px; }
}

.stot-header__utils {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Row 2: Nav bar */
.stot-header__row2 {
  background: rgba(255, 255, 255, 0.6);
}

.stot-header__nav-inner {
  display: flex;
  align-items: center;
  min-height: var(--stot-header-row2-height);
  gap: 1rem;
}

.stot-header__mobile-utils {
  display: none;
}

.stot-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
/* Distribute the top-level nav items edge-to-edge across the header
   shell. With `justify-content: space-between` the first item aligns to
   the left of the shell (under the logo) and the last item aligns to
   the right of the shell (under the utility row above), and the rest
   are spread evenly. This kills the cramped-left look and gives the
   nav row a consistent horizontal rhythm. */
.stot-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.stot-nav > ul > li.menu-item {
  flex: 0 0 auto;
}

.stot-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.stot-nav a:hover,
.stot-nav .current-menu-item > a,
.stot-nav .current_page_item > a {
  background: var(--stot-color-brand-soft);
  color: var(--stot-color-brand-strong);
}

.stot-nav__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.stot-nav__icon svg {
  width: 17px;
  height: 17px;
}

.stot-login-btn,
.stot-btn--primary,
body .srs-btn-primary,
body .srs-search-submit,
body .poiex-btn-search,
body .sot-profile-wrap .sot-btn-solid,
body .sot-profile-wrap .sot-btn-book {
  background: linear-gradient(180deg, #1f78e8 0%, #1768cf 100%);
  border-color: #1768cf;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(23, 104, 207, 0.18);
}

.stot-login-btn:hover,
.stot-btn--primary:hover,
body .srs-btn-primary:hover,
body .srs-search-submit:hover,
body .poiex-btn-search:hover,
body .sot-profile-wrap .sot-btn-solid:hover,
body .sot-profile-wrap .sot-btn-book:hover {
  background: linear-gradient(180deg, #1768cf 0%, #0d4fa5 100%);
  border-color: #0d4fa5;
}

.stot-btn,
.stot-login-btn,
body .srs-btn,
body .poiex-btn-search,
body .poiex-btn-clear,
body .sotc-nav-btn,
body .sotc-tab-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.stot-btn:hover,
.stot-login-btn:hover,
body .srs-btn:hover,
body .sotc-nav-btn:hover {
  transform: translateY(-1px);
}

.stot-btn--secondary,
body .srs-btn,
body .poiex-btn-clear,
body .sot-profile-wrap .sot-btn-outline-dark {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--stot-color-border-strong);
  color: var(--stot-color-text);
}

.stot-lang-dd > summary {
  padding: 0.42rem 0.82rem;
  border-color: var(--stot-color-border-strong);
  color: var(--stot-color-text);
  font-weight: 700;
}

/* ── Mobile burger button — 44×44 tap target, morphs to X when open ── */
.stot-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--stot-color-border-strong);
  background: #ffffff;
  color: var(--stot-color-text);
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  z-index: 96; /* above the drawer panel so it stays tappable */
}

.stot-nav-toggle:hover,
.stot-nav-toggle:focus-visible {
  background: var(--ocean-soft, #D3E3EC);
  border-color: var(--ocean, #0A4D6E);
  color: var(--ocean-deep, #063349);
  outline: none;
}

.stot-nav-toggle__bars {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  flex-shrink: 0;
  background: currentColor;
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.stot-nav-toggle__bars::before,
.stot-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.25s ease, top 0.25s ease;
}

.stot-nav-toggle__bars::before {
  top: -6px;
}

.stot-nav-toggle__bars::after {
  top: 6px;
}

/* When the menu is open: top bar rotates down to center, middle disappears,
   bottom bar rotates up to center — classic morph-to-X */
.stot-header.is-menu-open .stot-nav-toggle__bars {
  background: transparent;
}

.stot-header.is-menu-open .stot-nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.stot-header.is-menu-open .stot-nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── Mobile drawer backdrop ───────────────────────────────────────────── */
.stot-mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 31, 36, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 94;
  transition: opacity 0.25s ease;
}

/* Activated by .is-menu-open on the header (sibling of the backdrop) */
.stot-header.is-menu-open ~ .stot-mobile-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.stot-search-page,
.stot-page {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Pages with hero map: zero top padding so map sits flush against header */
.stot-search-page:has(.stot-hero-map),
.poiex:has(.stot-hero-map) {
  padding-top: 0;
}

/* ── Hero Map (replaces hero banner on map pages) ──────────────────────── */
.stot-hero-map {
  position: relative;
  width: 100%;
  height: clamp(280px, 30vw, 400px); /* ~1.5× old banner */
  z-index: 0;
  overflow: hidden;
  margin-top: 0; /* flush to header */
  box-shadow: inset 0 20px 56px rgba(0,0,0,0.4), inset 0 -20px 56px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.18);
}
.stot-hero-map__canvas {
  width: 100%;
  height: 100%;
}
/* Fallback panel that takes over the hero-map area when Google Maps
   fails to render tiles (revoked / unbilled / unauthorised API key, or
   network error). Hidden by default; shown by the page-search.php
   watchdog if no tiles appear within 6s — see that file for details. */
.stot-hero-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #0F2A3E 0%, #143A55 55%, #1F5A36 100%);
  color: rgba(255, 255, 255, 0.92);
  z-index: 5;
}
.stot-hero-map__fallback[hidden] { display: none; }
.stot-hero-map__fallback-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  text-align: center;
  max-width: 32rem;
}
.stot-hero-map__fallback-inner svg { opacity: 0.85; }
.stot-hero-map__fallback-inner p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.stot-hero-map__fallback-title {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: 0.005em;
}
.stot-hero-map__fallback-body {
  max-width: 36rem;
  opacity: 0.94;
}
.stot-hero-map__badge {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  color: #1a3a5c;
  font-size: clamp(0.62rem, 1.2vw, 0.78rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.stot-hero-map__legend {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 20;
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(194,210,226,0.7);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-size: 0.78rem;
  font-weight: 600;
  color: #1f3348;
}
.stot-hero-map__info {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(194,210,226,0.7);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f3348;
}
.stot-hero-map__hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-size: 0.78rem;
  font-style: italic;
  color: #64748b;
  white-space: nowrap;
}
.stot-hero-map--taxi {
  height: clamp(340px, 40vw, 500px);
}

/* Fullscreen toggle for the map */
.stot-hero-map__fullscreen-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.96);
  color: var(--stot-color-brand-strong, #00363C);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  z-index: 5;
  transition: background .15s, transform .15s;
}
.stot-hero-map__fullscreen-btn:hover {
  background: #fff;
  transform: scale(1.05);
}
.stot-hero-map.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  z-index: 99999;
  border-radius: 0 !important;
}
.stot-hero-map.is-fullscreen .stot-hero-map__canvas {
  height: 100% !important;
}
.stot-hero-map.is-fullscreen .stot-hero-map__fullscreen-btn {
  right: 16px;
  top: 16px;
  bottom: auto;
}

@media (max-width: 760px) {
  .stot-hero-map { height: 240px; }
  .stot-hero-map--taxi { height: 300px; }
  .stot-hero-map__legend { display: none; }
}

/*
 * LEAN section-hero — replaces the original gradient blue card.
 *
 * Tight inline header that sits in the page flow with a small kicker
 * badge on the right and an ink H1 on the left. No background, no
 * giant padding, no centered alignment. The user explicitly asked
 * for the original "hero banners" to go. SEO H1 stays.
 *
 * Older .stot-section-hero callers continue to work — the PHP helper
 * still emits the same outer class plus `.stot-section-hero--lean`,
 * and the override below catches the old class too.
 */
.stot-section-hero {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 1.5rem 0 1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line, #DDD3BE);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink, #0F1F24);
  text-align: left;
  display: block;
  overflow: visible;
  isolation: auto;
}
.stot-section-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.stot-section-hero__text-col {
  flex: 1 1 60ch;
  min-width: 0;
}
.stot-section-hero .stot-section-hero__badge {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--ocean-soft, #D3E3EC);
  color: var(--ocean-deep, #063349);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  min-height: auto;
  border: 0;
}
.stot-section-hero .stot-section-hero__kicker {
  margin: 0 0 0.3rem;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocean, #0A4D6E);
  opacity: 1;
}
.stot-section-hero .stot-section-hero__title {
  margin: 0 0 0.4rem;
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink, #0F1F24);
  text-wrap: balance;
  text-shadow: none;
}
.stot-section-hero .stot-section-hero__text {
  margin: 0;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-2, #2B3D44);
  max-width: 60ch;
  opacity: 1;
}
/* Hide the legacy decorative pseudo-elements that drew the gradient
   blobs behind the old hero — no longer needed without the card. */
.stot-section-hero::before,
.stot-section-hero::after { content: none !important; display: none !important; }

.stot-section-hero::before,
.stot-section-hero::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  pointer-events: none;
}

.stot-section-hero::before {
  width: 22rem;
  height: 22rem;
  top: -9rem;
  right: -6rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 68%);
}

.stot-section-hero::after {
  width: 18rem;
  height: 18rem;
  bottom: -10rem;
  left: -4rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
}

.stot-section-hero__badge,
.stot-section-hero__kicker,
.stot-section-hero__title,
.stot-section-hero__text {
  position: relative;
  z-index: 1;
}

.stot-section-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.55rem 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: rgba(248, 251, 255, 0.96);
  font-size: clamp(0.66rem, 1.35vw, 0.82rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.stot-section-hero__kicker {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(248, 251, 255, 0.78);
}

.stot-section-hero__title {
  margin: 0;
  font-family: var(--stot-font-heading);
  font-size: clamp(1.28rem, 3.9vw, 2.92rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  max-width: none;
  white-space: nowrap;
}

.stot-section-hero__text {
  margin: 0;
  max-width: 46rem;
  font-size: clamp(0.76rem, 1.5vw, 0.96rem);
  line-height: 1.45;
  color: rgba(248, 251, 255, 0.82);
}

.stot-search-head {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--stot-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(237, 245, 255, 0.96) 100%);
  border: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: var(--stot-shadow-soft);
  margin-bottom: 1.25rem;
}

.stot-search-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: #647890;
}

.stot-search-head h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.stot-search-head p {
  max-width: 60rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.45;
}

.stot-search-form,
body .poiex-search-bar,
body .srs-search-bar,
body .sotc-controls-bar,
body .sotc-cal-nav,
body .sotc-events-grid,
body .srs-public-card,
body .srs-provider-card,
body .sotc-event-card,
body .sot-profile-wrap .sot-card,
body .sot-profile-wrap .sot-room-card,
body .sot-profile-wrap .sot-menu-item,
body .sot-profile-wrap .sot-policy-item {
  border-radius: var(--stot-radius);
}

.stot-search-form {
  gap: 1rem;
  padding: 1rem;
  border-color: rgba(15, 31, 36, 0.08);
  box-shadow: 0 8px 24px rgba(15, 42, 62, 0.06);
  background: var(--paper, #FBF8F2);
  top: calc(var(--stot-header-height) + 0.5rem);
  align-items: end;
}

/* ─────────────────────────────────────────────────────────────────────
 * Unified Search Form design — round 5.
 *
 * Across the theme we had four+ different search-form treatments:
 *   - .stot-search-form     (page-search.php / search-transport.php)
 *   - .stot-search-stick    (sticky-collapsible wrapper)
 *   - .stot-prop-search-bar (page-property-detail.php)
 *   - .sotb-search-hero     (homepage hero block)
 *   - .srs-search-bar       (srs- plugin)
 *   - .poiex-search-bar     (explore page)
 *
 * Each used different padding, border-radius, label casing, input height,
 * border colors, and focus rings. The new rules below give every search
 * surface the SAME tokens via shared variables:
 *
 *   --sot-search-radius      : outer card and inner control radius
 *   --sot-search-border      : input border color
 *   --sot-search-focus       : focus ring color
 *   --sot-search-input-h     : min input height (touch target)
 *   --sot-search-label-size  : kicker label font size
 *
 * Plus a single `.sot-search-card` utility class that authors can apply
 * to any form to instantly get the unified look. Existing classes are
 * mapped to the same tokens so no markup needs to change.
 * ──────────────────────────────────────────────────────────────────── */
:root {
  --sot-search-radius: 12px;
  --sot-search-border: rgba(15, 31, 36, 0.12);
  --sot-search-border-hover: var(--ocean, #0A4D6E);
  --sot-search-focus: rgba(10, 77, 110, 0.18);
  --sot-search-input-h: 48px;
  --sot-search-label-size: 0.72rem;
  --sot-search-label-color: var(--ink-2, #2C4751);
  --sot-search-bg: var(--paper, #FBF8F2);
}

.sot-search-card,
.stot-search-form,
.stot-prop-search-fields,
.poiex-search-inner,
.srs-search-bar {
  background: var(--sot-search-bg);
  border-radius: var(--sot-search-radius);
  border: 1px solid var(--sot-search-border);
  box-shadow: 0 8px 24px rgba(15, 42, 62, 0.06);
}

/* Inputs / selects / triggers — unified across every plugin's flavor */
.sot-search-card input,
.sot-search-card select,
.stot-search-form input,
.stot-search-form select,
.stot-search-form .stot-dr-trigger,
.stot-search-form .stot-gr-trigger,
.stot-prop-search-fields input,
.stot-prop-search-fields select,
.poiex-si,
.srs-field input,
.srs-field select,
.srs-search-field {
  min-height: var(--sot-search-input-h);
  border-radius: var(--sot-search-radius);
  border: 1px solid var(--sot-search-border);
  font-family: var(--sans, 'Inter Tight', 'Inter', system-ui, sans-serif);
  font-size: 0.95rem;
  color: var(--ink, #0F1F24);
  background: #fff;
  padding: 0.55rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sot-search-card input:hover,
.sot-search-card select:hover,
.stot-search-form input:hover,
.stot-search-form select:hover,
.stot-prop-search-fields input:hover,
.stot-prop-search-fields select:hover,
.srs-field input:hover,
.srs-field select:hover {
  border-color: var(--sot-search-border-hover);
}

.sot-search-card input:focus,
.sot-search-card select:focus,
.stot-search-form input:focus,
.stot-search-form select:focus,
.stot-prop-search-fields input:focus,
.stot-prop-search-fields select:focus,
.poiex-si:focus,
.srs-field input:focus,
.srs-field select:focus {
  outline: none;
  border-color: var(--sot-search-border-hover);
  box-shadow: 0 0 0 3px var(--sot-search-focus);
}

/* Labels above each field — short caps treatment, brand-tinted */
.stot-search-field label,
.sot-search-card label,
.srs-search-label,
.poiex-legend-title {
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: var(--sot-search-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sot-search-label-color);
  margin-bottom: 0.3rem;
}

/* Primary submit — match the search-hero submit button */
.stot-search-form .stot-btn--primary,
.stot-search-form button[type="submit"],
.stot-prop-search-submit,
.poiex-btn-search,
.srs-search-submit,
.sotc-search-btn,
.sot-search-card button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--sot-search-input-h);
  padding: 0 1.4rem;
  border-radius: var(--sot-search-radius);
  border: 0;
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.stot-search-form .stot-btn--primary:hover,
.stot-search-form button[type="submit"]:hover,
.stot-prop-search-submit:hover,
.poiex-btn-search:hover,
.srs-search-submit:hover,
.sotc-search-btn:hover,
.sot-search-card button[type="submit"]:hover {
  background: var(--ocean-deep, #07344B);
}
.stot-search-form .stot-btn--primary:active,
.stot-search-form button[type="submit"]:active,
.stot-prop-search-submit:active,
.sot-search-card button[type="submit"]:active {
  transform: translateY(1px);
}

/* Sticky-collapsible toggle (the chip at the top of /stays/ on mobile)
   — match the unified search bg + radius */
.stot-search-stick {
  background: var(--sot-search-bg);
  border-radius: var(--sot-search-radius);
  border: 1px solid var(--sot-search-border);
  box-shadow: 0 8px 24px rgba(15, 42, 62, 0.06);
}
.stot-search-toggle {
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  color: var(--ink, #0F1F24);
}
.stot-search-toggle__icon { color: var(--ocean, #0A4D6E); }

/* Ensure the .stot-search-stick wrapping a .stot-search-form doesn't
   double up borders/shadows — strip the inner form's chrome. */
.stot-search-stick .stot-search-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Transport form: stickiness is owned by the .stot-search-stick wrapper. */

/* ── Sticky-collapsible search bar (mobile-first) ────────────────────── */
.stot-search-stick {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.98);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,42,62,.08);
  border: 1px solid rgba(194,210,226,.6);
  margin-bottom: 1rem;
  /* Lock to 100 % of the .stot-shell content width — without this, some
     browsers (Safari) shrink the sticky-positioned wrapper to its
     content's intrinsic width on certain scroll states, which looked
     narrower than the hero card above it. */
  width: 100%;
  box-sizing: border-box;
  /* No overflow:hidden — date picker dropdown must escape this container. */
}

/*
 * Universal width-consistency rule for /search/ and /search-transport/.
 * Every direct content block inside a .stot-search-page .stot-shell
 * should span the SAME visible width as the .stot-section-hero above it.
 * Locks margin-inline + width + box-sizing so no child can render
 * narrower than its siblings.
 */
.stot-search-page .stot-shell > .stot-section-hero,
.stot-search-page .stot-shell > .stot-search-stick,
.stot-search-page .stot-shell > .stot-transport-results,
.stot-search-page .stot-shell > .stot-search-layout,
.stot-search-page .stot-shell > .stot-results-controls,
.stot-search-page .stot-shell > .stot-listing-grid {
  width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/*
 * /stays/ — match the listing grid to the search-form / header width
 * even when nested two levels deep inside .stot-search-layout >
 * .stot-search-results. The previous defensive rule only matched
 * direct children of .stot-shell; the actual grid lives at
 *   .stot-shell > .stot-search-layout > .stot-search-results > .stot-listing-grid
 * so it inherited its containing block's intrinsic width and visibly
 * spilled wider than the search-stick + header. Lock every container
 * in the chain to width:100% so the grid can't escape the shell.
 */
.stot-search-page .stot-search-layout,
.stot-search-page .stot-search-results,
.stot-search-page .stot-listing-grid {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/*
 * Search form — make every field render at the same visual height so
 * the date trigger doesn't stand out as taller than the district /
 * town / guests inputs.
 *
 * The booking-ui dates picker (`.stot-dr-trigger`) stacks label + value
 * internally and ends up ~52 px tall. The plain `<select>` inputs in
 * the other fields are ~38-44 px. Lock all of them to the unified
 * `--sot-search-input-h` height so the form reads as one row.
 */
.stot-search-form .stot-search-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stot-search-form .stot-search-field > label {
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #2B3D44);
}
.stot-search-form .stot-search-field > select,
.stot-search-form .stot-search-field .stot-dr-trigger,
.stot-search-form .stot-search-field .stot-gr-trigger {
  min-height: var(--sot-search-input-h, 48px);
  height: var(--sot-search-input-h, 48px);
  box-sizing: border-box;
}
/* Dates trigger inside the search form — KEEP the internal Check-in /
   Check-out labels visible (they're the placeholder text when no dates
   are selected). Earlier we hid them and the field rendered as just an
   arrow + calendar icon. The fix: keep both labels + values, but
   tighten the vertical rhythm so the trigger still fits inside the
   48 px row. */
.stot-search-form .stot-search-field--dates .stot-dr-trigger {
  align-items: center;
}
.stot-search-form .stot-search-field--dates .stot-dr-field {
  padding: 0.4rem 0.85rem;
  gap: 0;
  min-width: 0;
}
.stot-search-form .stot-search-field--dates .stot-dr-field-label {
  display: block;
  font-size: 0.6rem;
  line-height: 1;
  margin-bottom: 2px;
}
.stot-search-form .stot-search-field--dates .stot-dr-field-val {
  font-size: 0.85rem;
  line-height: 1.1;
}

/* ── Guests & Rooms — the rogue native select caret ─────────────────
   The .stot-gr-trigger button wraps a hidden <select>; on some browsers
   the native ▼ caret leaks out to the right of the button. Force the
   container to clip and the field to have a single caret only. */
.stot-search-form .stot-search-field--guests {
  position: relative;
}
.stot-search-form .stot-search-field--guests .stot-gr-trigger {
  overflow: hidden;
}
.stot-search-form .stot-search-field--guests select,
.stot-search-form .stot-search-field--guests .stot-gr-trigger > select {
  /* Hide any underlying native select that might be inheriting browser
     chrome — the button + caret SVG inside .stot-gr-trigger is the
     authoritative trigger. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}
/* Strip any orphan caret/triangle pseudo-element a parent rule may have
   added to the field wrapper. */
.stot-search-form .stot-search-field--guests::after,
.stot-search-form .stot-search-field--guests::before {
  display: none !important;
}

/* ── Listing cards — tighten the scale ──────────────────────────────
   User feedback: cards "in general are too big". Drop from 3-up to
   4-up on wide desktops and tighten internal padding so each card
   reads as a scannable tile, not a hero. */
@media (min-width: 1100px) {
  .stot-search-page .stot-listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  .stot-search-page .stot-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (max-width: 819.98px) {
  .stot-search-page .stot-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 540px) {
  .stot-search-page .stot-listing-grid {
    grid-template-columns: 1fr;
  }
}

/* Card body — tighter type + padding at the new 4-up scale */
.stot-search-page .stot-listing-card--v2 .stot-listing-body {
  padding: 0.75rem 0.85rem 0.85rem;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-title {
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.2;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-headline {
  font-size: 0.78rem;
  line-height: 1.4;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-price strong {
  font-size: 1.05rem;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-loc {
  font-size: 0.65rem;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-amenities li > span {
  width: 18px;
  height: 18px;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-amenities svg {
  width: 11px;
  height: 11px;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-distance {
  font-size: 0.7rem;
}
.stot-search-page .stot-listing-card--v2 .stot-listing-cta {
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
}
.stot-search-stick.is-stuck {
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-left: calc(-1 * clamp(1rem, 2vw, 1.5rem));
  margin-right: calc(-1 * clamp(1rem, 2vw, 1.5rem));
  box-shadow: 0 6px 20px rgba(15,42,62,.10);
}
.stot-search-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--stot-color-text, #1c1b1f);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.stot-search-toggle:hover { background: rgba(0,107,117,.04); }
.stot-search-toggle__icon { color: var(--stot-color-brand, #006B75); display: inline-flex; flex-shrink: 0; }
.stot-search-toggle__summary {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stot-search-toggle__chevron {
  flex-shrink: 0; color: var(--stot-color-muted, #424242);
  transition: transform .25s ease;
  display: inline-flex;
}
.stot-search-toggle[aria-expanded="true"] .stot-search-toggle__chevron {
  transform: rotate(180deg);
}
.stot-search-form.is-collapsed {
  display: none;
}
.stot-search-stick .stot-search-form {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(194,210,226,.5);
  box-shadow: none;
  background: transparent;
  margin: 0;
}

/* Desktop: always show form, hide toggle */
@media (min-width: 768px) {
  .stot-search-toggle { display: none; }
  .stot-search-form.is-collapsed { display: grid; }
  .stot-search-stick { box-shadow: var(--stot-shadow); }
  .stot-search-stick .stot-search-form { border-top: none; }
}

.stot-search-field {
  align-self: end;
  min-width: 0;
  gap: 0.42rem;
}

.stot-search-field label,
body .srs-search-label,
body .sotc-cal-day-header,
body .poiex-legend-title,
body .sot-profile-wrap .sot-profile-kicker,
body .sot-profile-wrap .sot-room-units-label,
body .sot-profile-wrap .sot-prop-card-kicker,
body .sot-profile-wrap .sot-seat-choice-kicker,
body .sot-profile-wrap .sot-booking-field label {
  letter-spacing: 0.1em;
}

.stot-search-field select,
.stot-search-field input,
body .poiex-si,
body .srs-field input,
body .srs-field select,
body .srs-field textarea,
body .srs-search-field,
body .srs-extra-qty,
body .srs-file-input,
body .sotc-cat-filter,
body .sotc-search-input {
  border-color: var(--stot-color-border-strong);
  border-radius: 14px;
  background: #ffffff;
  color: var(--stot-color-text);
}

.stot-search-form .stot-search-field select,
.stot-search-form .stot-search-field input,
.stot-search-form .stot-dr-trigger,
.stot-search-form .stot-gr-trigger,
body .poiex-si,
body .poiex-btn-search,
body .poiex-btn-clear,
body .poiex-geo-status,
body .sotc-cat-filter,
body .sotc-search-input,
body .sotc-search-btn {
  min-height: 3.5rem;
}

.stot-search-form .stot-dr-wrap,
.stot-search-form .stot-gr-wrap {
  width: 100%;
}

.stot-search-form .stot-dr-trigger,
.stot-search-form .stot-gr-trigger {
  border-radius: 14px;
}

.stot-search-form .stot-dr-field {
  justify-content: center;
  min-height: 3.5rem;
  padding-top: 0.72rem;
  padding-bottom: 0.72rem;
}

.stot-search-form .stot-gr-trigger {
  padding-top: 0.72rem;
  padding-bottom: 0.72rem;
}

.stot-search-field select:focus,
.stot-search-field input:focus,
body .poiex-si:focus,
body .srs-field input:focus,
body .srs-field select:focus,
body .srs-field textarea:focus,
body .sotc-cat-filter:focus,
body .sotc-search-input:focus {
  border-color: var(--stot-color-brand);
  box-shadow: 0 0 0 4px rgba(23, 104, 207, 0.12);
}

.stot-card,
.stot-listing-card,
body .srs-public-card,
body .srs-vehicle-card,
body .srs-provider-card,
body .sotc-event-card,
body .sot-profile-wrap .sot-card,
body .sot-profile-wrap .sot-room-card,
body .sot-profile-wrap .sot-menu-item,
body .sot-profile-wrap .sot-policy-item {
  border: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: var(--stot-shadow-soft);
  background: rgba(255, 255, 255, 0.96);
}

.stot-listing-grid,
body .srs-vehicle-grid {
  gap: 1.25rem;
}

.stot-listing-card {
  border-radius: 22px;
  overflow: clip;
}

.stot-listing-cover img {
  height: 230px;
}

.stot-listing-body {
  gap: 0.65rem;
  padding: 1.15rem 1.15rem 1.2rem;
}

.stot-listing-body h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
}

.stot-listing-loc {
  color: var(--stot-color-muted);
}

.stot-listing-meta,
.stot-listing-body p {
  color: #59708a;
  line-height: 1.5;
}

.stot-listing-tags span,
body .sot-profile-wrap .sot-room-meta span,
body .sot-profile-wrap .sot-room-amenities span,
body .sot-profile-wrap .sot-prop-card-features span,
body .sot-profile-wrap .sot-menu-item-tags span,
body .sot-profile-wrap .sot-room-modal-meta span,
body .sot-profile-wrap .sot-room-modal-amenities span {
  background: #edf4fb;
  color: #274969;
}

.stot-price-preview {
  background: linear-gradient(135deg, #f3f8ff 0%, #ebf2fb 100%);
  border-color: #d8e6f7;
}

.stot-search-layout {
  gap: 1.25rem;
}

.stot-search-layout--full {
  display: block;
}

.stot-transport-provider {
  border: 1px solid rgba(194, 210, 226, 0.92);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--stot-shadow-soft);
}

.stot-transport-provider-head,
.stot-route-row {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

.stot-transport-provider-head {
  padding-top: 1.35rem;
  padding-bottom: 1rem;
}

.stot-transport-provider-img {
  border-radius: 16px;
}

.stot-route-row {
  border-top-color: rgba(216, 227, 239, 0.9);
}

.stot-route-price strong {
  color: var(--stot-color-brand-strong);
}

.stot-search-actions {
  align-self: end;
}

.stot-search-actions .stot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  width: 100%;
  padding: 0 1.35rem;
  white-space: nowrap;
}

body .srs-public-subsection {
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid rgba(194, 210, 226, 0.92);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(243, 248, 255, 0.98) 0%, rgba(233, 242, 252, 0.98) 100%);
  box-shadow: var(--stot-shadow-soft);
  font-family: var(--stot-font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--stot-color-text);
}

.stot-prop-search-bar {
  position: sticky;
  top: 0;
  z-index: 35;
  padding: 0.95rem 0;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(194, 210, 226, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(16, 36, 59, 0.06);
}

.stot-prop-search-inner {
  max-width: var(--stot-shell-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.stot-prop-search-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #71839a;
}

.stot-prop-search-fields {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.stot-prop-search-date {
  flex: 2 1 21rem;
  min-width: 21rem;
}

.stot-prop-search-guests {
  flex: 0 1 12rem;
  min-width: 12rem;
}

.stot-prop-search-submit {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Provider-aware variants (rentals / tour / spa / sport / museum / course) ──
   The property-detail search bar shows different fields per vertical.
   These helpers match the kicker-label + value treatment of the existing
   date-range + guests-rooms triggers so every variant feels native. */
.stot-prop-search-select,
.stot-prop-search-singledate {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 0 1 11rem;
  min-width: 9rem;
  background: #fff;
  border: 1px solid var(--sot-search-border, rgba(15, 31, 36, 0.12));
  border-radius: var(--sot-search-radius, 12px);
  padding: 0.4rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
}
.stot-prop-search-select:hover,
.stot-prop-search-singledate:hover {
  border-color: var(--sot-search-border-hover, var(--ocean, #0A4D6E));
}
.stot-prop-search-select:focus-within,
.stot-prop-search-singledate:focus-within {
  border-color: var(--sot-search-border-hover, var(--ocean, #0A4D6E));
  box-shadow: 0 0 0 3px var(--sot-search-focus, rgba(10, 77, 110, 0.18));
}
.stot-prop-search-select__label,
.stot-prop-search-singledate__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-2, #2B3D44);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.stot-prop-search-fields .stot-prop-search-select select,
.stot-prop-search-fields .stot-prop-search-singledate input {
  min-height: 0;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.92rem;
  color: var(--ink, #0F1F24);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  width: 100%;
}
.stot-prop-search-fields .stot-prop-search-select select:focus,
.stot-prop-search-fields .stot-prop-search-singledate input:focus {
  outline: none;
  box-shadow: none;
}
.stot-prop-search-singledate input[type="date"] {
  color-scheme: light;
}

.poiex {
  color: var(--stot-color-text);
}

.poiex-search-bar {
  position: sticky;
  top: calc(var(--stot-header-height) + 0.4rem);
  z-index: 34;
  max-width: var(--stot-shell-max);
  margin: 1rem auto 0;
  padding: 0 clamp(1rem, 2vw, 1.5rem);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.poiex-search-inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) minmax(170px, 0.95fr) minmax(140px, 0.7fr);
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: var(--stot-shadow);
}

.poiex-si {
  padding: 0.85rem 0.95rem;
}

.poiex-si-sel {
  min-width: 0;
}

.poiex-btn-search,
.poiex-btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  font-size: 0.96rem;
  font-weight: 800;
  border-radius: 14px;
}

.poiex-btn-search {
  border: 1px solid var(--stot-color-brand);
  background: linear-gradient(180deg, #1f78e8 0%, #1768cf 100%);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(23, 104, 207, 0.2);
}

.poiex-btn-search:hover {
  transform: translateY(-1px);
}

.poiex-btn-clear {
  border: 1px solid #cad8ea;
  background: #ffffff;
  color: #2f4763;
}

.poiex-body {
  max-width: var(--stot-shell-max);
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 2vw, 1.5rem) 4rem;
}

.poiex-map-wrap {
  margin: 1.25rem 0 1.5rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: var(--stot-shadow);
}

#poiex-map {
  height: 520px;
  position: relative;
  z-index: 1;
  background: #d8e4f0;
}

.poiex-map-info,
.poiex-map-legend {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(194, 210, 226, 0.92);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(16, 36, 59, 0.16);
  backdrop-filter: blur(12px);
}

.poiex-map-info {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: 0.75rem 1rem;
}

.poiex-map-legend {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  max-width: 220px;
}

.poiex-legend-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.poiex-legend-dot {
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.88);
}

.poiex-legend-lbl {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f3348;
}

.poiex-chips-bar {
  gap: 0.65rem;
}

.poiex-chip {
  border-radius: 999px;
  font-weight: 800;
}

.poiex-results-lbl {
  margin-bottom: 1rem;
}

.poiex-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Category group ── */
.poiex-cat-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poiex-cat-group-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #e2e8f0;
}

.poiex-cat-group-icon {
  font-size: 1.4rem;
}

.poiex-cat-group-name {
  font-family: var(--stot-font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--stot-color-dark);
  letter-spacing: -0.02em;
}

.poiex-cat-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.poiex-cat-group-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--stot-color-muted);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.poiex-cat-group-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.poiex-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--stot-color-text);
  background: #ffffff;
  border: 1px solid rgba(194, 210, 226, 0.8);
  border-radius: 22px;
  box-shadow: var(--stot-shadow-soft);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.poiex-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(16, 36, 59, 0.13);
}

/* ── Card image ──── */
.poiex-card-img {
  position: relative;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #dde8f4 0%, #c5d8ec 100%);
}

.poiex-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.poiex-card:hover .poiex-card-img img {
  transform: scale(1.05);
}

.poiex-card-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

/* Category badge — coloured pill over the image.
   Full-opacity background + dark text shadow + thin white halo keeps the
   label readable on top of bright photos AND on top of the gradient
   placeholder. Previously the badge used 80% alpha which dropped contrast
   below WCAG AA for the lighter category colours (amber, lime, cyan). */
.poiex-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.24rem 0.72rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.65),
    0 2px 8px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.35);
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder card image — gentle tint of the category colour with the
   category emoji centered.  Tinting it by category gives the empty grid
   a sense of order even when many cards have no photo yet. */
.poiex-card-img-ph .poiex-card-img-ph-icon {
  font-size: 3.5rem;
  opacity: 0.65;
  filter: drop-shadow(0 2px 6px rgba(15, 31, 36, 0.18));
}

/* ── Card body ──── */
.poiex-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.25rem 1.3rem;
}

.poiex-card-title {
  font-family: var(--stot-font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--stot-color-dark);
  margin: 0;
}

.poiex-card-area {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--stot-color-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.poiex-card-short {
  font-size: 0.83rem;
  color: #4e6678;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.poiex-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.poiex-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.73rem;
  font-weight: 600;
  background: #edf4fb;
  color: #2c5274;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.poiex-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.poiex-card-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--stot-color-brand);
  cursor: pointer;
  transition: color 0.15s ease;
}

.poiex-card-map-btn:hover {
  color: var(--stot-color-brand-strong);
}

.poiex-card-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--stot-color-brand);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.poiex-card-open-btn:hover {
  background: var(--stot-color-brand-strong);
  color: #fff;
}

/* Empty state — friendly fallback when filters return nothing */
.poiex-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--paper-2, #F3EFE6);
  border: 1px solid var(--line, #DDD3BE);
  border-radius: var(--r-lg, 16px);
  color: var(--ink-2, #2B3D44);
}
.poiex-empty-icon {
  color: var(--ocean, #0A4D6E);
  opacity: 0.75;
  margin-bottom: 0.25rem;
}
.poiex-empty p {
  margin: 0;
  font-size: 0.95rem;
  max-width: 26rem;
}
.poiex-empty-reset {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--ocean, #0A4D6E);
  background: #ffffff;
  color: var(--ocean, #0A4D6E);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.poiex-empty-reset:hover {
  background: var(--ocean, #0A4D6E);
  color: #ffffff;
}
.poiex-empty-reset:focus-visible {
  outline: 2px solid var(--ocean, #0A4D6E);
  outline-offset: 2px;
}

body .sotc-wrap,
body .sotc-single-event,
body .srs-public {
  max-width: var(--stot-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
  color: var(--stot-color-text);
  font-family: var(--stot-font-body);
}

body .sotc-controls-bar,
body .sotc-cal-nav,
body .srs-search-bar,
body .srs-public-card,
body .srs-provider-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: var(--stot-shadow-soft);
}

body .sotc-controls-bar {
  position: sticky;
  top: calc(var(--stot-header-height) + 0.5rem);
  z-index: 32;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: end;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

body .sotc-view-tabs {
  background: #edf4fb;
  padding: 0.3rem;
  border-radius: 999px;
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

body .sotc-tab-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}

body .sotc-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1.7fr) auto;
  gap: 1rem;
  align-items: end;
  width: 100%;
}

body .sotc-search-btn {
  min-width: 136px;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #1f78e8 0%, #1768cf 100%);
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(23, 104, 207, 0.22);
}

body .sotc-search-btn:hover {
  transform: translateY(-1px);
}

body .srs-search-container-stot {
  position: relative;
  margin-bottom: 1.25rem;
}

/* Rental search bar visual styling — sticky/fixed state is handled by public.js + plugin CSS */
body .srs-search-container-stot .srs-search-bar {
  padding: 0.75rem clamp(1rem, 2vw, 1.5rem);
  background: rgba(255, 255, 255, 0.97);
  border: none;
  border-bottom: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: 0 4px 18px rgba(16, 36, 59, 0.08);
  border-radius: 0;
}

/* Remove the form's own card background — the bar wrapper provides it */
body .srs-search-container-stot .stot-search-form {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  top: 0; /* prevent the default sticky top-offset from shifting this form down inside the bar */
}

body .srs-stot-rental-form {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(88px, 0.56fr) minmax(92px, 0.7fr) minmax(118px, 0.76fr) minmax(80px, 0.5fr) minmax(80px, 0.5fr) minmax(88px, 0.46fr);
  align-items: end;
  margin-bottom: 0;
  gap: 0.6rem;
}

body .srs-stot-rental-form .stot-search-field--compact label {
  white-space: nowrap;
}

body .srs-stot-rental-form .stot-search-field--dates {
  grid-column: span 1;
}

body .srs-stot-rental-form .stot-search-field select,
body .srs-stot-rental-form .stot-search-field input,
body .srs-stot-rental-form .stot-dr-trigger {
  min-height: 3.35rem;
}

body .srs-stot-rental-form .stot-dr-field {
  min-height: 3.35rem;
  padding-left: 0.72rem;
  padding-right: 0.72rem;
}

body .srs-stot-rental-form .stot-dr-field-label {
  font-size: 0.58rem;
}

body .srs-stot-rental-form .stot-dr-field-val {
  font-size: 0.8rem;
}

body .srs-stot-rental-form .stot-search-actions .stot-btn {
  min-height: 3.35rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

body .srs-stot-rental-form .stot-search-actions .stot-btn {
  min-width: 0;
}

body .sotc-tab-btn.active,
body .sotc-nav-btn:hover {
  background: linear-gradient(180deg, #1f78e8 0%, #1768cf 100%);
  color: #ffffff;
}

body .sotc-calendar-grid {
  gap: 6px;
  padding: 6px;
  border-color: rgba(194, 210, 226, 0.92);
  background: #edf3fa;
}

body .sotc-cal-day {
  min-height: 112px;
  border-radius: 14px;
}

body .sotc-cal-day.today .sotc-day-num,
body .sotc-card-featured-badge,
body .sotc-calendar-loading::after {
  background: var(--stot-color-brand);
}

body .sotc-day-more,
body .sotc-card-date,
body .sotc-card-price {
  color: var(--stot-color-brand-strong);
}

body .sotc-event-card {
  border: 1px solid rgba(194, 210, 226, 0.92);
}

body .sotc-card-title,
body .srs-public-header h2,
body .srs-provider-card h3,
body .srs-title-main,
body .srs-rentals-type-title .srs-title-main {
  font-family: var(--stot-font-heading);
  color: var(--stot-color-text);
  letter-spacing: -0.03em;
}

body .sotc-card-excerpt,
body .sotc-card-location,
body .srs-public-header p,
body .srs-vehicle-meta,
body .srs-provider-card-headline,
body .srs-provider-card-meta,
body .srs-rentals-type-desc,
body .srs-loc-info {
  color: #5d7289;
}

body .srs-search-container {
  margin-bottom: 1.5rem;
}

body .srs-search-bar {
  padding: 1rem;
  border-bottom: 1px solid rgba(194, 210, 226, 0.92);
}

body .srs-search-container.is-sticky .srs-search-bar {
  border-radius: 0 0 20px 20px;
}

body .srs-search-field {
  min-height: 68px;
  border-radius: 16px;
  border-color: var(--stot-color-border-strong);
}

body .srs-search-submit {
  border-radius: 16px;
}

body .srs-public-card {
  padding: 1.35rem;
}

body .srs-vehicle-card,
body .srs-provider-card {
  border-color: rgba(194, 210, 226, 0.92);
}

body .srs-card-thumb,
body .srs-rentals-card-thumb,
body .srs-provider-card-media img {
  border-radius: 16px;
}

body .srs-vehicle-price,
body .srs-rentals-starting-price {
  color: var(--stot-color-brand-strong);
}

body .srs-category-pill {
  background: #edf4fb;
  color: #21517b;
}

body .sot-profile-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body .sot-profile-wrap .sot-profile-hero-panel {
  background: linear-gradient(145deg, #102f4d 0%, #165b9f 100%);
}

body .sot-profile-wrap .sot-profile-hero-panel h2,
body .sot-profile-wrap .sot-card h3,
body .sot-profile-wrap .sot-room-categories h3,
body .sot-profile-wrap .sot-room-content h4,
body .sot-profile-wrap .sot-prop-card h3,
body .sot-profile-wrap .sot-menu-item-body h4,
body .sot-profile-wrap .sot-booking-header h3,
body .sot-profile-wrap .sot-room-modal-content h4 {
  font-family: var(--stot-font-heading);
  letter-spacing: -0.03em;
}

body .sot-profile-wrap .sot-profile-headline,
body .sot-profile-wrap .sot-card p,
body .sot-profile-wrap .sot-room-content p,
body .sot-profile-wrap .sot-location-line,
body .sot-profile-wrap .sot-policy-body p,
body .sot-profile-wrap .sot-menu-item-body p,
body .sot-profile-wrap .sot-booking-subtext,
body .sot-profile-wrap .sot-booking-account-note,
body .sot-profile-wrap .sot-booking-disclaimer,
body .sot-profile-wrap .sot-room-modal-content p {
  color: #587089;
}

body .sot-profile-wrap .sot-profile-hero-panel .sot-profile-headline,
body .sot-profile-wrap .sot-profile-hero-panel .sot-profile-meta span,
body .sot-profile-wrap .sot-profile-hero-panel .sot-profile-kicker,
body .sot-profile-wrap .sot-profile-hero-panel .sot-profile-features span,
body .sot-profile-wrap .sot-booking-header h3,
body .sot-profile-wrap .sot-booking-subtext,
body .sot-profile-wrap .sot-booking-account-note,
body .sot-profile-wrap .sot-booking-disclaimer {
  color: rgba(248, 251, 255, 0.92);
}

body .sot-profile-wrap .sot-profile-features span {
  background: rgba(255, 255, 255, 0.12);
}

body .sot-profile-wrap .sot-booking-section {
  background: linear-gradient(145deg, #102f4d 0%, #165b9f 100%);
  box-shadow: var(--stot-shadow);
}

body .sot-profile-wrap .sot-booking-field input,
body .sot-profile-wrap .sot-booking-field textarea,
body .sot-profile-wrap .sot-booking-field select {
  border-radius: 14px;
}

body .sot-profile-wrap .sot-booking-field input:focus,
body .sot-profile-wrap .sot-booking-field textarea:focus,
body .sot-profile-wrap .sot-booking-field select:focus,
body .sot-profile-wrap .sot-cat-option:hover,
body .sot-profile-wrap .sot-cat-option-selected {
  border-color: #8dc0ff;
  box-shadow: 0 0 0 4px rgba(141, 192, 255, 0.16);
}

body .sot-profile-wrap .sot-cat-option input[type=radio]:checked + .sot-cat-option-body {
  background: linear-gradient(180deg, rgba(141, 192, 255, 0.18), rgba(141, 192, 255, 0.08));
  border-color: #8dc0ff;
}

body .sot-profile-wrap .sot-cat-option-price,
body .sot-profile-wrap .sot-booking-estimate-main strong,
body .sot-profile-wrap .sot-seat-choice-kicker {
  color: #b9dbff;
}

body .sot-profile-wrap .sot-booking-estimate,
body .sot-profile-wrap .sot-seat-choice-card {
  border-color: rgba(141, 192, 255, 0.36);
}

body .sot-profile-wrap .sot-policy-item summary,
body .sot-profile-wrap .sot-menu-category summary {
  color: var(--stot-color-text);
}

body .sot-profile-wrap .sot-policy-item,
body .sot-profile-wrap .sot-menu-category {
  border-color: rgba(194, 210, 226, 0.92);
}

body .sot-profile-wrap .sot-menu-category,
body .sot-profile-wrap .sot-room-modal-dialog {
  background: rgba(255, 255, 255, 0.98);
}

body .sot-profile-wrap .sot-room-modal-dialog,
body .sot-profile-wrap .sot-gallery-stage img {
  box-shadow: 0 26px 50px rgba(8, 18, 30, 0.3);
}

.poi-page {
  max-width: var(--stot-shell-max);
  margin: 0 auto;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 4rem;
  color: var(--stot-color-text);
}

.poi-hero,
.poi-card {
  border: 1px solid rgba(194, 210, 226, 0.92);
  box-shadow: var(--stot-shadow-soft);
}

.poi-hero {
  position: relative;
  min-height: 380px;
  margin: 0 0 1.5rem;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #dbe6f1;
}

.poi-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poi-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(15, 45, 74, 0.04) 0%, rgba(15, 45, 74, 0.8) 100%);
  color: #ffffff;
}

.poi-hero-overlay h1,
.poi-hero-placeholder h1,
.poi-card-head h2 {
  font-family: var(--stot-font-heading);
  letter-spacing: -0.03em;
}

.poi-hero-overlay h1,
.poi-hero-placeholder h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.04;
}

.poi-hero-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 260px;
  padding: 2.25rem;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(237, 245, 255, 0.96) 100%);
}

.poi-hero-placeholder p,
.poi-hero-overlay p {
  font-size: 1rem;
  line-height: 1.5;
}

.poi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.poi-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.poi-tag-cat {
  background: #eaf2fd;
  color: #1a57a8;
}

.poi-tag-reg {
  background: #e8f6f4;
  color: #0e6963;
}

.poi-tag-feat,
.poi-tag-approved {
  background: #edf4fb;
  color: #274969;
}

.poi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 1.5rem;
}

.poi-card {
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
}

.poi-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(216, 227, 239, 0.92);
}

.poi-card-head h2 {
  margin: 0;
  font-size: 1.2rem;
}

.poi-card-body {
  padding: 1.25rem;
}

.poi-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.poi-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.poi-detail-full {
  grid-column: 1 / -1;
}

.poi-detail-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #71839a;
}

.poi-detail-value,
.poi-verified,
.poi-linked-type {
  color: #5d7289;
  line-height: 1.5;
}

.poi-map {
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: #d8e4f0;
}

.poi-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.poi-gallery-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
}

.poi-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
}

.poi-gallery-thumb:hover img {
  transform: scale(1.04);
}

.poi-linked-list {
  display: grid;
  gap: 0.8rem;
}

.poi-linked-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem;
  border: 1px solid rgba(194, 210, 226, 0.92);
  border-radius: 16px;
  text-decoration: none;
  color: var(--stot-color-text);
  background: #ffffff;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.poi-linked-item:hover {
  border-color: #b2cae6;
  transform: translateY(-1px);
  box-shadow: var(--stot-shadow-soft);
}

.poi-linked-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #dbe6f1;
  flex-shrink: 0;
}

.poi-linked-name {
  font-weight: 800;
}

.poi-bool-yes {
  color: #0b7a56;
  font-weight: 700;
}

.poi-bool-no {
  color: #8796a8;
}

.poi-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: rgba(7, 18, 31, 0.88);
}

.poi-lb.open {
  display: flex;
}

.poi-lb img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35);
}

.poi-lb-close,
.poi-lb-prev,
.poi-lb-next {
  position: absolute;
  border: 0;
  cursor: pointer;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.poi-lb-close {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.8rem;
}

.poi-lb-prev,
.poi-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.8rem;
}

.poi-lb-prev {
  left: 1rem;
}

.poi-lb-next {
  right: 1rem;
}

.stot-footer {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .stot-search-form {
    top: calc(var(--stot-header-height) + 0.4rem);
  }

  .stot-search-map {
    min-height: 420px;
  }

  .poiex-cat-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Default-hide the mobile drawer close button on desktop. The @media (max-width: 960px)
 * block below makes it visible (display: inline-flex) inside the mobile drawer.
 * Without this default rule, the <button> defaults to inline-block and shows in the
 * page header on every desktop page across all subsites. */
.stot-mobile-drawer-close { display: none; }

@media (max-width: 960px) {
  /* Show hamburger toggle */
  .stot-nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  /* Hide row-1 utilities — shown inside the collapsed nav panel on mobile */
  .stot-header__utils {
    display: none;
  }

  /* ── Branded slide-in drawer (right-edge panel) ─────────────────────── */
  .stot-header__row2 {
    position: fixed;
    top: var(--stot-header-row1-height, 75px);
    right: 0;
    bottom: 0;
    width: min(360px, 90vw);
    background: var(--paper, #FBF8F2);
    border-left: 1px solid var(--line, #DDD3BE);
    box-shadow: -8px 0 32px rgba(15, 31, 36, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 95;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 1rem;
    /* keep visible (display:block) so the transform animates */
    display: block;
    visibility: hidden;
  }

  .stot-header.is-menu-open .stot-header__row2 {
    transform: translateX(0);
    visibility: visible;
  }

  .stot-header__nav-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0 1rem;
    gap: 0;
    min-height: 0;
    /* Make room for the sticky utils footer at the bottom of the drawer */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  }

  /* ── Close button (top-right of the drawer) ─────────────────────────── */
  .stot-mobile-drawer-close {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: var(--ocean-soft, #D3E3EC);
    color: var(--ocean-deep, #063349);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 2;
  }

  .stot-mobile-drawer-close:hover,
  .stot-mobile-drawer-close:focus-visible {
    background: var(--ocean, #0A4D6E);
    color: #ffffff;
    outline: none;
    transform: scale(1.05);
  }

  /* ── Nav links inside the drawer ────────────────────────────────────── */
  .stot-nav,
  .stot-nav ul {
    width: 100%;
  }

  .stot-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .stot-nav li {
    width: 100%;
    border-bottom: 1px solid var(--line, #DDD3BE);
  }

  .stot-nav li:last-child {
    border-bottom: none;
  }

  .stot-nav a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ocean, #0A4D6E);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .stot-nav a:hover,
  .stot-nav a:focus-visible {
    background: var(--paper-2, #F3EFE6);
    color: var(--ocean-deep, #063349);
    outline: none;
  }

  /* Active page — ocean-soft fill with ocean-deep text */
  .stot-nav .current-menu-item > a,
  .stot-nav .current_page_item > a,
  .stot-nav .current-menu-ancestor > a,
  .stot-nav a[aria-current="page"] {
    background: var(--ocean-soft, #D3E3EC);
    color: var(--ocean-deep, #063349);
    font-weight: 700;
  }

  /* ── Mobile utils — sticky bottom panel ─────────────────────────────── */
  .stot-header__mobile-utils {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
    margin-top: auto;
    background: var(--paper-2, #F3EFE6);
    border-top: 1px solid var(--line, #DDD3BE);
  }

  .stot-header__mobile-utils > * {
    width: 100%;
  }

  .stot-header__mobile-utils .stot-signin-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .stot-brand .custom-logo {
    max-height: 44px;
  }
}

@media (max-width: 760px) {
  :root {
    --stot-header-height: 64px;
    --stot-header-row1-height: 58px;
  }

  .stot-header__top-inner {
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
  }

  .stot-section-hero {
    border-radius: 22px;
    padding: 1.8rem 1rem 2rem;
    margin-bottom: 1rem;
  }

  .stot-section-hero__badge {
    min-height: 2.65rem;
    padding: 0.45rem 1rem;
    font-size: 0.6rem;
  }

  .stot-section-hero__title {
    font-size: clamp(1.18rem, 8vw, 2rem);
    white-space: normal;
    max-width: 10ch;
  }

  .stot-brand .custom-logo {
    max-height: 46px;
  }

  .stot-search-form,
  .poiex-search-inner,
  body .srs-search-grid,
  body .srs-search-grid-avail {
    grid-template-columns: 1fr;
  }

  .stot-search-form {
    padding: 1rem;
    top: calc(var(--stot-header-height) + 0.25rem);
  }

  .stot-search-actions,
  .stot-prop-search-fields {
    width: 100%;
  }

  .stot-search-actions,
  .stot-prop-search-fields,
  .stot-prop-search-fields > * {
    grid-column: auto;
  }

  .stot-prop-search-bar {
    position: relative;
  }

  .stot-prop-search-date,
  .stot-prop-search-guests,
  .stot-prop-search-submit {
    width: 100%;
    min-width: 0;
  }

  .stot-listing-grid,
  .poiex-cat-group-cards,
  body .srs-vehicle-grid,
  body .sotc-events-grid {
    grid-template-columns: 1fr;
  }

  .stot-listing-cover img,
  .stot-listing-noimg,
  .poiex-card-img {
    height: 210px;
  }

  .poiex-search-bar {
    position: relative;
    top: 0;
  }

  .poiex-si,
  .poiex-btn-search,
  .poiex-btn-clear,
  .poiex-geo-status,
  body .sotc-search-btn {
    width: 100%;
  }

  .poiex-si-sep,
  .poiex-map-legend {
    display: none;
  }

  #poiex-map {
    height: 360px;
  }

  body .sotc-controls-bar {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  body .sotc-filter-bar {
    grid-template-columns: 1fr;
  }

  body .sotc-calendar-grid {
    gap: 4px;
    padding: 4px;
  }

  body .sotc-cal-day {
    min-height: 90px;
  }

  .poi-layout,
  .poi-detail-grid {
    grid-template-columns: 1fr;
  }

  .poi-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-FIRST REDESIGN — Sticky header, bottom nav, touch targets
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sticky header ─────────────────────────────────────────────────────── */
.stot-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.stot-header--hidden {
  transform: translateY(-100%);
}

.stot-header--scrolled {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 20px rgba(28, 27, 31, 0.1);
}

/* ── Mobile bottom navigation bar ──────────────────────────────────────── */
.stot-bottom-nav {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --stot-bottom-nav-height: 60px;
  }

  .stot-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: var(--stot-bottom-nav-height);
    /* Paper-tinted backdrop with proper blur — matches the header. */
    background: rgba(251, 248, 242, 0.94);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid rgba(15, 31, 36, 0.08);
    box-shadow: 0 -6px 18px rgba(15, 31, 36, 0.06);
    justify-content: space-around;
    align-items: stretch;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .stot-bottom-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 6px 0;
    color: var(--ink-2, #2B3D44);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--stot-touch-min, 44px);
    transition: color 0.15s ease;
  }

  .stot-bottom-nav__item:active {
    color: var(--ocean, #0A4D6E);
    transform: scale(0.94);
  }

  /* Active state — ocean color + a soft pill behind the icon for clear
     "you are here" cue. The pill is a pseudo-element so existing markup
     stays unchanged. */
  .stot-bottom-nav__item--active,
  .stot-bottom-nav__item[aria-current="page"] {
    color: var(--ocean, #0A4D6E);
  }
  .stot-bottom-nav__item--active::before,
  .stot-bottom-nav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 6px;
    width: 38px;
    height: 24px;
    border-radius: 999px;
    background: var(--ocean-soft, #D3E3EC);
    z-index: -1;
  }

  .stot-bottom-nav__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: inherit;
  }

  .stot-bottom-nav__icon svg {
    width: 100%;
    height: 100%;
  }

  /* Push main content above the bottom nav */
  main {
    padding-bottom: calc(var(--stot-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Hide the floating "Get our App" tab when bottom nav is visible */
  .stot-app-tab {
    bottom: calc(var(--stot-bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Touch-optimized controls ──────────────────────────────────────────── */

/* Ensure all interactive elements meet 44px minimum tap target */
@media (pointer: coarse) {
  .stot-nav a,
  .stot-util-dd__item,
  .stot-btn,
  .stot-signin-btn,
  .stot-login-btn,
  .stot-btn-register,
  .stot-contact-icon {
    min-height: var(--stot-touch-min, 44px);
    display: inline-flex;
    align-items: center;
  }

  .stot-util-dd__item {
    padding: 0.75rem 1rem;
  }

  .stot-nav a {
    padding: 0.65rem 1rem;
  }
}

/* Active/pressed feedback for touch */
@media (pointer: coarse) {
  .stot-btn:active,
  .stot-signin-btn:active,
  .stot-login-btn:active,
  .stot-listing-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
}

/* ── Accessibility: reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .stot-header {
    transition: none;
  }

  .stot-header--hidden {
    transition: none;
  }
}

/* ── Focus-visible for keyboard users ──────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--stot-color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Skip-to-content link ──────────────────────────────────────────────── */
.stot-skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--stot-color-brand);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--stot-radius) var(--stot-radius);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s ease;
}

.stot-skip-link:focus {
  top: 0;
  outline: 3px solid var(--stot-color-accent);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Per-page shell width overrides.
 *
 * Listing- and grid-heavy templates (search, transport, explore, the POI
 * explorer, the property profile) breathe better at 1600px than at the
 * default 1440px brand max. Body-content templates keep the default.
 *
 * The variable lives on <body> so the cascade hits BOTH the header
 * shell AND the page-content shell — they always match. (Previously
 * this lived on .stot-search-page etc., which left the header 160px
 * narrower than the content on those pages.)
 * ─────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────
 * One shell width for every page.
 *
 * Previously listing templates (/stays/, /explore/, /activities/,
 * /property-detail/, /tours/, /spa/, /sport/, /museum/, /courses/,
 * /dining/, /restaurant-detail/) got a .stot-wide-shell body class that
 * widened them to 1600 px while body-content templates (homepage,
 * about, contact, etc.) stayed at 1280 px. The visible result was that
 * the HEADER on /stays/ was 320 px wider than the header on the
 * homepage — two pages that should feel like the same site looked
 * 100 % different at the edges.
 *
 * We're standardising on the brand 1280 px spec for every page. The
 * hero map + search bar + image strips on listing templates already
 * use `.sotb-bleed` to escape the shell where full-bleed is desirable,
 * so collapsing to 1280 px doesn't sacrifice any visual impact — it
 * only narrows the property-card grid, which is the right tradeoff
 * for cross-page brand consistency.
 *
 * The class is kept as a no-op for backwards compatibility (some
 * plugins may still rely on its presence as a selector hook).
 * ─────────────────────────────────────────────────────────────────── */
body.stot-wide-shell {
    --stot-shell-max: 1280px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Third-party plugin shell bridge.
 *
 * Several SOT-family plugins (Students-of-Timor, Services-of-Timor, the
 * SOT property profile, the calendar) render their public views inside
 * their own top-level `*-public` / `*-fullwidth` containers that don't
 * use .stot-shell. Without this rule those pages spread to 100% of the
 * viewport while the theme's header + footer stay capped at the brand
 * shell — visibly mismatched edges.
 *
 * One generic rule re-imposes the shell on any of those roots. Each
 * plugin keeps its internal layout; only the outer width is normalised.
 *
 * Add new plugin roots here as the family grows.
 * ─────────────────────────────────────────────────────────────────── */
/* Body-prefixed for higher specificity. Students-of-Timor's own
   public.css ships a .sotedu-fullwidth rule that uses width:100vw +
   left:50% + margin-left:-50vw to escape the shell. Tied at (0,1,0),
   the plugin's rule (loaded later) used to win. The "body " prefix
   takes us to (0,1,1) and we explicitly revert each escape property,
   so the shell wins regardless of enqueue order. */
body .sotedu-public,
body .sotedu-fullwidth,
body .svot-public,
body .svot-fullwidth,
body .sot-profile-wrap,
body .sotc-public,
body .sot-blocks-page,
body .ofa-profile-page,
body .ofa-account-page,
body .ofa-account-card-wide {
    max-width: var(--stot-shell-max, 1440px);
    width: auto;
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto;
    padding-inline: clamp(1rem, 2vw, 1.5rem);
    box-sizing: border-box;
}

/* Children that intentionally want to break out of the shell can opt
   into edge-to-edge with .sotb-bleed (already defined in sot-blocks).
   Plugin-side full-bleed heroes can add the same class to participate. */

/* ════════════════════════════════════════════════════════════════════
 *  /stays/ LAYOUT FIX  (round 11)
 *
 *  Three issues the user flagged:
 *    1. Search form appears ABOVE the map; should be UNDER it.
 *    2. The listing grid is wider than the header + map (escapes shell).
 *    3. The "All stays  3" filter chip has an oddly heavy shadow on its
 *       count bubble that the other chips don't share.
 *
 *  We use flexbox `order` to flip the visual sequence without touching
 *  page-search.php's DOM order (so JS / aria associations / no-JS
 *  fallback all keep working).
 * ════════════════════════════════════════════════════════════════════ */
.stot-search-page {
  display: flex;
  flex-direction: column;
}
/*
 * Desired visual order:
 *   1. hero map
 *   2. search-form shell  (first .stot-shell child in the DOM)
 *   3. listings shell     (second .stot-shell child in the DOM)
 *
 * `:nth-of-type` counts by TAG NAME, not class — and the section has
 * three <div> children (shell, hero-map, shell), so `:nth-of-type(2)`
 * matched the hero-map (the 2nd div), not the listings shell. The
 * listings shell stayed at default `order: 0` and rendered first.
 *
 * Fix: map → order 1, every shell → order 2. Within an equal order
 * the browser preserves DOM order, so the search-shell (1st in DOM)
 * lands above the listings-shell (2nd in DOM). No counting needed.
 */
.stot-search-page > .stot-hero-map { order: 1; }
.stot-search-page > .stot-shell    { order: 2; }
/* The first shell tucks UP into the bottom of the map (search overlap). */
.stot-search-page > .stot-shell:first-child { margin-top: -2.5rem; }
.stot-search-page > .stot-shell:first-child .stot-search-stick {
  position: relative;
  z-index: 5;
}
@media (max-width: 760px) {
  .stot-search-page > .stot-shell:first-child { margin-top: 1rem; }
}

/* Listing grid was rendering wider than the 1280 px shell — make sure
   the wide-shell variants don't escape, and the chip row stays inside
   the shell padding. */
.stot-search-page .stot-listing-grid,
.stot-search-page .stot-results-controls,
.stot-search-page .stot-search-layout {
  max-width: 100%;
}

/* Filter-chip count badge — was inheriting a heavy box-shadow that made
   the "3" look like a sticker. Flatten + tint to match the brand. */
.stot-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  margin-left: 0.4em;
  border-radius: 999px;
  background: rgba(15, 31, 36, 0.08);
  color: var(--ink-2, #2B3D44);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  border: 0;
  line-height: 1;
}
.stot-chip.is-active .stot-chip__count {
  background: rgba(251, 248, 242, 0.22);
  color: var(--paper, #FBF8F2);
}


/* ════════════════════════════════════════════════════════════════════
 *  SITE-WIDE READABILITY & TYPOGRAPHY PASS  (round 5)
 *
 *  These rules establish consistent type scale, line-height, color
 *  contrast (WCAG 2.1 AA ≥ 4.5:1 on body, ≥ 3:1 on 18 px+), and
 *  text-column width across every page template.
 *
 *  Cascade rules from earlier rounds remain in force; this section
 *  ONLY tightens defaults that we'd otherwise have to set per-template.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Base body — Inter Tight, 17 px, AA contrast ─────────────────── */
body {
  font-family: var(--stot-font-body, 'Inter Tight', system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink, #0F1F24);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings — Fraunces 500, tightened tracking, balanced wrap ──── */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--stot-font-heading, 'Fraunces', Georgia, serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--ink, #0F1F24);
  text-wrap: balance; /* CSS Text Module Level 4 — graceful fallback */
}

/* Type scale — restrained, OTA-style. No 56px billboard headlines. */
.stot-page h1,
.stot-page-article__title,
.stot-card h1,
body .sot-page h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  margin: 0 0 0.85rem;
  max-width: 28ch;
}

.stot-page h2,
.stot-card h2,
.wp-block-heading.h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  margin: 1.6rem 0 0.65rem;
  max-width: 32ch;
}

.stot-page h3,
.stot-card h3,
.wp-block-heading.h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  margin: 1.25rem 0 0.5rem;
  max-width: 36ch;
}

.stot-page h4,
.stot-card h4,
.wp-block-heading.h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem;
}

/* ── Long-form prose — constrain measure for readability ─────────── */
.stot-prose,
.stot-page-article__title + .stot-prose {
  max-width: 68ch;
}
.stot-prose p,
.stot-page p,
.stot-card p,
.sot-card p,
.stot-prose li,
.stot-page li {
  line-height: 1.65;
  color: var(--ink-2, #2B3D44);
  margin: 0 0 1rem;
}
.stot-prose p:last-child,
.stot-page p:last-child,
.stot-card p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph — first paragraph after a title gets a small bump */
.stot-prose > p:first-child,
.stot-page-article > .stot-prose > p:first-child {
  font-size: 1.08rem;
  color: var(--ink, #0F1F24);
}

/* Links inside body copy — underline on hover, ocean tint */
.stot-prose a,
.stot-page p a,
.stot-card p a {
  color: var(--ocean, #0A4D6E);
  text-decoration-color: rgba(10, 77, 110, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.stot-prose a:hover,
.stot-page p a:hover,
.stot-card p a:hover {
  color: var(--ocean-deep, #07344B);
  text-decoration-color: currentColor;
}

/* ── Lists — generous indent, comfortable spacing ────────────────── */
.stot-prose ul,
.stot-prose ol,
.stot-page > ul,
.stot-page > ol {
  padding-left: 1.4em;
  margin: 0 0 1rem;
}
.stot-prose li + li,
.stot-page > ul > li + li,
.stot-page > ol > li + li {
  margin-top: 0.4em;
}

/* ── Eyebrows / kickers — universal small-caps treatment ─────────── */
.sot-eyebrow,
.stot-eyebrow,
.sotb-section__eyebrow,
.stot-section__eyebrow {
  display: inline-block;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocean, #0A4D6E);
  margin: 0 0 0.4rem;
}

/* ── Tables in body copy ─────────────────────────────────────────── */
.stot-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.25rem 0;
}
.stot-prose th,
.stot-prose td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line, #DDD3BE);
  vertical-align: top;
}
.stot-prose th {
  background: var(--paper-2, #F3EFE6);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Blockquotes ─────────────────────────────────────────────────── */
.stot-prose blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--ocean, #0A4D6E);
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink, #0F1F24);
  background: var(--paper, #FBF8F2);
}

/* ── Code in body copy ───────────────────────────────────────────── */
.stot-prose code,
.stot-page code {
  background: var(--paper-2, #F3EFE6);
  border: 1px solid var(--line, #DDD3BE);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.92em;
}

/* ── HR — soft brand divider, not a stark grey line ──────────────── */
.stot-prose hr,
.stot-page hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line, #DDD3BE), transparent);
  margin: 2rem 0;
}

/* ── Images in prose — auto width, never overflow ────────────────── */
.stot-prose img,
.stot-page img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md, 10px);
}

/* ── Mobile readability — keep type from getting tiny ────────────── */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .stot-prose p,
  .stot-page p,
  .stot-card p { line-height: 1.6; }
}

/* ════════════════════════════════════════════════════════════════════
 *  FOCUS STATES & TOUCH TARGETS  (round 5)
 *
 *  Every interactive surface across the site gets:
 *    - A visible keyboard focus ring (WCAG 2.4.7)
 *    - A 44 x 44 px minimum touch target on mobile (WCAG 2.5.5 + Apple
 *      HIG + Material Design)
 *    - A consistent hover affordance
 *
 *  We use :focus-visible so the focus ring only shows on keyboard nav,
 *  not on every mouse click. Mobile keeps the larger tap area without
 *  exposing the ring.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Universal keyboard focus ring ────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus {
  outline: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ocean, #0A4D6E);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Forms wrap their own focus ring on the field — disable the universal
   one inside form widgets so we don't double-ring. */
.sot-search-card input:focus-visible,
.sot-search-card select:focus-visible,
.stot-search-form input:focus-visible,
.stot-search-form select:focus-visible,
.stot-prop-search-fields input:focus-visible,
.stot-prop-search-fields select:focus-visible,
.sot-booking-field input:focus-visible,
.sot-booking-field select:focus-visible,
.sot-booking-field textarea:focus-visible {
  outline: none;
}

/* ── Minimum touch target on mobile (44 × 44 px) ──────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Top nav and footer link rows */
  .stot-nav a,
  .stot-footer__link-list a,
  .stot-footer__bar-terms a,
  .stot-bottom-nav__item {
    min-height: 44px;
  }
  /* Inline interactives — keep the visual size but expand the hit area
     with padding. min-width 44px ensures icon-only buttons are tappable. */
  .stot-nav a,
  .sot-search-card button[type="submit"],
  .stot-search-form button[type="submit"],
  .stot-prop-search-submit,
  .sotb-search-hero__submit,
  .sotb-search-hero__chip,
  .sotb-types__chip,
  .sotb-featured__cta,
  .sotb-host__cta {
    min-width: 44px;
  }
  /* Form inputs — already at 48 px via --sot-search-input-h, but make
     sure other inputs comply. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px;
  }
}

/* ── Visible hover for every primary interactive ─────────────────── */
a:hover,
button:hover,
[role="button"]:hover {
  cursor: pointer;
}

/* Buttons get a subtle press effect by default */
button:not(:disabled):active,
.sot-btn:not(:disabled):active,
.stot-btn:not(:disabled):active {
  transform: translateY(1px);
}

/* Disabled state — visible but non-interactive */
:where(a, button, input, select, textarea)[disabled],
:where(a, button, input, select, textarea):disabled,
:where(a, button)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Skip-link is keyboard-only but should be obvious on focus ───── */
.stot-skip-link:focus,
.stot-skip-link:focus-visible {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--ink, #0F1F24);
  color: var(--paper, #FBF8F2);
  border-radius: 8px;
  outline: 3px solid var(--ocean, #0A4D6E);
  outline-offset: 2px;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  text-decoration: none;
}

/* ── Reduced-motion preference ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 *  EMPTY STATES & LOADING STATES  (round 5)
 *
 *  Three primitives that any page template / plugin partial can opt
 *  into for graceful degradation:
 *
 *    .stot-empty       — friendly "no results" panel with icon + copy
 *    .stot-skeleton    — pulsing placeholder (cards, rows, images)
 *    .stot-spinner     — small inline activity ring
 *
 *  Existing "No stays found" / "No image yet" rules in page-search.php
 *  pick up the .stot-empty class automatically because the search
 *  template already wraps the no-results message in .stot-card.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Empty state panel ────────────────────────────────────────────── */
.stot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: clamp(2rem, 4vw, 3.5rem) 1.5rem;
  text-align: center;
  background: var(--paper-2, #F3EFE6);
  border: 1px dashed rgba(15, 31, 36, 0.18);
  border-radius: 14px;
  color: var(--ink-2, #2B3D44);
}
.stot-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 77, 110, 0.08);
  color: var(--ocean, #0A4D6E);
}
.stot-empty__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stot-empty__title {
  margin: 0;
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink, #0F1F24);
}
.stot-empty__body {
  margin: 0;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2, #2B3D44);
}
.stot-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.3rem;
  border-radius: 10px;
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
  text-decoration: none;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.92rem;
  transition: background 0.15s ease, transform 0.1s ease;
}
.stot-empty__cta:hover { background: var(--ocean-deep, #07344B); }

/* Ghost variant + actions wrapper (round-12 search empty-state). The
   wrapper inline-flexes the primary "Clear filters" CTA next to a
   secondary "Suggest a host" link so a true dead-end at least invites
   contribution rather than feeling like a wall. */
.stot-empty__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.stot-empty__cta--ghost {
  background: transparent;
  color: var(--ocean, #0A4D6E);
  border: 1px solid rgba(10, 77, 110, 0.35);
}
.stot-empty__cta--ghost:hover {
  background: rgba(10, 77, 110, 0.08);
  color: var(--ocean-deep, #07344B);
}

/* ── Make existing "no results" cards use the empty-state look ───── */
.stot-search-results > .stot-card:only-child h3,
.stot-listing-grid:empty + .stot-card h3 {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 1.25rem;
}

/* ── Skeleton loader — pulsing placeholder ───────────────────────── */
.stot-skeleton {
  display: block;
  background: linear-gradient(
      90deg,
      rgba(15, 31, 36, 0.06) 0%,
      rgba(15, 31, 36, 0.12) 50%,
      rgba(15, 31, 36, 0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: stot-skeleton-pulse 1.4s ease-in-out infinite;
}
.stot-skeleton--text   { height: 0.95em; border-radius: 4px; margin: 0.4em 0; }
.stot-skeleton--title  { height: 1.5em; border-radius: 4px; width: 60%; margin: 0.4em 0; }
.stot-skeleton--image  { aspect-ratio: 4 / 3; border-radius: 12px; }
.stot-skeleton--circle { aspect-ratio: 1; border-radius: 50%; }

@keyframes stot-skeleton-pulse {
  0%   { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

/* ── Inline spinner ───────────────────────────────────────────────── */
.stot-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(10, 77, 110, 0.18);
  border-top-color: var(--ocean, #0A4D6E);
  border-radius: 50%;
  animation: stot-spin 0.7s linear infinite;
  vertical-align: -3px;
}
.stot-spinner--lg { width: 36px; height: 36px; border-width: 3.5px; }

@keyframes stot-spin {
  to { transform: rotate(360deg); }
}

/* When a button is in a loading state */
.stot-btn[aria-busy="true"],
button[aria-busy="true"] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.stot-btn[aria-busy="true"]::after,
button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(251, 248, 242, 0.4);
  border-top-color: var(--paper, #FBF8F2);
  border-radius: 50%;
  animation: stot-spin 0.7s linear infinite;
}

/* ── Visually-hidden helper (accessible labels) ──────────────────── */
.stot-sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════
 *  COOKIE / CONSENT BANNER  (round 7)
 *
 *  Minimal first-party banner anchored to the bottom of the viewport.
 *  Slides up just above the bottom-nav on phones and sits flush at the
 *  bottom on desktop. Two choices: "Essential only" and "Accept all".
 *  The footer.php script writes the choice to localStorage and dispatches
 *  a `stot:consent` event so any waiting analytics scripts can fire.
 * ════════════════════════════════════════════════════════════════════ */
.stot-cookie-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 9998;
  padding: 0.75rem clamp(1rem, 3vw, 2rem) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 31, 36, 0.96);
  color: var(--paper, #FBF8F2);
  border-top: 1px solid rgba(251, 248, 242, 0.12);
  box-shadow: 0 -12px 40px rgba(15, 31, 36, 0.32);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stot-cookie-banner[hidden] { display: none; }

.stot-cookie-banner__inner {
  max-width: var(--stot-shell-max, 1280px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.stot-cookie-banner__body {
  flex: 1 1 28rem;
  min-width: 0;
}
.stot-cookie-banner__title {
  margin: 0 0 0.2rem;
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.stot-cookie-banner__copy {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(251, 248, 242, 0.78);
  max-width: 60ch;
}
.stot-cookie-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.stot-cookie-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.stot-cookie-banner__btn--primary {
  background: var(--paper, #FBF8F2);
  color: var(--ink, #0F1F24);
}
.stot-cookie-banner__btn--primary:hover {
  background: var(--ocean-soft, #D3E3EC);
  color: var(--ocean-deep, #063349);
}
.stot-cookie-banner__btn--ghost {
  background: transparent;
  color: var(--paper, #FBF8F2);
  border-color: rgba(251, 248, 242, 0.32);
}
.stot-cookie-banner__btn--ghost:hover {
  border-color: rgba(251, 248, 242, 0.6);
  background: rgba(251, 248, 242, 0.08);
}

/* ════════════════════════════════════════════════════════════════════
 *  MULTI-LANGUAGE LAYOUT POLISH  (round 7)
 *
 *  Portuguese and Tetum strings can be 30-50% longer than the English
 *  source. Adds overflow guards on:
 *    - top-nav items (which were nowrap)
 *    - CTA buttons (which can't wrap mid-word in some PT/TET strings)
 *    - card kickers
 *    - search-form labels
 *    - footer column headers
 *
 *  The general approach: replace `white-space: nowrap` with
 *  `text-wrap: balance` + tighter padding so longer labels still fit
 *  on one or two lines without breaking the layout.
 * ════════════════════════════════════════════════════════════════════ */

/* Locale-aware tweaks — applied when the <html lang> matches a known
   verbose language. The English default keeps `white-space: nowrap`
   on nav items for the cleanest desktop look; PT/TET/ID/JA allow wrap
   so long labels like "Restaurantes e Bares" don't push other items
   off the row. */
:where(html[lang="pt"], html[lang^="pt-"],
       html[lang="tet"], html[lang^="tet-"],
       html[lang="id"], html[lang^="id-"]) .stot-nav a {
  white-space: normal;
  text-wrap: balance;
  text-align: center;
  line-height: 1.15;
  padding: 0.5rem 0.65rem;
}
:where(html[lang="pt"], html[lang^="pt-"],
       html[lang="tet"], html[lang^="tet-"]) .stot-nav ul {
  gap: 0.2rem 0.35rem;
}

/* CTA buttons across the site — allow 2-line wrap with tight leading
   instead of horizontal overflow. */
.stot-btn,
.sotb-search-hero__submit,
.sotb-search-hero__chip,
.sotb-host__cta,
.sotb-featured__cta,
.stot-empty__cta,
.sotb-types__chip,
.stot-cookie-banner__btn {
  white-space: normal;
  text-wrap: balance;
  line-height: 1.2;
}

/* Search-form field labels — allow up to two lines */
.stot-search-field label,
.sot-search-card label {
  white-space: normal;
  line-height: 1.15;
}

/* Hero strapline can be longer in PT — let it wrap to 3 lines */
.sotb-search-hero__strapline,
.sotb-hero__lead,
.sotb-slider__lead,
.sotb-hero-header__lead {
  text-wrap: pretty;
}

/* Property card titles — already constrained at 22 ch but tighten
   wrapping rules so long Portuguese property names don't overflow. */
.sotb-featured__title,
.sot-prop-card h3 {
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Footer column titles — uppercase Fraunces is short in EN ("EXPLORE",
   "SUPPORT") but PT ("DESCOBRIR", "ASSISTÊNCIA") is much wider. Let
   them wrap. */
.stot-footer__col-title,
.stot-footer__section-title,
.stot-footer__group-title {
  white-space: normal;
  line-height: 1.2;
}

/* Trust strip + Why-Timor + Travel Tips labels — preserve readability
   when translations get long. */
.sotb-trust__label,
.sotb-why__title,
.sotb-why__copy,
.sotb-tips__title,
.sotb-tips__copy {
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Header utility pill (USD ▾, EN ▾) — never collapse to ellipsis;
   instead allow the pill to grow if needed. */
.stot-util-dd > summary {
  max-width: none;
  text-overflow: clip;
}

/* Mobile: stack body above buttons, sit above the bottom-nav. */
@media (max-width: 760px) {
  .stot-cookie-banner {
    bottom: var(--stot-bottom-nav-height, 60px);
  }
  .stot-cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .stot-cookie-banner__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .stot-cookie-banner__btn { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
 *  Search results — sort + filter chip row (round 9)
 *  Lives above the .stot-listing-grid on /stays/. Inherits the same
 *  brand tokens as the unified search-form (.stot-search-form) so the
 *  controls feel like a continuation of the search bar, not a new UI.
 *  v1 implementation is client-side only — see page-search.php inline
 *  script. Server-side sort/filter is a separate round.
 * ════════════════════════════════════════════════════════════════════ */
.stot-results-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 1rem;
  padding: 0;
}

/* Horizontally-scrollable chip row with subtle scroll-fade indicators
   (mask-image) so users on narrow screens know more chips exist. */
.stot-results-controls__chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.25rem 0.5rem 0.5rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.stot-results-controls__chips::-webkit-scrollbar { display: none; }

/* Pill button — matches the search-form input border + radius vocabulary
   but uses a 999px radius so it reads as a chip, not an input. */
.stot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--sot-search-border, var(--line, #DDD3BE));
  background: #fff;
  color: var(--ink, #0F1F24);
  font-family: var(--sans, 'Inter Tight', 'Inter', system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.stot-chip:hover {
  border-color: var(--sot-search-border-hover, var(--ocean, #0A4D6E));
  background: var(--paper-2, #F3EFE6);
}
.stot-chip:focus-visible {
  outline: none;
  border-color: var(--ocean, #0A4D6E);
  box-shadow: 0 0 0 3px var(--sot-search-focus, rgba(10, 77, 110, 0.18));
}
.stot-chip.is-active {
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
  border-color: var(--ocean, #0A4D6E);
}
.stot-chip.is-active:hover {
  background: var(--ocean-deep, #063349);
  border-color: var(--ocean-deep, #063349);
}

/* Count bubble after the "All stays" chip — visually subordinate. */
.stot-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--paper-2, #F3EFE6);
  color: var(--ink-3, #546870);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.stot-chip.is-active .stot-chip__count {
  background: rgba(251, 248, 242, 0.18);
  color: var(--paper, #FBF8F2);
}

/* Sort dropdown wrapper — eyebrow label sits inline on desktop. */
.stot-results-controls__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}
.stot-results-controls__sort label {
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: var(--sot-search-label-size, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sot-search-label-color, var(--ink-2, #2B3D44));
  margin: 0;
  white-space: nowrap;
}
.stot-results-controls__sort select {
  min-height: var(--sot-search-input-h, 48px);
  border-radius: var(--sot-search-radius, 12px);
  border: 1px solid var(--sot-search-border, var(--line, #DDD3BE));
  background: #fff;
  color: var(--ink, #0F1F24);
  font-family: var(--sans, 'Inter Tight', 'Inter', system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 2.1rem 0.5rem 0.9rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230F1F24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stot-results-controls__sort select:hover {
  border-color: var(--sot-search-border-hover, var(--ocean, #0A4D6E));
}
.stot-results-controls__sort select:focus {
  outline: none;
  border-color: var(--sot-search-border-hover, var(--ocean, #0A4D6E));
  box-shadow: 0 0 0 3px var(--sot-search-focus, rgba(10, 77, 110, 0.18));
}

/* Stack chips above the sort on narrow viewports so neither row is
   squeezed against the other. */
@media (max-width: 720px) {
  .stot-results-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .stot-results-controls__sort {
    justify-content: flex-end;
  }
  .stot-results-controls__sort select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
 *  /food/ — two-row chip filter variant
 *  Re-uses the round-9 chip vocabulary but stacks Venue + Cuisine
 *  rows vertically, each with its own sub-heading. Used by the
 *  Restaurants & Bars Listing template (page-dining.php) so the
 *  Food megamenu queries (?venue= / ?cuisine=) render as two
 *  parallel filter axes.
 * ════════════════════════════════════════════════════════════════════ */
.stot-results-controls--food {
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}
.stot-results-controls--food .stot-results-controls__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.stot-results-controls__group-heading {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #546870);
  margin: 0;
}
/* Anchor-style chips on the food page — keep the same look as button
   chips elsewhere (we use <a> here so each filter URL is shareable). */
.stot-results-controls--food .stot-chip {
  text-decoration: none;
}
.stot-results-controls--food .stot-chip:hover {
  text-decoration: none;
}