/*
 * Bibi House — foglio di stile del sito.
 *
 * Fino al 24/09/2026 viveva in Aspetto > Personalizza > CSS aggiuntivo, che
 * WordPress stampa dentro ogni pagina (niente cache del browser). Ora e' un
 * file vero, caricato da mu-plugins/bibihouse-stile.php con la data di
 * modifica come versione: ogni salvataggio invalida la cache da solo.
 *
 * Modificare QUI, non nel Customizer.
 */

/* ===== Bibi House — homepage ===== */
:root{
	--bh-ink:#101418;
	--bh-muted:#5b6672;
	--bh-line:#e5e8ec;
	--bh-tint:#f6f7f9;
	--bh-accent:#2862e8; /* era #2f6bff: scurito per il contrasto AA (4,5:1) anche su fondo grigio chiaro */
	/* Blu del logo (theme_mod logo_icon_color) e la sua variante scura per l'hover. */
	--bh-brand:#0b67b2;
	--bh-brand-scuro:#08507f;
	/* Velo del blu del marchio, per gli stati attivi su fondo chiaro. */
	--bh-brand-velo:#eef4fa;
	/* Ombra della navbar in stato scrollato: usata da due regole. */
	--bh-ombra-nav:0 1px 0 var(--bh-line), 0 6px 24px rgba(16,20,24,.07);
	/* Angolo vivo per la card degli alloggi e per il riquadro delle specifiche
	   al suo interno: sono gli unici due elementi che usano questa variabile. */
	--bh-radius:0;
	/* Immagini della scacchiera ad angolo vivo: i due angoli si toccano, e
	   qualunque arrotondamento scaverebbe un occhiello nel punto di contatto.
	   Separato da --bh-radius, che resta per card e altre immagini. */
	--bh-media-radius:0;
	/* Misure del blocco dati della card. Stanno qui perche' servono in due
	   posti che devono restare in accordo: le due righe di testo e l'icona,
	   che deve risultare alta quanto etichetta e valore messi insieme. */
	--bh-meta-label-fs:.7rem;
	--bh-meta-value-fs:.92rem;
	--bh-meta-lh:1.6;
	--bh-meta-gap:2px;
	/* Dimensione dell'icona nel blocco dati. Slegata dall'altezza del testo:
	   pareggiarla alle due righe (43px) risultava troppo pesante. Un numero
	   solo da ritoccare se serve. */
	--bh-meta-icon:1.6rem;
	/* Padding orizzontale del corpo della card. In variabile perche' il
	   separatore deve sporgere esattamente di altrettanto per lato per
	   arrivare ai bordi. */
	--bh-card-pad-x:24px;
	/* Quanto la colonna dei contenuti rientra rispetto alla larghezza del sito,
	   sommando i padding del contenitore di pagina e dell'area contenuto.
	   Serve alla navbar per incolonnarsi con le sezioni. */
	--bh-content-inset:112px;
	/* Testo minore della card: indirizzo e descrizione. Una variabile sola,
	   cosi' restano in accordo fra loro. */
	--bh-fs-card-small:clamp(.875rem, .837rem + .163vw, 1rem);   /* da 14 a 16 */
	/* Titolo e prezzo della card: fluidi come il resto della scala, ma con una
	   misura propria perche' stanno fra h3 e h2 e nessuno dei due andava bene. */
	--bh-fs-card-title:clamp(1.375rem,  1.283rem + .392vw, 1.75rem);   /* da 22 a 28 */
	--bh-fs-card-price:clamp(1.3125rem, 1.198rem + .49vw,  1.6875rem); /* da 21 a 27 */
	/* Raggio del solo foglio bianco: separato da --bh-radius, che vale per card
	   e immagini. Il foglio e' largo quanto la finestra, quindi regge (e chiede)
	   un arrotondamento piu' marcato di quello di un elemento piccolo. */
	--bh-sheet-radius:40px;

	/* --- Scala tipografica fluida ---
	   Ogni misura cresce da un minimo a 375px di finestra fino a un massimo a
	   1600px, poi si ferma: oltre, il testo continuerebbe a gonfiarsi senza che
	   la riga diventi piu' leggibile.
	   Il valore centrale e' rem + vw, non solo vw: con il vw puro la dimensione
	   dipenderebbe unicamente dalla finestra e ignorerebbe la dimensione del
	   carattere impostata dall'utente nel browser, rendendo il testo non
	   ingrandibile da chi ne ha bisogno. La parte in rem preserva quella scelta.
	                             da 375px a 1600px */
	--bh-fs-body:clamp(1rem,      0.943rem + 0.245vw, 1.1875rem);   /* da 16 a 19 */
	--bh-fs-lead:clamp(1.0625rem, 0.967rem + 0.408vw, 1.375rem);    /* da 17 a 22 */
	--bh-fs-h3:  clamp(1.0625rem, 0.986rem + 0.327vw, 1.3125rem);   /* da 17 a 21 */
	--bh-fs-h2:  clamp(1.75rem,   1.482rem + 1.143vw, 2.625rem);    /* da 28 a 42 */
	--bh-fs-h1:  clamp(2.1875rem, 1.480rem + 3.020vw, 4.5rem);      /* da 35 a 72 */
	/* Di quanto il foglio bianco risale sopra l'hero. Un valore solo: lo usano
	   sia il margine negativo del foglio sia l'altezza dell'hero, che deve
	   crescere della stessa misura per lasciare la prima schermata tutta hero. */
	--bh-sheet-overlap:96px;
}

/* Il corpo del testo segue la stessa scala: il tema lo fissa a 17px, qui
   diventa fluido come i titoli, altrimenti le proporzioni si romperebbero
   proprio agli schermi grandi dove i titoli crescono. */
body{ font-size:var(--bh-fs-body); }

/* --- Hero ---
   Altezza tolta dallo style inline del blocco e portata qui: inline vincerebbe
   su qualsiasi selettore e non permetterebbe la variante mobile.
   .entry-content per battere il min-height:430px del blocco cover di WordPress.
   100dvh dove supportato: su mobile la barra degli indirizzi che compare e
   scompare rende 100vh piu' alto dello schermo davvero visibile, e il fondo
   dell'hero finirebbe tagliato. */
.entry-content .bh-hero{ min-height:calc(100vh + var(--bh-sheet-overlap)); }
@supports (min-height:100dvh){
	.entry-content .bh-hero{ min-height:calc(100dvh + var(--bh-sheet-overlap)); }
}
.bh-hero{ align-items:center; }

/* --- Parallasse dell'immagine hero ---
   La classe bh-parallax-on la aggiunge lo script solo se puo' animare: senza
   JS o con animazioni ridotte l'immagine resta al 100% e nulla cambia.
   Alzarla al 135% e' obbligatorio: lo script la fa scorrere al 35% della
   velocita' della pagina, quindi senza quel margine in fondo comparirebbe
   una striscia vuota. Il 35 qui e il FACTOR nello script devono coincidere. */
.bh-hero.bh-parallax-on img.wp-block-cover__image-background{
	height:135%;
	/* Meta' dell'eccedenza sopra e meta' sotto (35% / 2), cosi' a riposo si vede
	   la fascia centrale della foto invece della sua parte alta. Con top:0
	   l'immagine restava ancorata in cima e il 35% in piu' sporgeva tutto sotto.
	   La copertura regge lo stesso: scorrendo l'immagine scende, quindi il
	   margine che consuma e' quello sopra, che qui e' addirittura maggiore. */
	top:-17.5%;
	bottom:auto;
	will-change:transform;
}
/* Il centro ottico non e' il centro della scatola: l'hero e' alto una viewport
   PIU' la sovrapposizione del foglio bianco, che ne copre la fascia bassa.
   Centrando nella scatola il testo cadrebbe mezza sovrapposizione piu' in giu'
   del centro di cio' che si vede. Il padding in fondo lo rialza di quella meta'. */
.bh-hero .wp-block-cover__inner-container{
	/* Agganciata alla larghezza del sito invece che a un numero fisso: i 112px
	   sono i padding del contenitore di pagina (24) e dell'area contenuto (32)
	   per lato, cosi' il testo dell'hero resta incolonnato con le sezioni. */
	max-width:calc(var(--global-content-width) - 112px);
	margin-inline:auto;
	padding-bottom:var(--bh-sheet-overlap);
}
.bh-hero__title{
	font-size:var(--bh-fs-h1);
	line-height:1.06;
	letter-spacing:-.02em;
	max-width:16ch;
	margin:0 0 .6rem;
	color:#fff;
	/* 500 vero, non ripiegato: il peso e' stato aggiunto alla tipografia h1 del
	   tema, quindi Kadence lo richiede e lo dichiara fra i @font-face locali. */
	font-weight:500;
}
.bh-hero__lead{
	max-width:44ch;
	font-size:var(--bh-fs-lead);
	line-height:1.6;
	color:rgba(255,255,255,.85);
	/* Ultimo elemento del blocco: un margine sotto sbilancerebbe la centratura
	   verticale, spingendo il testo piu' in alto della meta' esatta. */
	margin:0;
}

/* --- Foglio bianco che risale sopra l'hero ---
   La sezione e' alignfull perche' lo sfondo bianco e gli angoli arrotondati
   devono arrivare ai bordi della finestra. L'attributo layout "constrained" del
   blocco non basta: Kadence e' un tema classico e non genera il max-width
   interno, quindi il contenuto correva da 0 a 1440 mentre tutte le altre
   sezioni stanno fra 131 e 1309.
   Il padding orizzontale ricostruisce la stessa colonna delle altre sezioni. */
.bh-sheet{
	position:relative;
	z-index:2;
	margin-top:calc(-1 * var(--bh-sheet-overlap));
	background:#fff;
	border-radius:var(--bh-sheet-radius) var(--bh-sheet-radius) 0 0;
	padding-block:72px 8px;
}
/* Padding orizzontale che riporta il contenuto nella colonna delle altre
   sezioni. E' la formula speculare a quella con cui Kadence allarga gli
   elementi a tutta larghezza: margin-left: calc(50% - var(--global-vw)/2).
   Usando la stessa variabile i due calcoli si annullano esattamente, anche
   quando la barra di scorrimento rende la finestra piu' stretta di 100vw.
   Specificita' (0,2,0) obbligatoria: Kadence azzera i lati con
   ".entry-content .alignfull{padding-left:0}", che batterebbe .bh-sheet. */
.entry-content .bh-sheet,
.bh-sheet.alignfull{
	padding-inline:calc(var(--global-vw, 100vw) / 2 - 50%);
}

/* --- Separatore fra le sezioni ---
   Stesso colore dei bordi delle card, cosi' resta dentro il sistema.
   Selettore con .entry-content per specificita' (0,2,0): Kadence governa
   larghezza e margini degli hr con ".single-content hr", che batterebbe .bh-sep.
   Il margine superiore non e' simmetrico per caso: il foglio bianco chiude con
   8px di padding e la fascia successiva ne apre 64, quindi 56 sopra pareggia
   l'aria ai due lati della riga (8+56 = 64). */
.entry-content .bh-sep{
	border:0;
	border-top:1px solid var(--bh-line);
	height:0;
	/* La larghezza piena non la forzo qui: il blocco usa lo stile nativo
	   "linea larga" (is-style-wide), che e' proprio l'eccezione prevista dalla
	   regola di WordPress che altrimenti taglia il separatore a 160px. */
	margin-block:56px 24px;
}

/* Dopo la scacchiera i due vicini hanno gia' 64px di padding ciascuno: qui i
   margini del separatore vanno azzerati, altrimenti l'aria risulta sbilanciata
   (120 sopra contro 88 sotto). Va dichiarato DOPO .bh-sep: stessa specificita' (0,2,0), quindi a
   decidere e' l'ordine, non il selettore. */
.entry-content .bh-sep--even{ margin-block:0; }

/* La testata con titolo e breadcrumb usa il contenitore dell'header, che
   rientra solo dei suoi 24px: partiva da 44 mentre il contenuto parte da 76.
   Stessa formula gia' usata per la navbar, cosi' le tre cose si incolonnano.
   Il padding va azzerato, altrimenti si sommerebbe al max-width. */
.entry-hero .hero-container.site-container{
	max-width:calc(min(var(--global-content-width), var(--global-vw, 100vw)) - var(--bh-content-inset));
	margin-inline:auto;
	padding-inline:0;
}

/* --- Titolo delle pagine interne ---
   Il tema lo lascia a 32px, meno dei titoli di sezione che ora stanno a 40:
   il titolo principale della pagina finiva sotto ai suoi stessi sottotitoli.
   Fluido come il resto della scala, ancorato fra 375 e 1600px. */
.entry-hero .entry-title{
	font-size:clamp(2rem, 1.694rem + 1.306vw, 3rem);   /* da 32 a 48 */
	letter-spacing:-.02em;
}

/* --- Fasce --- */
.bh-band{ padding-block:64px; }
.bh-band--tint{ background:var(--bh-tint); }
/* Le fasce tinte devono coprire tutta la finestra come il foglio bianco,
   altrimenti restano isole colorate larghe quanto la colonna del testo.
   Stessa coppia di formule di Kadence per gli elementi a tutta larghezza:
   i margini negativi allargano la scatola, il padding riporta dentro il
   contenuto. Le percentuali si risolvono sul contenitore (.entry-content),
   quindi i due calcoli si compensano. */
.entry-content .bh-band--tint{
	margin-inline:calc(50% - var(--global-vw, 100vw) / 2);
	width:var(--global-vw, 100vw);
	max-width:var(--global-vw, 100vw);
	padding-inline:calc(var(--global-vw, 100vw) / 2 - 50%);
}

/* --- Blocco titolo/testo affiancati --- */
.bh-split{ gap:56px; align-items:flex-start; }
.bh-split h2{
	font-size:var(--bh-fs-h2);
	line-height:1.2;
	letter-spacing:-.015em;
	margin:0;
}
.bh-split p{ color:var(--bh-muted); line-height:1.7; }

/* --- Scacchiera immagine + testo ---
   Una griglia sola, non due sezioni affiancate. Due sezioni indipendenti si
   dimensionano ognuna sul proprio testo e finiscono alte diverso (misurati
   fino a 32px di scarto, cioe' una riga): con grid-auto-rows:1fr le due righe
   valgono per forza uguale, e l'immagine piu' corta si allunga da sola.
   Nessuno spazio fra le celle: gli angoli delle due immagini si incontrano
   esattamente sull'asse centrale. L'aria sta nel padding del testo. */
.entry-content .bh-checker{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-auto-rows:1fr;
	align-items:stretch;
	gap:0;
	padding-block:64px;
	margin-block:0;
}
/* WordPress annida il contenuto di ogni gruppo in un wrapper
   .wp-block-group__inner-container: senza renderlo trasparente al layout la
   griglia avrebbe quel wrapper come unico figlio invece delle quattro celle,
   e dentro le celle il testo e la figura non sarebbero elementi flex. */
.bh-checker .wp-block-group__inner-container{ display:contents; }

.bh-feature__media{ display:flex; min-width:0; height:100%; }
.bh-feature__media .bh-round{ margin:0; width:100%; height:100%; }
/* L'immagine riempie l'altezza della riga invece di restare alla sua altezza
   naturale: senza, non arriverebbe in fondo e gli angoli non si toccherebbero. */
.entry-content .bh-checker .bh-feature__media .bh-round img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.bh-feature__text{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-width:0;
	height:100%;
	box-sizing:border-box;
	padding:64px;
}
.bh-feature__text h2{
	font-size:var(--bh-fs-h2);
	line-height:1.22;
	letter-spacing:-.015em;
	margin:0 0 1rem;
}
.bh-feature__text p{ color:var(--bh-muted); line-height:1.7; }
.bh-round img{ border-radius:var(--bh-media-radius); display:block; width:100%; height:auto; }

/* --- Intestazione di sezione con link --- */
/* Il margine sotto ai blocchi lo impone Kadence con ".single-content":
   serve (0,2,0), altrimenti il valore scritto qui viene ignorato. */
.entry-content .bh-section-head{ margin-bottom:48px; }
.bh-section-head{ gap:16px; flex-wrap:wrap; }
.bh-section-head h2{
	font-size:var(--bh-fs-h2);
	letter-spacing:-.015em;
	margin:0;
}
.bh-link-all{ margin:0; }
.bh-link-all a{
	color:var(--bh-accent);
	font-weight:600;
	text-decoration:none;
	white-space:nowrap;
}
.bh-link-all a:hover{ text-decoration:underline; }

/* --- Card alloggi --- */
.bh-cards{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
	gap:28px;
}
.bh-card{
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	overflow:hidden;
	background:#fff;
	display:flex;
	flex-direction:column;
	transition:box-shadow .2s ease, transform .2s ease;
}
.bh-card:hover{ box-shadow:0 12px 32px rgba(16,20,24,.10); transform:translateY(-2px); }
.bh-card__media{ display:block; aspect-ratio:3/2; overflow:hidden; }
.bh-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bh-card__body{ padding:22px var(--bh-card-pad-x) 24px; }
/* Il margine sotto i titoli lo impone Kadence con ".single-content h3":
   serve (0,2,0), la sola classe verrebbe ignorata. */
.entry-content .bh-card__title{ margin:0 0 .15rem; }
.bh-card__title{ font-size:var(--bh-fs-card-title); letter-spacing:-.015em; }
.bh-card__title a{ color:var(--bh-ink); text-decoration:none; }
/* --- Icone ---
   Misura in em, non in px: l'icona cresce insieme al testo accanto, anche con
   la scala tipografica fluida. flex-shrink:0 le impedisce di schiacciarsi
   quando l'etichetta va a capo. Il colore arriva da currentColor. */
/* Dimensione base delle icone nei blocchi condivisi. Il selettore elenca
   anche .bh-card__meta e .bh-card__servizi perche' questi due blocchi si
   usano anche fuori dalla card (scheda alloggio): senza l'antenato .bh-card
   l'SVG resterebbe senza misura e schiaccerebbe il testo accanto. */
.bh-card svg,
.bh-card__meta svg,
.bh-card__servizi svg{
	width:1.05em;
	height:1.05em;
	flex:0 0 auto;
	stroke-width:1.75;
}

.bh-card__addr{
	color:var(--bh-muted);
	/* Piu' piccolo del corpo del testo: e' un dato di servizio, non deve
	   competere con il titolo sopra. */
	font-size:var(--bh-fs-card-small);
	margin:0 0 .7rem;
	line-height:1.45;
	display:flex;
	align-items:flex-start;
	gap:.4em;
}
/* L'icona resta allineata alla prima riga anche se l'indirizzo va a capo */
.bh-card__addr svg{ margin-top:.15em; }

.bh-card__price{
	color:#1f8f4e;
	font-weight:700;
	font-size:var(--bh-fs-card-price);
	margin:0 0 1rem;
}
/* L'unita' non deve pesare come la cifra: piu' piccola e senza grassetto */
.bh-card__price-unit{
	font-weight:400;
	font-size:.7em;
	color:var(--bh-muted);
}
/* --- Blocco dati: una card dentro la card ---
   Niente border-top: il filo che divideva le informazioni dai dati e' stato
   tolto, a separare i due blocchi basta il riquadro.
   overflow:hidden serve a far combaciare i bordi verticali interni con gli
   angoli arrotondati, altrimenti sbordano agli estremi. */
.bh-card__meta{
	list-style:none;
	margin:0;
	padding:0;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	overflow:hidden;
	/* Griglia, non flex. Con flex la larghezza finale dipende dallo spazio
	   libero e quindi dal contenuto: la voce con l'etichetta piu' lunga
	   ("SUPERFICIE") puo' risultare piu' larga delle altre a seconda del font
	   e di quando questo viene caricato. minmax(0,1fr) crea colonne uguali per
	   costruzione, indipendenti da cosa c'e' dentro.
	   grid-auto-flow:column genera esattamente una colonna per voce: se un
	   alloggio non ha i bagni restano tre colonne uguali, senza celle vuote. */
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:minmax(0,1fr);
}
.bh-card__meta li{
	min-width:0;
	display:flex;
	align-items:center;
	gap:.6rem;
	padding:12px 12px;
	border-left:1px solid var(--bh-line);
}
/* Il divisore della prima voce non si toglie, si rende trasparente: togliendolo
   quella voce sarebbe larga 1px meno delle altre (134 contro 135), perche' con
   flex-basis:0 lo spazio si divide sul contenuto e i bordi si sommano dopo. */
.bh-card__meta li:first-child{ border-left-color:transparent; }
.bh-card__meta-testo{ display:flex; flex-direction:column; gap:var(--bh-meta-gap); }
/* L'icona non ha una misura propria: si distende sull'altezza della voce, che
   e' quella del blocco etichetta + valore. aspect-ratio la tiene quadrata, cosi'
   la larghezza segue l'altezza senza numeri da tenere aggiornati a mano.
   Dichiarata dopo .bh-card svg, che ha la stessa specificita' e la fisserebbe. */
/* Misura fissa, non elastica: con align-self:stretch l'icona crescerebbe in
   larghezza insieme all'altezza, toglierebbe spazio al testo, il testo andrebbe
   a capo, la riga si alzerebbe e l'icona con lei. */
.bh-card__meta svg{
	color:var(--bh-muted);
	width:var(--bh-meta-icon);
	height:var(--bh-meta-icon);
	stroke-width:1.5;
}

/* --- Servizi --- */
.bh-card__servizi{
	list-style:none;
	margin:16px 0 0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:10px 18px;
}
.bh-card__servizi li{
	display:flex;
	align-items:center;
	gap:.45em;
	font-size:.85rem;
	color:var(--bh-muted);
}
.bh-card__meta-label{
	font-size:var(--bh-meta-label-fs);
	line-height:var(--bh-meta-lh);
	white-space:nowrap;
	text-transform:uppercase;
	letter-spacing:.07em;
	color:var(--bh-muted);
}
.bh-card__meta-value{ font-weight:600; font-size:var(--bh-meta-value-fs); line-height:var(--bh-meta-lh); color:var(--bh-ink); }

/* Le due liste della card sono <ul>, e Kadence le tratta come elenchi di testo:
   ".single-content ul" vale (0,1,1) e batte le classi da sola (0,1,0), imponendo
   37px di rientro a sinistra e i propri margini. Qui li riazzero con (0,2,0). */
.entry-content .bh-card__meta,
.entry-content .bh-card__servizi{
	padding:0;
	margin:0;
}
.entry-content .bh-card__servizi{ margin-top:16px; }

/* --- Pagina archivio alloggi: filtri a lato, risultati a destra --- */
.bh-archivio{
	display:grid;
	grid-template-columns:minmax(0,240px) minmax(0,1fr);
	gap:56px;
	align-items:start;
}

.bh-filtri__titolo{
	font-size:var(--bh-fs-h3);
	text-transform:uppercase;
	letter-spacing:.08em;
	margin:0 0 1rem;
}
.bh-filtri__intervallo{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin-bottom:20px;
}
.bh-filtri__intervallo label{ display:flex; flex-direction:column; gap:6px; }
.bh-filtri__intervallo span{
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}
.bh-filtri__intervallo input{
	width:100%;
	padding:10px 12px;
	border:1px solid var(--bh-line);
	background:#fff;
	font:inherit;
	font-size:var(--bh-fs-card-small);
}
.bh-filtri__applica{
	display:block;
	width:100%;
	padding:.85em 1em;
	border:0;
	background:var(--bh-brand);
	color:#fff;
	font:inherit;
	font-size:var(--bh-fs-card-small);
	font-weight:600;
	cursor:pointer;
	transition:background-color .18s ease;
}
/* Hover: scurisce lo sfondo invece di velare tutto con l'opacita',
   cosi' il testo bianco resta pieno e il contrasto non cala. */
.bh-filtri__applica:hover,
.bh-filtri__applica:focus-visible{ background:var(--bh-brand-scuro); }
.bh-filtri__azzera{
	display:inline-block;
	margin-top:12px;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}

/* --- Barra sopra i risultati --- */
.bh-risultati__testa{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	margin-bottom:24px;
}
.bh-risultati__conteggio{
	margin:0;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}
.bh-risultati__conteggio strong{ color:var(--bh-accent); }
.bh-risultati__su{ color:var(--bh-muted); }
.bh-risultati__strumenti{ display:flex; align-items:center; gap:12px; }
.bh-ordina select{
	padding:10px 12px;
	border:1px solid var(--bh-line);
	background:#fff;
	font:inherit;
	font-size:var(--bh-fs-card-small);
}
.bh-risultati__vuoto{ color:var(--bh-muted); }

/* --- Card in versione estesa: solo nell'archivio ---
   Sulla home la card resta verticale. Qui la riga e' unica e larga, quindi
   immagine a sinistra e contenuti a destra.
   Tutti i selettori partono da .bh-archivio: fanno (0,2,0) e battono le
   regole generali .bh-card / .bh-cards, che valgono (0,1,0) e sono
   dichiarate piu' in basso nel foglio. */
.bh-archivio .bh-cards{
	grid-template-columns:minmax(0,1fr);
	gap:24px;
}
.bh-archivio .bh-card{
	display:grid;
	grid-template-columns:minmax(0,340px) minmax(0,1fr);
	align-items:stretch;
	min-height:260px;
}
/* In verticale l'immagine ha aspect-ratio 3/2; qui deve invece riempire
   l'altezza della riga, decisa dai contenuti a destra. */
.bh-archivio .bh-card__media{
	aspect-ratio:auto;
	height:100%;
}
.bh-archivio .bh-card__body{
	display:flex;
	flex-direction:column;
	padding:28px var(--bh-card-pad-x);
}

@media (max-width:700px){
	/* Sotto i 700px la colonna immagine non ha piu' spazio utile:
	   si torna alla card verticale, identica a quella della home. */
	.bh-archivio .bh-card{ grid-template-columns:minmax(0,1fr); min-height:0; }
	.bh-archivio .bh-card__media{ aspect-ratio:3/2; }
}

@media (max-width:900px){
	.bh-archivio{ grid-template-columns:minmax(0,1fr); gap:32px; }
}

/* --- Tre punti forti ---
   I testi usano la stessa scala del resto del sito (--bh-fs-h3 per i titoli,
   --bh-fs-body per i paragrafi) invece di due misure fisse tutte loro. */
.bh-usp{ border-top:1px solid var(--bh-line); }
.bh-usp .wp-block-columns{ gap:56px; text-align:center; }

/* Contenitore per l'immagine sopra ogni punto. Vuoto resta un rettangolo
   nella tinta chiara del sito: si legge come uno spazio previsto, non come
   qualcosa di rotto. Appena dentro finisce un'immagine, la riempie.

   Quadrato perche' quadrate sono le tre immagini caricate (1600x1600): con
   il 4/3 di prima lo sfondo "cover" ne tagliava una fascia sopra e una
   sotto. Riquadro e immagine con lo stesso rapporto combaciano senza
   ritagli e senza bande vuote. */
.bh-usp__media{
	aspect-ratio:1;
	margin:0 0 24px;
	background:var(--bh-tint);
	border-radius:var(--bh-media-radius);
	overflow:hidden;
}
.bh-usp__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
/* L'immagine inserita in Gutenberg arriva dentro una <figure> con i suoi
   margini: qui deve solo riempire il riquadro. */
.bh-usp__media figure{ margin:0; height:100%; }

.entry-content .bh-usp__title{
	font-size:var(--bh-fs-h3);
	font-weight:700;
	letter-spacing:-.01em;
	text-transform:none;
	margin:0 0 .5rem;
}
.bh-usp p{ color:var(--bh-muted); line-height:1.65; font-size:var(--bh-fs-body); margin:0; }

/* --- Form di ricerca --- */
.bh-band--tint .mphb-search-form{ max-width:940px; margin-inline:auto; }

@media (max-width:781px){
	:root{
		--bh-sheet-overlap:56px;
		--bh-content-inset:64px;
	}
	.entry-content .bh-sep{ margin-block:36px 16px; }
	.bh-sheet{ padding-top:48px; }
	.bh-band{ padding-block:44px; }
	.bh-split{ gap:28px; }
	/* A colonna unica la scacchiera non esiste piu': righe di altezza uguale
	   costringerebbero le celle di testo all'altezza delle immagini, con molto
	   vuoto attorno. Ognuna torna alla propria altezza naturale. */
	.entry-content .bh-checker{
		grid-template-columns:1fr;
		grid-auto-rows:auto;
		gap:28px;
		padding-block:44px;
	}
	.bh-feature__media,
	.bh-feature__text{ height:auto; }
	.bh-feature__text{ padding:0; }
	.entry-content .bh-checker .bh-feature__media .bh-round img{ height:auto; }
	.bh-cards{ grid-template-columns:1fr; }
	/* Quattro voci in fila sono troppo strette sotto i 600px: due per riga,
	   con i divisori ricalcolati in base alla posizione nella griglia. */
	.bh-card__meta{
		grid-auto-flow:row;
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
	/* A 113px di colonna l'icona affiancata lascerebbe 38px al testo, meno dei
	   64 che serve all'etichetta: qui va sopra, e il testo prende tutta la
	   larghezza. */
	.bh-card__meta li{ flex-direction:column; align-items:flex-start; }
	.bh-card__meta li:nth-child(2n+1){ border-left-color:transparent; }
	.bh-card__meta li:nth-child(n+3){ border-top:1px solid var(--bh-line); }
}

/* --- Correzioni di resa ---
   Nota: nel CSS del Personalizza NON usare il combinatore figlio: viene
   sanificato e la regola risulta invalida. Usare discendenti.
   Kadence applica .single-content ... {margin-top:0} con specificita' (0,2,0):
   le regole qui sotto la pareggiano e vincono perche' dichiarate dopo. */

/* La riga della navbar prende la stessa larghezza della colonna dei contenuti:
   il contenitore dell'header rientra solo dei suoi 24px, mentre le sezioni
   rientrano anche dei 32 dell'area contenuto, e logo e menu risultavano 32px
   piu' esterni per lato. Stesso elemento su desktop e mobile: quello nascosto
   ha altezza zero. */
#masthead .site-main-header-inner-wrap{
	max-width:calc(min(var(--global-content-width), var(--global-vw, 100vw)) - var(--bh-content-inset));
	margin-inline:auto;
}

/* Navbar sticky scrollata: filo di separazione e ombra, istantanee con lo sfondo */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start){
	box-shadow:var(--bh-ombra-nav);
}

/* Alloggi, scheda alloggio e checkout: navbar gia' nel suo stato "scrollato"
   fin dal caricamento.
   In cima Kadence non mette ne' .item-is-fixed ne' uno sfondo (il wrap e'
   trasparente e si vede il bianco della pagina), quindi qui dichiariamo noi
   fondo e ombra, validi in entrambi gli stati.
   Il bianco e' lo stesso dei due stati del tema (header_main_background e
   header_sticky_background), quindi la navbar scrollata non cambia aspetto. */
body.page-id-7 #masthead .kadence-sticky-header,
body.page-id-11 #masthead .kadence-sticky-header,
body.single-mphb_room_type #masthead .kadence-sticky-header{
	background:#fff;
	box-shadow:var(--bh-ombra-nav);
}

/* L'hero scorre sotto la navbar trasparente: Kadence mette 32px di respiro */
body.home .entry-content-wrap{ padding-top:0; }

/* --- SOLO HOME: navbar trasparente in cima, con sfondo dopo lo scroll ---
   Kadence da' lo sfondo dei due stati (trasparente / bianco sticky) ma non i
   colori del testo, che sono opzione Pro: li gestiamo qui.
   .item-at-start = navbar in cima; Kadence la toglie appena si scrolla.
   L'id #masthead porta la specificita' a (1,x,y) e batte la regola del tema
   sulla voce di menu corrente, che vale (0,4,3). */
body.home #masthead .kadence-sticky-header.item-at-start a,
body.home #masthead .kadence-sticky-header.item-at-start a.brand,
body.home #masthead .kadence-sticky-header.item-at-start .site-title,
body.home #masthead .kadence-sticky-header.item-at-start li.menu-item a,
body.home #masthead .kadence-sticky-header.item-at-start button,
body.home #masthead .kadence-sticky-header.item-at-start .kadence-svg-iconset{
	color:#fff;
}
body.home #masthead .kadence-sticky-header.item-at-start li.menu-item a:hover,
body.home #masthead .kadence-sticky-header.item-at-start a.brand:hover{
	color:rgba(255,255,255,.75);
}

/* --- Logo SVG ---
   L'SVG e' inline (opzione logo_icon "custom" di Kadence) con fill/stroke su
   currentColor, cosa impossibile con un <img>. Il colore NON si imposta qui:
   Kadence lo mette sullo span .logo-icon con tre opzioni separate, una per
   stato (logo_icon_color, transparent_logo_icon_color,
   header_sticky_logo_icon_color) e quelle regole battono qualunque color
   messo sull'<a>. Qui resta solo la dimensione. */
#masthead .brand .logo-icon{ display:flex; align-items:center; }
#masthead .brand .logo-icon svg{
	display:block;
	height:44px;
	width:auto;
}

/* --- Sottolineatura delle voci di menu ---
   Stile nav "underline-fullheight" di Kadence: la voce e' alta quanto la riga,
   quindi il suo :after con bottom:0 cade sul fondo della navbar invece che
   sotto il testo. Kadence lo fa 2px con background:currentColor.
   Qui: 3px (piu' spesso dell'1px della linea) e bottom:-1px, cosi' si posa
   sopra la linea e la copre invece di affiancarla.
   Bianco pieno e non currentColor: al passaggio del mouse il testo va a
   bianco 75% e la sottolineatura sbiadirebbe con lui. */
#masthead .header-navigation .header-menu-container ul li a:after{
	height:3px;
	bottom:-1px;

	/* Kadence anima da scale(0,0) translate(-50%,0) a scale(1,1) translate(50%,0):
	   interpola due cose insieme, la barra cresce anche in altezza e nel
	   frattempo scivola di lato, e sembra muoversi troppo. Qui resta ancorata
	   (left:0 al posto di right:50%) e si limita ad aprirsi in larghezza. */
	left:0;
	right:auto;
	width:100%;
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .22s cubic-bezier(.4,0,.2,1);
}

/* Spazio fra le voci con gap sulla lista, non con il padding del link:
   il padding sta dentro l'<a> e la sottolineatura e' larga quanto l'<a>,
   quindi allargherebbe anche lei e le sottolineature resterebbero attaccate.
   ul.menu colpisce solo il primo livello, i sottomenu sono ul.sub-menu. */
#masthead .header-navigation .header-menu-container ul.menu{
	gap:1.5rem;
}
#masthead .header-navigation .header-menu-container ul li a:hover:after,
#masthead .header-navigation .header-menu-container ul li.current-menu-item a:after,
#masthead .header-navigation .header-menu-container ul li.current-page-item a:after{
	transform:scaleX(1);
}
body.home #masthead .kadence-sticky-header.item-at-start .header-menu-container ul li a:after{
	background:#fff;
}

/* --- HOME, navbar in cima: piu' alta e con la linea sotto il contenuto ---
   Uso min-height e non padding perche' Kadence fissa gia'
   .site-main-header-inner-wrap{min-height:80px} in box-sizing:border-box:
   il padding crescerebbe solo oltre l'altezza del figlio piu' alto (il menu,
   48px), quindi il risultato dipenderebbe dal contenuto invece che da noi.
   La linea sta su .site-main-header-inner-wrap perche' quell'elemento va da
   99px a 1341px: esattamente il bordo sinistro del logo e il destro del menu. */
body.home #masthead .kadence-sticky-header.item-at-start .site-main-header-inner-wrap{
	min-height:120px;
	border-bottom:1px solid rgba(255,255,255,.45);
}

/* --- Tempi dei due stati ---
   Solo l'altezza e' animata, in ease come richiesto. Sfondo, ombra e colore
   del testo scattano istantanei: se il testo sfumasse mentre il fondo diventa
   bianco di colpo, per la durata della dissolvenza si leggerebbe bianco su
   bianco. Per lo stesso motivo l'ombra segue lo sfondo invece dell'altezza. */
body.home #masthead .site-main-header-inner-wrap{
	transition:min-height .28s ease;
}
#masthead .site-header-row-container-inner,
#masthead .kadence-sticky-header,
#masthead .kadence-sticky-header a,
#masthead .kadence-sticky-header button,
#masthead .kadence-sticky-header .site-title{
	transition:none;
}

/* Chi ha chiesto meno animazioni al sistema operativo vede lo scambio secco */
@media (prefers-reduced-motion:reduce){
	body.home #masthead .site-main-header-inner-wrap{ transition:none; }
	#masthead .header-navigation .header-menu-container ul li a:after{ transition:none; }
}

/* Il foglio bianco risale sopra l'hero (misura unica in --bh-sheet-overlap) */
.entry-content .bh-hero{ margin-bottom:0; }
.entry-content .bh-sheet,
.bh-sheet.alignfull{ margin-top:calc(-1 * var(--bh-sheet-overlap)); }

/* Card a due colonne come nel mockup */
.bh-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){
	.bh-cards{ grid-template-columns:1fr; }
}

/* --- Alloggi e scheda alloggio: aria fra titolo/breadcrumb e i contenuti ---
   Lo stacco valeva 99px: 43 di residuo dentro .entry-header (min-height 200px
   col contenuto centrato in verticale), 32 di margine su .content-area e 24 di
   padding su .entry-content-wrap. Togliamo i 56 sotto la testata e lasciamo il
   titolo esattamente dov'e': agire sulla min-height accorcerebbe anche l'aria
   sopra il titolo.
   Kadence governa il padding con .content-vertical-padding-show (0,2,0):
   il prefisso body.page-id-7 porta a (0,2,1) e vince. */
body.page-id-7 .content-area,
body.single-mphb_room_type .content-area{ margin-top:0; }
body.page-id-7 .entry-content-wrap,
body.single-mphb_room_type .entry-content-wrap{ padding-top:0; }

/* ==========================================================================
   Scheda del singolo alloggio
   I contenitori .bh-alloggio__* li apre bibihouse-alloggio.php agganciandosi
   agli hook di MotoPress. Qui c'e' solo l'impaginazione.
   Attenzione: il Personalizza sanifica il segno di maggiore, quindi niente
   combinatori figlio, solo selettori discendenti.
   ========================================================================== */
.bh-alloggio{
	display:grid;
	grid-template-columns:minmax(0,1fr) 380px;
	column-gap:56px;
	align-items:start;
}
/* Righe esplicite: nel markup nome e indirizzo stanno prima della galleria
   (arrivano dal filtro su the_content, che gira prima dei blocchi del
   plugin), ma in pagina vanno sotto le foto. E la colonna destra deve
   affiancare tutto il resto, non incolonnarsi sotto come farebbe il flusso
   automatico. */
.bh-alloggio__galleria{ grid-column:1 / -1; grid-row:1; }
.bh-alloggio__testa{ grid-column:1; grid-row:2; }
.bh-alloggio__dettagli{ grid-column:1; grid-row:3; }
.bh-alloggio__descrizione{ grid-column:1; grid-row:4; }
.bh-alloggio__servizi{ grid-column:1; grid-row:5; }
.bh-alloggio__prenota{ grid-column:2; grid-row:2 / span 4; }

.entry-content .bh-alloggio__titolo{
	margin:0 0 .35rem;
	font-size:var(--bh-fs-h2);
	letter-spacing:-.015em;
}

/* Indirizzo sotto il titolo, stessa resa della card */
.entry-content .bh-alloggio__testa{ margin-bottom:28px; }
.entry-content .bh-alloggio__addr{
	display:flex;
	align-items:flex-start;
	gap:.6rem;
	margin:0;
	color:var(--bh-muted);
	font-size:var(--bh-fs-card-small);
}
.bh-alloggio__addr svg{ width:1.1em; height:1.1em; flex:0 0 auto; margin-top:.15em; }

/* --- Galleria: immagine grande + carosello ---
   Markup nostro (bibihouse-alloggio.php), non piu' la gallery classica. */
/* Immagine aperta a sinistra, miniature incolonnate a destra.
   Niente griglia a due colonne: con quella la riga si dimensionava sul
   contenuto della colonna miniature, piu' alta dell'immagine, e l'immagine
   ricavava dall'aspect-ratio una larghezza maggiore della propria traccia,
   finendo sotto le miniature.
   Qui l'altezza la detta l'immagine e la colonna si aggancia ai suoi bordi. */
.bh-galleria{
	--bh-galleria-rail:150px;
	--bh-galleria-gap:8px;
	margin-bottom:48px;
	position:relative;
}
.bh-galleria__principale{
	margin:0;
	width:calc(100% - var(--bh-galleria-rail) - var(--bh-galleria-gap));
	aspect-ratio:16 / 9;
	overflow:hidden;
	border-radius:var(--bh-media-radius);
	background:var(--bh-tint);
}
.bh-galleria__principale img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.bh-galleria__carosello{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:var(--bh-galleria-rail);
	display:flex;
	flex-direction:column;
	gap:var(--bh-galleria-gap);
	/* Senza questo la striscia non scorre: un elemento flex ha
	   min-height:auto, cioe' non scende sotto il proprio contenuto. */
	min-height:0;
}
/* La striscia scorre in orizzontale e si aggancia alle miniature.
   scrollbar-width:none toglie la barra: a scorrere ci pensano le frecce,
   il dito e la rotella. */
.entry-content .bh-galleria__strip{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:8px;
	overflow-y:auto;
	overflow-x:hidden;
	scroll-snap-type:y proximity;
	scrollbar-width:none;
	min-height:0;
	flex:1 1 auto;
}
.bh-galleria__strip::-webkit-scrollbar{ display:none; }
.bh-galleria__voce{
	flex:0 0 auto;
	width:auto;
	margin:0;
	scroll-snap-align:start;
}
.bh-galleria__thumb{
	display:block;
	width:100%;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
	aspect-ratio:4 / 3;
	overflow:hidden;
	border-radius:var(--bh-media-radius);
	position:relative;
}
.bh-galleria__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:opacity .18s ease;
}
/* La miniatura mostrata in grande resta piena, le altre leggermente velate:
   distingue lo stato attivo senza aggiungere un bordo che sposta il layout. */
.bh-galleria__thumb img{ opacity:.55; }
.bh-galleria__thumb.is-attiva img,
.bh-galleria__thumb:hover img,
.bh-galleria__thumb:focus-visible img{ opacity:1; }

.bh-galleria__freccia{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:32px;
	padding:0;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
	color:var(--bh-ink);
	cursor:pointer;
	transition:background-color .18s ease, opacity .18s ease;
}
.bh-galleria__freccia:hover:not(:disabled){ background:var(--bh-tint); }
.bh-galleria__freccia:disabled{ opacity:.35; cursor:default; }
/* Le stesse due frecce ruotate: sinistra diventa su, destra diventa giu'.
   Meglio che aggiungere due icone in piu' per lo stesso significato. */
.bh-galleria__freccia svg{ width:1.15rem; height:1.15rem; transform:rotate(90deg); }
/* Miniature tutte visibili: le frecce non servono e sparirebbero comunque
   spente. Le toglie il JS mettendo la classe sul contenitore. */
.bh-galleria--senza-frecce .bh-galleria__freccia{ display:none; }

@media (prefers-reduced-motion: reduce){
	.bh-galleria__thumb img,
	.bh-galleria__freccia{ transition:none; }
}

/* --- Descrizione --- */
/* I dettagli aprono la colonna subito sotto il titolo, la descrizione li
   segue: lo stacco di 40px si sposta di conseguenza. */
.bh-alloggio__descrizione{ font-size:var(--bh-fs-body); margin-top:40px; }
/* I titoli delle sezioni sono H2 (subito sotto l'H1 del nome, per una
   gerarchia corretta), ma restano della misura di un H3. */
.entry-content .bh-alloggio__descrizione :is(h2,h3){
	font-size:var(--bh-fs-h3);
	line-height:1.6;
	margin:32px 0 8px;
}
.entry-content .bh-alloggio__descrizione :is(h2,h3):first-child{ margin-top:0; }

/* --- Dettagli: stesso riquadro delle specifiche in card ---
   ".single-content ul" di Kadence vale (0,1,1) e imporrebbe rientro e
   pallini: qui serve (0,2,0) per scavalcarla. */
.entry-content .bh-alloggio__titolo-sezione{
	font-size:var(--bh-fs-h3);
	margin:0 0 16px;
}
/* Il riquadro delle specifiche riusa quello della card (bh_blocco_specifiche),
   ma qui le quattro voci sono riquadri separati invece di un unico blocco
   diviso da filetti: nella card servono a stare strette, in scheda hanno
   spazio e reggono meglio da sole.
   Il prefisso .bh-alloggio__dettagli porta la specificita' a (0,2,0) e
   scavalca le regole generali della card, che restano intatte altrove. */
.bh-alloggio__dettagli .bh-card__meta{
	border:0;
	overflow:visible;
	grid-auto-flow:column;
	grid-auto-columns:minmax(0,1fr);
	gap:12px;
}
.bh-alloggio__dettagli .bh-card__meta li{
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	padding:16px var(--bh-card-pad-x);
}


/* --- Servizi in colonne, impaginazione alla Booking ---
   columns e non grid: le sezioni hanno lunghezze diverse e con le colonne CSS
   il testo si distribuisce da solo riempiendo la colonna prima di passare
   alla successiva, senza righe allineate a forza e senza buchi.
   break-inside:avoid tiene una categoria tutta nella stessa colonna. */
.bh-servizi{
	columns:3;
	column-gap:48px;
}
.bh-servizi__gruppo{
	break-inside:avoid;
	margin-bottom:28px;
}
.bh-servizi__gruppo:last-child{ margin-bottom:0; }

.entry-content .bh-servizi__titolo{
	display:flex;
	align-items:center;
	gap:.5rem;
	margin:0 0 10px;
	font-size:var(--bh-fs-card-small);
	font-weight:700;
	color:var(--bh-ink);
}
.bh-servizi__titolo svg{
	width:1.15em;
	height:1.15em;
	flex:0 0 auto;
	stroke-width:1.75;
}

/* Kadence governa gli elenchi con ".single-content ul" (0,1,1): per togliere
   pallini e rientro serve almeno (0,2,0). */
.entry-content .bh-servizi__elenco{
	list-style:none;
	margin:0;
	padding:0;
}
.entry-content .bh-servizi__elenco li{
	display:flex;
	align-items:flex-start;
	gap:.6rem;
	margin:0 0 6px;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-ink);
}
.bh-servizi__elenco svg{
	width:1.05em;
	height:1.05em;
	flex:0 0 auto;
	stroke-width:2;
	color:#1f8f4e;
	margin-top:.25em;
}

.bh-alloggio__servizi{ margin-top:40px; }

@media (max-width:1200px){
	.bh-servizi{ columns:2; column-gap:40px; }
}
@media (max-width:700px){
	.bh-servizi{ columns:1; }
}


/* --- Colonna prenotazione --- */
/* Distanza dalla navbar sticky: 48px sotto i suoi 80px, piu' la barra di
   amministrazione quando c'e' (WordPress la espone come variabile solo agli
   utenti loggati; per i visitatori vale 0). Sotto i 900px il riquadro non e'
   sticky, quindi la regola vale solo su desktop. */
.bh-alloggio__prenota{
	position:sticky;
	top:calc(var(--wp-admin--admin-bar--height, 0px) + 80px + 48px);
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
	padding:24px;
}
/* Riga del prezzo: verde solo la cifra, il resto della frase in testo normale. */
.entry-content .bh-prezzo{
	margin:0 0 24px;
	font-size:var(--bh-fs-card-price);
	color:var(--bh-ink);
	font-weight:400;
}
.bh-prezzo__cifra{
	color:#1f8f4e;
	font-weight:700;
}
.bh-prezzo__pre,
.bh-prezzo__post{
	font-size:.7em;
	color:var(--bh-ink);
}

/* --- Modulo di prenotazione: campi uniti in un riquadro unico ---
   Il markup e' quello di MotoPress (una serie di <p> fratelli): niente
   contenitori aggiunti, l'unione la fa la griglia. Ogni cella porta il proprio
   bordo e viene tirata di 1px verso l'alto e verso sinistra, cosi' i bordi
   confinanti si sovrappongono invece di raddoppiarsi. */
.bh-alloggio__prenota .mphb-booking-form{
	display:grid;
	grid-template-columns:1fr 1fr;
}
/* Il campo nascosto del tipo di alloggio occuperebbe una riga della griglia. */
.bh-alloggio__prenota .mphb-booking-form input[type="hidden"]{ display:none; }

.bh-alloggio__prenota .mphb-check-in-date-wrapper{ grid-column:1; grid-row:1; }
.bh-alloggio__prenota .mphb-check-out-date-wrapper{ grid-column:2; grid-row:1; }
.bh-alloggio__prenota .mphb-adults-wrapper{ grid-column:1; grid-row:2; }
.bh-alloggio__prenota .mphb-children-wrapper{ grid-column:2; grid-row:2; }

.bh-alloggio__prenota .mphb-check-in-date-wrapper,
.bh-alloggio__prenota .mphb-check-out-date-wrapper,
.bh-alloggio__prenota .mphb-adults-wrapper,
.bh-alloggio__prenota .mphb-children-wrapper{
	position:relative;
	margin:-1px 0 0 -1px;
	padding:10px 14px;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
}

/* Cella a fuoco: il filetto passa al colore del marchio su tutti e quattro i
   lati. Lo z-index serve perche' i bordi si sovrappongono: senza, il lato
   condiviso resterebbe grigio, disegnato dalla cella accanto. */
.bh-alloggio__prenota .mphb-booking-form p:focus-within{
	z-index:1;
	border-color:var(--bh-brand);
	box-shadow:0 0 0 1px var(--bh-brand);
}

.bh-alloggio__prenota .mphb-booking-form label{
	display:block;
	margin:0 0 2px;
	font-size:.7rem;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--bh-ink);
}
.bh-alloggio__prenota .mphb-booking-form br{ display:none; }

/* Campi senza cornice: la cornice e' quella della cella. */
.bh-alloggio__prenota .mphb-booking-form input[type="text"],
.bh-alloggio__prenota .mphb-booking-form select{
	width:100%;
	padding:0;
	border:0;
	background:none;
	font:inherit;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-ink);
	cursor:pointer;
}
.bh-alloggio__prenota .mphb-booking-form input[type="text"]:focus,
.bh-alloggio__prenota .mphb-booking-form select:focus{ outline:none; }
.bh-alloggio__prenota .mphb-booking-form input::placeholder{ color:var(--bh-muted); }

.bh-alloggio__prenota .mphb-errors-wrapper{ grid-column:1 / -1; grid-row:3; }

/* Prenotazione diretta: scelte le date, il plugin svela questo blocco con il
   messaggio di disponibilita' e il bottone di conferma, e nasconde quello di
   verifica. Va collocato nella griglia, altrimenti finisce in una riga
   automatica dopo il bottone. */
.bh-alloggio__prenota .mphb-reserve-room-section{
	grid-column:1 / -1;
	grid-row:4;
	margin-top:16px;
}
.bh-alloggio__prenota .mphb-reserve-room-section p{
	margin:0 0 12px;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}
/* Il prezzo del periodo lo mostra gia' la nostra riga in cima alla colonna,
   con il totale reale: qui sarebbe un doppione. */
.bh-alloggio__prenota .mphb-period-price{ display:none; }

.bh-alloggio__prenota .mphb-reserve-btn-wrapper{
	grid-column:1 / -1;
	grid-row:5;
	margin:16px 0 0;
}
/* Stesso bottone per "verifica" e "conferma": cambia il testo, non l'aspetto. */
.bh-alloggio__prenota .mphb-confirm-reservation,
.bh-alloggio__prenota .mphb-reserve-btn{
	width:100%;
	padding:.9em 1em;
	border:0;
	border-radius:var(--bh-radius);
	background:var(--bh-brand);
	color:#fff;
	font:inherit;
	font-size:var(--bh-fs-card-small);
	font-weight:600;
	cursor:pointer;
	transition:background-color .18s ease;
}
.bh-alloggio__prenota .mphb-confirm-reservation:hover,
.bh-alloggio__prenota .mphb-confirm-reservation:focus-visible,
.bh-alloggio__prenota .mphb-reserve-btn:hover,
.bh-alloggio__prenota .mphb-reserve-btn:focus-visible{ background:var(--bh-brand-scuro); }

/* La nota "I campi obbligatori sono seguiti da *" e' stampata dentro
   mphb_tmpl_the_room_reservation_form(), senza hook ne' template part: da PHP
   non si puo' staccare, si toglie qui. display:none la leva anche
   dall'albero di accessibilita', non solo dalla vista. */
.bh-alloggio__prenota .mphb-required-fields-tip{ display:none; }

@media (max-width:900px){
	/* Sotto i 900px la colonna laterale non ha piu' spazio: tutto in colonna.
	   Le righe restano esplicite perche' nel markup la galleria sta dopo la
	   descrizione, mentre in pagina deve venire prima. */
	.bh-alloggio{ grid-template-columns:minmax(0,1fr); }
	.bh-alloggio__galleria{ grid-column:1; grid-row:1; }
	.bh-alloggio__testa{ grid-column:1; grid-row:2; }
	/* Quattro riquadri affiancati su 311px darebbero 69px l'uno e l'etichetta
	   "SUPERFICIE" uscirebbe dal bordo: due per riga. */
	.bh-alloggio__dettagli .bh-card__meta{
		grid-auto-flow:row;
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
	.bh-alloggio__dettagli{ grid-column:1; grid-row:3; }
	.bh-alloggio__descrizione{ grid-column:1; grid-row:4; }
	.bh-alloggio__servizi{ grid-column:1; grid-row:5; }
	.bh-alloggio__prenota{ grid-column:1; grid-row:6; }
	.bh-alloggio__prenota{ position:static; margin-top:40px; }
	/* Sotto i 700px la colonna a lato non ha spazio: miniature di nuovo
	   sotto l'immagine, in orizzontale. */
	.bh-galleria__principale{ width:100%; margin-bottom:var(--bh-galleria-gap); }
	.bh-galleria__carosello{
		position:static;
		width:auto;
		flex-direction:row;
		align-items:center;
	}
	.entry-content .bh-galleria__strip{
		flex-direction:row;
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x proximity;
	}
	.bh-galleria__voce{ width:120px; }
	.bh-galleria__freccia{ width:40px; height:40px; }
	.bh-galleria__freccia svg{ transform:none; }
}

/* ==========================================================================
   Calendario del modulo di prenotazione
   Il pannello viene appeso al body dal plugin, quindi le regole NON possono
   stare dentro .bh-alloggio__prenota: si parte da .datepick-popup, che
   compare solo sul fronte del sito (in Bacheca il selettore e' un altro).

   I selettori sono volutamente lunghi: le celle hanno regole sia della
   libreria (".datepick-month a") sia del plugin
   (".mphb-datepick-popup .datepick-month td .mphb-past-date", che vale
   (0,3,1)). Il doppio prefisso .datepick-popup .mphb-datepick-popup porta le
   nostre sopra le loro senza ricorrere a !important.

   Classi di stato: mphb-available-date, mphb-past-date,
   mphb-unselectable-date, mphb-check-in-date, datepick-other-month,
   datepick-today.
   ========================================================================== */
.datepick-popup{
	/* La libreria da' a ogni mese 15em (251px) e allo scatolone una larghezza
	   inline calcolata in JavaScript: la cella deve stare dentro quei 251px,
	   sette colonne comprese, non il contrario. 32 + 2 di padding fa 238. */
	--bh-cal-cella:32px;
	--bh-cal-tondo:999px;
	padding:20px;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
	box-shadow:0 12px 32px rgba(16,20,24,.12);
}
.datepick-popup .datepick{
	border:0;
	background:none;
	padding:0;
	font-family:inherit;
	color:var(--bh-ink);
}

/* --- Barra di navigazione ---
   Le frecce diventano due bottoni tondi ai lati. Il testo originale
   ("") viene azzerato e sostituito da un chevron: cosi' non
   dipendiamo dalla traduzione del plugin. */
.datepick-popup .datepick-nav{
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:none;
	border:0;
	margin-bottom:8px;
}
.datepick-popup .datepick-cmd-prev,
.datepick-popup .datepick-cmd-next{
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border-radius:var(--bh-cal-tondo);
	background:var(--bh-brand);
	color:#fff;
	font-size:0;
	text-decoration:none;
	transition:background-color .15s ease;
}
.datepick-popup .datepick-cmd-prev:before{ content:"\276E"; font-size:.9rem; }
.datepick-popup .datepick-cmd-next:before{ content:"\276F"; font-size:.9rem; }
.datepick-popup .datepick-cmd-prev:hover,
.datepick-popup .datepick-cmd-next:hover{ background:var(--bh-brand-scuro); }
/* Freccia spenta: tinta chiara del marchio, come nel riferimento. */
.datepick-popup .datepick-cmd-prev.datepick-disabled,
.datepick-popup .datepick-cmd-next.datepick-disabled{
	background:#dce8f5;
	color:#8fb4d8;
	opacity:1;
	pointer-events:none;
}
/* Il comando "Oggi" al centro della barra ruberebbe il posto ai titoli dei
   mesi, che nel riferimento stanno li'. */
.datepick-popup .datepick-cmd-today{ display:none; }

/* --- Mesi --- */
.datepick-popup .datepick-month{
	border:0;
	background:none;
	box-sizing:border-box;
	padding:0 8px;
}
.datepick-popup .datepick-month-header{
	padding:0 0 12px;
	background:none;
	border:0;
	text-align:center;
	color:var(--bh-ink);
	font-weight:700;
}
.datepick-popup .datepick-month-year{
	border:0;
	background:none;
	font:inherit;
	font-weight:700;
	font-size:var(--bh-fs-body);
	color:var(--bh-ink);
	cursor:pointer;
}

.datepick-popup table{ width:100%; border-collapse:collapse; }
.datepick-popup th{
	padding:0 0 8px;
	background:none;
	border:0;
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--bh-muted);
}
.datepick-popup .mphb-datepick-popup td{
	padding:1px;
	border:0;
	background:none;
	text-align:center;
}

/* Ogni giorno e' un tondo di misura fissa: cosi' le righe restano allineate
   anche quando il numero passa da una a due cifre. */
.datepick-popup .mphb-datepick-popup .datepick-month td a,
.datepick-popup .mphb-datepick-popup .datepick-month td span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:var(--bh-cal-cella);
	height:var(--bh-cal-cella);
	padding:0;
	border:0;
	border-radius:var(--bh-cal-tondo);
	background:none;
	font-size:var(--bh-fs-card-small);
	text-decoration:none;
	opacity:1;
	transition:background-color .15s ease;
}
/* Prenotabile */
.datepick-popup .mphb-datepick-popup .datepick-month td a{ color:var(--bh-ink); }
.datepick-popup .mphb-datepick-popup .datepick-month td a:hover{ background:var(--bh-tint); }

/* Non prenotabile: grigia e barrata, come nel riferimento. Il tratto sta sul
   numero, non sul tondo, perche' line-through su un contenitore flex non
   verrebbe disegnato. */
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-past-date,
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-unselectable-date{
	background:none;
	color:var(--bh-muted);
	opacity:.5;
	text-decoration:line-through;
	text-decoration-thickness:1px;
}
/* I giorni del mese accanto non vanno spenti: nel riferimento sono normali,
   a meno che non siano anche passati. */
.datepick-popup .mphb-datepick-popup .datepick-month td .datepick-other-month{
	color:var(--bh-ink);
	opacity:1;
}
/* Oggi: solo un filetto, cosi' non compete con la data scelta. */
.datepick-popup .mphb-datepick-popup .datepick-month td a.datepick-today,
.datepick-popup .mphb-datepick-popup .datepick-month td span.datepick-today{
	background:none;
	box-shadow:inset 0 0 0 1px var(--bh-line);
}
/* Data scelta: tondo pieno del colore del marchio.
   Vale anche per lo <span>: nel calendario della partenza il giorno di arrivo
   non e' piu' cliccabile, ma va comunque mostrato come la scelta fatta. */
.datepick-popup .mphb-datepick-popup .datepick-month td a.mphb-check-in-date,
.datepick-popup .mphb-datepick-popup .datepick-month td span.mphb-check-in-date,
.datepick-popup .mphb-datepick-popup .datepick-month td a.mphb-check-in-date:hover{
	background:var(--bh-brand);
	color:#fff;
	font-weight:600;
	opacity:1;
	text-decoration:none;
	box-shadow:none;
}

/* Svuota / Chiudi: non ci sono nel riferimento, ma "Svuota" serve per
   disdire una scelta. Restano, in tono minore. */
.datepick-popup .datepick-ctrl{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:12px;
	padding-top:10px;
	border-top:1px solid var(--bh-line);
	background:none;
	border-left:0;
	border-right:0;
	border-bottom:0;
}
.datepick-popup .datepick-ctrl .datepick-cmd{
	width:auto;
	padding:4px 6px;
	background:none;
	color:var(--bh-muted);
	font-size:var(--bh-fs-card-small);
	text-decoration:none;
}
.datepick-popup .datepick-ctrl .datepick-cmd:hover{ color:var(--bh-ink); }

/* Su schermo stretto due mesi affiancati non ci stanno: il pannello sforava
   la finestra e faceva comparire lo scorrimento orizzontale. Si mostra un
   mese solo.
   La larghezza dello scatolone e' scritta inline dallo script, quindi qui
   serve !important: e' l'unico modo di scavalcarla. */
@media (max-width:700px){
	.datepick-popup{
		box-sizing:border-box;
		max-width:calc(100vw - 24px);
		padding:14px;
	}
	.datepick-popup .datepick{ width:auto !important; }
	.datepick-popup .mphb-datepick-popup .datepick-month{
		float:none;
		width:100%;
		padding:0;
	}
	.datepick-popup .mphb-datepick-popup .datepick-month.last{ display:none; }
}

@media (prefers-reduced-motion: reduce){
	.datepick-popup .datepick-cmd-prev,
	.datepick-popup .datepick-cmd-next,
	.datepick-popup .mphb-datepick-popup .datepick-month td a{ transition:none; }
}

/* --- L'ombra sotto il contenuto, prima del footer ---
   Ne esistevano due sovrapposte: una generata dal Personalizza
   (".entry.single-entry", ora spenta dall'opzione nativa boxed_shadow) e una
   nel foglio del tema (".entry" in content.min.css, sfocatura 25px). La
   seconda va tolta qui: nessuna opzione la governa.
   Il prefisso body porta la specificita' a (0,1,1) e batte il tema, che vale
   (0,1,0), senza ricorrere a !important. */
body .entry{
	box-shadow:none;
	/* Il tema arrotonda il riquadro del contenuto di 0.25rem: stona con la
	   scelta di squadrare tutto il resto (--bh-radius: 0). */
	border-radius:var(--bh-radius);
}

/* ==========================================================================
   Footer scuro
   Lo sfondo lo mettono le opzioni native (footer_middle_background e
   footer_bottom_background). Qui i colori del testo, che nel tema seguono
   opzioni separate per riga e per elemento: farlo in un punto solo evita di
   inseguirne sei.
   ========================================================================== */
#colophon{
	--bh-footer-testo:#e8ebee;
	--bh-footer-tenue:#98a2ac;
	color:var(--bh-footer-testo);
}
/* Il footer si allinea alla stessa colonna del resto del sito: stessa
   formula usata per la navbar e per la testata delle pagine. */
#colophon .site-container{
	max-width:calc(min(var(--global-content-width), var(--global-vw, 100vw)) - var(--bh-content-inset));
	margin-inline:auto;
	padding-inline:0;
}
/* Il colore scuro Kadence lo mette su .site-footer-row-container-inner, non
   sul contenitore esterno. Padding e filo vanno quindi messi li' dentro:
   sull'esterno restavano fuori dal colore e fra le due fasce si apriva una
   striscia bianca di 85px. */
#colophon .site-middle-footer-wrap .site-footer-row-container-inner{ padding-block:64px; }
#colophon .site-bottom-footer-wrap .site-footer-row-container-inner{
	padding-block:20px;
	border-top:1px solid rgba(255,255,255,.10);
}

#colophon p{
	margin:0;
	font-size:var(--bh-fs-card-small);
	line-height:1.65;
	color:var(--bh-footer-tenue);
}
/* Con quattro colonne tutto e' allineato a sinistra: la navigazione non e'
   piu' l'ultima e allinearla a destra la staccherebbe dal suo titolo. */
#colophon .footer-navigation{ justify-content:flex-start; }
#colophon .footer-navigation ul{
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:flex-start;
	margin:0;
	padding:0;
	list-style:none;
}

/* La prima colonna contiene due elementi separati, il titolo e il menu:
   la sezione li dispone in riga, qui vanno incolonnati. */
#colophon .site-footer-middle-section-1{
	flex-direction:column;
	align-items:flex-start;
}
/* Kadence distanzia gli elementi affiancati di una sezione con un margine
   sinistro sul secondo. Impilati, quel margine diventa un rientro: il menu
   partiva 30px piu' a destra del suo titolo. */
#colophon .site-footer-middle-section-1 .footer-widget-area{ margin-left:0; }

/* Titolo di colonna, uguale per tutte e tre le colonne che ne hanno uno. */
#colophon .bh-footer__titolo{
	margin:0 0 14px;
	font-size:var(--bh-fs-card-small);
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--bh-footer-testo);
}
/* Elenco delle pagine informative: stessa resa delle voci di menu. */
#colophon .bh-footer__link{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:10px;
}
#colophon .bh-footer__link li{ margin:0; }
/* I contatti sono righe di testo, non paragrafi distanziati. */
#colophon .footer-widget-area p + p{ margin-top:8px; }
/* Email e telefono sono link come quelli delle altre colonne: stesso corpo,
   stessa interlinea e stesso passo di 10px, non la resa ridotta dei
   paragrafi. Il <br> del blocco lo sostituisce il gap. */
#colophon .bh-footer__recapiti{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
	font-size:inherit;
	line-height:inherit;
}
#colophon .bh-footer__recapiti br{ display:none; }
/* Kadence da' ai <li> un'interlinea piu' alta: le voci di Informazioni
   risultavano piu' distanziate di quelle di Naviga. */
#colophon .bh-footer__link li{ line-height:inherit; }
#colophon .footer-navigation li{ margin:0; }
#colophon a{
	color:var(--bh-footer-testo);
	text-decoration:none;
	transition:color .15s ease;
}
#colophon a:hover,
#colophon a:focus-visible{ color:#fff; text-decoration:underline; }

/* --- Riga in fondo: a sinistra marchio e social, a destra il copyright --- */

/* Anche qui i due elementi della colonna vanno incolonnati, e senza il
   rientro che Kadence mette al secondo elemento affiancato. */
#colophon .site-footer-bottom-section-1{
	flex-direction:column;
	align-items:flex-start;
	gap:16px;
}
#colophon .site-footer-bottom-section-1 .footer-widget-area,
#colophon .site-footer-bottom-section-1 .footer-social-wrap{ margin-left:0; }

/* Il marchio e' lo stesso disegno dell'intestazione, che si colora da solo
   seguendo currentColor: qui il fondo e' scuro, quindi va chiaro. */
#colophon .bh-footer__logo{
	display:inline-block;
	color:var(--bh-footer-testo);
	line-height:0;
}
#colophon .bh-footer__logo:hover,
#colophon .bh-footer__logo:focus-visible{ color:#fff; text-decoration:none; }
#colophon .bh-footer__logo svg{
	display:block;
	width:96px;
	height:auto;
}

#colophon .site-info p{ color:var(--bh-footer-tenue); }

/* L'indirizzo della sede e' un blocco di righe brevi, non un paragrafo:
   niente cappello di larghezza, interlinea uguale alle altre colonne. */
#colophon .bh-footer__sede,
#colophon .bh-footer__recapiti{ max-width:none; }
#colophon .bh-footer__sede strong{ color:var(--bh-footer-testo); }

@media (max-width:781px){
	/* Impilate, le due meta' della fascia bassa stanno meglio centrate. */
	#colophon .site-footer-bottom-section-1{ align-items:center; }
}

@media (max-width:781px){
	#colophon .site-middle-footer-wrap .site-footer-row-container-inner{ padding-block:44px; }
	#colophon .footer-widget-area .widget{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
	#colophon a{ transition:none; }
}

/* ==========================================================================
   Pagina di conferma prenotazione (checkout)
   Markup del plugin: il form ha sette blocchi di primo livello. Li disponiamo
   su due colonne senza aggiungere contenitori — dettagli e dati a sinistra,
   riepilogo economico e bottone a destra.
   ========================================================================== */
.mphb_sc_checkout-form{
	display:grid;
	grid-template-columns:minmax(0,1fr) 380px;
	column-gap:56px;
	align-items:start;
}
/* I campi nascosti occuperebbero una riga della griglia. */
.mphb_sc_checkout-form input[type="hidden"]{ display:none; }

.mphb-booking-details{ grid-column:1; grid-row:1; }
.mphb-customer-details{ grid-column:1; grid-row:2; }

/* Il plugin stacca di 4em ogni sezione dopo la prima, con una regola sul
   figlio diretto di .mphb_sc_checkout-form limitata da :not(:first-of-type).
   Con la prima sezione nascosta, quei 74px finivano in cima ai dati del
   cliente e li disallineavano dal riquadro. Gli spazi qui li governa la
   griglia, quindi si azzera.
   Stessa specificita' della regola del plugin, (0,3,0): vince perche' questo
   foglio viene dopo. */
.entry-content .mphb_sc_checkout-form .mphb-checkout-section{ margin-top:0; }
/* Contenitore creato da bibihouse-checkout.php: tiene insieme tabella prezzi,
   totale, errori e bottone, che nel markup del plugin sono separati. */
.bh-checkout__riepilogo{
	grid-column:2;
	grid-row:1 / span 2;
	position:sticky;
	/* Stessa distanza dalla navbar del riquadro della scheda alloggio. */
	top:calc(var(--wp-admin--admin-bar--height, 0px) + 80px + 48px);
}

/* --- Titoli di sezione, stessa scala del resto del sito --- */
.entry-content .mphb-booking-details-title,
.entry-content .mphb-customer-details-title,
.entry-content .mphb-price-breakdown-title{
	font-size:var(--bh-fs-h3);
	font-weight:700;
	letter-spacing:-.01em;
	margin:0 0 16px;
}
.entry-content .mphb-room-number{
	font-size:var(--bh-fs-card-small);
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--bh-muted);
	margin:24px 0 12px;
}

/* --- Date del soggiorno --- */
.entry-content .mphb-check-in-date,
.entry-content .mphb-check-out-date{
	margin:0 0 6px;
	font-size:var(--bh-fs-body);
	color:var(--bh-ink);
}
.entry-content .mphb-room-type-title{
	margin:0 0 16px;
	font-size:var(--bh-fs-body);
	font-weight:600;
}

/* --- Campi: stessa resa del modulo nella scheda alloggio --- */
.mphb_sc_checkout-form label{
	display:block;
	margin:0 0 4px;
	font-size:.7rem;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--bh-ink);
}
.mphb_sc_checkout-form br{ display:none; }
.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{
	width:100%;
	padding:10px 14px;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
	font:inherit;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-ink);
}
.mphb_sc_checkout-form textarea{ min-height:96px; resize:vertical; }
.mphb_sc_checkout-form input:focus,
.mphb_sc_checkout-form select:focus,
.mphb_sc_checkout-form textarea:focus{
	outline:none;
	border-color:var(--bh-brand);
	box-shadow:0 0 0 1px var(--bh-brand);
}
/* Dati del cliente su due colonne: nome e cognome sulla stessa riga, email e
   telefono sulla successiva; paese e note a tutta larghezza.
   Le righe sono esplicite perche' il markup e' una sequenza piatta di <p>. */
.mphb-customer-details{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}
.entry-content .mphb-customer-details-title{ grid-column:1 / -1; grid-row:1; }
.entry-content .mphb-customer-details .mphb-required-fields-tip{ grid-column:1 / -1; grid-row:2; }
.entry-content .mphb-customer-name{ grid-column:1; grid-row:3; }
.entry-content .mphb-customer-last-name{ grid-column:2; grid-row:3; }
.entry-content .mphb-customer-email{ grid-column:1; grid-row:4; }
.entry-content .mphb-customer-phone{ grid-column:2; grid-row:4; }
.entry-content .mphb-customer-country{ grid-column:1 / -1; grid-row:5; }
.entry-content .mphb-customer-note{ grid-column:1 / -1; grid-row:6; }

/* La spaziatura la da' il gap della griglia: i margini dei paragrafi la
   raddoppierebbero. */
.entry-content .mphb-customer-details p{ margin:0; }
.entry-content .mphb-adults-chooser,
.entry-content .mphb-children-chooser{ margin:0; }
.entry-content .mphb-required-fields-tip{
	margin:0 0 20px;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}

/* --- Riepilogo: un riquadro unico, sul modello del riferimento ---
   Nome dell'alloggio in testa, poi date, ospiti, dettaglio del prezzo e
   totale, separati da filetti. Il contenitore lo costruisce
   bibihouse-checkout.php spostandoci dentro i pezzi del plugin. */
.bh-checkout__riepilogo{
	/* Unica misura per tutti gli stacchi dai filetti: cambiandola qui, il
	   riquadro resta uniforme dall'alto in basso. */
	--bh-riep-gap:16px;
	padding:24px;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
}
.bh-riepilogo__testa{
	display:flex;
	align-items:center;
	gap:14px;
	padding-bottom:var(--bh-riep-gap);
}
.bh-riepilogo__foto{
	flex:0 0 auto;
	width:64px;
	height:64px;
	object-fit:cover;
	border-radius:var(--bh-media-radius);
}
.bh-riepilogo__testo{ min-width:0; }
.entry-content .bh-riepilogo__titolo{
	margin:0;
	font-size:var(--bh-fs-h3);
	font-weight:700;
	letter-spacing:-.01em;
}
/* Indirizzo sotto il nome, stessa resa che ha nella scheda e nella card. */
.entry-content .bh-riepilogo__addr{
	display:flex;
	align-items:flex-start;
	gap:.4rem;
	margin:5px 0 0;
	font-size:.8rem;
	line-height:1.4;
	color:var(--bh-muted);
}
/* L'icona e' in em: rimpicciolisce insieme al testo. */
.bh-riepilogo__addr svg{
	flex:0 0 auto;
	width:1em;
	height:1em;
	margin-top:.18em;
	stroke-width:1.75;
}

.bh-riepilogo__riga{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	padding:var(--bh-riep-gap) 0;
	border-top:1px solid var(--bh-line);
}
.bh-riepilogo__etichetta{
	flex:0 0 auto;
	font-size:var(--bh-fs-card-small);
	font-weight:700;
	color:var(--bh-ink);
}
.bh-riepilogo__valore{
	font-size:var(--bh-fs-card-small);
	color:var(--bh-ink);
}

/* Ospiti: due menu affiancati, etichetta piccola sopra ciascuno. */
.bh-riepilogo__riga--ospiti{ align-items:center; }
.bh-riepilogo__ospiti{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	flex:1 1 auto;
	min-width:0;
	max-width:220px;
}
.entry-content .bh-riepilogo__ospiti p{ margin:0; }
.bh-riepilogo__ospiti label{
	font-size:.65rem !important;
	margin-bottom:2px !important;
	color:var(--bh-muted) !important;
}
.bh-riepilogo__ospiti select{ padding:8px 10px !important; }

/* --- Dettaglio del prezzo --- */
.mphb-room-price-breakdown-wrapper{
	padding:var(--bh-riep-gap) 0;
	border-top:1px solid var(--bh-line);
}
.entry-content .mphb-price-breakdown-title{
	font-size:var(--bh-fs-card-small);
	font-weight:700;
	margin:0 0 8px;
}
.entry-content .mphb-price-breakdown{
	width:100%;
	border-collapse:collapse;
	font-size:var(--bh-fs-card-small);
}
.entry-content .mphb-price-breakdown th,
.entry-content .mphb-price-breakdown td{
	padding:6px 0;
	border:0;
	text-align:left;
	vertical-align:top;
	font-weight:400;
	color:var(--bh-muted);
}
.entry-content .mphb-price-breakdown .mphb-table-price-column{
	text-align:right;
	white-space:nowrap;
	color:var(--bh-ink);
	font-variant-numeric:tabular-nums;
}

/* Della tabella del plugin si mostrano solo le righe che la nostra riga non
   riassume: tasse, commissioni, sconti. Le altre — voce dell'alloggio,
   conteggio ospiti, elenco delle notti, subtotali — sparirebbero comunque
   ripetute. */
.entry-content .mphb-price-breakdown{
	width:100%;
	border-collapse:collapse;
	margin-top:6px;
}
.entry-content .mphb-price-breakdown .mphb-price-breakdown-booking,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-adults,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-children,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-nights,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-dates,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-date,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-dates-subtotal,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-accommodation-total,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-subtotal,
.entry-content .mphb-price-breakdown .mphb-price-breakdown-total{ display:none !important; }

/* Delle tasse si mostra solo la voce singola: il plugin aggiunge anche una
   riga di intestazione, un totale di categoria e un riepilogo complessivo —
   quattro righe per una tassa sola, e una non tradotta. Il totale generale
   lo dice gia' la riga "Prezzo". */
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-accommodation-tax,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-service,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-service-tax,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fee-tax,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fee{
	display:table-row !important;
}
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-accommodation-taxes,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-accommodation-taxes-total,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-service-taxes,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-service-taxes-total,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-services-headers,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-services-subtotal,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-services-discount,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fee-taxes,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fee-taxes-total,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fees,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fees-subtotal,
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-fees-total,
.entry-content .mphb-price-breakdown tr.mphb-tax-info-total{
	display:none !important;
}

/* Le righe superstiti (tasse, commissioni) devono stare nella stessa
   griglia verticale delle righe scritte da noi: meta' del passo come
   padding della cella, meta' come margine della tabella, cosi' fra una
   riga e l'altra e fra la tabella e la riga "notti" l'aria e' la stessa. */
.entry-content .mphb-room-price-breakdown-wrapper table.mphb-price-breakdown{
	margin:0;
	width:100%;
}
/* Tutto il passo sta sopra la riga, niente sotto: senza tasse la tabella
   resta alta zero e non lascia aria di troppo prima di "Prezzo". */
.entry-content .mphb-price-breakdown tr td{
	padding:var(--bh-riep-gap) 0 0;
	border:0;
}
.entry-content .mphb-price-breakdown tr td:last-child{
	text-align:right;
	white-space:nowrap;
}

/* La riga di un servizio ha tre celle: nome, dettaglio, importo. Le altre
   righe ne hanno due, quindi il dettaglio va accostato al nome invece di
   stare in una colonna sua, altrimenti l'importo si sposterebbe rispetto a
   quello delle altre righe. */
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-service td.mphb-price-breakdown-service-name{
	width:1%;
	white-space:nowrap;
	padding-right:.4em;
}
.entry-content .mphb-price-breakdown tr.mphb-price-breakdown-service td.mphb-price-breakdown-service-details{
	color:var(--bh-muted);
}


/* "3 notti a 175 €" a sinistra, totale a destra. La compone lo script in
   bibihouse-checkout.php leggendo la tabella. */
.entry-content .bh-riepilogo__notti{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	margin:0;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}
.bh-riepilogo__notti-prezzo{
	color:var(--bh-ink);
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

/* --- Totale: etichetta a sinistra, importo a destra, come le altre righe ---
   Il <p> ha un solo figlio, : e' quello a dover diventare la riga,
   altrimenti etichetta e importo restano incollati a sinistra. */
.entry-content .mphb-total-price{
	margin:0;
	padding:var(--bh-riep-gap) 0 0;
	border-top:1px solid var(--bh-line);
}
.mphb-total-price output{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	width:100%;
}
.mphb-total-price .mphb-total-price-field{
	font-size:var(--bh-fs-card-price);
	font-weight:700;
	color:#1f8f4e;
	white-space:nowrap;
}

/* Unico stacco piu' ampio del passo del riquadro: qui non c'e' un filetto a
   separare, e il bottone e' l'azione finale — va staccato dai dati.
   Il prefisso .entry-content serve: il contenitore e' un <p>, e Kadence
   azzera il margine dei paragrafi con ".single-content p", che vale (0,1,1)
   e batterebbe la sola classe. */
.entry-content .mphb_sc_checkout-submit-wrapper{ margin:calc(var(--bh-riep-gap) * 1.75) 0 0; }
.mphb_sc_checkout-submit-wrapper input[type="submit"]{
	width:100%;
	padding:.9em 1em;
	border:0;
	border-radius:var(--bh-radius);
	background:var(--bh-brand);
	color:#fff;
	font:inherit;
	font-size:var(--bh-fs-card-small);
	font-weight:600;
	cursor:pointer;
	transition:background-color .18s ease;
}
.mphb_sc_checkout-submit-wrapper input[type="submit"]:hover,
.mphb_sc_checkout-submit-wrapper input[type="submit"]:focus-visible{ background:var(--bh-brand-scuro); }

/* Date, ospiti e nome finiscono nel riquadro di riepilogo: nella colonna di
   sinistra sarebbero un doppione e restano nascosti. Si nascondono le
   singole voci e non piu' l'intera sezione, perche' li' dentro il plugin
   mette anche la scelta dei servizi aggiuntivi, che deve restare
   selezionabile.
   Il contenitore dei menu ospiti resta ma e' vuoto: i due menu li sposta
   bibihouse-checkout.php dentro il riquadro. */
.mphb-booking-details .mphb-booking-details-title,
.mphb-booking-details .mphb-check-in-date,
.mphb-booking-details .mphb-check-out-date,
.mphb-booking-details .mphb-room-number,
.mphb-booking-details .mphb-room-type-title,
.mphb-booking-details .mphb_sc_checkout-guests-chooser{
	display:none;
}

/* --- Servizi aggiuntivi: riquadri selezionabili --- */
.entry-content .mphb-services-details-title{
	font-size:var(--bh-fs-h3);
	font-weight:700;
	letter-spacing:-.01em;
	margin:0 0 16px;
}

/* Stacco fra i servizi e "Le tue informazioni". Sta qui dentro e non come
   distanza fra le righe della griglia del modulo: senza servizi la sezione
   di sinistra e' alta zero, e una distanza sulla griglia lascerebbe comunque
   un vuoto in cima ai dati del cliente, che devono restare allineati al
   riquadro di riepilogo.
   Padding e non margine: il margine dell'ultimo figlio collasserebbe fuori
   dai contenitori del plugin. */
.entry-content .mphb-services-details{ padding-bottom:56px; }

/* Due colonne fisse, non elastiche: con auto-fit un servizio solo si
   prenderebbe tutta la riga e leggerebbe come un banner invece che come una
   scelta fra opzioni. */
.entry-content .bh-servizi{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px;
}
.entry-content .bh-servizi .bh-servizio{ margin:0; min-width:0; }

/* Il riquadro e' l'etichetta stessa, che contiene la casella: cliccare in un
   punto qualsiasi accende e spegne il servizio senza JavaScript, e la
   tastiera continua a funzionare da sola.
   Le regole generali del modulo mettono le etichette a blocco, maiuscolette
   e spaziate: qui vanno riportate a testo normale. */
.mphb_sc_checkout-form .bh-servizio__box{
	display:flex;
	align-items:center;
	/* Stessa misura del rientro laterale: cosi' l'aria fra bordo e icona e
	   quella fra icona e testo sono la stessa, e l'icona non risulta
	   appoggiata a una delle due. */
	gap:var(--bh-card-pad-x);
	margin:0;
	padding:16px var(--bh-card-pad-x);
	border:1px solid var(--bh-line);
	border-radius:var(--bh-radius);
	background:#fff;
	font-size:var(--bh-fs-body);
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
	color:var(--bh-ink);
	cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease;
}
.mphb_sc_checkout-form .bh-servizio__box:hover{ border-color:var(--bh-brand); }

/* Servizio attivo: bordo del marchio e fondo appena velato dello stesso blu. */
.mphb_sc_checkout-form .bh-servizio__box:has(input:checked){
	border-color:var(--bh-brand);
	background:var(--bh-brand-velo);
}
/* Il contorno da tastiera sta sul riquadro, non sulla sola casella: e' il
   riquadro l'elemento che si aziona. */
.mphb_sc_checkout-form .bh-servizio__box:has(input:focus-visible){
	outline:2px solid var(--bh-brand);
	outline-offset:2px;
}

.bh-servizio__icona{
	display:flex;
	flex:0 0 auto;
	order:1;
}
/* Un filo piu' grande dell'icona dei dettagli: qui il riquadro e' piu' alto
   e ha una sola riga di contenuto accanto. */
.bh-servizio__icona svg{
	width:2rem;
	height:2rem;
	color:var(--bh-muted);
	stroke-width:1.5;
}
.mphb_sc_checkout-form .bh-servizio__box:has(input:checked) .bh-servizio__icona svg{
	color:var(--bh-brand);
}

.bh-servizio__testo{
	order:2;
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.bh-servizio__nome{ font-weight:600; line-height:1.3; }
.entry-content .bh-servizio__prezzo{
	font-style:normal;
	font-size:var(--bh-fs-card-small);
	color:var(--bh-muted);
}

/* La casella va in fondo alla riga, dopo icona e testo. */
.mphb_sc_checkout-form .bh-servizio__box input[type="checkbox"]{
	order:3;
	flex:0 0 auto;
	margin:0;
	width:18px;
	height:18px;
	accent-color:var(--bh-brand);
	cursor:pointer;
}

/* Quantita' e numero ospiti sono campi brevi: la regola generale del modulo
   li porterebbe a tutta larghezza. */
.mphb_sc_checkout-form .mphb_sc_checkout-service-quantity,
.mphb_sc_checkout-form .mphb_sc_checkout-service-adults{
	width:auto;
	min-width:80px;
}

@media (max-width:600px){
	/* Due riquadri affiancati su schermo stretto diventano illeggibili. */
	.entry-content .bh-servizi{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:900px){
	/* Sotto i 900px la colonna laterale non ha spazio: tutto in colonna,
	   col riepilogo dopo i dati del cliente. */
	.mphb_sc_checkout-form{ grid-template-columns:minmax(0,1fr); }
	.mphb-booking-details{ grid-column:1; grid-row:1; }
	.mphb-customer-details{ grid-column:1; grid-row:2; }
	/* Sotto i 900px i campi affiancati diventerebbero troppo stretti. */
	.mphb-customer-details{ grid-template-columns:minmax(0,1fr); }
	.entry-content .mphb-customer-name,
	.entry-content .mphb-customer-last-name,
	.entry-content .mphb-customer-email,
	.entry-content .mphb-customer-phone,
	.entry-content .mphb-customer-country,
	.entry-content .mphb-customer-note{ grid-column:1; grid-row:auto; }
	.entry-content .mphb-customer-details-title,
	.entry-content .mphb-customer-details .mphb-required-fields-tip{ grid-column:1; grid-row:auto; }
	.bh-checkout__riepilogo{
		grid-column:1;
		grid-row:3;
		position:static;
		margin-top:40px;
	}
}

@media (prefers-reduced-motion: reduce){
	.mphb_sc_checkout-submit-wrapper input[type="submit"]{ transition:none; }
}

/* --- Pagina di esito: richiesta di prenotazione inviata ---
   Una colonna stretta al centro: prima il riquadro dell'immagine, sotto il
   riepilogo che scrive il plugin. Tutto centrato, compresa la lista dei
   dettagli, che di suo e' allineata a sinistra con il rientro dell'elenco. */
.entry-content .bh-esito{
	max-width:560px;
	margin-inline:auto;
	text-align:center;
}

/* Riquadro dell'illustrazione. Quadrato: le quattro pagine di esito devono
   occupare lo stesso ingombro anche con disegni di proporzioni diverse. */
.entry-content .bh-esito__media{
	width:min(280px, 70%);
	aspect-ratio:1;
	margin:0 auto 32px;
	border-radius:var(--bh-media-radius);
	overflow:hidden;
}

/* Finche' il disegno non c'e', il riquadro resta un rettangolo nella tinta
   chiara: si legge come uno spazio previsto e non come un'immagine rotta.
   Con l'illustrazione dentro la tinta sparisce, altrimenti il disegno
   sembrerebbe incollato su una targa. */
.entry-content .bh-esito__media:empty{
	background:var(--bh-tint);
}
.entry-content .bh-esito__media img,
.entry-content .bh-esito__media svg{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
}

.entry-content .bh-esito .mphb-booking-details-title{
	margin:0 0 16px;
}

/* L'elenco dei dettagli e' gia' una riga flex nel CSS del plugin (pallini e
   rientro tolti li'): qui serve solo centrarla. Le voci non si allargano
   piu' a riempire la riga, altrimenti "centrato" non si vedrebbe. */
.entry-content .bh-esito .mphb-booking-details{
	justify-content:center;
}
/* Via il filetto tratteggiato del plugin: separa le voci di una riga, ma
   quando l'elenco va a capo resta appeso in fondo alla riga precedente.
   Al suo posto una spaziatura uniforme, uguale fra colonne e fra righe. */
.entry-content .bh-esito .mphb-booking-details{
	gap:16px 32px;
}
.entry-content .bh-esito .mphb-booking-details li{
	flex-grow:0;
	margin:0;
	padding-right:0;
	border-right:0;
}

.entry-content .bh-esito .accommodations{
	margin-top:16px;
}

/* --- Resoconto della prenotazione appena inviata ---
   Scheda stretta sotto il messaggio. Le righe restano allineate a sinistra
   e a destra anche se il blocco che le contiene e' centrato: etichetta e
   dato incolonnati si leggono, centrati no. */
.entry-content .bh-resoconto{
	max-width:420px;
	margin:32px auto 0;
	padding:20px 24px;
	border:1px solid var(--bh-line);
	border-radius:var(--bh-media-radius);
	text-align:left;
}

.entry-content .bh-resoconto__numero{
	margin:0 0 16px;
	padding-bottom:16px;
	border-bottom:1px solid var(--bh-line);
	font-weight:700;
	text-align:center;
}

.entry-content .bh-resoconto__lista{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:var(--bh-riep-gap);
}

.entry-content .bh-resoconto__riga{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	margin:0;
}

.entry-content .bh-resoconto__voce{ color:var(--bh-muted); }
.entry-content .bh-resoconto__dato{ font-weight:700; text-align:right; }

/* Icone social senza collegamento (bibihouse-footer.php le stampa come
   <span>): nessun cambio di colore al passaggio, nessun cursore da link.
   Kadence da' misure e allineamento solo ad a.social-button: qui si
   riportano uguali, cosi' le icone non cambiano aspetto. */
#colophon .bh-social-inattivo{
	width:2em;
	height:2em;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	cursor:default;
	pointer-events:none;
}