/* Public site. Pine palette: forest green with a warm clay accent.
   Accessibility is held to WCAG 2.2 AAA (see .ai/AGENTS.md): every text color
   below keeps at least 7:1 against the surfaces it is used on, and controls
   keep 44px targets. Check new color pairs before using them. */
:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f2eee6;
  --ink: #1c2620;
  --ink-2: #3a443e;
  --ink-3: #444f48;
  --line: #e4dfd5;
  --line-strong: #cfc8ba;
  --line-input: #787f79;
  --brand: #1a5238;
  --brand-strong: #164630;
  --brand-soft: #e3efe7;
  --accent: #c8682c;
  --accent-soft: #fbebdd;
  --accent-ink: #733611;
  --footer-bg: #14271d;
  --footer-ink: #f3efe6;
  --hero-shade: 20 39 29;
  --focus: var(--brand);
  --target: 44px;
  --logo-main: var(--brand);
  --logo-accent: var(--accent);
  color-scheme: light;
  --danger: #921e18;
  --danger-soft: #fdecea;
  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 20px;
  --radius-xl: 26px;
  --shadow-s: 0 1px 2px rgb(20 30 25 / 6%), 0 2px 6px rgb(20 30 25 / 5%);
  --shadow: 0 2px 6px rgb(20 30 25 / 6%), 0 10px 30px rgb(20 30 25 / 9%);
  --shadow-l: 0 8px 20px rgb(20 30 25 / 10%), 0 24px 60px rgb(20 30 25 / 16%);
  --gutter: 24px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Georgian", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.55; }
@supports (min-height: 100svh) { body { min-height: 100svh; } }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, summary, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; text-wrap: balance; }
:lang(ka) h1, :lang(ka) h2, :lang(ka) h3 { letter-spacing: 0; }
[hidden] { display: none !important; }

.shell { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; display: inline-flex; min-height: var(--target); align-items: center; padding: 0 16px; border-radius: var(--radius-s); color: #fff; background: var(--ink); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Turbo's page-load bar (its own stylesheet places it); brand colored here. */
.turbo-progress-bar { background: var(--brand); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.note { max-width: 70ch; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.lead { color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.prose { max-width: 68ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; overflow-wrap: anywhere; }
/* Descriptions are sanitized rich text: paragraphs, h2/h3, lists, quotes,
   bold, italic, underline, strikethrough and links. Links keep the brand
   color (at least 8.5:1 on the page surfaces) and an underline, so they never
   rely on color alone. */
.prose > * + * { margin-top: .85em; }
.prose h2 { margin-top: 1.5em; font-size: 1.3em; line-height: 1.3; }
.prose h3 { margin-top: 1.3em; font-size: 1.1em; line-height: 1.35; }
.prose > :first-child { margin-top: 0; }
.prose :is(h2, h3) + * { margin-top: .5em; }
.prose ul { padding-inline-start: 1.35em; list-style: disc; }
.prose ol { padding-inline-start: 1.6em; list-style: decimal; }
.prose li + li, .prose li > :is(ul, ol) { margin-top: .35em; }
.prose li::marker { color: var(--ink-3); }
.prose blockquote { margin-inline: 0; padding: 2px 0 2px 18px; border-inline-start: 3px solid var(--line-strong); }
.prose blockquote > * + * { margin-top: .6em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose a:hover { color: var(--brand-strong); text-decoration-thickness: 2px; }
.text-link { display: inline-flex; min-height: var(--target); align-items: center; gap: 6px; color: var(--brand); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { transition: transform .15s; }
.text-link:hover .icon { transform: translateX(2px); }

/* ---------- Buttons ---------- */
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-size: 15.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.button-primary { color: #fff; background: var(--brand); }
.button-primary:hover { background: var(--brand-strong); }
.button-dark { color: var(--surface); background: var(--ink); }
.button-dark:hover { background: color-mix(in srgb, var(--ink) 85%, var(--surface)); }
.button-quiet { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.button-quiet:hover { border-color: var(--ink-3); background: var(--surface-2); }
.button-light { color: var(--ink); background: #fff; }
.button-light:hover { background: #f1f1ef; }
.button-outline-light { border-color: rgb(255 255 255 / 55%); color: #fff; background: transparent; }
.button-outline-light:hover { border-color: #fff; background: rgb(255 255 255 / 10%); }
.button-small { min-height: var(--target); padding: 0 14px; border-radius: 10px; font-size: 14.5px; }
.button-block { display: flex; width: 100%; }
.icon-button { display: inline-grid; width: var(--target); height: var(--target); flex: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); text-decoration: none; cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.icon-button:disabled { opacity: .35; cursor: default; }
.icon-button-outline { border-color: var(--line-strong); }

/* ---------- Checkboxes ---------- */
/* A soft rounded square drawn on the native input, so keyboard use, forms,
   Turbo and screen readers keep the built-in behavior. The 2px unchecked
   border keeps at least 3:1 against --bg and --surface, the white mark keeps
   about 9:1 against the filled box, and the label row around the box is the
   44px target. The state rules below only set the --cb-* colors; :where()
   keeps them at equal specificity so the later state wins. */
:where(input[type="checkbox"]) { --cb-border: var(--line-input); --cb-fill: var(--surface); --cb-mark: #fff; }
@media (hover: hover) {
  :where(label:hover input[type="checkbox"], input[type="checkbox"]:hover) { --cb-border: var(--brand); --cb-fill: var(--brand-soft); }
}
:where(input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate) { --cb-border: var(--brand); --cb-fill: var(--brand); }
@media (hover: hover) {
  :where(label:hover input[type="checkbox"]:is(:checked, :indeterminate), input[type="checkbox"]:is(:checked, :indeterminate):hover) { --cb-border: var(--brand-strong); --cb-fill: var(--brand-strong); }
}
:where(input[type="checkbox"][aria-invalid="true"]) { --cb-border: var(--danger); }
:where(input[type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate)) { --cb-fill: var(--danger); }
:where(input[type="checkbox"]:disabled) { --cb-border: var(--line-strong); --cb-fill: var(--surface-2); --cb-mark: var(--ink-3); }
input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-grid; width: 22px; height: 22px; flex: none; place-content: center; margin: 0; border: 2px solid var(--cb-border); border-radius: 7px; background: var(--cb-fill); vertical-align: middle; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
input[type="checkbox"]::before { content: ""; width: 14px; height: 14px; background: var(--cb-mark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
input[type="checkbox"]:indeterminate::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
input[type="checkbox"]:is(:checked, :indeterminate)::before { transform: scale(1); }
input[type="checkbox"]:disabled { cursor: not-allowed; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 40; flex: none; border-bottom: 1px solid var(--line); background: var(--surface); }
/* An open header popover lifts the header above the fixed mobile booking bar,
   so the bar can never cover the panel or a focused link in it. */
.site-header:has(> .header-inner [data-popover][open]) { z-index: 50; }
.header-note { padding: 7px 0; color: var(--brand-strong); background: var(--brand-soft); font-size: 13.5px; text-align: center; }
.header-note > .shell { max-width: calc(80ch + 2 * var(--gutter)); }
.header-inner { display: flex; min-height: 68px; align-items: center; gap: 28px; }
.brand { --logo-h: 30px; display: inline-flex; min-height: 44px; flex: none; align-items: center; gap: calc(var(--logo-h) * .18); color: inherit; text-decoration: none; }
.logo-symbol { width: calc(var(--logo-h) * 1.125); height: var(--logo-h); transform: translateY(calc(var(--logo-h) * -.1476)); }
.logo-wordmark { width: calc(var(--logo-h) * 3.2283); height: var(--logo-h); }
.logo-main { fill: var(--logo-main); }
.logo-accent { fill: var(--logo-accent); }
.logo-stroke { stroke: var(--logo-main); }
.primary-nav { display: flex; align-items: center; gap: 4px; }
.primary-nav a { display: inline-flex; min-height: var(--target); align-items: center; padding: 0 12px; border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.primary-nav a:hover { color: var(--ink); background: var(--surface-2); }
.primary-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 600; }
.header-tools { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Language switcher: a native disclosure, so it works without JavaScript.
   The panel lists every enabled language by its native name and scrolls when
   the list is taller than the viewport, so it holds ten or more languages. */
.language-toggle { display: inline-flex; min-width: var(--target); min-height: var(--target); align-items: center; justify-content: center; gap: 6px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.language-toggle:hover { border-color: var(--line-strong); background: var(--surface-2); }
.language-menu[open] > .language-toggle { border-color: var(--ink); }
.language-chevron { width: 1em; height: 1em; color: var(--ink-3); transition: transform .15s; }
.language-menu[open] .language-chevron { transform: rotate(180deg); }
.language-panel { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; width: min(280px, calc(100vw - 2 * var(--gutter))); max-height: min(34rem, calc(100vh - 7rem)); padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-l); overscroll-behavior: contain; }
@supports (max-height: 100svh) { .language-panel { max-height: min(34rem, calc(100svh - 7rem)); } }
.language-options { display: grid; gap: 2px; }
.language-options a { display: flex; min-height: 46px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-s); color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; text-decoration: none; }
/* Each name keeps its own direction (dir="auto") but the list stays aligned
   to the page's start edge, so a right-to-left name does not jump sides. */
.language-options a > span { min-width: 0; overflow-wrap: anywhere; }
.language-options a > .icon { margin-inline-start: auto; color: var(--brand); }
.language-options a:hover { background: var(--surface-2); }
.language-options a[aria-current="true"] { color: var(--brand-strong); background: var(--brand-soft); font-weight: 650; }
.language-options a:focus-visible { outline-offset: -3px; }
.menu { position: relative; display: none; }
.menu-panel { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; display: grid; width: min(300px, calc(100vw - 2 * var(--gutter))); padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-l); }
.menu-panel nav { display: grid; }
.menu-panel nav a { display: flex; min-height: 46px; align-items: center; padding: 0 12px; border-radius: var(--radius-s); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.menu-panel nav a:hover, .menu-panel nav a[aria-current="page"] { background: var(--surface-2); }
.menu[open] > summary { border-color: var(--ink); }

@media (max-width: 899px) {
  .primary-nav { display: none; }
  .menu { display: block; }
  .header-inner { min-height: 60px; }
  .brand { --logo-h: 26px; }
}
/* Phones: the switcher becomes a globe button. The language name stays in
   the accessible name, and the open list shows every native name. */
@media (max-width: 480px) {
  .language-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .language-toggle { gap: 4px; padding: 0 8px 0 10px; }
}

/* ---------- Sections ---------- */
.section { margin-top: 64px; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 22px; }
.section-heading h2 { flex: 1 1 280px; }
.section-heading h2, .section-title { font-size: clamp(22px, 2.4vw, 28px); }
.section-title { margin-bottom: 24px; }
.page-head { margin: 44px 0 28px; }
.page-head h1 { font-size: clamp(30px, 4vw, 42px); }
.page-head .lead { max-width: 60ch; margin-top: 10px; }
@media (max-width: 640px) {
  .section { margin-top: 44px; }
  .section-heading { margin-bottom: 16px; }
  .page-head { margin: 28px 0 20px; }
}

/* ---------- Search bar ---------- */
.searchbar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; align-items: stretch; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.sb-field { position: relative; min-width: 0; }
.searchbar > .sb-field + .sb-field::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 1px; background: var(--line); }
.sb-label { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; }
.sb-summary:hover { background: var(--surface-2); }
.sb-summary { display: flex; height: 100%; min-height: 58px; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 14px; border-radius: var(--radius); }
.sb-value { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; }
.sb-value > .icon { color: var(--ink-3); }
.sb-value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-value .is-placeholder { color: var(--ink-3); font-weight: 400; }
.sb-field[open] > .sb-summary { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--ink); }
.sb-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.sb-submit { align-self: center; min-height: 54px; margin-left: 6px; padding: 0 24px; border-radius: var(--radius); font-size: 16px; }
:is(.sb-submit.is-search-pending, .filters-apply.is-filter-pending) { box-shadow: 0 0 0 4px rgb(26 82 56 / 22%), 0 0 16px rgb(26 82 56 / 24%); animation: search-ready-glow 1.5s ease-in-out 3 both; }
:is(.sb-submit.is-search-pending, .filters-apply.is-filter-pending):disabled { animation: none; }
@keyframes search-ready-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgb(26 82 56 / 22%), 0 0 16px rgb(26 82 56 / 24%); }
  50% { box-shadow: 0 0 0 8px rgb(26 82 56 / 12%), 0 0 28px rgb(26 82 56 / 36%); }
}
.sb-field [aria-invalid="true"] { color: var(--danger); }
.sb-field:has([aria-invalid="true"]) > .sb-summary { box-shadow: inset 0 0 0 2px var(--danger); }

@media (max-width: 899px) {
  .searchbar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .sb-region { grid-column: 1 / -1; }
  .searchbar > .sb-field + .sb-field::before { display: none; }
  .sb-summary { border: 1px solid var(--line); border-radius: var(--radius-s); }
  .sb-summary { min-height: 60px; }
  .sb-submit { grid-column: 1 / -1; width: 100%; min-height: 52px; margin: 2px 0 0; }
}
@media (max-width: 480px) {
  .searchbar { grid-template-columns: 1fr; }
}

/* ---------- Popovers ---------- */
.popover-panel { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; width: max-content; min-width: 100%; max-width: calc(100vw - 2 * var(--gutter)); padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-l); cursor: default; }
.sb-guests > .popover-panel { width: 360px; }
.searchbar .sb-dates > .popover-panel { right: 0; left: auto; }
.region-panel { width: 300px; padding: 8px; }
.select-options { display: grid; min-width: 0; max-height: min(380px, 60vh); gap: 2px; margin: 0; padding: 0; overflow-y: auto; border: 0; }
.select-option { position: relative; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-s); color: var(--ink); font-size: 16px; cursor: pointer; }
.select-option:hover { background: var(--surface-2); }
.select-option > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.select-option > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.select-option > .icon { color: var(--brand); visibility: hidden; }
.select-option > input:checked + span { color: var(--brand-strong); font-weight: 650; }
.select-option > input:checked ~ .icon { visibility: visible; }
.select-option:has(> input:checked) { background: var(--brand-soft); }
.select-option:has(> input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.dates-note { max-width: 36em; margin-bottom: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.popover-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.date-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.field input, .field select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: var(--radius-s); color: var(--ink); background: var(--surface); font-size: 16px; font-weight: 400; }
.date-panel.is-enhanced .date-inputs { display: none; }
.guests-note { max-width: 36em; margin-top: 12px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }

/* Phones: popovers become bottom sheets. The summary's backdrop closes the
   details natively, so the sheet still works without JavaScript. */
@media (max-width: 640px) {
  [data-popover][open] > summary::after { content: ""; position: fixed; z-index: 55; inset: 0; background: rgb(10 15 12 / 45%); cursor: default; }
  [data-popover] > .popover-panel,
  .sb-guests > .popover-panel,
  .searchbar .sb-dates > .popover-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 88vh; overflow-y: auto; padding: 22px var(--gutter) calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: none; overscroll-behavior: contain; animation: sheet-in .2s ease-out; }
  .popover-panel::before { content: ""; display: block; width: 40px; height: 4px; margin: -8px auto 16px; border-radius: 4px; background: var(--line-strong); }
  .menu > .menu-panel::before { display: none; }
  html:has([data-popover][open] > .popover-panel) { overflow: hidden; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover .card-media img, .region-card:hover > img, .text-link:hover .icon { transform: none; }
}

/* ---------- Guest steppers ---------- */
.stepper-row { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; }
.stepper-row + .stepper-row { border-top: 1px solid var(--line); }
.stepper-label { color: var(--ink); font-size: 16px; font-weight: 500; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { width: 76px; min-height: var(--target); padding: 0 10px; border: 1px solid var(--line-input); border-radius: var(--radius-s); background: var(--surface); font-size: 16px; text-align: center; }
.stepper-button { display: grid; width: var(--target); height: var(--target); place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); background: var(--surface); }
.stepper-button:hover:not(:disabled) { border-color: var(--ink); }
.stepper-button:disabled { opacity: .3; cursor: not-allowed; }
.stepper.is-enhanced { gap: 4px; }
.stepper.is-enhanced input { width: var(--target); min-height: var(--target); padding: 0; border: 0; background: transparent; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper.is-enhanced input::-webkit-inner-spin-button,
.stepper.is-enhanced input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.stepper input[aria-invalid="true"] { border-color: var(--danger); color: var(--danger); }

/* ---------- Date range picker (built by public.ts) ---------- */
.dp { width: 100%; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dp-hint { flex: 1; color: var(--ink-2); font-size: 14px; font-weight: 600; text-align: center; }
.dp-months { display: grid; grid-auto-flow: column; grid-auto-columns: calc(7 * var(--target)); gap: 28px; }
.dp-month { min-width: 0; }
.dp-title { margin-bottom: 8px; font-size: 15px; font-weight: 650; text-align: center; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.dp-wd { padding: 4px 0; color: var(--ink-3); font-size: 12px; font-weight: 600; text-align: center; }
.dp-day { position: relative; display: grid; height: var(--target); place-items: center; padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.dp-day > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 999px; }
.dp-day:hover:not(:disabled) > span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dp-day:focus-visible { outline: none; }
.dp-day:focus-visible > span { outline: 3px solid var(--focus); outline-offset: 1px; }
.dp-day:disabled { color: var(--ink-3); cursor: default; opacity: .45; }
.dp-day.is-today > span { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dp-day.is-range { background: var(--brand-soft); }
.dp.has-range .dp-day.is-start { background: linear-gradient(90deg, transparent 50%, var(--brand-soft) 50%); }
.dp.has-range .dp-day.is-end { background: linear-gradient(90deg, var(--brand-soft) 50%, transparent 50%); }
.dp-day.is-start > span, .dp-day.is-end > span { color: #fff; background: var(--brand); font-weight: 650; }
.dp-blank { height: var(--target); }
.dp-summary { margin-top: 10px; color: var(--ink-2); font-size: 14px; text-align: center; min-height: 1.4em; }
.dp.is-single .dp-months { grid-auto-columns: 100%; }
@media (max-width: 760px) {
  .dp-months { grid-auto-columns: 100%; }
  .dp-day > span { width: 40px; height: 40px; }
}

/* ---------- Hero ---------- */
.hero-shell { padding-top: 20px; }
.hero-media { position: relative; display: flex; min-height: clamp(380px, 56vh, 580px); align-items: flex-end; overflow: hidden; border-radius: var(--radius-xl); background: var(--footer-bg); isolation: isolate; }
.hero-media > picture { position: absolute; z-index: -2; inset: 0; }
.hero-media > picture > img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; width: 100%; max-width: 680px; padding: 48px 48px 96px; color: #fff; }
/* A soft oval shades the copy, leaving the right side of the image clear.
   The text stays within its 80%-shade core for >7:1 contrast on a white image;
   the outer falloff is rounded so no rectangular text backdrop is visible. */
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -140px -160px -120px -240px; background: radial-gradient(ellipse closest-side, rgb(var(--hero-shade) / 88%) 0, rgb(var(--hero-shade) / 80%) 75%, rgb(var(--hero-shade) / 45%) 88%, rgb(var(--hero-shade) / 0%) 100%); pointer-events: none; }
.region-hero.has-cover .region-hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -96px -128px 0 -48px; background: rgb(var(--hero-shade) / 80%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 96px), linear-gradient(to left, transparent, #000 128px); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 96px), linear-gradient(to left, transparent, #000 128px); mask-composite: intersect; }
.hero-copy h1 { max-width: 584px; color: #fff; text-shadow: 0 1px 18px rgb(var(--hero-shade) / 45%); font-size: clamp(34px, 5.2vw, 60px); letter-spacing: -.03em; line-height: 1.04; }
.hero-lead { max-width: 52ch; margin-top: 14px; color: #fff; text-shadow: 0 1px 12px rgb(var(--hero-shade) / 50%); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
.hero-search { position: relative; margin: -44px 32px 0; }
@media (max-width: 899px) {
  .hero-shell { padding-top: 12px; }
  .hero-media { min-height: 340px; border-radius: var(--radius-l); }
  .hero-copy { --hero-fade: 120px; max-width: none; padding: 28px 22px 64px; }
  .hero-copy::before { inset: calc(-1 * var(--hero-fade)) 0 0; background: linear-gradient(180deg, rgb(var(--hero-shade) / 0%) 0, rgb(var(--hero-shade) / 80%) var(--hero-fade), rgb(var(--hero-shade) / 88%) 100%); }
  .region-hero.has-cover .region-hero-copy::before { top: -48px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px), linear-gradient(to left, transparent, #000 128px); mask-image: linear-gradient(to bottom, transparent, #000 48px), linear-gradient(to left, transparent, #000 128px); }
  .hero-search { margin: -36px 10px 0; }
}
@media (max-width: 480px) {
  .hero-shell { padding-inline: 10px; }
  .hero-media { min-height: 300px; }
  .hero-copy { padding: 22px 18px 56px; }
  .hero-copy h1 { font-size: clamp(30px, 9vw, 34px); }
  .hero-search { margin-inline: 6px; }
}

/* ---------- Cottage cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.card { position: relative; display: flex; min-width: 0; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.035); }
.card-body { display: grid; gap: 4px; padding-top: 12px; }
.card-region { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 14px; }
.card-region .icon { width: 1.05em; height: 1.05em; }
.card-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: var(--radius); }
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }
.card-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 14.5px; }
.card-facts > span { display: inline-flex; align-items: center; gap: 6px; }
.card-facts .icon { color: var(--ink-3); }
.card-warning { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-ink); font-size: 13.5px; font-weight: 500; }
.photo-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--surface-2) 0 14px, color-mix(in srgb, var(--surface-2) 70%, var(--line)) 14px 15px); }
.photo-placeholder .icon { width: 64px; height: 40px; stroke-width: 1.5; }
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (min-width: 520px) and (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* ---------- Region cards ---------- */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.region-card { position: relative; display: flex; aspect-ratio: 4 / 3; align-items: flex-end; overflow: hidden; border-radius: var(--radius-l); color: #fff; background: var(--brand); text-decoration: none; isolation: isolate; }
.region-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.region-card:hover > img { transform: scale(1.04); }
.region-card:focus-visible { outline-offset: 3px; }
.region-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(var(--hero-shade) / 0%) 30%, rgb(var(--hero-shade) / 40%) 100%); }
.region-card-placeholder { position: absolute; z-index: -2; inset: 0; display: grid; place-items: start end; padding: 18px 20px; color: rgb(255 255 255 / 28%); background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%); }
.region-card-placeholder .icon { width: 72px; height: 45px; stroke-width: 1.2; }
.region-card-text { --fade: 44px; display: grid; width: 100%; gap: 2px; padding: calc(var(--fade) + 6px) 22px 20px; background: linear-gradient(180deg, rgb(var(--hero-shade) / 0%) 0, rgb(var(--hero-shade) / 80%) var(--fade), rgb(var(--hero-shade) / 84%) 100%); }
.region-card-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.region-card-count { color: #fff; font-size: 14.5px; }
.region-grid-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.region-grid-compact .region-card { aspect-ratio: 16 / 10; }
.region-grid-compact .region-card-title { font-size: 19px; }
.region-grid-compact .region-card-text { --fade: 32px; padding-bottom: 16px; }
@media (max-width: 640px) {
  .region-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .region-card { aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .region-grid-compact .region-card { aspect-ratio: 4 / 3; }
  .region-card-text, .region-grid-compact .region-card-text { --fade: 32px; padding: calc(var(--fade) + 6px) 14px 14px; }
  .region-card-title { font-size: 18px; }
  .region-card-count { font-size: 13.5px; }
}
@media (max-width: 360px) {
  .region-grid { grid-template-columns: 1fr; }
  .region-card { aspect-ratio: 16 / 10; }
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.steps li { padding: 26px; border-radius: var(--radius-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.step-icon { display: grid; width: 48px; height: 48px; margin-bottom: 18px; place-items: center; border-radius: 14px; color: var(--brand); background: var(--brand-soft); }
.step-icon .icon { width: 24px; height: 24px; }
.steps h3 { margin-bottom: 6px; font-size: 18px; }
.steps h3::before { content: counter(step) ". "; counter-increment: step; color: var(--ink-3); font-weight: 600; }
.steps p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 18px; }
  .step-icon { width: 44px; height: 44px; grid-row: span 2; margin: 0; }
}

/* ---------- Contact band ---------- */
.contact-band { margin-top: 72px; }
.contact-band { --focus: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 40px; padding-inline: max(var(--gutter), 44px); border-radius: var(--radius-xl); color: var(--footer-ink); background: var(--brand); width: calc(100% - 2 * var(--gutter)); max-width: 1200px; }
.contact-band h2 { color: #fff; font-size: clamp(22px, 2.5vw, 30px); }
.contact-band p { max-width: 56ch; margin-top: 8px; color: #fff; font-size: 16.5px; }
.contact-band-actions { display: flex; flex-wrap: wrap; flex: none; gap: 12px; }
.contact-band-messaging > div:first-child { min-width: 0; flex: 1; }
.contact-band-messaging .contact-band-actions { min-width: 0; flex: 0 1 52%; justify-content: flex-end; }
.contact-band-messaging .contact-band-actions .button { min-width: 0; padding-block: 12px; white-space: normal; }
@media (max-width: 860px) {
  .contact-band { flex-direction: column; align-items: flex-start; margin-top: 48px; padding: 28px 22px; border-radius: var(--radius-l); }
  .contact-band-actions { width: 100%; }
  .contact-band-actions .button { flex: 1 1 200px; }
  .contact-band-messaging .contact-band-actions { flex: none; }
}

/* ---------- Search page ---------- */
.search-top { padding: 20px 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.search-top .searchbar { box-shadow: var(--shadow-s); }
.bedroom-filters { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; color: var(--ink); }
.bedroom-filters legend { margin-bottom: 8px; padding: 0; color: var(--ink-2); font-size: 14px; font-weight: 650; }
.bedroom-options { display: flex; flex-wrap: wrap; gap: 10px; }
.bedroom-option { position: relative; display: inline-flex; min-width: var(--target); min-height: var(--target); align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-input); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 14.5px; cursor: pointer; }
.bedroom-option input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--brand); }
.bedroom-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); font-weight: 650; }
.bedroom-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.bedroom-option input:focus-visible { outline: none; }
.bedroom-option:hover { border-color: var(--brand); background: var(--brand-soft); }
.bedroom-filters .note { margin-top: 10px; }
.filters-scroll .bedroom-filters { margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.search-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "filters results"; align-items: start; gap: 0 40px; padding-top: 32px; }
.search-layout:not(:has(.filters)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "results"; }
.search-layout > .results { grid-area: results; }
#search-results { scroll-margin-top: 20px; }
.filters { grid-area: filters; }
.filters-toggle { display: flex; min-height: 44px; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; font-weight: 650; }
.filters-chevron { margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.filters-panel[open] .filters-chevron { transform: rotate(180deg); }
.count-badge { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; border-radius: 999px; color: #fff; background: var(--brand); font-size: 12.5px; font-weight: 700; }
.filters-body { padding-top: 8px; }
.filters-heading { display: none; }
.filters-title { display: flex; align-items: center; gap: 10px; margin: 0; }
.filter-group { margin: 0; padding: 14px 0 16px; border: 0; border-top: 1px solid var(--line); }
.filter-group:first-of-type { border-top: 0; }
.filter-group legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; color: var(--ink-2); font-size: 13px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
:lang(ka) .filter-group legend { text-transform: none; letter-spacing: 0; font-size: 14px; }
.check { display: flex; min-height: var(--target); align-items: center; gap: 12px; color: var(--ink); font-size: 15.5px; cursor: pointer; clear: both; }
.check > span { min-width: 0; overflow-wrap: anywhere; }
/* Room for the focus outline when focus scrolls a control into view. */
.filters :is(input, .filters-toggle, .filters-apply), .filters-dialog input { scroll-margin-block: 8px; }
.filters-actions { flex: none; display: flex; padding-block: 12px; border-top: 1px solid var(--line); background: var(--bg); }
.filters-apply { width: 100%; }
/* The list scrolls inside the available viewport height. Its Apply bar is a
   separate flex item, so it is visible before the list is scrolled. */
@media (min-width: 900px) {
  /* Keep the grid height stable when the panel shrinks above the footer:
     viewport height minus two 20px gaps, plus the grid's 32px top padding. */
  .search-layout:has(.filters) { min-height: calc(100vh - 8px); min-height: calc(100dvh - 8px); }
  .filters { position: sticky; top: 20px; container: filters / scroll-state; }
  .filters-toggle { display: none; }
  .filters-body { display: flex; flex-direction: column; padding-top: 0; max-height: var(--filters-available, max(132px, calc(100vh - 258px))); }
  .filters-heading { position: sticky; top: 20px; z-index: 1; flex: none; display: flex; align-items: center; min-height: 44px; padding-bottom: 8px; background: var(--bg); }
  .filters-title { font-size: 16px; font-weight: 650; }
  .filters-close { display: none; }
  .filters-scroll { flex: 0 1 auto; min-height: 0; margin: -6px -6px 0; padding: 6px; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable; scroll-padding-block: 8px; background-color: var(--bg); background-image: linear-gradient(var(--bg) 30%, transparent), linear-gradient(transparent, var(--bg) 70%), linear-gradient(rgb(20 30 25 / 10%), transparent), linear-gradient(transparent, rgb(20 30 25 / 10%)); background-position: center top, center bottom, center top, center bottom; background-size: 100% 28px, 100% 28px, 100% 10px, 100% 10px; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; }
}
/* Once the panel is stuck, scrolling past its end does not scroll the
   results. Before that the page scrolls on, so the panel's foot can be
   brought into view. */
@container filters scroll-state(stuck: top) {
  .filters-scroll { overscroll-behavior-y: contain; }
}
.filters-dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; inset: 0; margin: 0; padding: 0; border: 0; color: var(--ink); background: var(--surface); }
.filters-dialog::backdrop { background: rgb(20 30 25 / 45%); }
.filters-dialog .filters-body { display: flex; flex-direction: column; height: 100%; padding: 0; }
.filters-dialog .filters-heading { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line); }
.filters-dialog .filters-title { font-size: 22px; }
.filters-dialog .filters-scroll { flex: 1; min-height: 0; padding: 6px 16px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px; }
.filters-dialog .filters-actions { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--surface); }
html.filters-modal-open { overflow: hidden; }
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.results-head h1 { font-size: clamp(22px, 2.6vw, 28px); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { position: relative; display: inline-flex; min-height: var(--target); align-items: center; gap: 6px; padding: 0 10px 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 14px; font-weight: 500; text-decoration: none; }
.chip:hover { border-color: var(--ink); }
.chip .icon { width: 16px; height: 16px; color: var(--ink-3); }
.chip-clear { display: inline-flex; min-height: var(--target); align-items: center; padding: 0 6px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: underline; }
.alert > p { max-width: 70ch; }
.alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; padding: 16px 18px; border-radius: var(--radius); color: var(--danger); background: var(--danger-soft); font-weight: 500; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 40px; }
.pagination > :last-child { justify-self: end; }
.pagination-status { color: var(--ink-2); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.empty-state { display: grid; max-width: 520px; justify-items: center; gap: 10px; margin: 24px auto; padding: 48px 24px; border-radius: var(--radius-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.empty-state h2 { font-size: 22px; }
.empty-state p { color: var(--ink-2); }
.empty-state .button { margin-top: 8px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.empty-icon { width: 72px; height: 45px; color: var(--ink-3); stroke-width: 1.4; }
@media (max-width: 899px) {
  .search-top { padding: 12px 0; }
  .search-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filters" "results"; gap: 0; padding-top: 16px; }
  .filters { margin-bottom: 16px; }
  .filters { position: static; }
  .filters-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .filters-toggle { padding: 0 16px; }
  .filters-body { padding: 0 16px 14px; }
  .filter-group legend { margin-bottom: 4px; }
  .filter-group > .check { display: inline-flex; width: calc(50% - 6px); vertical-align: top; }
  .results-head { margin-bottom: 18px; }
}
@media (max-width: 899px) and (scripting: enabled) {
  .filters-panel:not([data-enhanced]) > .filters-body { display: none; }
  .filters-panel:not([data-enhanced]) .filters-chevron { transform: none; }
}
@media (max-width: 420px) {
  .filter-group > .check { width: 100%; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 6px; margin: 10px 0 4px; color: var(--ink-3); font-size: 14px; }
.breadcrumbs > span:not([aria-current]) { display: contents; }
.breadcrumbs a { flex: 0 1 auto; min-width: 0; padding-block: 10px; overflow: hidden; color: var(--ink-2); line-height: 24px; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs > a:first-child, .breadcrumbs .icon { flex: none; }
.breadcrumbs > a:first-child { min-width: var(--target); }
.breadcrumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.breadcrumbs .icon { width: 14px; height: 14px; }
.breadcrumbs [aria-current] { flex: 0 100 auto; min-width: 6ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On phones the page title sits right below, so the last crumb would only repeat it. */
@media (max-width: 640px) { .breadcrumbs [aria-current], .breadcrumbs .icon:has(+ [aria-current]) { display: none; } }

/* ---------- Cottage page ---------- */
.cottage .gallery-wrap, .cottage .gallery-empty { margin-top: 24px; }
.cottage-head { padding-bottom: 32px; }
.cottage-head .breadcrumbs { margin: -10px 0 0; }
.cottage-head h1 { font-size: clamp(28px, 3.6vw, 40px); }
.cottage-description { margin-top: 22px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts .icon { color: var(--ink-3); }
.notice-warning { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 9px 14px; border-radius: var(--radius-s); color: var(--accent-ink); background: var(--accent-soft); font-size: 14.5px; font-weight: 500; }
.notice-warning .icon { margin-top: 2px; }

.gallery-wrap { position: relative; }
.gallery { display: grid; height: clamp(320px, 42vw, 500px); gap: 8px; overflow: hidden; border-radius: var(--radius-l); }
.gallery-tile { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-2); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
.gallery-tile:hover img { filter: brightness(.92); }
.gallery-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.gallery-tile:focus-visible::after { content: ""; position: absolute; inset: 3px; box-shadow: inset 0 0 0 3px #fff; pointer-events: none; }
.gallery-1 { grid-template-columns: 1fr; }
.gallery-2 { grid-template-columns: 1fr 1fr; }
.gallery-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery-3 > :first-child { grid-row: span 2; }
.gallery-4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery-4 > :first-child { grid-row: span 2; }
.gallery-4 > :last-child { grid-column: span 2; }
.gallery-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery-5 > :first-child { grid-row: span 2; }
.gallery-all:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px #fff; }
.gallery-all { position: absolute; right: 16px; bottom: 16px; min-height: var(--target); padding: 0 14px; border: 1px solid rgb(0 0 0 / 12%); font-size: 14.5px; box-shadow: var(--shadow-s); }
.gallery-empty { height: 260px; border-radius: var(--radius-l); gap: 8px; align-content: center; }
.gallery-empty span { color: var(--ink-3); font-size: 15px; }
@media (max-width: 760px) {
  .gallery-wrap { margin-inline: calc(-1 * var(--gutter)); }
  .gallery { display: flex; height: auto; gap: 6px; overflow-x: auto; padding-inline: var(--gutter); border-radius: 0; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery-tile { flex: 0 0 86%; aspect-ratio: 4 / 3; border-radius: var(--radius); scroll-snap-align: start; }
  .gallery-1 > .gallery-tile { flex-basis: 100%; }
  .gallery-all { right: calc(var(--gutter) + 10px); bottom: 10px; font-size: 13.5px; }
  .gallery-empty { height: 200px; }
}

/* Full photo list: opened with #photo-N links, works without JavaScript. */
.photo-tour { display: none; }
.photo-tour:target, .photo-tour:has(:target) { position: fixed; z-index: 150; inset: 0; display: block; overflow-y: auto; background: var(--surface); overscroll-behavior: contain; }
html:has(.photo-tour:target), html:has(.photo-tour :target) { overflow: hidden; }
.photo-tour-bar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; gap: 14px; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 94%); backdrop-filter: blur(8px); }
.photo-tour-title { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.photo-tour-count { margin-left: auto; color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.photo-tour-bar > .icon-button { margin-right: -8px; }
.photo-tour-list { display: grid; max-width: 1040px; gap: 10px; margin: 0 auto; padding: 16px var(--gutter) 48px; }
.photo-tour-list figure { scroll-margin-top: 76px; }
.photo-tour-list img { width: 100%; border-radius: var(--radius-s); background: var(--surface-2); }
@media (max-width: 640px) {
  .photo-tour-list { padding-inline: 0; gap: 6px; }
  .photo-tour-list img { border-radius: 0; }
}

.cottage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 64px; margin-top: 32px; }
.cottage-main { min-width: 0; }
.cottage-section { padding: 32px 0; border-top: 1px solid var(--line); }
.cottage-section:first-child { border-top: 0; }
.cottage-section > h2 { margin-bottom: 18px; font-size: 22px; }
.cottage-section > .note { margin-top: 14px; }

.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.room { display: flex; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.room h3 { font-size: 16px; font-weight: 650; }
.room h3:not(:last-child) { margin-bottom: 12px; }
.beds { display: grid; gap: 10px; }
.beds li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; line-height: 1.35; }
.beds .icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--brand); stroke-width: 1.6; }

.amenity-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.amenity-group h3 { margin-bottom: 12px; color: var(--ink); font-size: 16px; font-weight: 650; }
.amenity-list { display: grid; gap: 12px; }
.amenity-groups:not(:has(h3)) { display: block; }
.amenity-groups:not(:has(h3)) .amenity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.amenity-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; }
.amenity-list .icon { width: 22px; height: 22px; margin-top: -1px; color: var(--ink-2); stroke-width: 1.7; }

.nearby li { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.nearby li:first-child { padding-top: 0; }
.nearby-name { font-weight: 500; }
.nearby-ways { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nearby-ways > span { display: inline-flex; align-items: center; gap: 6px; }
.nearby-ways .icon { color: var(--ink-3); }
.nearby-time { margin-left: 2px; color: var(--ink-3); }
.nearby-ways abbr { text-decoration: none; cursor: help; }

.cottage-aside { position: sticky; top: 24px; }
.inquiry-card { display: grid; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.inquiry-card h2 { font-size: 21px; }
.inquiry-card > p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.mobile-cta { display: none; }
@media (max-width: 999px) {
  .cottage-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cottage-aside { position: static; padding-top: 8px; }
  .cottage-head { padding-bottom: 26px; }
  .inquiry-card { padding: 22px 18px; box-shadow: none; }
  .mobile-cta { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(255 255 255 / 96%); box-shadow: 0 -6px 20px rgb(20 30 25 / 8%); backdrop-filter: blur(8px); }
  .mobile-cta-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
  .mobile-cta-text strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-cta-text span { overflow: hidden; color: var(--ink-2); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-cta .button { min-height: 44px; padding: 0 16px; }
  .page-cottage .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html:has(.mobile-cta) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .mobile-cta-text { display: none; }
  .mobile-cta .button { flex: 1; }
}
@media (max-width: 640px) {
  .cottage-section { padding: 26px 0; }
  .cottage .gallery-wrap, .cottage .gallery-empty { margin-top: 12px; }
  .cottage-layout { margin-top: 20px; }
  .cottage-section > h2 { font-size: 20px; }
  .amenity-groups, .amenity-groups:not(:has(h3)) .amenity-list { grid-template-columns: 1fr; gap: 24px; }
  .amenity-list { gap: 10px; }
  .nearby li { flex-direction: column; align-items: flex-start; }
  .nearby-ways { justify-content: flex-start; }
  .facts { font-size: 15px; gap: 6px 16px; }
}

/* ---------- Region page ---------- */
.region-hero { position: relative; display: flex; min-height: 200px; align-items: flex-end; overflow: hidden; border-radius: var(--radius-xl); background: var(--brand-soft); isolation: isolate; }
.region-hero.has-cover { min-height: clamp(300px, 40vw, 440px); color: #fff; background: var(--footer-bg); }
.region-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.region-hero.has-cover::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(var(--hero-shade) / 0%) 25%, rgb(var(--hero-shade) / 82%) 100%); }
.region-hero-copy { position: relative; padding: 36px 40px; }
.region-hero.has-cover .region-hero-copy { padding-bottom: 80px; }
.region-hero h1 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.03em; }
.region-hero.has-cover h1 { color: #fff; }
.region-hero p { margin-top: 6px; color: var(--ink-2); font-size: 17px; }
.region-hero.has-cover p { color: #fff; }
.region-search { margin-top: 16px; }
.region-bedroom-apply { margin-top: 12px; }
#region-listings { display: block; }
.region-hero.has-cover + .region-search { margin: -44px 32px 0; }
.region-about { margin-top: 36px; font-size: 17.5px; }
@media (max-width: 899px) {
  .region-hero { border-radius: var(--radius-l); }
  .region-hero-copy, .region-hero.has-cover .region-hero-copy { padding: 24px 22px; }
  .region-hero.has-cover .region-hero-copy { padding-bottom: 60px; }
  .region-hero.has-cover + .region-search { margin: -36px 10px 0; }
}

/* ---------- Pages ---------- */
.page { max-width: calc(820px + 2 * var(--gutter)); }
.page-prose { margin-top: 8px; font-size: 17px; }
.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.contact-method { display: flex; height: 100%; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); text-decoration: none; transition: border-color .15s; }
a.contact-method:hover { border-color: var(--ink-3); }
.contact-icon { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 999px; color: var(--brand); background: var(--brand-soft); }
.contact-method > span:last-child { display: grid; min-width: 0; }
.contact-method strong { overflow-wrap: anywhere; font-size: 16.5px; font-weight: 650; }
.contact-method strong + span { color: var(--ink-2); font-size: 14px; }
.contact-tip { margin: 16px 0 28px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.not-found { display: grid; max-width: 640px; justify-items: center; padding-block: 72px 40px; text-align: center; }
.not-found .empty-icon { width: 96px; height: 60px; color: var(--brand); }
.not-found-code { margin-top: 12px; color: var(--ink-3); font-size: 14px; font-weight: 700; letter-spacing: .2em; }
.not-found h1 { margin-top: 6px; font-size: clamp(28px, 4vw, 40px); }
.not-found .lead { margin-top: 12px; }
.not-found .page-actions { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { --focus: var(--footer-ink); flex: none; margin-top: 88px; padding: 52px 0 28px; color: color-mix(in srgb, var(--footer-ink) 76%, transparent); background: var(--footer-bg); font-size: 15px; }
.site-footer a { color: var(--footer-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { --logo-main: var(--footer-ink); --logo-h: 28px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 32px; }
.footer-brand p { max-width: 36ch; margin-top: 14px; }
.footer-nav { display: grid; align-content: start; justify-items: start; margin-top: -10px; }
.footer-nav a { display: inline-flex; min-width: var(--target); min-height: var(--target); align-items: center; }
.footer-contact { display: grid; align-content: start; justify-items: start; margin-top: -10px; }
.footer-contact > * { display: inline-flex; min-height: var(--target); align-items: center; gap: 10px; overflow-wrap: anywhere; }
.footer-contact .icon { opacity: .8; }
.footer-contact .brand-icon { opacity: 1; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 22px; background: linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 12%)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; font-size: 14px; }
.footer-languages { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-languages a { display: inline-flex; min-width: var(--target); min-height: var(--target); align-items: center; justify-content: center; padding: 0 6px; }
.footer-languages a[aria-current="true"] { text-decoration: underline; text-underline-offset: .3em; }
.footer-counter, #top-ge-counter-container { display: flex; min-width: 88px; min-height: var(--target); align-items: center; }
.footer-counter a { display: inline-flex; min-width: 88px; min-height: var(--target); align-items: center; justify-content: center; }
.footer-counter img { width: 88px; height: 31px; }
#top-ge-counter-container > a:not(.top-ge-fallback) { display: none; }
#top-ge-counter-container[data-counter-loaded] > a:not(.top-ge-fallback) { display: inline-flex; }
#top-ge-counter-container[data-counter-loaded] > .top-ge-fallback { display: none; }
@media (max-width: 760px) {
  .site-footer { margin-top: 64px; padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .primary-nav a[aria-current="page"], .menu-panel nav a[aria-current="page"], .language-options a[aria-current="true"] { text-decoration: underline; text-underline-offset: .3em; }
  .language-menu[open] > .language-toggle { outline: 2px solid CanvasText; outline-offset: -2px; }
  .sb-field[open] > .sb-summary { outline: 2px solid CanvasText; outline-offset: -2px; }
  .sb-field:has([aria-invalid="true"]) > .sb-summary { outline: 2px dashed CanvasText; outline-offset: -2px; }
  .dp-day.is-start > span, .dp-day.is-end > span { forced-color-adjust: none; color: HighlightText; background: Highlight; }
  .dp-day.is-range > span { border: 1px dashed CanvasText; }
  .gallery-tile:focus-visible::after, .hero-copy::before, .region-hero-copy::before { display: none; }
  .gallery-all:focus-visible { box-shadow: none; }
  .turbo-progress-bar { forced-color-adjust: none; background: Highlight; }
  /* The check mark is a masked background, which forced colors would paint
     over, so checkboxes use system colors directly. */
  input[type="checkbox"] { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  input[type="checkbox"]:is(:checked, :indeterminate) { border-color: Highlight; background: Highlight; }
  input[type="checkbox"]::before { background: HighlightText; }
  input[type="checkbox"]:disabled { border-color: GrayText; }
  input[type="checkbox"]:disabled:is(:checked, :indeterminate) { background: GrayText; }
  input[type="checkbox"]:disabled::before { background: Canvas; }
  input[type="checkbox"]:focus-visible { outline-color: Highlight; }
  .filters-scroll { background-image: none; }
  .filters-actions { border-top-color: CanvasText; }
  :is(.sb-submit.is-search-pending, .filters-apply.is-filter-pending) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}