/* Product-page per-request tweaks.
 *
 * The ethos pull-quotes (the host "mission" quote and the guest testimonial) use the
 * DESIGN's own font — Albert Sans, via the design's own rules — NOT Humility.
 * Humility was tried here and removed 2026-07-24: too hard to read at quote size, and
 * the design intentionally isn't serif. Humility is still used elsewhere in the brand,
 * just not on these sections. Nothing to override for the font — we simply don't touch it.
 */

/* Salient's salient-dynamic-styles.css sets `blockquote{font-style:italic}` (specificity 0,0,1).
   The design never sets font-style on these quotes (it relies on the default and kills italics
   elsewhere via `em,i{font-style:normal}`), so Salient's italic wins — and because Albert Sans
   has no italic face the browser faux-slants it. The design is not italic. Restore upright;
   (0,2,2) beats Salient's bare `blockquote`, no !important needed. */
body.prod-page .ethos blockquote{font-style:normal}
/* Testimonial ("Don't just take our word for it") a touch smaller than the mission quote. */
body.prod-page .ethos[data-screen-label="Quote"] blockquote{font-size:clamp(24px,4vw,46px)}
/* Image corners. The design uses border-radius:64px WITH corner-shape:superellipse(4) — a
   subtle SQUIRCLE. corner-shape is a 2025 CSS feature; where it IS supported the design renders
   untouched (exactly the supplied HTML). Where it is NOT supported, a plain 64px falls back to a
   very-round, near-pill corner — so we swap in a smaller circular radius that approximates the
   squircle. This ONLY affects non-supporting browsers; modern ones keep the exact design. */
@supports not (corner-shape: superellipse(4)) {
  body.prod-page[data-radius="soft"] .img,
  body.prod-page[data-radius="soft"] .tl-bigimg,
  body.prod-page[data-radius="soft"] .room .img,
  body.prod-page[data-radius="soft"] .relc .img,
  body.prod-page[data-radius="soft"] .glass,
  body.prod-page[data-radius="soft"] .glass__bg,
  body.prod-page[data-radius="soft"] .itin2__imgwrap{border-radius:24px}
}

/* Form-field underline — straight line, no "lips".
   The booking/enquiry fields draw their focus (white) and error (red) underline with
   `box-shadow: inset 0 -2px`. On the soft-rounded (5px) field boxes an INSET shadow hugs
   the corner radius, so the line curls up at both ends — the little "lips" Emma flagged.
   Fix: while that underline is showing, square only the BOTTOM corners (top stays rounded),
   so the 2px line runs dead straight across the full width of the box — like a Material
   text field. Covers text inputs, textareas, selects, the intro box, the "other" field
   and the dropdown button, in both focus and invalid states. Lives here (not in the
   Design-shipped fm-page.css / prive-system.css) so a future deploy can't revert it. */
body.prod-page .fld input:focus,
body.prod-page .fld textarea:focus,
body.prod-page .fld select:focus,
body.prod-page .fld input.invalid,
body.prod-page .fld textarea.invalid,
body.prod-page .introbox textarea:focus,
body.prod-page .introbox textarea.invalid,
body.prod-page .enquire #enqOther:focus,
body.prod-page .enquire #enqOther.invalid,
body.prod-page .enquire .dd.invalid .dd__btn{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* Emma 2026-08-07: paragraph body-copy spacing too loose site-wide on product
   pages — reduce inter-paragraph gap to ~2/3. Only the last paragraph gap in a
   block matters, so trimming margin-bottom is the correct lever. */
body.prod-page .lead p{margin-bottom:12px !important}
body.prod-page .host2__body p{margin-bottom:11px !important}
body.prod-page .dbd__panel p{margin-bottom:9px !important}
body.prod-page .chday p{margin-bottom:8px !important}
body.prod-page .impact__c p{margin-bottom:11px !important}
body.prod-page .tl-big p{margin-bottom:9px !important}
body.prod-page .tl-body p{margin-bottom:6px !important}

/* ── Guest-list overlay — SIGNED-OFF CSS verbatim from Massimo #wl-test (Design pkg8) ──
   Replaces the earlier pkg6 port so injected overlays match the design exactly
   (centred done-state, lead alignment, spacing). .applycard{position:relative} kept below. */
/* Selectable departures — clean white cards, no borders */
.deps[role="radiogroup"]{display:flex;flex-direction:column;gap:11px;margin-top:13px;padding-top:0;box-shadow:none}
.dep--sel,.deps[role="radiogroup"] .dep{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:17px 18px;background:#fff;border:0;border-radius:14px;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(20,18,12,.05),0 12px 28px -12px rgba(20,18,12,.16);transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease)}
.deps[role="radiogroup"] .dep__d{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0;line-height:1.2;font-size:16.5px;font-weight:450;color:var(--ink);letter-spacing:-.01em;transition:color .2s var(--ease)}
.deps[role="radiogroup"] .dep__d small{margin:0;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#57534a;line-height:1.3;white-space:nowrap}
.dep__radio{display:none}
.dep--sel:hover{transform:translateY(-1px);box-shadow:0 2px 5px rgba(20,18,12,.06),0 18px 36px -14px rgba(20,18,12,.22)}
.dep--sel[aria-checked="true"]{background:#fff;box-shadow:0 0 0 1.5px var(--green),0 1px 2px rgba(20,18,12,.05),0 14px 30px -14px rgba(44,58,57,.26)}
.dep--sel[aria-checked="true"] .dep__d{color:var(--green);font-weight:500}
.deps[role="radiogroup"] .dep__s{flex:none;align-self:flex-start;margin-top:1px;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:6px 11px;border-radius:999px;white-space:nowrap;line-height:1}
.deps[role="radiogroup"] .dep__s.open{color:var(--green);background:rgba(44,58,57,.1)}
.deps[role="radiogroup"] .dep__s.wait{color:#8a6321;background:rgba(180,130,40,.16)}
.deps[role="radiogroup"] .dep__s.closed{color:var(--muted);background:rgba(60,58,50,.08)}
.dep.is-closed{cursor:default;opacity:.68;box-shadow:0 1px 2px rgba(20,18,12,.04)}
.dep.is-closed:hover{transform:none;box-shadow:0 1px 2px rgba(20,18,12,.04)}
.deps.nudge{animation:depNudge .4s var(--ease)}
@keyframes depNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* Top group/private toggle — white to match the cards */
.applycard .mode-toggle{background:#fff;box-shadow:0 1px 2px rgba(20,18,12,.05),0 8px 20px -12px rgba(20,18,12,.14)}
/* CTA prompt state */
.applycard .ac-cta[aria-disabled="true"]{background:var(--bg-soft2);color:var(--muted);cursor:default}
.applycard .ac-cta[aria-disabled="true"]:hover{background:var(--bg-soft2)}
/* Waitlist overlay */
@media(max-width:920px){.applycard{position:relative}}
.wl{position:absolute;inset:0;border-radius:inherit;z-index:6;background:var(--green);color:var(--on);display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,2.8vw,42px) clamp(28px,2.6vw,38px);opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s}
.wl.open{opacity:1;visibility:visible;transform:none}
.wl [hidden]{display:none}
.wl__back{position:absolute;top:20px;left:clamp(28px,2.6vw,38px);background:none;border:0;color:rgba(246,244,239,.68);font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:6px 0;transition:color .2s}
.wl__back:hover{color:var(--on)}
.wl__k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,244,239,.66);margin:0 0 12px}
.wl__lead{font-weight:300;font-size:15.5px;line-height:1.5;color:rgba(246,244,239,.9);margin:0 0 22px;max-width:34ch}
.wl__lead b{font-weight:500;color:var(--on)}
.wl__fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wl .fld input{border-radius:5px}
.wl .fld__l{color:rgba(246,244,239,.66)}
.wl .fld input.invalid{box-shadow:inset 0 -2px 0 0 #b23120}
.wl .fld input.invalid::placeholder{color:#b23120}
/* ROOT CAUSE of "videos are missing" (Emma, all devices): .hero__still comes AFTER the
   video in the markup, so at equal z-index the poster paints OVER the playing video —
   the video ran invisibly underneath on every page. Lift the video above the still
   (title art is at z:2/3 and stays on top). The still remains the loading/blocked
   fallback: product-chrome keeps the video at opacity 0 until it actually plays. */
body.prod-page .hero video{ z-index:1 }

/* Mobile: the page-nav BOOK · <product> CTA and Salient's burger share the top-right
   corner (Emma QA 2026-08-10, Elkemist) — clear the 32px burger + its edge offset. */
@media (max-width: 999px){
  body.prod-page .nav .nav-links .cta{ margin-right: 56px }
}
/* visible validation message (Viktor P2 — form must never fail silently) */
.wl__err{margin:14px 0 0;font-size:12.5px;font-weight:500;line-height:1.45;letter-spacing:.02em;color:#f0b4a8}
.wl__err[hidden]{display:none}
/* Private durations — match clean white cards */
.priv-durs[role="radiogroup"]{display:flex;flex-direction:column;gap:11px;margin-top:13px}
.priv-dur--sel{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:#fff;border:0;border-radius:14px;font:inherit;padding:17px 18px;cursor:pointer;box-shadow:0 1px 2px rgba(20,18,12,.05),0 12px 28px -12px rgba(20,18,12,.16);transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease)}
.priv-durs[role="radiogroup"] .priv-dur--sel .pd-d{flex:1 1 auto;font-size:16.5px;font-weight:450;color:var(--ink);letter-spacing:-.01em;transition:color .2s var(--ease)}
.priv-durs[role="radiogroup"] .priv-dur--sel .pd-n{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding:6px 11px;border-radius:999px;background:rgba(60,58,50,.08);line-height:1}
.priv-dur--sel:hover{transform:translateY(-1px);box-shadow:0 2px 5px rgba(20,18,12,.06),0 18px 36px -14px rgba(20,18,12,.22)}
.priv-dur--sel[aria-checked="true"]{background:#fff;box-shadow:0 0 0 1.5px var(--green),0 1px 2px rgba(20,18,12,.05),0 14px 30px -14px rgba(44,58,57,.26)}
.priv-durs[role="radiogroup"] .priv-dur--sel[aria-checked="true"] .pd-d{color:var(--green);font-weight:500}
/* ===== Bottom form: group/private toggle + Privé "When" month picker ===== */
.enquire .bk-mode{position:relative;display:flex;isolation:isolate;overflow:hidden;max-width:340px;margin:0 0 18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(246,244,239,.3)}
.enquire .bk-mode::before{content:"";position:absolute;top:0;left:0;width:50%;height:100%;background:var(--on);transform:translateX(0);transition:transform .36s cubic-bezier(.45,.02,.16,1);z-index:0}
.enquire .bk-mode[data-active="private"]::before{transform:translateX(100%)}
.enquire .bk-mode button{position:relative;z-index:1;flex:1;padding:14px 12px;font-family:inherit;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,244,239,.72);background:none;border:0;cursor:pointer;transition:color .3s}
.enquire .bk-mode button.on{color:var(--green-deep)}
.bk-when[hidden]{display:none}
.enquire .when{margin-left:0}
.enquire .yrow{margin-top:10px}
.enquire .yrow:first-child{margin-top:0}
.enquire .yrow__yr{display:block;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,244,239,.55);margin-bottom:10px}
.enquire .yrow__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.enquire .when .month{position:relative;display:flex;align-items:center;justify-content:center;height:50px;padding:0;background:rgba(246,244,239,.07);color:var(--on);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:background .18s var(--ease),color .18s var(--ease)}
.enquire .when .month.is-best{background:rgba(246,244,239,.13)}
.enquire .when .month:hover{background:rgba(246,244,239,.22)}
.enquire .when .month.on{background:var(--on);color:var(--green-deep)}
.enquire .when .month .mo{line-height:1}
.enquire .when .month .dot{position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:rgba(246,244,239,.4);transition:background .18s}
.enquire .when .month.on .dot{background:var(--green)}
.enquire .yrow__grid[hidden]{display:none}
.enquire .yrow__toggle{font:inherit;background:none;color:rgba(246,244,239,.55);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:0;margin-bottom:10px;cursor:pointer}
.enquire .yrow__toggle:hover{color:var(--on)}
.enquire .when__flex{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin-top:16px;padding:15px 18px;border:0;cursor:pointer;background:rgba(246,244,239,.07);color:var(--on);text-align:left;font-family:inherit;transition:background .18s var(--ease),color .18s var(--ease)}
.enquire .when__flex:hover{background:rgba(246,244,239,.16)}
.enquire .when__flex[aria-pressed="true"]{background:var(--on);color:var(--green-deep)}
.enquire .when__flexk{font-weight:500;font-size:13.5px;letter-spacing:.01em}
.enquire .when__flexv{font-weight:300;font-size:13.5px;line-height:1.45;color:rgba(246,244,239,.62)}
.enquire .when__flex[aria-pressed="true"] .when__flexv{color:rgba(26,44,36,.66)}
.enquire .when__flextick{position:absolute;top:15px;right:18px;font-size:14px;opacity:0;transition:opacity .18s}
.enquire .when__flex[aria-pressed="true"] .when__flextick{opacity:1}
.enquire .when__key{display:flex;align-items:center;gap:9px;margin-top:14px;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,244,239,.55)}
.enquire .when__key .kdot{width:6px;height:6px;border-radius:50%;background:rgba(246,244,239,.4);flex:none}
@media(max-width:480px){.enquire .yrow__grid{grid-template-columns:repeat(4,1fr)}}
.enquire .when .month{border-radius:5px}
.enquire .when__flex{border-radius:5px}
.wl__guests{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 24px;padding-top:22px;box-shadow:inset 0 1px 0 rgba(246,244,239,.16)}
.wl__glabel{display:flex;flex-direction:column;gap:4px}
.wl__glabel span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on)}
.wl__glabel small{font-size:12px;font-weight:300;color:rgba(246,244,239,.6)}
.wl__step{display:flex;align-items:center;gap:14px}
.wl__pm{width:38px;height:38px;border-radius:50%;background:rgba(246,244,239,.12);color:var(--on);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .16s}
.wl__pm:hover{background:rgba(246,244,239,.24)}
.wl__pm:disabled{opacity:.35;pointer-events:none}
.wl__num{min-width:40px;text-align:center;font-weight:300;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.applycard .wl__cta{background:var(--on);color:var(--green);margin-top:2px}
.applycard .wl__cta:hover{background:#fff;opacity:1}
.wl__fine{font-size:11.5px;font-weight:300;line-height:1.5;color:rgba(246,244,239,.6);margin-top:14px;text-align:center}
.wl__done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.wl__check{width:52px;height:52px;border-radius:50%;background:rgba(246,244,239,.14);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--on);margin-bottom:4px}
.wl__done h3{font-weight:300;font-size:24px;letter-spacing:-.01em;color:var(--on)}
.wl__done p{font-weight:300;font-size:15px;line-height:1.55;color:rgba(246,244,239,.82);max-width:32ch;margin:0}
.wl__done p b{font-weight:500;color:var(--on)}
.wl__backlink{margin-top:14px;background:none;border:0;color:rgba(246,244,239,.7);font:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.wl__backlink:hover{color:var(--on)}
.applycard{position:relative}

/* ── Signed-off booking card (Design pkg8, Massimo reference) · #dep2-css ──
   Shared so NON-rolled pages (Garzón, La Soplada, Raymond Blanc…) render the same card
   format; rolled pages carry identical per-page copies — harmless duplication. */
/* Group-departure selector — modern, restrained. Brand green appears ONLY as the select check. Selected-marker + surface are review tweaks (data-bk-sel / data-bk-depth); every value maps to a brand token — no new colours. */
.applycard .abx__q{margin:14px 0 18px}
.deps2{display:flex;flex-direction:column;margin-top:4px}
.dep2{position:relative;display:grid;grid-template-columns:1fr auto 20px;align-items:center;column-gap:14px;width:100%;text-align:left;font:inherit;background:transparent;border:0;border-radius:12px;padding:15px 14px;transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
button.dep2{cursor:pointer}
.dep2__l{display:flex;flex-direction:column;gap:7px;min-width:0}
.dep2__date{position:relative;align-self:flex-start;font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.1;color:var(--ink);transition:font-weight .15s}
.dep2__nights{font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dep2__avail{justify-self:end;text-align:right;white-space:nowrap;font-weight:500;font-size:12.5px;letter-spacing:-.005em;color:var(--ink-soft)}
.dep2__avail.low{font-weight:600;color:var(--ink)}
.dep2__avail.full{font-weight:500;color:var(--muted)}
.dep2__tick{justify-self:end;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);position:relative;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.dep2.is-sel .dep2__tick{background:var(--green);box-shadow:none}
.dep2.is-sel .dep2__tick::after{content:"";position:absolute;left:6.5px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.dep2:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* surface · raised: crisp light cards */
body[data-bk-depth="raised"] .deps2{gap:9px}
body[data-bk-depth="raised"] .dep2{background:#fff;box-shadow:0 1px 2px rgba(20,18,12,.05)}
body[data-bk-depth="raised"] button.dep2:hover{transform:translateY(-1px);box-shadow:0 5px 14px -6px rgba(20,18,12,.18)}
body[data-bk-depth="raised"] .dep2.is-sel{box-shadow:0 5px 16px -7px rgba(20,18,12,.22)}
/* surface · flat: hairline list, no shadow */
body[data-bk-depth="flat"] .deps2{gap:0}
body[data-bk-depth="flat"] .dep2{border-radius:8px;box-shadow:inset 0 -1px 0 var(--line)}
body[data-bk-depth="flat"] .deps2 .dep2:last-child{box-shadow:none}
body[data-bk-depth="flat"] button.dep2:hover{background:rgba(20,18,12,.035)}
/* marker · check: bolder date only */
body[data-bk-sel="check"] .dep2.is-sel .dep2__date{font-weight:600}
/* marker · tint: neutral warm fill (never green) */
body[data-bk-sel="tint"][data-bk-depth="flat"] .dep2.is-sel{background:var(--bg-soft2)}
body[data-bk-sel="tint"][data-bk-depth="raised"] .dep2.is-sel{background:var(--bg-soft)}
/* marker · line: green underline accent under the date */
body[data-bk-sel="bar"] .dep2.is-sel .dep2__date::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--green)}
/* review-only launcher */
#twOpen{position:fixed;right:18px;bottom:18px;z-index:1000;display:none;background:var(--ink);color:#fff;font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer}
#tweaks:not(.on)~#twOpen{display:block}


/* ── Signed-off booking card (Design pkg8, Massimo reference) · #box-refine ──
   Shared so NON-rolled pages (Garzón, La Soplada, Raymond Blanc…) render the same card
   format; rolled pages carry identical per-page copies — harmless duplication. */
/* Booking box refinements */
.applycard .ac-k{margin-bottom:18px}
.applycard .abx__q{margin:0 0 22px;font-size:14px;line-height:1.6;color:var(--muted)}
.applycard .mode-toggle{margin-bottom:4px}
.applycard .deps__h{margin:26px 0 12px}
.applycard .mode-panel:not([hidden]){display:flex;flex-direction:column;min-height:360px}
.applycard .mode-panel .ac-cta{margin-top:auto}
.applycard .ac-avail{margin-top:28px;padding-top:24px}
body[data-bk-depth="raised"] .applycard .deps2{gap:10px}
body[data-bk-depth="raised"] .applycard .dep2{background:#fff;box-shadow:none;padding:18px 18px}
body[data-bk-depth="raised"] .applycard button.dep2:hover{transform:none;box-shadow:none;background:rgba(20,18,12,.03)}
body[data-bk-depth="raised"] .applycard .dep2.is-sel{box-shadow:none;background:var(--bg-soft2)}
.applycard .dep2__date{font-weight:400}
body[data-bk-sel="check"] .applycard .dep2.is-sel .dep2__date{font-weight:400}
.applycard .priv-durs[role="radiogroup"]{gap:10px;margin-top:12px}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;background:#fff;border:0;border-radius:12px;padding:18px 18px;box-shadow:none;transition:background .2s var(--ease)}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel:hover{transform:none;box-shadow:none;background:rgba(20,18,12,.03)}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel[aria-checked="true"]{background:var(--bg-soft2);box-shadow:none}
.applycard .priv-durs .priv-dur--sel .pd-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel .pd-d{flex:none;font-weight:500;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel[aria-checked="true"] .pd-d{color:var(--ink);font-weight:500}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel .pd-n{flex:none;align-self:flex-start;font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:none;padding:0;border-radius:0}
.applycard .priv-durs .priv-dur--sel .pd-tick{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);position:relative;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.applycard .priv-durs .priv-dur--sel[aria-checked="true"] .pd-tick{background:var(--green);box-shadow:none}
.applycard .priv-durs .priv-dur--sel[aria-checked="true"] .pd-tick::after{content:"";position:absolute;left:6.5px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.enquire .bkkids-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:14px}
.enquire .bkkids-row .numrow{margin-left:0}
.enquire .numrow__l{padding:0 6px 0 16px;font-weight:400;font-size:13px;letter-spacing:.02em;color:var(--on-2);white-space:nowrap}
.enquire #bkChildren{margin-top:12px}
.enquire .consent{margin-top:18px}


/* ── Signed-off booking card (Design pkg8, Massimo reference) · #box-refine2 ──
   Shared so NON-rolled pages (Garzón, La Soplada, Raymond Blanc…) render the same card
   format; rolled pages carry identical per-page copies — harmless duplication. */
.applycard{background:#f1efe8}
.applycard .mode-toggle{box-shadow:none}
body[data-bk-depth="raised"] .applycard .dep2.is-sel{background:#fff;box-shadow:none}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel[aria-checked="true"]{background:#fff;box-shadow:none}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel .pd-d{font-weight:400}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel[aria-checked="true"] .pd-d{font-weight:400}
.applycard .dep2.is-sel .dep2__tick::after,.applycard .priv-durs .priv-dur--sel[aria-checked="true"] .pd-tick::after{left:50%;top:50%;transform:translate(-50%,-60%) rotate(45deg)}
.wl .fld input.invalid{box-shadow:none}
.wl .fld input.invalid::placeholder{color:rgba(246,244,239,.5)}
.applycard .ac-k{color:var(--ink)}
.applycard .abx__q{color:var(--ink-soft)}
body[data-bk-depth="raised"] .applycard .dep2{border-radius:5px}
.applycard .priv-durs[role="radiogroup"] .priv-dur--sel{border-radius:5px}
.applycard .wl{justify-content:flex-end;padding-bottom:140px}


/* ── Signed-off booking card (Design pkg8, Massimo reference) · #box-refine3 ──
   Shared so NON-rolled pages (Garzón, La Soplada, Raymond Blanc…) render the same card
   format; rolled pages carry identical per-page copies — harmless duplication. */
.applycard .wl,.applycard .wl.open{transform:none}
/* error UX — subtle, no red on green */
.enquire .fld input.invalid,.enquire .fld textarea.invalid{box-shadow:inset 0 0 0 1.5px rgba(246,244,239,.9);background:rgba(246,244,239,.06)}
.enquire .fld input.invalid::placeholder{color:rgba(246,244,239,.55)}
.enquire .consent.invalid input{box-shadow:0 0 0 1.5px rgba(246,244,239,.9)}
.enquire .fld__err{color:var(--on);font-weight:500;background:rgba(246,244,239,.12);padding:12px 15px;border-radius:5px;margin-left:24px}

/* ── FAQ list markers: some contexts leak the theme's ul bullets into the FAQ list ──
   (Emma QA: "some FAQs have a dot before the question and answer"). Kill them everywhere. */
body.prod-page ul.faq,body.prod-page .faqs ul{list-style:none !important;padding-left:0 !important;margin-left:0 !important}
body.prod-page ul.faq li,body.prod-page .faqs li{list-style:none !important}
body.prod-page ul.faq li::marker,body.prod-page .faqs li::marker{content:"" !important}
body.prod-page ul.faq li::before,body.prod-page .faqs li::before{content:none !important;display:none !important}

/* ── Hero load smoothing (Emma QA: image flickers in before the video, then the PNG pops) ──
   Keep the still frame as the permanent base layer; the video fades in over it once actually
   playing (JS in product-chrome.js drives the fade; this just enables the base layer). */
body.prod-page .hero--poster .hero__still{display:block}

/* ── Overlay hard-enforcement (Emma QA: WW's bespoke page CSS turned the guestlist submit
   dark-on-dark with capitalize + square fields). The signed-off design must win over any
   per-page bespoke styles, hence !important on the critical properties. */
.applycard .wl .wl__cta{background:var(--on,#F6F4EF) !important;color:var(--green,#2C3A39) !important;text-transform:uppercase !important}
.applycard .wl .wl__cta:hover{background:#fff !important;color:var(--green,#2C3A39) !important;opacity:1 !important}
.applycard .wl .fld input{border-radius:5px !important}

/* CTA on the green enquire band must be cream-on-green (system: the band is the accent;
   a dark button on it is dark-on-dark). Used by the Elkemist hand-off banner. */
.enquire .btn--onband{background:var(--on,#F6F4EF) !important;color:#1A2C24 !important}
.enquire .btn--onband:hover{background:#fff !important;color:#1A2C24 !important}

/* ── Elkemist hand-off band: one centred axis for every element ──
   The system's .enquire__head h2/p carry max-width boxes that hug left; on the
   hand-off band (no form column) the whole composition must centre as one block. */
.enquire .elk-handoff{grid-column:1/-1 !important;justify-self:center;width:100%;max-width:760px;margin:0 auto;text-align:center}
.enquire .elk-handoff h2,
.enquire .elk-handoff p{margin-left:auto !important;margin-right:auto !important}
.enquire .elk-handoff h2{max-width:22ch}
.enquire .elk-handoff p{max-width:52ch}

/* ── Overlay submit = the standard full web button (Emma QA: it rendered shrunken with the
   wrong type). Exact clone of the card CTA: full width, 12px/500, .2em tracking, 18/32 pad,
   5px radius — in cream on the green panel. !important so no per-page CSS can shrink it. ── */
.applycard .wl .wl__cta{
  display:block !important; width:100% !important; box-sizing:border-box !important;
  font-size:12px !important; font-weight:500 !important; letter-spacing:.2em !important;
  text-transform:uppercase !important; text-align:center !important; line-height:1.2 !important;
  padding:18px 32px !important; border-radius:5px !important; border:0 !important;
  background:var(--on,#F6F4EF) !important; color:var(--green,#2C3A39) !important; cursor:pointer;
}
.applycard .wl .wl__cta:hover{background:#fff !important;color:var(--green,#2C3A39) !important}

/* ── Validation feedback must be VISIBLE (Emma QA: clicking submit with empty fields
   silently did nothing — fields were flagged but no style existed). ── */
.applycard .wl .fld input.invalid{box-shadow:inset 0 -2px 0 0 #b23120 !important;background:rgba(178,49,32,.07) !important}
.applycard .wl .fld input.invalid::placeholder{color:#b23120 !important}

/* ── Guestlist overlay fields: CREAM IN EVERY STATE (Emma QA: fields went dark grey on
   interaction and typed text was invisible). Locks default, focus, and — the real culprit —
   Chrome's autofill repaint, which paints its own dark background over the field. ── */
.applycard .wl{color-scheme:light}
.applycard .wl .fld input{background:#F6F4EF !important;color:#1A2C24 !important;caret-color:#1A2C24 !important}
.applycard .wl .fld input:focus{background:#FFFFFF !important;color:#1A2C24 !important;outline:none}
.applycard .wl .fld input:-webkit-autofill,
.applycard .wl .fld input:-webkit-autofill:hover,
.applycard .wl .fld input:-webkit-autofill:focus,
.applycard .wl .fld input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #F6F4EF inset !important;
  -webkit-text-fill-color:#1A2C24 !important;
  caret-color:#1A2C24 !important;
  transition:background-color 5000s ease-in-out 0s !important;
}