/*
Theme Name: BenidormHomes
Text Domain: benidormhomes
Version: 0.9.0
Description: Lightweight showcase theme for BenidormHomes rentals — Editorial Luxury design system.
*/

/* ============================================================
   Design tokens — Editorial Luxury (warm cream / espresso / sage)
   ============================================================ */
:root {
  --bg: #FDFBF7;
  --bg-2: #F6F1E7;
  --surface: #FFFFFF;
  --surface-2: #FBF8F2;
  --ink: #1C1813;
  --ink-soft: #3A342B;
  --muted: #75695A;
  --line: rgba(28, 24, 19, 0.09);
  --line-2: rgba(28, 24, 19, 0.14);
  --sage: #3F5147;
  --sage-soft: #E7ECE6;
  --terra: #B0552F;
  --terra-soft: #F3E4DA;
  --navy: #1C3F6E;

  --r: 26px;
  --r-in: 19px;
  --r-sm: 14px;
  --pill: 999px;

  --shadow: 0 34px 64px -34px rgba(28, 24, 19, 0.30), 0 10px 24px -18px rgba(28, 24, 19, 0.22);
  --shadow-sm: 0 16px 34px -22px rgba(28, 24, 19, 0.26);
  --hi: inset 0 1px 1px rgba(255, 255, 255, 0.7);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140F;
    --bg-2: #1F1B15;
    --surface: #211C16;
    --surface-2: #262019;
    --ink: #F4EEE3;
    --ink-soft: #E4DCCD;
    --muted: #ABA08E;
    --line: rgba(244, 238, 227, 0.10);
    --line-2: rgba(244, 238, 227, 0.16);
    --navy: #6FA0DD;
    --sage: #A9BFA6;
    --sage-soft: rgba(169, 191, 166, 0.14);
    --terra: #E28A5E;
    --terra-soft: rgba(226, 138, 94, 0.16);
    --shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.7), 0 12px 26px -18px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 18px 36px -22px rgba(0, 0, 0, 0.6);
    --hi: inset 0 1px 1px rgba(255, 255, 255, 0.06);
  }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(60% 55% at 12% -8%, rgba(63, 81, 71, 0.10), transparent 60%),
    radial-gradient(50% 50% at 100% 0%, rgba(176, 85, 47, 0.09), transparent 55%),
    radial-gradient(70% 60% at 50% 120%, rgba(154, 123, 79, 0.08), transparent 60%);
  background-attachment: fixed;
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* film-grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; height: auto; display: block; }
/* <picture> is a transparent wrapper around <img> (WebP + JPEG fallback):
   collapse its box so the inner <img> lays out as a direct child (width:100%,
   absolute hero/contact backgrounds and `.parent img` rules all keep working). */
picture { display: contents; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
p { margin: 0 0 1em; }

::selection { background: var(--sage); color: #fff; }

.bh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--pill);
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bh-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   Header — floating glass pill nav
   ============================================================ */
.bh-top {
  position: sticky;
  top: clamp(12px, 2vw, 22px);
  z-index: 100;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: clamp(12px, 2vw, 22px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 24px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.bh-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color .5s var(--ease);
}
.bh-brand em { font-style: normal; color: var(--terra); transition: color .5s var(--ease); }
.bh-brand__mark { width: auto; height: 38px; color: var(--navy); flex: 0 0 auto; transition: color .5s var(--ease); }
.bh-top__nav ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.bh-top__nav ul a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.bh-top__nav ul a:hover {
  color: var(--ink);
  background: var(--bg-2);
  border-color: var(--line);
}
.bh-top__nav { flex: 1; display: flex; justify-content: center; }

/* ------------------------------------------------------------
   Hamburger + mobile sheet
   ------------------------------------------------------------ */
.bh-burger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .5s var(--ease);
}
/* Lucide menu <-> x, crossfaded in place. */
.bh-burger__open, .bh-burger__close {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.bh-burger__close { opacity: 0; transform: rotate(-90deg); }
.bh-burger[aria-expanded="true"] .bh-burger__open { opacity: 0; transform: rotate(90deg); }
.bh-burger[aria-expanded="true"] .bh-burger__close { opacity: 1; transform: none; }

/* Sits under the bar (z-index 100) so the brand and the close button stay on top. */
.bh-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 8vh, 64px);
  padding: calc(var(--bh-top-h, 84px) + clamp(24px, 5vh, 44px)) var(--gutter)
           calc(clamp(24px, 4vh, 40px) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.bh-menu.is-open { opacity: 1; visibility: visible; }
.bh-menu__nav { display: flex; flex-direction: column; }
/* Same face/size/weight as the bar nav — just a taller tap target. */
.bh-menu__nav a {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bh-menu.is-open .bh-menu__nav a {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 60ms);
}
.bh-menu__foot { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 26px); }
.bh-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bh-menu__langs a {
  display: inline-flex;
  padding: 10px 17px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.bh-menu__langs .is-current a { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.bh-menu__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-menu__cta .bh-wa, .bh-menu__cta .bh-tg { margin-top: 0; flex: 1 1 44%; justify-content: center; }

/* Scroll lock while the sheet is open. */
html.bh-locked, body.bh-locked { overflow: hidden; }

/* The consent banner sits at z-index 300 and would cover the sheet's languages
   and contact buttons. Slide it away while the sheet is open — it comes back
   untouched on close, still waiting for a choice. */
body.bh-locked .bh-consent { transform: translateY(140%); opacity: 0; pointer-events: none; }

@media (max-width: 880px) {
  .bh-top__nav { display: none; }
  /* Languages move into the sheet: the bar dropdown is hover-driven, which needs
     a double tap on touch. */
  .bh-lang { display: none; }
  .bh-burger { display: inline-flex; }
  .bh-menu { display: flex; }

  /* The scroll lock removes the scrollport that position:sticky needs, so the bar
     would drop back to its place at the top of the document — off screen on a
     scrolled page. Pin it where it already sits for as long as the sheet is open. */
  body.bh-locked .bh-top {
    position: fixed;
    top: clamp(12px, 2vw, 22px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }
  /* Pinning takes the bar out of the flow. Everywhere except the front page (whose
     negative margin already lifted it) that would shrink the document by the bar's
     height, and a shrinking document clamps scrollY — the page would come back
     scrolled to a different place. Pad the body by the same height instead. */
  body.bh-locked:not(:has(.bh-top--overlay)) { padding-top: var(--bh-top-h, 84px); }
}
.bh-top--overlay .bh-burger { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.bh-top--overlay .bh-burger:hover { background: rgba(255, 255, 255, 0.12); }

/* Language dropdown */
.bh-lang { position: relative; }
.bh-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.bh-lang__btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.bh-lang:hover .bh-lang__btn, .bh-lang:focus-within .bh-lang__btn { background: var(--bg-2); border-color: var(--line-2); }
.bh-lang:hover .bh-lang__btn svg, .bh-lang:focus-within .bh-lang__btn svg { transform: rotate(180deg); }
.bh-lang__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow), var(--hi);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  z-index: 110;
}
.bh-lang:hover .bh-lang__list, .bh-lang:focus-within .bh-lang__list {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.bh-lang__list a {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.bh-lang__list a:hover { background: var(--bg-2); color: var(--ink); }
.bh-lang__list .is-current a { background: var(--sage-soft); color: var(--sage); }

/* Overlay variant — floats on the photo hero (front page).
   Stays sticky like on every other page; the negative bottom margin lifts it out
   of the flow so the hero still starts at the very top of the viewport.
   --bh-top-h is published by topbar.js; the fallback is the desktop height. */
.bh-top--overlay {
  margin-bottom: calc(-1 * var(--bh-top-h, 84px));
  background: rgba(22, 17, 12, 0.38);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.bh-top--overlay .bh-brand { color: #fff; }
.bh-top--overlay .bh-brand em { color: #F4CE9B; }
.bh-top--overlay .bh-brand__mark { color: #fff; }
.bh-top--overlay .bh-top__nav ul a { color: rgba(255, 255, 255, 0.78); }
.bh-top--overlay .bh-top__nav ul a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}
.bh-top--overlay .bh-lang__btn { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.bh-top--overlay .bh-lang:hover .bh-lang__btn,
.bh-top--overlay .bh-lang:focus-within .bh-lang__btn { background: rgba(255, 255, 255, 0.12); }

/* Past the hero — or over the open mobile sheet, which is cream — the overlay bar
   returns to the light glass pill used everywhere else. */
.bh-top--overlay:is(.is-stuck, .is-menu-open) {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow-sm), var(--hi);
}
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-brand { color: var(--ink); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-brand em { color: var(--terra); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-brand__mark { color: var(--navy); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-top__nav ul a { color: var(--muted); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-top__nav ul a:hover {
  color: var(--ink);
  background: var(--bg-2);
  border-color: var(--line);
}
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-lang__btn { color: var(--ink); border-color: var(--line-2); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-lang:hover .bh-lang__btn,
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-lang:focus-within .bh-lang__btn { background: var(--bg-2); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-burger { color: var(--ink); border-color: var(--line-2); }

/* ============================================================
   Layout containers
   ============================================================ */
.bh-home, .bh-single, .bh-archive {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 110px) 0 clamp(60px, 10vw, 130px);
}

/* ============================================================
   Hero
   ============================================================ */
.bh-hero {
  margin-bottom: clamp(40px, 6vw, 84px);
}
.bh-hero h1 {
  font-size: clamp(2.9rem, 7.5vw, 5.4rem);
  margin: 22px 0 0;
  max-width: 16ch;
}
.bh-hero h1 em, .bh-hero h1 .accent { font-style: italic; color: var(--terra); }
.bh-hero p {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--muted);
}

/* ============================================================
   Grid + Card (Double-Bezel)
   ============================================================ */
.bh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.bh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  will-change: transform;
}
.bh-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.bh-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-in);
  background: var(--bg-2);
}
.bh-card__media .bh-slider__track { height: 100%; }
.bh-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bh-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 2rem;
  opacity: .5;
}
.bh-card__body {
  padding: 18px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bh-card__sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.bh-card__title {
  font-size: 1.42rem;
  margin: 2px 0 0;
}
.bh-card__meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Цена продажи стоит в подвале карточки на месте «от € / ночь» у аренды и носит
   ту же плашку — переключаясь между разделами, глаз ищет сумму в одном месте. */
.bh-from,
.bh-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 15px;
  border-radius: var(--pill);
  background: var(--terra-soft);
  color: var(--terra);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.bh-card__go {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 16px;
  transition: transform .6s var(--ease), background .4s var(--ease);
}
.bh-card:hover .bh-card__go {
  transform: translate(3px, -3px) scale(1.05);
  background: var(--sage);
}

/* ============================================================
   Single property
   ============================================================ */
/* Both listing pages run to the header bar's own measure (--maxw), so the
   content and the bar above it share one edge. At 1080 they visibly did not. */
.bh-single { max-width: min(var(--maxw), calc(100% - 2 * var(--gutter))); }

/* Sale page vertical rhythm at the top, in the numbers the owner asked for:
   30px from the header bar to the breadcrumbs, 35px from there to the title.
   The page inherits a 110px top padding sized for pages that open on a hero;
   this one opens on a trail of small text and did not need the room.
   The 35px lives on the breadcrumbs' margin, and the h1's own top margin is
   zeroed, because adjacent margins collapse to the larger of the two — leaving
   both in place would have given 18px, not 51px, and reading the CSS would not
   have shown it. */
.bh-single--sale { padding-top: 30px; }
.bh-single--sale .bh-crumbs { margin-bottom: 35px; }
.bh-single__head--wide h1 { margin-top: 0; }
.bh-single__head { max-width: none; margin-bottom: 30px; }
.bh-single__head h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  margin: 18px 0 0;
  text-wrap: balance;
}
/* Sale page: the head sits OUTSIDE the two-column grid, so the title runs the
   full width of the page instead of the 1.6fr text column, and can be bigger
   for it. */
.bh-single__head--wide {
  margin-bottom: clamp(30px, 4vw, 46px);
}
.bh-single__head--wide h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  /* NOT `balance`. Balancing evens the line lengths, which on a wide title
     means deliberately leaving space at the right end of the first line —
     measured 762 + 664 where plain wrapping gives 1141 + 285. On a full-width
     heading that reads as a layout bug, which is exactly how it was reported.
     `pretty` keeps the useful half of the feature: no one-word last line. */
  text-wrap: pretty;
}

/* Breadcrumbs — a listing is entered from a search result or a forwarded link,
   so the page needs a way back up that is not the browser button. */
.bh-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .92rem;
}
.bh-crumbs a { color: var(--muted); transition: color .3s var(--ease); }
.bh-crumbs a:hover { color: var(--sage); }
.bh-crumbs__sep { display: inline-grid; place-items: center; opacity: .45; }
.bh-crumbs__sep .bh-icon { width: 14px; height: 14px; }
.bh-crumbs__cur {
  color: var(--ink-soft);
  font-weight: 600;
  /* A listing title is long; it may not push the trail onto three lines. */
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bh-complex {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 500;
}

/* ============================================================
   Property page gallery — stage + thumbnails + lightbox
   ============================================================ */
.bh-pdp-gallery {
  margin: 8px 0 clamp(36px, 5vw, 60px);
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
}
.bh-pdp-gallery__stage { margin: 0; position: relative; }
.bh-pdp-gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-in);
  overflow: hidden;
  position: relative;
}
.bh-pdp-gallery__open img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.bh-pdp-gallery__open:hover img { transform: scale(1.03); }
.bh-pdp-gallery__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(14, 11, 8, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}
.bh-pdp-gallery__zoom .bh-icon { width: 20px; height: 20px; }
/* The arrows float ON the strip, not beside it. As flex siblings they took
   48px off the strip's width and left it inset from both edges of the gallery
   while the stage above ran the full width — measured 609px against 657px. */
.bh-pdp-gallery__thumbwrap {
  position: relative;
  margin-top: 10px;
  display: block;
}
.bh-pdp-gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}
.bh-pdp-gallery__thumbs::-webkit-scrollbar { display: none; }
.bh-pdp-gallery__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-2);
  scroll-snap-align: start;
  transition: border-color .35s var(--ease), opacity .35s var(--ease);
  opacity: .7;
}
.bh-pdp-gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bh-pdp-gallery__thumb:hover { opacity: 1; }
/* Which photo is on the stage has to be obvious at a glance — a border colour
   alone was too quiet next to ten similar thumbnails, so the ring is doubled
   and everything else is dimmed a little further. */
.bh-pdp-gallery__thumb.is-active {
  border-color: var(--sage);
  opacity: 1;
  box-shadow: 0 0 0 1px var(--sage);
}
.bh-pdp-gallery__data { display: none; }

/* How many photos there are, stated before the visitor starts clicking. It is
   pinned to the bottom-left corner OF THE PHOTO; without these rules it falls
   into the flow and the camera glyph, having no size of its own, stretches to
   the full width of the column — which is what happened when this block was cut
   away with the stage arrows it happened to sit next to. */
.bh-pdp-gallery__count {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--pill);
  background: rgba(10, 8, 6, 0.62);
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.bh-pdp-gallery__count .bh-icon { width: 16px; height: 16px; }

/* ---- Column variant (sale page): the same stage-over-strip layout, living in
   the left column of the two-column grid instead of across the page. Nothing to
   restyle — only `sizes` differs, and that is the template's business. A 'hero'
   variant with a vertical rail beside the photo lived here; the owner asked for
   the rental treatment instead, so it is gone rather than kept as dead CSS. */

/* Thumbnail paging arrows (shown only when the strip overflows), laid over the
   thumbnails at either end so the strip keeps the full width of the gallery. */
.bh-pdp-gallery__tnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm), var(--hi);
  z-index: 2;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bh-pdp-gallery__tnav--prev { left: 6px; }
.bh-pdp-gallery__tnav--next { right: 6px; }
.bh-pdp-gallery.has-tnav .bh-pdp-gallery__tnav { display: grid; }
.bh-pdp-gallery__tnav:hover { transform: translateY(-50%) scale(1.06); }
/* Now that the arrows sit ON the thumbnails, a dimmed dead one just covers a
   photo for nothing — at rest that is the left arrow, over the first thumb. It
   fades out instead, and comes back the moment the strip can move that way. */
.bh-pdp-gallery__tnav:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transform: translateY(-50%);
}
.bh-pdp-gallery__tnav .bh-icon { width: 20px; height: 20px; }

.bh-pdp-video { margin-top: clamp(28px, 4vw, 44px); }
.bh-pdp-video video, .bh-pdp-video iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--r-in);
}

/* Lightbox */
.bh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(12px, 4vw, 48px);
  background: rgba(10, 8, 6, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bh-lightbox.is-open { display: flex; }
.bh-lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bh-lightbox__fig img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.bh-lightbox__count { color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.bh-lightbox__close, .bh-lightbox__nav {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.bh-lightbox__close svg, .bh-lightbox__nav svg { width: 24px; height: 24px; }
.bh-lightbox__close:hover, .bh-lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.bh-lightbox__close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
@media (max-width: 640px) {
  .bh-lightbox__nav { position: absolute; bottom: 20px; }
  .bh-lightbox__prev { left: 30%; }
  .bh-lightbox__next { right: 30%; }
}

/* Specs strip */
.bh-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.bh-spec {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  box-shadow: var(--hi);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.bh-spec__ic { display: grid; place-items: center; color: var(--sage); }
.bh-spec__ic .bh-icon { width: 20px; height: 20px; }
.bh-rates__note { color: var(--muted); margin: -6px 0 18px; max-width: 60ch; }

.bh-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}
@media (min-width: 940px) {
  .bh-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .bh-side { position: sticky; top: 100px; }
}
/* A grid track never shrinks below its content's minimum, and the gallery's
   thumbnail strip has a big one: five thumbs at minmax(150px, 1fr) = 810px.
   With the gallery inside the left column that pushed the split to 816/288
   instead of 679/425 — measured — and squeezed the contact form. min-width: 0
   lets the track be the 1.6fr it says it is; the strip then scrolls, which is
   what its arrows are for. */
.bh-layout > * { min-width: 0; }

/* .bh-layout--sale carries no rules of its own: the sale page uses the same
   two columns as a rental, with the photos inside the left one. The modifier
   stays as the hook for anything sale-specific, and templates and checks name
   it. DOM order is the phone order on both. */

.bh-body {
  font-size: 1.14rem;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 62ch;
  /* Both listing pages. Justified text needs hyphenation or it tears holes
     between words on a column this narrow — and the browser only hyphenates
     when it knows the language, which <html lang> gives it on all four. */
  text-align: justify;
  hyphens: auto;
}
.bh-main h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: clamp(34px, 5vw, 52px) 0 20px;
}

/* Price table */
.bh-prices {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bh-prices th, .bh-prices td {
  text-align: left;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}
.bh-prices thead th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
.bh-prices tbody tr:last-child td { border-bottom: 0; }
.bh-prices tbody tr { transition: background .35s var(--ease); }
.bh-prices tbody tr:hover { background: var(--surface-2); }
/* Every column after the period is a rate: per night, and per month for winter
   and other long stays. Only the first cell is prose. */
.bh-prices th:not(:first-child) { text-align: right; }
.bh-prices td:not(:first-child) {
  font-weight: 700;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .bh-prices th, .bh-prices td { padding: 13px 12px; }
  .bh-prices thead th { font-size: 10px; letter-spacing: 0.08em; }
}

/* Good to know — chips */
.bh-attrs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bh-attrs li {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--hi);
}
.bh-attrs li strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

/* Good to know — checkmark list (shown high on the page) */
.bh-goodtoknow { margin: 0 0 clamp(30px, 4vw, 44px); }
.bh-goodtoknow h2 { margin-top: 0 !important; }
.bh-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px 26px;
}
.bh-checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.02rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.bh-checklist .bh-icon {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  color: var(--sage);
  stroke-width: 2.4;
}

/* Neighbourhood map */
/* The section below starts with .bh-rates__note, whose -6px top margin is meant
   for sitting under a table; against the bottom edge of the map it left a 4px
   gap and the text read as part of the map's frame. */
.bh-locate { margin: clamp(34px, 5vw, 52px) 0 clamp(28px, 4vw, 44px); }
.bh-map {
  height: clamp(280px, 42vw, 420px);
  border-radius: var(--r-in);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm), var(--hi);
  background: var(--surface-2);
  z-index: 0;
}
.bh-map .leaflet-container { font-family: var(--sans); border-radius: var(--r-in); }
.bh-map .leaflet-control-zoom a {
  color: var(--ink);
  border-radius: 8px !important;
}

/* ============================================================
   Not found
   ============================================================ */
.bh-404 { padding: clamp(48px, 9vw, 110px) 0; }
.bh-404__inner { max-width: 56ch; }
.bh-404 h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 16px 0 0;
  text-wrap: balance;
}
.bh-404__note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}
.bh-404__actions {
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.bh-404__link { color: var(--sage); font-weight: 600; }

/* ============================================================
   Sale price block — two rows at the top of the left column
   ============================================================ */
/* Figures left, labels right:
     365 000 €        For sale
     6 083 € / m²   📍 Altea
   The price used to be a <strong> in a paragraph with no CSS of its own and was
   simply missed; it is the single most important number on the page. Key
   figures are not repeated — the specs row follows, and the reference lives at
   the top of the contact card, which is where it gets used. */
.bh-sale-card { margin: 0 0 clamp(24px, 3vw, 34px); }
.bh-sale-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.bh-sale-card__row--sub {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.bh-sale-card__price {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.05;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  /* The narrow no-break space in "365 000 €" must never wrap the amount. */
  text-wrap: nowrap;
}
.bh-sale-card__badge {
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--terra-soft);
  color: var(--terra);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bh-sale-card__per-m2 {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  font-weight: 500;
}
.bh-sale-card__place {
  /* Alone on its row (a listing priced on request has no €/m²) it still keeps
     to the right, where the eye now expects the labels. */
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-weight: 600;
}
.bh-sale-card__place .bh-icon { width: 16px; height: 16px; color: var(--terra); }

/* Reference — a buyer quotes this back in a message, so it leads the contact
   card: "#SA260811" and a copy icon, top right, above the heading. Quiet: it is
   an identifier, not an argument for buying. */
.bh-cta__ref {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.bh-cta__ref-code {
  font-weight: 400;
  font-size: .95rem;
  color: var(--muted);
  letter-spacing: .02em;
  /* A reference is a code: read it character by character, not as a word. */
  font-variant-numeric: tabular-nums;
}
.bh-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bh-copy:hover { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.bh-copy:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.bh-copy.is-copied { background: var(--sage); border-color: var(--sage); color: #fff; }
.bh-copy .bh-icon { width: 15px; height: 15px; }

/* Icon-only variant: the code is spelled out right beside it, so a "Copy"
   label would only repeat what the icon already says. The tick IS the
   feedback here — there is no text to swap — so the two glyphs are stacked
   and swapped by the same .is-copied class. */
.bh-copy--icon {
  padding: 6px;
  display: inline-grid;
  place-items: center;
  /* Beside the reference it is a quiet affordance, not a button competing with
     the form below: no border or fill until it is hovered. */
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.bh-copy--icon > span { grid-area: 1 / 1; display: inline-flex; }
.bh-copy--icon .bh-copy__ok { opacity: 0; transform: scale(.7); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.bh-copy--icon .bh-copy__ic { opacity: 1; transition: opacity .2s var(--ease); }
.bh-copy--icon.is-copied .bh-copy__ic { opacity: 0; }
.bh-copy--icon.is-copied .bh-copy__ok { opacity: 1; transform: none; }
.bh-copy--icon .bh-icon { width: 17px; height: 17px; }

/* ============================================================
   CTA card (Double-Bezel)
   ============================================================ */
.bh-cta {
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow), var(--hi);
}
.bh-cta__inner {
  background: var(--surface);
  border-radius: var(--r-in);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--hi);
}
.bh-cta h2 { font-size: 1.5rem; margin: 0 0 6px; }
.bh-cta__note { color: var(--muted); font-size: .95rem; margin: 0 0 20px; }
.bh-ok {
  background: var(--sage-soft);
  color: var(--sage);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  margin: 0 0 16px;
}
.bh-form { display: grid; gap: 12px; }
.bh-form .bh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bh-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.bh-form input {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  width: 100%;
}
.bh-form input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.bh-form input:focus {
  outline: none;
  border-color: var(--sage);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--sage-soft);
}
.bh-form button {
  margin-top: 6px;
  position: relative;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 56px;
  border: 0;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.bh-form button:hover { background: var(--sage); }
.bh-form button:active { transform: scale(0.985); }
.bh-form button .bh-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 17px;
  transition: transform .55s var(--ease);
}
.bh-form button:hover .bh-arrow { transform: translateY(-50%) translate(3px, -3px) scale(1.06); }

/* Make an offer — the sale card's lead magnet. The amount field is the reason
   the form exists, so it is larger than the two that follow it and carries the
   only visible label; name and email stay on their placeholders, as in the
   rental form. */
.bh-offer__label {
  display: block;
  margin-bottom: -4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Same height as the name and email fields below it (49px measured): weight and
   figure spacing carry the emphasis instead of size, which was making the field
   56px and the stack look misaligned. */
.bh-form .bh-offer__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bh-form .bh-offer__amount::placeholder { font-weight: 500; }

.bh-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 13px 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.bh-wa::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2fae5f;
  box-shadow: 0 0 0 4px rgba(47, 174, 95, 0.18);
}
.bh-wa:hover { background: var(--surface); border-color: var(--sage); transform: translateY(-2px); }

.bh-tg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 13px 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.bh-tg::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2ea6da;
  box-shadow: 0 0 0 4px rgba(46, 166, 218, 0.18);
}
.bh-tg:hover { background: var(--surface); border-color: var(--sage); transform: translateY(-2px); }

/* Property booking CTA: WhatsApp + Telegram span the full width, text centred
   (matches the Request-dates button). Scoped to .bh-cta so the hero contact
   links are untouched. */
.bh-cta .bh-wa,
.bh-cta .bh-tg { width: 100%; justify-content: center; }

/* ============================================================
   Footer
   ============================================================ */
.bh-foot {
  border-top: 1px solid var(--line);
  /* Same value as the padding below the line, so the gap above the footer
     line matches the gap from the line to the footer content. */
  margin-top: clamp(40px, 6vw, 70px);
  padding: clamp(40px, 6vw, 70px) var(--gutter);
  text-align: center;
}
.bh-foot p {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.5vw, 2.3rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
.bh-grid > .bh-card:nth-child(2) { transition-delay: .06s; }
.bh-grid > .bh-card:nth-child(3) { transition-delay: .12s; }
.bh-grid > .bh-card:nth-child(4) { transition-delay: .18s; }
.bh-grid > .bh-card:nth-child(5) { transition-delay: .24s; }
.bh-grid > .bh-card:nth-child(6) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .bh-top { padding: 10px 10px 10px 18px; }
  .bh-top > a:first-child { font-size: 18px; }
  .bh-gallery { grid-template-columns: 1fr; }
  .bh-gallery > :first-child { aspect-ratio: 4 / 3; }
  .bh-form .bh-row { grid-template-columns: 1fr; }
  .bh-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Landing sections (idea / steps / features / contact)
   ============================================================ */
.bh-home > * + * { margin-top: clamp(64px, 11vw, 140px); }
.bh-hero { margin-bottom: 0; }

.bh-section__title {
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  margin: 16px 0 clamp(28px, 4vw, 44px);
  max-width: 40ch;
  text-wrap: balance;
}

.bh-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.bh-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 24px;
  border-radius: var(--pill);
  background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: 15px;
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.bh-btn:hover { background: var(--sage); }
.bh-btn:active { transform: scale(.985); }
.bh-btn .bh-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); font-size: 17px;
  transition: transform .55s var(--ease);
}
.bh-btn:hover .bh-arrow { transform: translateY(3px) scale(1.06); }

/* Idea / about split */
.bh-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
.bh-split h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.bh-split p { color: var(--muted); font-size: 1.1rem; margin: 0 0 1em; }
.bh-split p:last-child { margin-bottom: 0; }
@media (min-width: 820px) {
  .bh-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
}

/* Steps */
.bh-steps { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 760px) { .bh-steps { grid-template-columns: repeat(3, 1fr); } }
.bh-step {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm), var(--hi);
}
.bh-step__n { font-family: var(--serif); font-style: italic; font-size: 2.4rem; color: var(--terra); display: block; margin-bottom: 10px; }
.bh-step h3 { font-size: 1.3rem; margin-bottom: 8px; }
.bh-step p { color: var(--muted); margin: 0; }

/* Features */
.bh-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.bh-feature { padding: clamp(22px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hi); }
.bh-feature h3 { font-size: 1.2rem; margin-bottom: 8px; }
.bh-feature p { color: var(--muted); margin: 0; }

/* Contact */
.bh-contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px); }
@media (min-width: 860px) { .bh-contact__grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.bh-contact__aside p { font-size: 1.15rem; color: var(--ink-soft); max-width: 34ch; }
.bh-contact__links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bh-mail {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--pill);
  border: 1px solid var(--line-2); font-weight: 600;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.bh-mail:hover { background: var(--surface); border-color: var(--sage); transform: translateY(-2px); }
.bh-form textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 15px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  width: 100%; resize: vertical; min-height: 110px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.bh-form textarea:focus { outline: none; border-color: var(--sage); background: var(--surface); box-shadow: 0 0 0 4px var(--sage-soft); }
.bh-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }

/* Footer (expanded) */
.bh-foot { text-align: left; }
.bh-foot__inner {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: end; justify-content: space-between;
}
.bh-foot__brand { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin: 0; }
.bh-foot__tag { color: var(--muted); margin: 8px 0 0; }
.bh-foot__links { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-foot__links a {
  padding: 10px 18px; border-radius: var(--pill);
  border: 1px solid var(--line-2); font-weight: 600; font-size: 14px;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.bh-foot__links a:hover { background: var(--surface); border-color: var(--sage); }
.bh-foot p.bh-foot__credit {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 34px auto 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  opacity: .8;
}
.bh-foot__legal {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 24px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13px;
}
.bh-foot__legal a { color: var(--muted); transition: color .3s var(--ease); }
.bh-foot__legal a:hover { color: var(--ink); }

/* Consent checkbox inside the enquiry form (overrides .bh-form label) */
.bh-form label.bh-consent-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
}
.bh-consent-field input {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--sage);
}
.bh-consent-field a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Cookie consent banner (floating glass card, bottom-left)
   ============================================================ */
.bh-consent {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 300;
  width: min(420px, calc(100vw - 24px));
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.bh-consent.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.bh-consent__inner {
  padding: 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(28,24,19,.35)), var(--hi);
}
.bh-consent__text { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.bh-consent__text a { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; }
.bh-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-consent__btn {
  flex: 1 1 auto;
  padding: 11px 18px;
  border-radius: var(--pill);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.bh-consent__btn:active { transform: scale(.97); }
.bh-consent__btn--solid { border: 0; background: var(--ink); color: var(--bg); }
.bh-consent__btn--solid:hover { background: var(--sage); }
.bh-consent__btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-soft); }
.bh-consent__btn--ghost:hover { border-color: var(--sage); color: var(--ink); }

/* ============================================================
   Photo hero — Benidorm bay (full-bleed, nav floats on top)
   ============================================================ */
body.home .bh-home { padding-top: 0; padding-bottom: 0; }
.bh-hero--photo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.bh-hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 clamp(34px, 6vw, 60px) clamp(34px, 6vw, 60px);
  min-height: clamp(600px, 96svh, 920px);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.bh-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.bh-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s var(--ease);
  will-change: opacity, transform;
}
.bh-hero__slide.is-active {
  opacity: 1;
  /* Slow Ken Burns drift while the slide is on screen. */
  animation: bh-kenburns 8s ease-out forwards;
}
@keyframes bh-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bh-hero__slide {
    transition: none;
    transform: none;
  }
  .bh-hero__slide.is-active { animation: none; transform: none; }
}
.bh-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two layers: a vertical wash for overall depth, plus a left-side scrim so
     the left-aligned white text keeps contrast on any slide (including the
     lighter-topped dusk shots) without darkening the whole image. */
  background:
    linear-gradient(to top, rgba(14, 11, 8, 0.62) 0%, rgba(14, 11, 8, 0.26) 46%, rgba(14, 11, 8, 0.06) 76%, rgba(14, 11, 8, 0.22) 100%),
    linear-gradient(105deg, rgba(14, 11, 8, 0.36) 0%, rgba(14, 11, 8, 0.12) 48%, rgba(14, 11, 8, 0) 80%);
}
.bh-hero__content {
  position: relative;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  /* Top padding equals the floating nav zone, so the text block sits
     centred between the nav and the bottom edge. */
  padding: 104px 0 16px;
  color: #fff;
}
.bh-hero__content > p { max-width: 52ch; }
.bh-hero--photo h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.bh-hero--photo h1 em { color: #F4CE9B; }
.bh-hero--photo p { color: rgba(255, 255, 255, 0.85); }
.bh-eyebrow--glass {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.bh-hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
}
.bh-hero__facts li {
  padding: 8px 15px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bh-btn--light { background: #fff; color: #1C1813; }
.bh-btn--light .bh-arrow { background: rgba(28, 24, 19, 0.08); }
.bh-btn--light:hover { background: var(--sage); color: #fff; }
.bh-btn--light:hover .bh-arrow { background: rgba(255, 255, 255, 0.16); }
.bh-wa--onphoto { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.bh-wa--onphoto:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }
.bh-mail--onphoto { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.bh-mail--onphoto:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   Split with photo (idea / about)
   ============================================================ */
.bh-split--media { align-items: center; }
.bh-split--media .bh-split__text h2 { margin: 16px 0 18px; }
.bh-split__media {
  margin: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
}
.bh-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-in);
}
@media (min-width: 820px) {
  .bh-split--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .bh-split--rev .bh-split__text { order: 2; }
  .bh-split--rev .bh-split__media { order: 1; transform: rotate(-1.2deg); }
  .bh-split--media:not(.bh-split--rev) .bh-split__media { transform: rotate(1.2deg); }
}

/* ============================================================
   Property showcase — large full-width cards
   ============================================================ */
.bh-shows { display: grid; gap: clamp(24px, 3.4vw, 44px); }
.bh-show {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.bh-show:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.bh-show__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-in);
  background: var(--bg-2);
}
.bh-show__media .bh-slider__track { height: 100%; }
.bh-slider__slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.bh-show__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bh-show__body {
  padding: clamp(20px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.bh-show__title { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.bh-show__title a { transition: color .4s var(--ease); }
.bh-show__title a:hover { color: var(--terra); }
.bh-show__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.bh-show__chips li {
  padding: 7px 13px;
  border-radius: var(--pill);
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 12.5px;
  font-weight: 600;
}
.bh-show__excerpt { color: var(--muted); margin: 0; max-width: 56ch; }
.bh-show__highlights {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  width: 100%;
}
.bh-show__highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  color: var(--ink-soft);
}
.bh-show__highlights .bh-icon {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--sage);
  stroke-width: 2.4;
}
.bh-show__more span { color: var(--muted); font-weight: 600; font-size: .92rem; padding-left: 28px; }
.bh-show__foot {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 16px 20px; margin-top: auto; padding-top: 8px;
}
.bh-from--lg { padding: 11px 20px; font-size: 1.05rem; }
.bh-from--lg small { font-size: .82em; }
.bh-from small { font-weight: 600; opacity: .75; }
@media (min-width: 920px) {
  .bh-show { grid-template-columns: 1.05fr 1fr; }
  .bh-show:nth-child(even) .bh-show__media { order: 2; }
}

/* ============================================================
   Shared slider primitives (places, property photos)
   ============================================================ */
.bh-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}
.bh-slider__track::-webkit-scrollbar { display: none; }
.bh-slider__track.is-dragging,
.bh-slider__track.is-animating {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.bh-slider__track.is-dragging { cursor: grabbing; user-select: none; }
.bh-slider__track.is-dragging img { pointer-events: none; }
.bh-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(14, 11, 8, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.bh-slider__btn .bh-icon { width: 22px; height: 22px; }
.bh-slider__btn:hover { background: rgba(14, 11, 8, 0.68); }
.bh-slider__btn:active { transform: translateY(-50%) scale(.94); }
.bh-slider__btn--prev { left: 14px; }
.bh-slider__btn--next { right: 14px; }
.bh-slider--single .bh-slider__btn,
.bh-slider--single .bh-slider__count,
.bh-slider--single .bh-slider__dots { display: none; }
.bh-slider__count {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: rgba(14, 11, 8, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.bh-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.bh-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: var(--line-2);
  cursor: pointer;
  transition: width .45s var(--ease), background .45s var(--ease);
}
.bh-slider__dot.is-active { width: 26px; background: var(--sage); }

/* Dots overlaid on the photo (property media sliders) */
.bh-slider__dots--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}
.bh-slider__dots--overlay .bh-slider__dot {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.bh-slider__dots--overlay .bh-slider__dot.is-active { background: #fff; }

/* ============================================================
   Best of Benidorm — full-width photo slider
   ============================================================ */
.bh-places__stage { position: relative; border-radius: var(--r); }
.bh-places__track { border-radius: var(--r); }
.bh-place {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.bh-place + .bh-place { margin-left: 16px; }
.bh-place img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r);
}
.bh-place figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 4vw, 36px);
  background: linear-gradient(to top, rgba(14, 11, 8, 0.78), rgba(14, 11, 8, 0.35) 60%, transparent);
  color: #fff;
}
.bh-place h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 6px;
}
.bh-place p { color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 56ch; }
@media (max-width: 720px) {
  .bh-place img { aspect-ratio: 4 / 5; }
}

/* Front-page collection: rich cards grid + view-all */
.bh-grid--cards {
  margin-top: clamp(24px, 3.4vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
}
.bh-more { margin-top: clamp(28px, 4vw, 44px); text-align: center; }

/* About — agent portrait & languages */
.bh-split__media--portrait { position: relative; }
.bh-split__media--portrait img { aspect-ratio: 3 / 4; object-position: 50% 18%; }
.bh-split__media--portrait figcaption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: rgba(14, 11, 8, 0.55);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.bh-about__langs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.bh-about__langs li {
  padding: 8px 15px;
  border-radius: var(--pill);
  background: var(--terra-soft);
  color: var(--terra);
  font-size: 13px;
  font-weight: 600;
}
.bh-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink);
  margin-top: 6px;
}
.bh-contact--photo .bh-signature { color: #F4CE9B; }

/* SEO copy before the footer */
.bh-seo h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 22px;
  text-wrap: balance;
}
.bh-seo__body { max-width: none; }
.bh-seo__body p {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.75;
  margin: 0 0 1em;
  text-align: justify;
  text-wrap: pretty;
}
.bh-seo__body p:last-child { margin-bottom: 0; }

/* ============================================================
   Line icons (steps / features)
   ============================================================ */
.bh-ic {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--sage-soft);
  color: var(--sage);
  box-shadow: var(--hi);
}
.bh-ic svg { width: 23px; height: 23px; }
.bh-arrow .bh-icon { width: 18px; height: 18px; }
.bh-card__go .bh-icon { width: 18px; height: 18px; }
.bh-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bh-step__n { margin-bottom: 0; font-size: 1.9rem; opacity: .85; }
.bh-feature .bh-ic { margin-bottom: 16px; background: var(--terra-soft); color: var(--terra); }
.bh-feature:nth-child(even) .bh-ic { background: var(--sage-soft); color: var(--sage); }

/* ============================================================
   Contact — dark photo section
   ============================================================ */
.bh-contact__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.bh-contact__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bh-contact__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(16, 13, 10, 0.93) 0%, rgba(16, 13, 10, 0.78) 55%, rgba(16, 13, 10, 0.55) 100%);
}
.bh-contact__inner {
  position: relative;
  padding: clamp(28px, 5vw, 64px);
}
.bh-contact--photo .bh-section__title { color: #fff; }
.bh-contact--photo .bh-contact__aside p { color: rgba(255, 255, 255, 0.86); }

/* ============================================================
   Legal / standalone pages — narrow reading column
   ============================================================ */
.bh-page {
  padding-bottom: clamp(64px, 9vw, 128px);
}
.bh-doc {
  width: min(720px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding-top: clamp(48px, 8vw, 96px);
}
.bh-doc__head {
  padding-bottom: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(32px, 5vw, 52px);
  border-bottom: 1px solid var(--line);
}
.bh-doc__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: clamp(22px, 3vw, 34px);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.bh-doc__back:hover { color: var(--terra); gap: 10px; }
.bh-doc__back .bh-icon { width: 17px; height: 17px; }
.bh-doc__title {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.02;
}
.bh-doc__meta {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Editor content typography */
.bh-doc__body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.bh-doc__body > *:first-child { margin-top: 0; }
.bh-doc__body > *:last-child { margin-bottom: 0; }
.bh-doc__body h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.12;
  color: var(--ink);
  margin: clamp(40px, 5vw, 60px) 0 0.6em;
}
.bh-doc__body h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
  margin: clamp(30px, 4vw, 44px) 0 0.5em;
}
.bh-doc__body h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2em 0 0.6em;
}
.bh-doc__body p { margin: 0 0 1.35em; }
.bh-doc__body a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--terra) 42%, transparent);
  transition: text-decoration-color .25s var(--ease);
}
.bh-doc__body a:hover { text-decoration-color: var(--terra); }
.bh-doc__body strong { color: var(--ink); font-weight: 700; }
.bh-doc__body ul,
.bh-doc__body ol {
  margin: 0 0 1.5em;
  padding-left: 1.35em;
  display: grid;
  gap: 0.55em;
}
.bh-doc__body li { padding-left: 0.3em; }
.bh-doc__body ul li::marker { color: var(--terra); }
.bh-doc__body ol li::marker { color: var(--muted); font-weight: 600; }
.bh-doc__body blockquote {
  margin: 1.8em 0;
  padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 30px);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.bh-doc__body blockquote p:last-child { margin-bottom: 0; }
.bh-doc__body hr {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: clamp(38px, 5vw, 56px) 0;
}
.bh-doc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 15.5px;
}
.bh-doc__body th,
.bh-doc__body td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.bh-doc__body th {
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
}
.bh-doc__body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* Visually hidden but still reachable by screen readers / keyboard focus —
   used for form labels that would otherwise duplicate a group's heading. */
.bh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sale showcase: filter sidebar --------------------------------------- */
.bh-filters__group { margin-bottom: 26px; }
.bh-filters__group h3 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
}
.bh-filters__range { display: flex; align-items: center; gap: 8px; }
.bh-filters__range input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line, #e3e0da);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.bh-filters__check { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; }
.bh-filters__check input { width: 17px; height: 17px; accent-color: var(--terra, #b4553a); }
.bh-filters select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line, #e3e0da);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.bh-filters__actions { display: grid; gap: 10px; justify-items: center; }
.bh-btn--full { width: 100%; justify-content: center; }
.bh-filters__reset { font-size: 14px; opacity: .7; text-decoration: underline; }
.bh-filters__cities ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bh-filters__cities a { text-decoration: none; }
.bh-filters__cities a[aria-current="page"] { font-weight: 600; text-decoration: underline; }

/* Icon sizing follows the rest of the theme: bh-icon carries no default size
   of its own, every button that hosts one sets its own (see .bh-copy .bh-icon,
   .bh-doc__back .bh-icon, etc.) — without a rule here the raw 24x24 viewBox
   would fall back to the browser's intrinsic SVG size and blow up the button. */
.bh-filters__toggle .bh-icon { width: 18px; height: 18px; }
.bh-filters__close .bh-icon { width: 20px; height: 20px; }

/* The toggle button and drawer only exist on narrow screens. On desktop the
   sidebar is just a plain block. */
.bh-filters__toggle { display: none; }
.bh-filters__close { display: none; }

@media (max-width: 900px) {
  .bh-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line, #e3e0da);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    cursor: pointer;
  }
  /* Without JS the is-open class never appears, so by default the sidebar
     stays a plain block above the grid — the filters still work even if the
     script fails to load. */
  .bh-filters.is-open {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    background: rgba(0, 0, 0, .45);
    overflow: hidden;
  }
  .bh-filters.is-open .bh-filters__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86vh;
    overflow-y: auto;
    padding: 18px 20px 28px;
    border-radius: 18px 18px 0 0;
    background: var(--bg, #fbf9f5);
  }
  .bh-filters.is-open .bh-filters__close {
    display: inline-flex;
    position: sticky;
    top: 0;
    margin-left: auto;
    padding: 6px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  body.bh-noscroll { overflow: hidden; }
}

/* --- Витрина продажи: раскладка ----------------------------------------- */
.bh-showcase__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* Колонки не должны сжиматься ниже содержимого: слайдер карточки задаёт
   собственный min-content, и без этого сетка отъедает ширину у сайдбара. */
.bh-showcase__layout > * { min-width: 0; }
.bh-showcase__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.bh-showcase__count { font-weight: 600; }
.bh-showcase__sort select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, #e3e0da);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.bh-showcase__empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 40px 0;
}
@media (max-width: 900px) {
  .bh-showcase__layout { grid-template-columns: 1fr; gap: 20px; }
}

.bh-sale-cities { margin: 60px 0 20px; }
.bh-sale-cities h2 { margin: 0 0 18px; }
.bh-sale-cities ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.bh-sale-cities a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--line, #e3e0da);
  border-radius: 999px;
  text-decoration: none;
}
.bh-sale-cities a:hover { border-color: var(--terra, #b4553a); }
.bh-sale-cities .bh-icon { width: 15px; height: 15px; }

.bh-sale-related { margin-top: 60px; }
.bh-sale-related h2 { margin: 0 0 20px; }
.bh-grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ============================================================
   Sale showcase rows (one listing per line)

   Every selector below is scoped under the list wrapper .bh-rows because the
   bare class .bh-row is not exclusive to this block — it is also the rental
   booking form's From/To date pair (template-parts/cta.php, styled by
   .bh-form .bh-row further up this file), and an unscoped .bh-row here would
   cascade its padding/background/border/shadow straight into that form on
   every single-property page.
   ============================================================ */
.bh-rows { display: grid; gap: clamp(16px, 1.8vw, 22px); }
.bh-rows > .bh-row {
  display: grid;
  /* Photo width is proportional with a cap: at a fixed 320px the media grew
     wider than the text between 721px and ~820px, where the showcase has
     dropped its sidebar but the viewport is still narrow. */
  grid-template-columns: clamp(220px, 42%, 380px) minmax(0, 1fr);
  gap: 20px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
/* Специфичность здесь не украшение: [data-reveal].is-visible задаёт
   transform: none, лежит ниже по файлу и при равной специфичности выигрывает
   у голого .bh-row:hover — подъём просто не сработал бы. Строка всегда несёт
   data-reveal, поэтому селектор ниже честно совпадает и перевешивает. */
.bh-rows > .bh-row[data-reveal]:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bh-rows .bh-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-in);
  background: var(--bg-2);
}
.bh-rows .bh-row__media .bh-slider__track { height: 100%; }
.bh-rows .bh-row__media img { width: 100%; height: 100%; object-fit: cover; }
.bh-rows .bh-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px 4px;
}
.bh-rows .bh-row__title { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin: 0; }
.bh-rows .bh-row__title a { transition: color .4s var(--ease); }
.bh-rows .bh-row__title a:hover { color: var(--terra); }
.bh-rows .bh-row__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bh-rows .bh-row__per-m2 { font-size: .95rem; font-weight: 600; color: var(--muted); }
.bh-rows .bh-row__excerpt {
  margin: 0;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Метки в строке идут в ряд с переносом, а не в две колонки, как в блоке
   коллекции на главной, откуда взят сам примитив. */
.bh-rows .bh-show__highlights--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: auto;
}
/* Цена и стрелка — одна строка: цена слева, стрелка прижата к правому краю
   тела. Раньше стрелка занимала свою строку внизу и добавляла 52px высоты,
   из-за которых фото на всю высоту становилось у́же, чем выше. */
.bh-rows .bh-row__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.bh-rows .bh-row .bh-card__go { flex: 0 0 auto; }
.bh-rows .bh-row[data-reveal]:hover .bh-card__go { transform: translate(3px, -3px) scale(1.05); background: var(--sage); }
@media (min-width: 721px) {
  /* Пока строка стоит в две колонки, фото тянется на всю её высоту: высоту
     задаёт текстовая колонка, а 4:3 уступает место растяжке, иначе под фото
     оставалась полоса пустоты в 70-100px. min-height держит нижнюю границу —
     у самой короткой строки (без описания и меток) фото иначе выродилось бы
     в полоску. */
  .bh-rows .bh-row__media { aspect-ratio: auto; height: 100%; min-height: 210px; }
}
@media (max-width: 720px) {
  /* Порог 720, а не 900: на 900 витрина складывает свой сайдбар вниз, и
     главная колонка становится ШИРЕ — складывать строку там было бы наоборот. */
  .bh-rows > .bh-row { grid-template-columns: 1fr; }
  .bh-rows .bh-row__body { padding: 4px 8px 10px; }
}