/* One villa's own page (CH-GUEST-DESIGN v2). Loaded by the villa routes through RouteStyles;
 * the shell already loads ds-tokens.css and ds-components.css. */
.vd { display: block; background: var(--night-950); color: var(--text); }
.vd :is(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
.vd :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.vd a { color: inherit; text-decoration: none; }
.vd .vd-stack-2 { display: grid; gap: 2px; }
.vd .vd-stack-4 { display: grid; gap: 4px; }
.vd .vd-stack-6 { display: grid; gap: 6px; }
.vd .vd-stack-8 { display: grid; gap: 8px; }
.vd .vd-stack-12 { display: grid; gap: 12px; }
.vd .vd-stack-16 { display: grid; gap: 16px; align-content: start; }
.vd .vd-stack-20 { display: grid; gap: 20px; }
.vd .vd-stack-24 { display: grid; gap: 24px; align-content: start; }
.vd .vd-stack-32 { display: grid; gap: 32px; }
.vd .vd-stack-56 { display: grid; gap: 56px; }
.vd .vd-center { text-align: center; }
.vd .vd-center-row { justify-content: center; }
.vd .vd-measure { max-width: 42ch; }
.vd .vd-flush { margin: 0; }
.vd .vd-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vd .vd-link-button { border: 0; cursor: pointer; justify-self: start; background-color: transparent; }

/* Hero */
.vd .vd-hero { padding: 32px 0 72px; }
.vd .vd-hero__inner { display: grid; gap: 32px; }
.vd .vd-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.vd .vd-title__text { display: grid; gap: 20px; max-width: 760px; }
.vd .vd-title__side { display: flex; align-items: center; gap: 16px; }
.vd .vd-rating { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); color: var(--text); }
.vd .vd-rating__star { display: inline-flex; width: 16px; height: 16px; color: var(--accent); }
.vd .vd-rating__value { font: 400 1.5rem/1 var(--font-display); font-variation-settings: "SOFT" 40; }

.vd .vd-tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-sunken); color: var(--bone-100); cursor: pointer; text-align: left; }
.vd .vd-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.vd .vd-tile:hover img { transform: scale(1.04); }
.vd .vd-tile:hover .ch-tile__caption, .vd .vd-tile:focus-visible .ch-tile__caption, .vd .vd-tile__caption--shown { opacity: 1; transform: none; }
.vd .vd-tile__all { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.vd .vd-tile__all--sm { display: none; }
.vd .vd-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: clamp(340px, 40vw, 600px); }
.vd .vd-mosaic > :first-child { grid-row: span 2; }
.vd .vd-mosaic > :first-child img { object-position: center 60%; }
.vd .vd-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.vd .vd-facts li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); }
.vd .vd-facts svg { color: var(--accent-text); flex: none; }
.vd .vd-facts b { color: var(--text); font-weight: 600; }

/* Details with the sticky stay card */
.vd .vd-details { padding-bottom: 120px; }
.vd .vd-subnav { position: sticky; top: var(--header-h); z-index: 30; background: var(--bg-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.vd .vd-subnav__links { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.vd .vd-subnav a { position: relative; display: inline-flex; align-items: center; min-height: 56px; color: var(--text-muted); font: 600 .875rem/1 var(--font-sans); white-space: nowrap; }
.vd .vd-subnav a:hover { color: var(--text); }
.vd .vd-subnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.vd .vd-subnav a:hover::after { transform: scaleX(1); }
.vd .vd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; align-items: start; }
.vd .vd-main { min-width: 0; }
.vd .vd-block { display: grid; gap: 32px; padding: 72px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 140px; }
.vd .vd-block--last { border-bottom: 0; padding-bottom: 0; }
.vd .vd-block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.vd .vd-block .ch-body + .ch-body { margin-top: -8px; }
.vd .vd-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.vd .vd-highlight { padding: 24px; gap: 12px; }
.vd .vd-note { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--bg-sunken); }
.vd .vd-note > svg { color: var(--accent-text); }
.vd .vd-note b { font-size: .9375rem; }
.vd .vd-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 12px; }
.vd .vd-photos > :first-child { grid-column: span 2; grid-row: span 2; }
.vd .vd-photos .ch-tile__caption { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; padding-top: 32px; }
.vd .vd-photos .ch-tile__caption span:first-child { font-weight: 600; }
.vd .vd-room__photo { aspect-ratio: 3 / 2; height: auto; }
.vd .vd-stay .dp-pop { left: auto; right: 0; transform: none; }
.vd .vd-stay .dp-seg { position: relative; display: grid; gap: 2px; padding: 12px 16px; min-height: 64px; border: 0; border-radius: 0; background: none; text-align: left; }
.vd .vd-stay .dp-seg + .dp-seg { border-left: 1px solid var(--border-strong); }
.vd .vd-stay .dp-seg .dp-val { font: 500 1rem/1.3 var(--font-sans); }
.vd .vd-stay__fields { position: relative; }
.vd .vd-notes span b { color: var(--text); }
.vd .vd-notes .g-icon { margin-top: 2px; color: var(--accent-text); }
.vd .vd-modal__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px 40px; }
.vd .vd-modal__group { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.vd .vd-modal__group h3 { display: flex; align-items: center; gap: 10px; }
.vd .vd-modal__group ul { display: grid; gap: 10px; color: var(--text-muted); }
.vd .vd-modal__group li { display: flex; gap: 10px; }
.vd .vd-modal__group li .g-icon { margin-top: 3px; color: var(--accent-text); }
.vd .vd-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 20px; }
.vd .vd-room { display: grid; gap: 16px; align-content: start; }
.vd .vd-room__blank { display: grid; place-items: center; color: var(--text-subtle); }
.vd .vd-notes { display: grid; gap: 10px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--bg-sunken); color: var(--text-muted); font-size: var(--text-sm); }
.vd .vd-notes li, .vd .vd-amenity-list li { display: flex; gap: 10px; }
.vd .vd-notes svg, .vd .vd-amenity-list svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.vd .vd-amenities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 40px; }
.vd .vd-amenities li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); font-weight: 600; }
.vd .vd-amenities .ch-feature__icon { width: 44px; height: 44px; flex: none; }

.vd .vd-stay { position: sticky; top: calc(var(--header-h) + 80px); padding-top: 72px; display: grid; gap: 16px; }
.vd .vd-stay__card { gap: 20px; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.vd .vd-stay__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vd .vd-stay__form { display: grid; gap: 16px; }
/* No overflow clipping here: the date picker's popover hangs out of this box. */
.vd .vd-stay__fields { border: 1px solid var(--border-strong); border-radius: var(--r-md); }
.vd .vd-stay .dp-seg:first-of-type { border-top-left-radius: var(--r-md); }
.vd .vd-stay .dp-seg:last-of-type { border-top-right-radius: var(--r-md); }
.vd .vd-stay .dp-pop { z-index: 60; }
.vd .vd-stay__dates { display: grid; grid-template-columns: 1fr 1fr; }
.vd .vd-seg { display: grid; gap: 2px; padding: 12px 16px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; min-height: 64px; }
.vd .vd-seg + .vd-seg { border-left: 1px solid var(--border-strong); }
.vd .vd-seg:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.vd .vd-seg strong { font: 500 1rem/1.3 var(--font-sans); }
.vd .vd-seg.is-active { background: var(--accent-soft); }
.vd .vd-seg:first-child { border-top-left-radius: var(--r-md); }
.vd .vd-seg:last-child { border-top-right-radius: var(--r-md); }
/* The in-card calendar opens between the dates and the guests row. */
.vd .vd-cal { padding: 16px; border-top: 1px solid var(--border-strong); }
.vd .vd-cal .ch-cal__dow abbr { text-decoration: none; }
.vd .vd-cal .ch-caption { margin: 0; }
.vd .vd-seg-label { font: 600 .75rem/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.vd .vd-stay__guests { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--border-strong); }
.vd .vd-stay__note { margin-top: -4px; }
.vd .vd-error:empty { display: none; }
.vd .vd-error { color: var(--danger); font-size: var(--text-sm); }
.vd .vd-stay__terms { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.vd .vd-stay__terms div { display: flex; justify-content: space-between; gap: 12px; }
.vd .vd-stay__terms dt { color: var(--text-muted); }
.vd .vd-stay__terms dd { color: var(--text); font-weight: 600; text-align: right; }
.vd .vd-stay__compare { justify-self: center; }

/* Location, reviews, other villas, evening call */
.vd .vd-location-photo { margin: 0; }
.vd .vd-hillmap { display: grid; gap: 12px; }
.vd .vd-hillmap__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vd .vd-hillmap__item { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--border); color: var(--text); }
.vd a.vd-hillmap__item:hover { border-color: var(--border-strong); }
.vd .vd-hillmap__item b { font: 400 1.25rem/1.1 var(--font-display); font-variation-settings: "SOFT" 40; }
.vd .vd-hillmap__item span { font-size: .8125rem; color: var(--text-muted); }
.vd .vd-hillmap__item.is-here { background: var(--lamp-400); border-color: var(--lamp-400); color: var(--night-950); }
.vd .vd-hillmap__item.is-here span { color: var(--night-950); }
.vd .vd-hillmap__foot { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--text-subtle); }
.vd .vd-rating-block { display: flex; align-items: center; gap: 20px; }
.vd .vd-rating-block__value { font: 400 4rem/1 var(--font-display); font-variation-settings: "SOFT" 40; }
.vd .vd-others { --grid-gap: 40px; }
.vd .vd-evening { position: relative; overflow: hidden; min-height: 640px; display: grid; place-items: center; padding: 120px 0; }
.vd .vd-evening > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd .vd-evening::after { content: ""; position: absolute; inset: 0; background: var(--scrim-center); }
.vd .vd-evening__inner { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: center; text-align: center; }
.vd .vd-evening .ch-overline { color: var(--lamp-300); }
.vd .vd-evening .ch-display-xl { color: var(--bone-50); }
.vd .vd-evening .ch-display-xl em { color: var(--lamp-300); }
.vd .vd-evening .ch-lede { color: var(--bone-200); }

/* Dialogs */
.vd .vd-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night-950); color: var(--bone-100); }
.vd .vd-lightbox::backdrop { background: var(--night-950); }
.vd .vd-lightbox__inner { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; height: 100%; padding: 20px clamp(16px, 4vw, 48px) 28px; }
.vd .vd-lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vd .vd-lightbox__bar .ch-pager__count { color: rgb(239 231 218 / .7); }
.vd .vd-lightbox__stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 16px; min-height: 0; }
.vd .vd-lightbox__stage img { width: 100%; height: 100%; max-height: calc(100dvh - 200px); object-fit: contain; border-radius: var(--r-md); }
.vd .vd-lightbox__caption { text-align: center; font: 400 1.25rem/1.3 var(--font-display); font-variation-settings: "SOFT" 40; }
.vd .vd-modal { width: min(92vw, 820px); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-3); }
.vd .vd-modal::backdrop { background: rgb(13 24 19 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vd .vd-modal__panel { display: grid; gap: 28px; padding: clamp(24px, 4vw, 48px); }
.vd .vd-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.vd .vd-amenity-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 40px; color: var(--text-muted); }
.vd .vd-amenity-notes { display: grid; gap: 8px; padding: 16px 20px; border-radius: var(--r-md); background: var(--bg-sunken); font-size: var(--text-sm); }
.vd .vd-amenity-notes div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.vd .vd-amenity-notes dt { font-weight: 600; }
.vd .vd-amenity-notes dd { color: var(--text-muted); }
.vd .vd-modal__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Listing */
.vd .vd-list-intro { padding: 48px 0 96px; }
.vd .vd-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.vd .vd-filter .ch-field { min-width: min(100%, 320px); }
.vd .vd-cards { --grid-gap: 40px; }
.vd .vd-compare { padding: 0 0 120px; }
.vd .vd-table-card { padding: 32px 12px; overflow-x: auto; }
.vd .vd-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9375rem; }
.vd .vd-table :is(th, td) { padding: 18px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.vd .vd-table thead :is(th, td) { border-top: 0; padding-top: 0; }
.vd .vd-table thead a { font: 400 1.75rem/1.1 var(--font-display); font-variation-settings: "SOFT" 40; color: var(--text); }
.vd .vd-table tbody th { width: 22%; font: italic 400 1.125rem/1.3 var(--font-display); font-variation-settings: "SOFT" 40; color: var(--emphasis); }
.vd .vd-table td { color: var(--text-muted); }
.vd .vd-plan { background: var(--bg-sunken); }
.vd .vd-plan__card { gap: 16px; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }

/* Phone dock: only below the two-column layout, where the stay card is far down the page */
.vd .vd-dock { display: none; }
@media (max-width: 1099px) {
  .vd .vd-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vd .vd-stay { position: static; padding-top: 48px; }
  .vd .vd-dock { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 20px; border-radius: var(--r-pill); background: var(--bg-glass); border: 1px solid var(--border); box-shadow: var(--shadow-3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--text); }
  .vd .vd-dock .ch-dock__text strong { white-space: nowrap; }
  .vd .vd-evening { padding-bottom: 140px; }
}
@media (max-width: 759px) {
  .vd .vd-hero { padding-bottom: 48px; }
  .vd .vd-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .vd .vd-mosaic > :first-child { grid-row: auto; aspect-ratio: 4 / 3; }
  .vd .vd-mosaic > .vd-tile--extra { display: none; }
  .vd .vd-tile__all--sm { display: inline-flex; }
  .vd .vd-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .vd .vd-photos > :first-child { grid-row: auto; }
  .vd .vd-stay .dp-pop { right: auto; left: 50%; transform: translateX(-50%); }
  .vd .vd-block { padding: 56px 0; }
  .vd .vd-hillmap__row { grid-template-columns: 1fr; }
  .vd .vd-rating-block__value { font-size: 3rem; }
  .vd .vd-lightbox__stage { grid-template-columns: minmax(0, 1fr); }
  .vd .vd-lightbox__stage .ch-icon-btn { display: none; }
}