/* Bulgarian Villas — site chrome (t_e52d2547).
   Header, mobile drawer, footer, and the global control surface: one radius
   scale (14px), one shadow family, visible focus, reduced-motion respect.
   Loaded last on every page. Markup lives in lib/lux.js layout(); no JS is
   required for the drawer — it is a labelled checkbox (:checked), so the nav
   still opens on a phone with scripts blocked. */

:root{
  /* t_f04bc28b: one radius per job, not one radius for everything. Panels and
     cards take --r-md; buttons and chips are pills. The !important block at the
     bottom keeps order-independence (page layers load after this file). */
  --r-ctl:var(--r-md);
  --r-card:var(--r-md);
  --ring:#0E6B4F;
  --ring-dark:#E8CFA9;
  --hdr-h:68px;
}

/* the off-canvas drawer lives outside the viewport edge; without clipping the
   scroll container a phone can slide the whole page sideways */
html{overflow-x:clip}

/* ---------- accessibility utilities ---------- */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;left:var(--s4);top:-100px;z-index:60;
  padding:.7rem 1rem;border-radius:var(--r-ctl);background:var(--ink);color:#fff;
  font-weight:600;box-shadow:var(--shadow-md);transition:top var(--t-micro) ease;
}
.skip:focus{top:var(--s4);color:#fff}

/* ---------- header shell ---------- */
.hdr{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;gap:var(--s5);
  min-height:var(--hdr-h);
  max-width:none;padding:0 var(--gutter);
  background:rgba(250,248,244,.94);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(18,47,42,.04),0 8px 24px rgba(18,47,42,.05);
}
.hdr > .brand{max-width:none;min-width:0;flex:0 1 auto;position:relative;z-index:42}
.hdr .brand .word{
  max-width:min(46vw,24ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Over-hero home header: a dark scrim instead of full transparency, so the
   white labels stay legible once the page scrolls past the photo and the
   glass bar sits on warm white (there is no JS scroll state to lean on). */
body.overhero .hdr{
  background:linear-gradient(180deg,rgba(9,24,21,.84),rgba(9,24,21,.62));
  border-bottom-color:rgba(255,255,255,.10);box-shadow:0 1px 2px rgba(6,20,17,.18);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);
}

/* the pane holds nav + language + contact; one flex row on desktop, a drawer on phones */
.navpane{display:flex;align-items:center;gap:var(--s5);margin-left:auto;min-width:0}
.nav{display:flex;align-items:center;gap:var(--s4);font-size:.9rem;font-weight:500}
.nav > a,.drop > summary{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .35rem;border-radius:var(--r-ctl);
  color:var(--ink-2);transition:color var(--t-micro) ease,background var(--t-micro) ease;
}
.nav > a:hover,.drop > summary:hover{color:var(--ink);background:rgba(18,47,42,.05)}
body.overhero .nav > a,body.overhero .drop > summary{color:rgba(255,255,255,.94)}
body.overhero .nav > a:hover,body.overhero .drop > summary:hover{
  color:#fff;background:rgba(255,255,255,.12);
}

/* ---------- destinations dropdown (CSS + <details>, keyboard native) ---------- */
.drop{position:relative}
.drop > summary{list-style:none;cursor:pointer;user-select:none}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary::after{
  content:"";width:.42rem;height:.42rem;margin-left:.15rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform var(--t-micro) ease;
}
.drop[open] > summary::after{transform:rotate(225deg) translateY(-1px)}
.droppanel{
  position:absolute;top:calc(100% + .45rem);left:-.75rem;z-index:45;
  display:grid;grid-template-columns:1fr 1fr;gap:.15rem .7rem;
  width:min(94vw,520px);padding:.7rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-ctl);
  box-shadow:var(--shadow-lg);
}
/* hover is a shortcut only; click/keyboard still work */
@media (hover:hover) and (min-width:1081px){
  .drop:hover > .droppanel{display:grid}
  .drop:not([open]):hover > .droppanel{display:grid}
}
.droppanel a{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.5rem .6rem;border-radius:var(--r-sm);font-size:.88rem;color:var(--ink-2);
}
.droppanel a:hover{background:var(--accent-soft);color:var(--ink)}
.droppanel a span{color:var(--ink-3);font-size:.76rem;font-variant-numeric:tabular-nums}
.droppanel .dropall{
  grid-column:1/-1;margin-top:.2rem;border-top:1px solid var(--line);
  border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600;color:var(--brass-ink);justify-content:flex-start;
}

/* ---------- language switcher: real flag chips ---------- */
.langs{display:flex;gap:.1rem;font-size:.75rem;font-weight:600}
.langs a{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .45rem;border-radius:var(--r-pill);
  color:var(--ink-3);border:1px solid transparent;
  transition:color var(--t-micro) ease,background var(--t-micro) ease,border-color var(--t-micro) ease;
}
.langs a:hover{color:var(--ink);background:rgba(18,47,42,.06)}
.langs a.on{color:var(--ink);border-color:var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.langs .flag{width:20px;height:14px;border-radius:4px;overflow:hidden;display:block;flex:none;box-shadow:0 0 0 1px rgba(18,47,42,.16) inset}
.langs .flag svg{display:block;width:100%;height:100%}
body.overhero .langs a{color:rgba(255,255,255,.8)}
body.overhero .langs a.on{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);box-shadow:none}

/* ---------- header contact: phone + WhatsApp, only when the admin set them ---------- */
.hdrcta{display:flex;align-items:center;gap:.4rem}
.hdrcta a{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .7rem;border-radius:var(--r-ctl);
  font-size:.82rem;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-micro) ease,box-shadow var(--t-micro) ease,border-color var(--t-micro) ease;
}
.hdrcta a:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:rgba(18,47,42,.2)}
.hdrcta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.hdrcta .wa svg{fill:currentColor;stroke:none;width:16px;height:16px}
.hdrcta .wa{color:#1D6B4F}
body.overhero .hdrcta a{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.overhero .hdrcta .wa{color:#C8F0DC}

/* ---------- burger + scrim (phones) ---------- */
.navt{position:absolute;opacity:0;width:44px;height:44px;margin:0;pointer-events:none}
.navt:focus-visible ~ .navbtn{outline:2px solid var(--ring);outline-offset:2px}
body.overhero .navt:focus-visible ~ .navbtn{outline-color:#fff}
.navbtn{
  display:none;align-items:center;justify-content:center;margin-left:auto;
  width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;position:relative;z-index:42;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);color:var(--ink);
}
.navbtn .burger{display:grid;gap:4px;width:18px}
.navbtn .burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-micro) ease,opacity var(--t-micro) ease}
body.overhero .navbtn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:none}
.navscrim{
  display:none;position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:39;
  background:rgba(9,24,21,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t-hover) ease;
}
.navt:checked ~ .navscrim{display:block;opacity:1}
.navt:checked ~ .navbtn .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navt:checked ~ .navbtn .burger i:nth-child(2){opacity:0}
.navt:checked ~ .navbtn .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* drawer body: phone-first, scrollable, only one primary action competing */
/* the drawer takes over as soon as the desktop row no longer fits (measured:
   the row wraps at ~1050px), so the header never goes two-storey */
@media (max-width:1080px){
  .navbtn{display:inline-flex}
  .hdr{gap:.7rem;padding:0 var(--gutter)}
  .navpane{
    /* the header carries backdrop-filter, so it is the containing block for
       fixed children: size the pane against the viewport explicitly */
    position:fixed;top:0;right:0;height:100dvh;z-index:41;
    width:min(88vw,360px);margin:0;padding:calc(var(--hdr-h) + var(--s4)) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
    flex-direction:column;align-items:stretch;gap:var(--s4);
    background:var(--bg);border-left:1px solid var(--line);
    box-shadow:-24px 0 60px rgba(9,24,21,.22);
    overflow-y:auto;overscroll-behavior:contain;
    /* off-canvas drawers keep their links out of the tab order until opened.
       translateX(102%) alone still paints a box outside the viewport, which
       widens the document scroll area (sideways scroll on phones) — clip it
       at the pane itself, never via html/body overflow (that kills
       position:sticky on the booking card). */
    visibility:hidden;
    clip-path:inset(0 0 0 100%);
    transform:translateX(102%);
    transition:transform var(--t-hover) cubic-bezier(.32,.72,0,1),visibility 0s linear var(--t-hover);
  }
  .navt:checked ~ .navpane{
    visibility:visible;clip-path:none;transform:none;
    transition:transform var(--t-hover) cubic-bezier(.32,.72,0,1),visibility 0s;
  }
  .hdr .nav{flex-direction:column;align-items:stretch;gap:.1rem;font-size:1rem;margin:0;order:1;flex:0 0 auto;overflow:visible}
  .nav > a,.drop > summary{padding:.8rem .6rem;border-radius:var(--r-ctl);background:transparent}
  body.overhero .hdr .nav > a,body.overhero .hdr .drop > summary{color:var(--ink-2)}
  body.overhero .hdr .nav > a:hover,body.overhero .hdr .drop > summary:hover{color:var(--ink);background:rgba(18,47,42,.05)}
  .nav > a,.drop > summary{border-bottom:1px solid var(--line);border-radius:0}
  .nav > a:last-child{border-bottom:0}
  .drop > summary{justify-content:space-between}
  .drop > summary::after{margin-right:.4rem}
  .droppanel{
    position:static;width:auto;display:grid;grid-template-columns:1fr;left:0;
    margin:.35rem 0 .6rem;padding:.35rem;box-shadow:none;background:var(--card);
  }
  .drop:not([open]) > .droppanel{display:none}
  .droppanel a{padding:.6rem}
  .langs{order:2;padding-top:.3rem}
  .langs a{font-size:.82rem;padding:.45rem .55rem;min-height:44px;align-items:center}
  .hdrcta{order:1;flex-direction:column;align-items:stretch;gap:.5rem;padding-top:.4rem}
  .hdrcta a{justify-content:center;padding:.7rem;font-size:.9rem;border-radius:var(--r-ctl)}
  .hdr .brand .word{max-width:calc(100vw - 7.5rem)}
}


/* between the drawer breakpoint and full width the contact chips shrink to
   icons so the row keeps its single line (labels return at >=1250px) */
@media (min-width:1081px) and (max-width:1249px){
  .hdrcta a{padding:.45rem .5rem}
  .hdrcta a span{display:none}
  .hdrcta svg{width:17px;height:17px}
}

/* ---------- footer (t_footer02): four compact zones, contact + payments row ---------- */
/* Why this is not the old three-column block: the contact column carried the
   hero strip's `.trust` class, whose global `content-visibility:auto` +
   `contain-intrinsic-size:480px` left it unpainted below the fold and exposed
   the strip's cream `--card` background — 490 px of empty white box in a 757 px
   footer. The footer list is `.ftrust` now, the contact details moved into their
   own row, and columns are only rendered when they have content (the grid takes
   its column count from data-cols). Target: one screen-worth of quiet links,
   not a wall.
   Look: hairline gold seam with a soft top glow, gold section labels with a
   fading rule, link rows that lift on hover, 14 px radius on the chip and
   payment boxes, everything on the dark green ground. */
.ftr{
  position:relative;background:#0E211D;color:#C7D2CF;line-height:1.5;
  padding:1.5rem var(--gutter) .85rem;font-size:.86rem;
  border-top:1px solid rgba(185,149,95,.32);
}
/* the seam: a bright centre that fades to nothing on both edges */
.ftr::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(185,149,95,.85),transparent);
}
/* a 140 px wash of gold under the seam, so the footer starts from light */
.ftr::after{
  content:'';position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:radial-gradient(120% 130% at 50% 0,rgba(185,149,95,.11),rgba(185,149,95,0) 72%);
}
.ftr > *{position:relative;z-index:1}
.ftrgrid{max-width:var(--max);margin:0 auto;display:grid;gap:1.5rem 2.2rem;align-items:start}
/* the column count is the number of columns that actually had content */
.ftrgrid[data-cols="4"]{grid-template-columns:1.25fr .9fr .9fr 1.15fr}
.ftrgrid[data-cols="3"]{grid-template-columns:1.3fr 1fr 1.2fr}
.ftrgrid[data-cols="2"]{grid-template-columns:1.25fr 1fr}
.ftrcol{display:flex;flex-direction:column;min-width:0}
.ftrcol > summary{
  list-style:none;display:flex;align-items:center;gap:.6rem;
  cursor:pointer;margin:0 0 .55rem;
}
.ftrcol > summary::-webkit-details-marker{display:none}
.ftrk{
  display:flex;align-items:center;gap:.55rem;margin:0;min-height:1.65rem;
  font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:#C2A26E;font-weight:700;
}
/* the label carries a rule that fades out to the right */
.ftrk > span{flex:none}
.ftrk::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(199,210,207,.24),transparent)}
.ftrbody{display:flex;flex-direction:column;gap:.45rem}
.ftr a{color:#C7D2CF;transition:color .16s ease,background-color .16s ease}
.ftr .brand{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
.ftr .brand .mark{
  display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:8px;
  background:#B9955F;color:#122F2A;font-size:.86rem;font-weight:800;flex:none;
}
.ftr .tagline{color:#8FA09B;font-size:.8rem;max-width:32ch;line-height:1.5}
.ftr .ftrlist{display:flex;flex-direction:column;gap:.02rem;font-size:.85rem;line-height:1.35}
.ftr .ftrlist a,.ftr .ftrlist .linkish{
  display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;
  padding:.13rem .5rem;margin-left:-.5rem;border-radius:8px;
}
.ftr .ftrlist a span{color:#8FA09B;font-size:.7rem;font-variant-numeric:tabular-nums}
.ftr .ftrlist a:hover,.ftr .ftrlist .linkish:hover{color:#fff;background:rgba(255,255,255,.055)}
.ftr .ftrlist a:hover span{color:#C2A26E}
.ftr .ftrlist .linkish{text-align:left;width:auto;color:#C7D2CF}
.ftr .ftrmore{color:#C2A26E;font-size:.8rem;margin:.15rem 0 0 .05rem;display:inline-block;align-self:flex-start}
.ftr .ftrmore:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* trust marks: icon + one word, the sentence goes to the assistive tree only so
   the column never sets the footer height */
.ftrust{
  display:flex;flex-direction:column;gap:.3rem;margin:.75rem 0 0;padding:.65rem 0 0;
  border-top:1px solid rgba(199,210,207,.13);
}
.ftrust > div{display:flex;align-items:center;gap:.5rem;min-width:0}
.ftrust svg{width:14px;height:14px;stroke:#B9955F;stroke-width:1.8;flex:none}
.ftrust strong{color:#DCE4E2;font-size:.76rem;font-weight:600;line-height:1.25}
.ftrust span.clip{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* company transparency line closes the strip (t_trustbadges01): the name and
   domain, so the marks above have a business behind them */
.ftrust .tb-company{
  margin:.45rem 0 0;font-size:.68rem;line-height:1.45;color:#8FA09B;max-width:30ch;
}
/* Trustpilot: a plain link, never a rating we do not own */
.ftr .tb-tp{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:.6rem 0 0;
  padding:.4rem .6rem;border:1px solid rgba(0,182,122,.35);border-radius:10px;
  background:rgba(0,182,122,.08);
}
.ftr .tb-tp:hover{border-color:#00B67A;background:rgba(0,182,122,.16)}
.ftr .tb-tp-star{color:#00B67A;font-size:.85rem;line-height:1}
.ftr .tb-tp > span:not(.tb-tp-star){color:#DCE4E2;font-size:.76rem;font-weight:600}
.ftr .tb-tp small{flex-basis:100%;color:#8FA09B;font-size:.66rem;line-height:1.35}
/* contact + payments row: chips on the left, card marks and the deposit line on
   the right. 14 px radius is the box radius of this footer, nothing tighter.
   Scoped under .ftr on purpose: design-reference.css loads later and defines a
   bare .ftrpay strip with its own gutter padding and border. */
.ftr .ftrpay{
  max-width:var(--max);margin:1rem auto 0;padding:1rem 0 0;
  border-top:1px solid rgba(199,210,207,.12);
  display:flex;align-items:center;justify-content:space-between;gap:.9rem 1.6rem;flex-wrap:wrap;
}
.ftrchips{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;min-width:0}
.ftr .ftrpay-k{
  font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:#8FA09B;
  font-weight:700;margin-right:.15rem;
}
.ftr .chip{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(199,210,207,.2);border-radius:14px;
  padding:.4rem .8rem;font-size:.8rem;color:#DCE4E2;background:rgba(255,255,255,.04);
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.ftr .chip:hover{border-color:rgba(185,149,95,.8);background:rgba(185,149,95,.15);color:#fff}
.ftr .chip svg{width:14px;height:14px;stroke:#B9955F;stroke-width:1.8;flex:none}
.ftr .chip.wa svg{fill:#B9955F;stroke:none}
.ftr .ftrpayside{display:flex;align-items:center;gap:.5rem .7rem;flex-wrap:wrap;justify-content:flex-end}
.ftr .ftrpayside .ftrpay-k{margin-right:0}
.ftr .ftrpayside .paymarks{
  gap:.3rem;align-items:center;border-radius:14px;padding:.32rem .5rem;
  border:1px solid rgba(199,210,207,.16);background:rgba(255,255,255,.055);
}
.ftr .ftrpayside .pm{height:1.25rem;padding:0 .3rem;border-radius:3px}
.ftr .ftrpayside .pm-mc i{width:.6rem;height:.6rem}
.ftr .ftrpayside .pm-visa span{font-size:.6rem}
/* marks are inline SVG since t_trustbadges01 (neutral stroke art, no brand
   assets to keep in sync); only the ones actually enabled get printed */
.ftr .ftrpayside .pm svg{display:block;height:.92rem;width:auto;color:#122F2A}
.ftr .ftrpayside .pm-lock{gap:.28rem;padding:0 .42rem}
.ftr .ftrpayside .pm-lock svg{height:.8rem;width:.8rem;stroke:#122F2A}
.ftr .ftrpayside .pm-locklbl{font-size:.6rem;font-weight:700;letter-spacing:.02em;color:#122F2A;white-space:nowrap}
.ftr .ftrnote{
  font-size:.68rem;color:#8FA09B;line-height:1.4;margin:0;
  font-variant-numeric:tabular-nums;max-width:38ch;
}
.ftrbottom{
  max-width:var(--max);margin:.85rem auto 0;padding-top:.7rem;
  border-top:1px solid rgba(199,210,207,.1);font-size:.72rem;color:#82948F;
  display:flex;justify-content:space-between;align-items:baseline;gap:.35rem 1.2rem;flex-wrap:wrap;
}
.ftrbottom .imprint{margin:0;color:#7B8D88;font-size:.7rem;width:auto;display:inline;max-width:66ch}
.ftrbot-l{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.ftrbot-l .linkish{color:#A9B8B3}
/* desktop: a column label is a label, not a toggle — the content stays visible
   even if the details element is closed, so a click cannot strand it */
@media (min-width:901px){
  .ftrcol > summary{pointer-events:none}
  /* Chrome 131+ clips a closed <details> through ::details-content; forcing it
     visible is what keeps every column open on the wide layout without a JS
     breakpoint switch. The child display rule covers older engines. */
  .ftrcol::details-content{content-visibility:visible !important;display:block !important;height:auto !important}
  .ftrcol > .ftrbody{display:flex !important}
  /* two across on the wide layout: three one-word marks take two rows instead
     of three and stop setting the column height */
  .ftrust{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .7rem}
  .ftrust .tb-company{grid-column:1/-1}
  .ftr .ftrust span.clip{position:absolute}
}
/* 901-1199 px: the four columns get narrow before the phone breakpoint, so the
   link type and the gutters step down instead of letting long destination names
   wrap the footer back up to 450 px */
@media (min-width:901px) and (max-width:1199px){
  .ftrgrid{gap:1.2rem 1.5rem}
  .ftrgrid[data-cols="4"]{grid-template-columns:1.2fr .95fr .95fr 1.05fr}
  .ftr .ftrlist{font-size:.8rem}
  .ftr .tagline,.ftrpay{font-size:.8rem}
  .ftr .ftrnote{max-width:32ch}
  .ftrpay{gap:.7rem 1.1rem}
}
/* below 900 px each zone folds to a header row, Airbnb style: the whole footer
   drops to a screen of taps instead of a wall of links */
@media (max-width:900px){
  .ftr{padding-top:1.5rem}
  .ftrgrid{grid-template-columns:1fr !important;gap:0}
  .ftrcol{border-top:1px solid rgba(199,210,207,.13);padding:0}
  .ftrcol:first-child{border-top:0;padding-bottom:.9rem}
  .ftrcol > summary{padding:.8rem 0;margin:0;min-height:44px}
  .ftrcol > summary::after{
    content:'';width:.45rem;height:.45rem;flex:none;margin-right:.15rem;
    border-right:2px solid #C2A26E;border-bottom:2px solid #C2A26E;
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .ftrk{flex:1}
  .ftrk::after{background:linear-gradient(90deg,rgba(199,210,207,.2),transparent)}
  .ftrcol[open] > summary::after{transform:rotate(-135deg)}
  .ftrbody{padding-bottom:.9rem}
  /* one word per mark: the sentence is on the villa page, and three wrapped
     sentences would cost a phone 100 px of footer they never asked for */
  .ftrust{flex-direction:row;flex-wrap:wrap;gap:.35rem .9rem;border-top:0;padding-top:0;margin-top:.15rem}
  .ftrust .tb-company{flex-basis:100%}
  .ftrust span.clip{position:absolute}
  .ftrpay{flex-direction:column;align-items:flex-start;margin-top:.9rem;padding-top:.8rem;gap:.7rem}
  .ftrpayside{justify-content:flex-start;flex-direction:column;align-items:flex-start}
  .ftrbottom{margin-top:.8rem;padding-top:.6rem}
}
/* a phone keeps the chips and the marks sharing wrap lines instead of stacking
   five full-width rows */
@media (max-width:560px){
  .ftr{padding-bottom:1.3rem}
  .ftr .chip{padding:.36rem .68rem;font-size:.76rem}
  /* a phone does not need the "We accept" caption above the marks */
  .ftr .ftrpayside .ftrpay-k{display:none}
  .ftr .ftrpayside .pm{height:1.05rem;padding:0 .22rem}
  .ftr .ftrpayside .pm-visa span,.ftr .ftrpayside .pm-amex span,
  .ftr .ftrpayside .pm-ap span,.ftr .ftrpayside .pm-gp span{font-size:.52rem}
  .ftr .ftrpayside .paymarks{gap:.2rem;padding:.28rem .42rem}
  .ftrbottom{font-size:.66rem;gap:.25rem}
}

/* ---------- global control surface: radius by job, one shadow family ---------- */
/* !important on purpose: page-specific layers (booking/villa premium) load
   after this file and each re-declares 12px on .btn — the radius is a global
   token, so it must not depend on stylesheet order.
   t_f04bc28b: the single 14px control radius collapsed the whole scale, so
   buttons/inputs/cards all looked the same at a glance. Split back to the
   spec: 8px inputs, pill buttons, 12px cards/panels, 14px sheets and modals.
   Circles (modal close) opt out below. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,textarea,
.sortsel select,.mpanel{
  border-radius:var(--r-sm) !important;
}
.btn,button,
.herosearch,.herosearch button,.bookcard button{
  border-radius:var(--r-pill) !important;
}
.vcard,.portalcard,.tile,.mtile,.dist{
  border-radius:var(--r-md) !important;
}
/* the booking card is a raised panel like the rest, the modal is a sheet */
.bookcard{border-radius:var(--r-lg) !important}
.modalbox{border-radius:var(--r-lg) !important}
.filters{border-radius:var(--r-md) !important}
/* a phone stacks the capsule into a card: pill corners would read as a blob;
   the filter rail and the booking modal both become bottom sheets. Declared
   after the rules above so the sheet corners are not re-flattened. */
@media (max-width:860px){
  .herosearch{border-radius:var(--r-lg) !important}
  .filters{border-radius:var(--r-lg) var(--r-lg) 0 0 !important}
}
.modalbox .x,.x{border-radius:50% !important}
input[type="checkbox"],input[type="radio"]{accent-color:#0E6B4F}
.langs a,.pill,.pill-inst,.pill-inq,.rate,.kicker,.vview{border-radius:var(--r-pill) !important}
.herosearch button,.bookcard .btn,.btn{
  box-shadow:var(--shadow-sm);
}
/* a ghost button is a quiet outline: no rest shadow, the family returns on
   hover (t_f04bc28b) */
.btn.ghost{box-shadow:none}
.herosearch button:hover,.btn:hover{box-shadow:var(--shadow-md)}
.vcard{background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden}
.vcard:hover{box-shadow:var(--shadow-md)}
/* the card is the shadow owner; lux.css also lifts the image on hover, which
   painted a second, inner shadow on the photo (t_f04bc28b) */
.vcard:hover .vmedia,.vcard:focus-visible .vmedia{box-shadow:none}
.vcard .vbody{padding:var(--s3) var(--s4) var(--s4)}
.vmedia{border-radius:var(--r-md) var(--r-md) 0 0}
.tile,.mtile{overflow:hidden}

/* ---------- focus: one visible ring everywhere, light where the ground is dark ---------- */
/* the ring inherits each element's own shape — a 4px ring on a pill button
   used to snap the corners square on focus (t_f04bc28b) */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.hdr :focus-visible,.ftr :focus-visible{outline-color:var(--ring-dark)}
body.overhero .hdr :focus-visible{outline-color:#fff}
.langs a:focus-visible,.hdrcta a:focus-visible{outline-offset:1px}
.navbtn:focus-visible{outline-offset:1px}
.vcard:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ring),var(--shadow-md)}
.vcard:focus-visible .vmedia{outline:none}
.drop > summary:focus-visible{outline-offset:-1px}
@media (prefers-reduced-motion:reduce){
  .navpane,.navscrim,.navbtn .burger i,.drop > summary::after,.hdrcta a,
  .ftrcol > summary::after{transition:none!important}
  .hdrcta a:hover{transform:none}
}

/* ---------- footer brand + contact glyph details ---------- */
.ftr .brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
.ftr .brand .mark{background:#B9955F;color:#122F2A}
.ftr .ftrcontact .wa svg{fill:#B9955F;stroke:none;width:15px;height:15px;flex:none}
.ftr .ftrlist a strong{font-weight:600}

/* ---------- contact page: legal blocks reachable from the footer ---------- */
.legal{margin-top:var(--s7);scroll-margin-top:calc(var(--hdr-h) + 1rem)}
.legal h2{font-size:1.08rem;letter-spacing:-.01em}
.legal p{max-width:64ch}
.btn svg{width:16px;height:16px;fill:currentColor;vertical-align:-2px;margin-right:.15rem}

/* ---------- coarse pointers: skip the glass, keep the layout ----------
   (t_optloop01, MOBILE-PERF-BUDGET "still open" #1: the sticky header's
   blur(14px) and the hero filter cost ~2.5 s of styleLayout on a throttled
   mobile CPU. A touch device never sees the frosted look long enough to
   miss it — the header sits on near-opaque backgrounds already, so the
   blur's contribution is a soft edge, not legibility. Desktop keeps it.) */
@media (pointer:coarse){
  .hdr{
    background:var(--bg,#FAF8F4);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.overhero .hdr{
    background:rgba(9,24,21,.86);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .hero-bg{filter:none}
}