/* ------------------------------------------------------------------
   Anza × MotoPress Hotel Booking
   Presentation-only layer. No display:none on booking controls and no
   JavaScript logic that bypasses MotoPress availability / checkout.
   ------------------------------------------------------------------ */

/* --- Shared form language ---
   v2.16: full visible border (not just underline) + branded focus color,
   per request. Underline-only inputs read as "not clickable" to some
   users; a full border on every field removes that ambiguity. */
.anza-mphb-search-form input,
.anza-mphb-search-form select,
.anza-mphb-room-booking input,
.anza-mphb-room-booking select,
.mphb-booking-form input,
.mphb-booking-form select,
.mphb-booking-form textarea {
	width: 100%;
	min-height: 52px;
	padding: .75rem 1rem;
	border: 1px solid var(--anza-line);
	border-radius: var(--radius);
	background: var(--anza-paper);
	color: var(--anza-ink);
	font: 400 1rem/1.4 var(--font-sans);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.anza-mphb-search-form input::placeholder,
.anza-mphb-room-booking input::placeholder,
.mphb-booking-form input::placeholder { color: var(--anza-ink-soft); opacity: .85; }
.anza-mphb-search-form input:focus,
.anza-mphb-search-form select:focus,
.anza-mphb-room-booking input:focus,
.anza-mphb-room-booking select:focus,
.mphb-booking-form input:focus,
.mphb-booking-form select:focus,
.mphb-booking-form textarea:focus {
	outline: none;
	border: 2px solid var(--anza-accent);
	padding: calc(.75rem - 1px) calc(1rem - 1px); /* compensate for the wider border so nothing shifts */
	box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
/* :focus-visible (keyboard nav) gets the same clearly-visible branded ring;
   this isn't a weaker fallback, it's the same treatment, since removing
   the browser default without something equally visible would be an
   accessibility regression. */
.anza-mphb-search-form input:focus-visible,
.anza-mphb-search-form select:focus-visible,
.anza-mphb-room-booking input:focus-visible,
.anza-mphb-room-booking select:focus-visible,
.mphb-booking-form input:focus-visible,
.mphb-booking-form select:focus-visible,
.mphb-booking-form textarea:focus-visible {
	border-color: var(--anza-accent);
	box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.anza-mphb-search-form label,
.anza-mphb-room-booking label,
.mphb-booking-form label {
	display: block;
	margin-bottom: .5rem;
	font: 600 .7rem/1.2 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--anza-ink);
}
.anza-mphb-search-form abbr,
.anza-mphb-room-booking abbr,
.mphb-booking-form abbr { text-decoration: none; }
.mphb_sc_search-submit-button-wrapper,
.mphb-reserve-btn-wrapper,
.mphb_sc_search_results_book_button { margin: 0; }
.mphb-booking-form p { margin: 0 0 var(--space-3); }
.mphb-booking-form p:last-child { margin-bottom: 0; }
.mphb_sc_search-submit-button-wrapper .button,
.mphb-reserve-btn-wrapper .button,
.mphb_sc_search_results_book_button .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	width: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var(--anza-accent) !important;
	border-radius: var(--radius) !important;
	background: var(--anza-accent) !important;
	color: var(--anza-cream) !important;
	font: 500 .75rem/1 var(--font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: background .2s ease, color .2s ease;
	cursor: pointer;
}
.mphb_sc_search-submit-button-wrapper .button:hover,
.mphb-reserve-btn-wrapper .button:hover,
.mphb_sc_search_results_book_button .button:hover {
	background: transparent !important;
	color: var(--anza-ink) !important;
}
/* --- Homepage availability search: actual MotoPress form --- */
.anza-hero-search {
	max-width: 1080px;
	margin-top: 3rem;
	/* v7.7 — reverted to a solid white/paper panel, matching the reference
	   build's search bar (a plain card sitting on the hero photo, same as
	   most hospitality sites). v2.24 tried a translucent dark-glass panel
	   instead — visually it read as "not a real field," since every field
	   on the rest of the site is a solid white/paper box with a visible
	   border, and this was the one exception. */
	padding: 1.25rem;
	background: var(--anza-cream);
	border: 1px solid var(--anza-line);
	border-radius: var(--radius);
	box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .35);
}
@media (min-width: 640px) {.anza-hero-search { padding: 1.5rem; } }
.anza-mphb-search-form { color: var(--anza-ink); }
/* Labels stay --anza-ink here too, now that the panel is a solid light
   background rather than dark glass — the old cream-label override
   (needed for readability on the dark panel) no longer applies. */
/* v2.16 — each field now has its own visible border (see shared input/select
   rules above), so the old "shared hairline via background trick" grid
   would double up as a border around a border. Switched to a plain gapped
   grid — each field is its own self-contained block, ~24–32px apart. */
.anza-mphb-search-form__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
.anza-mphb-search-form__fields > p { margin: 0; }
.anza-mphb-search-form__fields .button { height: 100%; min-height: 52px; }
@media (min-width: 760px) {.anza-mphb-search-form__fields {
		/* v2.25 — the submit column was a hardcoded 190px, sized for the
		   English "Search Availability". The French label "Vérifier la
		   disponibilité" is longer and, on a native <input type="submit">,
		   browsers clip overflowing text instead of wrapping it (unlike a
		   <button>+<span>), so the label was getting cut off mid-word.
		   minmax() lets the column grow to fit the actual button content
		   instead of hardcoding a width sized for a different language. */
		/* v7.4 — 4 columns, not 5: the guest-count popover replaces the
		   separate Adults/Children columns with one field, once
		   anza-guest-picker.js confirms it initialized (the native
		   fields get display:none only under .anza-has-guest-picker,
		   which is exactly when there are only 4 real grid items here). */
		/* v7.7 — "FIXING THE LINE": the two date columns were minmax(0,1fr),
		   so once the guests (190-230px) and submit (230px+) columns claimed
		   their space, whatever was left got split between check-in/check-out
		   — on the hero's narrower panel width that could shrink well below
		   what a native date input needs to show "19/08/2026", and the
		   browser truncates the value to just "19" rather than wrapping.
		   140px is roughly the narrowest a native date input can go before
		   it starts hiding digits, so the columns can no longer collapse
		   past that. */
		grid-template-columns: minmax(140px,1fr) minmax(140px,1fr) minmax(190px,230px) minmax(230px, auto);
		align-items: end;
		gap: var(--space-2);
	}
}

/* v7.4 — guest-count popover (progressive enhancement over the native
   Adults/Children <select> fields; see anza-guest-picker.js). Hidden only
   once the script confirms a picker was built for this form, so a JS
   failure leaves the original two dropdowns visible and fully working. */
.anza-has-guest-picker .anza-guest-picker-source { display: none; }
.anza-guest-picker { position: relative; }
/* v7.7 — same chevron as every real <select> beside it (see the
   "Premium <select> styling" rule below): this trigger is a <button>,
   not a <select>, so it never picked up that background-image, and sat
   in the same row looking like a plain box with no dropdown affordance
   while its neighbours all had one. */
.anza-guest-picker__trigger {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-height: 52px;
	padding: .75rem 1.25rem .75rem 1rem;
	border: 1px solid var(--anza-line);
	border-radius: var(--radius);
	background-color: var(--anza-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 11px 7px;
	color: var(--anza-ink);
	cursor: pointer;
	text-align: left;
}
.anza-guest-picker.is-open .anza-guest-picker__trigger { border-color: var(--anza-accent); }
.anza-guest-picker__label {
	display: block;
	margin-bottom: .3rem;
	font: 600 .7rem/1.2 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--anza-ink);
}
.anza-guest-picker__summary { font: 400 1rem/1.4 var(--font-sans); }
/* v7.5 — position: fixed, not absolute. anza-guest-picker.js appends
   this panel to <body> and computes top/left/width in JS from the
   trigger's own bounding rect, because the hero search form's ancestor
   (.hero) clips overflow to contain its background video — a
   position:absolute child anchored to a relatively-positioned parent
   inside that box gets silently cut off past the hero's edge no
   matter what z-index it has. Fixed positioning takes it out of every
   ancestor's overflow/clipping entirely. */
.anza-guest-picker__panel {
	position: fixed;
	z-index: 1000;
	padding: 1.25rem;
	background: var(--anza-cream);
	border: 1px solid var(--anza-line);
	border-radius: var(--radius);
	color: var(--anza-ink);
}
.anza-guest-picker__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.anza-guest-picker__row + .anza-guest-picker__row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--anza-line-soft); }
.anza-guest-picker__row-title { margin: 0; font: 400 .95rem/1.3 var(--font-sans); }
.anza-guest-picker__stepper { display: flex; align-items: center; gap: .85rem; }
.anza-guest-picker__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: transparent;
	color: var(--anza-accent);
	font: 500 1.1rem/1 var(--font-sans);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.anza-guest-picker__btn:hover:not(:disabled) { background: var(--anza-accent); color: var(--anza-cream); }
.anza-guest-picker__btn:disabled { border-color: var(--anza-line); color: var(--anza-line); cursor: not-allowed; }
.anza-guest-picker__count { min-width: 1.25rem; text-align: center; font: 500 1rem/1 var(--font-sans); }
/* --- Homepage MotoPress room listing: dynamic cards --- */
.mphb_sc_rooms-wrapper.anza-mphb-home-rooms,
.anza-mphb-home-rooms .mphb-room-type-list {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: var(--space-5) var(--space-4);
}
/* ------------------------------------------------------------------
 * v3.7 — THE row-misalignment bug. Found in MotoPress's own stylesheet
 * (assets/css/mphb.css), which ships this rule:
 *
 *   .mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type),
 *   .mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type) {
 *       margin-top: 4em;
 *   }
 *
 * That's correct for MotoPress's default layout, where cards are a
 * single stacked column and 4em is the space between them. But we lay
 * them out as a GRID, and the grid already provides the gap. The result
 * was that every card except the first carried an extra ~64px of top
 * margin, so card 2 sat lower than card 1 in the same row, and rows 3/4
 * were ragged too. That is exactly the offset visible on the homepage
 * and the Chambres archive.
 *
 * Selectors below deliberately mirror MotoPress's own specificity and
 * add one class, so they win without needing !important.
 * ------------------------------------------------------------------ */
.mphb_sc_rooms-wrapper.anza-mphb-home-rooms .mphb-room-type:not(:first-of-type),
.mphb_sc_rooms-wrapper.anza-mphb-directory .mphb-room-type:not(:first-of-type),
.anza-mphb-home-rooms .mphb-room-type-list .mphb-room-type:not(:first-of-type),
.anza-mphb-directory .mphb-room-type-list .mphb-room-type:not(:first-of-type),
.mphb_sc_search_results-wrapper .mphb-room-type-list .mphb-room-type:not(:first-of-type) {
	margin-top: 0;
}
@media (min-width: 780px) {.mphb_sc_rooms-wrapper.anza-mphb-home-rooms,
.anza-mphb-home-rooms .mphb-room-type-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* v2.16 — premium card: bordered container, generous internal padding,
   16:9 hero image with a subtle hover zoom, vertical stack (title →
   amenities → price → actions) instead of the old cramped two-column
   layout. */
.anza-mphb-room-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--anza-line); border-radius: var(--radius);
	background: var(--anza-paper);
	overflow: hidden;
	/* v3.1 — hover polish that stays inside "zero shadow, zero radius":
	   border darkens to ink and the card lifts a couple pixels instead
	   of gaining a drop shadow, so it still reads as considered rather
	   than static without contradicting the rest of the theme. */
	transition: border-color .2s ease, transform .2s ease;
}
.anza-mphb-room-card:hover {
	border-color: var(--anza-ink);
	transform: translateY(-3px);
}
.anza-mphb-room-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--anza-sand);
	/* Same cap as the search-results media, for the same reason. */
	max-height: 420px;
}
.anza-mphb-room-card__media img,
.anza-mphb-room-card__media .mphb-room-type-gallery-wrapper img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.anza-mphb-room-card:hover .anza-mphb-room-card__media img { transform: scale(1.07); }
.anza-mphb-room-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-3);
}
@media (min-width: 640px) {.anza-mphb-room-card__body { padding: var(--space-4); } }
.anza-mphb-room-card__title h2,
.anza-mphb-room-card__title h3,
.anza-mphb-room-card .mphb-room-type-title {
	margin: 0;
	font: 400 clamp(1.4rem, 2vw, 1.85rem)/1.12 var(--font-display);
	letter-spacing: -.01em;
}
.anza-mphb-room-card__title a { color: var(--anza-ink); text-decoration: none; }
/* v2.28 — booking-unit label under the room name, same treatment as the
   search-results card, so a guest sees "Lit en dortoir" / "Chambre double
   privée" here too, not just after they've already searched dates. */
.anza-mphb-room-card__type {
	margin: .3rem 0 0;
	font: 500 .68rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--anza-ink-soft);
}
.anza-mphb-room-card__meta {
	margin: .3rem 0 0;
	font: 400 .78rem/1.3 var(--font-sans);
	color: var(--anza-ink-soft);
}
.anza-mphb-room-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem var(--space-3);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}
.anza-mphb-room-card__amenities li {
	display: flex;
	align-items: center;
	gap: .4rem;
	font: 400 .82rem/1.3 var(--font-sans);
	color: var(--anza-ink-soft);
}
.anza-mphb-room-card__amenity-icon { flex-shrink: 0; display: inline-flex; color: var(--anza-ink-soft); }
.anza-mphb-room-card__excerpt p { margin: var(--space-2) 0 0; color: var(--anza-ink-soft); font-size: .9rem; line-height: 1.55; }
/* The raw MotoPress attributes text (capacity/size/bed-name/room-type-link)
   is superseded by the icon row above — kept in the DOM (for anything that
   hooks into it) but not shown, rather than removing the do_action call. */
.anza-mphb-room-card__details--legacy { display: none; }
.anza-mphb-room-card__price {
	/* v2.23 — pinned to the bottom of the card regardless of how much text
	   sits above it (title/amenities/excerpt length varies per room), so
	   price+actions land at the same height across every card in a row
	   instead of floating wherever the content above happens to end. */
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--anza-line-soft);
}
.anza-mphb-room-card__price .mphb-price,
.anza-mphb-room-card__price .mphb-price-from {
	font: 400 2rem/1 var(--font-display);
	color: var(--anza-accent);
}
.anza-mphb-room-card__price .mphb-price-period { display: block; margin-top: .3rem; font-size: .72rem; color: var(--anza-ink-soft); }
/* v2.22 — MotoPress's own plugin stylesheet puts a dashed bottom border on
   its price/period markup (a decorative choice on its side, not ours). It
   survived the earlier <abbr> text-decoration fix because this is a
   border, not a text-decoration, and I don't know MotoPress's exact class
   for it. Scoped kill of any inherited border/underline on anything
   inside our own price wrappers — same "scope to our wrapper, generic
   children" approach already proven for the calendar and card-details
   fixes, so it doesn't depend on guessing the plugin's class name. */
.anza-mphb-room-card__price *,
.anza-mphb-search-room__price *,
.anza-single-room__price *,
.anza-experiences__price *,
.anza-single-room-card__price-note {
	border: none !important;
	text-decoration: none !important;
}
.anza-mphb-room-card__price-note {
	display: block;
	margin-top: .3rem;
	font: 500 .68rem/1.3 var(--font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--anza-ink-soft);
}
/* v2.31 — booking-unit + capacity line, its own row directly under
   MotoPress's own price output. Deliberately NOT inside the same flex
   row as the price: two separate block-level elements, so there is no
   way for "€15", MotoPress's own unit wording, and this text to run
   together on one line regardless of how long any of the three are. */
.anza-mphb-room-card__price-meta,
.anza-mphb-search-room__price-meta {
	display: block;
	margin-top: .35rem;
	font: 500 .72rem/1.4 var(--font-sans);
	letter-spacing: .02em;
	color: var(--anza-ink-soft);
}
.anza-mphb-room-card__actions {
	margin-top: auto;
	padding-top: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	/* v3.3 — safety net against the overflow this row produced when the
	   card got narrow: allow the two actions to drop onto separate lines
	   rather than forcing them side by side and letting the label spill
	   outside its own border. */
	flex-wrap: wrap;
}
.anza-mphb-room-card__actions > * { min-width: 0; }
.anza-mphb-room-card__actions .mphb-view-details-button-wrapper .button {
	border: 1px solid var(--anza-ink);
	background: transparent;
	padding: .85rem 1.25rem;
	color: var(--anza-ink);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background .2s ease, color .2s ease;
}
.anza-mphb-room-card__actions .mphb-view-details-button-wrapper .button:hover { background: var(--anza-ink); color: var(--anza-cream); }
@media (max-width: 480px) {.anza-mphb-room-card__actions { flex-direction: column; align-items: stretch; }
}
/* --- Accommodation directory (same MotoPress cards, not duplicate content) --- */
.anza-mphb-archive-search { max-width: 920px; margin: 0 0 4rem; }
.anza-mphb-directory,
.anza-mphb-directory .mphb-room-type-list {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: var(--space-5) var(--space-4);
}
@media (min-width: 780px) {.anza-mphb-directory,
.anza-mphb-directory .mphb-room-type-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* v3.3 — the 4-across tier added in v3.1 is reverted. At four columns
   each card is ~250px, which is too narrow for this card: the two
   actions can't sit side by side (the "Voir les détails" label
   overflowed its own border and collided with "Réserver"), amenities
   wrapped mid-row and titles broke onto two lines. Two columns gives
   the four rooms a balanced 2×2 and keeps every card wide enough for
   the actions row. */

/* --- Search Results: real-time availability cards --- */
.mphb_sc_search_results-wrapper { max-width: 1100px; margin: 0 auto; }
.anza-mphb-results-summary { margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--anza-line-soft); }
.anza-mphb-results-summary h1 { margin: .75rem 0 .6rem; font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.1 var(--font-display); }
.anza-mphb-results-summary p { margin: 0; }
.anza-mphb-results-summary__hint { margin-top: .4rem !important; }
/* v2.28 — cards are compact now (see below), so a 2-up grid on desktop
   fits without feeling cramped, and comparing rooms no longer means
   scrolling past oversized single-column blocks one at a time. */
.mphb_sc_search_results-wrapper .mphb-room-type-list { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) {.mphb_sc_search_results-wrapper .mphb-room-type-list { grid-template-columns: repeat(2, 1fr); } }
.anza-mphb-search-room {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--anza-line); border-radius: var(--radius);
	background: var(--anza-paper);
	transition: border-color .2s ease;
}
.anza-mphb-search-room:hover { border-color: var(--anza-ink); }
/* v2.28 — the old side-by-side (image 42% / content 58%) layout, combined
   with a 240px media min-height, is what made these cards run so tall:
   on a narrow content column the image alone could exceed 300px, before a
   single word of information. A single compact top image with a fixed
   ratio keeps every card the same shape and a predictable, short height. */
.anza-mphb-search-room__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	/* v3.3 — the real cause of the big empty block under these images.
	   On a wide search-results card (~1100px) a pure 16/10 ratio makes
	   this box ~690px tall, while the gallery slide inside is capped by
	   `max-height: 52vh`. The container was simply taller than any image
	   it could contain, and the leftover showed as the sand background.
	   v3.9 note: this cap stays as a pre-JS fallback, but the real
	   control is on the injected .anza-gallery sibling further down. */
	max-height: 260px;
}
/* v3.6 — the v3.3 rules that lived here targeted
   `.anza-mphb-search-room__media .anza-gallery` (a DESCENDANT). Confirmed
   against the live DOM, that can never match: anza-gallery.js sets
   `hidden` on __media and injects .anza-gallery as its NEXT SIBLING, not
   inside it. Those rules were dead, and the max-height above only applies
   to an element that is display:none once the JS has run. The real
   controls are the sibling selectors further down this file. */
.anza-mphb-search-room__media img,
.anza-mphb-search-room__media .mphb-room-type-gallery-wrapper img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.anza-mphb-search-room__availability {
	position: absolute;
	left: .85rem;
	top: .85rem;
	z-index: 3;
	margin: 0;
	padding: .45rem .6rem;
	background: var(--anza-paper);
	color: var(--anza-ink);
	font: 500 .62rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}
/* ------------------------------------------------------------------
   v2.28 — full rebuild of the visible card per the compact hostel-card
   spec: name, booking-unit label, a short amenity line, price grouped
   directly with its unit + capacity note, then actions — no marketing
   description, no separate "details" list, no large gaps between price
   and the buttons that act on it.
   ------------------------------------------------------------------ */
/* v3.9 — density pass on the search-results card.
   The card was taking close to a full viewport each: a 420px-tall image
   plus 1.25rem padding and .85rem gaps between every block. On a
   results page the guest is comparing rooms, so the useful thing is
   seeing several at once, not one billboard at a time. Image capped
   much shorter, padding and gaps tightened, title stepped down. */
.anza-mphb-search-room__content { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.25rem; }
.anza-mphb-search-room__title h2,
.anza-mphb-search-room__title h3,
.anza-mphb-search-room .mphb-room-type-title {
	margin: 0;
	/* v2.28 — smaller than the old clamp(1.6rem,2.6vw,2.35rem): in a 2-up
	   grid a 2.35rem display face made the room name compete with the
	   price for visual weight it doesn't need on a comparison card. */
	font: 400 1.3rem/1.15 var(--font-display);
}
.anza-mphb-search-room__title a { color: var(--anza-ink); text-decoration: none; }
.anza-mphb-search-room__type {
	margin: .2rem 0 0;
	font: 500 .68rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--anza-ink-soft);
}
/* v7.3 — size icon on the search-result card meta line, matching the
   reference's icon+text pattern. Real MotoPress size data only (the
   same figure anza_room_meta_line() already output as plain text) —
   this adds an icon in front of it, it doesn't add or invent a
   number. */
.anza-mphb-search-room__meta {
	margin: .3rem 0 0;
	display: flex;
	align-items: center;
	gap: .35rem;
	font: 400 .78rem/1.3 var(--font-sans);
	color: var(--anza-ink-soft);
}
.anza-mphb-search-room__meta::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: none;
	background-color: var(--anza-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.anza-mphb-search-room__amenities {
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--anza-ink-soft);
}
.anza-mphb-search-room__booking {
	margin-top: auto;
	padding-top: .85rem;
	border-top: 1px solid var(--anza-line-soft);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.anza-mphb-search-room__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .1rem; }
.anza-mphb-search-room__price .mphb-regular-price,
.anza-mphb-search-room__price strong:empty { display: contents; }
.anza-mphb-search-room__price .mphb-price { font: 400 1.65rem/1 var(--font-display); color: var(--anza-accent); }
.anza-mphb-search-room__price-unit { font-size: .72rem; color: var(--anza-ink-soft); }
.anza-mphb-search-room__capacity-note {
	flex-basis: 100%;
	font: 500 .72rem/1.4 var(--font-sans);
	letter-spacing: .02em;
	color: var(--anza-ink-soft);
}
.anza-mphb-search-room__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: .6rem;
	column-gap: .75rem;
	width: 100%;
	margin-top: .25rem;
}
.anza-mphb-search-room__actions .mphb-view-details-button-wrapper .button {
	border: 1px solid var(--anza-ink);
	background: transparent;
	padding: .7rem 1.1rem;
	color: var(--anza-ink);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.anza-mphb-search-room__actions .mphb-view-details-button-wrapper .button:hover { background: var(--anza-ink); color: var(--anza-cream); }
.anza-mphb-search-room__actions .mphb-reserve-btn-wrapper { margin: 0; }
.anza-mphb-search-room__actions .mphb-reserve-btn-wrapper .button {
	width: auto;
	min-height: 46px;
	padding: .8rem 1.25rem;
	border: 1px solid var(--anza-accent);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.anza-mphb-search-room__actions .mphb-reserve-btn-wrapper .button:hover { background: var(--anza-accent-dark); color: var(--anza-cream); }
/* The room-quantity picker ("N of X available") MotoPress renders in the
   booking block — small inline control, its own compact treatment rather
   than the full-width .anza-mphb-search-form select rules. Scoped
   generically since we don't control MotoPress's exact markup for it. */
.anza-mphb-search-room__booking select {
	width: auto;
	min-height: 40px;
	min-width: 58px;
	padding: .45rem 1.6rem .45rem .65rem;
	border: 1px solid var(--anza-line);
	background-color: var(--anza-paper);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 11px 7px;
	font: 400 .85rem/1.2 var(--font-sans);
	color: var(--anza-ink);
}
.anza-mphb-search-room__booking p,
.anza-mphb-search-room__booking > * {
	font-size: .78rem;
	color: var(--anza-ink-soft);
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}
/* --- Single accommodation: genuine MotoPress content in custom layout --- */
.anza-single-room { padding: 0; background: var(--anza-cream); }
.anza-single-room__gallery-wrap { padding-top: var(--space-5); }
.anza-single-room__layout { padding-bottom: 6rem; }
@media (min-width: 768px) {.anza-single-room__layout { padding-bottom: 7rem; } }
/* v2.15 — gallery now lives inside the left content column (not full-bleed
   below the hero), so it just needs to fill that column's width like any
   other element in it — no special container/width treatment needed
   anymore, unlike when it used to sit outside .anza-single-room__layout. */
.anza-single-room__gallery { margin-bottom: var(--space-4); }
.anza-single-room__gallery[hidden] + .anza-gallery { margin-bottom: var(--space-4); }
/* Only used if anza_page_hero() isn't available (e.g. a stale parent theme
   deploy) — self-contained top padding so content never sits under the
   transparent nav. */
.anza-single-room__header { padding-top: 10rem; margin-bottom: 3.5rem; }
.anza-single-room__gallery .mphb-room-type-gallery-wrapper,
.anza-single-room__gallery .mphb-room-type-gallery { margin: 0; }
.anza-single-room__gallery img { width: 100%; object-fit: cover; }
.anza-single-room__layout { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 980px) {.anza-single-room__layout { grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); gap: 6rem; } }
.anza-single-room__facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; margin: 0; padding: 1.5rem 0; border-block: 1px solid var(--anza-line-soft); }
.anza-single-room__facts dt { font: 500 .65rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--anza-ink-soft); }
.anza-single-room__facts dd { margin: .65rem 0 0; font: 400 clamp(1.1rem, 1.8vw, 1.5rem)/1.2 var(--font-display); }
.anza-single-room__description { margin-top: 3rem; color: var(--anza-ink); font-size: 1.05rem; line-height: 1.75; max-width: 42rem; }
.anza-single-room__description p { margin: 0 0 1.25rem; }
.anza-single-room__description h2,
.anza-single-room__description h3 { margin: 2.25rem 0 1rem; font-size: 1.3rem; }
.anza-single-room__amenities { margin-top: 4rem; }
.anza-single-room__amenities ul {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 1rem 2rem;
	padding: 0;
	list-style: none;
	margin: 1.25rem 0 0;
}
.anza-single-room__amenities li {
	display: flex;
	align-items: center;
	gap: .65rem;
	color: var(--anza-ink);
}
.anza-single-room__amenity-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--anza-ink-soft);
}
.anza-single-room__booking { align-self: start; }
@media (min-width: 980px) {.anza-single-room__booking { position: sticky; top: 2rem; } }
.anza-single-room__booking-inner { border: 1px solid var(--anza-line); border-radius: var(--radius); background: var(--anza-paper); padding: 2rem; }
.anza-single-room__price { margin: 1rem 0 1.75rem; }
.anza-single-room__price .mphb-price,
.anza-single-room__price .mphb-room-type-price { font: 400 2rem/1 var(--font-display); color: var(--anza-accent); }
.anza-single-room__price p { margin: 0; }
.anza-single-room__booking .mphb-reservation-form-title { display: none; }
.anza-single-room__booking .mphb-reservation-form { margin: 0; }
.anza-single-room__booking .mphb-reservation-form > p { margin: 0 0 1rem; }
.anza-single-room__booking .mphb-reservation-form > p:last-child { margin-bottom: 0; }
/* Belt-and-braces: the two rules above assume MotoPress's booking-form
   wrapper is literally class="mphb-reservation-form". If that guess is
   wrong for a given MotoPress version, those rules silently never apply,
   and — because of this site's CSS reset — every field's <p> falls back to
   zero margin, so the next field's label sits flush against the previous
   field's input with no gap. That's what "labels overlapping/colliding"
   looks like. This scopes the same spacing to OUR OWN wrapper
   (.anza-single-room__booking-inner, guaranteed to exist) and any <p>
   inside it, regardless of what MotoPress names its own wrapper. */
.anza-single-room__booking-inner p { margin: 0 0 var(--space-3); }
.anza-single-room__booking-inner p:last-child { margin-bottom: 0; }
.anza-single-room__booking-inner label { display: block; margin: 0 0 .4rem; }
.anza-single-room__booking-inner input,
.anza-single-room__booking-inner select { display: block; width: 100%; }
.anza-single-room__booking .mphb-errors-wrapper { margin: 0 0 1rem; padding: .75rem; border-left: 2px solid var(--anza-ink); background: var(--anza-cream); font-size: .82rem; }
.anza-mobile-book { display: none; }
@media (max-width: 979px) {.anza-mobile-book { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; display: block; padding: 1rem; background: var(--anza-accent); color: var(--anza-cream); text-align: center; text-decoration: none; font: 500 .72rem/1 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; }.anza-single-room { padding-bottom: 9rem; }
}
/* --- Related rooms (bottom of single room page) --- */
.anza-related-rooms { border-top: 1px solid var(--anza-line-soft); background: var(--anza-paper); }
/* --- Checkout: native MotoPress one-page customer/payment form --- */
.mphb_sc_checkout-wrapper { max-width: 1120px; margin: 0 auto; }
.mphb_sc_checkout-wrapper h2,
.mphb_sc_checkout-wrapper h3 { font-family: var(--font-display); font-weight: 400; color: var(--anza-ink); }
.mphb-checkout-section,
.mphb-customer-details,
.mphb-booking-details { margin: 0 0 2rem; padding: 0 0 2rem; border-bottom: 1px solid var(--anza-line-soft); }
.mphb-booking-details { background: var(--anza-paper); padding: 1.5rem; border: 1px solid var(--anza-line); border-radius: var(--radius); }
.mphb-room-details { padding: 1rem 0; border-bottom: 1px solid var(--anza-line-soft); }
.mphb-price-breakdown { font-size: .9rem; }
.mphb-total-price { font: 400 1.8rem/1 var(--font-display); color: var(--anza-accent); }

/* ==================================================================
   v7.6 — checkout: fix the sidebar, don't just approximate it.

   v7.5 gave .mphb-room-price-breakdown-wrapper / .mphb-total-price /
   .mphb_sc_checkout-submit-wrapper their OWN grid-row numbers (1, 2, 3)
   matching .mphb-booking-details / .mphb-checkout-text-wrapper /
   .mphb-customer-details on the left. That looked right on paper, but
   CSS Grid row TRACKS are shared across every column — row 1's height
   is max(left cell, right cell), and the left column's sections (dates,
   beds, extra services) are far taller than the price card. So the
   short price card sat inside a tall row 1, then "Total" and the
   button — each waiting for their own equally-mismatched row — ended
   up stranded below big gaps, exactly the "long space" / "summary at
   the bottom, not sticky" complaint. There's no way to size two
   columns' rows independently without either a wrapper element (no
   theme override exists for MotoPress's checkout template — see the
   note on .mphb_sc_checkout-wrapper above) or moving the DOM at
   runtime. anzaWrapCheckoutSummary() in motopress.js does the latter:
   it groups price-breakdown + errors + total + submit into one real
   <div class="anza-checkout-summary">, so it can be ONE sticky grid
   item instead of three that don't know about each other's height.
   This only moves existing elements inside the same <form> — no field
   is renamed, cloned or removed, so everything still submits exactly
   as MotoPress expects. If JS fails to run for any reason, the four
   pieces still render in normal document order, just not grouped or
   sticky — never hidden or broken. */
.mphb-customer-details,
.mphb-room-price-breakdown-wrapper {
	background: var(--anza-paper);
	padding: 1.5rem;
	border: 1px solid var(--anza-line);
	border-radius: var(--radius);
}
/* Name/last name and email/phone paired up instead of each field
   alone on its own full-width row — real reason the section read as
   "long." Country and the notes textarea stay full width, since a
   country <select> or a textarea paired next to a text field looks
   arbitrary rather than intentional. */
@media (min-width: 560px) {
	.mphb-customer-details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--space-3);
	}
	.mphb-customer-details-title,
	.mphb-required-fields-tip,
	.mphb-customer-country,
	.mphb-customer-note { grid-column: 1 / -1; }
}
.anza-checkout-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.anza-checkout-summary .mphb-total-price { margin: 0; padding: 0 .25rem; }
.anza-checkout-summary .mphb_sc_checkout-submit-wrapper,
.anza-checkout-summary .mphb_sc_checkout-submit-wrapper .button,
.anza-checkout-summary input[type="submit"] { width: 100%; }
/* v7.7 — MotoPress's own "thank you for choosing us / please review your
   booking" instructional paragraph sat between the room details and "Vos
   informations," pushing the actual form down below the fold on first
   load — a guest had to scroll past a courtesy message before seeing
   anything they needed to fill in. Client asked to remove it; the
   confirmation/cancellation policy text it carried isn't lost, since it's
   boilerplate, not booking-specific data. */
.mphb-checkout-text-wrapper { display: none; }

@media (min-width: 900px) {
	.mphb_sc_checkout-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem);
		gap: var(--space-4);
		align-items: start;
	}
	.mphb-booking-details,
	.mphb-customer-details { grid-column: 1; }
	.mphb-booking-details { margin-bottom: 0; }
	.mphb-customer-details { margin-bottom: 0; }

	.anza-checkout-summary {
		grid-column: 2;
		grid-row: 1 / -1;
		position: sticky;
		top: var(--space-3);
		align-self: start;
	}
}
.mphb-login-form-wrap { padding: 1rem 0; border-bottom: 1px solid var(--anza-line-soft); }
.mphb-coupon-code-wrapper { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.mphb-coupon-code-wrapper label { width: 100%; }
.mphb-coupon-code-wrapper input { flex: 1; }
.mphb-coupon-code-wrapper .button { width: auto; min-height: 42px; }
/* --- Booking confirmation --- */
.mphb_sc_booking_confirmation-wrapper { max-width: 880px; margin: 0 auto; }
.anza-mphb-confirmation { padding: 5rem 0; }
.anza-mphb-confirmation h1 { margin: 1rem 0 1.5rem; max-width: 800px; }
.anza-mphb-confirmation p.type-body { max-width: 620px; color: var(--anza-ink-soft); }
.mphb-booking-details { margin-top: 2rem; }
/* --- Native calendar: readable without changing availability semantics --- */
.mphb-calendar { border: 1px solid var(--anza-line); border-radius: var(--radius); background: var(--anza-paper); }
.mphb-calendar a { color: inherit; }
/* --- System pages & plugin messages --- */
.mphb-errors-wrapper,
.mphb-notice { padding: 1rem; border-left: 2px solid var(--anza-ink); background: var(--anza-paper); color: var(--anza-ink); }
.mphb-pagination { margin-top: 2rem; }
.mphb-pagination a,
.mphb-pagination span { padding: .5rem; color: var(--anza-ink); }
/* --- Compatibility hardening across MotoPress versions --- */
/* Some releases output buttons without the wrapper classes used above. */
.mphb-button,
button.mphb-button,
input.mphb-button,
.mphb-book-button,
.mphb-reserve-btn,
.mphb-recommendation-reserve-button,
.mphb_sc_search_results-wrapper button[type="submit"],
.mphb_sc_search_results-wrapper input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: .85rem 1.15rem !important;
	border: 1px solid var(--anza-accent) !important;
	border-radius: var(--radius) !important;
	background: var(--anza-accent) !important;
	color: var(--anza-cream) !important;
	font: 500 .72rem/1 var(--font-sans) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: none !important;
	cursor: pointer;
}
.mphb-button:hover,
.mphb-button:focus-visible,
.mphb-book-button:hover,
.mphb-reserve-btn:hover,
.mphb_sc_search_results-wrapper button[type="submit"]:hover {
	background: var(--anza-accent-dark) !important;
	border-color: var(--anza-accent-dark) !important;
	color: var(--anza-cream) !important;
	outline: 2px solid var(--anza-accent-dark);
	outline-offset: 2px;
}
/* One result interface only. The setup plugin also sets
   mphb_enable_recommendation=false; this is a cache-safe fallback. */
.mphb-recommendation-title,
.mphb-recommendation { display: none !important; }
/* Stable media dimensions independent of source-image dimensions. */
.anza-mphb-room-card__media,
.anza-mphb-search-room__media { background: var(--anza-sand); }
/* v3.2 — the media containers already enforce their own aspect-ratio
   (4/3 for cards, 16/10 for search results) and the images inside are
   absolutely positioned at inset:0. Also forcing aspect-ratio onto the
   IMG fought that: the browser sized the image from the ratio instead
   of filling its container, so it rendered short and the container's
   sand background showed through underneath as a large empty block.
   Removing the ratio from the img and letting inset:0 + object-fit do
   the work fixes the gap. */
.anza-mphb-room-card__media-inner,
.anza-mphb-search-room__media-inner { height: 100%; }
.anza-mphb-room-card__media img,
.anza-mphb-search-room__media img,
.anza-single-room__gallery img {
	object-fit: cover !important;
	object-position: center !important;
}
/* MotoPress gallery normalized into one editorial grid. */
.anza-single-room__gallery .gallery,
.anza-single-room__gallery .mphb-room-type-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.anza-single-room__gallery .gallery > *,
.anza-single-room__gallery .mphb-room-type-gallery > * {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}
.anza-single-room__gallery .gallery img,
.anza-single-room__gallery .mphb-room-type-gallery img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 4 / 3;
}
.anza-single-room__gallery .gallery > :first-child,
.anza-single-room__gallery .mphb-room-type-gallery > :first-child {
	grid-column: 1 / -1;
}
.anza-single-room__gallery .gallery > :first-child img,
.anza-single-room__gallery .mphb-room-type-gallery > :first-child img {
	aspect-ratio: 16 / 8;
}
/* Datepicker — v7.8: MotoPress's own bundled "Datepick" widget ships
   with a heavy dark nav bar and a dark red footer band, which reads as
   dated next to the rest of the site regardless of theming (client:
   "old and not modern"). v7.6 removed the theme's own blue overrides
   entirely to fall back to that plugin default; this pass replaces
   only the plugin's dark chrome (nav bar, footer bar, selected-day
   fill) with the same light/minimal language as every other control
   on the site — still not the field type or any of the plugin's JS/
   date logic, so behaviour is unchanged, only color/spacing. */
.datepick-popup { z-index: 99999 !important; }
.datepick {
	border: 1px solid var(--anza-line) !important;
	border-radius: var(--radius) !important;
	background: var(--anza-cream) !important;
	box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .35) !important;
	overflow: hidden;
	font-family: var(--font-sans) !important;
}
.datepick-nav,
.datepick-ctrl {
	background: var(--anza-cream) !important;
	border-bottom: 1px solid var(--anza-line) !important;
	padding: .6rem .75rem !important;
}
.datepick-nav a,
.datepick-cmd {
	color: var(--anza-ink) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}
.datepick-nav a:hover,
.datepick-cmd:hover { color: var(--anza-accent) !important; }
.datepick-month-header {
	background: var(--anza-paper) !important;
	color: var(--anza-ink) !important;
	font-weight: 500 !important;
	padding-block: .5rem !important;
}
.datepick-month-header select {
	font-family: var(--font-sans) !important;
	color: var(--anza-ink) !important;
}
.datepick th {
	color: var(--anza-ink-soft) !important;
	font-weight: 500 !important;
	background: transparent !important;
}
.datepick td { border-color: var(--anza-line-soft) !important; }
.datepick td a,
.datepick td span {
	color: var(--anza-ink) !important;
	border-radius: var(--radius-sm) !important;
}
.datepick td a:hover { background: var(--anza-sand) !important; }
.datepick .datepick-selected {
	background: var(--anza-accent) !important;
	color: var(--anza-cream) !important;
}
.datepick .datepick-today { font-weight: 700 !important; }
/* The plugin's own footer bar ("Aujourd'hui" / "Effacer" / "Fermer")
   ships dark-red — same light chrome as the nav bar above. */
.datepick-ctrl,
.datepick-clear,
.datepick-close,
.datepick-current {
	background: var(--anza-cream) !important;
	color: var(--anza-ink) !important;
}
.datepick-ctrl a:hover { color: var(--anza-accent) !important; }
.mphb-date-cell-available { background: #e4eadf !important; }
.mphb-date-cell-not-stay-in,
.mphb-date-cell-not-available { background: var(--anza-line-soft) !important; color: var(--anza-ink-soft) !important; }
/* Loading and validation states. */
[aria-busy="true"] { cursor: wait !important; opacity: .7; }
.mphb-errors-wrapper,
.mphb-validation-error,
.mphb-customer-error { color: var(--anza-ink) !important; }
.anza-is-focused label { color: var(--anza-ink); }

@media (max-width: 759px) {.anza-single-room__gallery .gallery,
.anza-single-room__gallery .mphb-room-type-gallery { grid-template-columns: 1fr; }.anza-single-room__gallery .gallery > :first-child img,
.anza-single-room__gallery .mphb-room-type-gallery > :first-child img { aspect-ratio: 4 / 3; }
}
/* --- Mobile: full-width, one-hand booking controls --- */
@media (max-width: 759px) {.anza-mphb-search-form__fields > p { padding: .85rem 1rem; }.anza-mphb-room-card__body { gap: .75rem; }.anza-mphb-room-card__aside { min-width: 90px; }.anza-mphb-search-room__actions { align-items: stretch; }.anza-mphb-search-room__actions { display: grid; grid-template-columns: 1fr 1fr; }.anza-mphb-search-room__actions .button { width: 100%; }.anza-single-room__facts { gap: 1rem; }.anza-single-room__facts dd { font-size: 1rem; }.anza-single-room__amenities ul { grid-template-columns: 1fr; }
}
/* ==================================================================
   v2.2 — Gallery carousel & lightbox
   Progressive enhancement of MotoPress's own gallery markup. If
   anza-gallery.js never runs, [data-anza-gallery] stays visible and the
   rules above (2x2 grid, stable aspect ratios) still apply.
   ================================================================== */
.anza-gallery { position: relative; }
.anza-gallery__stage { overflow: hidden; background: var(--anza-sand); touch-action: pan-y; }
.anza-gallery__track { display: flex; transition: transform .35s ease; }
.anza-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 52vh;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	cursor: zoom-in;
	display: block;
}
.anza-gallery__slide img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	/* Sharpening hint for browsers that support it — helps a little when an
	   image is displayed larger than ideal, but can't manufacture detail a
	   low-resolution source doesn't have. srcset (preserved by the JS that
	   builds this carousel) already ensures the browser picks the largest
	   size WordPress generated for this image; if a specific photo still
	   looks soft after that, re-uploading it at higher resolution is the
	   real fix. */
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}
.anza-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--anza-line); border-radius: var(--radius);
	background: var(--anza-paper);
	color: var(--anza-ink);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.anza-gallery__nav:hover { background: var(--anza-ink); color: var(--anza-cream); }
.anza-gallery__nav--prev { left: 1rem; }
.anza-gallery__nav--next { right: 1rem; }
.anza-gallery__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: .5rem;
}
.anza-gallery__dot {
	width: 7px;
	height: 7px;
	border: 1px solid var(--anza-cream);
	border-radius: 50%;
	padding: 0;
	background: rgba(255,255,255,.35);
	cursor: pointer;
}
.anza-gallery__dot.is-active { background: var(--anza-cream); }
.anza-gallery__thumbs {
	margin-top: .75rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: .5rem;
}
.anza-gallery__thumb {
	aspect-ratio: 4 / 3;
	border: 1px solid transparent;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	opacity: .6;
	transition: opacity .2s ease, border-color .2s ease;
}
.anza-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anza-gallery__thumb:hover { opacity: .85; }
.anza-gallery__thumb.is-active { opacity: 1; border-color: var(--anza-ink); }
.anza-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15,23,42,.94);
	padding: 3.5rem 1.25rem;
}
.anza-lightbox.is-open { display: flex; }
.anza-lightbox__img { max-width: 100%; max-height: calc(100svh - 7rem); object-fit: contain; }
.anza-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 42px;
	height: 42px;
	border: 1px solid var(--anza-line-soft);
	border-radius: var(--radius);
	background: transparent;
	color: var(--anza-cream);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.anza-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 1px solid var(--anza-line-soft);
	border-radius: var(--radius);
	background: transparent;
	color: var(--anza-cream);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	display: none;
}
.anza-lightbox.has-multiple .anza-lightbox__nav { display: flex; align-items: center; justify-content: center; }
.anza-lightbox__nav--prev { left: 1.25rem; }
.anza-lightbox__nav--next { right: 1.25rem; }
.anza-lightbox__count {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: var(--anza-cream);
	font: 500 .7rem/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
}
body.anza-lightbox-open { overflow: hidden; }
@media (max-width: 759px) {.anza-gallery__nav { width: 36px; height: 36px; font-size: 1.1rem; }.anza-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }.anza-lightbox { padding: 4.5rem .75rem 2rem; }.anza-lightbox__nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {.anza-gallery__track { transition: none; }
}
/* Compact variant: used inside room-listing cards (archive, homepage,
   search results) instead of a single static crop, per client request that
   card photos read as a slider rather than one fixed image. No thumbnail
   strip — the card stays the same height either way — arrows appear on
   hover on pointer devices and are always visible on touch. */
.anza-gallery--compact .anza-gallery__nav {
	width: 34px; height: 34px; font-size: 1.05rem;
	border-color: rgba(255,255,255,.6);
	background: rgba(15,23,42,.35);
	color: var(--anza-cream);
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
}
.anza-gallery--compact:hover .anza-gallery__nav,
.anza-gallery--compact .anza-gallery__nav:focus-visible { opacity: 1; }
.anza-gallery--compact .anza-gallery__nav:hover { background: rgba(15,23,42,.6); color: var(--anza-cream); }
.anza-gallery--compact .anza-gallery__dots { bottom: .65rem; }
.anza-gallery--compact .anza-gallery__dot { width: 5px; height: 5px; }
@media (hover: none) {.anza-gallery--compact .anza-gallery__nav { opacity: 1; }
}
/* v3.6 — these sibling selectors are the ones that actually govern the
   visible card image (see the note above: the gallery is injected as a
   sibling of the hidden __media, so only `[hidden] + .anza-gallery`
   reaches it).
   The important addition is `max-height: none`. .anza-gallery__slide
   carries `max-height: 52vh` for the full-page gallery, and that was
   still applying inside cards: it caps the image by VIEWPORT height, so
   the same card rendered a different image height on a short screen than
   a tall one, and cards in one row could disagree. Cancelling it here
   means the aspect-ratio alone decides the height — identical for every
   card, at every viewport. */
/* v3.9 — density: same treatment for the room cards. Capping on the
   injected gallery (the element that actually renders) rather than on
   the hidden __media box. */
.anza-mphb-room-card__media[hidden] + .anza-gallery .anza-gallery__slide {
	aspect-ratio: 4 / 3;
	max-height: none;
}
.anza-mphb-room-card__media,
.anza-mphb-room-card__media[hidden] + .anza-gallery,
.anza-mphb-room-card__media[hidden] + .anza-gallery .anza-gallery__stage,
.anza-mphb-room-card__media[hidden] + .anza-gallery .anza-gallery__slide {
	max-height: 300px;
}
.anza-mphb-search-room__media-inner[hidden] + .anza-gallery,
.anza-mphb-search-room__media-inner[hidden] + .anza-gallery .anza-gallery__stage { height: 100%; }
.anza-mphb-search-room__media-inner[hidden] + .anza-gallery .anza-gallery__slide {
	aspect-ratio: 16 / 10;
	max-height: none;
	height: 100%;
}
/* v3.9 — density: cap the search-card image height HERE, on the injected
   gallery, not on __media. __media is display:none once anza-gallery.js
   runs, so a max-height there does nothing (the v3.6 lesson). At 16/10 a
   full-width results card produced a ~260px+ image that pushed the price
   and buttons off screen; capping it lets several rooms be compared
   without scrolling. */
.anza-mphb-search-room__media,
.anza-mphb-search-room__media-inner[hidden] + .anza-gallery,
.anza-mphb-search-room__media-inner[hidden] + .anza-gallery .anza-gallery__stage,
.anza-mphb-search-room__media-inner[hidden] + .anza-gallery .anza-gallery__slide {
	max-height: 260px;
}
/* Safety net: if a room's free-text description still contains a second,
   unstyled gallery or calendar (from pasted legacy content), never show it —
   the template above already renders the real ones. anza-gallery.js also
   removes duplicate "Détails"/"Disponibilité" text blocks at the DOM level;
   this is the CSS-only fallback for images/calendars specifically. */
.anza-single-room__description .mphb-room-type-gallery,
.anza-single-room__description .mphb-room-type-gallery-wrapper,
.anza-single-room__description .gallery,
.anza-single-room__description .mphb-calendar,
.anza-single-room__description .datepick { display: none !important; }
/* Never let a stray extra <img> inside a card's media slot stack up. */
.anza-mphb-room-card__media img ~ img,
.anza-mphb-search-room__media img ~ img { display: none !important; }
/* ==================================================================
   v2.2 — Premium <select> styling to match the input underline language
   ================================================================== */
.anza-mphb-search-form select,
.anza-mphb-room-booking select,
.mphb-booking-form select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 11px 7px;
	padding-right: 1.25rem;
	cursor: pointer;
}
/* ==================================================================
   v2.2 — Mobile datepicker: proper full-screen sheet instead of an
   overlay that floats mid-page and covers navigation/content.
   ================================================================== */
@media (max-width: 759px) {.datepick-popup {
		position: fixed !important;
		inset: auto 0 0 0 !important;
		top: 8svh !important;
		width: 100% !important;
		max-width: none !important;
		max-height: 92svh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 -8px 30px rgba(15,23,42,.25) !important;
	}.datepick-ctrl {
		position: sticky !important;
		bottom: 0;
		z-index: 3;
		display: flex !important;
		justify-content: space-between;
		padding: .9rem 1rem !important;
	}.datepick-nav { position: sticky; top: 0; z-index: 3; }
}
/* ==================================================================
   v3.0.1 — Hide MotoPress's built-in "Required fields are followed by *"
   tip. It's printed by the core plugin (template-functions.php, hooked
   to mphb_sc_search_render_form_top / booking form rendering), not by
   any theme template, so it's hidden here with CSS rather than edited
   in MotoPress core — this way it survives MotoPress plugin updates
   and never touches booking/availability logic.
   ================================================================== */
.mphb-required-fields-tip {
	display: none !important;
}
/* ==================================================================
   v4.0 — "Réserver" button wrapper class mismatch.

   Confirmed against the live page source: MotoPress emits

       <div class="mphb-to-book-btn-wrapper">
         <form ...><button class="button mphb-book-button">Réserver</button></form>
       </div>

   but this stylesheet targets `.mphb-book-button-wrapper` in ten
   places. That class does not exist in the rendered markup, so all ten
   rules have always been dead and the Réserver button fell back to
   generic styling — which is why it renders as a raw native button next
   to a properly styled "Voir les détails".

   Rather than rewrite ten selectors (and risk missing one), this maps
   the wrapper MotoPress really emits onto the same treatment.
   ================================================================== */
.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper { flex: 1; max-width: 220px; margin: 0; }
.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper form { margin: 0; }
.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper br { display: none; }
.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper .button {
	display: block;
	width: 100%;
	padding: .9rem 1.25rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper .button:hover {
	background: var(--anza-accent-dark);
	color: var(--anza-cream);
}
.anza-mphb-search-room__actions .mphb-to-book-btn-wrapper { margin: 0; }
.anza-mphb-search-room__actions .mphb-to-book-btn-wrapper form { margin: 0; }
.anza-mphb-search-room__actions .mphb-to-book-btn-wrapper br { display: none; }
.anza-mphb-search-room__actions .mphb-to-book-btn-wrapper .button {
	width: auto;
	min-height: 46px;
	padding: .8rem 1.25rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.anza-mphb-search-room__actions .mphb-to-book-btn-wrapper .button:hover {
	background: var(--anza-accent-dark);
	color: var(--anza-cream);
}
@media (max-width: 480px) {.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper { max-width: none; width: 100%; }
}
/* ==================================================================
   v4.0 — minimal cards on Home and Chambres.
   Room size and the amenity icon row are noise on a browse grid: the
   guest is choosing a room, not auditing facilities. Both are hidden on
   the room cards (they remain on the single-room page, where they're
   actually useful). Card reduces to: image, name, bed-type, price,
   actions.
   ================================================================== */
.anza-mphb-room-card__meta,
.anza-mphb-room-card__amenities { display: none; }
/* ==================================================================
   v4.0 — search-results card, tightened to match.
   Same reasoning as the browse cards: on a results page the guest is
   comparing availability and price, so size/amenity noise goes and the
   remaining blocks sit close together. The image is capped hard so
   several results fit on one screen.
   ================================================================== */
.anza-mphb-search-room__meta,
.anza-mphb-search-room__amenities { display: none; }
.anza-mphb-search-room__content { gap: .45rem; padding: 1rem 1.15rem 1.15rem; }
.anza-mphb-search-room__booking { padding-top: .7rem; gap: .6rem; }
.anza-mphb-search-room__type { margin: .15rem 0 0; }
.anza-mphb-search-room__price-meta { margin-top: .2rem; }
/* ==================================================================
   v4.1 — image height cap that does NOT depend on gallery nesting.

   I have now capped the search-card image twice by targeting a specific
   structure (`__media`, then `__media-inner[hidden] + .anza-gallery`)
   and been wrong both times, because anza-gallery.js rearranges the DOM
   and the two pages nest it differently. So this stops guessing at the
   structure: any image container ANYWHERE inside a search-result card
   is capped. Descendant selectors, so it holds whether the gallery ends
   up as a child, a sibling, or is never injected at all.
   ================================================================== */
.anza-mphb-search-room .anza-gallery,
.anza-mphb-search-room .anza-gallery__stage,
.anza-mphb-search-room .anza-gallery__slide,
.anza-mphb-search-room .anza-mphb-search-room__media,
.anza-mphb-search-room .anza-mphb-search-room__media-inner {
	max-height: 260px !important;
}
.anza-mphb-search-room .anza-gallery__slide img,
.anza-mphb-search-room .anza-mphb-search-room__media img {
	height: 100%;
	object-fit: cover;
}
/* Same, for the browse cards on Home / Chambres. */
.anza-mphb-room-card .anza-gallery,
.anza-mphb-room-card .anza-gallery__stage,
.anza-mphb-room-card .anza-gallery__slide,
.anza-mphb-room-card .anza-mphb-room-card__media {
	max-height: 300px !important;
}
/* v4.1 — the dead band between the results intro line and the first
   card. `.anza-mphb-results-summary` already carries a 2rem bottom
   margin and a 1.5rem bottom padding; the intro paragraph after it then
   added its own. Collapsed to a single deliberate gap. */
.mphb_sc_search_results-wrapper .anza-mphb-results-summary { margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
.mphb_sc_search_results-wrapper .mphb-room-type-list { margin-top: 1.5rem; }
/* ==================================================================
   v4.2 — Résultats de recherche: stop depending on MotoPress's wrapper
   class names.

   Evidence: two separate rules scoped to `.mphb_sc_search_results-wrapper`
   are both failing at once on that page — the `max-width: 1100px` AND the
   2-column grid. Cards render ~1420px wide, in one column. Two unrelated
   rules failing together means the selector is wrong, not the values.
   Same class of bug as `mphb-book-button-wrapper` vs the
   `mphb-to-book-btn-wrapper` MotoPress actually emits (fixed in v4.0).

   Rather than guess the wrapper class a third time, everything below is
   anchored to `.anza-mphb-search-room` — the class OUR OWN template puts
   on each card, so it is guaranteed correct.
   ================================================================== */

/* 1. MotoPress's `.mphb-room-type:not(:first-of-type) { margin-top: 4em }`
      is still applying here (the v3.7 fix was scoped to the wrapper class
      that doesn't match). That 4em is what's padding the cards apart.
      Anchored to our own class instead. Specificity ties MotoPress's and
      this sheet loads after mphb.css, so it wins without !important. */
.mphb-room-type.anza-mphb-search-room:not(:first-of-type) {
	margin-top: 0;
}
/* 2. Two-up grid + readable measure, without needing the wrapper class.
      `:has()` targets whatever element directly contains the cards, so
      it works regardless of what MotoPress calls it. */
@media (min-width: 900px) {:has(> .anza-mphb-search-room) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem;
		align-items: start;
		max-width: 1180px;
		margin-inline: auto;
	}
}
@media (max-width: 899px) {:has(> .anza-mphb-search-room) {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
		max-width: 640px;
		margin-inline: auto;
	}
}
/* 3. In a 2-up grid the card is ~560px, so the image cap comes down
      again — a 260px image on a 560px card is still top-heavy. */
.anza-mphb-search-room .anza-gallery,
.anza-mphb-search-room .anza-gallery__stage,
.anza-mphb-search-room .anza-gallery__slide,
.anza-mphb-search-room .anza-mphb-search-room__media,
.anza-mphb-search-room .anza-mphb-search-room__media-inner {
	max-height: 220px !important;
}
/* ==================================================================
   v4.5 — the reserve flow after the guest clicks "Réserver".

   Traced through MotoPress core (search-results-shortcode.php,
   renderBookButton): the card does NOT simply submit. It renders a
   three-state block:

     state 1  quantity select + [Réserver]
     state 2  (JS adds .mphb-rooms-added) -> a confirmation message,
              a "Remove" link, and a SECOND button,
              [Confirmer la réservation], which is the one that
              actually goes to checkout.

   MotoPress hides state 2 until the room is added. Everything in that
   second state — the message, the Remove link, the confirm button — has
   never been styled by this theme, so after clicking Réserver the guest
   was met with unstyled controls at the exact moment they're deciding
   to book. Styled here so the flow reads as one continuous step.
   ================================================================== */
.anza-mphb-search-room .mphb-reserve-room-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem .75rem;
}
.anza-mphb-search-room .mphb-rooms-quantity-wrapper {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}
/* State 2 — confirmation message + remove link. */
.anza-mphb-search-room .mphb-rooms-reservation-message-wrapper {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: 0;
	padding: .55rem .7rem;
	background: var(--anza-sand);
	border-left: 2px solid var(--anza-ink);
}
.anza-mphb-search-room .mphb-rooms-reservation-message {
	margin: 0;
	font: 500 .75rem/1.4 var(--font-sans);
	color: var(--anza-ink);
}
.anza-mphb-search-room .mphb-remove-from-reservation {
	float: none; /* MotoPress floats this; inside flex that just fights us. */
	flex-shrink: 0;
	font: 500 .68rem/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--anza-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.anza-mphb-search-room .mphb-remove-from-reservation:hover { color: var(--anza-ink); }
/* The confirm button is the real call to action once a bed is added, so
   it reads as the primary control rather than a second grey button. */
.anza-mphb-search-room .mphb-confirm-reservation {
	min-height: 46px;
	padding: .8rem 1.35rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.anza-mphb-search-room .mphb-confirm-reservation:hover {
	background: transparent;
	color: var(--anza-accent);
}
/* ==================================================================
   v4.8 — home / archive cards: another density pass.

   With size and amenities already hidden (v4.0), the remaining height is
   the image and the padding around a very short body: name, bed type,
   price, two buttons. The 300px image cap was still the dominant
   element, and the body padding was sized for a card that used to carry
   three more lines.
   ================================================================== */
.anza-mphb-room-card .anza-gallery,
.anza-mphb-room-card .anza-gallery__stage,
.anza-mphb-room-card .anza-gallery__slide,
.anza-mphb-room-card .anza-mphb-room-card__media {
	max-height: 210px !important;
}
.anza-mphb-room-card__body { padding: var(--space-3); gap: 0; }
@media (min-width: 640px) {.anza-mphb-room-card__body { padding: 1.1rem 1.25rem 1.25rem; }
}
.anza-mphb-room-card__title h2,
.anza-mphb-room-card__title h3,
.anza-mphb-room-card .mphb-room-type-title {
	font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.15 var(--font-display);
}
.anza-mphb-room-card__type { margin-top: .2rem; }
.anza-mphb-room-card__price { padding-top: .8rem; }
.anza-mphb-room-card__price .mphb-price,
.anza-mphb-room-card__price .mphb-price-from { font-size: 1.6rem; }
.anza-mphb-room-card__price-meta { margin-top: .25rem; }
.anza-mphb-room-card__actions { margin-top: auto; padding-top: .9rem; }
/* ==================================================================
   v4.9 — CHECKOUT STYLING. The whole page was unstyled, and here's why.

   MotoPress emits (checkout-view.php line 1000):

       <form class="mphb_sc_checkout-form" ...>

   underscore between "mphb" and "sc". This stylesheet has 27 rules
   written against `.mphb-checkout-form` — all hyphens. That class does
   not exist in the rendered markup, so every one of those 27 rules has
   always been dead, and the checkout fell back to raw browser controls:
   default selects, unstyled text inputs, a native "Réserver maintenant"
   button. Exactly the same failure as `mphb-book-button-wrapper` vs
   `mphb-to-book-btn-wrapper` (v4.0).

   Rather than rewrite 27 selectors and risk missing one, this restates
   the treatment against the class MotoPress really emits.
   ================================================================== */
.mphb_sc_checkout-form input[type="text"],
.mphb_sc_checkout-form input[type="email"],
.mphb_sc_checkout-form input[type="tel"],
.mphb_sc_checkout-form input[type="number"],
.mphb_sc_checkout-form select,
.mphb_sc_checkout-form textarea {
	width: 100%;
	max-width: 32rem;
	min-height: 52px;
	padding: .75rem 1rem;
	border: 1px solid var(--anza-line); border-radius: var(--radius);
	border-radius: var(--radius);
	background: var(--anza-paper);
	color: var(--anza-ink);
	font: 400 1rem/1.4 var(--font-sans);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mphb_sc_checkout-form textarea { min-height: 120px; }
.mphb_sc_checkout-form input:focus,
.mphb_sc_checkout-form select:focus,
.mphb_sc_checkout-form textarea:focus {
	outline: none;
	border-color: var(--anza-accent);
	box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.mphb_sc_checkout-form label {
	display: block;
	margin-bottom: .45rem;
	font: 600 .7rem/1.2 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--anza-ink);
}
.mphb_sc_checkout-form p { margin: 0 0 var(--space-3); }
.mphb_sc_checkout-form abbr { text-decoration: none; color: var(--anza-accent); }
/* The per-bed guest fields read as one compact row rather than three
   stacked full-width blocks. */
.mphb_sc_checkout-form .mphb-room-details select { max-width: 8rem; }
.mphb_sc_checkout-form .mphb-room-details input[type="text"] { max-width: 24rem; }
/* Headings inside checkout. */
.mphb_sc_checkout-form h3,
.mphb_sc_checkout-wrapper h3.mphb-room-number,
.anza-checkout-unit {
	margin: var(--space-4) 0 var(--space-2);
	font: 400 1.35rem/1.2 var(--font-display);
	color: var(--anza-ink);
}
/* "Réserver maintenant" — the single most important button on the site,
   and it was rendering as a default browser button. */
.mphb_sc_checkout-form input[type="submit"],
.mphb_sc_checkout-form button[type="submit"],
.mphb_sc_checkout-submit-wrapper .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	width: auto;
	min-width: 16rem;
	padding: 1rem 2rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .78rem/1 var(--font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.mphb_sc_checkout-form input[type="submit"]:hover,
.mphb_sc_checkout-form button[type="submit"]:hover {
	background: transparent;
	color: var(--anza-accent);
}
@media (max-width: 767px) {.mphb_sc_checkout-form input[type="submit"],
.mphb_sc_checkout-form button[type="submit"] { width: 100%; min-width: 0; }
}
/* Price total line. */
.mphb_sc_checkout-wrapper .mphb-total-price,
.mphb_sc_checkout-form .mphb-total-price {
	font: 400 1.9rem/1.1 var(--font-display);
	color: var(--anza-accent);
}
/* ==================================================================
   v4.9 — room cards: four across on desktop, no broken titles.

   v3.1 tried four columns and I reverted it, because the card still
   carried size, amenities and a side-by-side action row, so at ~250px
   the buttons overflowed and titles broke mid-word. The card is now
   much leaner (name, type, price, actions), so four fits — provided the
   actions stack, which they now do at that width.
   ================================================================== */
@media (min-width: 1100px) {.mphb_sc_rooms-wrapper.anza-mphb-home-rooms,
.anza-mphb-home-rooms .mphb-room-type-list,
.anza-mphb-directory,
.anza-mphb-directory .mphb-room-type-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4) var(--space-3);
	}/* At a quarter width the two actions cannot sit side by side — this
	   is what broke it last time. Stacked, full width, no overflow. */
	.anza-mphb-room-card__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: .5rem;
	}.anza-mphb-room-card__actions > * { width: 100%; max-width: none; }.anza-mphb-room-card__actions .button { width: 100%; text-align: center; }/* Shorter image so a 4-up row stays compact. */
	.anza-mphb-room-card .anza-gallery,
.anza-mphb-room-card .anza-gallery__stage,
.anza-mphb-room-card .anza-gallery__slide,
.anza-mphb-room-card .anza-mphb-room-card__media { max-height: 170px !important; }
}
/* v6.2 tried deliberately offsetting the 2nd/4th homepage cards
   (translateY) for "light asymmetry." Reverted at v7.7 — client wants
   the row aligned, not staggered: "can't you see the rooms are not
   aligned?" was about exactly this offset. */
/* Titles must never break mid-word at any width. */
.anza-mphb-room-card__title h2,
.anza-mphb-room-card__title h3,
.anza-mphb-room-card .mphb-room-type-title,
.anza-mphb-search-room__title h2,
.anza-mphb-search-room .mphb-room-type-title {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}
/* ==================================================================
   v5.0 — home cards minimal, Chambres cards detailed.

   Two different jobs, so they stop sharing one treatment:

   HOME  = a glance. Name, type, price, book. Nothing else.
   CHAMBRES = the browsing page, where a guest is actually comparing —
              so size and amenities come back there.

   v4.0 hid size and amenities globally, which was right for the home
   page and wrong for the archive.
   ================================================================== */

/* --- Reset the global hide from v4.0, then re-scope it. --- */
.anza-mphb-room-card__meta,
.anza-mphb-room-card__amenities { display: block; }
/* HOME: strip to the essentials. */
.anza-mphb-home-rooms .anza-mphb-room-card__meta,
.anza-mphb-home-rooms .anza-mphb-room-card__amenities,
.anza-mphb-home-rooms .anza-mphb-room-card__price-meta {
	display: none;
}
/* CHAMBRES / archive: the detailed version. */
.anza-mphb-directory .anza-mphb-room-card__meta {
	display: block;
	margin-top: .3rem;
	font: 400 .78rem/1.3 var(--font-sans);
	color: var(--anza-ink-soft);
}
.anza-mphb-directory .anza-mphb-room-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin-top: .6rem;
}
.anza-mphb-directory .anza-mphb-room-card__amenities li { font-size: .78rem; }
.anza-mphb-directory .anza-mphb-room-card__price-meta { display: block; }
/* --- "par nuit" belongs beside the price, not under it. --- */
.anza-mphb-room-card__price .mphb-regular-price,
.anza-mphb-room-card__price p {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0;
}
.anza-mphb-room-card__price .mphb-price-period {
	display: inline;
	margin-top: 0;
	font-size: .8rem;
	color: var(--anza-ink-soft);
}
/* --- Actions: full width, properly separated.
   In the 4-up row the two buttons were overlapping — the details button
   had no width and the book wrapper had `flex: 1; max-width: 220px`,
   so they collided instead of sitting in their own tracks. A grid with
   an explicit gap can't overlap. --- */
/* v7.7 — margin-top: auto (not a fixed value) is the actual fix for
   "cards not aligned": .anza-mphb-room-card__body is flex-column and
   the grid already stretches every card in a row to equal height, but
   a fixed margin-top only adds a small gap after whatever content came
   before it. A 1-line title card and a 2-line title card then have
   their action buttons sitting at two different heights even though
   the cards themselves are the same height — auto pushes actions to
   the bottom of the flex column on every card, so all four button rows
   land on the same line regardless of how much text is above them. */
.anza-mphb-room-card__actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: .55rem;
	margin-top: auto;
	padding-top: var(--space-3);
	align-items: stretch;
}
.anza-mphb-room-card__actions > *,
.anza-mphb-room-card__actions .mphb-view-details-button-wrapper,
.anza-mphb-room-card__actions .mphb-to-book-btn-wrapper {
	width: 100%;
	max-width: none;
	margin: 0;
	flex: none;
}
.anza-mphb-room-card__actions form { margin: 0; width: 100%; }
.anza-mphb-room-card__actions br { display: none; }
.anza-mphb-room-card__actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	text-align: center;
}
/* Two-up side by side once there's room for it, still gapped. */
@media (min-width: 640px) and (max-width: 1099px) {.anza-mphb-directory .anza-mphb-room-card__actions,
.anza-mphb-home-rooms .anza-mphb-room-card__actions {
		grid-template-columns: 1fr 1fr;
		gap: .6rem;
	}
}
/* ==================================================================
   v5.1 — ONE page measure. Everything aligns to the same left edge.

   The site had eight different content widths in play — 1360 (the
   container), 1180, 1120, 1100, 1080, 1000, 920 and 880 — and several
   of those wrappers also carried `margin: 0 auto`, which re-centred
   them INSIDE the container. So the hero text, the search form, the
   checkout card and the price table each started at a different left
   edge, and nothing lined up down the page.

   Fix: the container (`.container-anza`) is the single source of the
   page measure. Every block-level wrapper inside it stops setting its
   own width and stops re-centring, so all of them share the container's
   left and right edges.

   Deliberately NOT changed: genuine reading measures on prose
   (`.anza-page__reading`, room description, hero subtitle). Those are
   narrower on purpose for line length, and because they're
   left-aligned their left edge still matches everything else.
   ================================================================== */
.anza-mphb-system-page__content,
.mphb_sc_checkout-wrapper,
.mphb_sc_booking_confirmation-wrapper,
.mphb_sc_search_results-wrapper,
.anza-mphb-archive-search,
.anza-hero-search,
.anza-mphb-results-summary {
	max-width: none;
	margin-inline: 0;
	width: 100%;
}
/* The results grid keeps a sane column measure but aligns left rather
   than floating centred inside the container. */
@media (min-width: 900px) {:has(> .anza-mphb-search-room) { margin-inline: 0; max-width: none; }
}
@media (max-width: 899px) {:has(> .anza-mphb-search-room) { margin-inline: 0; max-width: none; }
}
/* Checkout: the form was a single narrow column with everything else
   centred around it. Now it sits on the page measure like every other
   section, with the fields themselves keeping a comfortable width. */
.mphb_sc_checkout-form { width: 100%; }
.mphb_sc_checkout-form input[type="text"],
.mphb_sc_checkout-form input[type="email"],
.mphb_sc_checkout-form input[type="tel"],
.mphb_sc_checkout-form select,
.mphb_sc_checkout-form textarea { max-width: 34rem; }
/* ==================================================================
   v5.2 — Chambres archive: never more than 2 per row.

   The 4-up grid added in v4.9 is right for the HOME page, where the card
   is a glance. The Chambres page is the detailed card (size, amenities,
   capacity note), and four of those across is cramped. Capped at 2.
   ================================================================== */
@media (min-width: 1100px) {.anza-mphb-directory,
.anza-mphb-directory .mphb-room-type-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) var(--space-4);
	}/* At half width there's room for the actions side by side again. */
	.anza-mphb-directory .anza-mphb-room-card__actions {
		grid-template-columns: 1fr 1fr;
		gap: .6rem;
	}/* And a taller image, since the card is wider than a home card. */
	.anza-mphb-directory .anza-mphb-room-card .anza-gallery,
.anza-mphb-directory .anza-mphb-room-card .anza-gallery__stage,
.anza-mphb-directory .anza-mphb-room-card .anza-gallery__slide,
.anza-mphb-directory .anza-mphb-room-card .anza-mphb-room-card__media {
		max-height: 300px !important;
	}
}
/* ==================================================================
   v5.2 — package cards: image support.
   The image is optional; when a package has none the card renders
   exactly as before, so nothing breaks for packages without a photo.
   ================================================================== */
.anza-experiences__card { display: flex; flex-direction: column; overflow: hidden; }
/* v7.6 — the card's own padding is 2rem (.anza-experiences__card in
   style.css), but this bled the image out with a -1.5rem margin (the
   --space-3 token, not the card's actual padding) — left a persistent
   ~.5rem gap of card background between the image and the card edge on
   all three sides instead of a true flush bleed. Matched to 2rem. The
   image's own top radius is dropped: the card is overflow:hidden with
   its own (larger, v7.6) corner radius, so the card already clips the
   image correctly — a smaller inner radius here just showed as a seam. */
.anza-package__media {
	position: relative;
	aspect-ratio: 16 / 10;
	max-height: 240px;
	margin: -2rem -2rem var(--space-3);
	overflow: hidden;
	background: var(--anza-sand);
}
.anza-package__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==================================================================
   v5.4 — room card carousel source images.

   anza-gallery.js reads every <img> inside the media container and
   builds a carousel from them, so the extra gallery photos are printed
   into the DOM by the card template. Only the first should be visible
   before the script runs; if the script never runs, the card still
   shows one image rather than a stack of them.
   ================================================================== */
.anza-mphb-room-card__media .anza-card-gallery-source { display: none; }
.anza-mphb-room-card__media[data-anza-gallery-done] .anza-card-gallery-source { display: none; }

/* Carousel arrows/dots need to sit above the image inside a card. */
.anza-mphb-room-card .anza-gallery__nav,
.anza-mphb-room-card .anza-gallery__dots { z-index: 3; }

/* ==================================================================
   v5.4 — Chambres cards: drop the capacity note and amenity row.
   Requested: the card should carry name, type, size and price only.
   ================================================================== */
.anza-mphb-directory .anza-mphb-room-card__price-meta,
.anza-mphb-directory .anza-mphb-room-card__amenities,
.anza-mphb-search-room__price-meta {
	display: none;
}

/* ==================================================================
   v5.4 — package card actions.
   "Nous contacter" was a plain underlined link sitting under a priced
   card, so it didn't read as the action. Primary button now, with an
   optional secondary link to the room the package includes.
   ================================================================== */
.anza-package__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem .75rem;
	margin-top: auto;
	padding-top: var(--space-3);
}
.anza-package__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: .8rem 1.4rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.anza-package__cta:hover { background: var(--anza-accent-dark); color: var(--anza-cream); transform: translateY(-2px); }
/* v7.7 — "Le matériel" cards get the same WhatsApp CTA as packages; same
   visual language, same helper (anza_mphb_whatsapp_url()), so it's one
   button style, not a second one invented for this page. */
.anza-rentals__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: var(--space-2);
	padding: .75rem 1.25rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font: 500 .7rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.anza-rentals__cta:hover { background: var(--anza-accent-dark); color: var(--anza-cream); transform: translateY(-2px); }
.anza-package__secondary {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	font: 500 .72rem/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--anza-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.anza-package__secondary:hover { color: var(--anza-ink-soft); }
@media (max-width: 480px) {
	.anza-package__actions { flex-direction: column; align-items: stretch; }
	.anza-package__cta, .anza-package__secondary { width: 100%; justify-content: center; }
}

/* v5.5 — Chambres cards: drop the size line too, as requested.
   The card is now name, bed type, price. */
.anza-mphb-directory .anza-mphb-room-card__meta { display: none; }

/* ==================================================================
   v5.6 — add-on row layout.

   "Expérience Surf (€30 / Par jour) pour [6] invité(e)(s)" ran as one
   long line with a form control dropped into the middle of a sentence,
   and the checkbox sat visually detached from its own label. Rebuilt as
   a proper option row: checkbox and name on one line, the quantity
   control indented underneath on its own line.
   ================================================================== */
.mphb_sc_checkout-services-list,
.mphb_checkout-services-list { margin: 0; padding: 0; list-style: none; }
.mphb_sc_checkout-services-list > li {
	padding: .9rem 1rem;
	border: 1px solid var(--anza-line); border-radius: var(--radius);
	background: var(--anza-paper);
}
.mphb_sc_checkout-services-list > li + li { margin-top: .6rem; }
.mphb_sc_checkout-services-list label {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font: 500 .95rem/1.4 var(--font-sans);
}
.mphb_sc_checkout-services-list input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	flex: none;
	accent-color: var(--anza-accent);
	cursor: pointer;
}
/* Quantity / guest count moves onto its own indented line. */
.mphb_sc_checkout-service-adults,
.mphb_checkout-service-adults,
.mphb_sc_checkout-service-quantity,
.mphb_checkout-service-quantity {
	display: inline-block;
	width: auto;
	min-width: 5rem;
	min-height: 42px;
	margin-inline: .4rem;
	vertical-align: middle;
}
.mphb_sc_checkout-services-list > li > *:not(label) {
	display: block;
	margin: .55rem 0 0 2.1rem;
	font-size: .85rem;
	color: var(--anza-ink-soft);
}

/* ==================================================================
   v5.8 — the global mobile booking bar.
   Same visual language as the single-room bar, but it must not sit on
   top of the footer content, so the body gets clearance for it.
   ================================================================== */
@media (max-width: 979px) {
	.anza-mobile-book--global {
		position: fixed;
		z-index: 180;      /* under the nav panel (190) and header (200) */
		bottom: 0; left: 0; right: 0;
		display: block;
		padding: 1.05rem 1rem;
		background: var(--anza-accent);
		color: var(--anza-cream);
		text-align: center;
		text-decoration: none;
		font: 500 .72rem/1 var(--font-sans);
		letter-spacing: .13em;
		text-transform: uppercase;
	}
	/* Clearance so the bar never covers the last line of the footer. */
	body:has(.anza-mobile-book--global) .site-footer { padding-bottom: 5.5rem; }
	/* Hidden while the mobile menu is open — it would sit over the nav. */
	body.anza-nav-open .anza-mobile-book--global { display: none; }
}
@media (min-width: 980px) {
	.anza-mobile-book--global { display: none; }
}