/* Ported verbatim from seataya/rust/src/listing.rs (the Airbnb-pattern villa
page). Additions for WordPress are at the bottom. */
:root{--ab-ink:#222;--ab-mut:#6a6a6a;--ab-line:#dddddd;--ab-accent:#b8995a;--ab-bg:#fff}
.ab *{box-sizing:border-box}
/* Content width matched to Airbnb's measured grid (2026-08-17):
minmax(40px,1fr) 364px minmax(48px,110px) repeat(8,calc(1024px/12)) …
= 683px content + 80px gutter + 364px card = 1127px.
Ours was 1120px max-width MINUS 48px padding = 1072px usable, which left the
text column at 620px — 63px narrower than Airbnb's. The gutter was already
right; the container was the thing making the page feel cramped. */
.ab{max-width:1175px;margin:0 auto;padding:0 24px 64px;color:var(--ab-ink);
font:16px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ab svg{display:block;height:24px;width:24px;fill:currentcolor}
/* WordPress swaps emoji for sticks; the card itself stays position:relative so the date and
guest popovers anchor to it. Setting both on .ab-book made the later
`position:relative` silently cancel the sticky. */
.ab-cols>aside{position:sticky;top:24px;align-self:start}
.ab-book{border:1px solid var(--ab-line);border-radius:12px;
box-shadow:0 6px 16px rgba(0,0,0,.12);padding:24px}
.ab-book h3{margin:0 0 16px;font-size:22px;font-weight:600}
.ab-dates{border:1px solid #b0b0b0;border-radius:8px;overflow:hidden}
.ab-dates div{padding:10px 12px}
.ab-dates .r{display:grid;grid-template-columns:1fr 1fr}
.ab-dates .r>div+div{border-left:1px solid #b0b0b0}
.ab-dates label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ab-dates input{border:0;outline:0;font:inherit;font-size:14px;width:100%;padding:2px 0}
.ab-cta{width:100%;margin-top:16px;background:var(--ab-accent);color:#fff;border:0;border-radius:8px;
padding:14px;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.ab-cta:hover{filter:brightness(.94)}
.ab-note{text-align:center;color:var(--ab-mut);font-size:14px;margin-top:12px}
/* reviews */
.ab-rev{margin-top:48px}
.ab-revhead{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:600}
.ab-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;margin:24px 0 32px}
.ab-cats div span{display:block;color:var(--ab-mut);font-size:13px}
.ab-cats div b{font-size:16px}
.ab-tags{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;margin-bottom:24px}
.ab-tag{white-space:nowrap;border:1px solid var(--ab-line);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500}
.ab-revs{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px}
.ab-revs article header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ab-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px}
.ab-av--i{display:grid;place-items:center;background:#f0ece4;color:var(--ab-accent);font-weight:700;font-size:19px}
.ab-stars{display:flex;align-items:center;gap:2px;margin-bottom:6px;font-size:14px;color:var(--ab-mut)}
.ab-stars svg{height:10px;width:10px;fill:var(--ab-ink)}
.ab-stars span{margin-left:6px}
.ab-rtxt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ab-rtxt.open{-webkit-line-clamp:unset;overflow:visible}
.ab-revs article b{display:block}
.ab-revs article span{color:var(--ab-mut);font-size:14px}
.ab-revs article p{margin:8px 0 0}
/* modal */
.ab-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:none;
align-items:center;justify-content:center;padding:24px}
.ab-modal[open]{display:flex}
.ab-sheet{background:#fff;border-radius:12px;max-width:780px;width:100%;max-height:88vh;overflow:auto;
padding:32px}
.ab-x{position:sticky;top:0;float:right;background:#fff;border:0;font-size:26px;cursor:pointer;
line-height:1;z-index:2;width:40px;height:40px;border-radius:50%}
.ab-x:hover{background:#f0f0f0}
.ab-share{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.ab-share button{display:flex;align-items:center;gap:12px;border:1px solid var(--ab-line);
border-radius:12px;padding:14px 16px;background:none;font:inherit;cursor:pointer;text-align:left}
.ab-share button:hover{background:#f7f7f7}
/* Photo tour: full-width sheet with the large / paired rhythm — every third
image spans both columns, so it reads like the reference rather than one
narrow stack. */
#abGal .ab-sheet{max-width:1100px;padding:32px 40px}
.ab-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ab-gal img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;
aspect-ratio:3/2;background:#eee}
.ab-gal img:nth-child(3n+1){grid-column:1 / -1;aspect-ratio:16/9}
@media(max-width:760px){.ab-gal{grid-template-columns:1fr}
.ab-gal img,.ab-gal img:nth-child(3n+1){grid-column:auto;aspect-ratio:3/2}
#abGal .ab-sheet{padding:24px}}
.ab-dates .v{font-size:14px;padding:2px 0;color:var(--ab-ink)}
.ab-gtrig{border-top:1px solid #b0b0b0;padding:10px 12px;cursor:pointer}
.ab-gtrig .v{display:flex;align-items:center;justify-content:space-between}
.ab-gtrig svg{height:12px;width:12px;transform:rotate(90deg)}
.ab-dates .r>div{cursor:pointer}
.ab-book{position:relative}
.ab-cols>aside{z-index:2147482090}
/* Popovers must clear every later section — those create their own stacking
contexts, so a low z-index left the calendar rendering underneath them. */
/* DATE / GUEST PICKER (2026-08-17)
Was: position:absolute; right:0; top:100% — anchored below the WHOLE booking
card. Measured on the live page that put a 740px panel at y=1077 while the
card ended at y=867: 210px below the trigger, spanning most of the page
width, floating over the reviews. It was opening; you just could not see it
where you expected it, which reads as "not opening".
Anchoring a panel twice the width of its anchor is the bug. This is a
centred dialog instead — always in view, no anchor maths, no clipping from
the sticky aside — and a bottom sheet under 900px (see the media query). */
.ab-pop{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:2147482100;background:#fff;
border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.34);padding:24px;
width:min(740px,92vw);max-height:min(88vh,760px);overflow:auto}
.ab-pop[open]{display:block}
/* Shared backdrop. A ::before on .ab-pop cannot be used: the panel sets
overflow:auto, which clips the pseudo-element to its own padding box. */
.ab-popbd{display:none;position:fixed;inset:0;z-index:2147482099;
background:rgba(0,0,0,.45)}
.ab-popbd[open]{display:block}
.ab-gpop{width:400px}
.ab-caltop{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ab-caltop b{font-size:22px;display:block}
.ab-caltop span{color:var(--ab-mut);font-size:14px}
.ab-calin{display:grid;grid-template-columns:1fr 1fr;border:1px solid #b0b0b0;border-radius:8px;overflow:hidden;min-width:280px}
.ab-calin>div{padding:8px 12px;cursor:pointer}
.ab-calin>div+div{border-left:1px solid #b0b0b0}
.ab-calin>div.on{outline:2px solid #222;border-radius:8px}
.ab-calin label{display:block;font-size:10px;font-weight:700;text-transform:uppercase}
.ab-calnav{position:relative;height:0}
.ab-calnav button{position:absolute;top:24px;width:32px;height:32px;border:0;background:none;cursor:pointer;border-radius:50%}
.ab-calnav button:hover{background:#f0f0f0}
.ab-calnav button:first-child{left:0}
.ab-calnav button:last-child{right:0}
.ab-calnav svg{height:12px;width:12px;margin:auto}
.ab-months{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:16px}
@media(max-width:700px){.ab-months{grid-template-columns:1fr}}
/* MOBILE DATE/GUEST SHEET (2026-08-17) — see note above .ab-pop. */
@media(max-width:900px){
.ab-pop{position:fixed;left:0;right:0;bottom:0;top:auto;transform:none;
margin:0;width:100%;max-width:100%;height:auto;max-height:88vh;
border-radius:16px 16px 0 0;
padding:20px 18px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -6px 30px rgba(0,0,0,.32);overflow:auto;
animation:abSheetUp .18s ease-out}
.ab-pop.ab-gpop{width:100%}
.ab-calfoot{position:sticky;bottom:0;background:#fff;padding-top:10px}
}
@keyframes abSheetUp{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ab-pop{animation:none}}
.ab-mon h4{text-align:center;margin:0 0 12px;font-size:16px}
.ab-mon table{width:100%;border-collapse:collapse}
.ab-mon th{font-size:12px;font-weight:400;color:var(--ab-ink);padding:4px 0}
.ab-mon td{text-align:center;padding:2px}
.ab-mon button{width:100%;aspect-ratio:1;border:0;background:none;border-radius:50%;cursor:pointer;font:inherit;font-size:14px}
.ab-mon button:hover:not(:disabled){outline:1px solid #222}
.ab-mon button:disabled{color:#c9c9c9;text-decoration:line-through;cursor:default}
.ab-mon button.sel{background:#222;color:#fff}
.ab-mon button.inr{background:#f0efee}
.ab-calfoot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.ab-calfoot .lnk{background:none;border:0;text-decoration:underline;font:inherit;cursor:pointer}
.ab-calfoot .dark{background:#222;color:#fff;border:0;border-radius:8px;padding:11px 20px;font:inherit;font-weight:600;cursor:pointer}
.ab-grow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.ab-grow+.ab-grow{border-top:1px solid var(--ab-line)}
.ab-grow b{display:block}
.ab-grow span,.ab-grow a{color:var(--ab-mut);font-size:14px}
.ab-step{display:flex;align-items:center;gap:12px}
.ab-step button{width:32px;height:32px;border:1px solid #b0b0b0;border-radius:50%;background:none;cursor:pointer;font-size:18px;line-height:1}
.ab-step button:disabled{opacity:.3;cursor:default}
.ab-step i{font-style:normal;min-width:16px;text-align:center}
.ab-gnote{color:var(--ab-mut);font-size:12px;margin:8px 0 0}
.ab-secthead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ab-arrows{display:flex;gap:8px}
.ab-arrows button{width:32px;height:32px;border:1px solid #b0b0b0;border-radius:50%;background:#fff;
cursor:pointer;display:grid;place-items:center}
.ab-arrows button:hover{border-color:#222}
.ab-arrows svg{height:12px;width:12px}
.ab-map{width:100%;height:480px;border:0;border-radius:12px;margin-top:8px}
.ab-know{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:8px}
.ab-know div{display:flex;flex-direction:column;gap:4px}
.ab-know b{margin-top:12px}
.ab-know span{color:var(--ab-mut);font-size:15px}
.ab-know a{margin-top:8px;color:inherit;font-weight:600;width:fit-content}
@media (max-width:900px){
.ab-cols{grid-template-columns:1fr;gap:32px}
.ab-revs{grid-template-columns:1fr}
.ab-cols>aside{position:static}
}
/* MOBILE GALLERY (2026-08-17). This used to be
.ab-mos button:not(:first-child){display:none}
— a phone saw exactly one photo of twenty-eight and no way to reach the
rest. Airbnb shows a full-bleed swipeable carousel with a counter, so that
is what this is: the same grid becomes a scroll-snap flex row. Native
momentum scrolling does the swiping; no carousel library, no JS for the
gesture itself. Only the counter needs script. */
@media (max-width:900px){
.ab-mos{display:flex;grid-template-columns:none;grid-template-rows:none;
overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
gap:0;aspect-ratio:auto;height:min(68vw,320px);max-height:none;
border-radius:0;margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);
overscroll-behavior-x:contain}
.ab-mos::-webkit-scrollbar{display:none}
.ab-mos button,.ab-mos button:first-child{
flex:0 0 100%;width:100%;grid-column:auto;grid-row:auto;
scroll-snap-align:center;scroll-snap-stop:always;display:block}
.ab-mos img{height:100%}
.ab-mos .ab-xtra{display:block}
/* The desktop "Show all photos" button would sit on top of a swipe target. */
.ab-mos .ab-all{display:none}
.ab-count{display:flex}
}
/* Photo counter — Airbnb's "3 / 28" pill, bottom-right of the carousel. */
.ab-count{display:none;position:absolute;right:16px;bottom:14px;z-index:2;
align-items:center;gap:4px;pointer-events:none;
background:rgba(0,0,0,.62);color:#fff;font-size:13px;font-weight:600;
padding:5px 11px;border-radius:20px;font-variant-numeric:tabular-nums}
/* Wrapper so the counter can be absolutely positioned against the carousel
without living inside the scroll container (where it would scroll away). */
.ab-mosw{position:relative;margin-bottom:32px}
.ab-mosw .ab-mos{margin-bottom:0}
/* ── LIGHTBOX ───────────────────────────────────────────────────────────
The old "Show all photos" opened a GRID in a sheet — useful, but not the
slideshow people expect from this layout. This is the slideshow: one photo,
arrows, counter, keyboard, swipe, Esc. */
.ab-lb{position:fixed;inset:0;z-index:90;background:#000;display:none;
flex-direction:column}
.ab-lb[open]{display:flex}
.ab-lb-top{display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;color:#fff;flex:0 0 auto}
.ab-lb-top button{background:none;border:0;color:#fff;cursor:pointer;
font-size:26px;font-weight:200;line-height:1;padding:6px 12px;border-radius:50%;
opacity:.75;transition:opacity .15s ease}
.ab-lb-top button:hover,.ab-lb-top button:focus-visible{opacity:1}
.ab-lb-n{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ab-lb-stage{flex:1 1 auto;position:relative;display:flex;align-items:center;
justify-content:center;overflow:hidden;min-height:0}
/* Absolutely positioned, not a flex child with width:100%. As a flex item its
basis resolved against its own content — 28 figures each asking for 100% —
so clientWidth came out wrong and scrollTo(i * clientWidth) went nowhere:
the arrows appeared to do nothing. inset:0 gives it a definite width. */
.ab-lb-track{position:absolute;inset:0;display:flex;overflow-x:auto;
overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none;overscroll-behavior-x:contain}
.ab-lb-track::-webkit-scrollbar{display:none}
.ab-lb-track figure{flex:0 0 100%;width:100%;height:100%;margin:0;display:flex;
align-items:center;justify-content:center;scroll-snap-align:center;
scroll-snap-stop:always;padding:0 12px}
.ab-lb-track img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* Minimal: a thin chevron, no filled circle. The hit area stays 48px for
touch/pointer accuracy while the visible mark is just the glyph; the soft
shadow is what keeps it legible over a bright photo. */
.ab-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
background:transparent;color:#fff;font-size:32px;font-weight:200;line-height:1;
display:flex;align-items:center;justify-content:center;
opacity:.75;transition:opacity .15s ease;
text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ab-lb-nav:hover,.ab-lb-nav:focus-visible{opacity:1;background:transparent}
.ab-lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ab-lb-prev{left:16px} .ab-lb-next{right:16px}
@media (max-width:900px){
.ab-lb-nav{display:none} /* swipe instead — arrows crowd a phone */
.ab-lb-track figure{padding:0}
}
@media (prefers-reduced-motion:reduce){
.ab-mos,.ab-lb-track{scroll-behavior:auto}
}
/* ── villa index (rust listing::index) ── */
:root{--ix-ink:#222;--ix-mut:#6a6a6a;--ix-line:#ddd;--ix-accent:#b8995a}
.ix *{box-sizing:border-box}
.ix{max-width:1120px;margin:0 auto;padding:0 24px 72px;color:var(--ix-ink);
font:16px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ix-site{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:18px 0;border-bottom:1px solid var(--ix-line)}
.ix-brand img{height:44px;width:auto;display:block;filter:invert(1) brightness(.18)}
.ix-nav{display:flex;gap:28px}
.ix-nav a{color:var(--ix-ink);text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.ix-nav a:hover{text-decoration:underline}
.ix h1{margin:32px 0 4px;font-size:30px;font-weight:600;letter-spacing:-.02em}
.ix .sub{color:var(--ix-mut);margin:0}
.ix-grid{display:grid;gap:28px 24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:28px}
.ix-card{display:block;text-decoration:none;color:inherit}
.ix-card figure{margin:0;aspect-ratio:20/19;border-radius:12px;overflow:hidden;background:#eee}
.ix-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ix-card:hover img{transform:scale(1.04)}
.ix-card .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
.ix-card .type{font-weight:600;font-size:15px}
.ix-card .rt{display:inline-flex;align-items:center;gap:4px;font-size:14px;white-space:nowrap}
.ix-card .rt svg{height:11px;width:11px;fill:currentcolor;display:block}
.ix-card .name{margin:2px 0 0;color:var(--ix-mut);font-size:15px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── WordPress additions (2026-10-04) ─────────────────────────────────── */
/* The theme header floats white over a hero; give it a dark ground here. */
.sy-band{height:150px;background:#12283c}
@media(max-width:900px){.sy-band{height:110px}}
.sy-main .ab{padding-top:28px}
/* The theme styles bare buttons/inputs/headings; keep the listing's own. */
.ab button,.ix button{text-transform:none;letter-spacing:normal;min-height:0;line-height:inherit;box-shadow:none}
.ab h1,.ab h2,.ab h3,.ab h4,.ix h2{font-family:inherit;color:var(--ab-ink,#222);text-transform:none;letter-spacing:-.01em}
.ab a{color:inherit}
.ab-sub{color:var(--ab-mut);font-size:14px;margin:-8px 0 16px}
.ab-wa{width:100%;margin-top:10px;background:#fff;color:var(--ab-ink);border:1px solid #222;border-radius:8px;
padding:13px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.ab-wa:hover{background:#f7f7f7}
.ab-pkg h2,.ab-pkg h3,.ab-pkg h4,.ab-pkg h5{font-size:18px;font-weight:600;margin:20px 0 8px}
.ab-pkg p,.ab-pkg li{font-size:16px;margin:0 0 8px}
.ab-pkg ul{padding-left:20px}
.ab-reqtrip{margin:8px 0 20px;color:var(--ab-mut)}
.ab-reqtrip b{color:var(--ab-ink)}
.ab-req{display:grid;gap:14px}
.ab-req label{display:grid;gap:6px;font-size:13px;font-weight:600}
.ab-req input,.ab-req textarea{border:1px solid #b0b0b0;border-radius:8px;padding:12px;font:inherit;font-size:15px;
font-weight:400;width:100%;background:#fff;color:var(--ab-ink)}
.ab-req input:focus,.ab-req textarea:focus{outline:2px solid #222;border-color:transparent}
.ab-req .ab-cta,.ab-req .ab-wa{margin-top:4px}
.ab-hp{position:absolute!important;left:-9999px!important;height:0;width:0;opacity:0}
.ab-reqerr{color:#c13515;font-size:14px;margin:0}
.ab-reqok{padding:12px 0}
.ab-reqok b{font-size:18px}
.ab-reqok p{color:var(--ab-mut)}
/* "More villas" reuses the index cards inside the listing. */
.ab .ix-grid{margin-top:16px}
/* Villa grid placed by the [vikbooking] shortcode. */
.ix-h{margin:8px 0 4px;font-size:30px;font-weight:600}
.ix{padding-top:24px}
/* aspect-ratio + max-height capped the mosaic's WIDTH at 920px, leaving it
narrower than the columns below. Fix the height instead. */
@media(min-width:901px){.ab-mos{aspect-ratio:auto;width:100%;height:clamp(320px,42vw,460px)}}
/* The theme's entry-content margins on p/h2 spread the grid out. */
.ix .ix-h{margin:8px 0 4px!important}
.ix p.sub{margin:0!important}
.ix-card p.name{margin:2px 0 0!important}
.ix-card .row{margin-top:12px!important}
.ix-card .row .rt{margin-left:auto}
/* The aside is lifted to 2147482090 so the date pickers clear later sections;
modals and the photo lightbox must sit above it (and the theme header). */
.ab-modal{z-index:2147482300}
.ab-lb{z-index:2147482400}