/* ==========================================================================
   VidaMar — redesign concept
   Mediterranean premium: sea · warm sand · milk white · sage
   1. Tokens  2. Base  3. Layout  4. Controls  5. Chrome (header/footer)
   6. Overlays  7. Card  8. Home  9. Catalog  10. Property  11. Print  12. Responsive
   ========================================================================== */

/* 0. FONTS ----------------------------------------------------------------- */
/* Cormorant Garamond + Manrope (SIL Open Font License), served from the theme instead of
   Google Fonts: one render-blocking request less. Variable files per script; Cyrillic loads
   only when GTranslate shows Ukrainian/Russian. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-ext-italic.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/cormorant-garamond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/cormorant-garamond-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */

/* Fallbacks with the web fonts' metrics (fontTools: width of the hero copy, ascent/descent), so the
   swap does not re-wrap the hero text and push the search form down (CLS). Arial/Times New Roman or
   their metric clones; where none exist the next font in the stack is used as before. */
@font-face { font-family: 'Manrope Fallback'; font-weight: 400 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 102.82%; ascent-override: 103.68%; descent-override: 29.18%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 99.7%; ascent-override: 107%; descent-override: 30.1%; line-gap-override: 0%; }
@font-face { font-family: 'Cormorant Fallback'; font-weight: 500; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos'); size-adjust: 96.9%; ascent-override: 95.35%; descent-override: 29.62%; line-gap-override: 0%; }
@font-face { font-family: 'Cormorant Fallback'; font-weight: 600 700; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('Tinos Bold'); size-adjust: 91.48%; ascent-override: 101.01%; descent-override: 31.37%; line-gap-override: 0%; }
@font-face { font-family: 'Cormorant Fallback'; font-style: italic; font-weight: 500 600; src: local('Times New Roman Bold Italic'), local('TimesNewRomanPS-BoldItalicMT'), local('Liberation Serif Bold Italic'), local('Tinos Bold Italic'); size-adjust: 87.23%; ascent-override: 105.93%; descent-override: 32.9%; line-gap-override: 0%; }

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* sea */
  --sea-950: #0b2a33;
  --sea-900: #0f3540;
  --sea-800: #124552;
  --sea-700: #155566;
  --sea-600: #1c6b7e;
  --sea-500: #2f8a9c;
  --sea-300: #8fc3cc;
  --sea-100: #dcecef;
  --sea-50: #eef6f7;
  /* sand & milk white */
  --milk: #fbf8f3;
  --white: #ffffff;
  --sand-50: #f7f1e7;
  --sand-100: #f1e8d9;
  --sand-200: #e6d8c1;
  --sand-300: #d6c2a1;
  --sand-500: #b59868;
  --sand-700: #76603a;
  /* sage — corporate colour #9aac87 and its tints/shades */
  --sage-50: #f2f5ee;
  --sage-100: #e5ecdd;
  --sage-200: #d0dbc4;
  --sage-300: #b6c6a6;
  --sage-400: #9aac87;
  --sage-500: #7e9470;
  --sage-600: #67795a;
  --sage-700: #52614a;
  --sage-800: #3e4a38;
  /* accent — terracotta, used sparingly */
  --terra-50: #fbeee8;
  --terra-500: #c4633f;
  --terra-600: #a94f2e;
  /* text & lines */
  --ink: #17282d;
  --ink-2: #3d4f54;
  --muted: #5a6c70;
  --line: #e9e2d6;
  --line-2: #d9d0bf;

  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 53, 64, .06);
  --shadow-sm: 0 1px 2px rgba(15, 53, 64, .05), 0 4px 14px rgba(15, 53, 64, .06);
  --shadow-md: 0 2px 4px rgba(15, 53, 64, .05), 0 12px 32px rgba(15, 53, 64, .10);
  --shadow-lg: 0 4px 8px rgba(15, 53, 64, .06), 0 24px 60px rgba(15, 53, 64, .16);

  --header-h: 78px;
  --container: 1320px;
  --gutter: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sage-500); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--sea-100); }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* typography */
.display, h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.012em; color: var(--sea-900); }
/* Cormorant ships old-style figures by default; the `font` shorthand resets font-variant, hence !important */
* { font-variant-numeric: lining-nums !important; }
h1 { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.04; }
h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.08; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--sea-600); }
h1, h2, h3 { text-wrap: balance; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-700);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--muted); }
.link { color: var(--sage-700); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.link:hover { color: var(--sea-600); border-color: currentColor; }
.link .icon { transition: transform .2s var(--ease); }
.link:hover .icon { transform: translateX(3px); }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 88px; }
.section--sand { background: var(--sand-50); }
.section--tight { padding-block: 68px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.section__head h2 { margin-top: 14px; max-width: 34ch; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__head--center h2 { max-width: 24ch; }
.section__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

/* 4. CONTROLS -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px; letter-spacing: .005em; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--sage-600); color: #fff; box-shadow: 0 6px 18px rgba(103, 121, 90, .28); }
.btn--primary:hover { background: var(--sage-700); box-shadow: 0 8px 22px rgba(82, 97, 74, .34); }
.btn--secondary { background: var(--white); color: var(--sea-800); border: 1px solid var(--line-2); }
.btn--secondary:hover { border-color: var(--sage-500); color: var(--sage-700); }
.btn--ghost { color: var(--sea-800); background: transparent; }
.btn--ghost:hover { background: var(--sage-50); }
.btn--sand { background: var(--sand-100); color: var(--sea-900); }
.btn--sand:hover { background: var(--sand-200); }
.btn--light { background: #fff; color: var(--sea-900); }
.btn--light:hover { background: var(--sand-50); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 58px; padding: 0 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.icon-btn {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; position: relative;
  background: var(--white); color: var(--sea-900); border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.icon-btn:hover { border-color: var(--sage-500); color: var(--sage-700); }
.icon-btn[aria-pressed='true'] { background: var(--sage-600); border-color: var(--sage-600); color: #fff; }
.icon-btn--fav[aria-pressed='true'] { background: var(--terra-50); border-color: var(--terra-50); color: var(--terra-600); }
.icon-btn--fav[aria-pressed='true'] .icon { fill: currentColor; }
.icon-btn--glass { background: rgba(255, 255, 255, .92); border-color: transparent; backdrop-filter: blur(6px); box-shadow: var(--shadow-xs); }
.icon-btn--glass.icon-btn--fav[aria-pressed='true'] { background: #fff; }
.icon-btn--sm { width: 36px; height: 36px; }
.icon-btn--label { width: auto; padding: 0 16px 0 13px; border-radius: var(--r-pill); gap: 8px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
button.chip:hover, a.chip:hover { border-color: var(--sage-500); color: var(--sage-700); }
.chip.is-active, .chip[aria-pressed='true'], .chip[aria-selected='true'] { background: var(--sage-700); border-color: var(--sage-700); color: #fff; }
.chip--filter { background: var(--sage-50); border-color: var(--sage-200); color: var(--sage-700); padding-right: 6px; }
.chip--filter button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--sage-600); }
.chip--filter button:hover { background: var(--sage-100); }
.chip--ghost { background: transparent; border-color: transparent; color: var(--sage-700); text-decoration: underline; text-underline-offset: 3px; padding-inline: 6px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  background: #fff; color: var(--sea-900);
}
.badge--new { background: var(--sage-600); color: #fff; }
.badge--rent { background: var(--sage-600); color: #fff; }
.badge--holiday { background: var(--sand-100); color: var(--sand-700); }
.badge--pick { background: var(--sea-950); color: var(--sand-100); }
.badge--fresh { background: var(--terra-50); color: var(--terra-600); }
.badge--soft { background: var(--sage-100); color: var(--sage-700); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field__label i { font-style: normal; color: var(--terra-600); }
.input, .select, .textarea {
  width: 100%; height: 50px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--white); border: 1px solid var(--line-2); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.textarea { height: auto; min-height: 92px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: #8a989b; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--sand-500); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--sage-500); box-shadow: 0 0 0 4px rgba(154, 172, 135, .22); }
.field.is-invalid .input, .field.is-invalid .textarea { border-color: var(--terra-500); box-shadow: 0 0 0 4px rgba(196, 99, 63, .12); }
.field__error { font-size: 12.5px; color: var(--terra-600); font-weight: 600; display: none; }
.field.is-invalid .field__error { display: block; }
.select {
  appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23155566' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-2); background: #fff;
  display: grid; place-items: center; color: #fff; transition: background .15s, border-color .15s;
}
.check__box .icon { width: 14px; height: 14px; stroke-width: 2.4; opacity: 0; }
.check input:checked + .check__box { background: var(--sage-600); border-color: var(--sage-600); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--sage-500); outline-offset: 2px; }
.check.is-invalid .check__box { border-color: var(--terra-500); }
.check--radio .check__box { border-radius: 50%; }
.check a { color: var(--sage-700); text-decoration: underline; text-underline-offset: 2px; }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--sand-100); }
.segmented button {
  height: 42px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s, box-shadow .2s;
}
.segmented button[aria-pressed='true'] { background: #fff; color: var(--sage-700); box-shadow: var(--shadow-sm); }

/* dropdown (shared by the hero search and the catalogue filters) */
.dd { position: relative; }
.dd__panel {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; min-width: 280px; max-width: 360px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 14px;
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
.dd.is-open .dd__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.dd__panel--right { left: auto; right: 0; }
.dd__title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 4px 6px 10px; }
.dd__list { max-height: 300px; overflow: auto; margin-inline: -4px; padding-inline: 4px; }
.dd__opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left;
  font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.dd__opt:hover { background: var(--sand-50); }
.dd__opt .check__box { margin: 0; }
.dd__opt--sub { padding-left: 40px; font-size: 14px; color: var(--ink-2); }
.dd__opt[aria-selected='true'] { background: var(--sage-50); color: var(--sage-700); font-weight: 700; }
.dd__count { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dd__search { position: relative; margin-bottom: 8px; }
.dd__search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; }
.dd__search input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 12px 0 36px; outline: none; font-size: 14px; }
.dd__search input:focus { border-color: var(--sage-500); }
.dd__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.dd__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd__row .input { height: 44px; padding: 0 12px; }
[data-filter='price'] .dd__panel { min-width: 340px; }
.dd__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dd__presets .chip { height: 32px; font-size: 13px; padding: 0 12px; }
.dd__group + .dd__group { margin-top: 16px; }
.dd__group-label { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0 2px 8px; }
.steps-pick { display: flex; gap: 6px; }
.steps-pick button { flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; color: var(--ink-2); background: #fff; transition: all .15s; }
.steps-pick button:hover { border-color: var(--sage-500); }
.steps-pick button[aria-pressed='true'] { background: var(--sage-700); border-color: var(--sage-700); color: #fff; }

/* 5. HEADER / FOOTER ------------------------------------------------------- */
#site-header { min-height: var(--header-h); }
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  background: rgba(251, 248, 243, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px rgba(15, 53, 64, .06); }
.header__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.header__logo { display: block; flex: none; }
.header__logo img { height: 56px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--sage-700); background: var(--sage-50); }
.nav__link.is-active { color: var(--sage-800); background: var(--sage-100); }
.nav__link .icon { width: 15px; height: 15px; stroke-width: 2; transition: transform .2s; }
.nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 270px; padding: 10px; margin-top: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s var(--ease);
}
.nav__menu::before { content: ''; position: absolute; inset: -10px 0 auto; height: 10px; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__item:hover .nav__link .icon { transform: rotate(180deg); }
.nav__menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.nav__menu a:hover { background: var(--sage-50); color: var(--sage-700); }
.nav__menu a span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.header__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sea-900); margin-right: 8px; }
.header__phone .icon { color: var(--sage-600); }
.header__phone:hover { color: var(--sage-600); }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; }
.lang__btn:hover { border-color: var(--sage-500); }
.lang__btn .icon:last-child { width: 14px; height: 14px; stroke-width: 2; }
.lang .dd__panel { min-width: 210px; padding: 8px; }
.lang .dd__opt b { width: 30px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.counter {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--terra-600); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--milk);
}
.counter:empty, .counter[data-n='0'] { display: none; }
.favs .dd__panel { width: 360px; max-width: 360px; padding: 16px; }
.favs__empty { text-align: center; padding: 18px 10px 10px; color: var(--muted); font-size: 14px; }
.favs__empty .icon { width: 30px; height: 30px; color: var(--sand-300); margin: 0 auto 10px; display: block; }
.mini { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.mini:hover { background: var(--sand-50); }
.mini img { width: 72px; height: 54px; object-fit: cover; border-radius: 9px; background: var(--sand-100); }
.mini b { display: block; font-size: 14.5px; }
.mini span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mini button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.mini button:hover { background: var(--terra-50); color: var(--terra-600); }
.burger { display: none; }

.drawer { position: fixed; inset: 0; z-index: 190; visibility: hidden; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(11, 42, 51, .5); opacity: 0; transition: opacity .25s; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); background: var(--milk); padding: 22px 24px 28px;
  display: flex; flex-direction: column; gap: 18px; overflow: auto; transform: translateX(100%); transition: transform .3s var(--ease);
}
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__head img { height: 46px; width: auto; }
.drawer__nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line); font: 600 24px/1.2 var(--font-display); color: var(--sea-900); }
.drawer__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.drawer__nav .drawer__sub a {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  font: 600 14.5px/1.25 var(--font-body); color: var(--ink); transition: border-color .2s, background .2s, color .2s;
}
.drawer__nav .drawer__sub a:hover, .drawer__nav .drawer__sub a:focus-visible { border-color: var(--sage-500); background: var(--sage-50); color: var(--sage-700); }
.drawer__sub span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.drawer__contacts { display: grid; gap: 10px; margin-top: auto; }
.drawer__langs { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer__langs .chip { height: 34px; font-size: 13px; }

.footer { background: var(--sea-950); color: #c9d9dc; padding: 72px 0 0; position: relative; overflow: hidden; }
.footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 100%; opacity: .5; pointer-events: none;
  background: radial-gradient(900px 380px at 88% -10%, rgba(47, 138, 156, .35), transparent 70%), radial-gradient(700px 300px at 0% 110%, rgba(156, 175, 136, .16), transparent 70%);
}
.footer .container { position: relative; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 56px; padding-bottom: 56px; }
.footer__logo img { height: 66px; width: auto; filter: invert(1) brightness(1.6); opacity: .96; }
.footer__about { margin: 20px 0 24px; font-size: 15px; line-height: 1.65; max-width: 36ch; color: #a9bfc3; }
.footer__placas { display: grid; gap: 16px; margin-top: 26px; }
.footer__placa { display: flex; align-items: center; gap: 14px; max-width: 360px; color: #a9bfc3; font-size: 13px; line-height: 1.4; text-decoration: none; }
.footer__placa img { width: 88px; height: 88px; border-radius: 10px; flex: none; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.footer__placa > span { display: grid; gap: 2px; }
.footer__placa b { font-size: 16px; color: #fff; letter-spacing: .02em; }
.footer__placa small { font-size: 12px; color: #8fa8ad; }
.footer__placa:hover b { color: var(--sage-300); }
.footer h4 { font: 700 12.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-300); margin-bottom: 20px; }
.footer__links { display: grid; gap: 12px; font-size: 15px; }
.footer__links a { color: #dbe7e9; transition: color .2s; }
.footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__contact { display: grid; gap: 14px; font-size: 15px; }
.footer__contact a, .footer__contact div { display: flex; gap: 12px; align-items: flex-start; color: #dbe7e9; }
.footer__contact a:hover { color: #fff; }
.footer__contact .icon { color: var(--sage-300); margin-top: 2px; }
.footer__contact small { display: block; color: #8fa8ad; font-size: 13px; }
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); color: #e6f0f1; transition: all .2s; }
.socials a:hover { background: #fff; color: var(--sea-900); border-color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 200px 26px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #8fa8ad; }
.footer__bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__bottom a:hover { color: #fff; }

/* floating contact widget */
.float { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.float__list { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.float__item {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 16px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--shadow-md); font-size: 14px; font-weight: 700; color: var(--ink);
  opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .2s, transform .25s var(--ease);
}
.float__item i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--sage-600); }
.float__item i .icon { width: 18px; height: 18px; }
/* messengers: the official glyph in the brand colour, no circle behind it */
.float__item--wa i, .float__item--vb i, .float__item--tg i, .float__item--ms i { background: transparent; }
.float__item--wa i .icon, .float__item--vb i .icon, .float__item--tg i .icon, .float__item--ms i .icon { width: 30px; height: 30px; }
.float__item--wa i { color: #25d366; }
.float__item--vb i { color: #7360f2; }
.float__item--tg i { color: #26a5e4; }
.float__item--ms i { color: #0084ff; }
.channel[href^="https://wa.me"] .icon, .chip[data-via="whatsapp"] .icon, .dd__opt[href^="https://wa.me"] .icon { color: #25d366; }
.channel[href^="viber:"] .icon, .chip[data-via="viber"] .icon, .dd__opt[href^="viber:"] .icon { color: #7360f2; }
.channel[href^="https://t.me"] .icon, .chip[data-via="telegram"] .icon, .dd__opt[href^="https://t.me"] .icon { color: #26a5e4; }
.channel[href^="https://m.me"] .icon { color: #0084ff; }
.chip[aria-pressed="true"] .icon { color: inherit; }
.float.is-open .float__item { opacity: 1; transform: none; pointer-events: auto; }
.float.is-open .float__item:nth-child(1) { transition-delay: .10s; }
.float.is-open .float__item:nth-child(2) { transition-delay: .08s; }
.float.is-open .float__item:nth-child(3) { transition-delay: .06s; }
.float.is-open .float__item:nth-child(4) { transition-delay: .04s; }
.float.is-open .float__item:nth-child(5) { transition-delay: .02s; }
.float__btn {
  height: 58px; padding: 0 22px 0 18px; border-radius: var(--r-pill); background: var(--sage-700); color: #fff;
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-lg); transition: background .2s;
}
.float__btn:hover { background: var(--sage-800); }
.float__btn .dot { width: 9px; height: 9px; border-radius: 50%; background: #58d68d; box-shadow: 0 0 0 4px rgba(88, 214, 141, .22); }
.float__btn .i-close, .float.is-open .float__btn .i-chat { display: none; }
.float { transition: opacity .25s, transform .25s var(--ease); }
body.is-float-hidden .float { opacity: 0; transform: translateY(12px); pointer-events: none; }
.float.is-open .float__btn .i-close { display: block; }
body.has-tray .float { bottom: 104px; }

/* 6. OVERLAYS -------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; visibility: hidden; }
.modal__scrim { position: absolute; inset: 0; background: rgba(11, 42, 51, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.modal__dialog {
  position: relative; width: min(960px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--milk); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 0.9fr 1.1fr; opacity: 0; transform: translateY(16px) scale(.985); transition: all .3s var(--ease);
}
.modal.is-open { visibility: visible; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__aside { position: relative; min-height: 520px; color: #fff; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; background: var(--sea-900) center/cover no-repeat; }
.modal__aside::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 42, 51, .15) 0%, rgba(11, 42, 51, .88) 78%); }
.modal__aside > * { position: relative; }
.modal__aside h3 { font: 600 32px/1.1 var(--font-display); color: #fff; margin-bottom: 14px; }
.modal__aside li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; padding: 6px 0; color: #e4eef0; }
.modal__aside li .icon { color: var(--sage-300); margin-top: 1px; }
.modal__body { padding: 40px 40px 36px; }
.modal__body h2 { font-size: 36px; margin-bottom: 8px; }
.modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.form-grid { display: grid; gap: 16px; margin-top: 24px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.form-note { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.form-note .icon { color: var(--sage-600); margin-top: 1px; }
.success { text-align: center; padding: 28px 8px 8px; }
.success__mark { width: 72px; height: 72px; border-radius: 50%; background: var(--sage-100); color: var(--sage-700); display: grid; place-items: center; margin: 0 auto 20px; }
.success__mark .icon { width: 34px; height: 34px; stroke-width: 2; }
.success h3 { font: 600 30px/1.15 var(--font-display); color: var(--sea-900); margin-bottom: 10px; }
.success p { color: var(--ink-2); max-width: 40ch; margin: 0 auto 22px; }
.success__summary { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }

.toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 300; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 22px; background: var(--sea-950); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toast-in .3s var(--ease); max-width: min(560px, calc(100vw - 32px));
}
.toast .icon { color: var(--sage-300); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
body.has-tray .toasts { bottom: 104px; }

/* compare tray */
.tray {
  position: fixed; left: 50%; bottom: 20px; z-index: 85; transform: translate(-50%, 140%); visibility: hidden; opacity: 0;
  transition: transform .35s var(--ease), opacity .25s, visibility .35s;
  display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 20px; border-radius: 22px; background: var(--sea-950); color: #fff; box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 32px);
}
.tray.is-visible { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.tray__label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.tray__label small { display: block; font-weight: 500; color: #9fb7bb; font-size: 12.5px; }
.tray__items { display: flex; gap: 8px; }
.tray__item { position: relative; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--sea-800); border: 1px solid rgba(255, 255, 255, .14); }
.tray__item img { width: 100%; height: 100%; object-fit: cover; }
.tray__item button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(11, 42, 51, .8); color: #fff; display: grid; place-items: center; }
.tray__item button .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.tray__item--empty { border-style: dashed; display: grid; place-items: center; color: #6f8d92; }
.tray__clear { font-size: 13.5px; font-weight: 600; color: #b9cdd0; padding: 0 6px; }
.tray__clear:hover { color: #fff; }

/* 7. CARD ------------------------------------------------------------------ */
.card { position: relative; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s var(--ease), border-color .3s; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(135deg, var(--sand-100), var(--sea-100)); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .25s; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(transparent, rgba(11, 42, 51, .38)); pointer-events: none; }
.card__badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; padding-right: 110px; }
.card__actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 3; }
.card__actions .icon-btn { width: 38px; height: 38px; }
.card__actions .icon { width: 18px; height: 18px; }
.card__nav {
  position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--sea-900);
  display: grid; place-items: center; opacity: 0; transition: opacity .2s, background .2s; box-shadow: var(--shadow-xs);
}
.card__nav .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.card__nav--prev { left: 10px; }
.card__nav--next { right: 10px; }
.card:hover .card__nav, .card__nav:focus-visible { opacity: 1; }
.card__nav:hover { background: #fff; }
.card__meta { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 12.5px; font-weight: 700; pointer-events: none; }
.card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.card__meta .icon { width: 15px; height: 15px; }
.card__dots { display: flex; gap: 4px; }
.card__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.card__dots i.is-on { background: #fff; width: 14px; border-radius: 3px; }
.card__body { padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__price { display: flex; align-items: baseline; gap: 10px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--sea-900); line-height: 1.15; }
.card__price small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.card__title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__title a:hover { color: var(--sage-700); }
.card__loc { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.card__loc .icon { width: 16px; height: 16px; color: var(--sage-600); }
.card__specs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.card__specs li { display: inline-flex; align-items: center; gap: 7px; }
.card__specs .icon { width: 18px; height: 18px; color: var(--sea-600); }
.card__specs .card__id { margin-left: auto; font-weight: 600; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.card__excerpt, .card__tags, .card__cta { display: none; }

/* list view */
.results--list { grid-template-columns: 1fr !important; }
.results--list .card { flex-direction: row; }
.results--list .card:hover { transform: none; }
.results--list .card__media { width: 400px; flex: none; aspect-ratio: auto; min-height: 270px; }
.results--list .card__body { padding: 24px 28px; gap: 10px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 1fr auto; column-gap: 28px; }
.results--list .card__price { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 28px; text-align: right; }
.results--list .card__title { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.15; color: var(--sea-900); }
.results--list .card__loc { grid-column: 1; grid-row: 2; }
.results--list .card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; grid-column: 1; grid-row: 3; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.results--list .card__tags { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1; grid-row: 4; align-self: start; }
.results--list .card__tags span { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--sand-50); color: var(--ink-2); border: 1px solid var(--line); }
.results--list .card__specs { grid-column: 1 / -1; grid-row: 5; margin-top: 4px; }
.results--list .card__cta { display: inline-flex; grid-column: 2; grid-row: 3 / span 2; align-self: end; justify-self: end; position: relative; z-index: 2; }

/* 8. HOME ------------------------------------------------------------------ */
.hero { padding: 14px 0 0; }
.hero__media {
  position: relative; min-height: 610px; border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate;
  background: var(--sea-800) center 58% / cover no-repeat; display: flex; align-items: center;
}
.hero__img, .hero__img img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__img img { object-fit: cover; object-position: center 58%; }
.hero__media::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(9, 38, 47, .86) 0%, rgba(9, 38, 47, .62) 36%, rgba(9, 38, 47, .12) 66%, rgba(9, 38, 47, 0) 100%),
              linear-gradient(0deg, rgba(9, 38, 47, .42) 0%, rgba(9, 38, 47, 0) 34%);
}
.hero__content { padding: 56px 64px 150px; max-width: 760px; }
.hero__tag { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 600; }
.hero__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-400); box-shadow: 0 0 0 4px rgba(154, 172, 135, .3); }
.hero h1 { color: #fff; font-size: clamp(44px, 5.2vw, 76px); line-height: .98; margin: 22px 0 22px; letter-spacing: -.02em; }
.hero h1 em { color: #d3e0c6; white-space: nowrap; }
.hero__text { font-size: 18.5px; line-height: 1.6; color: #e8f1f2; max-width: 52ch; }
.hero__cta { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hero__cta .link { color: #fff; }
.hero__cta .link:hover { color: #fff; }
.hero__note {
  position: absolute; right: 28px; top: 28px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(12px); font-size: 13.5px; line-height: 1.35; max-width: 290px;
}
.hero__note i { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--sage-600); display: grid; place-items: center; flex: none; }
.hero__note b { display: block; font-size: 14.5px; }

.search { position: relative; z-index: 5; margin: -96px 28px 0; background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg); padding: 10px; }
.search__tabs { display: flex; gap: 4px; padding: 4px 4px 10px; }
.search__tab { height: 38px; padding: 0 18px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; color: var(--ink-2); transition: all .2s; }
.search__tab:hover { background: var(--sand-50); }
.search__tab[aria-selected='true'] { background: var(--sage-700); color: #fff; }
.search__row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr auto; align-items: stretch; background: var(--sand-50); border-radius: 18px; border: 1px solid var(--line); }
.search__cell { position: relative; min-width: 0; }
.search__cell + .search__cell::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line-2); }
.search__field { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 72px; padding: 0 22px; text-align: left; border-radius: 18px; transition: background .2s; }
.search__field:hover, .dd.is-open > .search__field { background: #fff; }
.search__field small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.search__field span, .search__field input { font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__field span.is-placeholder { color: #607073; font-weight: 500; } /* 4.6:1 on sand (WCAG AA); the old #7f8f92 was 3:1 */
.search__field input { border: 0; outline: 0; background: transparent; padding: 0; width: 100%; }
.search__field input::placeholder { color: #607073; font-weight: 500; }
.search__field .icon { position: absolute; right: 18px; top: 50%; margin-top: -8px; width: 16px; height: 16px; stroke-width: 2; color: var(--muted); transition: transform .2s; }
.dd.is-open > .search__field .icon { transform: rotate(180deg); }
/* in the hero the list opens upwards — always within the first screen */
@media (min-width: 761px) {
  .search .dd__panel { top: auto; bottom: calc(100% + 12px); transform: translateY(6px); }
  .search .dd.is-open .dd__panel { transform: none; }
}
.search__submit { padding: 8px; display: flex; }
.search__submit .btn { height: 100%; min-height: 56px; border-radius: 14px; padding: 0 28px; }
.search__quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 28px 0; font-size: 14px; color: var(--muted); }
.search__quick .chip { height: 34px; font-size: 13.5px; background: transparent; }

.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__item { display: flex; gap: 16px; align-items: center; padding: 26px 28px; }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__item i { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--sage-100); color: var(--sage-700); display: grid; place-items: center; }
.trust__item b { display: block; font: 600 27px/1.05 var(--font-display); color: var(--sea-900); letter-spacing: -.01em; }
.trust__item span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); margin-top: 4px; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--sand-100); }
.tabs button { height: 38px; padding: 0 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; color: var(--ink-2); transition: all .2s; }
.tabs button[aria-selected='true'] { background: #fff; color: var(--sage-700); box-shadow: var(--shadow-sm); }
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 22px; margin: -6px -2px -22px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
.slider__arrows { display: flex; gap: 8px; }
.slider__arrows .icon-btn[disabled] { opacity: .35; cursor: default; }
.section__foot { display: flex; justify-content: center; margin-top: 44px; }

.why { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.why__intro h2 { margin: 14px 0 20px; }
.why__photo { position: relative; margin-top: 34px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 4; background: var(--sand-100); }
.why__photo img { width: 100%; height: 100%; object-fit: cover; }
.why__stamp { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
.why__stamp i { width: 44px; height: 44px; border-radius: 12px; background: var(--sage-600); color: #fff; display: grid; place-items: center; flex: none; }
.why__stamp b { display: block; font-size: 15px; color: var(--sea-900); }
.why__stamp span { font-size: 13.5px; color: var(--muted); }
.adv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.adv__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 28px 30px; transition: box-shadow .3s, transform .3s var(--ease); }
.adv__item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.adv__item i { width: 52px; height: 52px; border-radius: 16px; background: var(--sage-50); color: var(--sage-700); display: grid; place-items: center; margin-bottom: 22px; }
.adv__item i .icon { width: 24px; height: 24px; }
.adv__item h3 { font: 600 25px/1.15 var(--font-display); color: var(--sea-900); margin-bottom: 10px; letter-spacing: -.005em; }
.adv__item p { font-size: 15px; color: var(--ink-2); }
.services { margin-top: 20px; background: var(--sea-900); color: #fff; border-radius: var(--r-lg); padding: 30px 32px 32px; position: relative; overflow: hidden; }
.services::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 195, 204, .22), transparent 70%); }
.services__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; position: relative; z-index: 1; }
.services__head h3 { font: 600 27px/1.1 var(--font-display); color: #fff; }
.services__head .link { color: var(--sage-300); }
.services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; position: relative; z-index: 1; }
.services__grid li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; font-weight: 500; color: #e6f0f1; }
.services__grid li:nth-last-child(-n + 2) { border-bottom: 0; }
.services__grid li { line-height: 1.35; }
.services__grid .icon { color: var(--sage-300); width: 19px; height: 19px; }

.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; position: relative; }
.process::before { content: ''; position: absolute; left: 28px; right: 10%; top: 28px; height: 1px; background: repeating-linear-gradient(90deg, var(--sage-300) 0 6px, transparent 6px 12px); }
.process__step { position: relative; padding-right: 28px; }
.process__num { width: 56px; height: 56px; border-radius: 50%; background: var(--milk); border: 1px solid var(--sage-300); display: grid; place-items: center; font: 600 24px/1 var(--font-display); color: var(--sage-700); margin-bottom: 22px; position: relative; }
.process__step:last-child .process__num { background: var(--sage-600); border-color: var(--sage-600); color: #fff; }
.process__step h3 { font-size: 17.5px; margin-bottom: 8px; color: var(--sea-900); }
.process__step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.process__step small { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--sage-700); background: var(--sage-50); padding: 4px 10px; border-radius: var(--r-pill); }

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.review:first-child { background: var(--sea-900); border-color: var(--sea-900); color: #e6f0f1; }
.review__top { display: flex; justify-content: space-between; align-items: center; }
.review__stars { display: flex; gap: 2px; color: #d9a441; }
.review__stars .icon { width: 17px; height: 17px; }
.review__quote { color: var(--sand-300); }
.review__quote .icon { width: 32px; height: 32px; }
.review blockquote { flex: 1; }
.review p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.review:first-child p { color: #dbe8ea; }
.review__who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.review:first-child .review__who { border-color: rgba(255, 255, 255, .14); }
.review__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--sand-100); }
.review__who b { display: block; font-size: 15.5px; color: var(--sea-900); }
.review:first-child .review__who b { color: #fff; }
.review__who div span { font-size: 13.5px; color: var(--muted); }
.review:first-child .review__who div span { color: #a5bcc0; } /* not the badge: light grey on its sage chip was unreadable */
.review__who .badge { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12.5px; }

.cta { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--sea-900) center/cover no-repeat; color: #fff; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; padding: 64px; isolation: isolate; }
.cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(9, 38, 47, .94) 0%, rgba(9, 38, 47, .82) 45%, rgba(9, 38, 47, .45) 100%); }
.cta .eyebrow { color: var(--sage-300); }
.cta h2 { color: #fff; margin: 16px 0 18px; max-width: 16ch; }
.cta h2 em { color: #d3e0c6; }
.cta__text { font-size: 17px; color: #dbe8ea; max-width: 46ch; }
.cta__channels { margin-top: 34px; }
.cta__channels small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5bcc0; margin-bottom: 12px; }
.channels { display: flex; flex-wrap: wrap; gap: 8px; }
.channel { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: all .2s; }
.channel:hover { background: #fff; color: var(--sea-900); border-color: #fff; }
.channel--light { background: #fff; border-color: var(--line-2); color: var(--ink); }
.channel--light:hover { border-color: var(--sage-500); color: var(--sage-700); }
.cta__phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 600 30px/1 var(--font-display); color: #fff; }
.cta__phone:hover { color: var(--sage-300); }
.cta__form { background: var(--milk); color: var(--ink); border-radius: 24px; padding: 32px; box-shadow: var(--shadow-lg); }
.cta__form h3 { font: 600 28px/1.15 var(--font-display); color: var(--sea-900); }
.cta__form > p { font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.cta__form .form-grid { margin-top: 20px; gap: 14px; }

/* 9. CATALOG --------------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.crumbs a:hover { color: var(--sea-700); }
.crumbs .icon { width: 13px; height: 13px; stroke-width: 2; opacity: .6; }
.crumbs span[aria-current] { color: var(--ink-2); font-weight: 600; }
.page-head { padding: 28px 0 28px; }
.page-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 18px; }
.page-head h1 { font-size: clamp(36px, 3.6vw, 52px); }
.page-head p { color: var(--ink-2); max-width: 58ch; margin-top: 10px; }
.page-head__aside { display: flex; align-items: center; gap: 12px; flex: none; font-size: 14px; color: var(--muted); }

.fbar { position: sticky; top: var(--header-h); z-index: 90; background: rgba(251, 248, 243, .94); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.fbar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-block: 14px; }
.fbar__search { position: relative; flex: 1 1 260px; max-width: 320px; }
.fbar__search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; }
.fbar__search input { width: 100%; height: 46px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; padding: 0 16px 0 44px; outline: none; font-size: 14.5px; font-weight: 500; transition: all .2s; }
.fbar__search input:focus { border-color: var(--sage-500); box-shadow: 0 0 0 4px rgba(154, 172, 135, .2); }
.fbtn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: all .2s; }
.fbtn:hover { border-color: var(--sea-700); }
.fbtn .icon { width: 15px; height: 15px; stroke-width: 2; color: var(--muted); transition: transform .2s; }
.dd.is-open > .fbtn { border-color: var(--sea-700); box-shadow: 0 0 0 4px rgba(28, 107, 126, .12); }
.dd.is-open > .fbtn .icon { transform: rotate(180deg); }
.fbtn.has-value { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
.fbtn.has-value .icon { color: #b9cdd0; }
.fbtn b { font-weight: 700; }
.fbar__reset { margin-left: auto; }
.fbar__mobile { display: none; }
.fbar__filters { display: contents; }
.fbar__sheet-head, .fbar__sheet-foot { display: none; }

.active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 20px; }
.active:empty { display: none; }
.active__label { font-size: 13.5px; color: var(--muted); margin-right: 4px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0 22px; flex-wrap: wrap; }
.toolbar__count { font-size: 15px; color: var(--ink-2); }
.toolbar__count b { font: 600 26px/1 var(--font-display); color: var(--sea-900); margin-right: 4px; }
.toolbar__count small { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: var(--r-pill); background: var(--sand-50); border: 1px solid var(--line); }
.toolbar__right { display: flex; align-items: center; gap: 10px; }
.sort { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 600; }
.sort:hover { border-color: var(--sage-500); }
.sort > .icon:first-child { color: var(--muted); width: 17px; height: 17px; }
.sort span { color: var(--muted); font-weight: 500; }
.sort .icon:last-child { width: 14px; height: 14px; stroke-width: 2; color: var(--muted); }
.view { display: inline-flex; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; }
.view button { width: 40px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--muted); transition: all .2s; }
.view button[aria-pressed='true'] { background: var(--sage-700); color: #fff; }
.view .icon { width: 18px; height: 18px; }

.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.results.is-loading { opacity: .45; transition: opacity .15s; }
.more { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 0 8px; }
.more__progress { width: 240px; height: 4px; border-radius: 2px; background: var(--sand-200); overflow: hidden; }
.more__progress i { display: block; height: 100%; background: var(--sea-700); border-radius: 2px; transition: width .4s var(--ease); }
.more p { font-size: 14px; color: var(--muted); }
.catalog-end { padding-bottom: 96px; }

.empty { text-align: center; padding: 56px 24px 72px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); background: var(--sand-50); }
.empty__art { width: 148px; height: 110px; margin: 0 auto 22px; color: var(--sage-400); }
.empty h2 { font-size: 34px; margin-bottom: 10px; }
.empty p { max-width: 54ch; margin: 0 auto; color: var(--ink-2); }
.empty__actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.empty__hints { margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }

.helpband { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 36px; border-radius: var(--r-xl); background: var(--sage-50); border: 1px solid var(--sage-200); }
.helpband h3 { font: 600 29px/1.15 var(--font-display); color: var(--sea-900); margin-bottom: 6px; }
.helpband p { color: var(--ink-2); font-size: 15px; max-width: 64ch; }
.helpband__actions { display: flex; gap: 10px; flex: none; }

/* 10. PROPERTY ------------------------------------------------------------- */
.phead { padding: 24px 0 26px; }
.phead__row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 18px; }
.phead__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.phead__badges .badge { border: 1px solid var(--line-2); }
.phead__badges .badge--new, .phead__badges .badge--rent, .phead__badges .badge--pick { border-color: transparent; }
.phead h1 { font-size: clamp(34px, 3.5vw, 50px); max-width: 22ch; }
.phead__loc { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.phead__loc span { display: inline-flex; align-items: center; gap: 7px; }
.phead__loc .icon { width: 17px; height: 17px; color: var(--sage-600); }
.phead__loc .id { font-weight: 700; color: var(--sea-800); background: var(--sea-50); border-radius: var(--r-pill); padding: 3px 12px; font-size: 13px; letter-spacing: .03em; }
.phead__side { text-align: right; }
.phead__price { font-size: 42px; font-weight: 800; letter-spacing: -.03em; color: var(--sea-900); line-height: 1; }
.phead__price small { font-size: 18px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.phead__ppm { font-size: 14px; color: var(--muted); margin-top: 8px; }
.phead__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 262px 262px; gap: 10px; border-radius: var(--r-xl); overflow: hidden; position: relative; }
.gallery__tile { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--sand-100), var(--sea-100)); cursor: zoom-in; display: block; width: 100%; height: 100%; }
.gallery__tile:first-child { grid-row: 1 / span 2; }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; }
.gallery__tile:hover img { transform: scale(1.03); filter: brightness(.94); }
.gallery--3 { grid-template-columns: 2fr 1fr; }
.gallery--2 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 534px; }
.gallery--2 .gallery__tile:first-child { grid-row: auto; }
.gallery--1 { grid-template-columns: 1fr; grid-template-rows: 534px; }
.gallery--1 .gallery__tile:first-child { grid-row: auto; }
/* bottom-left: does not collide with the floating contact button on the right */
.gallery__all { position: absolute; left: 18px; bottom: 18px; z-index: 2; box-shadow: var(--shadow-md); }
.gallery__count { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: none; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(11, 42, 51, .72); color: #fff; font-size: 13px; font-weight: 700; }

.lightbox { position: fixed; inset: 0; z-index: 210; background: rgba(7, 26, 32, .96); color: #fff; display: grid; grid-template-rows: auto 1fr auto; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.lightbox__bar b { font-size: 15px; }
.lightbox__bar span { font-size: 14px; color: #a5bcc0; margin-left: 12px; }
.lightbox__bar .icon-btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.lightbox__bar .icon-btn:hover { background: #fff; color: var(--sea-900); }
.lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 84px; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; min-height: 0; }
.lightbox__nav { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; transition: background .2s; }
.lightbox__nav:hover { background: #fff; color: var(--sea-900); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 16px 24px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; justify-content: safe center; }
.lightbox__thumbs button { flex: none; width: 92px; height: 62px; border-radius: 9px; overflow: hidden; opacity: .45; border: 2px solid transparent; transition: all .2s; background: var(--sea-900); }
.lightbox__thumbs button:hover { opacity: .8; }
.lightbox__thumbs button[aria-current='true'] { opacity: 1; border-color: #fff; }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox.is-single .lightbox__nav, .lightbox.is-single .lightbox__thumbs { display: none; }
/* floor plans: white sheet, a click zooms in and the stage scrolls */
.lightbox--plans .lightbox__stage img { background: #fff; cursor: zoom-in; }
.lightbox--plans .lightbox__thumbs img { object-fit: contain; background: #fff; }
.lightbox.is-zoomed .lightbox__stage { display: flex; overflow: auto; overscroll-behavior: contain; padding: 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.lightbox.is-zoomed .lightbox__stage img { flex: none; max-width: none; max-height: none; margin: auto; border-radius: 0; cursor: zoom-out; }
.lightbox.is-zoomed .lightbox__nav { display: none; }

.playout { display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 56px; align-items: start; padding: 36px 0 0; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.facts--5 { grid-template-columns: repeat(5, 1fr); }
.fact { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact .icon { width: 24px; height: 24px; color: var(--sea-600); margin-bottom: 6px; }
.fact b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--sea-900); line-height: 1.1; }
.fact span { font-size: 13.5px; color: var(--muted); }
.pblock { padding: 44px 0 0; }
.pblock + .pblock { margin-top: 44px; border-top: 1px solid var(--line); }
.pblock > h2 { font-size: 33px; margin-bottom: 20px; }
.pblock__lead { font-size: 18px; line-height: 1.65; color: var(--ink); max-width: 66ch; }
.dcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.dcol { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 22px 24px; }
.dcol h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 14px; color: var(--sea-900); }
.dcol h3 .icon { color: var(--sage-600); }
.dcol li { position: relative; padding: 6px 0 6px 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dcol li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--sand-300); }
.specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs dt { color: var(--muted); }
.specs dd { font-weight: 700; color: var(--ink); text-align: right; }
.amen { display: flex; flex-wrap: wrap; gap: 10px; }
.amen li { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.amen .icon { color: var(--sage-600); }
.locgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.dist { display: grid; gap: 10px; align-content: start; }
.dist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.dist i { width: 44px; height: 44px; border-radius: 12px; background: var(--sea-50); color: var(--sea-700); display: grid; place-items: center; }
.dist li:first-child { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
.dist li:first-child i { background: rgba(255, 255, 255, .12); color: #fff; }
.dist b { display: block; font-size: 15px; }
.dist span { font-size: 13px; color: var(--muted); }
.dist li:first-child span { color: #a5bcc0; }
.dist strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.map { position: relative; min-height: 300px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #e4eee9; isolation: isolate; }
/* only the drawn schematic map: Leaflet's own SVGs (the approximate-area circle) keep their sizes */
.map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pin { position: absolute; left: 46%; top: 44%; transform: translate(-50%, -100%); color: var(--terra-600); filter: drop-shadow(0 6px 8px rgba(11, 42, 51, .3)); }
.map__pin .icon { width: 44px; height: 44px; fill: var(--terra-500); stroke: #fff; stroke-width: 1.4; }
.map__pin::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 56px; height: 56px; margin-left: -28px; margin-bottom: -28px; border-radius: 50%; background: rgba(196, 99, 63, .16); border: 1px solid rgba(196, 99, 63, .35); z-index: -1; }
.map__card { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); font-size: 13.5px; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.map__card b { display: block; color: var(--sea-900); font-size: 14.5px; }
.costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cost { padding: 22px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.cost span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4; min-height: 38px; }
.cost b { display: block; margin-top: 10px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--sea-900); }
.cost b small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.cost--total { background: var(--sage-50); border-color: var(--sage-100); }
.cost--total b { color: var(--sage-700); }
.note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.note .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--sage-600); }

.pside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.tour { background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-md); padding: 26px; }
.tour__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tour__sum b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--sea-900); }
.tour__sum span { font-size: 13.5px; color: var(--muted); text-align: right; }
.tour h2 { font-size: 29px; }
.tour__steps { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; font-size: 13px; color: var(--muted); font-weight: 600; }
.tour__steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--sand-200); }
.tour__steps i.is-on { background: var(--sea-700); }
.tour__label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 18px 0 9px; }
.tour__label span { font-weight: 500; color: var(--muted); }
.days { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity; }
.days::-webkit-scrollbar { display: none; }
.day { height: 72px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: all .15s; scroll-snap-align: start; }
.day small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.day b { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.day span { font-size: 11px; color: var(--muted); }
.day:hover { border-color: var(--sea-700); }
.day[aria-pressed='true'] { background: var(--sea-900); border-color: var(--sea-900); }
.day[aria-pressed='true'] * { color: #fff; }
.day[disabled] { opacity: .4; cursor: not-allowed; background: var(--sand-50); }
.times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.times button { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-2); transition: all .15s; }
.times button:hover { border-color: var(--sea-700); }
.times button[aria-pressed='true'] { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
.tour .btn--block { margin-top: 20px; }
.tour__hint { font-size: 12.5px; color: var(--terra-600); font-weight: 600; margin-top: 8px; display: none; }
.tour__hint.is-on { display: block; }
.tour__picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sea-50); font-size: 14px; font-weight: 600; color: var(--sea-800); margin-bottom: 16px; }
.tour__picked span { display: inline-flex; align-items: center; gap: 8px; }
.tour__picked button { font-size: 13px; font-weight: 700; color: var(--sea-700); text-decoration: underline; text-underline-offset: 3px; }
.tour .form-grid { margin-top: 0; gap: 12px; }
.tour .input { height: 48px; }
.tour__or { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tour__or::before, .tour__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tour__channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tour__channels a { height: 46px; border-radius: 14px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--sea-800); transition: all .2s; }
.tour__channels a:hover { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
.agent { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--sage-50); border: 1px solid var(--sage-100); }
.agent__ava { width: 48px; height: 48px; border-radius: 50%; background: var(--sage-600); color: #fff; display: grid; place-items: center; font: 600 20px/1 var(--font-display); flex: none; }
.agent b { display: block; font-size: 15px; color: var(--sea-900); }
.agent div span { font-size: 13px; color: var(--ink-2); }
.agent a { margin-left: auto; }

.share .dd__panel { min-width: 250px; padding: 8px; }
.share .dd__opt .icon { color: var(--sea-700); }

.mbar { display: none; }

/* 11. PRINT ---------------------------------------------------------------- */
@media print {
  #site-header, .header, .footer, .float, .tray, .pside, .phead__actions, .gallery__all, .similar, .mbar, .toasts, .crumbs { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .playout { display: block; padding-top: 16px; }
  .gallery { grid-template-rows: 180px 180px; border-radius: 12px; }
  .pblock { break-inside: avoid; padding-top: 20px; }
  .pblock + .pblock { margin-top: 20px; }
  .section { padding-block: 24px; }
}

/* 12. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1320px) {
  :root { --gutter: 40px; }
  .header__phone span { display: none; }
  .header__phone { margin-right: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; justify-content: center; }
  .why { gap: 48px; }
  .playout { gap: 40px; grid-template-columns: minmax(0, 1fr) 384px; }
}
@media (max-width: 1120px) {
  .nav { display: none; }
  .burger { display: inline-grid; }
  .search__row { grid-template-columns: 1fr 1fr; }
  .search__cell:nth-child(3)::before { display: none; }
  .search__cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .search__submit { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .search__submit .btn { width: 100%; }
  .hero__content { padding-bottom: 200px; }
  .search { margin-top: -150px; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .slider__track { grid-auto-columns: calc((100% - 24px) / 2); }
  .why { grid-template-columns: 1fr; }
  .why__photo { aspect-ratio: 16 / 8; }
  .process { grid-template-columns: 1fr 1fr 1fr; row-gap: 36px; }
  .process::before { display: none; }
  .reviews { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; padding: 48px; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .results { grid-template-columns: 1fr 1fr; }
  .results--list .card__media { width: 320px; }
  .playout { grid-template-columns: 1fr; }
  .pside { position: static; }
  .phead__row { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .phead__side { text-align: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  .phead__actions { margin-top: 0; }
  .fbar__inner { flex-wrap: wrap; }
  .helpband { flex-direction: column; align-items: flex-start; }
  .modal__dialog { grid-template-columns: 1fr; width: min(560px, 100%); }
  .modal__aside { display: none; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --header-h: 68px; }
  body { font-size: 15.5px; }
  .section { padding-block: 64px; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
  .section__tools { justify-content: flex-start; }
  .header__logo img { height: 46px; }
  .header__inner { gap: 12px; }
  .header__phone, .lang, .header__cta { display: none; }
  .hero { padding-top: 8px; }
  .hero__media { min-height: 0; border-radius: 24px; align-items: flex-start; }
  .hero__media::before { background: linear-gradient(180deg, rgba(9, 38, 47, .8) 0%, rgba(9, 38, 47, .55) 55%, rgba(9, 38, 47, .3) 100%); }
  .hero__content { padding: 32px 24px 300px; }
  .hero__note { display: none; }
  .hero__tag { height: auto; padding: 7px 14px 7px 12px; font-size: 12.5px; line-height: 1.35; }
  .search__tab { padding: 0 14px; font-size: 14px; }
  .hero__text { font-size: 16.5px; }
  .search { margin: -280px 12px 0; border-radius: 22px; }
  .search__tabs { overflow-x: auto; scrollbar-width: none; }
  .search__row { grid-template-columns: 1fr; }
  .search__cell + .search__cell { border-top: 1px solid var(--line); }
  .search__cell + .search__cell::before { display: none; }
  .search__field { height: 64px; }
  .search__quick { margin-inline: 12px; }
  .dd__panel { max-width: calc(100vw - 64px); }
  .trust { grid-template-columns: 1fr; margin-top: 36px; }
  .trust__item { padding: 18px 8px; border-left: 0 !important; }
  .trust__item + .trust__item { border-top: 1px solid var(--line); }
  .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .slider__track { grid-auto-columns: 86%; gap: 14px; }
  .slider__arrows { display: none; }
  .adv { grid-template-columns: 1fr; gap: 12px; }
  .adv__item { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 20px; }
  .adv__item i { width: 48px; height: 48px; border-radius: 14px; margin: 0; grid-row: 1 / span 2; }
  .adv__item h3 { font-size: 22px; margin-bottom: 6px; }
  .adv__item p { font-size: 14.5px; }
  .services { padding: 24px 22px; }
  .services__head { flex-direction: column; align-items: flex-start; }
  .services__grid { grid-template-columns: 1fr; }
  .services__grid li:nth-last-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .process { grid-template-columns: 1fr; row-gap: 0; }
  .process__step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding: 0 0 28px; }
  .process__step .process__num { grid-row: 1 / span 3; margin: 0; }
  .process__step:not(:last-child)::after { content: ''; position: absolute; left: 28px; top: 60px; bottom: 4px; width: 1px; background: var(--sand-300); }
  .process__step small { justify-self: start; }
  .review { padding: 24px; }
  .cta { padding: 32px 22px; border-radius: 24px; }
  .cta__form { padding: 24px 20px; }
  .cta__phone { font-size: 26px; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .footer { padding-top: 52px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  .footer__bottom { padding: 20px 0 88px; }
  .float { right: 14px; bottom: 14px; }
  body.has-mbar .float { bottom: 84px; }
  body.has-tray .float { bottom: 84px; }
  body.has-mbar .tray { bottom: 78px; }
  .float__btn { width: 56px; padding: 0; justify-content: center; }
  .float__btn span, .float__btn .dot { display: none; }
  .modal { padding: 0; align-items: end; }
  .modal__dialog { border-radius: 24px 24px 0 0; max-height: 92vh; }
  .modal__body { padding: 30px 22px 26px; }
  .modal__body h2 { font-size: 30px; padding-right: 40px; }
  .tray { left: 12px; right: 12px; transform: translateY(160%); max-width: none; gap: 10px; padding-left: 14px; }
  .tray.is-visible { transform: none; }
  .tray__label small, .tray__item--empty, .tray__clear { display: none; }
  .tray__item { width: 48px; height: 40px; }
  .tray .btn { margin-left: auto; padding: 0 16px; }

  .crumbs { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .crumbs > * { flex: none; }
  .crumbs span[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .page-head { padding: 18px 0 20px; }
  .page-head__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head__aside { display: none; }
  /* backdrop-filter creates a containing block for fixed descendants — disabled on mobile so the filter sheet can be full-screen */
  .fbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--milk); }
  body.is-sheet-open .fbar { z-index: 195; }
  .fbar__inner { padding-block: 10px; gap: 8px; flex-wrap: nowrap; }
  .fbar__search { max-width: none; flex: 1; }
  .fbar__mobile { display: inline-flex; flex: none; }
  .fbar__filters {
    position: fixed; inset: 0; z-index: 195; background: var(--milk); display: flex; flex-direction: column; gap: 0; overflow: auto;
    transform: translateY(100%); transition: transform .3s var(--ease); visibility: hidden;
  }
  .fbar__filters.is-open { transform: none; visibility: visible; }
  .fbar__sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--milk); z-index: 2; }
  .fbar__sheet-head b { font: 600 26px/1 var(--font-display); color: var(--sea-900); }
  .fbar__sheet-foot { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--milk); margin-top: auto; }
  .fbar__filters .dd { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .fbar__filters .fbtn { border: 0; background: none !important; color: var(--sea-900) !important; padding: 0; height: auto; font: 700 16px/1.2 var(--font-body); box-shadow: none !important; pointer-events: none; margin-bottom: 12px; }
  .fbar__filters .fbtn .icon { display: none; }
  .fbar__filters .dd__panel { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; border: 0; padding: 0; max-width: none; min-width: 0; background: transparent; }
  .fbar__filters .dd__title, .fbar__filters .dd__foot { display: none; }
  .fbar__filters .dd__list { max-height: none; }
  .fbar__reset { display: none; }
  .active { padding-top: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .toolbar { padding: 16px 0; }
  .toolbar__count small { display: none; }
  .sort span { display: none; }
  .results { grid-template-columns: 1fr; gap: 18px; }
  .results--list .card { flex-direction: column; }
  .results--list .card__media { width: 100%; min-height: 0; aspect-ratio: 3 / 2; }
  .results--list .card__body { display: flex; padding: 18px 20px; }
  .results--list .card__price { align-items: baseline; flex-direction: row; font-size: 23px; order: -1; text-align: left; }
  .results--list .card__title { font-size: 22px; }
  .results--list .card__cta { display: none; }
  .card__nav { opacity: 1; }
  .empty { padding: 40px 18px 48px; }
  .empty h2 { font-size: 28px; }
  .helpband { padding: 24px 22px; margin-top: 44px; }
  .helpband__actions { flex-wrap: wrap; }

  .phead { padding: 16px 0 18px; }
  .phead__price { font-size: 34px; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; border-radius: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__tile { flex: 0 0 88%; height: 260px; border-radius: 18px; scroll-snap-align: center; }
  .gallery__all { position: static; display: none; }
  .gallery__count { display: inline-flex; left: calc(var(--gutter) + 12px); bottom: 12px; pointer-events: none; position: absolute; }
  .gallery-wrap { position: relative; }
  .playout { padding-top: 24px; gap: 32px; }
  .facts, .facts--5 { grid-template-columns: 1fr 1fr; }
  .fact { padding: 16px 18px; }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .facts--5 .fact:last-child { grid-column: 1 / -1; }
  .pblock { padding-top: 32px; }
  .pblock + .pblock { margin-top: 32px; }
  .pblock > h2 { font-size: 28px; }
  .pblock__lead { font-size: 16.5px; }
  .dcols, .costs, .locgrid { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .cost span { min-height: 0; }
  .tour { padding: 22px 18px; border-radius: 22px; }
  .lightbox__stage { padding: 0 8px; }
  .lightbox__nav { width: 42px; height: 42px; background: rgba(11, 42, 51, .6); }
  .lightbox__nav--prev { left: 12px; }
  .lightbox__nav--next { right: 12px; }
  .lightbox__thumbs { justify-content: flex-start; padding-inline: 12px; }
  .lightbox__thumbs button { width: 68px; height: 48px; }
  .lightbox__bar span { display: none; }
  .mbar { position: fixed; inset: auto 0 0 0; z-index: 84; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 53, 64, .08); }
  .mbar b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--sea-900); line-height: 1.1; }
  .mbar span { font-size: 12.5px; color: var(--muted); }
  body.has-mbar .footer { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   13. THEME ADDITIONS (WordPress build on live data)
   ========================================================================== */
.sr-only--focusable:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 16px; background: var(--white); border-radius: var(--r-sm); box-shadow: var(--shadow-md); z-index: 1000; }

/* card: whole photo is a link; sold listings are muted; missing photo */
.card__media { position: relative; }
.card__link { position: absolute; inset: 0; z-index: 1; }
.card__badges, .card__actions, .card__nav, .card__meta { z-index: 2; }
.card__nophoto { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sand-50); color: var(--sand-500); }
.card--sold .card__media img { filter: grayscale(.6); }
.badge--sold { background: var(--ink); color: var(--white); }
.badge--reserved { background: var(--terra-50); color: var(--terra-600); }

/* filter bar extras */
.dd__panel--wide { min-width: 340px; }
.dd__list--tall { max-height: 360px; }
.dd__list--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.dd__costa { padding: 12px 10px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dd__costa:first-child { padding-top: 4px; }
.dd__opt.is-zero { opacity: .45; }
.dd__opt[hidden], .dd__costa[hidden] { display: none !important; }
.dd__presets--radio { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dd__presets--radio .dd__opt { padding: 6px 4px; }
.check--radio .check__box { border-radius: 50%; }
.dd__panel .dd__title + .dd__list + .dd__title { margin-top: 10px; }
.chip--filter { text-decoration: none; }
.chip__x { display: inline-grid; place-items: center; margin-left: 4px; opacity: .7; }
.chip--filter:hover .chip__x { opacity: 1; }
body.is-loading #results, body.is-loading [data-region="count"] { opacity: .55; transition: opacity .2s; }
.btn.is-busy { opacity: .6; pointer-events: none; }

/* pager under "show more" */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; font-size: 14px; }
.pager a, .pager span { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; }
.pager a:hover { background: var(--sea-50); color: var(--sea-700); }
.pager [aria-current] { background: var(--sea-700); color: var(--white); font-weight: 700; }
.pager__gap { color: var(--muted); }
.more:empty { display: none; }

/* catalogue map view */
.cmap { margin-bottom: 32px; }
.cmap__canvas { height: min(72vh, 680px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sea-50); }
.cmap__note { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }
.cmap__pop .pop { display: grid; gap: 4px; color: var(--ink); text-decoration: none; width: 240px; }
.cmap__pop .pop img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: 4px; }
.cmap__pop .pop b { font-size: 16px; color: var(--sea-800); }
.cmap__pop .pop span { font-weight: 600; line-height: 1.3; }
.cmap__pop .pop small, .cmap__pop > small { color: var(--muted); font-size: 12px; }
.leaflet-popup-content { margin: 12px; font-family: var(--font-body); }
.leaflet-container { font-family: var(--font-body); }

/* property: description, extras, plans, live map */
.prose { color: var(--ink-2); line-height: 1.7; }
.prose h3 { font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--ink); margin: 22px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose.is-folded { max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.prose__more { margin-top: 8px; }
.note--lang, .note--mt { margin: 0 0 14px; }
.note--mt .link { margin-left: .3em; } /* GTranslate drops the space before the button */
.translated-ltr .note--lang, .translated-rtl .note--lang { display: none; } /* GTranslate is showing the description in the visitor's language */
.pmedia { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.extras { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 20px; font-size: 14px; color: var(--ink-2); }
.extras li::before { content: '·'; margin-right: 8px; color: var(--sea-500); font-weight: 700; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.plans__item { display: grid; gap: 8px; text-decoration: none; color: var(--ink-2); font-size: 14px; }
.plans__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; cursor: zoom-in; }
.plans__item span { display: flex; align-items: center; gap: 6px; }
.map--live { position: relative; min-height: 320px; }
.map--live .map__canvas { position: absolute; inset: 0; }
.map--live .map__card { z-index: 500; }
.map__pin--live { background: none; border: 0; color: var(--sea-700); }
.map__pin--live .icon { display: block; width: 44px; height: 44px; fill: var(--white); stroke: var(--sea-700); stroke-width: 1.8; filter: drop-shadow(0 4px 6px rgba(15,53,64,.3)); }
.locgrid--nomap { grid-template-columns: 1fr; }
.gallery__empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 8px; background: var(--sand-50); border-radius: var(--r-lg); color: var(--muted); }

/* comparison */
.cmp-wrap { overflow-x: auto; }
.cmp { display: grid; min-width: calc(180px + var(--cols) * 220px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.cmp__row { display: grid; grid-template-columns: 180px repeat(var(--cols), minmax(220px, 1fr)); border-top: 1px solid var(--line); }
.cmp__row:first-child { border-top: 0; }
.cmp__row:nth-child(even) { background: var(--milk); }
.cmp__label { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cmp__cell { padding: 12px 16px; font-size: 14px; color: var(--ink); }
.cmp__card { display: grid; gap: 8px; align-content: start; }
.cmp__img img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-sm); }
.cmp__title { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
.cmp__card .chip { justify-self: start; }
#saved.is-loading { min-height: 200px; opacity: .5; }
.tray [data-tray-go].is-disabled { opacity: .5; }

/* plain pages */
.page__inner { padding-top: 24px; padding-bottom: 64px; max-width: 860px; }
.empty--page { padding: 80px 0; }
.favs__loading { height: 60px; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* about / contact / owners */
.about__text { align-self: center; }
.about__regs { display: grid; gap: 10px; margin: 8px 0 28px; }
.about__reg { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.45; text-decoration: none; }
.about__reg img { width: 64px; height: 64px; border-radius: 8px; flex: none; object-fit: cover; background: #fff; }
.about__reg > span { display: grid; gap: 2px; }
.about__reg b { font-size: 15px; color: var(--sea-900); }
.about__reg:hover { border-color: var(--sage-400); }
.adv--3 { grid-template-columns: 1fr; margin-top: 24px; }
.services__grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* the base .services__grid styles are for the dark card on the home page; About puts the list on sand */
.services__grid--wide li, .services__grid--wide li:nth-last-child(-n + 2) { color: var(--ink); border-bottom: 1px solid var(--line); }
.services__grid--wide .icon { color: var(--sage-600); }

/* extra services: renovation + car rental (parts/extra-services.php) */
.xsvc-head { margin: 48px 0 22px; }
.xsvc-head h3 { font: 600 30px/1.15 var(--font-display); color: var(--sea-900); margin-top: 10px; letter-spacing: -.01em; }
.xsvc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xsvc__item { display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; scroll-margin-top: calc(var(--header-h) + 24px); }
.xsvc__head { display: flex; gap: 16px; align-items: flex-start; }
.xsvc__head i { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--sage-50); color: var(--sage-700); display: grid; place-items: center; }
.xsvc__head i .icon { width: 24px; height: 24px; }
.xsvc__head h3 { font: 600 25px/1.15 var(--font-display); color: var(--sea-900); margin-bottom: 6px; letter-spacing: -.005em; }
.xsvc__head p { font-size: 15px; color: var(--ink-2); }
.xsvc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.xsvc__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.xsvc__list .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--sage-600); }
.xsvc__row small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.xsvc__row p { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.xsvc__row p .icon { flex: none; margin-top: 2px; color: var(--sage-600); }
.xsvc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xsvc__chips .chip { cursor: default; }
.xsvc__chips .chip .icon { color: var(--sage-600); }
.xsvc__note { display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sage-50); border: 1px solid var(--sage-100); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.xsvc__note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--sage-700); }
.xsvc__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.xsvc__phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--sea-800); }
.xsvc__phone .icon { color: #1faf54; }
.xsvc__phone--phone .icon { color: var(--sage-700); }
.xsvc__phone small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.xsvc__ig { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--sea-800); }
.xsvc__ig .icon { color: #d6336c; }
.xsvc__ig:hover, .xsvc__phone:hover { color: var(--sage-700); }
@media (max-width: 760px) {
  .xsvc { grid-template-columns: 1fr; }
  .xsvc__list { grid-template-columns: 1fr; }
  .xsvc__item { padding: 22px 20px; }
}
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 17px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; transition: transform .2s var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { margin: 10px 0 0; color: var(--ink-2); line-height: 1.7; }
.sell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.sell__points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.sell__points li { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.sell__points .icon { color: var(--sea-600); }
.sell__form, .contact__form { background: var(--white); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); color: var(--ink); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.contact__info { display: grid; gap: 14px; }
.contact__card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.contact__card > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.contact__card span, .contact__card small { color: var(--muted); font-size: 14px; }
.contact__card > i { width: 44px; height: 44px; border-radius: 50%; background: var(--sea-50); color: var(--sea-700); display: grid; place-items: center; flex: none; }
.contact__card--link:hover { border-color: var(--sage-400); }
.contact__phone { font-weight: 700; color: var(--sea-800); text-decoration: none; margin-top: 2px; width: fit-content; }
.contact__card .agent__ava { width: 56px; height: 56px; color: #fff; font-size: 26px; } /* beats `.contact__card span` (grey 14px) for the initial-letter avatar */
.agent__ava--photo { object-fit: cover; object-position: center top; background: var(--sand-100); }
.contact__langs { display: inline-flex; gap: 5px; margin-left: 9px; vertical-align: -1px; }
.flag { width: 20px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(23, 40, 45, .12); flex: none; }
.contact__card > .contact__acts { display: flex; gap: 8px; flex: none; } /* not the text column's flex: 1 */
.contact__phone { white-space: nowrap; }
.contact__channels { padding-top: 6px; }
.contact__channels small { display: block; margin-bottom: 8px; color: var(--muted); }
/* the messenger chips are white-on-dark by default (home CTA); on the light Contact page use the light variant */
.contact__channels .channel { background: #fff; border-color: var(--line-2); color: var(--ink); }
.contact__channels .channel:hover { background: #fff; border-color: var(--sea-700); color: var(--sea-700); }
@media (max-width: 900px) {
  .faq-wrap, .sell, .contact { grid-template-columns: 1fr; gap: 28px; }
  .sell__form, .contact__form { padding: 20px; }
}
@media (max-width: 560px) {
  .contact__card { gap: 12px; padding: 16px; align-items: flex-start; }
  .contact__card .agent__ava { width: 48px; height: 48px; font-size: 22px; }
  .contact__card > .contact__acts { flex-direction: column; }
  .contact__langs { display: flex; margin: 5px 0 3px; }
}

/* compare tray: on the property page centre it over the main column (50vw minus half of side column + gap),
   so it never covers the sticky booking card; keep the last footer row clear of it */
@media (min-width: 1121px) {
  body.vm-property .tray { left: calc(50vw - 232px); }
}
@media (min-width: 1121px) and (max-width: 1320px) {
  body.vm-property .tray { left: calc(50vw - 212px); }
}
body.has-tray .footer__bottom { padding-bottom: 104px; }
/* phone, property page: the bottom bar (price + "Book a viewing") and the compare tray stack at the bottom;
   lift the chat button and the toasts above whatever is showing instead of covering it */
@media (max-width: 760px) {
  body.has-mbar .toasts { bottom: 84px; }
  body.has-mbar.has-tray .float, body.has-mbar.has-tray .toasts { bottom: 150px; }
}

/* catalogue map: without its own stacking context Leaflet's panes (z-index 400+) paint over the
   sticky header, the filter bar, open dropdowns and modals (the property map already isolates) */
.cmap__canvas { position: relative; z-index: 0; isolation: isolate; }

/* the sticky booking column is taller than most laptop screens (step 2 of the form especially):
   let it scroll on its own so "Continue" / "Send" are always reachable; padding keeps the card shadow */
@media (min-width: 1121px) {
  .pside { max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding: 0 24px 24px; margin-inline: -24px; }
}

@media (max-width: 760px) {
  /* the favourites panel is wider than a phone next to the heart icon: pin it across the screen */
  .favs .dd__panel { position: fixed; top: calc(var(--header-h) + 6px); left: 12px; right: 12px; width: auto; max-width: none; }
  /* 3–4 compared properties pushed the Compare button off-screen: the thumbnails give way instead */
  .tray__items { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .tray__item { flex: none; }
}

@media print {
  .prose.is-folded { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .prose__more { display: none !important; }
}

/* the collapsed messenger links are invisible: keep them out of the Tab order as well */
.float__item { visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .25s; }
.float.is-open .float__item { visibility: visible; }

/* translated pages (GTranslate) make labels much longer: "Book a viewing" in German is
   "Vereinbaren Sie einen Besichtigungstermin". The price must never give way; the button wraps. */
@media (max-width: 760px) {
  .mbar > div { flex: none; }
  .mbar b { white-space: nowrap; }
  .mbar .btn { flex: 0 1 auto; min-width: 0; height: auto; min-height: 42px; padding: 6px 16px; white-space: normal; text-align: center; line-height: 1.2; }
  .phead__actions { flex-wrap: wrap; }
  #print-btn { display: none; } /* nobody prints from a phone; keeps Save / Compare / Share on one row, also in German */
}

/* closed dropdown panels are only invisible, they still take room: at tablet widths the filter bar
   wraps and the City / area panel ran 160px past the right edge, so the whole catalogue scrolled
   sideways. The page never scrolls horizontally; app.js also flips a panel that would not fit. */
body { overflow-x: clip; }

/* 320px phones: "San Miguel de Salinas" on one line widened the location list and the whole
   left column with it; the value may wrap, and the column may shrink below its content */
.pmain { min-width: 0; }
.dist li { grid-template-columns: 44px minmax(0, 1fr) auto; }
@media (max-width: 760px) {
  .dist strong { white-space: normal; text-align: right; }
  .dd__panel { min-width: min(280px, calc(100vw - 64px)); }
}