/* Villa page (2026-11-01): everything under body.lp.vp, on top of listing-page.css (the boat page's look) and chrome.css({ base: true }) tokens.
   Panel and rows follow the approved mockups (mockups/villa-one-page.html). Text on the coral buttons is dark (var(--on-coral)), as on the boat page. */
body.lp.vp{--ok:#1d7a4d;--ok-soft:#e5f4ec;--warn:#a65c14;--warn-soft:#fcebd7}

/* two columns: main + 380px card, one column and a bottom sheet from 980px down (the app's breakpoint) */
body.lp.vp div.svcwrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start;margin-top:8px}
body.lp.vp div.svcwrap>*{min-width:0}
body.lp.vp .lmain .desc{margin-bottom:16px}

/* gallery: "Show all" and the clickable tiles */
body.lp.vp .lgal{position:relative}
body.lp.vp .lgal .gi{cursor:zoom-in}
body.lp.vp .vshowall{position:absolute;right:14px;bottom:14px;z-index:4;background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:10px;padding:8px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
body.lp.vp .vshowall:hover{background:var(--sand)}
body.lp.vp .lcredit a{color:inherit;text-decoration:underline}

/* section nav: sticky under the site header */
body.lp.vp .vsnav{position:sticky;top:0;z-index:20;background:var(--sand);border-bottom:1px solid var(--line);margin:0 0 6px;display:flex;gap:22px;overflow-x:auto;white-space:nowrap}
body.lp.vp .vsnav a{text-decoration:none;font-size:14px;font-weight:600;padding:12px 0;border-bottom:2px solid transparent;color:var(--muted)}
body.lp.vp .vsnav a.on{color:var(--ink);border-bottom-color:var(--coral)}
body.lp.vp .vsnav a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
body.lp.vp .vsec{padding:24px 0;border-bottom:1px solid var(--line);scroll-margin-top:56px}
body.lp.vp .vsec:last-of-type{border-bottom:0}
body.lp.vp .vsec h2{margin:0 0 12px}
body.lp.vp .vfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:6px}
body.lp.vp .vfact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
body.lp.vp .vfact b{display:block;font-family:var(--display);font-size:24px;line-height:1.1;color:var(--ink)}
body.lp.vp .vfact span{font-size:13px;color:var(--muted)}

/* collapsible rows */
body.lp.vp details.vprow{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
body.lp.vp details.vprow>summary{list-style:none;display:flex;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
body.lp.vp details.vprow>summary::-webkit-details-marker{display:none}
body.lp.vp details.vprow>summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
body.lp.vp .vrt{flex:1;min-width:0}
body.lp.vp .vrt b{display:block;font-size:15.5px;color:var(--ink)}
body.lp.vp .vrt span{font-size:13px;color:var(--muted)}
body.lp.vp .vchev{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative;transition:transform .2s}
body.lp.vp .vchev:after{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-1px,-1px)}
body.lp.vp details[open]>summary .vchev{transform:rotate(180deg)}
body.lp.vp .vrb{padding:2px 16px 16px;border-top:1px solid #eee4d3;font-size:14.5px}
body.lp.vp .vrb p{margin:12px 0 0}
body.lp.vp .vlist{margin:12px 0 0;padding:0;list-style:none}
body.lp.vp .vlist li{padding:4px 0}
body.lp.vp .vlist li:before{content:"\2022";color:var(--teal);margin-right:8px;font-weight:700}
body.lp.vp .vlist small{color:var(--muted)}
body.lp.vp .vtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
body.lp.vp .vtag{font-size:12.5px;background:var(--teal-wash);color:var(--teal-deep);border-radius:999px;padding:3px 10px;font-weight:600}
body.lp.vp .vrphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
body.lp.vp .vgi{border:0;padding:0;background:#cfe3ea;border-radius:12px;overflow:hidden;height:104px;cursor:zoom-in;display:block;width:100%}
body.lp.vp .vgi img{width:100%;height:100%;object-fit:cover;display:block}
body.lp.vp .vam{columns:2;column-gap:24px;margin:12px 0 0;padding:0;list-style:none;font-size:14.5px}
body.lp.vp .vam li{padding:3px 0;break-inside:avoid}
body.lp.vp .vam li:before{content:"\2713";color:var(--ok);margin-right:8px;font-weight:700}
body.lp.vp .vwhere{margin:0 0 10px}
body.lp.vp .vdist{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
body.lp.vp .vdist div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--muted)}
body.lp.vp .vdist b{display:block;font-size:15px;color:var(--ink)}
body.lp.vp .vmaplink{font-weight:700;color:var(--teal-deep)}
body.lp.vp .vnote{font-size:13px;color:var(--muted)}

/* similar villas */
body.lp.vp .vsimgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body.lp.vp a.vsim{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block;color:var(--ink)}
body.lp.vp a.vsim img,body.lp.vp .vph{width:100%;height:112px;object-fit:cover;display:block;background:linear-gradient(135deg,#d9ecef,#f3e7d3)}
body.lp.vp .vsi{padding:10px 12px;font-size:13px;color:var(--muted)}
body.lp.vp .vsi b{display:block;font-size:14.5px;color:var(--ink)}
body.lp.vp .vsi span{display:block}
body.lp.vp .vpr{color:var(--ink);font-weight:700;margin-top:2px}

/* the price card and its request form */
body.lp.vp .vpcard{position:sticky;top:64px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);max-height:calc(100vh - 80px);overflow:auto}
body.lp.vp .vfrom{font-family:var(--display);font-size:30px;font-weight:600;line-height:1.1;color:var(--ink)}
body.lp.vp .vfrom small{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--muted)}
body.lp.vp .vhint{font-size:13px;color:var(--muted);margin:6px 0 14px}
body.lp.vp .vbox{border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}
body.lp.vp .vbox.one{grid-template-columns:1fr}
body.lp.vp .vbox .vf{padding:9px 12px;min-width:0}
body.lp.vp .vbox .vf+.vf{border-left:1px solid var(--line)}
body.lp.vp .vbox label{display:block;font-size:10.5px;letter-spacing:.06em;font-weight:700;color:var(--ink);text-transform:uppercase}
body.lp.vp .vbox input,body.lp.vp .vbox select{border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);width:100%;padding:0;outline:0}
body.lp.vp .vbox:focus-within{border-color:var(--ink)}
body.lp.vp .vreserve{display:block;width:100%;border:0;border-radius:12px;background:var(--coral);color:var(--on-coral,var(--ink));font:inherit;font-weight:700;font-size:15px;padding:13px;margin-top:2px;text-align:center;text-decoration:none;cursor:pointer}
body.lp.vp .vreserve:hover{filter:brightness(.95)}
body.lp.vp .vreserve:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
body.lp.vp .vreserve.ghost{background:#fff;color:var(--teal-deep);border:1.5px solid var(--teal-deep);margin-top:10px}
body.lp.vp .vsmall{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 0}
body.lp.vp .vsmall a{color:var(--teal-deep);font-weight:700}
body.lp.vp .vbrk{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:13.5px}
body.lp.vp .vbrk div{display:flex;justify-content:space-between;padding:3px 0;gap:10px}
body.lp.vp .vbrk .t{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:700}
body.lp.vp .vbrk p,body.lp.vp .vcalc p{font-size:13px;color:var(--muted);margin:8px 0 0}
body.lp.vp .vwarn{display:block;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 10px;font-size:13px;margin:6px 0}
body.lp.vp .vnotice-banner{background:#fff4e6;border:1px solid #f0d3a8;color:#6b4300;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;margin:0 0 14px}
body.lp.vp details.vprow .vrt b .vpr{display:inline;font-weight:700;color:var(--teal-deep);margin:0}
body.lp.vp .vnotice{display:block;background:var(--teal-wash);color:var(--teal-deep);border-radius:10px;padding:8px 10px;font-size:13px;margin:8px 0 0}
body.lp.vp .vstep2,body.lp.vp .vsent{display:none}
body.lp.vp .vpcard.form .vstep1{display:none}
body.lp.vp .vpcard.form .vstep2{display:block}
body.lp.vp .vpcard.done .vformbody{display:none}
body.lp.vp .vpcard.done .vsent{display:block}
body.lp.vp .vfh h3{font-family:var(--display);font-size:21px;margin:0 0 4px;color:var(--ink)}
body.lp.vp .vtot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:4px 0}
body.lp.vp .vtot span{font-size:13px;color:var(--muted)}
body.lp.vp .vtot b{font-family:var(--display);font-size:28px;line-height:1}
body.lp.vp .vreq{font-size:12.5px;background:var(--teal-wash);color:var(--teal-deep);border-radius:10px;padding:8px 10px;margin:6px 0 12px}
body.lp.vp .vfld{margin-bottom:10px}
body.lp.vp .vfld>label{display:block;font-size:12px;font-weight:700;margin-bottom:4px}
body.lp.vp .vfld input[type=text],body.lp.vp .vfld input[type=email],body.lp.vp .vfld input[type=tel],body.lp.vp .vfld textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;background:#fff;color:var(--ink)}
body.lp.vp .vfld textarea{resize:vertical;min-height:64px}
body.lp.vp .vtwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.lp.vp .vstp{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:6px 10px;margin-bottom:4px}
body.lp.vp .vstp button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1;color:var(--ink);cursor:pointer}
body.lp.vp .vstp b{font-size:16px}
body.lp.vp .vmax{font-size:13px;color:var(--muted);margin:4px 0 12px}
body.lp.vp .vxt{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
body.lp.vp .vxt h4{margin:0;padding:9px 12px;font-size:12px;font-weight:700;background:var(--sand-2);display:flex;justify-content:space-between}
body.lp.vp .vxt h4 span{font-weight:500;color:var(--muted)}
body.lp.vp .vxi{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-top:1px solid #eee4d3;font-size:13.5px;cursor:pointer}
body.lp.vp .vxi input{margin-top:3px;flex:none}
body.lp.vp .vxn{flex:1;min-width:0}
body.lp.vp .vxn small{display:block;color:var(--muted);font-size:12.5px}
body.lp.vp .vxp{flex:none;font-weight:700;font-size:13px;text-align:right}
body.lp.vp .vxp.rq{font-weight:500;color:var(--warn)}
body.lp.vp .vxi.inc{cursor:default;background:#fbf9f4}
body.lp.vp .vxi.inc .vxp{color:var(--ok)}
body.lp.vp .vcalc{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-size:13.5px}
body.lp.vp .vcalc div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
body.lp.vp .vcalc .t{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:700;font-size:15px}
body.lp.vp .verr{background:#fdeaea;color:#9b2c2c;border-radius:10px;padding:8px 10px;font-size:12.5px;margin-top:10px}
body.lp.vp .verr[hidden]{display:none}
body.lp.vp .vconsent{font-size:12.5px;color:var(--muted);margin:8px 0 0}
body.lp.vp .vconsent a{color:inherit;text-decoration:underline}
body.lp.vp .vsent{text-align:center;padding:14px 4px}
body.lp.vp .vsent h3{font-family:var(--display);margin:6px 0}
body.lp.vp .vsent p{color:var(--muted);font-size:14px}
body.lp.vp .vok{font-size:30px;color:var(--ok)}
body.lp.vp .vbar,body.lp.vp .vscrim{display:none}

/* photo viewer */
.vvw{position:fixed;inset:0;background:#0b1a1e;z-index:200;display:none;flex-direction:column;color:#fff}
.vvw.open{display:flex}
.vvw .vtop{display:flex;gap:10px;align-items:center;padding:12px 16px;overflow-x:auto}
.vvw .vtop button{background:transparent;color:#fff;border:1px solid #ffffff55;border-radius:999px;padding:5px 14px;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.vvw .vtop button.on{background:#fff;color:#12333a}
.vvw .vtop .vx{margin-left:auto;font-size:22px;padding:2px 12px}
.vvw .vstage{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;min-height:0}
.vvw .vfr{flex:1;height:100%;max-width:1000px;display:flex;align-items:center;justify-content:center;min-height:0}
.vvw .vfr img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.vvw .vnb{background:#ffffff22;border:0;color:#fff;width:44px;height:44px;border-radius:50%;font-size:22px;flex:none;cursor:pointer}
.vvw .vcap{padding:12px 16px 18px;text-align:center;font-size:14px}
.vvw .vcap small{opacity:.75;display:block;margin-top:2px}

@media(max-width:980px){
  body.lp.vp div.svcwrap{grid-template-columns:1fr;gap:0}
  body.lp.vp .vpcard{display:none;position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:22px 22px 0 0;z-index:90;max-height:88vh;overflow:auto;border-bottom:0}
  body.lp.vp .vpcard.sheet{display:block}
  body.lp.vp .vscrim.on{display:block;position:fixed;inset:0;background:#0b1a1e66;z-index:80}
  body.lp.vp .vbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 16px;justify-content:space-between;align-items:center;z-index:70;gap:12px}
  body.lp.vp .vbar b{font-family:var(--display);font-size:19px}
  body.lp.vp .vbar small{display:block;font-size:12px;color:var(--muted)}
  body.lp.vp .vbar .vreserve{width:auto;margin:0;padding:11px 18px}
  body.lp.vp .vsimgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.lp.vp .vam{columns:1}
  body.lp.vp .vtwo{grid-template-columns:1fr}
  body.lp.vp{padding-bottom:76px}
}

/* Add to trip (trip-store.js): the pressed state of the button inside the card */
body.lp.vp .vreserve.ghost.added,body.lp.vp .tripadd.added{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
body.lp.vp .vpcard .tripadd-wrap{margin-top:10px}

/* the live villa page's proportions (the old template set --page-max:1040px): same column width, hero ratio and card width as www.caribbein.fr */
body.lp.vp{--page-max:996px}
body.lp.vp div.svcwrap{grid-template-columns:minmax(0,1fr) 340px;gap:40px}
@media(max-width:980px){body.lp.vp div.svcwrap{grid-template-columns:1fr;gap:0}}
@media(min-width:981px){body.lp.vp .lgallery{height:460px}body.lp.vp div.svcwrap{grid-template-columns:minmax(0,1fr) 320px}}
body.lp.vp{margin:0}