/* property.css: property pages. Header, photos and the full-screen viewer, the fact list, where you sleep, the booking
   request (dates, calendar, unit, guests, hand-off), the phone booking bar and sheet, other properties, print.
   Look: the design system "Whitewash and maiolica" (.review/directions/final), whose components this file reuses.
   Tokens and the .button family come from theme.css and site.css (T5); every token is read here with its value as the
   fallback, through the --p-* aliases below, so the page renders the same before and after the theme lands. */

.page-property {
  --p-calce: var(--calce, #F6F4EF);
  --p-paper: var(--paper, #FFFFFF);
  --p-wall: var(--wall, #ECE8DF);
  --p-grout: var(--grout, #D9D3C6);
  --p-line: var(--line, #8C8574);
  --p-line-quiet: var(--line-quiet, #C9C2B4);
  --p-ink: var(--ink, #14213A);
  --p-ink-2: var(--ink-2, #4B5568);
  --p-ink-disabled: var(--ink-disabled, #6E6A60);
  --p-cobalt: var(--cobalt, #1D4F91);
  --p-cobalt-deep: var(--cobalt-deep, #173F75);
  --p-cobalt-press: var(--cobalt-press, #11315C);
  --p-wash: var(--wash, #E8EEF7);
  --p-wash-press: var(--wash-press, #D9E4F3);
  --p-giallo: var(--giallo, #E6B547);
  --p-giallo-wash: var(--giallo-wash, #FBF1D6);
  --p-giallo-ink: var(--giallo-ink, #5E3F05);
  --p-ocra: var(--ocra, #7A5206);
  --p-notte: var(--notte, #0E2340);
  --p-rosso: var(--rosso, #B42318);
  --p-rosso-wash: var(--rosso-wash, #FBEDEB);
  --p-display: var(--font-display, "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif);
  --p-text: var(--font-text, "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --p-opsz-small: var(--opsz-small, 16);
  --p-small: var(--fs-small, .875rem);
  --p-label: var(--fs-label, .75rem);
  --p-track: var(--track-label, .14em);
  --p-r1: var(--r-1, 3px);
  --p-r2: var(--r-2, 4px);
  --p-r3: var(--r-3, 8px);
  --p-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
  --p-ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --p-shadow-1: var(--shadow-1, 0 1px 2px rgb(14 35 64 / .10));
  --p-shadow-2: var(--shadow-2, 0 1px 2px rgb(14 35 64 / .06), 0 8px 20px -8px rgb(14 35 64 / .20));
  --p-shadow-card: var(--shadow-card, 0 0 0 1px rgb(14 35 64 / .06), 0 2px 4px rgb(14 35 64 / .05), 0 28px 64px -24px rgb(14 35 64 / .50));
  --p-shadow-pop: var(--shadow-pop, 0 0 0 1px rgb(14 35 64 / .08), 0 4px 8px rgb(14 35 64 / .06), 0 24px 48px -16px rgb(14 35 64 / .32));
  --p-ring: var(--focus, #1D4F91);
  --p-ring-gap: var(--focus-gap, #F6F4EF);
  --p-glass-solid: var(--glass-solid, #F8F6F1);
  --p-header: 5.5rem;   /* the sticky header's height plus a little air */
}
:where(.property, .book-bar, .book-sheet, .cal) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }

/* ---------- Header ---------- */
.property { padding-block: 8px 64px; }
.back { margin: 0; }
.back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 600; text-decoration: none; border-radius: var(--p-r2); }
.back .icon { transition: transform 200ms var(--p-ease); }
@media (hover: hover) { .back a:hover { text-decoration: underline; text-underline-offset: .22em; } .back a:hover .icon { transform: translateX(-3px); } }
.property-head { display: grid; gap: 24px 48px; align-items: end; margin: 8px 0 32px; }
.property-head .where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; }
.property-head h1 { margin: 0 0 16px; font-size: var(--fs-h1, clamp(2.75rem, 1.7rem + 4vw, 4.75rem)); line-height: var(--lh-tight, 1.02); }
.property-head .lead { margin: 0; }
.property-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.property-head .share { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.share-status { flex-basis: 100%; font-size: var(--p-small); color: var(--p-ink-2); }
.share-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 60rem) { .property-head { grid-template-columns: minmax(0, 1fr) auto; } .property-head .actions { justify-content: flex-end; max-width: 32rem; } }

/* ---------- Photos: a mosaic on wider screens, a full-width strip to swipe on phones ---------- */
.gallery-wrap { position: relative; margin-bottom: 48px; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: clamp(320px, 38vw, 560px); margin: 0; padding: 0; list-style: none; }
/* Each photo is a plain image in the page; property.js wraps it in a button that opens the viewer (.photo-open), so
   without the script there is no button that does nothing. The tile (shape, the wall colour while it loads) is the li's. */
.gallery li { position: relative; min-height: 0; overflow: hidden; border-radius: var(--p-r2); background: var(--p-wall); }
.gallery li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(14 35 64 / .07); pointer-events: none; }
.gallery-first { grid-row: 1 / 3; }
.gallery li:nth-child(n + 6) { display: none; }
.photo-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--p-ease); }
@media (hover: hover) { .photo-open:hover img { transform: scale(1.025); } }
/* Fewer than five photos (the build asks for one at least, lib/validate.js): the mosaic takes the photos there are, with no
   empty cells.
   One fills the row; two share it; three: the first and two stacked beside it; four: the fourth under the second and
   third. Print uses the same cells. */
@media (min-width: 48rem), print {
  .gallery[data-count="1"] { grid-template-columns: 1fr; }
  .gallery[data-count="2"] { grid-template-columns: 1fr 1fr; }
  .gallery[data-count="3"] { grid-template-columns: 2fr 1fr; }
  .gallery[data-count="4"] li:nth-child(4) { grid-column: 2 / 4; }
  .gallery:is([data-count="1"], [data-count="2"]) { grid-template-rows: minmax(0, 1fr); }
  .gallery:is([data-count="1"], [data-count="2"]) .gallery-first { grid-row: auto; }
}
/* One photo: nothing to page through, so no "All photos (1)" and no "1 / 1" (the photo itself opens the viewer) */
.gallery[data-count="1"] ~ :is(.all-photos, .gallery-count) { display: none; }
/* The button's shadow is .button's own (site.css), so the shared focus ring draws over it: a box-shadow set here would
   replace the ring (same specificity, later file). The counter is not a .button and sets its own. */
.all-photos, .gallery-count {
  --bg: rgb(255 255 255 / .95); --fg: var(--p-ink); --bd: rgb(14 35 64 / .14); --shadow-own: var(--p-shadow-2);
  position: absolute; z-index: 1; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--p-r2);
}
.gallery-count { box-shadow: var(--shadow-own); }
.all-photos { min-height: 44px; padding: 0 16px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .all-photos:hover { --bg: #fff; --fg: var(--p-cobalt); --bd: var(--p-cobalt); } }
.gallery-count { display: none; left: 10px; right: auto; bottom: 16px; min-height: 32px; padding: 0 10px; font-size: var(--p-small); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

/* Without the script: no viewer, so no "All photos" button or counter, and every photo in the mosaic (extra rows under the
   first two, in the same columns); the phone strip already scrolls through them all. The list itself takes the focus (its
   tabindex, which property.js removes once the photos are buttons), so a keyboard can scroll the strip; its ring is drawn
   inward, over the photos, since the strip runs to the screen's edges. */
html:not(.js) :is(.all-photos, .gallery-count, .unit-pick) { display: none; }
.gallery:focus-visible { outline: 2px solid transparent; box-shadow: none; }
.gallery-wrap:has(.gallery:focus-visible)::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: var(--p-r2); box-shadow: inset 0 0 0 3px var(--p-cobalt), inset 0 0 0 5px #fff; pointer-events: none; }
@media screen and (min-width: 48rem) {
  html:not(.js) .gallery { height: auto; grid-template-rows: repeat(2, clamp(156px, 19vw, 276px)); grid-auto-rows: clamp(156px, 19vw, 276px); }
  html:not(.js) .gallery:is([data-count="1"], [data-count="2"]) { grid-template-rows: clamp(320px, 38vw, 560px); }
  html:not(.js) .gallery li:nth-child(n + 6) { display: block; }
}

@media (max-width: 47.99rem) {
  .property { padding-top: 0; }
  .property > .container { display: flex; flex-direction: column; }
  /* Full bleed, exactly as wide as the screen: margins alone left the strip a fraction of a pixel narrower (the container's
     width is fractional), so each next photo showed by a sliver and the browser didn't scroll a focused photo into view */
  .gallery-wrap { order: -1; width: 100vw; margin: 0 calc(50% - 50vw) 8px; }
  .gallery { width: 100%; grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; height: auto;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery li, .gallery li:nth-child(n + 6) { display: block; scroll-snap-align: start; scroll-snap-stop: always; }
  .gallery-first { grid-row: auto; }
  .gallery li, .gallery-wrap:has(.gallery:focus-visible)::after { border-radius: 0; }
  .photo-open { height: auto; }
  .gallery img { height: auto; aspect-ratio: 4 / 3.4; }
  .gallery-count { display: inline-flex; }
  .all-photos { right: 10px; bottom: 10px; }
  .property-head { margin-top: 0; }
  .property-head .actions .button { flex: 1 1 100%; justify-content: center; }
  .property-head .show-map { display: none; }
}
@media screen and (max-width: 47.99rem) {
  /* The main photo first: the strip's other photos and the aerial picture lie within the distance at which the browser
     fetches lazy images early, and would share the phone's bandwidth with it. property.js lets them load (.is-primed) once
     the main photo is in, on the first swipe, when the viewer opens, or as the aerial comes near; property.njk's own line
     after 3 s whatever happens. The strip keeps its slides (and its width, so a swipe works), the aerial its box. */
  html.js .gallery:not(.is-primed) > li:not(.gallery-first) > * { display: none; }
  html.js .aerial-frame:not(.is-primed) { aspect-ratio: 3 / 2; background: var(--p-wall); border-radius: var(--p-r1); }   /* the shots are 2400 × 1600 (tools/scene/shoot-all.mjs) */
  html.js .aerial-frame:not(.is-primed) > * { display: none; }
}

/* ---------- Full-screen photo viewer: native swipe and pinch-zoom ---------- */
.viewer {
  --focus: #fff; --focus-gap: #0A1220; --p-ring: #fff; --p-ring-gap: #0A1220;
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #0A1220; color: #fff; opacity: 0;
  transition: opacity .24s ease, display .24s allow-discrete, overlay .24s allow-discrete;
}
.viewer::backdrop { background: #0A1220; }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; opacity: 1; }
@starting-style { .viewer[open] { opacity: 0; } }
.viewer-top { display: flex; justify-content: space-between; align-items: center; padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left)); }
.viewer-count { font-size: .9375rem; color: rgb(255 255 255 / .8); font-variant-numeric: tabular-nums lining-nums; }
.viewer-stage { position: relative; min-height: 0; padding: 0; }
.viewer-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; touch-action: pan-x pinch-zoom; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track li { position: relative; flex: 0 0 100%; min-height: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.viewer-track img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 1rem); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--p-r2); }
.viewer-caption { margin: 0; padding: .75rem max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); text-align: center; font-size: .9375rem; color: rgb(255 255 255 / .82); }
.viewer-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--p-r2); background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background-color 200ms var(--p-ease); }
.viewer-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (hover: hover) { .viewer-btn:not([aria-disabled="true"]):hover { background: rgb(255 255 255 / .24); } }
.viewer-prev, .viewer-next { position: absolute; top: 50%; translate: 0 -50%; }
.viewer-prev { left: max(1rem, env(safe-area-inset-left)); }
.viewer-next { right: max(1rem, env(safe-area-inset-right)); }
.viewer :focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px #0A1220, 0 0 0 4px #fff; }
/* Wider screens: the photo stops short of the prev and next buttons, so their light plate and white chevron always sit on
   the dark stage (contrast never depends on the photo) */
@media (min-width: 48rem) {
  .viewer-track img { max-width: calc(100% - 2 * (max(1rem, env(safe-area-inset-left), env(safe-area-inset-right)) + 44px + 1rem)); }
}
@media (max-width: 47.99rem) {
  .viewer-stage { padding-bottom: 56px; }
  .viewer-prev, .viewer-next { top: auto; bottom: max(.5rem, env(safe-area-inset-bottom)); translate: none; }
  .viewer-caption { padding-top: .25rem; }
}

/* ---------- Body: facts, where you sleep, facilities, location, rules; the booking card beside them ---------- */
.property-body { display: grid; gap: 64px 72px; }
.property-body > * { min-width: 0; }
/* From 60rem the card sits beside the main column; the gap between them narrows to 48 px at 60rem (72 px from 80rem), so
   the main column is never narrower than the card (aerial sizes in property.njk follow it). The main column is a container:
   the fact list counts its own width, not the window's. */
@media (min-width: 60rem) { .property-body { grid-template-columns: minmax(0, 1fr) minmax(22rem, 25rem); column-gap: clamp(3rem, 7.5vw - 1.5rem, 4.5rem); align-items: start; } }
.property-main { container-type: inline-size; }
.property-section + .property-section { margin-top: 64px; }
.property-section > h2 { margin: 0 0 24px; font-size: var(--fs-h2, clamp(2.125rem, 1.7rem + 1.8vw, 3rem)); line-height: var(--lh-head, 1.1); }

/* Facts as a ruled list: icon, label in caps, value in tabular figures */
/* Each fact has its own rule above and below, broken at the column gaps like the rest; the rule above overlaps the one under
   the fact before it (margin-top: -1px), so a row's rules are single lines and a short last row is closed too */
.fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.fact-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-content: start; margin-top: -1px; padding: 16px 0 18px; border-top: 1px solid var(--p-grout); border-bottom: 1px solid var(--p-grout); }
.fact-list .icon { grid-row: span 3; margin-top: 1px; color: var(--p-cobalt); }
.fact-label { font: 600 var(--p-label) / 1.3 var(--p-text); letter-spacing: var(--p-track); text-transform: uppercase; color: var(--p-ink-2); }
.fact-value { margin-top: 4px; font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--p-ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: break-word; }
.fact-sub { margin-top: 2px; font-size: var(--p-small); line-height: 1.4; color: var(--p-ink-2); }
/* Three columns only where each is wide enough for a value's longest word ("Non ammessi", "supplemento"): two in the main
   column beside the card up to about 1140 px */
@container (min-width: 34rem) { .fact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } }
@media (max-width: 29.99rem) { .fact-list li { padding: 14px 0 15px; column-gap: 10px; } .fact-list { column-gap: 16px; } .fact-value { font-size: 1.0625rem; } }

/* Where you sleep: one card per unit */
.units { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.unit { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--p-paper); border: 1px solid var(--p-grout); border-radius: var(--p-r3); transition: border-color 200ms var(--p-ease), box-shadow 200ms var(--p-ease); }
.unit-name { margin: 0; font: 500 1.375rem / 1.2 var(--p-display); font-variation-settings: "opsz" var(--p-opsz-small); text-wrap: balance; }
.unit-sub { margin: -6px 0 0; font-size: var(--p-small); color: var(--p-ink-2); }
.unit-facts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.unit-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.unit-facts .icon { margin-top: 2px; color: var(--p-cobalt); }
.unit-pick { align-self: flex-start; margin-top: auto; }
.unit:has(.unit-pick) .unit-facts { margin-bottom: 6px; }
.unit.is-chosen { border-color: var(--p-cobalt); box-shadow: inset 0 0 0 1px var(--p-cobalt); }
.unit-pick[aria-pressed="true"] { --bg: var(--p-wash); }

/* Facilities and rules: a small cobalt diamond, like the tiles */
.features, .rules { display: grid; gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.features { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.rules { max-width: var(--measure, 36em); }
.features li, .rules li { position: relative; padding-left: 24px; }
.features li::before, .rules li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; rotate: 45deg; border: 1.5px solid var(--p-cobalt); }
.note { max-width: var(--measure, 36em); margin-top: 24px; padding: 14px 16px; background: var(--p-wall); border-radius: var(--p-r2); box-shadow: inset 3px 0 0 var(--p-line); }
.note p { margin: 0; }
.note p + p { margin-top: 8px; }

/* Location: the aerial picture as a map plate, the address, then directions in the visitor's own map app */
.aerial { margin: 0 0 20px; padding: 8px; background: var(--p-paper); border: 1px solid var(--p-grout); border-radius: var(--p-r3); }
.aerial-frame { position: relative; }
.aerial img { width: 100%; height: auto; border-radius: var(--p-r1); }
/* The property's name at its pin (the picture carries only the dot and stem): the 3D map's selected label (home.css), as text */
.aerial-label {
  position: absolute; translate: -50% -100%; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 16px); min-height: 30px;
  padding: 0 10px; background: var(--p-cobalt); color: #fff; border-radius: var(--p-r2); box-shadow: 0 0 0 1px rgb(14 35 64 / .10), 0 6px 14px -6px rgb(14 35 64 / .45);
  font: 600 .8125rem / 1 var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.aerial-label::before { content: ""; flex: none; width: 6px; height: 6px; background: #fff; rotate: 45deg; }
.aerial figcaption { margin-top: 8px; padding-inline: 4px; font-size: var(--p-small); line-height: 1.45; color: var(--p-ink-2); }
.aerial-credit { display: block; margin-top: 2px; font-size: 0.75rem; }
.aerial-credit a { position: relative; color: inherit; }
.aerial-credit a::after { content: ""; position: absolute; inset: -14px -4px; } /* 44 px target without changing the look */
/* The link to /legal/#map-data on a line of its own, as wide as its words (one box, one target), its target grown sideways
   and down only: it never sits right under the OpenStreetMap link, whose target keeps its own band */
.aerial-credit .credit-sources { display: block; width: fit-content; margin-top: 2px; white-space: nowrap; }
.aerial-credit .credit-sources::after { top: -2px; }
.address { margin: 0; }
.cin { margin: 2px 0 12px; font-size: var(--p-small); color: var(--p-ink-2); }
.where-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
.where-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; border-radius: var(--p-r2); }
.where-links .icon:last-child { margin-left: -2px; transition: transform 200ms var(--p-ease); }
@media (hover: hover) {
  .where-links a:hover { text-decoration: underline; text-underline-offset: .22em; }
  .where-links a:hover .i-out { transform: translate(2px, -2px); }
  .where-links a:hover .i-go { transform: translateX(3px); }
}

/* ---------- Booking request card: one accent only, the nights chip ---------- */
/* Sticky when the whole card fits under the header (property.js decides on load, on resize and when the card leaves the
   sheet, and sets .is-sticky). A stuck card that grows stays stuck: property.js raises it (an inline top) only by the
   blank space above its first line, so no text goes under the header, and past that caps its height (.is-capped) so it
   scrolls inside. */
@media (min-width: 60rem) {
  .book.is-sticky { position: sticky; top: var(--p-header); }
  .book.is-sticky .book-card.is-capped { overflow-y: auto; overscroll-behavior: contain; }
}
.book-card { padding: 28px 28px 22px; background: var(--p-paper); color: var(--p-ink); border-radius: var(--p-r3); box-shadow: var(--p-shadow-card); --focus-gap: var(--p-paper); --p-ring-gap: var(--p-paper); }
.book-for { margin: 0 0 6px; }
.book-card h2 { margin: 0 0 6px; font-size: var(--fs-h3, clamp(1.625rem, 1.45rem + .7vw, 2rem)); line-height: 1.1; font-variation-settings: "opsz" var(--p-opsz-small); }
.book-card h2:focus { outline: none; box-shadow: none; }
.book-intro { margin: 0 0 20px; font-size: var(--p-small); line-height: 1.5; color: var(--p-ink-2); }
.book-form, .book-fields { display: grid; gap: 20px; }
@media (min-width: 60rem) { .book-card { padding: 24px 28px 18px; } .book-intro { margin-bottom: 18px; } .book-fields { gap: 16px; } }
.book-fields[hidden] { display: none; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-label { font: 600 var(--p-small) / 1.25 var(--p-text); color: var(--p-ink); }
.book-card .hint { margin: 0; font-size: var(--p-small); line-height: 1.45; color: var(--p-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.control {
  width: 100%; min-height: 48px; padding: 0 14px; background: var(--p-paper); color: var(--p-ink); border: 1px solid var(--p-line); border-radius: var(--p-r2);
  font: 400 var(--fs-ui, 1rem) / 1.4 var(--p-text); box-shadow: inset 0 1px 2px rgb(14 35 64 / .06);
  transition: border-color 200ms var(--p-ease), box-shadow 200ms var(--p-ease);
}
.control:hover { border-color: var(--p-ink-2); }
.control[aria-invalid="true"] { border-color: var(--p-rosso); box-shadow: inset 0 0 0 1px var(--p-rosso); }
textarea.control { display: block; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select.control {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%231D4F91' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.unit-field.is-flash .control, .unit-field.is-flash .choice-list { animation: flash 600ms var(--p-ease); }
@keyframes flash { 30% { box-shadow: 0 0 0 4px var(--p-wash-press); } }

/* Dates: one control in two halves. Phones: each half opens the system date picker. Wider screens: the calendar. */
.dates { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.date-range { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: var(--p-r2); box-shadow: inset 0 1px 2px rgb(14 35 64 / .06); }
.date-range.is-invalid { border-color: var(--p-rosso); box-shadow: inset 0 0 0 1px var(--p-rosso); }
.date-half { position: relative; display: grid; gap: 2px; align-content: center; min-width: 0; min-height: 76px; padding: 10px 14px; border-radius: var(--p-r2) 0 0 var(--p-r2); transition: background-color 200ms var(--p-ease); }
.date-half + .date-half { border-left: 1px solid var(--p-grout); border-radius: 0 var(--p-r2) var(--p-r2) 0; }
.date-label { font: 600 .6875rem / 1.2 var(--p-text); letter-spacing: var(--p-track); text-transform: uppercase; color: var(--p-ink-2); }
.date-value { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-value.is-empty { font-weight: 400; color: var(--p-ink-2); }
.date-weekday { min-height: 1.3em; font-size: .8125rem; line-height: 1.3; color: var(--p-ink-2); }
.date-half.is-current::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--p-cobalt); }
/* Without the script: the native inputs, inside the same two halves */
.date-input { width: 100%; min-width: 0; min-height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--p-ink); font-size: 1rem; font-weight: 600; }
.date-value, .date-weekday { display: none; }
.is-enhanced .date-value, .is-enhanced .date-weekday { display: block; }
/* Phones (narrow and touch): the input covers its half, so a tap opens the system picker */
.is-enhanced .date-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; font-size: 16px; }
.date-btn { display: none; }
/* Tablets and desktops: a button covers the half and opens the calendar */
@media (min-width: 48rem), (pointer: fine) {
  .has-cal .date-input { display: none; }
  .has-cal .date-btn { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
}
@media (hover: hover) { .is-enhanced .date-half:hover { background: #FAF9F6; } }
.dates-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.book-nights { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; margin: 0; font-size: var(--p-small); color: var(--p-ink-2); }
.book-nights b { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--p-r1); background: var(--p-giallo-wash); color: var(--p-giallo-ink); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgb(230 181 71 / .6); white-space: nowrap; }
/* A date the request can't go with: said on its own line right under the dates, which take the focus, so the reason is
   in view with them (the send buttons may be off the screen's foot) */
.dates-error { flex: 1 0 100%; }
/* Empty status lines leave the layout but stay in the page, so what they say later is announced */
.book-nights:empty, .book-status:empty, .dates-error:empty { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none; }

/* Unit: 2-4 units are radio tiles with their capacity under each name; more than 4 a select; one unit, no field */
.unit-choice { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.unit-choice legend { margin-bottom: 8px; padding: 0; }
.choice-list { display: grid; gap: 1px; overflow: hidden; background: var(--p-line); border: 1px solid var(--p-line); border-radius: var(--p-r2); }
.choice-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 1px; min-height: 60px; padding: 9px 14px; background: var(--p-paper); cursor: pointer; transition: background-color 200ms var(--p-ease); }
@media (hover: hover) { .choice-item:hover { background: #FAF9F6; } }
.choice-item input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice-dot { grid-row: 1 / 3; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--p-line); border-radius: 50%; background: var(--p-paper); transition: border-color 200ms var(--p-ease); }
.choice-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--p-cobalt); transform: scale(0); transition: transform 200ms var(--p-ease); }
.choice-item input:checked ~ .choice-dot { border-color: var(--p-cobalt); }
.choice-item input:checked ~ .choice-dot::after { transform: scale(1); }
.choice-item:has(input:checked) { background: var(--p-wash); box-shadow: inset 3px 0 0 var(--p-cobalt); }
.choice-name { grid-column: 2; font-weight: 500; line-height: 1.3; }
.choice-meta { grid-column: 2; font-size: var(--p-small); line-height: 1.3; color: var(--p-ink-2); font-variant-numeric: tabular-nums; }

/* Guests: one row, the label and the unit's limit on the left, the stepper on the right */
.guests-field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.guests-text { display: grid; gap: 2px; }
.stepper { display: inline-grid; align-items: stretch; overflow: hidden; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: var(--p-r2); box-shadow: inset 0 1px 2px rgb(14 35 64 / .06); --focus-gap: var(--p-paper); }
.stepper input { width: 6.5rem; min-height: 48px; padding: 0 8px; border: 0; background: none; color: var(--p-ink); text-align: center; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.is-enhanced .stepper { grid-template-columns: 48px 56px 48px; }
.is-enhanced .stepper input { width: 100%; border-inline: 1px solid var(--p-grout); -moz-appearance: textfield; appearance: textfield; }
.is-enhanced .stepper input::-webkit-inner-spin-button, .is-enhanced .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button { display: grid; place-items: center; min-height: 48px; padding: 0; border: 0; background: none; color: var(--p-cobalt); cursor: pointer; transition: background-color 200ms var(--p-ease); }
@media (hover: hover) { .stepper button:hover { background: var(--p-wash); } }
.stepper button:active { background: var(--p-wash-press); }
.stepper button[aria-disabled="true"] { color: #9C9688; background: none; cursor: not-allowed; }
.stepper button[hidden] { display: none; }

/* Message: folded away until asked for */
.book-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--p-cobalt); font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--p-r2); }
.book-more summary::-webkit-details-marker { display: none; }
.book-more summary .icon { transition: rotate 200ms var(--p-ease); }
.book-more[open] summary .icon { rotate: 45deg; }
@media (hover: hover) { .book-more summary:hover { text-decoration: underline; text-underline-offset: .22em; } }
.book-more .field { margin-top: 8px; }

.book-actions { display: grid; gap: 10px; margin-top: 4px; }
/* The label may wrap (320 px with wider text spacing, WCAG 1.4.12) rather than push the card past the screen */
.book-actions .button { width: 100%; justify-content: center; white-space: normal; text-wrap: balance; }
.book-form > *, .book-fields > * { min-width: 0; }
/* Without the script: no send buttons (the form sends nothing, method="dialog"), the <noscript> links instead (their own
   grid items, so they keep the gap); no fields, since nothing typed would reach the message or Booking.com; and no
   sentence about a ready-written message (.js-only). With no channel, no intro either: only the Booking.com link. */
html:not(.js) :is(.book-actions button[type="submit"], .book-more, .js-only) { display: none; }
html:not(.js) .book-actions noscript { display: contents; }
html:not(.js) .book-fields > :not(.book-actions), html:not(.js) .book-card:has(.is-booking-only) .book-intro { display: none; }

/* Status lines (role=status): a date error under the dates, and after sending what went into the message */
.book-card .status { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--p-r2); font-size: var(--p-small); line-height: 1.45; font-weight: 500; }
.book-card .status .icon { flex: none; margin-top: 1px; }
.status-error { background: var(--p-rosso-wash); color: var(--p-rosso); box-shadow: inset 3px 0 0 var(--p-rosso); }
.status-info { background: var(--p-wash); color: var(--p-cobalt-press); box-shadow: inset 3px 0 0 var(--p-cobalt); font-variant-numeric: tabular-nums lining-nums; }
.book-status.is-quiet { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.book-note { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--p-ink-2); }
.book-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 16px 0 0; padding-top: 8px; border-top: 1px solid var(--p-grout); font-size: var(--p-small); color: var(--p-ink-2); }
.book-alt a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; border-radius: var(--p-r2); }
.book-alt a .icon { transition: transform 200ms var(--p-ease); }
@media (hover: hover) { .book-alt a:hover .icon { transform: translate(2px, -2px); } }

/* After Send: the message is in the visitor's app; a copy of it here, in case no app opened */
.book-sent { display: grid; gap: 12px; }
.book-sent:focus { outline: none; }
.book-sent p { margin: 0; }
.book-sent-title { margin: 0; font: 600 var(--fs-h4, 1.1875rem) / 1.3 var(--p-text); letter-spacing: -.005em; }
.book-preview { max-height: 10rem; margin: 0; padding: 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--p-calce); border: 1px solid var(--p-grout); border-radius: var(--p-r2); font: inherit; font-size: .875rem; line-height: 1.5; }
.book-sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.book-card:has(.book-sent) .book-intro { display: none; }

/* ---------- Calendar: a popover under the dates (tablet and desktop) ---------- */
.cal {
  position: fixed; inset: auto; width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); margin: 0; padding: 14px 14px 12px; overflow: auto;
  background: var(--p-paper); color: var(--p-ink); border: 0; border-radius: var(--p-r3); box-shadow: var(--p-shadow-pop);
  --focus-gap: var(--p-paper); --p-ring-gap: var(--p-paper);
}
.cal::backdrop { background: transparent; }
.cal[open] { animation: cal-in 240ms var(--p-ease) both; }
@keyframes cal-in { from { opacity: 0; translate: 0 8px; scale: .98; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-head .button-icon { --bd: transparent; --shadow-own: 0 0 #0000; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; color: var(--p-ink); }
@media (hover: hover) { .cal-head .button-icon:hover { --bd: var(--p-cobalt); } }
.cal-head .button-icon[aria-disabled="true"] { --bg: transparent; --fg: #9C9688; --bd: transparent; color: #9C9688; cursor: default; }
.cal-month { margin: 0; font: 500 1.25rem / 1 var(--p-display); font-variation-settings: "opsz" var(--p-opsz-small); }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
.cal-grid th { height: 28px; padding: 0; font: 600 .6875rem / 1 var(--p-text); letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-2); }
.cal-grid td { padding: 0; text-align: center; }
.cal-pad td { height: 44px; }   /* the blank weeks that keep every month six rows tall (property.js) */
.cal-day { position: relative; width: 100%; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--p-r2); background: none; color: var(--p-ink); font: 500 .9375rem / 1 var(--p-text); font-variant-numeric: tabular-nums; cursor: pointer; }
@media (hover: hover) { .cal-day:hover { box-shadow: inset 0 0 0 1px var(--p-cobalt); } }
.cal-day.is-today { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--p-giallo); }
.cal-day[aria-disabled="true"] { color: #8F897C; cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgb(143 137 124 / .6); box-shadow: none; }
.in-preview .cal-day { border-radius: 0; background: #F1F5FA; }
.in-range .cal-day { border-radius: 0; background: var(--p-wash); color: var(--p-cobalt-press); }
.range-start .cal-day, .range-end .cal-day { background: var(--p-cobalt); color: #fff; font-weight: 600; text-decoration: none; }
.range-start .cal-day { border-radius: var(--p-r2) 0 0 var(--p-r2); }
.range-end .cal-day { border-radius: 0 var(--p-r2) var(--p-r2) 0; }
.range-start.range-only .cal-day { border-radius: var(--p-r2); }
/* Room for two lines, so a status that wraps (English) doesn't change the calendar's height either */
.cal-status { min-height: 2.9em; margin: 4px 2px 0; font-size: var(--p-small); line-height: 1.45; color: var(--p-ink-2); }
.cal-status b { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--p-r1); background: var(--p-giallo-wash); color: var(--p-giallo-ink); font-weight: 600; box-shadow: inset 0 0 0 1px rgb(230 181 71 / .6); }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--p-grout); }
.cal-foot .button-text { min-height: 44px; }
.cal-foot .button-text[hidden] { display: none; }
.cal-foot .cal-close { margin-left: auto; }

/* ---------- Phones: the booking bar, and the booking card in a sheet ---------- */
.book-bar {
  position: fixed; z-index: 30; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px;
  background: var(--p-glass-solid); border: 1px solid rgb(255 255 255 / .7); border-radius: var(--p-r3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), var(--p-shadow-card);
  translate: 0 calc(100% + 24px + env(safe-area-inset-bottom)); visibility: hidden;
  transition: translate .45s var(--p-ease), visibility 0s linear .45s;
}
.book-bar.is-shown { translate: 0 0; visibility: visible; transition: translate .45s var(--p-ease), visibility 0s; }
.book-bar p { min-width: 0; margin: 0; }
/* The name is never cut short: it wraps to two balanced lines where it doesn't fit (smaller on the narrowest phones, so the
   bar, with a two-line summary too, stays inside the 7rem the page keeps clear for it); two lines at most, for a much
   longer name set in Pages CMS */
.book-bar-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 500 1.3125rem / 1.15 var(--p-display); font-variation-settings: "opsz" var(--p-opsz-small); text-wrap: balance; }
@media (max-width: 25.99rem) { .book-bar-name { font-size: 1.1875rem; } }
.book-bar-sum { display: block; margin-top: 2px; font: 400 .8125rem / 1.3 var(--p-text); color: var(--p-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.book-bar .button { flex: none; }
@media (min-width: 60rem) { .book-bar { display: none; } }
@media screen and (max-width: 59.99rem) {
  .page-property .site-footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  html:has(.book-bar.is-shown) { scroll-padding-bottom: 7rem; }
}

.book-sheet {
  position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 92svh; margin: 0; padding: 0 0 env(safe-area-inset-bottom);
  overflow: auto; overscroll-behavior: contain; background: var(--p-paper); color: var(--p-ink); border: 0; border-radius: var(--p-r3) var(--p-r3) 0 0;
  box-shadow: 0 -8px 32px rgb(14 35 64 / .18);
}
.book-sheet::backdrop { background: rgb(14 35 64 / .45); }
.book-sheet[open] { animation: sheet-in 380ms var(--p-ease-sheet); }
.book-sheet[open]::backdrop { animation: fade-in 250ms ease; }
.book-sheet.is-closing { animation: sheet-out 240ms var(--p-ease-sheet) forwards; }
.book-sheet.is-closing::backdrop { animation: fade-out 240ms ease forwards; }
.book-sheet.is-dragging { animation: none; }
@keyframes sheet-in { from { translate: 0 100%; } }
@keyframes sheet-out { to { translate: 0 100%; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* The band is as tall as the close button inside it, so the button never hangs over what scrolls under the band (and never
   takes a tap meant for a field); the grab handle sits at its top. Once the sheet is scrolled a hairline closes the band. */
.sheet-top { position: sticky; top: 0; z-index: 2; display: grid; justify-items: center; align-items: start; height: 52px; padding-top: 8px; background: var(--p-paper); touch-action: none; cursor: grab; transition: box-shadow 200ms var(--p-ease); }
.book-sheet.is-scrolled .sheet-top { box-shadow: 0 1px 0 var(--p-grout); }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--p-line-quiet); }
.sheet-close { position: absolute; top: 4px; right: max(8px, env(safe-area-inset-right)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--p-r2); background: none; color: var(--p-ink); cursor: pointer; }
@media (hover: hover) { .sheet-close:hover { background: var(--p-wash); color: var(--p-cobalt); } }
.book-sheet { scroll-padding-top: 56px; }   /* a field brought into view by the keyboard lands below the band */
.book-sheet .book-card { max-width: 40rem; margin-inline: auto; padding-top: 0; border-radius: 0; box-shadow: none; }
.book-sheet .book-card :is(h2, .book-for) { touch-action: none; }
html:has(.book-sheet[open]) { overflow: hidden; }

/* ---------- Other properties along the coast ---------- */
.nextprev { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--p-grout); }
.nextprev > h2 { margin: 0 0 24px; font-size: var(--fs-h2, clamp(2.125rem, 1.7rem + 1.8vw, 3rem)); line-height: var(--lh-head, 1.1); }
/* Two cards side by side only where each leaves its name room for a whole word ("Apartment" in the display face); the
   photo column gives way first (30% of the card, 88 px at least). The card fills its row's height, so two cards in a row
   are as tall as each other. Words in a card never break inside (base.css lets links do so). */
.nextprev ul { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.nextprev li { display: grid; }
.np-card {
  display: grid; grid-template-columns: clamp(5.5rem, 30%, 9rem) minmax(0, 1fr) 20px; grid-template-rows: auto auto 1fr; align-items: center; column-gap: 20px; row-gap: 2px;
  padding: 12px 16px 12px 12px; background: var(--p-paper); color: var(--p-ink); text-decoration: none; border: 1px solid var(--p-grout); border-radius: var(--p-r3);
  overflow-wrap: normal; transition: border-color 200ms var(--p-ease), background-color 200ms var(--p-ease);
}
.np-card img, .np-img-empty { grid-row: 1 / 4; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--p-r2); }
.np-img-empty { background: var(--p-wall); }
.np-area { grid-column: 2; align-self: end; font: 600 var(--p-label) / 1.35 var(--p-text); letter-spacing: .16em; text-transform: uppercase; color: var(--p-ocra); }
.np-name { grid-column: 2; font: 500 1.625rem / 1.15 var(--p-display); font-variation-settings: "opsz" var(--p-opsz-small); overflow-wrap: break-word; }   /* break-word: only a name longer than the column, at 200% zoom */
.np-line { grid-column: 2; align-self: start; overflow: hidden; font-size: var(--p-small); color: var(--p-ink-2); font-variant-numeric: tabular-nums lining-nums; }
/* Facts on one line with a middle dot; the dot that would start a wrapped line is clipped (the design system's facts-line) */
.np-facts { --sep: 1.15em; display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--sep)); }
.np-facts > span { white-space: nowrap; }
.np-facts > span::before { content: "·"; display: inline-block; width: var(--sep); text-align: center; text-indent: 0; }
.np-card .icon { grid-column: 3; grid-row: 1 / 4; color: var(--p-cobalt); transition: transform 200ms var(--p-ease); }
@media (hover: hover) { .np-card:hover { border-color: var(--p-cobalt); background: #FCFCFD; } .np-card:hover .icon { transform: translateX(3px); } }
/* An arrow link (→, another page of this site): no underline at rest, like .where-links and .link-arrow */
.np-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-weight: 600; text-decoration: none; border-radius: var(--p-r2); }
.np-all .icon { transition: transform 200ms var(--p-ease); }
.np-all:focus-visible { text-decoration: underline; text-underline-offset: .22em; }
@media (hover: hover) { .np-all:hover { text-decoration: underline; text-underline-offset: .22em; } .np-all:hover .icon { transform: translateX(3px); } }
@media (max-width: 29.99rem) { .np-card { grid-template-columns: clamp(5.5rem, 30%, 6.5rem) minmax(0, 1fr) 18px; column-gap: 14px; } .np-name { font-size: 1.375rem; } }

/* ---------- Focus: the shared ring, drawn inward inside clipped groups (keep this block after the components) ---------- */
.control:focus-visible { outline: 2px solid transparent; border-color: var(--p-cobalt); box-shadow: 0 0 0 2px var(--p-ring-gap), 0 0 0 4px var(--p-ring); }
.date-half:has(.date-input:focus-visible), .date-btn:focus-visible { z-index: 2; outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--p-ring-gap), 0 0 0 4px var(--p-ring); }
.date-input:focus-visible { outline: none; }
.is-enhanced .date-half:has(.date-input:focus-visible) .date-input { outline: none; }
.choice-item input:focus-visible { outline: none; }
.choice-item:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--p-ring), inset 0 0 0 4px var(--p-paper); }
.choice-item:has(input:focus-visible):has(input:checked) { box-shadow: inset 0 0 0 2px var(--p-ring), inset 0 0 0 4px var(--p-paper), inset 7px 0 0 var(--p-cobalt); }
.stepper input:focus-visible, .stepper button:focus-visible, .cal-day:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--p-ring), inset 0 0 0 4px var(--p-paper); }
.photo-open:focus-visible { outline: 2px solid transparent; outline-offset: -4px; box-shadow: none; }
.photo-open:focus-visible::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--p-cobalt), inset 0 0 0 5px #fff; }
.book-sent:focus-visible, .book-card h2:focus-visible { box-shadow: none; }

/* ---------- Motion preferences: no movement, only fades ---------- */
@media (prefers-reduced-motion: reduce) {
  .gallery img, .back .icon, .book-alt a .icon, .np-card .icon, .np-all .icon, .where-links .icon, .book-more summary .icon { transition: none; }
  .photo-open:hover img, .back a:hover .icon, .book-alt a:hover .icon, .np-card:hover .icon, .np-all:hover .icon, .where-links a:hover .icon { transform: none; }
  .book-bar, .book-bar.is-shown { translate: 0 0; transition: opacity .2s ease, visibility 0s linear .2s; opacity: 0; }
  .book-bar.is-shown { opacity: 1; transition: opacity .2s ease, visibility 0s; }
  .cal[open] { animation: fade-in 150ms ease both; }
  .book-sheet[open] { animation: fade-in 150ms ease; }
  .book-sheet.is-closing { animation: fade-out 150ms ease forwards; }
  .unit-field.is-flash .control, .unit-field.is-flash .choice-list { animation: none; }
}

/* ---------- Windows high contrast: the chosen stay and the panels' edges in the system's colours ---------- */
/* The calendar marks the stay with background colours and the card and calendar have only shadows, all of which forced
   colours drop. Arrival and departure: filled with Highlight; the nights between and the hover preview: a Highlight
   border (dashed for the preview), which leaves the outline to the focus ring; that ring is CanvasText, outside the day and
   above its neighbours. The card, the calendar and the phone sheet get a CanvasText edge (the sheet's, not the card's,
   inside it), and the bar under the date being picked stays a Highlight bar rather than a gap in the dates' edge. */
@media (forced-colors: active) {
  .cal, .book-card { border: 1px solid CanvasText; }
  .date-half.is-current::after { forced-color-adjust: none; background: Highlight; }
  .book-sheet { border-top: 1px solid CanvasText; }
  .book-sheet .book-card { border: 0; }
  .range-start .cal-day, .range-end .cal-day { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  :is(.in-range, .in-preview) .cal-day { border: 1px solid Highlight; }
  .in-preview .cal-day { border-style: dashed; }
  .cal-grid .cal-day:focus-visible { z-index: 1; outline: 2px solid CanvasText; outline-offset: 2px; box-shadow: none; }
}
@media (forced-colors: active) and (hover: hover) {
  .cal-day:not([aria-disabled="true"]):hover { border: 1px solid CanvasText; }
}

/* ---------- Print: one sheet with the photos, the facts and the address; no form ---------- */
.print-only[hidden] { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  .book, .book-bar, .book-sheet, .viewer, .cal, .all-photos, .gallery-count, .property-head .actions, .back, .share, .nextprev, .unit-pick, .where-links { display: none !important; }
  .property { padding: 0; }
  .property > .container { display: block; }
  .property-body { display: block; }
  .gallery-wrap { width: auto; margin: 0 0 5mm; }
  /* The mosaic's five cells, filled in rows (the phone strip's rules apply too: a printed page is under 48rem wide) */
  .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 30mm); grid-auto-flow: row; height: auto; gap: 2mm; overflow: visible; }
  .gallery:is([data-count="1"], [data-count="2"]) { grid-template-rows: 62mm; }
  .property-section > h2, .unit-name { break-after: avoid; }
  .units { grid-template-columns: repeat(auto-fill, minmax(70mm, 1fr)); }
  .unit { padding: 4mm; }
  .gallery li:nth-child(n + 6) { display: none; }
  .gallery-first { grid-row: 1 / 3; }
  .photo-open, .gallery img { height: 100%; }
  .gallery img { aspect-ratio: auto; }
  .property-head h1 { font-size: 28pt; }
  .property-section + .property-section { margin-top: 6mm; }
  .property-section > h2 { margin-bottom: 3mm; font-size: 16pt; }
  .fact-list li, .units, .unit, .aerial, .features, .rules, .note { break-inside: avoid; }
  .aerial { max-width: 90mm; }
  a { color: #000; text-decoration: none; }
  .print-only { display: block !important; margin-top: 6mm; font-size: 10pt; }
}