@charset "UTF-8";
/* ==========================================================================
   Otelbuk — design system
   1. Tokens          6. Cards            11. Overlays
   2. Reset / base    7. Rating / badges  12. Feedback
   3. Layout          8. Navigation       13. Search & filters
   4. Typography      9. Tables           14. Marketing blocks
   5. Controls       10. Data display     15. Utilities / print
   No external requests. Icons are inline SVG.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* -- brand: the logo green ----------------------------------------------
     --sea-500 (#09B36F) is sampled straight from logo.png and is THE brand
     colour: it carries the logotype, accents, focus rings and chart series.
     Solid buttons use --sea-700 instead, because several components hardcode
     a white label and white on #09B36F is only 2.73:1 — well under AA. The
     700 step is the same hue at 4.99:1, so the family reads as one colour
     while staying legible. Use --brand-bright when the true logo green is
     wanted on a non-text surface. */
  --sea-50: #EAFBF3;
  --sea-100: #CFF6E3;
  --sea-200: #A0EDC7;
  --sea-300: #63DFA6;
  --sea-400: #1ED285;
  --sea-500: #09B36F;
  --sea-600: #089A5F;
  --sea-700: #07804F;
  --sea-800: #066640;
  --sea-900: #054F32;

  /* -- ocean blue ---------------------------------------------------------
     The partner colour, pitched at the same saturation and lightness as the
     logo green (hue 200 against its 156) so neither dominates. Links, trust
     marks, deep surfaces, the second half of the brand gradient. 4.67:1 on
     white, so it can carry a white label directly. */
  --ocean-50: #EAF7FD;
  --ocean-100: #CDECFA;
  --ocean-200: #9BD9F4;
  --ocean-300: #5FC1EA;
  --ocean-400: #1FA2D8;
  --ocean-500: #097BB3;
  --ocean-600: #086A9B;
  --ocean-700: #075780;
  --ocean-800: #064566;
  --ocean-900: #053751;

  /* The logo gradient, reusable anywhere the brand needs to feel oceanic. */
  --brand-gradient: linear-gradient(135deg, var(--ocean-500) 0%, var(--sea-500) 100%);

  --brand:          var(--sea-700);
  --brand-hover:    var(--sea-800);
  --brand-active:   var(--sea-900);
  --brand-soft:     var(--sea-50);
  --brand-soft-2:   var(--sea-100);
  --brand-border:   var(--sea-200);
  --brand-on:       #FFFFFF;
  /* The untouched logo green, for the logotype and non-text brand surfaces. */
  --brand-bright:   var(--sea-500);
  --brand-rgb:      7 128 79;

  --accent:         var(--ocean-500);
  --accent-hover:   var(--ocean-600);
  --accent-soft:    var(--ocean-50);
  --accent-rgb:     9 123 179;

  /* -- accents ---------------------------------------------------------- */
  --gold-300: #FFD98A;
  --gold-400: #FFBF4D;
  --gold-500: #F6A609;
  --gold-600: #D08705;
  --gold-soft: #FFF6E3;

  --teal-100: #D3F4EF;
  --teal-400: #2AB3A2;
  --teal-500: #0E9384;
  --teal-600: #0B7B6E;
  --teal-soft: #E8F8F5;

  --amber-500: #DC7909;
  --amber-soft: #FFF4E2;

  --red-500:  #DC2B2B;
  --red-600:  #B91C1C;
  --red-soft: #FEECEC;

  --blue-500: #2563D9;
  --blue-soft: #EAF1FE;

  --violet-500: #6D40D6;

  /* -- warm neutral ramp ------------------------------------------------ */
  --ink:      #101828;
  --n-0:      #FFFFFF;
  --n-25:     #FDFCFB;
  --n-50:     #FAF8F7;
  --n-100:    #F4F1EF;
  --n-150:    #EDE9E6;
  --n-200:    #E3DEDA;
  --n-300:    #D2CBC6;
  --n-400:    #ABA29C;
  --n-500:    #857B74;
  --n-600:    #635A55;
  --n-700:    #45403C;
  --n-800:    #2B2724;
  --n-900:    #1A1715;

  /* -- semantic surfaces ------------------------------------------------ */
  --bg:            var(--n-50);
  --bg-alt:        var(--n-100);
  --surface:       var(--n-0);
  --surface-2:     var(--n-25);
  --surface-3:     var(--n-100);
  --surface-inset: var(--n-100);
  --surface-inverse: var(--ink);
  --overlay:       rgb(16 24 40 / .58);
  --scrim:         linear-gradient(to top, rgb(10 14 24 / .82) 0%, rgb(10 14 24 / .30) 46%, rgb(10 14 24 / 0) 100%);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-150);

  --text:          var(--ink);
  --text-2:        #4A5567;
  --text-3:        #6B7488;
  --text-muted:    #7C8496;
  --text-on-dark:  #F6F7FA;
  --text-on-brand: #FFFFFF;

  --focus:         #1D6BF0;
  --focus-ring:    0 0 0 2px var(--surface), 0 0 0 4px rgb(29 107 240 / .55);
  --focus-ring-brand: 0 0 0 2px var(--surface), 0 0 0 4px rgb(var(--brand-rgb) / .45);

  /* -- tones (badges, alerts, chips) ------------------------------------ */
  --tone-success-bg: var(--teal-soft);
  --tone-success-fg: var(--teal-600);
  --tone-success-bd: #B6E9E0;
  --tone-warning-bg: var(--amber-soft);
  --tone-warning-fg: #96520A;
  --tone-warning-bd: #F7DCAF;
  --tone-danger-bg:  var(--red-soft);
  --tone-danger-fg:  var(--red-600);
  --tone-danger-bd:  #F6C9C9;
  --tone-info-bg:    var(--blue-soft);
  --tone-info-fg:    #1B4CA8;
  --tone-info-bd:    #C8DAFB;
  --tone-neutral-bg: var(--n-100);
  --tone-neutral-fg: var(--n-700);
  --tone-neutral-bd: var(--n-200);
  --tone-brand-bg:   var(--brand-soft);
  --tone-brand-fg:   var(--sea-700);
  --tone-brand-bd:   var(--brand-border);

  /* -- typography ------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-num: var(--font);

  --fs-base: clamp(0.9375rem, 0.905rem + 0.16vw, 1rem);   /* 15 → 16 */
  --fs-3xs: 0.625rem;
  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-lg:  1rem;
  --fs-xl:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);
  --fs-2xl: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
  --fs-3xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --fs-4xl: clamp(1.625rem, 1.36rem + 1.15vw, 2.25rem);
  --fs-5xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-6xl: clamp(2.375rem, 1.6rem + 3.4vw, 3.75rem);

  --lh-tight: 1.16;
  --lh-snug:  1.32;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-heavy:  800;

  --track-tight: -0.02em;
  --track-snug:  -0.011em;
  --track-wide:  0.02em;
  --track-caps:  0.06em;

  /* -- spacing (4px scale) ---------------------------------------------- */
  --s-0:  0;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-7:  1.75rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-14: 3.5rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --gutter: clamp(1rem, 0.55rem + 2vw, 2rem);
  --container: 1280px;
  --container-wide: 1560px;
  --container-narrow: 760px;

  /* -- radii ------------------------------------------------------------ */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* -- shadows (coloured ambient tint) ---------------------------------- */
  --shadow-1: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(66 42 38 / .06);
  --shadow-2: 0 2px 4px rgb(16 24 40 / .04), 0 8px 20px -6px rgb(66 42 38 / .14);
  --shadow-3: 0 4px 8px rgb(16 24 40 / .05), 0 24px 48px -12px rgb(66 42 38 / .22);
  --shadow-brand: 0 6px 18px -6px rgb(var(--brand-rgb) / .45);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / .6);

  /* -- motion ----------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease:        cubic-bezier(.2, .6, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);

  /* -- layout constants ------------------------------------------------- */
  --header-h: 68px;
  --header-h-compact: 60px;
  --tabbar-h: 60px;
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-dropdown: 70;
  --z-tabbar: 75;
  --z-sheet: 90;
  --z-modal: 100;
  --z-toast: 120;
}

/* -- dark theme ---------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  /* Dark mode lifts the brand to the 400 step: the 600 used in light mode
     goes muddy against a near-black ground. */
  /* Dark mode can use the true logo green: on a near-black ground #09B36F
     already clears AA, and a step brighter keeps it from going muddy. */
  --brand:        #1ED285;
  --brand-hover:  #63DFA6;
  --brand-active: #A0EDC7;
  --brand-soft:   #06271A;
  --brand-soft-2: #0A3624;
  --brand-border: #125135;
  --brand-rgb:    30 210 133;
  --brand-bright: #09B36F;
  /* A bright plate needs a dark label, not white. */
  --brand-on:     #04291B;

  --accent:       #1FA2D8;
  --accent-hover: #5FC1EA;
  --accent-soft:  #052635;
  --accent-rgb:   31 162 216;

  --gold-500: #FFB93D;
  --teal-500: #2CC0AC;

  --ink:  #F4F6FA;
  --n-0:  #14161C;
  --n-25: #171A21;
  --n-50: #101318;
  --n-100: #1D2129;
  --n-150: #232831;
  --n-200: #2C323D;
  --n-300: #3A4250;
  --n-400: #5B6474;
  --n-500: #838C9C;
  --n-600: #A3ABB9;
  --n-700: #C3C9D4;
  --n-800: #DFE3EA;
  --n-900: #F4F6FA;

  --bg:            #0D1016;
  --bg-alt:        #12151C;
  --surface:       #171A21;
  --surface-2:     #1B1F27;
  --surface-3:     #21262F;
  --surface-inset: #12151C;
  --surface-inverse: #F4F6FA;
  --overlay:       rgb(4 6 10 / .72);

  --border:        #2A303A;
  --border-strong: #39414E;
  --border-subtle: #232830;

  --text:          #EDF0F5;
  --text-2:        #B9C0CC;
  --text-3:        #98A0AE;
  --text-muted:    #868E9C;
  --text-on-dark:  #F6F7FA;

  --focus:         #6FA5FF;
  --focus-ring:    0 0 0 2px var(--surface), 0 0 0 4px rgb(111 165 255 / .6);
  --focus-ring-brand: 0 0 0 2px var(--surface), 0 0 0 4px rgb(var(--brand-rgb) / .5);

  --tone-success-bg: #0F2A26; --tone-success-fg: #5FDCC8; --tone-success-bd: #1D473F;
  --tone-warning-bg: #2C2113; --tone-warning-fg: #FFC46B; --tone-warning-bd: #4A3618;
  --tone-danger-bg:  #2E1618; --tone-danger-fg:  #FF8A8A; --tone-danger-bd:  #4C2225;
  --tone-info-bg:    #131F35; --tone-info-fg:    #8FB6FF; --tone-info-bd:    #23375C;
  --tone-neutral-bg: #21262F; --tone-neutral-fg: #C3C9D4; --tone-neutral-bd: #2E3540;
  --tone-brand-bg:   #06271A; --tone-brand-fg:   #63DFA6; --tone-brand-bd:   #125135;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 2px 6px rgb(0 0 0 / .45), 0 10px 24px -8px rgb(0 0 0 / .6);
  --shadow-3: 0 6px 12px rgb(0 0 0 / .45), 0 28px 56px -14px rgb(0 0 0 / .7);
  --shadow-brand: 0 6px 20px -8px rgb(var(--brand-rgb) / .55);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / .04);

  --scrim: linear-gradient(to top, rgb(3 5 9 / .9) 0%, rgb(3 5 9 / .35) 46%, rgb(3 5 9 / 0) 100%);
}

/* System preference — only when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --brand: #1ED285; --brand-hover: #63DFA6; --brand-active: #A0EDC7;
    --brand-soft: #06271A; --brand-soft-2: #0A3624; --brand-border: #125135;
    --brand-rgb: 30 210 133; --brand-bright: #09B36F; --brand-on: #04291B;
    --accent: #1FA2D8; --accent-hover: #5FC1EA; --accent-soft: #052635; --accent-rgb: 31 162 216;
    --gold-500: #FFB93D; --teal-500: #2CC0AC;

    --ink: #F4F6FA;
    --n-0: #14161C; --n-25: #171A21; --n-50: #101318; --n-100: #1D2129;
    --n-150: #232831; --n-200: #2C323D; --n-300: #3A4250; --n-400: #5B6474;
    --n-500: #838C9C; --n-600: #A3ABB9; --n-700: #C3C9D4; --n-800: #DFE3EA; --n-900: #F4F6FA;

    --bg: #0D1016; --bg-alt: #12151C; --surface: #171A21; --surface-2: #1B1F27;
    --surface-3: #21262F; --surface-inset: #12151C; --surface-inverse: #F4F6FA;
    --overlay: rgb(4 6 10 / .72);

    --border: #2A303A; --border-strong: #39414E; --border-subtle: #232830;
    --text: #EDF0F5; --text-2: #B9C0CC; --text-3: #98A0AE; --text-muted: #868E9C;

    --focus: #6FA5FF;
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgb(111 165 255 / .6);
    --focus-ring-brand: 0 0 0 2px var(--surface), 0 0 0 4px rgb(var(--brand-rgb) / .5);

    --tone-success-bg: #0F2A26; --tone-success-fg: #5FDCC8; --tone-success-bd: #1D473F;
    --tone-warning-bg: #2C2113; --tone-warning-fg: #FFC46B; --tone-warning-bd: #4A3618;
    --tone-danger-bg: #2E1618;  --tone-danger-fg: #FF8A8A;  --tone-danger-bd: #4C2225;
    --tone-info-bg: #131F35;    --tone-info-fg: #8FB6FF;    --tone-info-bd: #23375C;
    --tone-neutral-bg: #21262F; --tone-neutral-fg: #C3C9D4; --tone-neutral-bd: #2E3540;
    --tone-brand-bg: #06271A;   --tone-brand-fg: #63DFA6;   --tone-brand-bd: #125135;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 2px 6px rgb(0 0 0 / .45), 0 10px 24px -8px rgb(0 0 0 / .6);
    --shadow-3: 0 6px 12px rgb(0 0 0 / .45), 0 28px 56px -14px rgb(0 0 0 / .7);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / .04);
    --scrim: linear-gradient(to top, rgb(3 5 9 / .9) 0%, rgb(3 5 9 / .35) 46%, rgb(3 5 9 / 0) 100%);
  }
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  -webkit-tap-highlight-color: rgb(var(--brand-rgb) / .12);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--track-snug);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; border: 0; }
svg { flex: none; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
select { cursor: pointer; }
textarea { resize: vertical; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
address { font-style: normal; }
strong, b { font-weight: var(--fw-semi); }
small { font-size: var(--fs-sm); }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
[hidden] { display: none !important; }
::placeholder { color: var(--text-muted); opacity: 1; }
:target { scroll-margin-top: calc(var(--header-h) + var(--s-6)); }

::selection { background: rgb(var(--brand-rgb) / .2); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* thin, unobtrusive scrollbars for scroll regions */
.u-scroll-x, .u-scroll-y, .table-wrap, .chips-scroll, .gallery-thumbs {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.u-scroll-x::-webkit-scrollbar, .u-scroll-y::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar, .chips-scroll::-webkit-scrollbar,
.gallery-thumbs::-webkit-scrollbar { height: 8px; width: 8px; }
.u-scroll-x::-webkit-scrollbar-thumb, .u-scroll-y::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb, .chips-scroll::-webkit-scrollbar-thumb,
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }

/* skip link */
.skip-link {
  position: fixed;
  top: var(--s-2);
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  transition: transform var(--t-base) var(--ease-spring);
}
.skip-link:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .hotel-card:hover, .btn:active, .room-card:hover,
  .offer-card:hover, .stat-card:hover, .city-tile:hover { transform: none !important; }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page > main { flex: 1 1 auto; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--flush  { padding-inline: 0; }

.section { padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); }
.section--tight { padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }
.section--alt { background: var(--bg-alt); }
.section--surface { background: var(--surface); }

.stack     { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-2   { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-3   { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-6   { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-8   { display: flex; flex-direction: column; gap: var(--s-8); }
.row       { display: flex; align-items: center; gap: var(--s-3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end  { justify-content: flex-end; }
.row--top  { align-items: flex-start; }
.row--baseline { align-items: baseline; }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr)); }
.grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(50% - var(--s-3), 190px), 1fr)); }

/* results page: filter rail + list */
.layout-results {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-results { grid-template-columns: 292px minmax(0, 1fr); }
}

/* detail page: content + sticky booking sidebar */
.layout-detail {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-detail { grid-template-columns: minmax(0, 1fr) 358px; }
}

/* account / dashboard: side nav + panel */
.layout-account {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .layout-account { grid-template-columns: 248px minmax(0, 1fr); }
}

.sticky-rail { position: sticky; top: calc(var(--header-h) + var(--s-4)); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
  color: var(--text);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-5xl); }
.h2 { font-size: var(--fs-4xl); }
.h3 { font-size: var(--fs-3xl); }
.h4 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.h5 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: var(--fw-semi); }
.h6 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); }
.display { font-size: var(--fs-6xl); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1.05; }

.lede { font-size: var(--fs-xl); line-height: var(--lh-base); color: var(--text-2); text-wrap: pretty; }
.text-lg { font-size: var(--fs-lg); }
.text-md { font-size: var(--fs-md); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.muted   { color: var(--text-3); }
.muted-2 { color: var(--text-muted); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.price {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
}
.price--lg { font-size: var(--fs-2xl); }
.price--xl { font-size: var(--fs-3xl); }
.price-strike {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-weight: var(--fw-normal);
  font-size: .875em;
}
.price-unit { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); }
.clamp-1, .clamp-2, .clamp-3, .clamp-4 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

/* long-form CMS content */
.prose { color: var(--text-2); font-size: var(--fs-lg); line-height: var(--lh-loose); max-width: 72ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-10); font-size: var(--fs-3xl); color: var(--text); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
.prose h3 { margin-top: var(--s-8); font-size: var(--fs-2xl); color: var(--text); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.prose h4 { margin-top: var(--s-6); font-size: var(--fs-xl); color: var(--text); font-weight: var(--fw-semi); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: var(--s-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s-2); }
.prose ul li::marker { color: var(--brand); }
.prose blockquote {
  padding: var(--s-1) var(--s-5);
  border-left: 3px solid var(--brand-border);
  color: var(--text-3);
  font-style: italic;
}
.prose img { border-radius: var(--r-lg); }
.prose table { font-size: var(--fs-md); }
.prose th, .prose td { padding: var(--s-3); border-bottom: 1px solid var(--border); text-align: left; }
.prose code { background: var(--surface-inset); padding: .12em .4em; border-radius: var(--r-xs); }
.prose hr { margin-block: var(--s-8); }

/* section header */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
}
.section-head__text { max-width: 62ch; }
.section-head__title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.section-head__sub { margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-md); }
.section-head__aside { flex: none; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }

.page-head { padding-block: var(--s-6) var(--s-2); }
.page-head__title { font-size: var(--fs-4xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-tight); }
.page-head__meta { margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-md); }

/* ==========================================================================
   5. CONTROLS
   ========================================================================== */
.btn {
  --btn-h: 44px;
  --btn-px: var(--s-5);
  --btn-fs: var(--fs-md);
  --btn-radius: var(--r-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--btn-fs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-snug);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn > svg { flex: none; }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-on);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-on); }
.btn--primary:active { background: var(--brand-active); border-color: var(--brand-active); }
.btn--primary:focus-visible { box-shadow: var(--focus-ring-brand); }

.btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.btn--secondary:hover { background: var(--surface-2); border-color: var(--n-400); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }

.btn--soft { background: var(--brand-soft); border-color: var(--brand-border); color: var(--sea-700); }
.btn--soft:hover { background: var(--brand-soft-2); color: var(--sea-700); }
[data-theme="dark"] .btn--soft { color: var(--brand); }

.btn--danger { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.btn--danger:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.btn--danger-soft { background: var(--tone-danger-bg); border-color: var(--tone-danger-bd); color: var(--tone-danger-fg); }
.btn--danger-soft:hover { background: var(--tone-danger-bg); border-color: var(--red-500); color: var(--tone-danger-fg); }

.btn--success { background: var(--teal-500); border-color: var(--teal-500); color: #fff; }
.btn--success:hover { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--n-800); border-color: var(--n-800); color: #fff; }
[data-theme="dark"] .btn--dark { background: var(--n-800); color: var(--n-0); }

.btn--outline-brand { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn--outline-brand:hover { background: var(--brand-soft); color: var(--brand-hover); }

.btn--link {
  background: none; border: 0; min-height: 0; padding: 0;
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
.btn--link:hover { color: var(--brand-hover); }

.btn--sm { --btn-h: 34px; --btn-px: var(--s-3); --btn-fs: var(--fs-sm); --btn-radius: var(--r-sm); }
.btn--lg { --btn-h: 52px; --btn-px: var(--s-7); --btn-fs: var(--fs-lg); --btn-radius: var(--r-lg); }
.btn--xl { --btn-h: 58px; --btn-px: var(--s-8); --btn-fs: var(--fs-xl); --btn-radius: var(--r-lg); }
.btn--pill { --btn-radius: var(--r-full); }
.btn--block { width: 100%; }

.btn--icon {
  --btn-px: 0;
  width: var(--btn-h);
  min-width: var(--btn-h);
  border-radius: var(--r-md);
}
.btn--icon.btn--pill, .btn--icon.btn--round { border-radius: var(--r-full); }

.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
}
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.05em; height: 1.05em;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  animation: otb-spin .6s linear infinite;
  visibility: visible;
}
.btn--primary.is-loading::after, .btn--danger.is-loading::after,
.btn--success.is-loading::after, .btn--dark.is-loading::after { border-color: #fff; border-top-color: transparent; border-right-color: transparent; }
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after { border-color: var(--text-2); border-top-color: transparent; border-right-color: transparent; }

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

.btn-group { display: inline-flex; align-items: center; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
.btn-group > .btn:last-child  { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn.is-active { background: var(--surface-inverse); color: var(--surface); z-index: 1; }

/* segmented toggle (grid/list, sort) */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.segmented__item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.segmented__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* -- form fields --------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--s-5); }
.form-grid {
  display: grid;
  gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.form-grid--halves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field--row { flex-direction: row; align-items: center; gap: var(--s-3); }

.label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--text);
}
.label--sm { font-size: var(--fs-sm); }
.label .req { color: var(--brand); }
.label__hint { margin-left: auto; font-weight: var(--fw-normal); font-size: var(--fs-xs); color: var(--text-muted); }
.hint { font-size: var(--fs-sm); color: var(--text-3); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.4;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  appearance: none;
}
.textarea { min-height: 116px; line-height: var(--lh-base); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--n-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px rgb(var(--brand-rgb) / .16);
}
.input[readonly], .input[disabled], .select[disabled], .textarea[disabled] {
  background: var(--surface-inset);
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: none;
}
.input--sm, .select--sm { min-height: 36px; padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.input--lg { min-height: 54px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.input--flush { border-color: transparent; background: var(--surface-inset); box-shadow: none; }

.select {
  padding-right: var(--s-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23857B74' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 18px 18px;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23A3ABB9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}
.select--bare {
  min-height: 34px; padding: var(--s-1) var(--s-7) var(--s-1) var(--s-3);
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  background-position: right var(--s-2) center; background-size: 16px;
}

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > svg, .input-icon__icon {
  position: absolute;
  left: var(--s-4);
  color: var(--text-muted);
  pointer-events: none;
}
.input-icon > .input { padding-left: calc(var(--s-4) * 2 + 20px); }
.input-icon--end > svg, .input-icon--end > .input-icon__icon { left: auto; right: var(--s-4); }
.input-icon--end > .input { padding-left: var(--s-4); padding-right: calc(var(--s-4) * 2 + 20px); }
.input-affix {
  display: flex; align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.input-affix:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3.5px rgb(var(--brand-rgb) / .16); }
.input-affix > .input { border: 0; box-shadow: none; }
.input-affix > .input:focus { box-shadow: none; }
.input-affix__addon {
  display: inline-flex; align-items: center;
  padding-inline: var(--s-4);
  background: var(--surface-inset);
  color: var(--text-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  border-right: 1px solid var(--border);
}
.input-affix__addon--end { border-right: 0; border-left: 1px solid var(--border); }

/* invalid state */
.field.has-error > .input, .field.has-error > .select, .field.has-error > .textarea,
.input.is-invalid, .select.is-invalid, .textarea.is-invalid,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--red-500);
  background: var(--tone-danger-bg);
}
.field.has-error > .input:focus, .input.is-invalid:focus, .input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3.5px rgb(220 43 43 / .18);
}
.field-error {
  display: flex; align-items: flex-start; gap: var(--s-1);
  color: var(--red-600);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
[data-theme="dark"] .field-error { color: var(--tone-danger-fg); }
.field-error > svg { margin-top: 1px; }

/* checkbox / radio */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.45;
}
.check > input[type="checkbox"], .check > input[type="radio"] {
  flex: none;
  appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.check > input[type="radio"] { border-radius: 50%; }
.check:hover > input:not(:disabled) { border-color: var(--brand); }
.check > input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
  background-repeat: no-repeat;
  background-position: center;
}
.check > input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.5'/%3E%3C/svg%3E");
  background-size: 15px;
}
.check > input[type="checkbox"]:indeterminate {
  background-color: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5.5 10h9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}
.check > input[type="radio"]:checked {
  background-image: radial-gradient(circle, #fff 0 3.2px, transparent 3.6px);
}
.check > input:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.check > input:disabled { opacity: .5; cursor: not-allowed; }
.check__text { min-width: 0; }
.check__meta { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.check--card {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.check--card:hover { border-color: var(--border-strong); }
.check--card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--fs-md); }
.switch > input {
  appearance: none;
  flex: none;
  position: relative;
  width: 42px; height: 24px;
  margin: 0;
  background: var(--n-300);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.switch > input::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(16 24 40 / .3);
  transition: transform var(--t-base) var(--ease-spring);
}
.switch > input:checked { background: var(--teal-500); }
.switch > input:checked::after { transform: translateX(18px); }
.switch > input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.switch > input:disabled { opacity: .5; cursor: not-allowed; }

/* stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
}
.stepper__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stepper__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.stepper__btn:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.stepper__btn:disabled { opacity: .38; cursor: not-allowed; }
.stepper__value {
  min-width: 2.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
}
.stepper__input {
  width: 2.75rem; border: 0; background: none; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semi);
  -moz-appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus-visible { outline: none; }

/* range slider */
.range { position: relative; padding-block: var(--s-3); }
.range__track {
  position: relative;
  height: 4px;
  background: var(--n-200);
  border-radius: var(--r-full);
}
.range__fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--brand);
  border-radius: var(--r-full);
}
.range input[type="range"] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  background: none;
  appearance: none;
  pointer-events: none;
  height: 24px;
}
.range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-2);
  cursor: grab;
}
.range input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-2);
  cursor: grab;
}
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring-brand); }
.range__labels {
  display: flex; justify-content: space-between;
  margin-top: var(--s-3);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: var(--fw-semi);
}

/* file / upload dropzone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-8) var(--s-5);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); color: var(--text-2); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__title { font-weight: var(--fw-semi); color: var(--text); font-size: var(--fs-md); }

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card--pad     { padding: var(--s-5); }
.card--pad-lg  { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.card--flat    { box-shadow: none; }
.card--raised  { box-shadow: var(--shadow-2); }
.card--inset   { background: var(--surface-inset); border-color: transparent; box-shadow: none; }
.card--brand   { background: var(--brand-soft); border-color: var(--brand-border); box-shadow: none; }
.card--hover { transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.card--hover:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); transform: translateY(-2px); }
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
}
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); }
.card__body { padding: var(--s-5); }
.card__body + .card__body { border-top: 1px solid var(--border-subtle); }
.card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* -- media frame (used by partials.img) ---------------------------------- */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-inset);
  border-radius: inherit;
}
.media > img, .media > picture > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media--16-9 { aspect-ratio: 16 / 9; }
.media--4-3  { aspect-ratio: 4 / 3; }
.media--3-2  { aspect-ratio: 3 / 2; }
.media--1-1  { aspect-ratio: 1 / 1; }
.media--21-9 { aspect-ratio: 21 / 9; }
.media--3-4  { aspect-ratio: 3 / 4; }

.img-fade { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.img-fade.is-loaded, .no-js .img-fade { opacity: 1; }
.img-zoom { transition: transform var(--t-slow) var(--ease); }
a:hover .img-zoom, .card--hover:hover .img-zoom, .hotel-card:hover .img-zoom { transform: scale(1.045); }

/* -- property card ------------------------------------------------------- */
.hotel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hotel-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); transform: translateY(-2px); }
.hotel-card:focus-within { border-color: var(--brand); }
.hotel-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-inset);
  overflow: hidden;
  flex: none;
}
.hotel-card__media > .media, .hotel-card__media > img { width: 100%; height: 100%; }
.hotel-card__link { position: absolute; inset: 0; z-index: 2; border-radius: 0; }
.hotel-card__link:focus-visible { outline-offset: -3px; }
.hotel-card__flags {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  max-width: calc(100% - 84px);
  pointer-events: none;
}
.hotel-card__wish {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / .92);
  color: var(--n-700);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hotel-card__wish:hover { transform: scale(1.08); color: var(--brand); }
.hotel-card__wish:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); }
.hotel-card__wish.is-active { color: var(--brand); }
.hotel-card__wish.is-active svg { animation: otb-pop var(--t-slow) var(--ease-spring); }
@keyframes otb-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

.hotel-card__rating {
  position: absolute;
  bottom: var(--s-3); left: var(--s-3);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  background: rgb(16 24 40 / .72);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}
.hotel-card__rating svg { color: var(--gold-400); }

.hotel-card__body {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  flex: 1 1 auto;
}
.hotel-card__type {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hotel-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-snug);
  line-height: 1.28;
  color: var(--text);
}
.hotel-card__loc {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.hotel-card__loc svg { color: var(--text-muted); }
.hotel-card__amenities {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.hotel-card__amenity { display: inline-flex; align-items: center; gap: 4px; }
.hotel-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
}
.hotel-card__price { display: flex; flex-direction: column; gap: 1px; }
.hotel-card__price-row { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.hotel-card__cta { position: relative; z-index: 3; }

/* list orientation */
.hotel-card--list { flex-direction: row; }
.hotel-card--list .hotel-card__media { width: 38%; min-width: 180px; max-width: 320px; aspect-ratio: auto; }
.hotel-card--list .hotel-card__body { padding: var(--s-5); gap: var(--s-3); }
.hotel-card--list .hotel-card__name { font-size: var(--fs-xl); }
.hotel-card--list .hotel-card__foot { align-items: center; }
@media (max-width: 639px) {
  .hotel-card--list { flex-direction: column; }
  .hotel-card--list .hotel-card__media { width: 100%; max-width: none; min-width: 0; aspect-ratio: 16 / 10; }
  .hotel-card--list .hotel-card__body { padding: var(--s-4); }
  .hotel-card--list .hotel-card__name { font-size: var(--fs-lg); }
}

.hotel-card.is-sold-out .hotel-card__media { filter: grayscale(.75) contrast(.95); }

/* -- room card ----------------------------------------------------------- */
.room-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.room-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.room-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .15); }
@media (min-width: 640px) {
  .room-card { grid-template-columns: 220px minmax(0, 1fr) 220px; }
  .room-card--wide { grid-template-columns: 260px minmax(0, 1fr) 240px; }
}
.room-card__media { position: relative; background: var(--surface-inset); aspect-ratio: 16 / 10; }
@media (min-width: 640px) { .room-card__media { aspect-ratio: auto; } }
.room-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.room-card__name { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); line-height: 1.25; }
.room-card__specs {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); color: var(--text-3);
}
.room-card__spec { display: inline-flex; align-items: center; gap: var(--s-1); }
.room-card__perks { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); }
.room-card__perk { display: flex; align-items: center; gap: var(--s-2); color: var(--teal-600); font-weight: var(--fw-medium); }
[data-theme="dark"] .room-card__perk { color: var(--teal-500); }
.room-card__perk--muted { color: var(--text-3); font-weight: var(--fw-normal); }
.room-card__aside {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  text-align: right;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 640px) {
  .room-card__aside { border-top: 0; border-left: 1px solid var(--border-subtle); }
}
.room-card__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.room-card__stock { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--amber-500); }
.room-card__stock--out { color: var(--red-600); }
.room-card__stock--ok { color: var(--teal-600); }

/* -- offer card ---------------------------------------------------------- */
.offer-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  border: 1px dashed var(--brand-border);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-soft), var(--surface) 70%);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.offer-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.offer-card::before,
.offer-card::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px dashed var(--brand-border);
}
.offer-card::before { top: 50%; transform: translateY(-50%); }
.offer-card::after { left: auto; right: -9px; top: 50%; transform: translateY(-50%); }
.offer-card__value { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--track-tight); color: var(--brand); line-height: 1; }
.offer-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.offer-card__text { font-size: var(--fs-sm); color: var(--text-3); }
.offer-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-2); }
.coupon-code {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.coupon-code:hover { border-color: var(--brand); color: var(--brand); }

/* -- stat card ----------------------------------------------------------- */
.stat-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  color: inherit;
  overflow: hidden;
}
a.stat-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--border-strong); color: inherit; }
.stat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.stat-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.stat-card__value {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card__foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-3); }
.stat-card--brand   .stat-card__icon { background: var(--tone-brand-bg);   color: var(--tone-brand-fg); }
.stat-card--success .stat-card__icon { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.stat-card--warning .stat-card__icon { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.stat-card--danger  .stat-card__icon { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.stat-card--info    .stat-card__icon { background: var(--tone-info-bg);    color: var(--tone-info-fg); }

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.delta--up   { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.delta--down { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }

/* -- city tile ----------------------------------------------------------- */
.city-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 4;
  background: var(--surface-inset);
  color: #fff;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.city-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); color: #fff; }
.city-tile > .media, .city-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-tile::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.city-tile__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--s-4); }
.city-tile__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.city-tile__meta { font-size: var(--fs-xs); opacity: .92; }
.city-tile--sm { aspect-ratio: 1 / 1; }
.city-tile--wide { aspect-ratio: 16 / 10; }

/* -- generic tile / feature ---------------------------------------------- */
.feature {
  display: flex; gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}
.feature__title { font-weight: var(--fw-semi); font-size: var(--fs-lg); }
.feature__text { margin-top: var(--s-1); font-size: var(--fs-md); color: var(--text-3); }

/* ==========================================================================
   7. RATING / BADGES / CHIPS
   ========================================================================== */
.rating { display: inline-flex; align-items: center; gap: var(--s-2); }
.rating__stars { display: inline-flex; align-items: center; gap: 1px; color: var(--gold-500); }
.rating__stars > svg { flex: none; }
.rating__stars .is-empty { color: var(--n-300); }
[data-theme="dark"] .rating__stars .is-empty { color: var(--n-300); }
.rating__pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px var(--s-2);
  min-width: 2.4rem;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--teal-500);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.rating__pill--gold { background: var(--gold-500); color: #3B2500; }
.rating__pill--muted { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.rating__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); }
.rating__count { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rating--sm .rating__pill { font-size: var(--fs-xs); padding: 1px var(--s-1); min-width: 2rem; }
.rating--sm .rating__label, .rating--sm .rating__count { font-size: var(--fs-xs); }
.rating--lg .rating__pill { font-size: var(--fs-xl); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
.rating--lg .rating__label { font-size: var(--fs-lg); }

.stars-static { display: inline-flex; gap: 1px; color: var(--gold-500); }

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-2);
  border: 1px solid var(--tone-neutral-bd);
  border-radius: var(--r-sm);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  line-height: 1.35;
  white-space: nowrap;
}
.badge > svg { flex: none; }
.badge--success { background: var(--tone-success-bg); color: var(--tone-success-fg); border-color: var(--tone-success-bd); }
.badge--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); border-color: var(--tone-warning-bd); }
.badge--danger  { background: var(--tone-danger-bg);  color: var(--tone-danger-fg);  border-color: var(--tone-danger-bd); }
.badge--info    { background: var(--tone-info-bg);    color: var(--tone-info-fg);    border-color: var(--tone-info-bd); }
.badge--neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); border-color: var(--tone-neutral-bd); }
.badge--brand   { background: var(--tone-brand-bg);   color: var(--tone-brand-fg);   border-color: var(--tone-brand-bd); }
.badge--solid   { background: var(--brand); color: #fff; border-color: var(--brand); }
.badge--gold    { background: var(--gold-soft); color: #7A4E00; border-color: var(--gold-300); }
[data-theme="dark"] .badge--gold { background: #2C2113; color: var(--gold-400); border-color: #4A3618; }
.badge--lg { font-size: var(--fs-sm); padding: var(--s-1) var(--s-3); border-radius: var(--r-md); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--float { box-shadow: var(--shadow-1); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--n-400); color: var(--text); background: var(--surface-2); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chip.is-active, .chip[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--sea-700);
  font-weight: var(--fw-semi);
}
[data-theme="dark"] .chip.is-active, [data-theme="dark"] .chip[aria-pressed="true"] { color: var(--brand); }
.chip--sm { min-height: 30px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text-2); }
.chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: -4px;
  border-radius: 50%;
  color: var(--text-muted);
}
.chip__remove:hover { background: rgb(var(--brand-rgb) / .14); color: var(--brand); }
.chip__count { font-variant-numeric: tabular-nums; opacity: .7; font-size: .9em; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips-scroll {
  display: flex; gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.chips-scroll > * { scroll-snap-align: start; flex: none; }

/* ribbon over media */
.ribbon {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / .94);
  color: var(--n-800);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
}
.ribbon--brand { background: var(--brand); color: #fff; }
.ribbon--gold  { background: var(--gold-500); color: #40270A; }
.ribbon--dark  { background: rgb(16 24 40 / .78); color: #fff; }
.ribbon--teal  { background: var(--teal-500); color: #fff; }

/* ==========================================================================
   8. NAVIGATION
   ========================================================================== */
/* -- top bar / header ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-1); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
  padding-block: var(--s-2);
}
.site-header__brand { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; color: var(--text); }
.site-header__brand:hover { color: var(--text); }
.site-header__brand svg, .site-header__brand img { height: 34px; width: auto; }
/* The wordmark reads clearly even at 320px, so it shows at every width and
   the square mark is reserved for the favicon and the native app icon. */
.site-header__logo-full { display: block; }
.site-header__logo-mark { display: none; }
.site-header__search { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.site-header__nav { display: none; align-items: center; gap: var(--s-1); margin-left: auto; }
.site-header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }
/* The nav keeps its slot in the DOM when hidden, so `.nav + .actions` still
   matched below 1024px and cancelled the auto margin — leaving the search and
   menu buttons stranded next to the logo. Only drop the margin once the nav is
   actually laid out and already holding the left edge. */
@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
  .site-header__nav + .site-header__actions { margin-left: 0; }
}

.nav-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 38px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.is-active { color: var(--brand); background: var(--brand-soft); font-weight: var(--fw-semi); }
.nav-link--accent { color: var(--brand); font-weight: var(--fw-semi); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--text-2);
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn--bordered { border-color: var(--border); background: var(--surface); }
.icon-btn--sm { width: 32px; height: 32px; border-radius: var(--r-sm); }
.icon-btn--round { border-radius: 50%; }
.icon-btn.is-active { color: var(--brand); background: var(--brand-soft); }
.icon-btn__dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--surface);
}
.has-dot { position: relative; }

.theme-toggle .otb-sun { display: block; }
.theme-toggle .otb-moon { display: none; }
[data-theme="dark"] .theme-toggle .otb-sun { display: none; }
[data-theme="dark"] .theme-toggle .otb-moon { display: block; }

/* city switcher trigger */
.city-switch {
  display: none;
  align-items: center; gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  max-width: 190px;
}
@media (min-width: 768px) { .city-switch { display: inline-flex; } }
.city-switch:hover { border-color: var(--border-strong); color: var(--text); }
.city-switch__label { overflow: hidden; text-overflow: ellipsis; }

/* account menu */
.account-trigger {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px;
  padding: 3px var(--s-3) 3px 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.account-trigger:hover { box-shadow: var(--shadow-1); border-color: var(--border-strong); }
.account-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.account-trigger__name { display: none; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .account-trigger__name { display: block; } }

/* -- dropdown / popover -------------------------------------------------- */
.dropdown { position: relative; }
.dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 232px;
  max-width: min(92vw, 360px);
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: top right;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.dropdown__panel--left  { right: auto; left: 0; transform-origin: top left; }
.dropdown__panel--wide  { min-width: 320px; }
.dropdown__panel--plain { padding: 0; }
.dropdown.is-open > .dropdown__panel,
.dropdown__panel.is-open { opacity: 1; transform: none; visibility: visible; }
.dropdown__header { padding: var(--s-3) var(--s-3) var(--s-2); }
.dropdown__title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.dropdown__meta { font-size: var(--fs-sm); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.dropdown__divider { height: 1px; margin: var(--s-2) calc(var(--s-2) * -1); background: var(--border-subtle); }
.dropdown__item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown__item:hover { background: var(--surface-3); color: var(--text); }
.dropdown__item.is-active { color: var(--brand); background: var(--brand-soft); }
.dropdown__item--danger { color: var(--red-600); }
.dropdown__item--danger:hover { background: var(--tone-danger-bg); color: var(--red-600); }
[data-theme="dark"] .dropdown__item--danger { color: var(--tone-danger-fg); }
.dropdown__item svg { flex: none; color: currentColor; opacity: .8; }
.dropdown__scroll { max-height: 320px; overflow-y: auto; }

.popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-dropdown);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.popover.is-open { opacity: 1; visibility: visible; transform: none; }
.popover--right { left: auto; right: 0; }
.popover--center { left: 50%; transform: translate(-50%, -6px); }
.popover--center.is-open { transform: translateX(-50%); }

/* -- tooltip ------------------------------------------------------------- */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  z-index: var(--z-dropdown);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-inverse);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tip--below::after { bottom: auto; top: calc(100% + 8px); }

/* -- tabs ---------------------------------------------------------------- */
.tabs { border-bottom: 1px solid var(--border); }
.tabs__list {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -1px;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"], .tabs__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tabs__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tabs__tab .badge { font-size: var(--fs-2xs); }
.tabs--pills { border-bottom: 0; }
.tabs--pills .tabs__list { gap: var(--s-2); margin-bottom: 0; }
.tabs--pills .tabs__tab {
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
}
.tabs--pills .tabs__tab[aria-selected="true"], .tabs--pills .tabs__tab.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.tabs__panel { padding-top: var(--s-5); }
.tabs__panel[hidden] { display: none; }

/* -- accordion ----------------------------------------------------------- */
.accordion { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.accordion__item + .accordion__item { border-top: 1px solid var(--border-subtle); }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--text);
  transition: background var(--t-fast) var(--ease);
}
.accordion__trigger:hover { background: var(--surface-2); }
.accordion__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.accordion__chevron { flex: none; color: var(--text-muted); transition: transform var(--t-base) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); color: var(--brand); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel[hidden] { display: none; }
.accordion__body { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-loose); }
.accordion--plain { border: 0; border-radius: 0; background: none; }
.accordion--plain .accordion__trigger { padding-inline: 0; }
.accordion--plain .accordion__body { padding-inline: 0; }

/* -- breadcrumb ---------------------------------------------------------- */
.breadcrumb { min-width: 0; }
.breadcrumb__list {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.breadcrumb__link { color: var(--text-3); }
.breadcrumb__link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__sep { color: var(--n-400); flex: none; }
.breadcrumb__current { color: var(--text); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }

/* -- pagination ---------------------------------------------------------- */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-8);
}
.pagination__info { width: 100%; text-align: center; font-size: var(--fs-sm); color: var(--text-3); order: 2; }
.pagination__list { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; justify-content: center; }
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pagination__link:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pagination__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pagination__link.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: var(--shadow-brand);
  pointer-events: none;
}
.pagination__link.is-disabled { opacity: .4; pointer-events: none; }
.pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 40px; color: var(--text-muted); }
.pagination__edge { padding-inline: var(--s-3); gap: var(--s-1); }
@media (max-width: 519px) {
  .pagination__num { display: none; }
  .pagination__num.is-active, .pagination__num.is-near { display: inline-flex; }
}

/* -- bottom tab bar (mobile) --------------------------------------------- */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: flex;
  align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px -6px rgb(16 24 40 / .16);
  backdrop-filter: saturate(180%) blur(14px);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .tabbar { background: var(--surface); }
}
@media (min-width: 768px) { .tabbar { display: none; } }
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { body.has-tabbar { padding-bottom: 0; } }
.tabbar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: var(--s-1) 2px;
  color: var(--text-3);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.tabbar__item:hover { color: var(--text-2); }
.tabbar__item.is-active { color: var(--brand); }
.tabbar__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 26px; height: 3px;
  border-radius: 0 0 var(--r-full) var(--r-full);
  background: var(--brand);
}
.tabbar__item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.tabbar__badge {
  position: absolute;
  top: 4px;
  margin-left: 16px;
  min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-3xs);
  font-variant-numeric: tabular-nums;
}

/* -- side nav (account, panels served from app.css) ---------------------- */
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav__group + .sidenav__group { margin-top: var(--s-4); }
.sidenav__label {
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sidenav__item {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 42px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidenav__item:hover { background: var(--surface-3); color: var(--text); }
.sidenav__item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-semi); }
.sidenav__item svg { flex: none; opacity: .85; }
.sidenav__item .badge { margin-left: auto; }

/* -- progress steps (booking flow) -------------------------------------- */
.steps { display: flex; align-items: flex-start; gap: 0; counter-reset: step; }
.steps__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2);
  position: relative;
  text-align: center;
  min-width: 0;
}
.steps__item::before, .steps__item::after {
  content: "";
  position: absolute;
  top: 15px;
  height: 2px;
  background: var(--border);
  width: 50%;
}
.steps__item::before { left: 0; }
.steps__item::after { right: 0; }
.steps__item:first-child::before, .steps__item:last-child::after { display: none; }
.steps__item.is-done::before, .steps__item.is-done::after,
.steps__item.is-current::before { background: var(--brand); }
.steps__dot {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.steps__item.is-current .steps__dot {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .14);
}
.steps__item.is-done .steps__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-3); padding-inline: var(--s-1); }
.steps__item.is-current .steps__label { color: var(--text); }
.steps__item.is-done .steps__label { color: var(--text-2); }
@media (max-width: 519px) {
  .steps__label { font-size: var(--fs-2xs); }
}

.progress { height: 6px; border-radius: var(--r-full); background: var(--surface-inset); overflow: hidden; }
.progress__bar { height: 100%; border-radius: var(--r-full); background: var(--brand); transition: width var(--t-slow) var(--ease); }
.progress__bar--teal { background: var(--teal-500); }
.progress__bar--gold { background: var(--gold-500); }

/* ==========================================================================
   9. TABLES
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.table tbody tr + tr td { border-top: 1px solid var(--border-subtle); }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-selected { background: var(--brand-soft); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__actions { text-align: right; white-space: nowrap; }
.table__check { width: 40px; }
.table__primary { font-weight: var(--fw-semi); color: var(--text); }
.table__sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.table--compact th, .table--compact td { padding: var(--s-2) var(--s-3); }
.table--fixed { table-layout: fixed; }
.table a { color: var(--text); font-weight: var(--fw-semi); }
.table a:hover { color: var(--brand); }
.table__sort {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.table__sort:hover { color: var(--text-2); }
.table__sort svg { opacity: .5; }
.table__sort.is-active svg { opacity: 1; color: var(--brand); }

/* responsive: stack into cards under 640px */
@media (max-width: 639px) {
  .table--stack, .table--stack thead, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; }
  .table--stack thead { display: none; }
  .table--stack tbody tr {
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .table--stack tbody tr + tr { margin-top: var(--s-3); }
  .table--stack tbody tr + tr td { border-top: 0; }
  .table--stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    text-align: right;
  }
  .table--stack td + td { border-top: 1px dashed var(--border-subtle); }
  .table--stack td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
  }
  .table--stack td:empty { display: none; }
  .table--stack .table__actions, .table--stack .table__num { text-align: right; }
  .table-wrap--stack { border: 0; background: none; overflow: visible; }
}

/* toolbar above a table */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.table-toolbar__search { flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.table-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.table-toolbar__aside { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* bulk action bar */
.bulkbar {
  position: sticky;
  bottom: var(--s-4);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-inverse);
  color: var(--surface);
  box-shadow: var(--shadow-3);
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}
.bulkbar.is-open { opacity: 1; transform: none; visibility: visible; }
.bulkbar__count { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.bulkbar__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }

/* definition list / key-value rows */
.kv { display: grid; gap: var(--s-3); }
.kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-md); }
.kv__key { color: var(--text-3); }
.kv__val { font-weight: var(--fw-semi); text-align: right; font-variant-numeric: tabular-nums; }
.kv--bordered .kv__row { padding-bottom: var(--s-3); border-bottom: 1px dashed var(--border-subtle); }
.kv--bordered .kv__row:last-child { padding-bottom: 0; border-bottom: 0; }

/* ==========================================================================
   10. DATA DISPLAY
   ========================================================================== */
.avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1;
  user-select: none;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 24px; height: 24px; font-size: var(--fs-2xs); }
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--fs-2xl); }
.avatar--2xl { width: 112px; height: 112px; font-size: var(--fs-3xl); }
.avatar--ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.avatar-stack { display: inline-flex; }
.avatar-stack > .avatar + .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }

/* amenity list */
.amenities { display: grid; gap: var(--s-3) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.amenities--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amenities--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.amenities--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.amenity { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); color: var(--text-2); min-width: 0; }
.amenity__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--text-2);
}
.amenity__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.amenity--compact { gap: var(--s-2); font-size: var(--fs-sm); }
.amenity--compact .amenity__icon { width: 24px; height: 24px; background: none; color: var(--text-3); }
.amenity-group + .amenity-group { margin-top: var(--s-6); }
.amenity-group__title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* review card */
.review {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.review__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.review__who { min-width: 0; flex: 1 1 auto; }
.review__name { font-weight: var(--fw-semi); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review__date { font-size: var(--fs-xs); color: var(--text-muted); }
.review__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); }
.review__body { font-size: var(--fs-md); color: var(--text-2); line-height: var(--lh-loose); }
.review__reply {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand-border);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-inset);
  font-size: var(--fs-md);
  color: var(--text-2);
}
.review__reply-who {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--brand);
}
.review__aspects { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* review summary bars */
.rating-bars { display: grid; gap: var(--s-2); }
.rating-bars__row { display: grid; grid-template-columns: 3.4rem 1fr 2.6rem; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.rating-bars__label { color: var(--text-3); display: inline-flex; align-items: center; gap: 3px; }
.rating-bars__track { height: 7px; border-radius: var(--r-full); background: var(--surface-inset); overflow: hidden; }
.rating-bars__fill { height: 100%; border-radius: var(--r-full); background: var(--gold-500); }
.rating-bars__value { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* price summary (checkout fare breakdown) */
.fare { display: flex; flex-direction: column; gap: var(--s-3); }
.fare__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-md);
  color: var(--text-2);
}
.fare__row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fare__label { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.fare__note { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.fare__row--discount { color: var(--teal-600); font-weight: var(--fw-semi); }
[data-theme="dark"] .fare__row--discount { color: var(--teal-500); }
.fare__divider { height: 1px; background: var(--border); margin-block: var(--s-1); }
.fare__row--total {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--track-tight);
}
.fare__savings {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.fare__nightly {
  display: grid; gap: var(--s-1);
  max-height: 190px;
  overflow-y: auto;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  font-size: var(--fs-sm);
}
.fare__nightly-row { display: flex; justify-content: space-between; gap: var(--s-3); font-variant-numeric: tabular-nums; }

/* sticky booking sidebar */
.booking-box {
  position: relative;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}
@media (min-width: 1024px) {
  .booking-box { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
.booking-box__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.booking-box__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.booking-box__dates > * + * { border-left: 1px solid var(--border-strong); }
.booking-box__field {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  text-align: left;
  background: var(--surface);
  transition: background var(--t-fast) var(--ease);
}
.booking-box__field:hover { background: var(--surface-2); }
.booking-box__field-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-box__field-value { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
.booking-box__trust { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); }
.booking-box__trust-row { display: flex; align-items: center; gap: var(--s-2); }
.booking-box__trust-row svg { color: var(--teal-500); flex: none; }

/* mobile sticky book bar */
.book-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px -8px rgb(16 24 40 / .2);
}
@media (min-width: 1024px) { .book-bar { display: none; } }
.book-bar__price { min-width: 0; }
.book-bar__cta { margin-left: auto; flex: none; }

/* gallery */
.gallery {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery__cell { position: relative; overflow: hidden; background: var(--surface-inset); aspect-ratio: 4/3; }
.gallery__cell > .media, .gallery__cell > img { width: 100%; height: 100%; }
.gallery__cell--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: 8/6; }
.gallery__cell button, .gallery__cell > a { position: absolute; inset: 0; width: 100%; }
.gallery__more {
  position: absolute;
  bottom: var(--s-3); right: var(--s-3);
  z-index: 3;
}
@media (max-width: 767px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__cell--hero { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
  .gallery__cell:nth-child(n+4) { display: none; }
}
.gallery-strip {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--r-lg);
}
.gallery-strip > * { flex: 0 0 86%; scroll-snap-align: center; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  background: rgb(8 10 16 / .96);
  color: #fff;
}
.lightbox.is-open { display: flex; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-md);
  color: rgb(255 255 255 / .8);
  font-variant-numeric: tabular-nums;
}
.lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-2) var(--s-4) var(--s-4);
  min-height: 0;
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  animation: otb-fade var(--t-base) var(--ease);
}
@keyframes otb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgb(255 255 255 / .14);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease);
}
.lightbox__nav:hover { background: rgb(255 255 255 / .26); }
.lightbox__nav--prev { left: var(--s-3); }
.lightbox__nav--next { right: var(--s-3); }
.lightbox__close { color: #fff; }
.lightbox__close:hover { background: rgb(255 255 255 / .16); color: #fff; }
.lightbox__caption { padding: 0 var(--s-4) var(--s-3); text-align: center; font-size: var(--fs-sm); color: rgb(255 255 255 / .72); }
.gallery-thumbs { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); overflow-x: auto; }
.gallery-thumbs__item {
  flex: none;
  width: 76px; height: 54px;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: .5;
  border: 2px solid transparent;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gallery-thumbs__item:hover { opacity: .85; }
.gallery-thumbs__item.is-active { opacity: 1; border-color: #fff; }
.gallery-thumbs__item img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   11. OVERLAYS — modal, sheet, drawer
   ========================================================================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
  backdrop-filter: blur(2px);
}
.backdrop.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); }
.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - var(--s-8));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  transform: translateY(12px) scale(.98);
  transition: transform var(--t-slow) var(--ease-spring);
  overflow: hidden;
}
.modal.is-open .modal__dialog { transform: none; }
.modal--sm .modal__dialog { max-width: 400px; }
.modal--lg .modal__dialog { max-width: 720px; }
.modal--xl .modal__dialog { max-width: 960px; }
.modal--full .modal__dialog { max-width: min(1200px, 100%); height: 100%; }
.modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.modal__title { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); }
.modal__body { padding: var(--s-5); overflow-y: auto; flex: 1 1 auto; }
.modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
  flex: none;
  flex-wrap: wrap;
}

/* native dialog support */
dialog.modal-native {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  max-width: min(520px, calc(100vw - 2rem));
  width: 100%;
}
dialog.modal-native::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }

/* bottom sheet (mobile) */
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  max-height: 88dvh;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease), visibility var(--t-slow);
}
.sheet.is-open { transform: none; visibility: visible; }
.sheet__grip {
  display: flex; justify-content: center;
  padding: var(--s-3) 0 var(--s-1);
  flex: none;
}
.sheet__grip::before { content: ""; width: 40px; height: 4px; border-radius: var(--r-full); background: var(--border-strong); }
.sheet__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.sheet__title { font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.sheet__body { padding: var(--s-5); overflow-y: auto; flex: 1 1 auto; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
.sheet__footer {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: none;
}
.sheet__footer > .btn { flex: 1 1 0; }
@media (min-width: 1024px) {
  .sheet--mobile-only { display: none; }
}

/* side drawer */
.drawer {
  position: fixed;
  top: 0; bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  width: min(320px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease), visibility var(--t-slow);
}
.drawer--right { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--border); transform: translateX(100%); }
.drawer.is-open { transform: none; visibility: visible; }
.drawer__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.drawer__body { padding: var(--s-4) var(--s-5); overflow-y: auto; flex: 1 1 auto; }

/* ==========================================================================
   12. FEEDBACK — toast, alert, empty, skeleton
   ========================================================================== */
.toast-region {
  position: fixed;
  top: calc(var(--header-h) + var(--s-2));
  right: var(--gutter);
  left: var(--gutter);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  pointer-events: none;
}
@media (min-width: 640px) { .toast-region { left: auto; max-width: 420px; } }
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--n-400);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-md);
  color: var(--text);
  animation: otb-toast-in var(--t-slow) var(--ease-spring);
}
.toast.is-leaving { animation: otb-toast-out var(--t-base) var(--ease-in) forwards; }
@keyframes otb-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes otb-toast-out { to { opacity: 0; transform: translateY(-8px); } }
.toast__icon { flex: none; margin-top: 1px; }
.toast__text { flex: 1 1 auto; min-width: 0; }
.toast__close { flex: none; color: var(--text-muted); }
.toast__close:hover { color: var(--text); }
.toast--success { border-left-color: var(--teal-500); }
.toast--success .toast__icon { color: var(--teal-500); }
.toast--error   { border-left-color: var(--red-500); }
.toast--error .toast__icon { color: var(--red-500); }
.toast--warning { border-left-color: var(--gold-500); }
.toast--warning .toast__icon { color: var(--gold-500); }
.toast--info    { border-left-color: var(--blue-500); }
.toast--info .toast__icon { color: var(--blue-500); }

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--tone-neutral-bd);
  border-radius: var(--r-md);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}
.alert__icon { flex: none; margin-top: 1px; }
.alert__title { font-weight: var(--fw-semi); }
.alert__body { min-width: 0; flex: 1 1 auto; }
.alert--success { background: var(--tone-success-bg); color: var(--tone-success-fg); border-color: var(--tone-success-bd); }
.alert--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); border-color: var(--tone-warning-bd); }
.alert--danger  { background: var(--tone-danger-bg);  color: var(--tone-danger-fg);  border-color: var(--tone-danger-bd); }
.alert--info    { background: var(--tone-info-bg);    color: var(--tone-info-fg);    border-color: var(--tone-info-bd); }
.alert--brand   { background: var(--tone-brand-bg);   color: var(--tone-brand-fg);   border-color: var(--tone-brand-bd); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--s-5);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.empty--flush { border: 0; background: none; padding-inline: 0; }
.empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--text-muted);
}
.empty__title { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); color: var(--text); }
.empty__text { max-width: 46ch; font-size: var(--fs-md); color: var(--text-3); text-wrap: pretty; }
.empty__action { margin-top: var(--s-2); }

/* skeletons */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-inset);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
  animation: otb-shimmer 1.35s infinite;
}
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .07), transparent); }
@keyframes otb-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
.skeleton--text { height: .8em; margin-block: .28em; border-radius: var(--r-full); }
.skeleton--title { height: 1.1em; width: 62%; border-radius: var(--r-full); }
.skeleton--line-sm { width: 40%; }
.skeleton--line-md { width: 72%; }
.skeleton--media { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.skeleton--pill { height: 28px; width: 84px; border-radius: var(--r-full); }
.skeleton-card {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.skeleton-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.skeleton-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-row__grow { flex: 1 1 auto; }

/* ==========================================================================
   13. SEARCH & FILTERS
   ========================================================================== */
.searchbar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}
@media (min-width: 860px) {
  .searchbar {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2);
    border-radius: var(--r-full);
  }
}
.searchbar__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
  text-align: left;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (min-width: 860px) {
  .searchbar__field { background: transparent; border-radius: var(--r-full); flex: 1 1 0; }
  .searchbar__field + .searchbar__field::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: var(--border);
  }
  .searchbar__field:hover { background: var(--surface-inset); }
  .searchbar__field:hover::before, .searchbar__field:hover + .searchbar__field::before { opacity: 0; }
}
.searchbar__field--where { flex: 1.4 1 0; }
.searchbar__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.searchbar__value { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbar__value--placeholder { color: var(--text-muted); font-weight: var(--fw-normal); }
.searchbar__input {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--text);
}
.searchbar__input:focus { outline: none; }
.searchbar__submit { flex: none; align-self: stretch; }
@media (min-width: 860px) {
  .searchbar__submit { align-self: center; margin-left: var(--s-2); }
}

/* compact header search */
.searchbar--compact {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 4px 4px var(--s-4);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-1);
}
.searchbar--compact .searchbar__field { padding: 0; background: none; }
.searchbar--compact .searchbar__field::before { display: none; }
.searchbar--compact .searchbar__divider { width: 1px; align-self: stretch; margin-block: 6px; background: var(--border); flex: none; }
.searchbar--compact .searchbar__meta {
  display: none;
  font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap;
}
@media (min-width: 1180px) { .searchbar--compact .searchbar__meta { display: block; } }

/* typeahead suggestions */
.suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: var(--z-dropdown);
  max-height: 380px;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.suggest.is-open { opacity: 1; visibility: visible; transform: none; }
.suggest__group-label {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.suggest__item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--text);
  font-size: var(--fs-md);
  transition: background var(--t-fast) var(--ease);
}
.suggest__item:hover, .suggest__item.is-highlighted { background: var(--surface-3); color: var(--text); }
.suggest__item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--text-3);
  overflow: hidden;
}
.suggest__item-main { min-width: 0; flex: 1 1 auto; }
.suggest__item-title { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__item-sub { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__empty { padding: var(--s-4); text-align: center; color: var(--text-muted); font-size: var(--fs-md); }

/* -- date range calendar ------------------------------------------------- */
.datepicker { min-width: 0; }
.datepicker__native { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.js .datepicker__native { display: none; }
.datepicker__cal { display: none; }
.js .datepicker__cal { display: block; }
.cal {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  min-width: 0;
}
@media (min-width: 720px) { .cal { grid-template-columns: 1fr 1fr; } }
.cal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.cal__month { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow {
  padding-bottom: var(--s-2);
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal__day {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 38px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal__day:hover:not(:disabled) { background: var(--surface-3); }
.cal__day:focus-visible { outline: none; box-shadow: var(--focus-ring-brand); z-index: 2; }
.cal__day:disabled, .cal__day.is-disabled { color: var(--n-400); cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.cal__day.is-empty { pointer-events: none; }
.cal__day.is-today { font-weight: var(--fw-bold); }
.cal__day.is-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
}
.cal__day.is-in-range { background: var(--brand-soft); border-radius: 0; }
.cal__day.is-start, .cal__day.is-end {
  background: var(--brand);
  color: #fff;
  font-weight: var(--fw-bold);
}
.cal__day.is-start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal__day.is-end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cal__day.is-start.is-end { border-radius: var(--r-sm); }
.cal__day.is-start::after, .cal__day.is-end::after { background: #fff; }
.cal__price { position: absolute; bottom: 3px; font-size: var(--fs-3xs); color: var(--text-muted); font-weight: var(--fw-medium); }
.cal__day.is-start .cal__price, .cal__day.is-end .cal__price { color: rgb(255 255 255 / .8); }
.cal__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.cal__summary { font-weight: var(--fw-semi); color: var(--text); }

/* -- guest picker -------------------------------------------------------- */
.guestpicker { min-width: 264px; display: flex; flex-direction: column; gap: var(--s-4); }
.guestpicker__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.guestpicker__label { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.guestpicker__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.guestpicker__foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border-subtle); }

/* -- filter panel -------------------------------------------------------- */
.filters { display: flex; flex-direction: column; }
.filters__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.filters__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--track-snug); }
.filters__group { padding-block: var(--s-4); border-bottom: 1px solid var(--border-subtle); }
.filters__group:last-child { border-bottom: 0; }
.filters__group-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%;
  margin-bottom: var(--s-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--text);
}
.filters__options { display: flex; flex-direction: column; gap: var(--s-3); }
.filters__options--scroll { max-height: 232px; overflow-y: auto; padding-right: var(--s-1); }
.filters__more { margin-top: var(--s-3); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--brand); }
.filters__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.filters__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filters__rail { display: none; }
@media (min-width: 1024px) {
  .filters__rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100dvh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }
}
.filters__mobile-bar {
  display: flex; align-items: center; gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
}
@media (min-width: 1024px) { .filters__mobile-bar { display: none; } }
.filters__applied { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* results header */
.results-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.results-head__count { font-size: var(--fs-md); color: var(--text-3); }
.results-head__count strong { color: var(--text); font-weight: var(--fw-bold); }
.results-head__tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.results-list { display: flex; flex-direction: column; gap: var(--s-4); }

/* ==========================================================================
   14. MARKETING BLOCKS
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(2rem, 1.4rem + 3vw, 4rem);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% 0%, rgb(var(--brand-rgb) / .5) 0%, transparent 58%),
    radial-gradient(90% 80% at 92% 12%, rgb(var(--accent-rgb) / .42) 0%, transparent 55%),
    linear-gradient(155deg, #06251F 0%, #07202B 48%, #050C13 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pattern-grid.svg");
  opacity: .5;
  mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 78%);
}
.hero__inner { position: relative; display: flex; flex-direction: column; gap: var(--s-6); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .18);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-wide);
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero__title {
  max-width: 20ch;
  font-size: var(--fs-6xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--sea-300); }
.hero__sub { max-width: 52ch; font-size: var(--fs-xl); color: rgb(255 255 255 / .82); text-wrap: pretty; }
.hero__search { margin-top: var(--s-2); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); margin-top: var(--s-2); }
.hero__stat { display: flex; flex-direction: column; }
.hero__stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.hero__stat-label { font-size: var(--fs-xs); color: rgb(255 255 255 / .68); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: var(--fw-semi); }
.hero--compact { padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3rem) clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.hero--compact .hero__title { font-size: var(--fs-4xl); }
.hero--image { background: var(--ink); }
.hero--image::before { background: linear-gradient(180deg, rgb(10 12 18 / .35) 0%, rgb(10 12 18 / .78) 100%); }
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img, .hero__bg .media { width: 100%; height: 100%; object-fit: cover; }

/* trust strip */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-8);
  padding-block: var(--s-5);
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.trust-strip__item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-2); }
.trust-strip__item svg { color: var(--teal-500); flex: none; }

/* app download band */
.app-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.3rem + 2.4vw, 3rem);
  background: linear-gradient(120deg, var(--ocean-500) 0%, var(--ocean-700) 42%, var(--sea-800) 100%);
  color: #fff;
  isolation: isolate;
}
.app-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pattern-grid.svg");
  opacity: .55;
}
.app-band__grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .app-band__grid { grid-template-columns: 1.25fr .75fr; } }
.app-band__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-snug); text-wrap: balance; }
.app-band__text { margin-top: var(--s-3); font-size: var(--fs-lg); color: rgb(255 255 255 / .84); max-width: 46ch; }
.app-band__badges { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.app-band__badges a { display: inline-flex; border-radius: var(--r-md); transition: transform var(--t-fast) var(--ease); }
.app-band__badges a:hover { transform: translateY(-2px); }
.app-band__list { display: grid; gap: var(--s-3); font-size: var(--fs-md); }
.app-band__list li { display: flex; align-items: flex-start; gap: var(--s-2); color: rgb(255 255 255 / .9); }
.app-band__list svg { flex: none; margin-top: 2px; color: var(--gold-400); }

/* CTA band */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.cta-band__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); }
.cta-band__text { margin-top: var(--s-1); color: var(--text-3); font-size: var(--fs-md); }

/* carousel rail (horizontal scroll of cards) */
.rail { position: relative; }
.rail__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { flex: 0 0 clamp(240px, 74vw, 296px); scroll-snap-align: start; }
.rail__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  color: var(--text);
  align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .rail__nav { display: inline-flex; } }
.rail__nav:hover { color: var(--brand); border-color: var(--brand); }
.rail__nav--prev { left: -18px; }
.rail__nav--next { right: -18px; }
.rail__nav[disabled] { opacity: .35; pointer-events: none; }

/* footer */
.site-footer {
  margin-top: auto;
  padding-top: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-md);
}
.site-footer__grid {
  display: grid;
  gap: var(--s-8) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  padding-bottom: var(--s-8);
}
.site-footer__brandcol { grid-column: 1 / -1; max-width: 34ch; }
@media (min-width: 900px) { .site-footer__brandcol { grid-column: span 2; } }
.site-footer__blurb { margin-top: var(--s-3); color: var(--text-3); font-size: var(--fs-md); }
.site-footer__col-title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text);
}
.site-footer__links { display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer__links a { color: var(--text-3); font-size: var(--fs-md); }
.site-footer__links a:hover { color: var(--brand); }
.site-footer__socials { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.site-footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-3);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-footer__social:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.site-footer__legal-links a { color: var(--text-muted); }
.site-footer__legal-links a:hover { color: var(--brand); }
body.has-tabbar .site-footer__legal { padding-bottom: calc(var(--s-5) + var(--tabbar-h)); }
@media (min-width: 768px) { body.has-tabbar .site-footer__legal { padding-bottom: var(--s-5); } }

/* ==========================================================================
   15. AUTH SPLIT SCREEN
   ========================================================================== */
.auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.auth__brand {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
}
@media (min-width: 900px) { .auth__brand { display: flex; } }
.auth__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(110% 80% at 8% 4%, rgb(var(--brand-rgb) / .62) 0%, transparent 56%),
    radial-gradient(80% 70% at 96% 92%, rgb(246 166 9 / .34) 0%, transparent 58%),
    linear-gradient(160deg, #201229 0%, #14161F 52%, #0A0C12 100%);
}
.auth__brand::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("../img/pattern-grid.svg");
  opacity: .5;
}
.auth__brand--partner::before {
  background:
    radial-gradient(110% 80% at 8% 4%, rgb(14 147 132 / .6) 0%, transparent 56%),
    radial-gradient(80% 70% at 96% 92%, rgb(var(--brand-rgb) / .3) 0%, transparent 58%),
    linear-gradient(160deg, #0B2A2C 0%, #101820 54%, #080C10 100%);
}
.auth__brand--admin::before {
  background:
    radial-gradient(110% 80% at 8% 4%, rgb(109 64 214 / .58) 0%, transparent 56%),
    radial-gradient(80% 70% at 96% 92%, rgb(29 107 240 / .32) 0%, transparent 58%),
    linear-gradient(160deg, #1A1436 0%, #12141F 54%, #080A12 100%);
}
.auth__brand-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.auth__brand-body { max-width: 34ch; }
.auth__brand-title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.auth__brand-text { margin-top: var(--s-4); font-size: var(--fs-lg); color: rgb(255 255 255 / .78); }
.auth__props { display: grid; gap: var(--s-3); margin-top: var(--s-8); }
.auth__prop {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--fs-md);
  color: rgb(255 255 255 / .9);
  opacity: .45;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.auth__prop.is-active { opacity: 1; transform: translateX(3px); }
.auth__prop svg { flex: none; margin-top: 2px; color: var(--gold-400); }
.auth__brand-foot { font-size: var(--fs-sm); color: rgb(255 255 255 / .55); }

.auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
  padding: clamp(1.5rem, 1.2rem + 2vw, 3rem) var(--gutter);
  min-width: 0;
}
.auth__mobile-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
@media (min-width: 900px) { .auth__mobile-brand { display: none; } }
.auth__card { width: 100%; max-width: 440px; margin-inline: auto; }
.auth__heading { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
.auth__sub { margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-md); }
.auth__divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.auth__divider::before, .auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.auth__foot { text-align: center; font-size: var(--fs-md); color: var(--text-3); }
.auth__foot a { font-weight: var(--fw-semi); }

/* ==========================================================================
   16. MISC BLOCKS
   ========================================================================== */
/* booking summary strip */
.booking-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.booking-strip__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.booking-strip__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.booking-strip__value { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.booking-strip__arrow { color: var(--text-muted); flex: none; }
.booking-strip__aside { margin-left: auto; }

/* reference / code pill */
.ref {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: .04em;
  color: var(--text-2);
}

/* timeline (status log) */
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--s-5); padding-left: var(--s-6); }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-6) * -1);
  top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}
.timeline__item.is-done::before { background: var(--teal-500); border-color: var(--teal-500); }
.timeline__item.is-current::before { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .16); }
.timeline__title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.timeline__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.timeline__note { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--text-3); }

/* notification list */
.notif { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); transition: background var(--t-fast) var(--ease); }
.notif:hover { background: var(--surface-2); }
.notif.is-unread { background: var(--brand-soft); }
.notif__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--text-2);
}
.notif__title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.notif__body { font-size: var(--fs-sm); color: var(--text-3); }
.notif__time { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* map placeholder */
.map-placeholder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--border-subtle) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px) 0 0 / 40px 100%,
    var(--surface-2);
  overflow: hidden;
}
.map-placeholder__pin {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  color: var(--brand);
  text-align: center;
}
.map-placeholder__label {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  box-shadow: var(--shadow-1);
}

/* house rules / policy list */
.policy { display: grid; gap: var(--s-3); }
.policy__row { display: flex; gap: var(--s-3); font-size: var(--fs-md); color: var(--text-2); }
.policy__row svg { flex: none; margin-top: 3px; color: var(--text-muted); }

/* payment method radio cards */
.pay-methods { display: grid; gap: var(--s-3); }
.pay-method {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pay-method:hover { border-color: var(--border-strong); }
.pay-method:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .1); }
.pay-method__title { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.pay-method__text { font-size: var(--fs-sm); color: var(--text-3); }
.pay-method__badge { margin-left: auto; }

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.u-hidden { display: none !important; }
.u-block { display: block !important; }
.u-inline-flex { display: inline-flex !important; }
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-flex-1 { flex: 1 1 auto !important; }
.u-flex-none { flex: none !important; }
.u-wrap { flex-wrap: wrap !important; }
.u-col { flex-direction: column !important; }
.u-items-center { align-items: center !important; }
.u-items-start { align-items: flex-start !important; }
.u-items-end { align-items: flex-end !important; }
.u-items-baseline { align-items: baseline !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mr-auto { margin-right: auto !important; }
.u-mx-auto { margin-inline: auto !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--s-1) !important; }
.u-mt-2 { margin-top: var(--s-2) !important; }
.u-mt-3 { margin-top: var(--s-3) !important; }
.u-mt-4 { margin-top: var(--s-4) !important; }
.u-mt-5 { margin-top: var(--s-5) !important; }
.u-mt-6 { margin-top: var(--s-6) !important; }
.u-mt-8 { margin-top: var(--s-8) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--s-2) !important; }
.u-mb-3 { margin-bottom: var(--s-3) !important; }
.u-mb-4 { margin-bottom: var(--s-4) !important; }
.u-mb-6 { margin-bottom: var(--s-6) !important; }
.u-mb-8 { margin-bottom: var(--s-8) !important; }
.u-p-0 { padding: 0 !important; }
.u-p-3 { padding: var(--s-3) !important; }
.u-p-4 { padding: var(--s-4) !important; }
.u-p-5 { padding: var(--s-5) !important; }
.u-gap-1 { gap: var(--s-1) !important; }
.u-gap-2 { gap: var(--s-2) !important; }
.u-gap-3 { gap: var(--s-3) !important; }
.u-gap-4 { gap: var(--s-4) !important; }
.u-gap-5 { gap: var(--s-5) !important; }
.u-gap-6 { gap: var(--s-6) !important; }
.u-w-full { width: 100% !important; }
.u-max-w-none { max-width: none !important; }
.u-min-w-0 { min-width: 0 !important; }
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-nowrap { white-space: nowrap !important; }
.u-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.u-uppercase { text-transform: uppercase !important; letter-spacing: var(--track-caps) !important; }
.u-normal { font-weight: var(--fw-normal) !important; }
.u-medium { font-weight: var(--fw-medium) !important; }
.u-semi { font-weight: var(--fw-semi) !important; }
.u-bold { font-weight: var(--fw-bold) !important; }
.u-brand { color: var(--brand) !important; }
.u-success { color: var(--teal-600) !important; }
.u-danger  { color: var(--red-600) !important; }
.u-warning { color: var(--amber-500) !important; }
.u-gold    { color: var(--gold-500) !important; }
.u-ink     { color: var(--text) !important; }
.u-relative { position: relative !important; }
.u-round-full { border-radius: var(--r-full) !important; }
.u-round-lg { border-radius: var(--r-lg) !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-scroll-x { overflow-x: auto !important; }
.u-scroll-y { overflow-y: auto !important; }
.u-divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.u-divider--dashed { border-top: 1px dashed var(--border); background: none; height: 0; }
.u-border { border: 1px solid var(--border) !important; }
.u-border-t { border-top: 1px solid var(--border) !important; }
.u-border-b { border-bottom: 1px solid var(--border) !important; }
.u-surface { background: var(--surface) !important; }
.u-inset { background: var(--surface-inset) !important; }
.u-tabular { font-variant-numeric: tabular-nums !important; }
.u-mobile-only { display: initial; }
.u-desktop-only { display: none; }
@media (min-width: 768px) {
  .u-mobile-only { display: none !important; }
  .u-desktop-only { display: initial; }
  .u-desktop-flex { display: flex !important; }
}
@media (max-width: 767px) {
  .u-desktop-flex { display: none !important; }
  .u-sm-full { width: 100% !important; }
  .u-sm-col { flex-direction: column !important; align-items: stretch !important; }
  .u-sm-hidden { display: none !important; }
}
@media (max-width: 1023px) {
  .u-lg-hidden { display: none !important; }
}

/* ==========================================================================
   18. PRINT — booking receipts
   ========================================================================== */
@media print {
  :root {
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --surface-inset: #f4f4f4; --text: #111; --text-2: #333; --text-3: #555; --text-muted: #666;
    --border: #cfcfcf; --border-subtle: #e2e2e2; --border-strong: #b4b4b4;
    --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-brand: none; --shadow-inset: none;
  }
  html, body { background: #fff !important; color: #111 !important; font-size: 11pt; }
  body { padding: 0 !important; }
  .site-header, .site-footer, .tabbar, .book-bar, .toast-region, .skip-link,
  .backdrop, .modal, .sheet, .drawer, .lightbox, .filters__mobile-bar,
  .no-print, .btn, .pagination, .rail__nav, .app-band, .hotel-card__wish { display: none !important; }
  .print-only { display: revert !important; }
  a { color: #111 !important; text-decoration: none !important; }
  a[href]::after { content: ""; }
  .card, .table-wrap, .booking-strip, .review, .booking-box {
    border: 1px solid #cfcfcf !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .container, .container--wide, .container--narrow { max-width: none !important; padding-inline: 0 !important; }
  .section { padding-block: 0 !important; }
  .receipt { padding: 0 !important; }
  .receipt__head { border-bottom: 2px solid #111 !important; }
  .fare__row--total { border-top: 1.5px solid #111 !important; }
  .layout-detail, .layout-results, .layout-account { display: block !important; }
  table { break-inside: auto; }
  tr, img { break-inside: avoid; }
  thead { display: table-header-group; }
  .page-break { break-before: page; }
}
.print-only { display: none; }

/* receipt document (blank layout) */
.receipt {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.2rem + 2vw, 3rem) var(--gutter);
  background: var(--surface);
}
.receipt__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 2px solid var(--text);
}
.receipt__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); }
.receipt__meta { font-size: var(--fs-sm); color: var(--text-3); }
.receipt__section { padding-block: var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.receipt__section-title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.receipt__foot { padding-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-3); }

/* no-JS fallbacks */
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }

/* ==========================================================================
   Header — primary menu, partner CTA and account
   ==========================================================================
   .site-header__nav is display:none below 1024px, so everything in it is also
   mirrored inside the dropdown panel and tagged .site-header__menu-only. That
   duplication is deliberate: it keeps one markup path with a working JS
   controller instead of a second mobile drawer that nothing drives.
   ========================================================================== */

/* Partner CTA: its own slot on desktop, folded into the menu below that. */
.site-header__partner { display: none; white-space: nowrap; }
@media (min-width: 1024px) { .site-header__partner { display: inline-flex; align-items: center; gap: var(--s-1); } }

/* Auth buttons need room; under 640px the menu carries them instead. */
.site-header__login,
.site-header__signup { display: none; }
@media (min-width: 640px) { .site-header__login, .site-header__signup { display: inline-flex; } }

/* The search CTA keeps its icon at every width but drops the label when tight. */
@media (max-width: 479px) { .site-header__search-cta span { display: none; } }

/* Burger — only while the nav row is hidden. */
.site-header__menu { display: inline-flex; }
@media (min-width: 1024px) { .site-header__menu { display: none; } }

.site-header__burger {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-header__burger:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* Rows that exist only to cover what the hidden nav would have shown. */
.site-header__menu-only { display: flex; }
@media (min-width: 1024px) { .site-header__menu-only { display: none; } }

/* Account trigger. */
.site-header__account {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-header__account:hover { background: var(--surface-2); border-color: var(--border-strong); }
.site-header__account-name { display: none; }
@media (min-width: 640px) { .site-header__account-name { display: inline; } }

/* The sign-out control is a submit button inside a form, so it needs the
   dropdown row's own box rather than the browser default. */
.dropdown__panel form { display: block; }
.dropdown__panel form .dropdown__item {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ==========================================================================
   Touch-device corrections
   ========================================================================== */

/* iOS Safari zooms the whole viewport when a focused form control renders under
   16px, so tapping any field jumps the page and the user has to pinch back out.
   Every control steps up to 16px on a touch pointer. Two class families are
   covered because the inline style layer (_styles.php) ships its own .ob-*
   controls alongside the design-system ones. */
@media (pointer: coarse), (max-width: 767px) {
  .input,
  .select,
  .textarea,
  .input--sm,
  .select--sm,
  .ob-input,
  .ob-select,
  .ob-textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* Comfortable hit areas on touch. 44px is the Apple HIG minimum; menu and
   footer rows have the room for it, while the compact header buttons take 40px
   so the bar height does not grow.

   The width fallback matters: emulated mobile viewports (and some Android
   browsers) still report `pointer: fine`, so a coarse-only query silently does
   nothing on exactly the devices it is meant to serve. */
@media (pointer: coarse), (max-width: 767px) {
  .dropdown__item {
    min-height: 44px;
  }

  .btn--sm {
    min-height: 40px;
  }

  .site-header__burger {
    width: 44px;
    height: 44px;
  }

  /* The logo link is only as tall as the artwork; give it a full-height hit
     area without scaling the image. */
  .site-header__brand {
    min-height: 44px;
  }

  /* Footer link lists render as 22px text rows — far too small to hit reliably.
     Padding rather than height keeps them looking like links, not buttons. */
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .breadcrumb__link,
  .ob-sec__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}