/**
 * Componenti visivi.
 *
 * Prefisso c-, metodologia BEM. Nessun componente contiene valori scritti a
 * mano: solo token.
 */

/* ---------------------------------------------------------------------------
 * Skip link
 *
 * Nascosto finche non riceve il focus (la classe .screen-reader-text lo toglie
 * dal flusso visivo ma non dalle tecnologie assistive).
 * ------------------------------------------------------------------------- */
.c-skip-link:focus {
	z-index: 100;
	top: var(--easybed-space-2);
	left: var(--easybed-space-2);
	padding: var(--easybed-space-2) var(--easybed-space-4);
	color: var(--easybed-color-accent-contrast);
	background-color: var(--easybed-color-text);
	border-radius: var(--easybed-radius-m);
}

/*
 * Il footer sta interamente in assets/css/footer.css.
 *
 * Le regole che stavano qui venivano dalla base del tema e descrivevano un
 * footer a riga singola: .c-site-footer__inner era display:flex con
 * justify-content:space-between, quindi le due aree del footer attuale
 * finivano affiancate invece che impilate, e meta pannello restava vuoto.
 * Rimosse invece che sovrascritte: erano codice morto che dettava ancora legge.
 */

/* ---------------------------------------------------------------------------
 * Pulsante
 * ------------------------------------------------------------------------- */
.c-button {
	display: inline-block;
	padding: var(--easybed-space-3) var(--easybed-space-5);
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-accent-contrast);
	text-decoration: none;
	background-color: var(--easybed-color-accent);
	border: var(--easybed-border-width) solid transparent;
	border-radius: var(--easybed-radius-m);
	transition: background-color var(--easybed-transition);
}

.c-button:hover {
	color: var(--easybed-color-accent-contrast);
	background-color: var(--easybed-color-accent-hover);
}

.c-button--secondary {
	color: var(--easybed-color-accent);
	background-color: transparent;
	border-color: var(--easybed-color-accent);
}

/* ---------------------------------------------------------------------------
 * Intestazione di pagina e di archivio
 * ------------------------------------------------------------------------- */
.c-page-header {
	margin-block-end: var(--easybed-space-6);
}

.c-page-header__description {
	margin-block-start: var(--easybed-space-3);
	color: var(--easybed-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Contenuto singolo
 * ------------------------------------------------------------------------- */
.c-entry {
	max-width: var(--easybed-content-width);
}

.c-entry__header {
	margin-block-end: var(--easybed-space-5);
}

.c-entry__media {
	margin-block-end: var(--easybed-space-5);
}

.c-entry-meta {
	margin-block-start: var(--easybed-space-2);
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------- */
.c-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--easybed-color-surface);
	border: var(--easybed-border-width) solid var(--easybed-color-border);
	border-radius: var(--easybed-radius-m);
}

.c-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.c-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--easybed-space-2);
	padding: var(--easybed-space-4);
}

.c-card__title {
	font-size: var(--easybed-font-size-m);
}

.c-card__title a {
	color: var(--easybed-color-text);
	text-decoration: none;
}

.c-card__title a:hover {
	text-decoration: underline;
}

.c-card__excerpt {
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.c-card__excerpt p:last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * Stato vuoto
 * ------------------------------------------------------------------------- */
.c-empty-state {
	padding: var(--easybed-space-6);
	text-align: center;
	color: var(--easybed-color-text-muted);
	background-color: var(--easybed-color-surface-alt);
	border-radius: var(--easybed-radius-m);
}

/* ---------------------------------------------------------------------------
 * Navigazione tra contenuti e paginazione
 * ------------------------------------------------------------------------- */
.c-post-nav {
	margin-block-start: var(--easybed-space-7);
	padding-block-start: var(--easybed-space-5);
	border-top: var(--easybed-border-width) solid var(--easybed-color-border);
}

.c-post-nav__label {
	display: block;
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.pagination {
	margin-block-start: var(--easybed-space-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--easybed-space-3);
}

.pagination .page-numbers {
	padding: var(--easybed-space-2) var(--easybed-space-3);
	text-decoration: none;
	border: var(--easybed-border-width) solid var(--easybed-color-border);
	border-radius: var(--easybed-radius-m);
}

.pagination .page-numbers.current {
	color: var(--easybed-color-accent-contrast);
	background-color: var(--easybed-color-accent);
	border-color: var(--easybed-color-accent);
}

/* ---------------------------------------------------------------------------
 * Form di ricerca
 * ------------------------------------------------------------------------- */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--easybed-space-2);
}

.search-form .search-field {
	flex: 1;
	min-width: 12rem;
	padding: var(--easybed-space-2) var(--easybed-space-3);
	border: var(--easybed-border-width) solid var(--easybed-color-border);
	border-radius: var(--easybed-radius-m);
}

.search-form .search-submit {
	padding: var(--easybed-space-2) var(--easybed-space-4);
	color: var(--easybed-color-accent-contrast);
	background-color: var(--easybed-color-accent);
	border-radius: var(--easybed-radius-m);
}

/* ===========================================================================
 * Componenti della homepage Easybed
 * ======================================================================== */

/* --- Sezione ------------------------------------------------------------ */

.c-section {
	padding-block: var(--easybed-section-gap);
}

.c-section--alt {
	background-color: var(--easybed-color-surface-alt);
}

.c-section__title {
	margin: 0 0 var(--easybed-section-heading-gap);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-xl);
	font-weight: var(--easybed-font-weight-semibold);
	line-height: 1.3;
	color: var(--easybed-color-navy);
	text-align: center;
	text-wrap: balance;
}

.c-section__title--left {
	text-align: left;
}

/*
 * Filetto corallo sotto il titolo di sezione. Puramente decorativo: non
 * sostituisce alcuna informazione e resta fuori dall'albero di accessibilita.
 */
.c-section__title--underlined::after {
	content: "";
	display: block;
	inline-size: 3.5rem;
	block-size: 3px;
	margin: var(--easybed-space-4) auto 0;
	border-radius: 3px;
	background-color: var(--easybed-color-accent);
}

/*
 * Quando il titolo introduce un proprio paragrafo, i due appartengono allo
 * stesso blocco: la distanza di sezione va misurata dal paragrafo al
 * contenuto, non infilata anche fra titolo e paragrafo.
 *
 * Se :has() non e supportato resta il margine pieno: piu arioso, mai rotto.
 */
.c-section__title:has(+ .c-section__text) {
	margin-block-end: var(--easybed-space-4);
}

.c-section__text {
	margin: 0 0 var(--easybed-section-heading-gap);
	color: var(--easybed-color-text-muted);
}

.c-section__text--center {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.c-section__note,
.c-section__actions {
	margin-block: var(--easybed-space-5) 0;
	text-align: center;
}

.c-section__note {
	color: var(--easybed-color-text-muted);
	font-size: var(--easybed-font-size-s);
}

.c-eyebrow {
	margin: 0 0 var(--easybed-space-3);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	color: var(--easybed-color-accent);
}

/* --- Pulsanti ----------------------------------------------------------- */

.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--easybed-space-2);
	padding: var(--easybed-space-3) var(--easybed-space-6);
	border: 2px solid transparent;
	border-radius: var(--easybed-radius-pill);
	font-family: var(--easybed-font-body);
	font-size: var(--easybed-font-size-base);
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--easybed-transition), border-color var(--easybed-transition), color var(--easybed-transition);
}

.c-button--primary {
	background-color: var(--easybed-color-accent);
	color: var(--easybed-color-accent-contrast);
}

.c-button--primary:hover,
.c-button--primary:focus-visible {
	background-color: var(--easybed-color-accent-hover);
	color: var(--easybed-color-accent-contrast);
}

.c-button--ghost {
	background-color: transparent;
	color: var(--easybed-color-navy);
}

.c-button--ghost:hover,
.c-button--ghost:focus-visible {
	background-color: var(--easybed-color-surface-alt);
}

.c-button--outline {
	background-color: transparent;
	border-color: var(--easybed-color-navy);
	color: var(--easybed-color-navy);
}

.c-button--outline:hover,
.c-button--outline:focus-visible {
	background-color: var(--easybed-color-navy);
	color: var(--easybed-color-navy-contrast);
}

.c-button--lg {
	padding: var(--easybed-space-4) var(--easybed-space-7);
	font-size: var(--easybed-font-size-m);
}

/* --- Icone -------------------------------------------------------------- */

.c-icon {
	inline-size: 1.5em;
	block-size: 1.5em;
	flex: 0 0 auto;
}

/* --- Hero fotografica ----------------------------------------------------
 *
 * L'immagine occupa tutta la sezione; il testo le sta sopra a sinistra. Il
 * gradiente parte opaco a sinistra e si dissolve verso destra: cosi il testo
 * resta leggibile e la parte significativa della fotografia resta visibile.
 * L'header e sovrapposto, quindi la hero riserva in cima il suo spazio.
 * ------------------------------------------------------------------------ */

.c-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 40rem;
	/*
	 * Il contenuto e ancorato in basso, ma il margine inferiore e generoso: e
	 * quello a determinare la quota del titolo. Aumentandolo il blocco sale
	 * senza toccare la struttura ne il titolo preso singolarmente.
	 */
	padding-block: calc(var(--easybed-header-height) + var(--easybed-space-6)) var(--easybed-space-8);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--easybed-color-navy);
	color: var(--easybed-color-navy-contrast);
}

.c-hero__media,
.c-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.c-hero__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 68% center;
}

/*
 * Su mobile il testo copre quasi tutta la larghezza, quindi il velo e
 * verticale: scuro in alto e in basso, piu leggero al centro dove si vede
 * la fotografia.
 */
.c-hero__scrim {
	background:
		linear-gradient(
			180deg,
			rgba(0, 25, 56, 0.78) 0%,
			/*
			 * Sui telefoni il testo occupa quasi tutta la larghezza: la fascia
			 * centrale contiene il paragrafo e non puo scendere sotto questo
			 * valore senza far cadere il contrasto sotto la soglia AA.
			 */
			rgba(0, 25, 56, 0.58) 36%,
			rgba(0, 25, 56, 0.48) 64%,
			rgba(0, 25, 56, 0.68) 100%
		);
}

.c-hero__inner {
	inline-size: 100%;
}

.c-hero__body {
	max-inline-size: 40rem;
}

.c-hero__eyebrow {
	margin: 0 0 var(--easybed-space-4);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	color: var(--easybed-color-sand);
}

.c-hero__title {
	margin: 0 0 var(--easybed-space-5);
	font-family: var(--easybed-font-heading);
	/*
	 * 72px e la misura del riferimento su una finestra da 1280: 5.7vw la
	 * raggiunge esattamente li e la mantiene sopra. Sotto scala in proporzione,
	 * cosi a 1024 il titolo non arriva subito al massimo e non stringe il testo
	 * contro il bordo. Il minimo di 40px tiene il titolo grande sui telefoni.
	 */
	font-size: clamp(2.5rem, 5.7vw, 4.5rem);
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.06;
	letter-spacing: var(--easybed-letter-spacing-tight);
	color: #ffffff;
	text-wrap: balance;
}

.c-hero__text {
	margin: 0 0 var(--easybed-space-7);
	max-inline-size: 34rem;
	font-size: var(--easybed-font-size-m);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

.c-hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-3);
}

/*
 * Sotto la soglia tablet i pulsanti sono a piena larghezza: il padding
 * orizzontale generoso serve solo quando il pulsante si adatta al testo, qui
 * ruberebbe spazio e manderebbe l'etichetta a capo dentro la pillola.
 */
@media (max-width: 47.99em) {
	.c-hero__actions .c-button {
		padding-inline: var(--easybed-space-4);
	}
}

.c-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--easybed-space-3) var(--easybed-space-6);
	margin: var(--easybed-space-7) 0 0;
	padding: 0;
	list-style: none;
}

.c-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--easybed-space-2);
	font-size: 0.8125rem;
	font-weight: var(--easybed-font-weight-semibold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.c-badge__icon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	color: var(--easybed-color-accent-bright);
}

@media (min-width: 48em) {
	/*
	 * Da tablet in su i due pulsanti stanno sulla stessa riga. Il contenitore
	 * del testo e piu stretto della riga dei pulsanti: se restasse limitato,
	 * la seconda CTA andrebbe a capo per una manciata di pixel.
	 */
	.c-hero__actions {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		inline-size: max-content;
		max-inline-size: 100%;
	}

	.c-hero__actions .c-button {
		flex: 0 0 auto;
	}
}

@media (min-width: 64em) {
	/*
	 * Il riferimento tiene la hero a circa 0,61 volte la larghezza della
	 * finestra: e quel rapporto a dare la proporzione, non un'altezza fissa.
	 * Il limite di 100svh evita che su finestre basse la hero superi lo
	 * schermo; il minimo garantisce spazio al contenuto sui monitor stretti.
	 */
	.c-hero {
		min-height: max(38rem, min(61vw, 100svh));
		padding-block-end: 7.5rem;
	}

	/*
	 * Da desktop il velo diventa orizzontale: opaco sotto la colonna di testo,
	 * trasparente sul lato in cui si vede la rete.
	 */
	.c-hero__scrim {
		background:
			linear-gradient(
				90deg,
				rgba(0, 25, 56, 0.82) 0%,
				rgba(0, 25, 56, 0.68) 24%,
				/*
				 * La fascia centrale e dove finisce l'ultima riga del titolo:
				 * qui il velo non puo scendere sotto questo valore senza far
				 * cadere il contrasto del testo bianco sotto la soglia.
				 */
				rgba(0, 25, 56, 0.4) 46%,
				rgba(0, 25, 56, 0.08) 68%,
				rgba(0, 25, 56, 0) 100%
			);
	}

	/*
	 * Da desktop la finestra di ritaglio si sposta verso destra: la persona e
	 * la testata della rete stanno nella parte destra della fotografia e con un
	 * ritaglio centrato verrebbero tagliate dal bordo. Il testo resta comunque
	 * sopra la parete scura.
	 */
	.c-hero__image {
		object-position: 88% center;
	}

	.c-hero__body {
		max-inline-size: 42rem;
	}
}

/* --- Confronto -----------------------------------------------------------
 *
 * Due card affiancate su fondo bianco: a sinistra il modo tradizionale, su
 * crema chiara; a destra Easybed, su navy pieno. Le spunte distinguono i due
 * elenchi anche per forma, non solo per colore: chi non distingue rosso e
 * verde legge comunque una croce e un segno di spunta.
 * ------------------------------------------------------------------------ */

/*
 * Colori campionati direttamente dallo screenshot del riferimento. Sono
 * dichiarati come variabili della sola sezione: la palette globale della hero
 * e delle altre sezioni resta intatta.
 */
#vantaggi {
	--compare-surface: #ffffff;
	background-color: #ffffff;
	--compare-card-light: #faf9f5;
	--compare-card-dark: #15396b;
	--compare-text: #5a5d66;
	--compare-text-on-dark: rgba(255, 255, 255, 0.9);
	--compare-negative: #e9453f;
	--compare-positive: #2f9e78;

	background-color: var(--compare-surface);
}

.c-compare {
	padding: var(--easybed-space-8) var(--easybed-space-7);
	border-radius: var(--easybed-radius-l);
}

.c-compare--before {
	background-color: var(--compare-card-light);
	box-shadow: var(--easybed-shadow-soft);
}

.c-compare--after {
	background-color: var(--compare-card-dark);
	color: var(--compare-text-on-dark);
	box-shadow: var(--easybed-shadow-soft);
}

/* Pastiglia circolare con l'icona, sopra il titolo. */
.c-compare__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: var(--easybed-space-5);
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-surface-alt);
	color: var(--easybed-color-navy);
}

/* Nella card scura il cerchio dell'icona e corallo, come nel riferimento. */
.c-compare--after .c-compare__badge {
	background-color: var(--compare-negative);
	color: #ffffff;
}

.c-compare__title {
	margin: 0 0 var(--easybed-space-5);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-l);
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy);
}

.c-compare--after .c-compare__title {
	color: #ffffff;
}

.c-compare__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--easybed-space-4);
}

.c-compare__item {
	display: flex;
	align-items: flex-start;
	gap: var(--easybed-space-3);
	color: var(--compare-text);
}

.c-compare--after .c-compare__item {
	color: var(--compare-text-on-dark);
}

.c-compare__mark {
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: 0.15rem;
}

.c-compare__mark--no {
	color: var(--compare-negative);
}

.c-compare__mark--yes {
	color: var(--compare-positive);
}

/* --- Passaggi ------------------------------------------------------------
 *
 * Tre card affiancate: immagine ampia in alto, numero corallo, titolo navy,
 * testo sotto. L'immagine ha un rapporto fisso e object-fit cover, cosi le tre
 * card restano della stessa altezza qualunque sia la lunghezza del testo.
 * ------------------------------------------------------------------------ */

.c-step {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--easybed-radius-m);
	background-color: #ffffff;
	border: var(--easybed-border-width) solid var(--easybed-color-border);
	box-shadow: var(--easybed-shadow-soft);
}

.c-step__media {
	order: -1;
	margin: 0;
	background-color: #ffffff;
}

.c-step__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	/*
	 * I soggetti delle tre fotografie approvate stanno al centro: un ritaglio
	 * centrato non taglia mai la persona o la rete.
	 */
	object-fit: cover;
	object-position: center;
}

/*
 * Ritaglio 4:3 su foto quadrate: solo la prima e la terza vengono ricentrate
 * verso l'alto, dove sta il soggetto. La seconda mantiene il ritaglio centrato
 * predefinito: la regola resta locale a queste due immagini.
 */
.c-step__image--focus-1 {
	object-position: center 22%;
}

.c-step__image--focus-3 {
	object-position: center 18%;
}

.c-step__number {
	display: block;
	padding: var(--easybed-space-6) var(--easybed-space-6) 0;
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-l);
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1;
	/* Numeri in beige chiaro, come nella bozza: accompagnano, non gridano. */
	color: var(--easybed-color-sand);
}

.c-step__title {
	margin: var(--easybed-space-3) 0 0;
	padding-inline: var(--easybed-space-6);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-m);
	font-weight: var(--easybed-font-weight-semibold);
	color: var(--easybed-color-navy);
}

.c-step__text {
	margin: var(--easybed-space-2) 0 0;
	padding: 0 var(--easybed-space-6) var(--easybed-space-6);
	color: var(--easybed-color-text-muted);
}

/* Senza testo la card non deve restare senza respiro in fondo. */
.c-step__title:last-child {
	padding-block-end: var(--easybed-space-6);
}

/* --- Schede ------------------------------------------------------------- */

.c-card--feature,
.c-card--size {
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-3);
	padding: var(--easybed-space-6);
	border: var(--easybed-border-width) solid var(--easybed-color-border);
	border-radius: var(--easybed-radius-m);
	background-color: var(--easybed-color-surface-alt);
}

.c-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-surface);
	color: var(--easybed-color-navy-soft);
}

.c-card--feature .c-card__title,
.c-card--size .c-card__title {
	margin: 0;
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-m);
	font-weight: var(--easybed-font-weight-semibold);
	color: var(--easybed-color-navy);
}

.c-card__text {
	margin: 0;
	color: var(--easybed-color-text-muted);
}

/* --- Sezione comfort ----------------------------------------------------
 *
 * "Ingegneria al servizio del comfort" e una fascia navy piena: le quattro
 * schede bianche ci stanno sopra come oggetti staccati. Tutto e circoscritto
 * al modificatore, perche .c-card--feature e .c-card__icon sono condivisi con
 * altre sezioni che restano come sono.
 *
 * I colori vengono dai token gia in uso: nessuna tinta nuova.
 * ---------------------------------------------------------------------- */

.c-section--comfort {
	background-color: var(--easybed-color-navy);
}

.c-section--comfort .c-section__title {
	color: var(--easybed-color-navy-contrast);
}

/*
 * Sul navy la scheda non ha bisogno di bordo: e gia staccata dal fondo.
 * L'ombra resta appena percepibile, come nel riferimento.
 */
.c-section--comfort .c-card--feature {
	block-size: 100%;
	gap: var(--easybed-space-4);
	padding: var(--easybed-space-5);
	border: 0;
	border-radius: var(--easybed-radius-m);
	background-color: var(--easybed-color-surface-alt);
	box-shadow: var(--easybed-shadow-card);
}

/*
 * L'icona sta direttamente sulla scheda, senza pastiglia beige: e il corallo
 * a portare l'accento. Gli SVG usano stroke="currentColor", quindi basta il
 * colore del contenitore e nessun file va toccato.
 *
 * Il corallo pieno su bianco da 3.9:1, sopra la soglia di 3:1 richiesta agli
 * elementi grafici: l'icona resta comunque decorativa, il senso e nel titolo.
 */
.c-section--comfort .c-card__icon {
	inline-size: auto;
	block-size: auto;
	border-radius: 0;
	background-color: transparent;
	color: var(--easybed-color-accent-bright);
	font-size: 2rem;
}

/* --- Chip e avvisi ------------------------------------------------------ */

.c-configs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--easybed-space-2);
	margin-block-end: var(--easybed-space-6);
}

.c-configs__label {
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.c-chip {
	display: inline-block;
	padding: var(--easybed-space-1) var(--easybed-space-4);
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-sand);
	color: var(--easybed-color-navy);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
}

.c-notice {
	margin-block-start: var(--easybed-space-6);
	padding: var(--easybed-space-4) var(--easybed-space-5);
	border-radius: var(--easybed-radius-s);
	background-color: var(--easybed-color-sand);
	color: var(--easybed-color-navy);
	text-align: center;
	font-size: var(--easybed-font-size-s);
}

/* --- Blocco immagine + testo -------------------------------------------- */

.l-split__media {
	border-radius: var(--easybed-radius-xl);
	overflow: hidden;
	box-shadow: var(--easybed-shadow-soft);
}

.c-media-panel__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.c-point-list {
	margin: var(--easybed-space-5) 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--easybed-space-5);
}

.c-point {
	display: flex;
	gap: var(--easybed-space-4);
	align-items: flex-start;
}

.c-point__icon {
	color: var(--easybed-color-accent);
}

.c-point__title {
	margin: 0 0 var(--easybed-space-1);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-base);
	font-weight: var(--easybed-font-weight-semibold);
	color: var(--easybed-color-navy);
}

.c-point__text {
	margin: 0;
	color: var(--easybed-color-text-muted);
}

/* --- FAQ ---------------------------------------------------------------- */

.c-faq__item {
	border-block-end: var(--easybed-border-width) solid var(--easybed-color-border);
}

.c-faq__heading {
	margin: 0;
}

.c-faq__question {
	display: flex;
	inline-size: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--easybed-space-4);
	padding: var(--easybed-space-5) 0;
	border: 0;
	background: none;
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-base);
	font-weight: var(--easybed-font-weight-semibold);
	line-height: 1.4;
	color: var(--easybed-color-navy);
	text-align: start;
	cursor: pointer;
}

.c-faq__chevron {
	transition: transform var(--easybed-transition);
	color: var(--easybed-color-accent);
}

.c-faq__question[aria-expanded="false"] .c-faq__chevron {
	transform: rotate(-90deg);
}

.c-faq__panel[hidden] {
	display: none;
}

.c-faq__answer {
	padding-block-end: var(--easybed-space-5);
	color: var(--easybed-color-text-muted);
}

.c-faq__answer > :first-child {
	margin-block-start: 0;
}

.c-faq__answer > :last-child {
	margin-block-end: 0;
}

/*
 * Alcune risposte contengono un elenco numerato e una dicitura da riportare
 * sulla bolla: queste regole restano dentro la FAQ e servono solo a rendere
 * leggibile la lista ed evidente la dicitura, senza toccare l'accordion.
 */
.c-faq__answer > * + * {
	margin-block-start: var(--easybed-space-3);
}

.c-faq__answer ol {
	margin-block: var(--easybed-space-3);
	padding-inline-start: var(--easybed-space-6);
}

.c-faq__answer li + li {
	margin-block-start: var(--easybed-space-2);
}

.c-faq__notice {
	margin-block: var(--easybed-space-4);
	padding: var(--easybed-space-3) var(--easybed-space-4);
	border-inline-start: 3px solid var(--easybed-color-accent);
	border-radius: var(--easybed-radius-s);
	background-color: var(--easybed-color-sand);
	color: var(--easybed-color-navy);
}

.c-faq__notice > :first-child {
	margin-block: 0;
}

/* --- CTA finale --------------------------------------------------------- */

.c-section--final {
	padding-block-end: var(--easybed-section-gap);
}

.c-final-cta {
	position: relative;
	padding: var(--easybed-space-8) var(--easybed-space-5);
	border-radius: var(--easybed-radius-xl);
	background-color: var(--easybed-color-navy);
	color: var(--easybed-color-navy-contrast);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.c-final-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.25;
}

.c-final-cta__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.c-final-cta__title {
	margin: 0 0 var(--easybed-space-4);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-xl);
	font-weight: var(--easybed-font-weight-bold);
	text-wrap: balance;
}

.c-final-cta__text {
	max-width: 42em;
	margin: 0 auto var(--easybed-space-6);
	color: var(--easybed-color-sand);
}

/* --- Header a due stati ----------------------------------------------------
 *
 * is-over-hero  sopra la fotografia: fondo trasparente, marchio bianco,
 *               menu e icone chiari
 * is-scrolled   superata la hero: fondo bianco, marchio a colori, menu navy
 *
 * Le due condizioni sono classi esplicite gestite da un IntersectionObserver
 * su una sentinella, non da una soglia di scroll: una soglia numerica andrebbe
 * ritarata a ogni cambio di altezza della hero.
 *
 * L'header e sempre fisso e sempre della stessa altezza: il passaggio fra i
 * due stati cambia solo colori e opacita, mai dimensioni. Nessuno spostamento
 * di layout.
 * ------------------------------------------------------------------------ */

/*
 * Sentinella del cambio di stato: un elemento alto un pixel collocato appena
 * sotto la barra. Finche e visibile nella finestra siamo in cima alla pagina;
 * quando scorre oltre il bordo superiore, l'header passa allo stato chiaro.
 */
.c-header-sentinel {
	position: absolute;
	inset-block-start: var(--easybed-header-height);
	inset-inline-start: 0;
	inline-size: 1px;
	block-size: 1px;
	pointer-events: none;
}

.c-site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	block-size: var(--easybed-header-height);
	display: flex;
	align-items: center;
	background-color: transparent;
	transition: background-color var(--easybed-transition), box-shadow var(--easybed-transition);
}

.c-site-header.is-scrolled {
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 35, 77, 0.08), 0 6px 24px rgba(0, 35, 77, 0.06);
}

/* Sulle pagine senza hero l'header sta nel flusso: non copre il contenuto. */
.c-site-header--solid {
	position: sticky;
}

/*
 * Con la barra amministrativa di WordPress l'header fisso finirebbe sotto di
 * essa. La barra e alta 32px da 783px in su e 46px sotto, e in quel caso non e
 * fissa: li l'header resta a filo.
 */
.admin-bar .c-site-header {
	inset-block-start: 46px;
}

@media (min-width: 783px) {
	.admin-bar .c-site-header {
		inset-block-start: 32px;
	}
}

@media (max-width: 600px) {
	.admin-bar .c-site-header {
		inset-block-start: 0;
	}
}

.c-site-header__inner {
	inline-size: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--easybed-space-4);
}

.c-site-header__branding {
	margin: 0;
	flex: 0 0 auto;
	/*
	 * Il pannello del menu e figlio dell'header: senza questo resterebbe
	 * sopra il marchio e sopra il pulsante di chiusura, che sparirebbero
	 * proprio quando servono.
	 */
	position: relative;
	z-index: 95;
}

.c-site-header__logo-link {
	display: block;
	line-height: 0;
	border-radius: var(--easybed-radius-s);
}

/*
 * Contenitore del marchio: una sola area, dimensione identica nei due stati.
 * Le proporzioni vengono dal viewBox condiviso dai due file (283.46 x 48.12),
 * quindi l'altezza segue la larghezza e il marchio non si schiaccia mai.
 */
.c-site-header__logo-box {
	position: relative;
	display: block;
	inline-size: 8.25rem;
	aspect-ratio: 283.46 / 48.12;
}

.c-site-header__logo {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	transition: opacity var(--easybed-transition);
}

/* Entrambe le versioni sono gia caricate: lo scambio non produce lampeggi. */
.c-site-header__logo--dark {
	opacity: 0;
}

.c-site-header.is-scrolled .c-site-header__logo--light {
	opacity: 0;
}

.c-site-header.is-scrolled .c-site-header__logo--dark {
	opacity: 1;
}

.c-site-header__title {
	font-family: var(--easybed-font-heading);
	font-size: 1.375rem;
	font-weight: var(--easybed-font-weight-bold);
	letter-spacing: 0.02em;
	color: #ffffff;
	text-decoration: none;
}

.c-site-header.is-scrolled .c-site-header__title {
	color: var(--easybed-color-navy);
}

.c-site-header__actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--easybed-space-3);
	position: relative;
	z-index: 95;
}

/*
 * Il focus predefinito e navy: sopra l'header trasparente e sopra la hero,
 * anch'essi scuri, sarebbe invisibile. Su fondo scuro l'indicatore diventa
 * bianco. Quando l'header e bianco torna quello predefinito.
 */
.c-site-header.is-over-hero :focus-visible,
.c-hero :focus-visible {
	outline-color: #ffffff;
}

.c-site-header.is-scrolled :focus-visible {
	outline-color: var(--easybed-color-focus);
}

/* --- Navigazione -------------------------------------------------------- */

.c-site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--easybed-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-site-nav__list a {
	font-size: 1rem;
	font-weight: var(--easybed-font-weight-medium);
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	transition: color var(--easybed-transition);
}

.c-site-nav__list a:hover,
.c-site-nav__list a:focus-visible {
	color: #ffffff;
}

.c-site-header.is-scrolled .c-site-nav__list a {
	color: var(--easybed-color-navy);
}

.c-site-header.is-scrolled .c-site-nav__list a:hover,
.c-site-header.is-scrolled .c-site-nav__list a:focus-visible {
	color: var(--easybed-color-accent);
}

/* --- Carrello ----------------------------------------------------------- */

.c-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--easybed-radius-pill);
	color: #ffffff;
	text-decoration: none;
	transition: color var(--easybed-transition), background-color var(--easybed-transition);
}

.c-cart-link:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

.c-site-header.is-scrolled .c-cart-link {
	color: var(--easybed-color-navy);
}

.c-site-header.is-scrolled .c-cart-link:hover {
	background-color: rgba(0, 35, 77, 0.06);
}

.c-cart-link__icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

/*
 * Il contatore vive in un contenitore sempre presente: WooCommerce lo
 * sostituisce dopo ogni aggiunta al carrello, e deve trovare un bersaglio
 * anche quando il carrello e vuoto.
 */
.c-cart-link__count {
	position: absolute;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.125rem;
	min-inline-size: 1.125rem;
	padding-inline: 0.25rem;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-accent);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.125rem;
	text-align: center;
}

/* --- Pulsante del menu -------------------------------------------------- */

.c-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--easybed-radius-pill);
	background: none;
	color: #ffffff;
	cursor: pointer;
}

.c-site-header.is-scrolled .c-nav-toggle {
	color: var(--easybed-color-navy);
}

/* Con il pannello aperto il fondo e sempre navy: l'icona resta bianca. */
.c-site-header .c-nav-toggle[aria-expanded="true"] {
	color: #ffffff;
}

.c-nav-toggle[hidden] {
	display: none;
}

.c-nav-toggle__bars,
.c-nav-toggle__bars::before,
.c-nav-toggle__bars::after {
	display: block;
	inline-size: 1.375rem;
	block-size: 2px;
	border-radius: 2px;
	background-color: currentcolor;
	transition: transform var(--easybed-transition), opacity var(--easybed-transition);
}

.c-nav-toggle__bars {
	position: relative;
}

.c-nav-toggle__bars::before,
.c-nav-toggle__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.c-nav-toggle__bars::before {
	inset-block-start: -7px;
}

.c-nav-toggle__bars::after {
	inset-block-start: 7px;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bars {
	background-color: transparent;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/*
 * Sotto la soglia desktop la navigazione diventa un pannello a tutta pagina.
 * La classe is-collapsible viene aggiunta dal JavaScript: senza script il
 * menu resta una lista visibile e raggiungibile.
 */
@media (max-width: 63.99em) {
	.c-site-header__cta {
		display: none;
	}

	.c-site-nav.is-collapsible {
		position: fixed;
		inset: 0;
		z-index: 90;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--easybed-space-7);
		padding: var(--easybed-space-8) var(--easybed-space-5);
		background-color: var(--easybed-color-navy);
		visibility: hidden;
		opacity: 0;
		/*
		 * In chiusura visibility aspetta la fine della dissolvenza; in apertura
		 * scatta subito. Se aspettasse anche in apertura, il pannello resterebbe
		 * invisibile per un frame e non potrebbe ricevere il focus: il browser
		 * rifiuta di focalizzare un elemento non visibile, in silenzio.
		 */
		transition: opacity var(--easybed-transition), visibility 0s linear var(--easybed-transition);
	}

	.c-site-nav.is-collapsible.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity var(--easybed-transition), visibility 0s;
	}

	.c-site-nav.is-collapsible .c-site-nav__list {
		flex-direction: column;
		gap: var(--easybed-space-6);
		text-align: center;
	}

	.c-site-nav.is-collapsible .c-site-nav__list a,
	.c-site-header.is-scrolled .c-site-nav.is-collapsible .c-site-nav__list a {
		font-family: var(--easybed-font-heading);
		font-size: var(--easybed-font-size-l);
		font-weight: var(--easybed-font-weight-semibold);
		color: #ffffff;
	}

	/* Nel pannello la CTA torna visibile, a piena larghezza. */
	.c-site-nav.is-collapsible .c-site-header__cta {
		display: inline-flex;
	}
}

@media (min-width: 48em) {
	.c-site-header__logo-box {
		inline-size: 10rem;
	}
}

@media (min-width: 64em) {
	/*
	 * Da desktop la barra diventa una griglia a tre colonne: marchio, menu,
	 * azioni. Le due colonne laterali hanno la stessa larghezza, quindi il menu
	 * resta centrato nella fascia indipendentemente da quanto sono larghi il
	 * logo e il gruppo carrello piu pulsante. Con il flex precedente il menu
	 * seguiva il logo e si spostava a sinistra ogni volta che il marchio
	 * cambiava dimensione.
	 */
	.c-site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--easybed-space-5);
	}

	.c-site-nav {
		justify-self: center;
	}

	.c-site-header__actions {
		justify-self: end;
		margin-inline-start: 0;
	}

	/* 1024-1439: 176px. Da 1440 in su il marchio puo respirare di piu. */
	.c-site-header__logo-box {
		inline-size: 11rem;
	}

	.c-nav-toggle {
		display: none;
	}
}

@media (min-width: 90em) {
	.c-site-header__logo-box {
		inline-size: 11.875rem;
	}
}

/* Lo scorrimento del corpo si blocca quando il pannello del menu e aperto. */
.is-nav-open {
	overflow: hidden;
}

/* --- Varianti di pulsante usate su fondo scuro --------------------------- */

.c-button--sm {
	padding: var(--easybed-space-2) var(--easybed-space-5);
	font-size: 0.9375rem;
}

.c-button--ondark {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.65);
	color: #ffffff;
}

/*
 * In hover il pulsante si riempie di bianco pieno e testo e icona passano al
 * navy: l'inversione e netta e leggibile sopra la fotografia. Un velo semi
 * trasparente, a questa scala, si perde sullo sfondo.
 *
 * L'icona eredita il colore dal testo (stroke: currentColor), quindi cambia
 * insieme a esso senza una regola dedicata.
 */
.c-button--ondark:hover,
.c-button--ondark:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--easybed-color-navy);
}

.c-button__icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

/*
 * La hero e a filo del bordo superiore: il contenuto principale non deve
 * aggiungere spazio sopra di essa.
 */
.c-site-main {
	display: block;
}

/* --- Video di montaggio --------------------------------------------------
 *
 * Pannello panoramico centrato, angoli morbidi, ombra leggera. Il pulsante di
 * avvio compare solo quando esiste davvero un file da riprodurre.
 * ------------------------------------------------------------------------ */

.c-video {
	/*
	 * La compensazione dell'header fisso e ora unica, su html con
	 * scroll-padding-top (base.css): uno scroll-margin anche qui la
	 * sommerebbe, fermando l'ancora troppo in basso.
	 */
	background-color: var(--easybed-color-surface-alt);
}

.c-video__frame {
	position: relative;
	max-inline-size: 68.75rem;
	margin-inline: auto;
	border-radius: var(--easybed-radius-l);
	overflow: hidden;
	box-shadow: var(--easybed-shadow-soft);
	background-color: var(--easybed-color-navy);
	aspect-ratio: 16 / 9;
}

.c-video__poster,
.c-video__player {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.c-video__player[hidden] {
	display: none;
}

/* A video avviato la copertina sparisce e resta il player con i suoi comandi. */
.c-video__frame.is-playing .c-video__poster,
.c-video__frame.is-playing .c-video__play {
	display: none;
}

.c-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 5rem;
	block-size: 5rem;
	padding: 0;
	border: 0;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-accent);
	color: #ffffff;
	cursor: pointer;
	transition: background-color var(--easybed-transition), transform var(--easybed-transition);
}

.c-video__play:hover,
.c-video__play:focus-visible {
	background-color: var(--easybed-color-accent-hover);
	transform: translate(-50%, -50%) scale(1.06);
}

.c-video__play-icon {
	inline-size: 2rem;
	block-size: 2rem;
	/* Il triangolo appare centrato solo spostandolo di poco a destra. */
	margin-inline-start: 0.15rem;
}

.c-video__caption {
	margin: var(--easybed-space-5) 0 0;
	text-align: center;
	color: var(--easybed-color-text-muted);
	font-size: var(--easybed-font-size-s);
}

/*
 * Copyright del video. Sta dentro .c-video__frame (position: relative) e sopra
 * ogni altro elemento del player: copertina, pulsante e controlli nativi. In
 * basso a destra, ma sollevato quel tanto che basta a non finire sopra la barra
 * dei controlli del <video>. Non e cliccabile e non e animato.
 */
.c-video__copyright {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 3;
	padding: 0.25rem 0.625rem;
	border-radius: var(--easybed-radius-s);
	background-color: rgba(0, 35, 77, 0.55);
	color: #ffffff;
	font-family: var(--easybed-font-body);
	font-size: 0.75rem;
	font-weight: var(--easybed-font-weight-medium);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

/* Sollevato sopra la barra dei controlli quando il video e in riproduzione. */
.c-video__frame.is-playing .c-video__copyright {
	inset-block-end: 3.25rem;
}

@media (max-width: 47.99em) {
	.c-video__copyright {
		inset-block-end: 0.5rem;
		inset-inline-end: 0.5rem;
		padding: 0.1875rem 0.5rem;
		font-size: 0.6875rem;
	}

	.c-video__frame.is-playing .c-video__copyright {
		inset-block-end: 2.75rem;
	}
}

/* --- Schede di configurazione --------------------------------------------
 *
 * Valori ricavati misurando la precedente implementazione servita in locale,
 * non stimati a occhio: dimensioni, pesi, colori e raggi vengono da li.
 * ------------------------------------------------------------------------ */

.c-sizes {
	background-color: #ffffff;
	/*
	 * La compensazione dell'header e ora unica, su html (base.css): niente
	 * scroll-margin qui, altrimenti si sommerebbe e fermerebbe l'ancora piu in
	 * basso del titolo.
	 */
}

.l-sizes {
	display: grid;
	gap: var(--easybed-space-6);
	margin: var(--easybed-space-8) 0 0;
	padding: 0;
	list-style: none;
}

.c-size-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--easybed-border-width) solid rgba(197, 198, 207, 0.3);
	border-radius: 2rem;
	background-color: #ffffff;
	box-shadow: 0 10px 30px rgba(21, 57, 106, 0.05);
}

/* --- Immagine ----------------------------------------------------------- */

.c-size-card__media {
	position: relative;
	background-color: var(--easybed-color-surface);
	border-block-end: var(--easybed-border-width) solid rgba(197, 198, 207, 0.3);
	aspect-ratio: 16 / 10;
}

.c-size-card__figure {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--easybed-transition);
}

.c-size-card__figure.is-active {
	opacity: 1;
}

.c-size-card__image {
	inline-size: 100%;
	block-size: 100%;
	/* contain, non cover: il prodotto va mostrato intero, mai tagliato. */
	object-fit: contain;
	padding: var(--easybed-space-6);
}

/* --- Corpo -------------------------------------------------------------- */

.c-size-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--easybed-space-6);
	padding: var(--easybed-space-7) var(--easybed-space-6) var(--easybed-space-6);
}

.c-size-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--easybed-space-4);
}

.c-size-card__title {
	margin: 0;
	font-family: var(--easybed-font-heading);
	font-size: 1.6875rem;
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.3;
	color: var(--easybed-color-navy-soft);
}

.c-size-card__size {
	flex: 0 0 auto;
	font-size: var(--easybed-font-size-base);
	font-weight: var(--easybed-font-weight-medium);
	color: #44474e;
}

/* --- Prezzo ------------------------------------------------------------- */

.c-size-card__price {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-1);
}

.c-size-card__price-label {
	font-size: 0.84375rem;
	font-weight: var(--easybed-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #75777f;
}

/*
 * Il prezzo e l'elemento piu grande della scheda: 54px come nel riferimento.
 * Il file variabile di DM Sans copre fino a 700; il riferimento usa 800, che
 * il browser dovrebbe inventare ingrassando il disegno. Si resta a 700.
 */
.c-size-card__price-value {
	font-family: var(--easybed-font-body);
	font-size: clamp(2.5rem, 3.6vw, 3.375rem);
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--easybed-color-accent-bright);
	transition: color var(--easybed-transition);
}

/*
 * Condizione di vendita, non un'etichetta promozionale: sta sotto il prezzo,
 * piu piccola e in grigio medio, senza pastiglia ne colore d'accento.
 */
.c-size-card__price-note {
	margin: var(--easybed-space-1) 0 0;
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

/* --- Selettore dei piedi ------------------------------------------------ */

.c-feet {
	margin: 0;
	padding: 0;
	border: 0;
}

.c-feet__legend {
	padding: 0;
	margin-block-end: var(--easybed-space-3);
	font-size: var(--easybed-font-size-base);
	font-weight: var(--easybed-font-weight-semibold);
	color: var(--easybed-color-navy-soft);
}

.c-feet__options {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 5px;
	border-radius: var(--easybed-radius-pill);
	background-color: #f2f3fc;
}

/*
 * L'input resta invisibile ma ANCORATO dentro il selettore.
 *
 * Non si usa .screen-reader-text: quella utility e pensata per lo skip link e
 * al focus rende l'elemento di nuovo visibile. Su un radio significava che al
 * click sull'etichetta l'input passava da 1x1 clippato a 13x13 visibile e,
 * privo di offset, si ancorava al blocco contenitore iniziale: finiva in cima
 * al documento e il browser scorreva fin li per mostrarlo. Da qui il salto
 * verso la hero.
 *
 * Qui l'input resta dov'e, in ogni stato: niente da mostrare, niente scroll.
 */
.c-feet__input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	appearance: none;
	/* La label copre gia l'intera area: l'input non deve intercettare click. */
	pointer-events: none;
}

.c-feet__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3.25rem;
	padding-inline: var(--easybed-space-3);
	border-radius: var(--easybed-radius-pill);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--easybed-transition), color var(--easybed-transition);
}

/* Il segmento selezionato e navy pieno, come nel riferimento. */
.c-feet__input:checked + .c-feet__label {
	background-color: var(--easybed-color-navy);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 35, 77, 0.2);
}

/*
 * L'input e nascosto ma resta focalizzabile: l'anello di focus va disegnato
 * sull'etichetta, altrimenti chi naviga da tastiera non vedrebbe nulla.
 */
.c-feet__input:focus-visible + .c-feet__label {
	outline: var(--easybed-focus-width) solid var(--easybed-color-focus);
	outline-offset: var(--easybed-focus-offset);
}

/* --- Caratteristiche ---------------------------------------------------- */

.c-specs {
	display: grid;
	gap: var(--easybed-space-4);
	margin: 0;
	padding: var(--easybed-space-6) 0 0;
	border-block-start: var(--easybed-border-width) solid rgba(197, 198, 207, 0.3);
	list-style: none;
	/* Spinge la CTA in fondo anche quando gli elenchi hanno lunghezze diverse. */
	flex: 1 1 auto;
}

.c-specs__item {
	display: flex;
	align-items: flex-start;
	gap: var(--easybed-space-4);
	font-size: var(--easybed-font-size-base);
	line-height: 1.6;
	color: #44474e;
}

.c-specs__icon {
	flex: 0 0 auto;
	inline-size: 1.6875rem;
	block-size: 1.6875rem;
	color: var(--easybed-color-accent-bright);
}

.c-size-card__document {
	margin: 0;
	font-size: var(--easybed-font-size-s);
}

.c-size-card__document a {
	color: var(--easybed-color-accent);
}

/* --- CTA ---------------------------------------------------------------- */

.c-size-card__footer {
	padding: 0 var(--easybed-space-6) var(--easybed-space-6);
}

.c-size-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 3.9375rem;
	padding-inline: var(--easybed-space-5);
	border: 0;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-accent-bright);
	color: #ffffff;
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-base);
	font-weight: var(--easybed-font-weight-semibold);
	cursor: pointer;
	transition: background-color var(--easybed-transition), opacity var(--easybed-transition);
}

.c-size-card__cta:hover:not([disabled]),
.c-size-card__cta:focus-visible:not([disabled]) {
	background-color: var(--easybed-color-accent-hover);
}

/*
 * Il pulsante inerte resta corallo, solo attenuato: una fascia grigia lo
 * staccherebbe dal disegno della scheda e sembrerebbe un errore.
 */
.c-size-card__cta[disabled] {
	background-color: var(--easybed-color-accent-bright);
	opacity: 0.45;
	cursor: not-allowed;
}

.c-size-card__cta.is-busy {
	opacity: 0.75;
	cursor: progress;
}

@media (min-width: 48em) {
	.l-sizes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--easybed-space-7);
	}
}

/* Testo introduttivo dell'elenco caratteristiche. */
.c-size-card__intro {
	margin: 0;
	font-size: var(--easybed-font-size-base);
	line-height: 1.6;
	color: #44474e;
}

/* --- Modulo recesso online (Site Core: shortcode [easybed_recesso]) ------- */
.eb-recesso {
	max-inline-size: 40rem;
	margin-block: var(--easybed-space-5);
}

/* Honeypot: fuori dallo schermo, escluso da tastiera e screen reader. */
.eb-recesso__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.eb-recesso__field {
	margin-block: 0 var(--easybed-space-4);
}

.eb-recesso__field label {
	display: block;
	margin-block-end: var(--easybed-space-2);
	font-weight: var(--easybed-font-weight-semibold);
	color: var(--easybed-color-navy);
}

.eb-recesso__field input[type="text"],
.eb-recesso__field input[type="email"],
.eb-recesso__field textarea {
	inline-size: 100%;
	padding: var(--easybed-space-3);
	border: 1px solid var(--easybed-color-border);
	border-radius: var(--easybed-radius-s);
	font: inherit;
	color: var(--easybed-color-text);
	background-color: var(--easybed-color-surface);
}

.eb-recesso__field--check {
	display: flex;
	gap: var(--easybed-space-3);
	align-items: flex-start;
}

.eb-recesso__field--check label {
	margin-block-end: 0;
	font-weight: var(--easybed-font-weight-regular, 400);
	color: var(--easybed-color-text);
}

.eb-recesso__submit {
	padding: var(--easybed-space-3) var(--easybed-space-6);
	border: 0;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-accent);
	color: var(--easybed-color-accent-contrast);
	font: inherit;
	font-weight: var(--easybed-font-weight-semibold);
	cursor: pointer;
}

.eb-recesso__notice {
	margin-block: var(--easybed-space-4);
	padding: var(--easybed-space-3) var(--easybed-space-4);
	border-inline-start: 3px solid var(--easybed-color-accent);
	border-radius: var(--easybed-radius-s);
	background-color: var(--easybed-color-sand);
	color: var(--easybed-color-navy);
}

.eb-recesso__notice--error {
	border-inline-start-color: #c0392b;
}