/* South Georgia Stays — guest booking tokens */

:root {
  --sv-canvas: #e6ebe4;
  --sv-paper: #f4f7f2;
  --sv-ink: #101612;
  --sv-muted: #7a847c;
  --sv-hairline: rgba(16, 22, 18, 0.1);
  --sv-accent: #2f4a3a;
  --sv-accent-hover: #243a2e;
  --sv-accent-on: #ffffff;
  --sv-warm: #eef2ea;
  --sv-prototype: #6b5530;
  --sv-prototype-bg: #f3eee3;
  --sv-brass: #b89b6a;
  --font: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-photo: 12px;
  --shadow-capsule: 0 1px 2px rgba(26, 77, 62, 0.06), 0 8px 32px rgba(0, 0, 0, 0.12);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --max-width: 1280px;
  --header-h: 72px;
  --proto-banner-h: 36px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute must always win over class display rules
   (e.g. .user-menu__panel uses display:flex, which would otherwise
   defeat the UA's [hidden] { display: none }). */
[hidden] {
  display: none !important;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Override PMS Geist tokens so Tailwind islands (booking widget, etc.) match. */
  --font-geist: var(--font);
  --font-sans: var(--font);
  --font-label: var(--font);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sv-ink);
  background: var(--sv-canvas);
  padding-top: var(--header-h);
}

h1,
h2,
h3,
.listing-header__title,
.listing-section__title,
.stay-card__title,
.prose h2,
.prose h3,
.faq-item h3 {
  font-family: var(--font-display);
  font-weight: 450;
  letter-spacing: -0.02em;
}

/* Fraunces' default "&" is a heavy swash — Figtree keeps titles readable. */
.amp {
  font-family: var(--font);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
}

button,
.btn-pill,
.btn-primary,
.header-signin,
input,
select,
textarea,
.nav-desktop,
.nav-mobile,
.pill {
  font-family: var(--font);
}

/* Grows so the footer sits at the bottom of short pages without
   position:absolute (which would overlap tall content). */
.site-content {
  flex: 1 0 auto;
  width: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

/* Prototype banner (footer) */
.proto-banner {
  height: var(--proto-banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-prototype-bg);
  border-top: 1px solid #e8dfc8;
  color: var(--sv-prototype);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 0 1rem;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  background: var(--sv-paper);
  border-bottom: 1px solid var(--sv-hairline);
}

.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.logo {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}

.logo__region {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sv-accent);
}

.logo__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 450;
  letter-spacing: -0.02em;
  color: var(--sv-ink);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
  justify-self: center;
}

.nav-desktop a {
  font-size: 15px;
  font-weight: 500;
  color: var(--sv-muted);
  transition: color 0.2s ease;
}

.nav-desktop a:hover,
.nav-desktop a.is-active {
  color: var(--sv-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
}

.header-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--sv-muted);
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, background 0.2s ease;
}

.header-signin:hover,
.header-signin:focus-visible {
  color: var(--sv-ink);
  background: var(--sv-warm);
  outline: none;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-pill--primary {
  background: var(--sv-accent);
  color: var(--sv-accent-on);
}

.btn-pill--primary:hover {
  background: var(--sv-accent-hover);
}

.btn-pill--ghost {
  background: transparent;
  color: var(--sv-ink);
  border: 1px solid var(--sv-ink);
}

.btn-pill--ghost:hover {
  background: var(--sv-warm);
}

.btn-pill--light {
  background: var(--sv-paper);
  color: var(--sv-ink);
}

.btn-pill--light:hover {
  background: var(--sv-warm);
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sv-canvas);
  cursor: pointer;
}

/* User profile menu — shown next to the Book direct pill when a guest
   is signed in (email, password, or Google). Clicking the avatar opens a
   dropdown with account links and a sign-out form. */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.user-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-pill);
  background: var(--sv-paper);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.user-menu__trigger:hover {
  border-color: var(--sv-ink);
}

.user-menu__trigger[aria-expanded="true"] {
  border-color: var(--sv-ink);
}

.user-menu__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-menu__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-accent);
  background: var(--sv-warm);
  letter-spacing: -0.01em;
}

.user-menu__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 12rem;
  padding: 0.375rem;
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  z-index: 100;
  transform-origin: top right;
  animation: user-menu-pop 140ms var(--ease-out);
}

@keyframes user-menu-pop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.user-menu__form {
  margin: 0;
  padding: 0;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--sv-ink);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

button.user-menu__item {
  width: 100%;
}

.user-menu__item:hover,
.user-menu__item:focus-visible {
  background: var(--sv-warm);
  outline: none;
}

.user-menu__item--danger {
  color: var(--color-ember, #b91c1c);
}

.user-menu__item--danger:hover,
.user-menu__item--danger:focus-visible {
  background: color-mix(in srgb, var(--color-ember, #b91c1c) 8%, var(--sv-paper));
  color: var(--color-ember, #b91c1c);
}

.user-menu__item svg {
  flex-shrink: 0;
  color: var(--sv-muted);
}

.user-menu__item--danger svg {
  color: currentColor;
}

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--sv-paper);
  border-bottom: 1px solid var(--sv-hairline);
  padding: 1rem;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 80;
}

.nav-mobile.is-open {
  display: flex;
}

.nav-mobile a {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 500;
}

.nav-mobile a:hover,
.nav-mobile a.is-active {
  background: var(--sv-warm);
}

.cta-label-short {
  display: none;
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .cta-label-full {
    display: inline;
  }

  .cta-label-short {
    display: none;
  }
}

@media (max-width: 767px) {
  .cta-label-full {
    display: none;
  }

  .cta-label-short {
    display: inline;
  }

  /* Redundant here below 768px — signed-out visitors already get "Sign in"
     from .nav-mobile, and the header row (logo + CTA + toggle) is already
     tight against the 375px viewport without it. */
  .header-signin {
    display: none;
  }

  /* Mobile chrome stays logo + account/menu; Book now lives in nav/listings. */
  .header-actions > .btn-pill--primary {
    display: none;
  }
}

/* Hero */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 3rem;
  background: #1a1a1a;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #2a2a2a;
}

.hero__bg picture,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 42%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title,
.hero__subtitle,
.hero__content .search-capsule {
  animation: hero-rise 480ms var(--ease-out) both;
}

.hero__subtitle {
  animation-delay: 60ms;
}

.hero__content .search-capsule {
  animation-delay: 120ms;
}

.hero__title {
  margin: 0 auto 1rem;
  font-size: clamp(2.25rem, 4.8vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 14ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.hero__subtitle {
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 40ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

/* Search capsule */
.search-capsule {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
  align-items: stretch;
  background: var(--sv-paper);
  border-radius: 18px;
  box-shadow: var(--shadow-capsule);
  max-width: 64rem;
  width: 100%;
  margin-inline: auto;
  padding: 0.375rem;
  overflow: visible;
  transition: box-shadow 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .search-capsule:hover {
    box-shadow: 0 1px 2px rgba(26, 77, 62, 0.08), 0 12px 40px rgba(0, 0, 0, 0.16);
  }
}

.search-capsule__field {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 68px;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--sv-ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.search-capsule__field + .search-capsule__field {
  border-left: 1px solid var(--sv-hairline);
  border-radius: 0 13px 13px 0;
}

.search-capsule__field > svg {
  width: 18px;
  height: 18px;
  color: var(--sv-accent);
  stroke-width: 1.9;
}

.search-capsule__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

@media (hover: hover) and (pointer: fine) {
  .search-capsule__field:hover {
    background: var(--sv-warm);
  }
}

.search-capsule__field:focus-visible,
.search-capsule__field:focus-within {
  z-index: 2;
  background: var(--sv-paper);
  box-shadow: inset 0 0 0 1px var(--sv-accent);
  outline: none;
}

.search-capsule__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sv-ink);
  line-height: 1.2;
}

.search-capsule__value {
  overflow: hidden;
  color: var(--sv-muted);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-capsule__chevron {
  width: 14px !important;
  height: 14px !important;
  color: var(--sv-muted) !important;
}

/* Desktop keeps the capsule tight: the four fields read as one control, so
   the date pair doesn't need its own disclosure caret (and adding it there
   squeezes "2 guests" into an ellipsis). On mobile each field is its own
   full-width row, where the caret is the only thing saying "this opens". */
.search-capsule__field--checkin .search-capsule__chevron,
.search-capsule__field--checkout .search-capsule__chevron {
  display: none;
}

.search-capsule__submit {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.25rem 0.25rem 0;
}

.search-capsule__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 52px;
  min-height: 52px;
  padding: 0 1.125rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sv-accent);
  color: var(--sv-accent-on);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 77, 62, 0.35);
  touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.search-capsule__btn svg {
  width: 20px;
  height: 20px;
}

.search-capsule__btn-text {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .search-capsule__btn:hover {
    background: var(--sv-accent-hover);
    box-shadow: 0 4px 14px rgba(26, 77, 62, 0.4);
  }
}

.search-capsule__btn:focus-visible {
  outline: 3px solid var(--sv-paper);
  outline-offset: 3px;
}

.search-capsule__btn:active {
  transform: scale(0.97);
}

/* Standalone filter bar above the listing sections (StayFilters, plain
   <details>/<summary> — no JS/hydration needed for a disclosure widget).
   Mobile: one "Filters" trigger opening a full stacked sheet. Desktop: one
   pill button per category, each its own small popover; pet-friendly is a
   plain toggle submit button since a boolean needs no popover at all. */
.stay-filters-bar {
  padding-block: 1rem 0;
}

.stay-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stay-filters__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-pill);
  background: var(--sv-paper);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sv-ink);
  cursor: pointer;
  list-style: none;
}

.stay-filters__pill::-webkit-details-marker {
  display: none;
}

.stay-filters__pill::marker {
  display: none;
  content: "";
}

.stay-filters__pill svg {
  width: 16px;
  height: 16px;
  color: var(--sv-muted);
}

.stay-filters__pill.is-active {
  border-color: var(--sv-accent);
  color: var(--sv-accent);
  background: var(--sv-warm);
}

.stay-filters__pill.is-active svg {
  color: var(--sv-accent);
}

@media (hover: hover) and (pointer: fine) {
  .stay-filters__pill:hover {
    border-color: var(--sv-ink);
  }
}

.stay-filters__clear {
  font-size: 0.8125rem;
  color: var(--sv-muted);
  text-decoration: underline;
  white-space: nowrap;
}

/* Desktop: one <details> per category, each with its own small popover. */
.stay-filters__desktop {
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stay-filters__mobile {
  display: block;
  width: 100%;
}

@media (min-width: 641px) {
  .stay-filters__desktop {
    display: flex;
  }
  .stay-filters__mobile {
    display: none;
  }
}

.stay-filters__category {
  position: relative;
}

.stay-filters__popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 15rem;
  padding: 1rem;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-md);
  background: var(--sv-paper);
  box-shadow: var(--shadow-card);
}

.stay-filters__popover label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sv-muted);
}

.stay-filters__popover input,
.stay-filters__popover select {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--sv-ink);
  background: var(--sv-bg);
}

/* Mobile: single trigger opening a full stacked sheet, same fields. */
.stay-filters__sheet {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-md);
  background: var(--sv-paper);
}

.stay-filters__sheet-row {
  display: flex;
  gap: 0.75rem;
}

.stay-filters__sheet label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sv-muted);
}

.stay-filters__sheet input[type="number"],
.stay-filters__sheet select {
  width: 100%;
  min-width: 0;
  padding: 0.625rem;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--sv-ink);
  background: var(--sv-bg);
}

.stay-filters__sheet-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--sv-ink);
}

.search-capsule__popover {
  position: absolute;
  top: calc(100% + 0.75rem);
  z-index: 20;
  border: 1px solid var(--sv-hairline);
  border-radius: 16px;
  background: var(--sv-paper);
  color: var(--sv-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.14);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: var(--popover-origin-x, 50%) top;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

@starting-style {
  .search-capsule__popover {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

.search-capsule__popover--dates {
  left: var(--popover-offset-left, 19%);
  width: min(23rem, calc(100vw - 2rem));
  padding: 1rem;
}

.search-capsule__popover--guests {
  top: calc(100% + 1.25rem);
  right: 4.75rem;
  width: min(20rem, calc(100vw - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}

/* City list. A native <select> was tried here first and rejected: its
   options render in an OS-level popup this stylesheet can't reach (it
   escaped the viewport on narrow screens) and it drew its own border
   inside the capsule. Same popover pattern as dates/guests instead, so
   all four capsule fields look and behave alike. */
.search-capsule__popover--where {
  left: 0.375rem;
  width: min(16rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.search-where__option {
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--sv-ink);
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .search-where__option:hover {
    background: var(--sv-warm);
  }
}

.search-where__option.is-selected {
  background: var(--sv-warm);
  font-weight: 600;
  color: var(--sv-accent);
}

.search-where__option:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: -2px;
}

.search-capsule__scrim {
  display: none;
}

@media (min-width: 901px) {
  .search-capsule__popover--dates.is-above {
    top: auto;
    bottom: calc(100% + 0.75rem);
    transform-origin: var(--popover-origin-x, 50%) bottom;
  }
}

.search-calendar__header,
.search-calendar__month-nav,
.search-calendar__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.search-calendar__header {
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--sv-hairline);
}

.search-calendar__header div,
.search-guests__copy,
.search-where__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.search-calendar__header strong,
.search-guests__copy strong,
.search-where__copy strong {
  font-size: 0.9375rem;
}

.search-calendar__header span,
.search-guests__copy span,
.search-where__copy span {
  color: var(--sv-muted);
  font-size: 0.8125rem;
}

/* Desktop: the panel opens directly under the field, whose own "Where"
   label is still visible — a second heading would just repeat it. */
.search-where__copy {
  display: none;
}

.search-calendar__month-nav {
  min-height: 52px;
}

.search-calendar__month-nav > strong {
  font-size: 0.9375rem;
}

.search-calendar__icon-btn,
.search-guests__stepper button {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--sv-warm);
  color: var(--sv-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}

.search-calendar__icon-btn svg,
.search-guests__stepper button svg {
  width: 18px;
  height: 18px;
}

.search-calendar__icon-btn:disabled,
.search-guests__stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

@media (hover: hover) and (pointer: fine) {
  .search-calendar__icon-btn:not(:disabled):hover,
  .search-guests__stepper button:not(:disabled):hover {
    background: var(--sv-hairline);
  }
}

.search-calendar__icon-btn:not(:disabled):active,
.search-guests__stepper button:not(:disabled):active {
  transform: scale(0.95);
}

.search-calendar__icon-btn:focus-visible,
.search-calendar__day:focus-visible,
.search-guests__stepper button:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

.search-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.search-calendar__weekday {
  padding: 0.25rem 0;
  color: var(--sv-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
}

.search-calendar__day {
  width: 100%;
  min-width: 40px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--sv-ink);
  font-size: 0.875rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.search-calendar__day:disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--sv-muted) 45%, white);
}

.search-calendar__day.is-in-range {
  background: color-mix(in srgb, var(--sv-accent) 12%, white);
  border-radius: 4px;
}

.search-calendar__day.is-selected {
  background: var(--sv-accent);
  color: var(--sv-accent-on);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .search-calendar__day:not(:disabled):not(.is-selected):hover {
    background: var(--sv-warm);
  }
}

.search-calendar__day:not(:disabled):active {
  transform: scale(0.94);
}

.search-calendar__footer {
  margin-top: 0.75rem;
  padding: 0.75rem 0.25rem 0;
  border-top: 1px solid var(--sv-hairline);
  color: var(--sv-muted);
  font-size: 0.8125rem;
}

.search-calendar__footer span:first-child,
.search-calendar__footer span:last-child {
  color: var(--sv-ink);
  font-weight: 500;
}

.search-guests__stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-guests__stepper > strong {
  width: 1.25rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (max-width: 900px) {
  .search-capsule {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "where where"
      "checkin checkout"
      "guests guests"
      "submit submit";
    border-radius: 16px;
    padding: 0.5rem;
    gap: 1px;
    max-width: 38rem;
  }

  .search-capsule__field {
    min-height: 60px;
    border-radius: 12px;
  }

  .search-capsule__field + .search-capsule__field {
    border-left: none;
    border-radius: 12px;
  }

  .search-capsule__field--checkin .search-capsule__chevron,
  .search-capsule__field--checkout .search-capsule__chevron {
    display: block;
  }

  .search-capsule__field--where {
    grid-area: where;
  }

  .search-capsule__field--checkin {
    grid-area: checkin;
  }

  .search-capsule__field--checkout {
    grid-area: checkout;
  }

  .search-capsule__field--guests {
    grid-area: guests;
  }

  .search-capsule__field--checkin {
    border-right: 1px solid var(--sv-hairline);
  }

  .search-capsule__submit {
    grid-area: submit;
    padding: 0.5rem 0 0;
  }

  .search-capsule__btn {
    width: 100%;
    min-height: 48px;
  }

  .search-capsule__btn-text {
    display: inline;
  }

  .search-capsule__popover--dates {
    right: 0;
    left: 0;
    width: 100%;
  }

  .search-capsule__popover--guests,
  .search-capsule__popover--where {
    right: 0;
    left: 0;
    width: 100%;
    top: calc(100% + 1rem);
  }
}

@media (max-width: 640px) {
  .search-capsule {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "where where"
      "checkin checkout"
      "guests guests"
      "submit submit";
    border-radius: var(--radius-card);
  }

  .search-capsule__field {
    min-height: 58px;
    border-right: none;
    border-bottom: 1px solid var(--sv-hairline);
    border-radius: 10px;
  }

  .search-capsule__field--checkin {
    border-right: 1px solid var(--sv-hairline);
  }

  .search-capsule__field--guests {
    border-bottom: none;
  }

  /* One pattern for all four fields on a phone: the panel docks at the
     bottom, in the thumb's reach, over a scrim. Anchoring under the capsule
     instead (as guests/where used to) put the controls mid-screen and gave
     the capsule two different behaviors depending on which field you tapped.
     Each panel carries its own heading, so covering the capsule costs no
     context. */
  .search-capsule__popover--dates,
  .search-capsule__popover--guests,
  .search-capsule__popover--where {
    position: fixed;
    top: auto;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 1rem;
    width: auto;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    transform-origin: bottom center;
  }

  .search-where__copy {
    display: flex;
    padding: 0.25rem 0.75rem 0.75rem;
    border-bottom: 1px solid var(--sv-hairline);
    margin-bottom: 0.25rem;
  }

  /* Roomier rows once the list is a sheet rather than a dropdown. */
  .search-where__option {
    padding: 0.875rem 0.75rem;
  }

  .search-capsule__popover--guests {
    padding: 1.25rem;
  }

  .search-capsule__scrim {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: rgb(0 0 0 / 0.42);
    cursor: pointer;
  }

  .search-calendar__day {
    min-width: 38px;
  }
}

/* Narrowest phones (320px): the side-by-side date pair leaves each field
   ~150px, where "Add date" ellipses. Give the two their own rows — all four
   fields then read as one full-width stack. */
@media (max-width: 380px) {
  .search-capsule {
    grid-template-areas:
      "where where"
      "checkin checkin"
      "checkout checkout"
      "guests guests"
      "submit submit";
  }

  .search-capsule__field--checkin {
    border-right: none;
  }
}

/* Sections */
.section {
  padding: 3rem 0;
}

.section--warm {
  background: var(--sv-warm);
}

.section-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-bottom: 0.75rem;
}

.section-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 450;
  letter-spacing: -0.02em;
}

.section-desc {
  margin: 0 0 2rem;
  color: var(--sv-muted);
  max-width: 55ch;
}

.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.link-arrow {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.link-arrow:hover {
  text-decoration: underline;
}

/* Property grid */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.property-card {
  display: block;
  transition: transform 160ms var(--ease-out);
}

.property-card:hover {
  transform: translateY(-2px);
}

.property-card:active {
  transform: translateY(-2px) scale(0.98);
}

.property-card__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-photo);
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--sv-hairline);
}

.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-card__title {
  margin: 0 0 0.25rem;
  font-size: 15px;
  font-weight: 500;
}

.property-card__meta {
  margin: 0 0 0.25rem;
  font-size: 14px;
  color: var(--sv-muted);
}

.property-card__price {
  margin: 0;
  font-size: 15px;
}

.property-card__price strong {
  font-weight: 600;
}

/* Category sections (horizontal scroll rows) */
.stay-section {
  padding: 1.75rem 0;
  /* Up to 9 sections repeat overlapping cards (a listing can land in several
     tag/group rows), so unfiltered /book/stays renders far more than 82 card
     DOM trees. content-visibility skips style/layout/paint for whichever
     sections are off-screen, which is what actually drove TBT — not JS
     hydration (these cards are static, JS-free). contain-intrinsic-size
     estimates one row's height so skipped sections don't collapse to 0
     and shift the page; "auto" swaps in the real measured height after
     first paint. */
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}

.stay-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stay-section__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stay-section__nav {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .stay-section__nav {
    display: none;
  }
}

.stay-scroll__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sv-hairline);
  background: var(--sv-paper);
  color: var(--sv-ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .stay-scroll__arrow:hover {
    border-color: var(--sv-ink);
    box-shadow: var(--shadow-card);
  }
}

.stay-scroll__arrow:active {
  transform: scale(0.93);
}

.stay-scroll__viewport {
  --stay-fade: 10px;
  position: relative;
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
  overflow: hidden;
}

.stay-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.25rem;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000, #000);
  mask-image: linear-gradient(to right, #000, #000);
}

.stay-scroll::-webkit-scrollbar {
  display: none;
}

.stay-scroll__viewport[data-fade-left="true"] .stay-scroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--stay-fade), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--stay-fade), #000 100%);
}

.stay-scroll__viewport[data-fade-right="true"] .stay-scroll {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--stay-fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--stay-fade)), transparent 100%);
}

.stay-scroll__viewport[data-fade-left="true"][data-fade-right="true"] .stay-scroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--stay-fade), #000 calc(100% - var(--stay-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--stay-fade), #000 calc(100% - var(--stay-fade)), transparent 100%);
}

.stay-scroll__item {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

/* JS applies .will-reveal at runtime only — cards stay visible by default
   (no-JS, or if the observer never fires) and this is purely additive polish. */
.stay-scroll__item.will-reveal {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  will-change: opacity, transform;
}

.stay-scroll__item.will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
  .stay-scroll__item {
    flex-basis: 200px;
  }
}

/* Property detail — listing page (Airbnb-inspired) */
.listing-page {
  background: var(--sv-paper);
  padding-bottom: 4rem;
}

.listing-page__inner {
  padding-top: 1.25rem;
}

.listing-header {
  margin-bottom: 1.25rem;
}

.listing-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 14px;
  color: var(--sv-muted);
}

.listing-breadcrumb a:hover {
  text-decoration: underline;
}

.listing-header__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.5vw, 2rem);
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.listing-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 14px;
  color: var(--sv-muted);
}

.listing-header__dot {
  opacity: 0.5;
}

.listing-header__badge {
  color: var(--sv-accent);
  font-weight: 500;
}

/* Content grid: gallery + main on the left, booking panel on the right */
.listing-content-grid {
  display: block;
  margin-top: 0;
}

@media (min-width: 1024px) {
  .listing-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 3rem;
  }
}

.listing-content-grid__sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .listing-content-grid__sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    padding-top: 0.5rem;
  }
}

/* Show booking panel inline on mobile (after main content) */
@media (max-width: 1023px) {
  .listing-content-grid__sidebar {
    display: block;
    margin-top: 2rem;
  }
}

.listing-body {
  margin-top: 2rem;
}

/* Target of the sticky mobile bar's "Check availability" link — offset so
   the jump lands below the fixed site header instead of under it. */
#check-availability {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.listing-layout {
  display: grid;
  gap: 3rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .listing-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 5rem;
  }
}

.listing-section {
  padding: 2rem 0;
  border-top: 1px solid var(--sv-hairline);
}

.listing-section--host {
  padding-top: 0;
  border-top: none;
}

.listing-section__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 450;
  letter-spacing: -0.02em;
}

.listing-section__title--sm {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.listing-prose {
  margin: 0;
  max-width: 65ch;
  line-height: 1.65;
  color: var(--sv-ink);
  white-space: pre-line;
}

.listing-description {
  position: relative;
  max-width: 65ch;
}

.listing-description.is-collapsible:not(.is-expanded) {
  max-height: 9.9em;
  overflow: hidden;
}

.listing-description.is-collapsible:not(.is-expanded)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3.3em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sv-paper));
  pointer-events: none;
}

.listing-description__toggle {
  display: block;
  margin-top: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--sv-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.listing-host {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.listing-host__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sv-accent) 12%, white);
  color: var(--sv-accent);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}

.listing-host__sub {
  margin: 0;
  font-size: 14px;
  color: var(--sv-muted);
}

.listing-amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem 2rem;
}

@media (min-width: 640px) {
  .listing-amenities {
    grid-template-columns: 1fr 1fr;
  }
}

.listing-amenities__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 15px;
}

.listing-amenities__item svg {
  flex-shrink: 0;
  color: var(--sv-ink);
}

.listing-amenities--popular {
  margin-bottom: 1.25rem;
}

.listing-amenities--popular .listing-amenities__item svg {
  color: var(--sv-accent, var(--sv-ink));
}

.listing-amenities-details summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
}

.listing-amenities-details summary::-webkit-details-marker {
  display: none;
}

.listing-amenities-details[open] summary {
  margin-bottom: 1.25rem;
}

.listing-rules {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--sv-muted);
  line-height: 1.6;
}

.listing-rules li {
  margin-bottom: 0.5rem;
}

.listing-map {
  margin-top: 1.25rem;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--sv-hairline);
  overflow: hidden;
  background: var(--sv-warm);
}

/* 16/9 on a phone leaves a ~200px sliver — shorter than the marker's own popup
   card, which then opened clipped at both ends with the Directions button
   outside the frame. Portrait gives the popup somewhere to go. */
@media (max-width: 640px) {
  .listing-map {
    aspect-ratio: 3 / 4;
  }
}

.listing-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.listing-map-link {
  margin: 0.75rem 0 0;
  font-size: 14px;
}

.listing-map-link a {
  color: var(--sv-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.listing-back {
  margin: 2rem 0 0;
}

/* Photo mosaic */
.gallery-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: clamp(240px, 42vw, 480px);
  border-radius: 12px;
  overflow: hidden;
}

.gallery-mosaic__cell {
  position: relative;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--sv-hairline);
  overflow: hidden;
}

.gallery-mosaic__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

.gallery-mosaic__cell:hover img {
  filter: brightness(0.92);
}

.gallery-mosaic__hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

/* Solo photo: hero fills the whole mosaic */
.gallery-mosaic__hero:first-child:last-child {
  grid-column: 1 / 5;
}

.gallery-mosaic__show-all {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  border: 1px solid var(--sv-ink);
  background: var(--sv-paper);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.gallery-mosaic__show-all:hover {
  background: var(--sv-warm);
}

.gallery-favorite {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, black 35%, transparent);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-favorite:active {
  transform: scale(0.93);
}

.gallery-favorite svg {
  fill: transparent;
  stroke: #fff;
  stroke-width: 2;
  transition: fill 200ms ease, stroke 200ms ease;
}

.gallery-favorite[aria-pressed="true"] svg {
  fill: var(--color-ember, #e7000b);
  stroke: var(--color-ember, #e7000b);
}

.gallery-favorite.is-animating svg {
  animation: gallery-favorite-pop 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes gallery-favorite-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.35);
  }
  60% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-favorite.is-animating svg {
    animation: none;
  }
}

/* Exactly one supporting photo: it fills the entire right half */
.gallery-mosaic__cell:nth-child(2):last-child {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

/* Exactly two supporting photos: each spans full height, side by side */
.gallery-mosaic__cell:nth-child(2):nth-last-child(2),
.gallery-mosaic__cell:nth-child(3):last-child {
  grid-row: 1 / 3;
}

@media (max-width: 640px) {
  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .gallery-mosaic__hero,
  .gallery-mosaic__cell:nth-child(2):last-child {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .gallery-mosaic__cell:not(.gallery-mosaic__hero) {
    display: none;
  }

  .gallery-mosaic__show-all {
    display: block;
  }
}

.room-tour__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.room-tour__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--sv-hairline);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.room-tour__card:hover img {
  filter: brightness(0.94);
  transform: translateY(-2px);
}

.room-tour__card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sv-ink);
}

.room-tour__card-count {
  font-size: 13px;
  color: var(--sv-muted);
}

/* ============================================================
   Immersive photo lightbox
   ============================================================ */
.gallery-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sv-paper);
  overflow: hidden;
  overscroll-behavior: contain;
  /* Exit transition (deliberately faster than enter) */
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 170ms var(--ease-out),
    transform 170ms var(--ease-out),
    overlay 170ms allow-discrete,
    display 170ms allow-discrete;
}

.gallery-lightbox[open] {
  opacity: 1;
  transform: scale(1);
  /* Enter transition (slower, more graceful) */
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    overlay 300ms allow-discrete,
    display 300ms allow-discrete;
}

@starting-style {
  .gallery-lightbox[open] {
    opacity: 0;
    transform: scale(0.985);
  }
}

.gallery-lightbox::backdrop {
  background: rgb(8 8 8 / 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    background 170ms var(--ease-out),
    -webkit-backdrop-filter 170ms var(--ease-out),
    backdrop-filter 170ms var(--ease-out);
}

.gallery-lightbox[open]::backdrop {
  background: rgb(8 8 8 / 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background 300ms var(--ease-out),
    -webkit-backdrop-filter 300ms var(--ease-out),
    backdrop-filter 300ms var(--ease-out);
}

@starting-style {
  .gallery-lightbox[open]::backdrop {
    background: rgb(8 8 8 / 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

.gallery-lightbox__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Toolbar --- */
.gallery-lightbox__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.75rem);
}

.gallery-lightbox__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gallery-lightbox__group-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sv-paper);
}

.gallery-lightbox__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.72);
  letter-spacing: 0.01em;
}

.gallery-lightbox__count b {
  font-weight: 600;
  color: var(--sv-paper);
}

.gallery-lightbox__count-label {
  margin-left: 0.4rem;
  padding-left: 0.55rem;
  border-left: 1px solid rgb(255 255 255 / 0.22);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

.gallery-lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.9rem;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.16);
  color: var(--sv-paper);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}

.gallery-lightbox__close svg {
  opacity: 0.85;
}

.gallery-lightbox__close:active {
  transform: scale(0.96);
}

/* --- Stage --- */
.gallery-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(0.5rem, 2vw, 1.5rem) clamp(0.75rem, 4vw, 4.5rem);
  touch-action: pan-y;
}

.gallery-lightbox__figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
  transform: translateX(var(--swap-x, 0)) scale(1);
  will-change: transform, opacity, filter;
  transition:
    opacity 280ms var(--ease-out),
    transform 280ms var(--ease-out),
    filter 280ms var(--ease-out);
}

.gallery-lightbox__figure img[data-swapping] {
  opacity: 0;
  filter: blur(10px);
  transform: translateX(var(--swap-x, 0)) scale(0.985);
}

/* --- Nav arrows --- */
.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(20 20 20 / 0.55);
  color: var(--sv-paper);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}

.gallery-lightbox__nav--prev {
  left: clamp(0.5rem, 2vw, 1.5rem);
}

.gallery-lightbox__nav--next {
  right: clamp(0.5rem, 2vw, 1.5rem);
}

.gallery-lightbox__nav:active {
  transform: scale(0.9);
}

/* --- Thumbnail strip --- */
.gallery-lightbox__strip {
  display: flex;
  gap: 0.6rem;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.75rem);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.gallery-lightbox__strip::-webkit-scrollbar {
  display: none;
}

.gallery-lightbox__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition:
    opacity 200ms var(--ease-out),
    outline-color 200ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.gallery-lightbox__thumb:active {
  transform: scale(0.94);
}

.gallery-lightbox__thumb.is-active {
  opacity: 1;
  outline-color: var(--sv-paper);
}

.gallery-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-lightbox__close:hover {
    background: rgb(255 255 255 / 0.18);
    border-color: rgb(255 255 255 / 0.3);
  }

  .gallery-lightbox__nav:hover {
    background: rgb(40 40 40 / 0.75);
    border-color: rgb(255 255 255 / 0.35);
    transform: scale(1.06);
  }

  .gallery-lightbox__nav:active {
    transform: scale(0.9);
  }

  .gallery-lightbox__thumb:hover {
    opacity: 0.85;
  }

  .gallery-lightbox__thumb.is-active:hover {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .gallery-lightbox__nav {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }

  .gallery-lightbox__close span:last-child {
    display: none;
  }

  .gallery-lightbox__close {
    padding: 0;
    width: 44px;
    justify-content: center;
  }
}

/* Booking widget */
.booking-widget {
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
}

@media (min-width: 1024px) {
  .booking-widget {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.booking-widget__price {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  line-height: 1.2;
}

.booking-widget__price span {
  font-size: 1rem;
  font-weight: 400;
}

.booking-widget__direct {
  display: block;
  margin-top: 0.25rem;
  font-size: 13px;
  font-weight: 400;
  color: var(--sv-muted);
}

.booking-widget__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  overflow: hidden;
}

.booking-widget__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: none;
  background: var(--sv-paper);
  text-align: left;
  cursor: pointer;
  min-height: 56px;
}

.booking-widget__field:first-child {
  border-right: 1px solid var(--sv-hairline);
}

.booking-widget__field--guests {
  cursor: default;
}

.booking-widget__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-ink);
}

.booking-widget__value {
  font-size: 14px;
  color: var(--sv-muted);
}

.booking-widget__select {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  color: var(--sv-ink);
  min-height: auto;
  cursor: pointer;
}

.booking-widget__calendar-wrap {
  margin-top: 1rem;
}

.booking-widget__calendar {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.booking-widget__cta {
  margin-top: 1rem;
}

.booking-widget__note,
.booking-widget__times {
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: var(--sv-muted);
  text-align: center;
}

.availability-legend {
  display: flex;
  gap: 1rem;
  margin: 0.75rem 0 0;
  font-size: 12px;
  color: var(--sv-muted);
}

.availability-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.availability-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.availability-legend__dot--open {
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
}

.availability-legend__dot--blocked {
  background: #e8e8e8;
}

.avail-calendar__day--in-range {
  background: color-mix(in srgb, var(--sv-accent) 12%, white);
  border-radius: 0;
}

.avail-calendar__day--selected.avail-calendar__day--in-range,
.avail-calendar__day--in-range {
  border-color: color-mix(in srgb, var(--sv-accent) 25%, white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Legacy detail layout (reserve page) */
.detail-layout {
  display: grid;
  gap: 2rem;
  padding: 2rem 0 4rem;
}

@media (min-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }
}

.gallery {
  margin-bottom: 2rem;
}

.gallery__main {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-photo);
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--sv-hairline);
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
}

.gallery__thumb {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
}

.gallery__thumb.is-active {
  border-color: var(--sv-accent);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 14px;
  color: var(--sv-muted);
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1rem 0 2rem;
}

.amenity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
}

.amenity svg {
  flex-shrink: 0;
  color: var(--sv-accent);
}

.rules-list {
  margin: 1rem 0 2rem;
  padding-left: 1.25rem;
  color: var(--sv-muted);
}

.rules-list li {
  margin-bottom: 0.5rem;
}

.map-placeholder {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-card);
  background: var(--sv-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sv-muted);
  font-size: 14px;
  margin-top: 1rem;
}

/* Booking panel */
.booking-panel {
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.booking-panel__price {
  margin: 0 0 1rem;
  font-size: 1.375rem;
}

.booking-panel__price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--sv-muted);
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  background: var(--sv-paper);
}

.field textarea {
  min-height: 100px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.field-row > .field {
  min-width: 0;
}

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

.booking-panel .btn-pill {
  width: 100%;
  margin-top: 0.5rem;
}

.availability-error {
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: #b42318;
}

.availability-calendar {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--sv-hairline);
  border-radius: 10px;
  background: #faf9f7;
}

.availability-calendar--wide {
  margin-bottom: 0.5rem;
}

.avail-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.avail-calendar__title {
  font-size: 14px;
  font-weight: 600;
}

.avail-calendar__nav {
  width: 32px;
  height: 32px;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  background: var(--sv-paper);
  cursor: pointer;
}

.avail-calendar__weekdays,
.avail-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.avail-calendar__weekdays span {
  font-size: 11px;
  text-align: center;
  color: var(--sv-muted);
}

.avail-calendar__day {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  background: transparent;
}

.avail-calendar__day--empty {
  visibility: hidden;
}

.avail-calendar__day--open {
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--sv-hairline);
}

.avail-calendar__day--open:hover {
  border-color: #111;
}

.avail-calendar__day--blocked {
  color: #9ca3af;
  text-decoration: line-through;
  background: #ececec;
  cursor: not-allowed;
}

.avail-calendar__day--selected {
  background: #111;
  color: #fff;
  border-color: #111;
}

@media (max-width: 640px) {
  /* ponytail: bleed calendar past the form's padding so 7 day-columns clear the 44px touch target minimum on narrow phones */
  .availability-calendar--wide {
    margin-inline: -1.5rem;
    padding-inline: 0.5rem;
    border-radius: 0;
    border-inline: none;
  }

  .avail-calendar__weekdays,
  .avail-calendar__grid {
    gap: 0.2rem;
  }

  .avail-calendar__nav {
    width: 44px;
    height: 44px;
  }
}

.booking-note {
  margin-top: 1rem;
  font-size: 13px;
  color: var(--sv-muted);
  text-align: center;
}

/* Checkout */
.checkout-layout {
  display: grid;
  gap: 2rem;
  padding: 2rem 0 4rem;
}

@media (min-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr 380px;
  }
}

.checkout-form {
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.checkout-form h2 {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.summary-card {
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  height: fit-content;
}

@media (min-width: 900px) {
  .summary-card {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
  }
}

.summary-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.summary-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 15px;
}

.summary-line--total {
  border-top: 1px solid var(--sv-hairline);
  margin-top: 0.5rem;
  padding-top: 1rem;
  font-weight: 600;
  font-size: 1.0625rem;
}

/* Checkout — numbered steps (payment / message / review), each its own card.
   Genuinely sequential (you can't message before a card is saved, can't review
   before a message step is dismissed), so numbering here is real order, not
   decorative eyebrow scaffolding. */
.checkout-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkout-step {
  background: var(--sv-paper);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  transition: opacity 200ms var(--ease-out);
}

.checkout-step--pending {
  opacity: 0.5;
}

.checkout-step__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.checkout-step--active .checkout-step__title {
  margin-bottom: 1.25rem;
}

.checkout-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sv-warm);
  color: var(--sv-ink);
  font-size: 13px;
  font-weight: 600;
}

.checkout-step--done .checkout-step__number {
  background: var(--sv-accent);
  color: #fff;
}

.checkout-step__edit {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--sv-accent);
  cursor: pointer;
}

.checkout-step__edit:disabled {
  opacity: 0.5;
  cursor: default;
}

.checkout-step__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkout-step__note {
  font-size: 14px;
  color: var(--sv-muted);
  line-height: 1.5;
}

.checkout-express--empty {
  display: none;
}

.checkout-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.checkout-or::before,
.checkout-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sv-hairline, #e5e5e5);
}

.checkout-step .btn-pill {
  align-self: flex-start;
}

.checkout-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 13px;
  color: var(--sv-muted);
  cursor: pointer;
}

.checkout-terms input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.checkout-terms a {
  color: var(--sv-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Confirmation */
.confirm-hero {
  text-align: center;
  padding: 4rem 0;
  max-width: 36rem;
  margin: 0 auto;
}

.confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sv-accent) 12%, white);
  color: var(--sv-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.confirm-hero p {
  margin: 0 0 2rem;
  color: var(--sv-muted);
}

/* Content pages */
.page-hero {
  padding: 3rem 0 2rem;
  background: var(--sv-warm);
  margin-bottom: 2rem;
}

.page-hero h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.page-hero p {
  margin: 0;
  color: var(--sv-muted);
  max-width: 50ch;
  font-size: 1.125rem;
}

.page-hero__meta {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--sv-muted);
}

.page-hero__search {
  margin-top: 1.5rem;
}

.page-hero__search .search-capsule {
  margin-inline: 0;
}

.filter-clear {
  color: var(--sv-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-clear:hover {
  color: var(--sv-accent);
}

.search-empty {
  padding: 3rem 0 4rem;
  max-width: 50ch;
}

.search-empty h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.search-empty p {
  margin: 0 0 1.5rem;
  color: var(--sv-muted);
}

.search-empty__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--sv-ink);
  color: #fff;
  text-decoration: none;
  font-size: 0.9375rem;
}

.search-empty__cta:hover {
  background: var(--sv-accent);
  color: #fff;
}

.prose {
  max-width: 65ch;
}

.prose h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.prose p,
.prose li {
  color: var(--sv-muted);
  line-height: 1.6;
}

.prose ul {
  padding-left: 1.25rem;
}

.faq-item {
  border-bottom: 1px solid var(--sv-hairline);
  padding: 1.25rem 0;
}

.faq-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.faq-item p {
  margin: 0;
  color: var(--sv-muted);
  font-size: 15px;
}

.feature-row {
  display: grid;
  gap: 2rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.feature-row img {
  border-radius: var(--radius-photo);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Footer */
.site-footer {
  background: #0b1410;
  color: rgba(244, 247, 242, 0.75);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 450;
  color: #fff;
  margin-bottom: 0.75rem;
}

.footer-brand span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
}

.footer-col h4 {
  margin: 0 0 1rem;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.footer-col a {
  display: block;
  font-size: 14px;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ── Full-bleed auth screens (GuestLayout `bare`) ──
   No header is rendered, so the body must not reserve space for one. The dark
   base colour also stops a light flash before the backdrop photo paints. */
body[data-bare="true"] {
  padding-top: 0;
  background: #0a0a0a;
}

/* Tailwind's utilities sit in `@layer utilities`, and an unlayered rule beats
   any layered one regardless of specificity — so the `a { color: inherit }`
   above silently overrode every `text-white/*` class on the auth cards' links,
   leaving near-black text on dark glass. Hand those links back to the
   utilities. */
.auth-surface a {
  color: revert-layer;
}

/* Sticky mobile booking bar — the real booking widget sits ~80% down the
   listing page on mobile (after gallery, amenities, house rules), so the
   only above-the-fold path to book was a generic header pill with no price
   context. This keeps price + the primary action reachable at all times
   without touching PropertyBookingWidget itself.
   position: sticky (not fixed) + being the last child of .site-content,
   right before .site-footer in the DOM, means it docks in place the moment
   the footer's normal-flow position reaches it, instead of floating over
   the footer for the rest of the scroll. */
.sticky-book-bar {
  display: none;
}

@media (max-width: 900px) {
  .sticky-book-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--sv-paper);
    border-top: 1px solid var(--sv-hairline);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
  }

  .sticky-book-bar__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
  }

  .sticky-book-bar__price strong {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sv-ink);
  }

  .sticky-book-bar__price span {
    color: var(--sv-muted);
    font-size: 0.875rem;
  }

  .sticky-book-bar__cta {
    flex-shrink: 0;
    touch-action: manipulation;
  }

  /* .site-footer's margin-top is meant to separate it from ordinary page
     content; once the bar has docked in place (see comment above), that
     same margin just leaves a gap between the bar and the footer instead —
     so cancel it precisely when the page carries the bar.
     (.site-footer is a sibling of .site-content, not of the bar itself —
     :has() reaches into .site-content to find the bar.)
     Deliberately NOT `.sticky-book-bar:last-child`: the listing page also
     renders a `<div hidden data-recent-record>` after the bar, which takes
     up no layout but did break a :last-child match, silently bringing the
     gap back. Presence of the bar is the real condition. */
  .site-content:has(> .sticky-book-bar) + .site-footer {
    margin-top: 0;
  }
}

/* —— Trip details (guest messages) — mobile sheet first —— */
body:has(.trip-details) {
  background: var(--sv-paper);
}

body:has(.trip-details) .site-content {
  min-height: 100dvh;
}

.trip-details {
  width: 100%;
  max-width: 28rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(0.5rem, env(safe-area-inset-top))
    max(1.1rem, env(safe-area-inset-right))
    max(2.5rem, env(safe-area-inset-bottom))
    max(1.1rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--sv-paper);
  -webkit-overflow-scrolling: touch;
}

.trip-details__top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  margin: 0 -1.1rem;
  padding: 0.25rem 1.1rem;
  background: color-mix(in srgb, var(--sv-paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.trip-details__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -0.35rem;
  border-radius: 9999px;
  color: var(--sv-ink);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.trip-details__close:active {
  background: var(--sv-warm);
}

@media (hover: hover) {
  .trip-details__close:hover {
    background: var(--sv-warm);
  }
}

.trip-details__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sv-muted);
}

.trip-details__hero {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.trip-details__status {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--sv-ink);
}

.trip-details__dates-line {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--sv-muted);
}

.trip-details__lede {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sv-muted);
}

.trip-card {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.875rem;
  padding: 0.875rem;
  border: 1px solid var(--sv-hairline);
  border-radius: 14px;
  background: var(--sv-paper);
}

.trip-card__media img,
.trip-card__media-fallback {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 10px;
  object-fit: cover;
}

.trip-card__media-fallback {
  display: grid;
  place-items: center;
  background: var(--sv-accent);
  color: var(--sv-accent-on);
  font-weight: 650;
  font-size: 1.125rem;
}

.trip-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--sv-ink);
}

.trip-card__meta {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sv-muted);
}

.trip-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: var(--sv-accent);
  color: var(--sv-accent-on);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.trip-card__cta:active {
  background: var(--sv-accent-hover);
}

@media (hover: hover) {
  .trip-card__cta:hover {
    background: var(--sv-accent-hover);
  }
}

.trip-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--sv-hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--sv-paper);
}

.trip-split__cell {
  padding: 1rem 1.1rem;
}

.trip-split__cell + .trip-split__cell {
  border-left: 1px solid var(--sv-hairline);
}

.trip-split__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sv-muted);
}

.trip-split__value {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--sv-ink);
}

.trip-split__time {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--sv-muted);
}

.trip-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--sv-hairline);
  scroll-margin-top: 1.25rem;
}

.trip-section__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--sv-ink);
}

.trip-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trip-facts__row dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sv-muted);
}

.trip-facts__row dd {
  margin: 0.25rem 0 0;
  font-size: 0.975rem;
  line-height: 1.45;
  color: var(--sv-ink);
}

.trip-inline-link {
  display: inline;
  margin-left: 0.25rem;
  color: var(--sv-ink);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.trip-rules {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--sv-ink);
  font-size: 0.975rem;
  line-height: 1.45;
}

.trip-row-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.75rem 0;
  border-top: 1px solid var(--sv-hairline);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.trip-row-link:active {
  opacity: 0.72;
}

.trip-row-link:last-child {
  border-bottom: 1px solid var(--sv-hairline);
}

.trip-row-link__icon {
  display: inline-flex;
  color: var(--sv-ink);
  flex-shrink: 0;
}

.trip-row-link__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.trip-row-link__label {
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--sv-ink);
}

.trip-row-link__sub {
  font-size: 0.8125rem;
  color: var(--sv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-row-link__chev {
  color: var(--sv-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.trip-host__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.trip-host__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sv-muted);
}

.trip-host__name {
  margin: 0.15rem 0 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.trip-host__avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: var(--sv-accent);
  color: var(--sv-accent-on);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.trip-host__blurb {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sv-muted);
}

.trip-host__about {
  align-self: flex-start;
  min-height: 44px;
  touch-action: manipulation;
}

.trip-pay__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sv-ink);
}

.trip-pay__amount {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sv-ink);
}

.trip-contact__lede {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sv-muted);
}

.trip-contact .trip-row-link:first-of-type {
  border-top: 1px solid var(--sv-hairline);
}

/* Desktop: keep the same phone-width sheet centered (this surface is mobile-first). */
@media (min-width: 720px) {
  body:has(.trip-details) {
    background: var(--sv-canvas);
  }

  .trip-details {
    min-height: min(100dvh, 56rem);
    margin-block: 1.5rem;
    border: 1px solid var(--sv-hairline);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgb(10 10 10 / 6%);
    gap: 1.5rem;
    padding-block: 0.75rem 2.5rem;
  }

  .trip-details__top {
    border-radius: 20px 20px 0 0;
  }

  .trip-details__status {
    font-size: 1.85rem;
  }
}

/* —— Guest chat workspace (messenger + optional trip aside) —— */
/* A thread is a viewport-locked app view: header, scrolling log, composer
   pinned to the bottom. min-height only set a floor, so a long conversation
   grew the page instead of shrinking the log — and since the log is its own
   scroller covering most of the screen, a swipe never reached the page scroll
   and the composer stayed unreachable. A hard height caps the chain. */
body:has(.chat-workspace) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

body:has(.chat-workspace) .site-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body:has(.chat-workspace) .site-footer,
body:has(.chat-workspace) .proto-banner {
  display: none;
}

.chat-workspace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

.chat-thread {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.75rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

/* Desktop trip panel — hidden on phones (Details button opens the sheet). */
.chat-trip-aside {
  display: none;
}

.chat-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-paper, var(--sv-paper));
  overflow: hidden;
}

.chat-card__header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 52px;
  padding: 0.35rem 0.5rem 0.35rem 0.25rem;
  border-bottom: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-paper, var(--sv-paper));
}

.chat-card__back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  color: var(--color-ink, var(--sv-ink));
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chat-card__back:hover,
.chat-card__back:active {
  background: var(--color-canvas, var(--sv-canvas));
}

.chat-card__back:focus-visible {
  outline: 2px solid var(--color-ink, var(--sv-ink));
  outline-offset: 2px;
}

.chat-card__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-ink, var(--sv-ink));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card__header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.chat-card__details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 0.85rem;
  border-radius: 9999px;
  background: var(--sv-accent, #1a4d3e);
  color: var(--sv-accent-on, #fff);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chat-card__details-btn:hover,
.chat-card__details-btn:active {
  filter: brightness(1.06);
}

.chat-card__details-btn:focus-visible {
  outline: 2px solid var(--color-ink, var(--sv-ink));
  outline-offset: 2px;
}

.chat-menu {
  position: relative;
}

.chat-menu__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: var(--color-ink, var(--sv-ink));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chat-menu__trigger::-webkit-details-marker {
  display: none;
}

.chat-menu__trigger:hover,
.chat-menu[open] > .chat-menu__trigger {
  background: var(--color-canvas, var(--sv-canvas));
}

.chat-menu__trigger:focus-visible {
  outline: 2px solid var(--color-ink, var(--sv-ink));
  outline-offset: 2px;
}

.chat-menu__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-paper, var(--sv-paper));
  box-shadow: 0 8px 24px rgb(10 10 10 / 8%);
}

.chat-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink, var(--sv-ink));
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.chat-menu__item:hover,
.chat-menu__item:active {
  background: var(--color-canvas, var(--sv-canvas));
}

.chat-menu__item:focus-visible {
  outline: 2px solid var(--color-ink, var(--sv-ink));
  outline-offset: -2px;
}

.chat-card__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

/* Short threads sit at the bottom; tall ones stay fully scrollable. */
.chat-card__messages > :first-child {
  margin-top: auto;
}

.chat-system {
  align-self: center;
  max-width: 90%;
  margin: 0.25rem 0;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: var(--color-canvas, var(--sv-canvas));
  color: var(--color-mid-gray, var(--sv-muted));
  font-size: var(--text-label-sm, 0.75rem);
  text-align: center;
}

.chat-row {
  display: flex;
  gap: 0.5rem;
  max-width: 85%;
}

.chat-row--out {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-row--in {
  align-self: flex-start;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
}

.chat-bubble {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-buttons, 12px);
}

.chat-bubble--out {
  background: var(--color-ink, var(--sv-ink));
  color: #fafafa;
}

.chat-bubble--in {
  background: var(--color-canvas, var(--sv-canvas));
  color: var(--color-ink, var(--sv-ink));
}

.chat-bubble__photo {
  display: block;
  margin-bottom: 0.4rem;
  border-radius: var(--radius-buttons, 12px);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.chat-bubble__photo img {
  display: block;
  max-width: 240px;
  width: auto;
  height: auto;
  border-radius: inherit;
  transition: filter 150ms ease;
}

.chat-bubble__photo:hover img {
  filter: brightness(0.94);
}

.chat-bubble__photo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble__photo img {
    transition: none;
  }
}

.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.85rem 1rem;
}

.chat-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation: chat-typing-bounce 1.3s ease-in-out infinite;
}

.chat-typing__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-typing__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing__dot {
    animation: none;
    opacity: 0.7;
  }
}

/* Sits between the thread and the composer: a send that failed, or a thread
   that isn't live right now. Quiet, but never silent. */
.chat-notice {
  margin: 0;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-canvas, var(--sv-canvas));
  color: var(--color-ink, var(--sv-ink));
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}

.chat-input {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-paper, var(--sv-paper));
}

/* Visually hidden but still focusable — the paperclip label is the visible
   control, and a display:none input would be unreachable by keyboard. */
.chat-input__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.chat-input__attach {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-hairline, var(--sv-hairline));
  background: transparent;
  color: var(--color-mid-gray, var(--sv-muted));
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-input__attach:hover {
  background: var(--color-canvas, var(--sv-canvas));
  color: var(--color-ink, var(--sv-ink));
}

.chat-input__file:focus-visible + .chat-input__attach {
  outline: 2px solid var(--color-ink, var(--sv-ink));
  outline-offset: 2px;
}

/* Floats above the composer so attaching a photo doesn't reflow the input row. */
.chat-input__preview {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0.75rem;
  padding: 4px;
  border-radius: var(--radius-buttons, 12px);
  border: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-paper, var(--sv-paper));
  box-shadow: var(--shadow-subtle, 0 1px 3px rgb(0 0 0 / 0.1));
}

.chat-input__preview img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

.chat-input__preview-clear {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-hairline, var(--sv-hairline));
  background: var(--color-paper, var(--sv-paper));
  color: var(--color-ink, var(--sv-ink));
  cursor: pointer;
}

.chat-input__field {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-cards, 14px);
  border: 1px solid transparent;
  background: var(--color-canvas, var(--sv-canvas));
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-ink, var(--sv-ink));
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input__field:focus {
  border-color: var(--color-hairline, var(--sv-hairline));
  box-shadow: 0 0 0 1px var(--color-hairline, var(--sv-hairline));
}

.chat-input__field:focus-visible {
  border-color: var(--color-ink, var(--sv-ink));
  box-shadow: 0 0 0 1px var(--color-ink, var(--sv-ink));
}

.chat-input__send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink, var(--sv-ink));
  color: #fafafa;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, opacity 160ms ease;
}

.chat-input__send:active {
  transform: scale(0.93);
}

.chat-input__send:disabled {
  background: var(--color-hairline, var(--sv-hairline));
  color: var(--color-mid-gray, var(--sv-muted));
  cursor: default;
}

.chat-input__send:focus-visible {
  outline: 2px solid var(--color-ink, var(--sv-ink));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chat-input__send {
    transition: none;
  }
}

@media (max-width: 719px) {
  .chat-thread {
    max-width: none;
    padding: 0;
  }

  .chat-card {
    border: none;
    border-radius: 0;
  }
}

@media (min-width: 720px) {
  .chat-workspace--with-trip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    align-items: stretch;
    height: calc(100dvh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow: hidden;
  }

  .chat-workspace--with-trip .chat-thread {
    max-width: none;
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: none;
    min-height: 0;
    border-right: 1px solid var(--color-hairline, var(--sv-hairline));
  }

  .chat-workspace--with-trip .chat-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
  }

  /* Details live in the aside on desktop. */
  .chat-workspace--with-trip .chat-card__details-btn {
    display: none;
  }

  .chat-workspace--with-trip .chat-trip-aside {
    display: block;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-canvas, var(--sv-canvas));
    -webkit-overflow-scrolling: touch;
  }

  .chat-trip-aside__inner {
    padding: 1.25rem 1.25rem 2.5rem;
    max-width: 24rem;
  }

  .chat-trip-aside__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-mid-gray, var(--sv-muted));
  }

  .trip-details-body--aside .trip-details__status {
    font-size: 1.35rem;
  }

  .trip-details-body--aside .trip-card__cta {
    min-height: 40px;
    font-size: 0.8125rem;
  }

  .chat-workspace:not(.chat-workspace--with-trip) .chat-thread {
    padding-block: 1.25rem 2rem;
    max-height: calc(100dvh - var(--header-h));
  }

  .chat-workspace:not(.chat-workspace--with-trip) .chat-card {
    box-shadow: 0 12px 40px rgb(10 10 10 / 5%);
  }

  .chat-card__title {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1100px) {
  .chat-workspace--with-trip {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  }
}