/* Bulgarian Villas — premium public site (design overhaul t_180066b1).
   Measured patterns from Airbnb/Booking-class references (spacing scale,
   3-layer soft shadows, capsule search, 4:3 photo cards), implemented in our
   own code with our forest-green + brass identity. Inter self-hosted;
   no framework; nothing here needs JS to be readable. */

:root{
  --ink:#122F2A;          /* forest, doubles as primary text (13.5:1 on --bg) */
  --ink-2:#3F4C47;
  --ink-3:#5E6B66;        /* muted; >=4.6:1 on --bg */
  --line:#E7E3DB;
  --line-2:rgba(18,47,42,.08);
  --bg:#FAF8F4;           /* warm white */
  --card:#FFFFFF;
  --accent:#122F2A;       /* deep forest */
  --accent-2:#A8834F;     /* brass — accents/borders/icons; text only >=20px bold */
  --accent-soft:#F0EDE4;
  --ok:#1D6B4F;
  --warn:#9A5B00;
  --err:#A3241C;

  /* radii (measured 12-14 target) */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:14px;
  --r-pill:999px;

  /* 3-layer soft shadows (forest-tinted) */
  --shadow-sm:0 1px 2px rgba(18,47,42,.06), 0 2px 8px rgba(18,47,42,.06), 0 4px 12px rgba(18,47,42,.05);
  --shadow-md:0 1px 2px rgba(18,47,42,.05), 0 4px 12px rgba(18,47,42,.08), 0 16px 40px rgba(18,47,42,.10);
  --shadow-lg:0 2px 4px rgba(18,47,42,.06), 0 8px 24px rgba(18,47,42,.10), 0 32px 64px rgba(18,47,42,.14);

  /* spacing scale (4px base) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  --max:1200px;           /* content column (75rem) */
  --gutter:clamp(1.25rem,4vw,3rem);
  --sans:"Inter","Segoe UI Variable Text",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-micro:150ms;
  --t-hover:240ms;
  --t-zoom:300ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0ms!important;animation-duration:0ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-family:var(--sans);font-weight:700;letter-spacing:-.021em}
h1{font-size:clamp(2rem,4.5vw,2.5rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.014em}
h3{font-size:1.125rem;font-weight:600;letter-spacing:-.006em}
h4{font-size:.95rem;font-weight:600}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
.lead{font-size:1.1rem;color:var(--ink-2)}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.err{color:var(--err)}
.center{text-align:center}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ---------- header: airy, glass over warm white ---------- */
.hdr{
  position:sticky;top:0;z-index:35;
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;
  max-width:var(--max);margin:0 auto;padding:var(--s4) var(--gutter);
  background:rgba(250,248,244,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
body.overhero .hdr{background:transparent;border-bottom:0;color:#fff}
body.overhero .hdr nav a{color:rgba(255,255,255,.92)}
body.overhero .brand, body.overhero .brand .word{color:#fff}
body.overhero .hdr nav a:hover{color:#fff}
body.overhero .langs a{color:rgba(255,255,255,.75)}
body.overhero .langs a.on{color:#fff;border-color:#fff}
.brand{display:flex;align-items:center;gap:.55rem;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.brand .mark{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.85rem;letter-spacing:.02em;
}
body.overhero .brand .mark{background:rgba(18,47,42,.85)}
.hdr nav{display:flex;gap:var(--s5);margin-left:auto;font-size:.9rem;font-weight:500}
.hdr nav a{color:var(--ink-2);transition:color var(--t-micro) ease}
.hdr nav a:hover{color:var(--ink)}
.langs{display:flex;gap:.15rem;font-size:.75rem;font-weight:600}
.langs a{padding:.25rem .45rem;color:var(--ink-3);border-bottom:1px solid transparent;transition:color var(--t-micro) ease}
.langs a.on{color:var(--ink);border-color:var(--ink)}
@media (pointer:coarse){
  .hdr nav a{padding:.55rem 0}
  .langs a{padding:.55rem .45rem}
  .hdr nav{gap:1.1rem}
}

/* ---------- hero: full-bleed photo + capsule search ---------- */
.hero{
  position:relative;min-height:clamp(480px,60vh,640px);
  display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;
  background:var(--accent);
}
.hero-bg{
  position:absolute;inset:0;display:block;
  background:var(--accent);   /* paint behind while the image decodes */
  transform:scale(1.03);
}
/* t_a3b0be32: real <img> instead of a CSS background so the LCP resource is
 * discoverable in the HTML, preloadable and served as AVIF/WebP srcset. */
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;
}
/* scrim for white text: alpha .30/.47 measured for avg-luminance ~115 photos (8:1) */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(18,47,42,.30) 0%,
    rgba(18,47,42,.12) 26%,
    rgba(18,47,42,.10) 55%,
    rgba(18,47,42,.47) 100%);
}
.heroinner{
  position:relative;z-index:2;max-width:var(--max);width:100%;
  margin:0 auto;padding:var(--s8) var(--gutter) var(--s7);
}
.kicker{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#D8BC93;margin:0 0 var(--s4);
}
.hero h1{
  color:#fff;max-width:30ch;margin-bottom:var(--s3);
  font-size:clamp(2.1rem,5vw,3.1rem);
  text-shadow:0 2px 24px rgba(18,47,42,.35);
}
.hero .sub{max-width:56ch;color:rgba(255,255,255,.94);margin:0 0 var(--s6);font-size:1.05rem}

/* search capsule (measured: pill 999px, ~66px desktop, white glass) */
.herosearch{
  display:grid;gap:var(--s2);align-items:center;
  grid-template-columns:1.6fr 1fr 1fr .8fr 1.1fr auto;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ink);border-radius:var(--r-pill);
  padding:var(--s2) var(--s2) var(--s2) var(--s6);
  box-shadow:var(--shadow-md);
}
.herosearch label{display:flex;flex-direction:column;gap:.2rem;min-width:0;position:relative;border-radius:var(--r-sm)}
.herosearch label:focus-within{outline:2px solid var(--accent-2);outline-offset:2px}
.herosearch label + label{padding-left:var(--s4);border-left:1px solid var(--line)}
.herosearch span{
  font-size:.68rem;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
}
.herosearch select,.herosearch input{
  font:inherit;font-size:.95rem;font-weight:500;color:var(--ink);background:transparent;
  border:0;padding:.3rem 0;min-width:0;
}
.herosearch select{cursor:pointer;appearance:none}
.herosearch select option{color:var(--ink)}
.herosearch select:focus,.herosearch input:focus{outline:none}
.herosearch label::after{
  content:"";position:absolute;right:.2rem;top:1.4rem;width:7px;height:7px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);pointer-events:none;
}
.herosearch input[type="date"],.herosearch input[type="number"]{padding-right:1rem}
.herosearch button{
  font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,#1C463D 0%,#122F2A 100%);color:#fff;border:0;border-radius:var(--r-pill);
  padding:.8rem 1.6rem;min-height:48px;cursor:pointer;
  box-shadow:0 1px 2px rgba(10,25,22,.3), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform var(--t-micro) ease, box-shadow var(--t-micro) ease, filter var(--t-micro) ease;
}
.herosearch button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.herosearch button:active{transform:translateY(1px)}

/* ---------- search head (results page) ---------- */
.searchhead{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:var(--s6) 0 var(--s5);
}
.searchhead h1{margin-bottom:var(--s4)}
.searchhead .herosearch{box-shadow:var(--shadow-sm)}

/* ---------- sections: consistent spacing scale ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--gutter)}
.wrap.narrow{max-width:640px}
.wrap.narrowish{max-width:820px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.sechead h2{margin:0}
.sechead .count{font-size:.875rem;color:var(--ink-3);font-weight:500}
.more{font-size:.875rem;font-weight:600;color:var(--accent-2)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.block h2::after{content:"";display:block;width:44px;height:2px;margin-top:.5rem;border-radius:99px;background:linear-gradient(90deg,#A8834F,rgba(168,131,79,0))}

/* ---------- trust strip under hero ---------- */
.trust{background:var(--card);border-bottom:1px solid var(--line)}
.trustrow{
  max-width:var(--max);margin:0 auto;padding:var(--s6) var(--gutter);
  display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.trustrow div{display:flex;flex-direction:column;gap:.2rem}
.trustrow strong{font-size:1rem;font-weight:600}
.trustrow span{font-size:.875rem;color:var(--ink-3);line-height:1.45}
.trustrow svg{width:22px;height:22px;stroke:var(--accent-2);margin-bottom:.4rem}

/* ---------- villa cards: photo-dominant 4:3, hover zoom, price + rating ---------- */
.grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.vcard{display:flex;flex-direction:column;background:transparent;position:relative}
.vcard:hover,.vcard:focus-visible{color:inherit}
.vmedia{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--accent-soft);border-radius:var(--r-md);
}
.vmedia img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-zoom) ease-out}
.vcard:hover .vmedia img{transform:scale(1.04)}
.vmedia{transition:box-shadow var(--t-hover) ease}
.vcard:hover .vmedia,.vcard:focus-visible .vmedia{box-shadow:var(--shadow-md)}
/* Carousel GEOMETRY in the blocking layer (t_84a0140f). The photo-strip
   markup (.vmedia.vmediap > .vstrip > picture > img.vframe) used to get its
   layout only from cards.css, a DEFERRED sheet — until it applied (~5 s in on
   a throttled 4G phone) the strip was a static block: the six <picture>s
   stacked vertically (clipped by overflow:hidden) and frame 0 rendered at the
   intrinsic 520/360 ratio instead of the box's 4/3, while .vbadges/.vmodepill
   overlays sat IN FLOW inside the media box. When cards.css landed, the strip
   snapped to position:absolute, frames to flex:0 0 100%, overlays to
   absolute — one late reflow = search-page CLS 0.116-0.156, the shift
   Lighthouse attributed to IMG.vframe. Geometry must never arrive late, so
   the layout-critical rules live HERE; cards.css keeps only the interactive
   chrome (arrows, dots, drag), which is position:absolute decoration that
   cannot reflow the card. The two declarations are duplicated on purpose —
   identical values, so whichever layer applies first paints the same box. */
.vmediap{--i:0}
.vmediap .vstrip{
  position:absolute;inset:0;display:flex;
  transform:translate3d(calc(var(--i,0) * -100% + var(--drag,0px)),0,0);
}
/* the flex ITEMS are the <picture> wrappers, not the imgs — without this
   they flex-shrink to width/6 (a 57px-wide frame measured mid-load) */
.vmediap .vstrip > picture{flex:0 0 100%;width:100%;height:100%;display:block}
.vmediap .vframe{
  flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;
}
/* carousel controls start hidden; cards.css (deferred) reveals them with
   their final absolute geometry — appearing is not a layout shift, but a
   default-styled flash of <button>s would be visible noise until it lands */
.vmediap .vnav,.vmediap .vdots{display:none}
/* overlay pills: absolute from first paint — same values smart-cards.css
   (deferred) re-declares; without this they render in-flow and jump when
   that layer applies. */
.vcard .vbadges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.vcard .vmodepill{position:absolute;top:auto;bottom:10px;left:10px}
.vcard h3{margin:0;font-size:1.05rem;font-weight:600}
/* rating badge on the image (white pill, shadow-sm) — only when there are reviews */
.rate{
  position:absolute;top:12px;left:12px;
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.875rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.96);border-radius:var(--r-pill);
  padding:4px 10px;box-shadow:var(--shadow-sm);
}
.rate .star{color:var(--accent-2);font-size:.9rem;line-height:1}
.rate .muted{color:var(--ink-3);font-weight:500}
.vtop{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.vcard .vtop h3{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* no reviews yet: quiet italic line in the body, not a badge */
.rate.new{position:static;background:transparent;box-shadow:none;padding:0;color:var(--ink-3);font-style:italic;font-weight:400;flex:none}
.vbody{padding-top:var(--s3)}
.vloc{font-size:.875rem;color:var(--ink-3);margin-top:.15rem}
.vattrs{font-size:.875rem;color:var(--ink-2);margin-top:.3rem}
.vdist{font-size:.8125rem;color:var(--ink-2);margin-top:.35rem;display:inline-flex;align-items:center;gap:.3rem}
.vdist::before{content:"\25C6";font-size:.5rem;color:var(--accent-2)}
.vprice{margin-top:var(--s3);font-size:1rem}
.vprice .from{color:var(--ink-3);font-size:.875rem;margin-right:.15rem}
.vprice .amt{font-size:1.25rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vprice .unit{color:var(--ink-3);font-size:.8125rem;margin-left:.25rem}
.por{color:var(--ink-2);font-size:.875rem;font-weight:600}
.pill{
  display:inline-block;font-size:.72rem;font-weight:600;
  padding:.28rem .6rem;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-2);
  background:var(--card);
}
.pill.tiny{font-size:.65rem;padding:.12rem .45rem}
.pill-ok{border-color:#CFE3D8;color:var(--ok);background:#F2F8F5}
.pill-inst{position:absolute;left:12px;top:12px;background:#fff;border-color:#fff;box-shadow:var(--shadow-sm);z-index:2}
.pill-inq{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);border-color:transparent;color:var(--ink-2);box-shadow:var(--shadow-sm);z-index:2}
.vview{
  position:absolute;right:12px;bottom:12px;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(18,47,42,.55);
  padding:.2rem .55rem;border-radius:var(--r-pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.nophoto{aspect-ratio:4/3;background:var(--accent-soft);border-radius:var(--r-md)}
.nophoto.big{aspect-ratio:21/9}

/* ---------- destination tiles ---------- */
.tiles{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.tile{
  display:flex;flex-direction:column;gap:.15rem;padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-hover) ease, box-shadow var(--t-hover) ease, border-color var(--t-hover) ease, background var(--t-hover) ease;
}
.tile:hover{border-color:rgba(18,47,42,.2);background:var(--accent-soft);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tname{font-size:.98rem;font-weight:600}
.tcount{font-size:.72rem;letter-spacing:.05em;color:var(--ink-3)}

/* ---------- why band + footer with trust signals ---------- */
.why{background:var(--card);border-top:1px solid var(--line);margin-top:var(--s7)}
.why p{color:var(--ink-2)}
.ftr{background:#0E211D;color:#C7D2CF;padding:var(--s8) var(--gutter) var(--s6)}
.ftrgrid{max-width:var(--max);margin:0 auto;display:grid;gap:var(--s6);grid-template-columns:2fr 1fr 1fr 1.4fr}
.ftrcol{display:flex;flex-direction:column;gap:.4rem}
.ftrcol + .ftrcol{border-left:1px solid rgba(199,210,207,.14);padding-left:var(--s6)}
.ftrk{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#A8834F;font-weight:700}
.ftr a{color:#C7D2CF}
.ftr a:hover{color:#fff}
.ftr .muted{color:#8FA09B}
.ftr .ftrbrand{font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.ftr .tagline{color:#8FA09B;font-size:.9rem;max-width:30ch}
/* trust signals: icon + title + sub, one row each */
.ftrtrust{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:var(--s7) 0 0;padding-top:var(--s6);border-top:1px solid rgba(199,210,207,.14)}
.ftrtrust div{display:flex;flex-direction:column;gap:.15rem}
.ftrtrust strong{color:#E9EFED;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.45rem}
.ftrtrust svg{width:18px;height:18px;stroke:#A8834F;flex:none}
.ftrtrust span{font-size:.8rem;color:#8FA09B;line-height:1.45}
.ftrbottom{max-width:var(--max);margin:var(--s6) auto 0;padding-top:var(--s4);border-top:1px solid rgba(199,210,207,.14);font-size:.78rem;color:#8FA09B;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ---------- results layout ---------- */
.results{display:grid;gap:var(--s6);grid-template-columns:250px 1fr;align-items:start}
.filters{
  position:sticky;top:5rem;display:flex;flex-direction:column;gap:var(--s5);
  border-right:1px solid var(--line);padding-right:var(--s5);
}
.fgroup h4{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .5rem;font-weight:700;
}
.fchk{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.18rem 0;cursor:pointer}
.fchk input{accent-color:var(--accent)}
.fchk em{margin-left:auto;font-style:normal;font-size:.76rem;color:var(--ink-3)}
.fchk.zero{opacity:.42;cursor:not-allowed}
.sortbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.sortsel{font-size:.8125rem;color:var(--ink-3);display:flex;align-items:center;gap:.5rem}
.sortsel select{font:inherit;border:1px solid var(--line);background:var(--card);padding:.35rem .6rem;border-radius:var(--r-sm)}
.empty{padding:var(--s7) 0;text-align:center}
/* t_speed01 — .fitcount layout stability: the "N villas that fit" line sits
   ABOVE the results grid, and its only styling lives in the DEFERRED
   design-reference.css (§9, font-size .92rem). First paint (before the
   deferred layer lands) rendered it at the default 16px — the 26→24px
   height change pushed the whole card grid up 18px: CLS 0.275-0.318 on
   4G mobile. The same values now ship in this BLOCKING sheet, so the
   deferred copy overrides with identical numbers and nothing moves. */
.fitcount{
  display:block;margin:0 0 var(--s4);color:var(--ink-2);font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.fitcount strong{color:var(--ink)}
.reset{font-size:.8125rem;text-align:center;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.01em;
  cursor:pointer;color:#fff;border:0;border-radius:var(--r-pill);
  padding:.75rem 1.6rem;min-height:44px;text-align:center;
  background:linear-gradient(180deg,#1C463D 0%,#122F2A 100%);
  box-shadow:0 1px 2px rgba(10,25,22,.3), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform var(--t-micro) ease, box-shadow var(--t-micro) ease, filter var(--t-micro) ease;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 6px 18px rgba(10,25,22,.28), inset 0 1px 0 rgba(255,255,255,.09)}
.btn:active{transform:translateY(1px)}
/* booked-out dates: the live quote disables the button; make that visible */
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{filter:none}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:none;border:1px solid rgba(18,47,42,.25)}
.btn.ghost:hover{background:var(--accent);color:#fff}
.btn.wide{width:100%;display:block;margin-top:var(--s3)}

/* ---------- navigation: back pill + breadcrumb (t_navlogic01) ----------
   One Back control, two surfaces. The pill is a 38 px pill at the top-left of
   every page that has a logical parent; the breadcrumb is 14 px, chevron-
   separated and keeps the current page bold, so the villa trail is legible
   instead of a 13 px muted whisper. .ondark is the variant inside photo
   heroes (destinations, hubs) where the page background is an image. */
.backrow{padding-top:var(--s4)}
.backpill{
  display:inline-flex;align-items:center;gap:.3rem;min-height:38px;
  padding:.3rem .9rem .3rem .6rem;border-radius:var(--r-pill);
  border:1px solid rgba(18,47,42,.18);background:var(--card);color:var(--ink);
  font-size:.8125rem;font-weight:600;line-height:1;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:background var(--t-micro) ease,transform var(--t-micro) ease;
}
.backpill svg{width:16px;height:16px;flex:none;margin-top:-1px}
.backpill:hover{background:var(--accent-soft);transform:translateX(-1px)}
.backpill.ondark{
  background:rgba(18,47,42,.42);border-color:rgba(255,255,255,.42);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.backpill.ondark:hover{background:rgba(18,47,42,.62)}
.crumbs{font-size:.875rem;color:var(--ink-3);padding:var(--s3) 0 0}
.crumbs .wrap{padding-top:.4rem;padding-bottom:.4rem}
.crumblist{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;list-style:none;margin:0;padding:0;line-height:1.45}
.crumblist li{display:flex;align-items:center;gap:.5rem;min-width:0}
.crumblist li[hidden]{display:none}
.crumblist li+li::before{content:'›';color:var(--ink-3);opacity:.75;font-size:1.05rem}
.crumbs a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:currentColor}
.crumbs strong{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.crumbs .crumbsearch a{display:inline-flex;align-items:center;gap:.3rem;color:var(--accent);font-weight:600}
.crumbs .crumbsearch a::before{content:'‹';font-size:1.05rem;line-height:1}
.nfacts{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s4) 0}
@media (max-width:700px){
  .backpill{min-height:40px}
  .crumblist{gap:.15rem .4rem}
}
.gallery2{
  display:grid;gap:.5rem;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;
}
.gcell{position:relative;margin:0;overflow:hidden;background:var(--accent-soft);border-radius:var(--r-md)}
.gcell.g0{grid-row:span 2;aspect-ratio:4/3}
.gcell img{width:100%;height:100%;object-fit:cover}
.gcell figcaption{
  position:absolute;left:12px;bottom:12px;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(18,47,42,.55);
  padding:.2rem .55rem;border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.gcell{cursor:zoom-in}
.gcell::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background var(--t-hover) ease}
.gcell:hover::after{background:rgba(18,47,42,.12)}
.gcell.g3,.gcell.g4{aspect-ratio:16/10}
.gshowall{
  position:absolute;right:calc(var(--gutter) + .75rem);bottom:.75rem;z-index:3;
  font:inherit;font-size:.8125rem;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:.5rem .9rem;cursor:pointer;box-shadow:var(--shadow-sm);
}
.gshowall:hover{filter:brightness(.96)}
.gallery2{position:relative}
.layout2{display:grid;gap:var(--s7);grid-template-columns:1fr 380px;align-items:start}
.villahead h1{margin-bottom:.3rem}
.vsub{color:var(--ink-3);font-size:.95rem}
.vfacts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:var(--s3);font-size:.8125rem;color:var(--ink-2)}
.vfacts span{padding:.2rem .1rem}
.vfacts span+span::before{content:"\00B7";margin-right:.5rem;color:var(--ink-3)}
.vfacts .pill+span::before{content:""}
.block{border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s5)}
.block h2{margin-bottom:var(--s3)}
.prose{color:var(--ink-2);max-width:68ch}

.distgrid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.dist{
  display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;
  padding:var(--s3) var(--s4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
}
.dist strong{font-size:1.4rem;line-height:1;display:flex;align-items:baseline;gap:.18rem}
.dist strong span{font-size:.72rem;color:var(--ink-3)}
.dist>span{font-size:.72rem;color:var(--ink-3)}
.dist .dist-time{font-variant-numeric:tabular-nums}
.dist em{font-style:normal;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:.3rem}
.dist .acode{letter-spacing:.04em;color:var(--ink-3)}
.dist .dist-hint{font-size:.68rem;color:var(--ink-3);margin-top:.15rem;line-height:1.3}
.dist-zero strong{font-size:1.4rem;color:var(--ink-3)}
.dist-zero .dist-here{font-size:1.02rem;color:var(--ink);line-height:1.15;font-weight:600}
.dist-note{max-width:62ch}

.rooms{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.roomrow{display:flex;align-items:center;gap:var(--s4);padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.rname{font-weight:600}
.rbeds{color:var(--ink-3);font-size:.85rem;margin-left:auto}

.amen{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.amen li{font-size:.8125rem;padding:.3rem .7rem;background:var(--accent-soft);border-radius:var(--r-pill);color:var(--ink-2)}
.flagrow{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--s3)}
.rules{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:.9rem}
.rules li{margin-bottom:.35rem}

.revsum{display:grid;gap:var(--s6);grid-template-columns:180px 1fr;align-items:start;margin-bottom:var(--s5)}
.revbig strong{font-size:2.6rem;line-height:1;display:block}
.revbig span{font-size:.8rem;color:var(--ink-3)}
.revscores{width:100%;border-collapse:collapse;font-size:.85rem}
.revscores th{text-align:left;font-weight:400;color:var(--ink-2);padding:.25rem .8rem .25rem 0;width:45%}
.revscores td{padding:.25rem 0}
.revscores .num{text-align:right;width:2.5rem;color:var(--ink-2)}
.bar{display:block;height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent-2)}
.revlist{display:flex;flex-direction:column;gap:var(--s5)}
.revitem{border-top:1px solid var(--line);padding-top:var(--s4)}
.revhead{display:flex;gap:.7rem;align-items:baseline;font-size:.9rem}
.revtitle{margin:.3rem 0 .2rem;font-weight:600}
.revitem p{margin:.2rem 0;color:var(--ink-2);font-size:.9rem}

/* ---------- booking card ---------- */
.bookcol{position:sticky;top:5rem}
.bookcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s5);
  background-image:linear-gradient(90deg,rgba(168,131,79,.5),rgba(168,131,79,0) 34%);
  background-repeat:no-repeat;background-size:100% 2px;
  box-shadow:var(--shadow-md);
}
.bcprice{display:flex;align-items:baseline;gap:.4rem;margin-bottom:var(--s4)}
.bcprice .from,.sbprice .from{font-size:.8125rem;color:var(--ink-3)}
.bcprice strong{font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.02em}
.bcprice span{font-size:.8125rem;color:var(--ink-3)}
.bcfields{display:flex;flex-direction:column;gap:var(--s3)}
.bcfields label{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.bcfields input{
  font:inherit;font-size:.92rem;color:var(--ink);padding:.55rem .7rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;min-width:0;
}
.bcfields input:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
.bcrow{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.bcaddons{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.bclabel{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.5rem;font-weight:600}
.addonrow{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-size:.875rem;cursor:pointer}
.addonrow input{accent-color:var(--accent);margin-top:.25rem}
.aname{display:flex;flex-direction:column}
.aname small{color:var(--ink-3);font-size:.76rem}
.aprice{margin-left:auto;text-align:right;white-space:nowrap;font-size:.85rem}
.aprice small{display:block;color:var(--ink-3);font-size:.72rem}
.bcbreak{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.bl{display:flex;justify-content:space-between;gap:var(--s4);font-size:.875rem;padding:.2rem 0;color:var(--ink-2)}
.bl small{display:block;color:var(--ink-3);font-size:.74rem}
.bl.sum{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.5rem;font-weight:700;color:var(--ink)}
.bcnote{margin:.6rem 0 0;text-align:center}

/* ---------- sticky mobile bar + modal ---------- */
.stickybar{display:none}

/* ---------- overlay layer scale (single source of truth) -----------------
   Every overlay takes a slot from this list; never invent a number and never
   raise one layer to "beat" another — move the offender to its slot instead.
       20  in-page sticky rails (account tab row, journal progress)
       30  sticky mobile booking bar
       35  sticky sub-headers
       39  mobile nav scrim
       40  WhatsApp float
       41  mobile nav pane
       44  search suggestion bar
       45  site header + dropdown panels
       60  skip-link (clears the chrome, sits under EVERY dialog)
       70  consent banner (bottom dock) — yields to EVERY dialog/sheet below,
           see the pause rule under #consent: a banner must never take a click
           meant for a booking CTA
      100  dialog / booking modal  <-- measured bug 2026-11-06: the modal
           lived at 50, under the consent banner's 70, which covered its
           bottom and the CTA. The modal now owns the top dialog layer.
      120  photo lightbox (opens above a dialog)
      130  toasts
   ------------------------------------------------------------------------ */
.modal{position:fixed;inset:0;z-index:100;background:rgba(18,47,42,.55);
  display:grid;place-items:center;padding:var(--s4);
  overscroll-behavior:contain;
  animation:modal-scrim-in .15s ease-out both}
/* display:grid beats the UA's [hidden]{display:none}, so the modal scrim
   would cover the page while "hidden" — enforce it explicitly. */
.modal[hidden]{display:none}
@keyframes modal-scrim-in{from{opacity:0}to{opacity:1}}
/* transform-only entrance: the box never reflows the page behind it */
@keyframes modal-box-in{from{opacity:.4;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modalbox{
  position:relative;width:100%;max-width:460px;
  max-height:85vh;overflow:auto;overscroll-behavior:contain;
  background:var(--card);border-radius:var(--r-lg);padding:var(--s5);
  /* three layers, 24px spread: the box has to read as genuinely lifted off
     the scrim on a bright photo behind it, not as a pasted card */
  box-shadow:0 24px 48px -12px rgba(10,25,22,.38),
             0 8px 18px -8px rgba(10,25,22,.26),
             0 2px 4px rgba(10,25,22,.14);
  animation:modal-box-in .2s cubic-bezier(.2,.85,.3,1) both;
  transform-origin:center;
}
.modalbox .x{position:absolute;right:.8rem;top:.6rem;background:none;border:0;font-size:1.5rem;color:var(--ink-3);cursor:pointer;border-radius:50%;width:40px;height:40px}
.modalbox .x:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
/* phones: a bottom sheet — full width, rounded top, safe-area padded, the
   scrim still on the same dialog layer */
@keyframes modal-sheet-in{from{opacity:.5;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:719px){
  .modal{padding:0;place-items:end stretch}
  /* .modal .modalbox out-specifies chrome.css's global radius rule on purpose:
     the sheet is rounded at the TOP only, square where it meets the screen */
  .modal .modalbox{
    max-width:none;width:100%;max-height:92vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0 !important;
    padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom));
    animation:modal-sheet-in .22s cubic-bezier(.2,.85,.3,1) both;
    transform-origin:bottom center;
  }
}
@media (prefers-reduced-motion:reduce){
  .modal,.modalbox{animation:none}
}
.portalform{display:flex;flex-direction:column;gap:var(--s3);max-width:380px}
.portalform label{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.portalform input{font:inherit;padding:.55rem .6rem;border:1px solid var(--line);border-radius:var(--r-sm)}
.portalcard{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);background:var(--card)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .layout2{grid-template-columns:1fr 330px;gap:var(--s6)}
  .results{grid-template-columns:210px 1fr}
}
@media (max-width:860px){
  .herosearch{grid-template-columns:1fr 1fr;padding:var(--s4)}
  .herosearch label + label{padding-left:0;border-left:0}
  .herosearch button{grid-column:1/-1}
  .results{grid-template-columns:1fr}
  .filters{position:static;border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:var(--s4)}
  .layout2{grid-template-columns:1fr}
  .bookcol{position:static;order:-1}
  .gallery2{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gcell.g0{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .revsum{grid-template-columns:1fr;gap:var(--s4)}
  .ftrgrid{grid-template-columns:1fr 1fr}
  .ftrcol + .ftrcol{border-left:0;padding-left:0}
}
@media (max-width:760px){
  .stickybar{
    display:flex;position:fixed;inset:auto 0 0 0;z-index:30;align-items:center;gap:.8rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(18,47,42,.08);
  }
  .sbprice{font-size:1.05rem;flex:1;font-variant-numeric:tabular-nums;font-weight:700}
  .sbprice .unit{font-size:.74rem;color:var(--ink-3);font-weight:400}
  body.has-sticky{padding-bottom:76px}
  .hdr{gap:.8rem;padding:.9rem 1rem}
  .hdr nav{order:3;flex-basis:100%;gap:1.1rem;font-size:.8rem}
  .gallery2{padding:0}
  .gcell{border-radius:0}
}
@media (max-width:640px){
  .hero{min-height:70vh}
  .heroinner{padding-top:var(--s8)}
  .hero h1{font-size:clamp(1.8rem,7vw,2.4rem)}
}
@media (max-width:560px){
  .herosearch{grid-template-columns:1fr}
  .grid,.grid.two{grid-template-columns:1fr;gap:var(--s6)}
  .tiles{grid-template-columns:1fr 1fr}
  .gallery2{grid-template-columns:1fr}
  .gcell.g3,.gcell.g4{display:none}
  .wrap{padding:var(--s5) 1rem}
  .ftrgrid{grid-template-columns:1fr}
  .ftrtrust{grid-template-columns:1fr}
}

/* ---------- modal form extras (booking card) ---------- */
.row2{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.portalform textarea{font:inherit;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r-sm);resize:vertical}
.regbox{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);margin:.4rem 0}
.regbox legend{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:0 .3rem}
.regbox label{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.regbox input,.regbox select{font:inherit;font-size:.9rem;padding:.45rem .5rem;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-transform:none;letter-spacing:0}
.done h2{margin-bottom:.6rem}
/* Bank-transfer block on the booking confirmation */
.bankbox{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:var(--s3);margin:.7rem 0;text-align:left}
.bankbox h3{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.bankbox .bl{display:flex;justify-content:space-between;gap:var(--s4);font-size:.86rem;padding:.18rem 0;color:var(--ink-2)}
.bankbox .bl span:last-child{color:var(--ink);text-align:right;word-break:break-all}
.bankbox .bl strong{font-weight:650}

/* ---------- cookie consent ---------- */
#consent{
  position:fixed;inset:auto 0 0 0;z-index:70;
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;
  max-width:var(--max);margin:0 auto;padding:.9rem var(--gutter) calc(.9rem + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(18,47,42,.10);
  font-size:.875rem;color:var(--ink-2);
}
#consent[hidden]{display:none}
/* The banner never argues with a transaction (t_4e9a0062). While any dialog,
   sheet or popover is open the banner steps out of the way entirely — its own
   [hidden] state is untouched, so it comes straight back on close if still
   unanswered, and a decision taken meanwhile still sticks.

   Two spellings on purpose. The :has() rules are declarative and need no JS;
   html[data-overlay-open] is the fallback the banner script maintains for
   engines without :has() (it walks the same OVERLAY list). The z-index ladder
   alone already keeps the dialog above the dock, so this rule is the second,
   independent line of defence: even a future z-index bump cannot bury a CTA.
   Every overlay that can cover the bottom of the viewport (where the CTA of a
   short-window modal or a phone bottom sheet sits) belongs in both lists. */
body:has(.modal:not([hidden])) #consent,
body:has(.bcsheet:not([hidden])) #consent,
body:has(.offerpop:not([hidden])) #consent,
body:has(.lightbox:not([hidden])) #consent,
body:has(.qpop:not([hidden])) #consent,
body.sf-sheet #consent,
html[data-overlay-open] #consent{display:none}
@media (max-width:1080px){
  body:has(.navt:checked) #consent{display:none}
}
#consent span{flex:1 1 260px;min-width:0}
#consent button{
  font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;
  border-radius:var(--r-sm);padding:.72rem 1.1rem;min-height:44px;
}
#consent button[data-accept]{
  background:linear-gradient(180deg,#1C463D 0%,#122F2A 100%);color:#fff;border:0;
  box-shadow:0 1px 2px rgba(10,25,22,.3), inset 0 1px 0 rgba(255,255,255,.09);
}
#consent button[data-reject]{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
#consent button[data-reject]:hover{border-color:var(--ink-3)}
@media (max-width:560px){
  #consent{flex-direction:column;align-items:stretch;text-align:center}
  #consent span{flex:0 0 auto}
  #consent button{width:100%}
}
@media (max-width:420px){.row2{grid-template-columns:1fr}}

/* ---------- photo lightbox ---------- */
/* layer 120: a lightbox can be opened from inside the booking dialog, so it
   must sit above the modal's 100 (see the overlay scale) */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(18,47,42,.92);
  display:flex;flex-direction:column;animation:lb-in .2s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-top{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s6);color:#fff}
.lb-top .x{background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1;padding:.2rem .4rem}
.lb-count{font-size:.85rem;color:#CFD6D4;font-variant-numeric:tabular-nums}
.lb-zone{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#A8B3B0}
.lb-body{flex:1;display:flex;align-items:center;justify-content:center;padding:0 3.5rem;min-height:0}
.lb-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.3)}
.lb-nav:hover{background:#fff}
.lb-prev{left:var(--s4)}.lb-next{right:var(--s4)}
.lb-strip{display:flex;gap:.35rem;padding:.75rem var(--s6);overflow-x:auto}
.lb-strip img{width:72px;height:48px;object-fit:cover;border-radius:6px;opacity:.5;cursor:pointer;transition:opacity var(--t-micro) ease}
.lb-strip img.on{opacity:1;outline:2px solid #fff}
@media(max-width:760px){
  .lb-body{padding:0 3rem}
  .lb-strip{display:none}
  .gshowall{right:.75rem}
}

/* ---------- WhatsApp floating button ---------- */
.wafloat{position:fixed;right:1.1rem;bottom:1.1rem;z-index:40;width:52px;height:52px;
  border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.22);transition:transform var(--t-micro) ease}
.wafloat:hover{transform:scale(1.06);color:#fff}
.wafloat svg{width:30px;height:30px;fill:currentColor}
body.has-sticky .wafloat{bottom:calc(88px + env(safe-area-inset-bottom))}
@media (max-width:760px){
  .wafloat{right:.9rem;bottom:.9rem}
  body.has-sticky .wafloat{bottom:calc(86px + env(safe-area-inset-bottom))}
}
/* villa booking card: WhatsApp + Call beside Book / Enquire */
.bc-contact{display:flex;gap:.5rem;margin:.5rem 0 .2rem}
.bc-contact .btn{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:.4rem}
.bc-contact .btn.wa{background:#25D366;border-color:#1FBB59;color:#fff}
.bc-contact .btn.wa:hover{background:#1FBB59}
.bc-contact .btn.wa svg{width:16px;height:16px;fill:currentColor;flex:none}
.bc-contact .btn.call{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.bc-contact .btn.call:hover{border-color:var(--ink-3)}
/* while the consent banner is up, the float sits above it (height synced by lux.js) */
#consent:not([hidden]) ~ .wafloat{bottom:calc(var(--wa-shift, 140px) + env(safe-area-inset-bottom))}

/* ---------- conversion copy: vibe hook + USP bullets ---------- */
.villahead .vibe{margin:0 0 .35rem;font-size:1.12rem;line-height:1.35;font-weight:600;color:var(--ink-2)}
.usplist{list-style:none;margin:.4rem 0 1.1rem;padding:0;max-width:46rem;columns:2;column-gap:1.4rem}
.usplist li{break-inside:avoid;margin:0 0 .4rem;padding-left:1.5rem;position:relative;font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.usplist li::before{content:"\2713";position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ok);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
@media (max-width:640px){.usplist{columns:1}}

/* ---------------- availability calendar (calendar.js) ----------------
   Two months side by side on desktop, one swipeable month on mobile.
   Every day carries its nightly price; booked nights stay visible but
   cannot be picked; the stay minimum shows as a badge on the first day it
   applies to; dragging the pointer paints the range and its total before
   anything is committed. Selection and range are the only saturated
   surfaces on the page, so the eye follows the stay and not the chrome. */
.calx{
  container-type:inline-size;
  margin:.7rem 0 1rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  padding:var(--s3) var(--s3) var(--s2);
}
.calx-legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.74rem;color:var(--ink-2);margin-bottom:.6rem}
.calx-key{display:inline-flex;align-items:center;gap:.35rem}
.calx-sw{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);display:inline-grid;place-items:center;font-size:.6rem;font-weight:700;font-style:normal}
.calx-sw.free{background:var(--card)}
.calx-sw.busy{background:repeating-linear-gradient(135deg,#F4EFEA,#F4EFEA 3px,#E7DED5 3px,#E7DED5 6px);border-color:#E0D6CC}
.calx-sw.minb{background:var(--accent-soft);border-color:#DDD6C6;color:var(--ink);border-radius:99px;width:auto;padding:0 .28rem}

.calx-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-top:2.35rem;scrollbar-width:none}
.calx-view::-webkit-scrollbar{display:none}
.calx-view:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:var(--r-md)}
.calx-track{display:flex;gap:var(--s5);align-items:flex-start}
.calx-month{flex:0 0 100%;scroll-snap-align:start;min-width:0;position:relative}
.calx-month.enter{animation:calx-in 260ms ease both}
@keyframes calx-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@container (min-width:32rem){
  /* the quick-book popover is sized to clear this so the two-up view
     is reachable; the villa-page rail (~330px) stays a one-up scroller. The
     third month is only a buffer, so it is clipped rather than spilled. */
  .calx-month{flex:0 0 calc(50% - var(--s5)/2)}
  .calx-view{overflow-x:hidden;scroll-snap-type:none}
}
.calx-mhead{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.35rem}
.calx-mhead strong{font-size:.92rem;font-weight:650;letter-spacing:-.01em;text-transform:capitalize}
.calx-nav{display:flex;gap:.15rem}
.calx-arrow{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--t-micro) ease,background var(--t-micro) ease;
}
.calx-arrow:hover{border-color:var(--ink-3);background:var(--accent-soft)}
.calx-month:first-child .calx-arrow[data-step="-1"],
.calx-month:last-child .calx-arrow[data-step="1"]{visibility:visible}
.calx-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.calx-wd span{font-size:.66rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:.15rem 0}
.calx-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calx-pad{min-height:44px}

.calx-day{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:44px;padding:.22rem .1rem;border:0;border-radius:6px;background:transparent;
  font:inherit;color:var(--ink);cursor:pointer;text-align:center;min-width:0;
  transition:background var(--t-micro) ease,color var(--t-micro) ease;
}
.calx-day .calx-num{font-size:.82rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.calx-day .calx-price{font-size:.68rem;line-height:1.1;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.calx-day:hover:not(.busy):not(.past){background:var(--accent-soft)}
.calx-day.weekend:not(.busy):not(.past) .calx-price{color:var(--accent-2);font-weight:650}
.calx-day.pickable{cursor:pointer}

/* unbookable, but still readable: the guest must see why a gap exists */
.calx-day.busy,.calx-day.past{cursor:default}
.calx-day.busy{background:repeating-linear-gradient(135deg,#FCFAF8,#FCFAF8 4px,#F4EFEB 4px,#F4EFEB 8px);color:#A9A096}
.calx-day.busy .calx-num{text-decoration:line-through;text-decoration-thickness:1px;color:#8C8378}
.calx-day.busy .calx-price{display:none}
.calx-day.held{background:#FFF6E4;color:#8A6A2E}
.calx-day.held .calx-price{color:#9A7A3E}
.calx-day.past{color:#B9B2A9;opacity:.75}
.calx-day.past .calx-price{color:#BEB7AE}
.calx-day.past.busy{background:#FBF9F6}
/* neither free nor a visible booking (unknown state): quiet, not struck out */
.calx-day.off:not(.busy){color:#B3ABA1}
.calx-day.off:not(.busy) .calx-price{opacity:.55}

/* stay minimum: a quiet chip on the first day the rule applies to */
.calx-minb{
  position:absolute;top:1px;right:1px;min-width:15px;padding:0 3px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:.53rem;font-weight:700;line-height:13px;height:13px;
}
.calx-day.has-min{padding-top:.35rem}

/* range preview — lighter than the committed selection */
.calx-day.prev-in{background:#E6DFD0;border-radius:0}
.calx-day.prev-end{background:#E6DFD0}
.calx-day.prev-end::after{
  content:"";position:absolute;inset:3px;border-radius:5px;border:1.5px dashed rgba(18,47,42,.45);pointer-events:none;
}
.calx-day.too-short{color:#A79E93}
.calx-day.too-short .calx-price{opacity:.6}

/* committed selection: rounded pills, forest fill, white text */
.calx-day.sel-start,.calx-day.sel-end{background:var(--accent);color:#fff;z-index:1}
.calx-day.sel-start .calx-price,.calx-day.sel-end .calx-price{color:rgba(255,255,255,.78)}
.calx-day.sel-start .calx-num,.calx-day.sel-end .calx-num{font-weight:700}
.calx-day.sel-start{border-radius:99px 0 0 99px}
.calx-day.sel-end{border-radius:0 99px 99px 0}
.calx-day.sel-start.sel-end{border-radius:99px}
.calx-day.in-range{background:#DCD3C1;border-radius:0}
.calx-day.in-range .calx-price{color:var(--ink-2)}
.calx-day.sel-start .calx-minb,.calx-day.sel-end .calx-minb{background:#fff;color:var(--accent)}

/* running total for the hovered range */
.calx-tip{
  position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  padding:.28rem .5rem;border-radius:var(--r-sm);background:var(--ink);color:#fff;
  font-size:.68rem;font-weight:600;white-space:nowrap;z-index:6;pointer-events:none;
  box-shadow:var(--shadow-md);font-variant-numeric:tabular-nums;
}
.calx-tip.left{left:0;transform:none}
.calx-tip.right{left:auto;right:0;transform:none}

.calx-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.6rem;min-height:1.7rem;flex-wrap:wrap}
.calx-sum{margin:0;font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.calx-sum.idle{color:var(--ink-3)}
.calx-sum.ready{color:var(--ink);display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.calx-sum .calx-total{font-size:1.12rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.calx-sum .calx-dates{font-size:.78rem;color:var(--ink-2)}
.calx-clear{
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  border-radius:99px;padding:.22rem .7rem;font:inherit;font-size:.75rem;cursor:pointer;flex:none;
}
.calx-clear:hover{border-color:var(--ink-3);color:var(--ink)}
.calx.onrequest .calx-price{display:none}
@media (pointer:coarse){
  .calx-day{min-height:52px}
  .calx-day .calx-price{font-size:.73rem}
  .calx-day .calx-num{font-size:.86rem}
  .calx-pad{min-height:52px}
  .calx-sum{font-size:.82rem}
}

/* calendar inside the villa booking card: the card already carries the frame,
   so the widget drops its own, and it spans the whole field grid (also inside
   the mobile sheet, where .bcfields becomes two columns) */
.bcfields .calx{grid-column:1/-1}
.calx-incard{border:0;box-shadow:none;background:transparent;padding:0;margin:0 0 .1rem}
.calx-incard .calx-legend{font-size:.68rem;gap:.7rem;margin-bottom:.35rem}
.calx-incard .calx-foot{margin-top:.4rem}
.calx-incard .calx-sum{font-size:.78rem}

/* Quick-book popover frame (t_083b2175). It is position:fixed so opening it
   never reflows the grid row and never gets clipped by .vcard{overflow:hidden};
   the calendar scrolls inside it. smart-cards.css carries the same shell, but
   it is a deferred layer, so the frame lives here too and the popover can
   never arrive unstyled. */
.qpop{
  position:fixed;z-index:70;width:600px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(18,47,42,.22);padding:var(--s4);
}
.qpop[hidden]{display:none}

/* quick-book popover: tighter side padding so the seven columns keep a 44px target */
.qpop .calx{padding-left:var(--s2);padding-right:var(--s2)}

/* t_a3b0be32 — skip rendering work for the long tail below the fold.
 * Style & Layout was 2.8 s of main-thread time on a 4G phone, almost all of it
 * in sections the visitor cannot see yet. content-visibility lets the engine
 * defer them until they approach the viewport; contain-intrinsic-size keeps
 * the scrollbar and the scroll-to-anchor positions honest while it does.
 * Deliberately NOT applied to the hero, the toolbar or the featured grid. */
.trust,.occasion,.styles,.wall,.seo,.ftr{
  content-visibility:auto;
  contain-intrinsic-size:auto 480px;
}
.ftr{contain-intrinsic-size:auto 340px}

/* t_a3b0be32 — <picture> is a layout-transparent wrapper.
 * The responsive pipeline inserts <picture> between the media box and the <img>
 * so every `… img{width:100%;height:100%}` rule still finds its image. Without
 * this the wrapper is inline and the box collapses to the intrinsic width. */
.vmedia picture,.vmediap picture,.gcell picture,.dwall picture,.occcard picture,.mtile picture{
  display:block;width:100%;height:100%;
}