/**
 * =============================================================================
 * PROBAR - LE SEZIONI PRODOTTO DELLA HOME - css/home-sezioni.css
 * -----------------------------------------------------------------------------
 * inc/abm-home-sezioni.php (28 settembre 2026). Stessa veste della vetrina:
 * nero, oro #FFCE53, Playfair nei titoli, pannelli con filo d'oro in testa.
 * Il binario che scorre e' quello di css/carosello-consigli.css (.pb-grid,
 * .pb-card): qui ci sono la scheda, il banner e le misure delle schede.
 *
 * Soglie in pixel: la radice del sito e' 14,592px. Stessa specificita' fra
 * regola di base e variante mobile, o la variante non vince.
 * =============================================================================
 */

.abm-hs,
.abm-hs *,
.abm-hs *::before,
.abm-hs *::after {
	box-sizing: border-box;
}

.abm-hv.abm-hs {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* --- Quante schede si vedono: l'ultima resta a meta', e dice che si scorre.
   carosello-consigli.css ne mette 4 intere sopra i 1200 px e la quinta quasi
   non sbuca: qui 4 e mezza. --- */
.abm-hv .abm-hs__vetrina.pb-caro.pb-caro {
	--pb-caro-scheda: 64%;
	--pb-caro-gap: 14px;
	margin: 22px 0 0;
}

@media (min-width: 600px) {
	.abm-hv .abm-hs__vetrina.pb-caro.pb-caro { --pb-caro-scheda: 40%; }
}

@media (min-width: 900px) {
	.abm-hv .abm-hs__vetrina.pb-caro.pb-caro { --pb-caro-scheda: 28%; --pb-caro-gap: 16px; }
}

@media (min-width: 1200px) {
	.abm-hv .abm-hs__vetrina.pb-caro.pb-caro { --pb-caro-scheda: 21%; }
}

/* Nella capsula il binario arriva al bordo destro: e' li' che sbuca la scheda
   successiva, come nel carosello delle categorie. */
.abm-hv__capsula .abm-hs__giostra .pb-grid {
	margin-right: calc(var(--hv-bordo) * -1) !important;
	padding-right: var(--hv-bordo) !important;
}

.abm-hv .abm-hs__giostra.pb-caro.pb-caro {
	margin: 0 0 30px;
}

/* --- La scheda: foto su bianco, nome, prezzo --- */
.abm-hv .abm-hs__scheda {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 14px 12px 18px;
	border: 1px solid #2e2e2e;
	border-radius: 14px;
	background: #121212;
	text-decoration: none;
	color: #f6f6f6;
	transition: border-color 0.4s ease;
}

.abm-hv .abm-hs__scheda .pb-card__media {
	display: block;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	background: #ffffff;
}

.abm-hv .abm-hs__scheda .pb-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 10px;
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	-webkit-user-drag: none;
}

.abm-hv .abm-hs__scheda .pb-card__name {
	color: #f6f6f6;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	min-height: 2.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.4s ease;
}

.abm-hv .abm-hs__scheda .pb-card__price,
.abm-hv .abm-hs__scheda .pb-card__price .woocommerce-Price-amount,
.abm-hv .abm-hs__scheda .pb-card__price bdi {
	color: #ffffff !important;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
}

.abm-hv .abm-hs__scheda .pb-card__price del,
.abm-hv .abm-hs__scheda .pb-card__price del .woocommerce-Price-amount,
.abm-hv .abm-hs__scheda .pb-card__price del bdi {
	color: #FFCE53 !important;
	text-decoration: line-through !important;
	font-weight: 500;
	margin-right: 6px;
}

.abm-hv .abm-hs__scheda .pb-card__price ins,
.abm-hv .abm-hs__scheda .pb-card__price ins .woocommerce-Price-amount,
.abm-hv .abm-hs__scheda .pb-card__price ins bdi {
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 700;
}

.abm-hv .abm-hs__scheda .pb-card__price .woocommerce-price-suffix,
.abm-hv .abm-hs__scheda .pb-card__price small {
	color: var(--hv-tenue) !important;
	font-size: 12px !important;
}

@media (hover: hover) {
	.abm-hv .abm-hs__scheda:hover {
		border-color: rgba(255, 206, 83, 0.55);
	}

	.abm-hv .abm-hs__scheda:hover .pb-card__media img {
		transform: scale(1.04);
	}

	.abm-hv .abm-hs__scheda:hover .pb-card__name {
		color: #FFCE53;
	}
}

.abm-hv .abm-hs__scheda:focus-visible {
	outline: 2px solid #FFCE53;
	outline-offset: 2px;
}

/* --- Il banner: testo a sinistra, foto a destra; sul telefono foto sopra --- */
.abm-hs__banner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	min-height: 320px;
	background: linear-gradient(180deg, #131313 0%, #0c0c0c 100%);
	border: 1px solid #2e2e2e;
	border-radius: 20px;
	overflow: hidden;
}

.abm-hs__banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	z-index: 2;
	background: linear-gradient(90deg, transparent, rgba(255, 206, 83, 0.65), transparent);
}

.abm-hs__banner--senza-foto {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.abm-hs__banner-testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 40px 44px;
}

.abm-hs__sopra {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.4px;
	color: var(--hv-oro);
	margin: 0 0 10px;
}

/* Astra scrive h2 e .entry-content :where(h2) con misure sue: si alza la
   specificita', come per gli altri titoli della vetrina. */
.abm-hv .abm-hs__titolo,
.entry-content .abm-hv .abm-hs__titolo {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	color: #f6f6f6;
	margin: 0 0 12px;
	text-align: left;
}

.abm-hs__riga {
	color: var(--hv-testo);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 22px;
}

/* Il pulsante e' il clone di quello dell'hero (abm_homes_pulsante): le
   classi di Spectra e prestige-btn-outline fanno tutto. Qui solo il posto. */
.abm-hv .abm-hs__pulsante {
	display: flex;
	justify-content: flex-start;
	margin: 0;
}

.abm-hs__banner-foto {
	position: relative;
	display: block;
	min-height: 100%;
	overflow: hidden;
	line-height: 0;
}

.abm-hs__banner-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
	-webkit-user-drag: none;
}

/* La sfumatura che unisce la foto al pannello del testo. */
.abm-hs__banner-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #111111 0%, rgba(17, 17, 17, 0) 28%);
	pointer-events: none;
}

@media (hover: hover) {
	.abm-hs__banner:hover .abm-hs__banner-foto img {
		transform: scale(1.03);
	}
}

@media (max-width: 921px) {
	.abm-hs__banner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.abm-hs__banner-foto {
		order: -1;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.abm-hs__banner-foto::after {
		background: linear-gradient(0deg, #111111 0%, rgba(17, 17, 17, 0) 35%);
	}

	.abm-hs__banner-testo {
		padding: 22px 22px 26px;
	}

	.abm-hv .abm-hs__titolo,
	.entry-content .abm-hv .abm-hs__titolo {
		font-size: 28px;
	}
}

@media (max-width: 700px) {
	.abm-hv.abm-hs {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.abm-hs__banner {
		border-radius: 16px;
	}
}

/* --- Le piu' ordinate sotto la guida: stessa capsula della vetrina, ma da
   sola, senza le promesse sotto. Attaccata alla guida, che ha gia' il suo
   margine in fondo. --- */
.abm-hv.abm-hs--ordinate {
	padding-top: 0;
	padding-bottom: 64px;
}

/* --- In alto, senza le promesse (scese qui sotto): sul computer la capsula
   teneva solo il carosello delle categorie, spento dal ventaglio, e
   resterebbe un pannello vuoto; sul telefono tiene il carosello e le serve
   un fondo. --- */
@media (min-width: 922px) {
	.abm-hv--senza-promesse.abm-hv--ventaglio .abm-hv__capsula {
		display: none;
	}
}

.abm-hv--senza-promesse .abm-hv__capsula {
	padding-bottom: 24px;
}

@media (max-width: 700px) {
	.abm-hv.abm-hs--ordinate {
		padding-bottom: 40px;
	}
}

/* --- Blocchi della pagina in bacheca (Spectra), 28 settembre 2026, notte ---
   Riconosciuti dal data-spectra-id; "body" davanti e !important perche' le
   regole di Spectra e di style.css hanno gia' due attributi e !important. */

/* Indispensabili: il testo aveva 76 px di spazio sotto (Spectra, a tutte le
   larghezze) e il pulsante finiva in fondo al riquadro. Ora sta sotto il
   testo, alla distanza del resto del blocco (gap 20 px). */
body .wp-block-spectra-content.wp-block-spectra-content[data-spectra-id="spectra-mjr381wv-043dmc"] {
	padding-bottom: 0 !important;
}

/* Sul tablet (545-1023 px) "Avvia il tuo locale", il testo e "Kit pronto"
   stavano a destra: Spectra li allinea a flex-end fra 768 e 1023, e
   style.css (26/09) faceva lo stesso fra 545 e 767 per somigliare al
   desktop. Il committente li vuole al centro. */
@media (min-width: 545px) and (max-width: 1023.98px) {
	body [data-spectra-id="spectra-458b40ed-3bcc-4880-9574-5cd131e723b4"] {
		align-items: center !important;
		text-align: center !important;
	}

	body [data-spectra-id="spectra-458b40ed-3bcc-4880-9574-5cd131e723b4"] > h3,
	body [data-spectra-id="spectra-458b40ed-3bcc-4880-9574-5cd131e723b4"] > p {
		text-align: center !important;
	}

	body [data-spectra-id="spectra-458b40ed-3bcc-4880-9574-5cd131e723b4"] > .wp-block-button {
		justify-content: center !important;
	}

	/* "Hai una richiesta speciale" e "Il nostro servizio": sul tablet stavano
	   a destra (flex-end), sul telefono a sinistra. Come il telefono. */
	body [data-spectra-id="spectra-074f4386"] {
		align-items: flex-start !important;
	}

	body [data-spectra-id="spectra-074f4386"] > h2,
	body [data-spectra-id="spectra-074f4386"] > h3,
	body [data-spectra-id="spectra-074f4386"] > p {
		text-align: left !important;
	}

	body [data-spectra-id="spectra-074f4386"] > .wp-block-button {
		justify-content: flex-start !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abm-hv .abm-hs__scheda,
	.abm-hv .abm-hs__scheda .pb-card__media img,
	.abm-hs__banner-foto img {
		transition: none;
	}

	.abm-hv .abm-hs__scheda:hover .pb-card__media img,
	.abm-hs__banner:hover .abm-hs__banner-foto img {
		transform: none;
	}
}