/**
 * =============================================================================
 * PROBAR - ALLESTIMENTO HALLOWEEN (skin) - css/skin-halloween.css
 * -----------------------------------------------------------------------------
 * Caricato SOLO nel periodo (inc/abm-halloween.php, abm_hw_attivo()), su tutte
 * le pagine del blog 1. Il modello e' pensato per gli altri eventi: classe
 * "abm-skin abm-skin--<evento>" sul body, variabili ridefinite qui, un foglio
 * per evento (skin-natale.css domani) con gli stessi nomi di classe:
 *   .abm-skin-barra           la barra in alto, con le zucchine sul filo
 *   .abm-skin-angoli--alto    appeso al fondo dell'intestazione (ragnatele,
 *                             pipistrelli)
 *   .abm-skin-angoli--piede   subito sopra il piede (zucche, teschio, occhi)
 *   .abm-skin-fantasma        fisso al bordo sinistro
 *   .abm-skin-hero            la fascia in testa alla home
 * Per Natale si cambiano le variabili e i disegni, non la struttura.
 *
 * v3, 15/10/2026, dopo la prova a schermo a 1316 px:
 *   - le decorazioni alte non stanno piu' nel contenuto (che in home comincia
 *     sotto l'intestazione trasparente) ma appese al fondo dell'intestazione:
 *     il pipistrello si vede intero, la ragnatela non e' piu' tagliata in due;
 *   - la fascia di Halloween al posto dell'hero della home;
 *   - tutto il negozio (schede e landing comprese), piede con occhi e zucche,
 *     fantasmino; sul telefono meno pezzi e piu' piccoli.
 *
 * REGOLE (03-allestimenti-stagionali-ricerca.md, sezione 2):
 *   - barra e decorazioni stampate dal PHP, decorazioni in contenitori alti
 *     zero o fissi: CLS zero;
 *   - animazioni solo transform e opacity, tutte dentro
 *     prefers-reduced-motion: no-preference (fermi, i disegni restano belli);
 *   - l'accento (arancio, verde) solo sulla grafica, mai sul testo piccolo;
 *   - prezzi, pulsanti d'acquisto e testo nei colori di sempre; le
 *     decorazioni stanno nei margini laterali e negli spazi vuoti.
 * Misure in px: la radice del tema e' 14,592px.
 * =============================================================================
 */

body.abm-skin--halloween {
	--abm-skin-oro: #FFCE53;
	--abm-skin-oro-logo: #C19C59;
	--abm-skin-verde: #7BD88F;
	--abm-skin-arancio: #E8782A;
	--abm-skin-fondo: #0d0d0d;
	--abm-skin-fondo-hero: #0b0a09;
	--abm-skin-testo: #DAD6CD;
	--abm-skin-tenue: #A39D92;
	--abm-skin-linea: #2e2e2e;
	--abm-skin-barra-min: 36px;
	/* la ragnatela sta nel margine laterale: cresce con lo schermo */
	--abm-skin-ragnatela: clamp(50px, calc((100vw - 1240px) / 2 + 16px), 150px);
}

/* --- Colori dei disegni --- */
.abm-skin .abm-skin-o { stroke: var(--abm-skin-oro); }
.abm-skin .abm-skin-f { fill: var(--abm-skin-oro); }
.abm-skin .abm-skin-v { fill: var(--abm-skin-verde); }
.abm-skin .abm-skin-vs { stroke: var(--abm-skin-verde); }
.abm-skin .abm-skin-a { fill: var(--abm-skin-arancio); }
.abm-skin .abm-skin-n { fill: var(--abm-skin-fondo); }
.abm-skin .abm-skin-scuro { fill: rgba(13, 13, 13, 0.72); }

/* =============================================================================
 * 1. LA BARRA IN ALTO, con le zucchine sedute sul filo
 * ========================================================================== */
.abm-skin-barra {
	position: relative;
	z-index: 20;
	min-height: var(--abm-skin-barra-min);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 16px;
	background: var(--abm-skin-fondo);
	border-bottom: 1px solid var(--abm-skin-oro);
	box-shadow: inset 0 -2px 0 -1px var(--abm-skin-arancio);
}
.abm-skin-barra__t {
	margin: 0;
	max-width: 1160px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--abm-skin-testo);
	text-align: center;
}
.abm-skin-barra__a,
.abm-skin-barra__a:visited {
	margin-left: 10px;
	color: var(--abm-skin-oro);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.abm-skin-barra__a:hover,
.abm-skin-barra__a:focus-visible { color: #fff; }

.abm-skin-barra__zucche {
	position: absolute;
	bottom: 1px;
	display: none; /* accese solo dove il testo lascia spazio ai lati */
	align-items: flex-end;
	gap: 3px;
	pointer-events: none;
}
.abm-skin-barra__zucche--sx { left: 18px; }
.abm-skin-barra__zucche--dx { right: 18px; }
.abm-skin-barra__zucche svg { display: block; width: 20px; height: auto; }
.abm-skin-barra__zucche svg:nth-child(2) { width: 15px; }
.abm-skin-barra__zucche svg:nth-child(3) { width: 12px; }
@media (min-width: 1100px) {
	.abm-skin-barra__zucche { display: flex; }
}

/* =============================================================================
 * 2. LE DECORAZIONI: contenitori alti zero, disegni fuori dal flusso
 * ========================================================================== */
.abm-skin-angoli {
	position: relative;
	height: 0;
	z-index: 4;
	pointer-events: none;
}
/* Dentro <header id="masthead">: Astra lo dispone a flex in certe
   intestazioni; il contenitore resta una riga a tutta larghezza. */
#masthead > .abm-skin-angoli { width: 100%; flex: 0 0 100%; }

.abm-skin-deco {
	position: absolute;
	display: block;
	pointer-events: none;
	opacity: 0.9;
}
.abm-skin-deco svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- In alto: ragnatele agli angoli, pipistrelli appesi sotto l'intestazione --- */
.abm-skin-angoli--alto .abm-skin-deco--ragnatela { top: 0; width: var(--abm-skin-ragnatela); }
.abm-skin-deco--ragnatela svg { opacity: 0.6; } /* sul disegno: l'entrata anima lo span */
.abm-skin-deco--ragnatela-sx { left: 0; }
.abm-skin-deco--ragnatela-dx { right: 0; }
.abm-skin-deco--ragnatela-dx svg { transform: scaleX(-1); }

.abm-skin-deco--pipistrello { top: 10px; right: calc(var(--abm-skin-ragnatela) + 18px); width: 78px; }
.abm-skin-deco--pipistrello-2 { top: 34px; right: calc(var(--abm-skin-ragnatela) + 112px); width: 44px; opacity: 0.75; }

/* --- Il piede: zucche e teschio a cavallo del bordo, occhi nel buio --- */
/* sedute sul bordo del piede, nello spazio vuoto che chiude il contenuto */
.abm-skin-angoli--piede .abm-skin-deco--zucca { bottom: -4px; left: 10px; width: 64px; }
.abm-skin-angoli--piede .abm-skin-deco--zucca-2 { bottom: -3px; left: 70px; width: 40px; }
.abm-skin-angoli--piede .abm-skin-deco--teschio { bottom: -4px; right: 12px; width: 50px; }
.abm-skin-angoli--piede .abm-skin-deco--occhi { width: 42px; opacity: 0.95; }
.abm-skin-deco--occhi-1 { top: 70px; left: 10px; }
.abm-skin-deco--occhi-2 { top: 190px; right: 12px; }
.abm-skin-angoli--piede .abm-skin-deco--occhi-3 { top: 330px; left: 12px; width: 34px; }
.abm-skin-angoli--piede .abm-skin-deco--occhi-4 { top: 470px; right: 8px; width: 32px; }

/* Il margine laterale del piede si stringe sotto i 1280 px: restano due
   paia di occhi, nello spazio vuoto in cima al piede. */
@media (max-width: 1279px) {
	.abm-skin-deco--occhi-3,
	.abm-skin-deco--occhi-4 { display: none; }
	.abm-skin-angoli--piede .abm-skin-deco--occhi-1 { top: 2px; left: auto; right: 72px; width: 30px; }
	.abm-skin-angoli--piede .abm-skin-deco--occhi-2 { top: 3px; right: 24px; width: 28px; }
}

/* --- Il fantasmino: fisso al bordo, spento finche' non c'e' spazio e movimento --- */
.abm-skin-fantasma {
	display: none;
	position: fixed;
	left: 0;
	top: 42%;
	z-index: 30;
	width: 52px;
	pointer-events: none;
	opacity: 0.88;
	transform: translateX(-120%);
}
.abm-skin-fantasma svg { display: block; width: 100%; height: auto; }

/* --- Le animazioni: solo per chi non ha chiesto meno movimento --- */
@media (prefers-reduced-motion: no-preference) {
	.abm-skin-deco--entra { animation: abm-skin-posa 1.2s ease-out 1 both; }
	.abm-skin-deco--pipistrello.abm-skin-deco--entra { animation: abm-skin-posa 1.2s ease-out 0.3s 1 both, abm-skin-volo 5s ease-in-out 1.5s infinite alternate; }
	.abm-skin-deco--pipistrello-2.abm-skin-deco--entra { animation: abm-skin-posa 1.2s ease-out 0.6s 1 both, abm-skin-volo 4s ease-in-out 1.8s infinite alternate-reverse; }

	.abm-skin .abm-skin-palpebre {
		transform-box: fill-box;
		transform-origin: center;
		animation: abm-skin-sbatte 6s ease-in-out infinite;
	}
	.abm-skin-deco--occhi-2 .abm-skin-palpebre { animation-duration: 7.5s; animation-delay: 1.7s; }
	.abm-skin-deco--occhi-3 .abm-skin-palpebre { animation-duration: 8.5s; animation-delay: 3.1s; }
	.abm-skin-deco--occhi-4 .abm-skin-palpebre { animation-duration: 6.8s; animation-delay: 4.4s; }

	.abm-skin .abm-skin-volto { animation: abm-skin-fiamma 2.8s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1280px) {
	.abm-skin-fantasma {
		display: block;
		animation: abm-skin-affaccia 46s ease-in-out 9s infinite;
	}
}
@keyframes abm-skin-posa {
	from { opacity: 0; transform: translateY(-8px) rotate(-4deg); }
	to { opacity: 0.9; transform: none; }
}
@keyframes abm-skin-volo {
	from { transform: translate(0, 0); }
	to { transform: translate(-6px, 5px); }
}
/* gli occhi si accendono, sbattono una volta, si spengono */
@keyframes abm-skin-sbatte {
	0%, 6% { opacity: 0; transform: scaleY(1); }
	14%, 46% { opacity: 1; transform: scaleY(1); }
	49% { transform: scaleY(0.08); }
	52%, 78% { opacity: 1; transform: scaleY(1); }
	88%, 100% { opacity: 0; transform: scaleY(1); }
}
@keyframes abm-skin-fiamma {
	0% { opacity: 1; }
	35% { opacity: 0.78; }
	55% { opacity: 0.95; }
	100% { opacity: 0.72; }
}
/* il fantasmino resta fuori, si affaccia per tre secondi, torna fuori */
@keyframes abm-skin-affaccia {
	0%, 84% { transform: translateX(-120%) rotate(0deg); }
	88% { transform: translateX(-38%) rotate(10deg); }
	92% { transform: translateX(-42%) rotate(4deg); }
	96%, 100% { transform: translateX(-120%) rotate(0deg); }
}

/* La landing ha gia' la sua ragnatela nell'hero: nell'angolo ne resta una. */
.abm-skin .abm-hw-hero__ragnatela { display: none; }

/* =============================================================================
 * 3. LA FASCIA IN TESTA ALLA HOME, al posto dell'hero "Eleva la tua arte"
 * ========================================================================== */
/* Il blocco che segue la fascia e' l'hero di sempre: nel periodo si nasconde.
   Finito Halloween la fascia non si stampa e il selettore non trova niente. */
.abm-skin .entry-content > .abm-skin-hero--al-posto + * { display: none !important; }

.abm-skin .entry-content > .abm-skin-hero,
.abm-skin-hero {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--abm-skin-linea);
	background:
		radial-gradient(ellipse at 74% 36%, rgba(232, 120, 42, 0.14), transparent 58%),
		radial-gradient(ellipse at 12% 88%, rgba(123, 216, 143, 0.07), transparent 52%),
		var(--abm-skin-fondo-hero);
	color: var(--abm-skin-testo);
	box-sizing: border-box;
}
/* filo d'oro sfumato in testa, come i pannelli di casa */
.abm-skin-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--abm-skin-oro-logo), transparent);
	opacity: 0.7;
}
.abm-skin-hero * { box-sizing: border-box; }

/* Lo spazio sopra e sotto: selettori piu' pesanti di quelli di Astra sui
   figli del contenuto, e una scala sola (telefono, tablet, computer). */
body.abm-skin .entry-content > .abm-skin-hero { padding: 70px 0 40px; }
@media (min-width: 768px) {
	body.abm-skin .entry-content > .abm-skin-hero { padding: 64px 0 56px; }
}
/* Da 922 la home ha l'intestazione trasparente sopra il contenuto (assoluta,
   alta 150 px piu' il 2% di margine): la fascia comincia sotto, come faceva
   l'hero di sempre. */
@media (min-width: 922px) {
	body.abm-skin.ast-theme-transparent-header .entry-content > .abm-skin-hero { padding: calc(2vw + 186px) 0 64px; }
}

/* Astra scrive max-width:none sui figli del contenuto: si misura con width. */
.abm-skin .entry-content .abm-skin-hero__dentro,
.abm-skin-hero__dentro {
	width: min(100%, 1200px);
	max-width: none;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	align-items: center;
}
.abm-skin-hero__scena { order: -1; width: min(100%, 380px); margin: 0 auto; }
.abm-skin-hero__scena svg { display: block; width: 100%; height: auto; }

.abm-skin-hero__testo { position: relative; z-index: 2; }

.abm-skin .abm-skin-hero__occhiello {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--abm-skin-oro);
}
.abm-skin .entry-content h2.abm-skin-hero__titolo,
.abm-skin h2.abm-skin-hero__titolo {
	margin: 0 0 18px;
	padding: 0 0 16px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(36px, 5.4vw, 66px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: 0;
	text-transform: none;
	color: #f6f6f6;
	position: relative;
}
.abm-skin h2.abm-skin-hero__titolo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 72px;
	height: 1px;
	background: linear-gradient(90deg, var(--abm-skin-oro), transparent);
}
.abm-skin .abm-skin-hero__sotto {
	margin: 0 0 12px;
	max-width: 560px;
	font-size: 18px;
	line-height: 1.55;
	color: #f1eee7;
}
.abm-skin .abm-skin-hero__fatti {
	margin: 0 0 26px;
	max-width: 560px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--abm-skin-tenue);
}
/* Un solo pulsante, oro pieno e testo nero: a riposo, al passaggio, a fuoco. */
.abm-skin .abm-skin-hero a.abm-skin-hero__btn,
.abm-skin .abm-skin-hero a.abm-skin-hero__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 30px;
	border: 1px solid var(--abm-skin-oro);
	border-radius: 999px;
	background-color: var(--abm-skin-oro);
	color: #0d0d0d;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.4px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 0 0 0 rgba(255, 206, 83, 0);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.abm-skin .abm-skin-hero a.abm-skin-hero__btn:hover,
.abm-skin .abm-skin-hero a.abm-skin-hero__btn:focus-visible {
	background-color: #FFE08F;
	border-color: #FFE08F;
	color: #0d0d0d;
	box-shadow: 0 0 0 4px rgba(255, 206, 83, 0.18);
}
.abm-skin .abm-skin-hero a.abm-skin-hero__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Da 768: testo a sinistra, scena a destra. */
@media (min-width: 768px) {
	.abm-skin .entry-content .abm-skin-hero__dentro,
	.abm-skin-hero__dentro {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 36px;
	}
	.abm-skin-hero__scena { order: 0; width: 100%; max-width: 560px; }
}
/* La scena si muove solo per chi non ha chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) {
	.abm-skin-hero .abm-skh-volto,
	.abm-skin-hero .abm-skh-luce { animation: abm-skin-fiamma 2.6s ease-in-out infinite alternate; }
	.abm-skin-hero .abm-skh-luce--2 { animation-duration: 3.3s; animation-delay: 0.7s; }
	.abm-skin-hero .abm-skh-occhi {
		transform-box: fill-box;
		transform-origin: center;
		animation: abm-skin-sbatte 6.5s ease-in-out infinite;
	}
	.abm-skin-hero .abm-skh-occhi--2 { animation-duration: 8s; animation-delay: 2.2s; }
	.abm-skin-hero .abm-skh-occhi--3 { animation-duration: 7.2s; animation-delay: 4s; }
	.abm-skin-hero .abm-skh-pip { animation: abm-skin-volo 5s ease-in-out infinite alternate; }
	.abm-skin-hero .abm-skh-pip--2 { animation-duration: 3.8s; animation-direction: alternate-reverse; }
	.abm-skin-hero .abm-skh-pupilla { animation: abm-skin-fiamma 3.4s ease-in-out infinite alternate; }
}

/* =============================================================================
 * 4. IL TELEFONO: meno pezzi e piu' piccoli, mai sopra il contenuto
 * ========================================================================== */
@media (max-width: 767px) {
	.abm-skin-barra { padding: 6px 12px; }
	.abm-skin-barra__t { font-size: 12.5px; }
	.abm-skin-barra__a { margin-left: 6px; }
	body.abm-skin--halloween { --abm-skin-ragnatela: 46px; }
	.abm-skin-deco--ragnatela-dx,
	.abm-skin-deco--pipistrello-2,
	.abm-skin-angoli--piede .abm-skin-deco--zucca,
	.abm-skin-angoli--piede .abm-skin-deco--zucca-2,
	.abm-skin-angoli--piede .abm-skin-deco--teschio,
	.abm-skin-deco--occhi-1 { display: none; }
	/* sul telefono la galleria comincia subito: il pipistrello sta sul filo
	   dell'intestazione, piccolo, e non scende sulla foto */
	.abm-skin-deco--pipistrello { top: -6px; right: 10px; width: 40px; }
	.abm-skin-angoli--piede .abm-skin-deco--occhi-2 { top: 2px; right: 14px; width: 36px; }
	.abm-skin .abm-skin-hero__sotto { font-size: 16.5px; }
}
/* Da 768 a 1099 il margine laterale e' stretto: zucche e teschio del piede
   restano fuori, la ragnatela destra pure. */
@media (min-width: 768px) and (max-width: 1099px) {
	.abm-skin-deco--ragnatela-dx,
	.abm-skin-angoli--piede .abm-skin-deco--zucca,
	.abm-skin-angoli--piede .abm-skin-deco--zucca-2,
	.abm-skin-angoli--piede .abm-skin-deco--teschio { display: none; }
	.abm-skin-deco--pipistrello { right: 16px; }
	.abm-skin-deco--pipistrello-2 { right: 104px; }
}

/* =============================================================================
 * 5. L'OMAGGIO NEL CASSETTO DEL CARRELLO (classi del Regalo misterioso)
 * ========================================================================== */
.moderncart-cart-item.abm-skin-omaggio .moderncart-cart-item-actions > :not(.pb-omaggio-pillola) {
	display: none !important;
}
.moderncart-cart-item.abm-skin-omaggio .moderncart-cart-item-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.abm-skin .pb-omaggio-pillola {
	display: inline-block;
	padding: 6px 15px;
	border: 1px solid rgba(255, 206, 83, 0.55);
	border-radius: 999px;
	background-color: rgba(255, 206, 83, 0.07);
	color: var(--abm-skin-oro);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

/* La capsula della quantita' ferma nella pagina carrello (stessa di omaggio.css). */
.abm-skin .pb-omaggio-qta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(255, 206, 83, 0.30);
	border-radius: 8px;
	background-color: rgba(255, 206, 83, 0.06);
	color: var(--abm-skin-oro);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: default;
	user-select: none;
}

/* ==========================================================================
   LA BOCCA CHE MANGIA LE CARTE (v4, 15 ottobre 2026)
   --------------------------------------------------------------------------
   Due strati della stessa immagine (img/halloween/bocca-mostro-*.webp), messi
   da js/halloween-bocca.js dentro .pb-fan__sticky, a sinistra della carta
   protagonista: DIETRO la gola (sotto tutte le carte), DAVANTI denti e bava
   (sopra tutto). La carta mangiata e' un fantasma con z-index 150, in mezzo.
   Solo da 1100 px in su; la posizione la scrive il JavaScript.
   ========================================================================== */
.abm-skin--halloween .abm-hw-bocca {
	display: none;
}

@media (min-width: 1100px) {
	.abm-skin--halloween .abm-hw-con-bocca .abm-hw-bocca {
		display: block;
		position: absolute;
		max-width: none;
		margin: 0;
		pointer-events: none;
		user-select: none;
		transform-origin: 14% 47%;
		animation: abmHwBoccaRespira 5.2s ease-in-out infinite;
	}

	.abm-skin--halloween .abm-hw-con-bocca .abm-hw-bocca--dietro {
		z-index: 1;
	}

	.abm-skin--halloween .abm-hw-con-bocca .abm-hw-bocca--davanti {
		z-index: 300;
	}

	/* Le carte gia' mangiate: invisibili ma ancora link (opacita', non
	   display), come le carte lontane che la ruota spegne da sola. */
	.abm-skin--halloween .abm-hw-con-bocca .pb-fan__card.abm-hw-in-gola {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.abm-skin--halloween .pb-fan__card.abm-hw-bocca__carta {
		pointer-events: none !important;
	}
}

/* Il respiro: la proprieta' `scale` da sola, cosi' il morso (transform,
   dal JavaScript) si somma invece di sostituirla. */
@keyframes abmHwBoccaRespira {
	0%, 100% { scale: 1; }
	50%      { scale: 1.012 1.03; }
}

@media (prefers-reduced-motion: reduce) {
	.abm-skin--halloween .abm-hw-bocca {
		display: none !important;
	}
}

/* ==========================================================================
 * v6 (15/10/2026): la fascia della home con la scena del bar infestato.
 * La foto sta dietro a tutta larghezza, ancorata a destra; un velo nero da
 * sinistra tiene leggibile il testo, che resta a sinistra sulla parte scura.
 * ========================================================================== */
.abm-skin-hero--foto { isolation: isolate; }
.abm-skin .entry-content > .abm-skin-hero--foto img.abm-skin-hero__foto,
.abm-skin-hero--foto img.abm-skin-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 70% 50%;
	z-index: -2;
	margin: 0;
}
.abm-skin-hero--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.72) 38%, rgba(8, 8, 8, 0.15) 62%, rgba(8, 8, 8, 0) 80%);
	pointer-events: none;
}
.abm-skin .entry-content .abm-skin-hero--foto .abm-skin-hero__dentro,
.abm-skin-hero--foto .abm-skin-hero__dentro { grid-template-columns: minmax(0, 1fr); }
.abm-skin-hero--foto .abm-skin-hero__testo { max-width: 560px; }
@media (min-width: 768px) {
	.abm-skin .entry-content > .abm-skin-hero--foto,
	.abm-skin-hero--foto { min-height: 520px; }
}
@media (min-width: 1280px) {
	.abm-skin .entry-content > .abm-skin-hero--foto,
	.abm-skin-hero--foto { min-height: 640px; }
}
/* Telefono: la scena in alto, il testo sotto su fondo pieno. */
@media (max-width: 767px) {
	.abm-skin-hero--foto img.abm-skin-hero__foto { height: 56vw; inset: 0 0 auto 0; object-position: 78% 50%; }
	.abm-skin-hero--foto::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0, rgba(8, 8, 8, 0) 34vw, rgba(8, 8, 8, 1) 56vw); }
	body.abm-skin .entry-content > .abm-skin-hero--foto { padding-top: calc(56vw - 20px); }
}

/* v7 (15/10/2026, notte): in home, sopra la foto del bar infestato, i pipistrelli
   appesi a destra cadevano sulla testa dello scheletro barista. Solo in home e
   da 1100 px si spostano a sinistra, nel buio fra il motore di ricerca e
   l'occhiello, a destra della scritta "Halloween, sabato 31 ottobre". */
@media (min-width: 1100px) {
	body.home.abm-skin--halloween .abm-skin-deco--pipistrello {
		right: auto;
		left: max(400px, calc(50vw - 600px + 430px));
	}
	body.home.abm-skin--halloween .abm-skin-deco--pipistrello-2 {
		right: auto;
		left: max(510px, calc(50vw - 600px + 540px));
	}
}

/* =============================================================================
 * v8 (15/10/2026, notte): SUL TELEFONO come sul computer, chiesto dal
 * committente ("applica le decorazioni e la testata anche su mobile").
 * - La testata: la regola per computer (.abm-skin .entry-content > ...) vinceva
 *   su quella per telefono e ingrandiva la foto fino a mostrare solo i ganci.
 *   Qui la foto sta in alto, alta il 72% della larghezza, inquadrata sulla
 *   parte con la zucca, il barattolo degli occhi e lo scheletro barista.
 * - Le decorazioni: due ragnatele, due pipistrelli, zucche, teschio e occhi
 *   nel piede, e il fantasmino che si affaccia (sempre aria-hidden e
 *   pointer-events:none, piu' piccoli e ai bordi).
 * ========================================================================== */
@media (max-width: 767px) {
	body.abm-skin .entry-content > .abm-skin-hero--foto { padding-top: calc(72vw - 24px); padding-bottom: 36px; }
	body.abm-skin .entry-content > .abm-skin-hero--foto img.abm-skin-hero__foto {
		inset: 0 0 auto 0;
		height: 72vw;
		object-position: 82% 50%;
	}
	body.abm-skin .entry-content > .abm-skin-hero--foto::after {
		background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0, rgba(8, 8, 8, 0) 48vw, rgba(8, 8, 8, 1) 72vw);
	}

	body.abm-skin--halloween { --abm-skin-ragnatela: 64px; }
	body.abm-skin--halloween .abm-skin-deco--ragnatela-dx { display: block; }
	body.abm-skin--halloween .abm-skin-deco--pipistrello { display: block; top: 4px; right: 74px; width: 46px; }
	body.abm-skin--halloween .abm-skin-deco--pipistrello-2 { display: block; top: 22px; right: auto; left: 76px; width: 32px; }

	body.abm-skin--halloween .abm-skin-angoli--piede .abm-skin-deco--zucca { display: block; bottom: -3px; left: 8px; width: 46px; }
	body.abm-skin--halloween .abm-skin-angoli--piede .abm-skin-deco--zucca-2 { display: block; bottom: -2px; left: 52px; width: 30px; }
	body.abm-skin--halloween .abm-skin-angoli--piede .abm-skin-deco--teschio { display: block; bottom: -3px; right: 10px; width: 38px; }
	body.abm-skin--halloween .abm-skin-angoli--piede .abm-skin-deco--occhi-1 { display: block; top: 6px; left: auto; right: 96px; width: 28px; }
	body.abm-skin--halloween .abm-skin-angoli--piede .abm-skin-deco--occhi-2 { display: block; top: 8px; right: 56px; width: 26px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1279px) {
	body.abm-skin--halloween .abm-skin-fantasma {
		display: block;
		width: 40px;
		top: 58%;
		animation: abm-skin-affaccia 46s ease-in-out 9s infinite;
	}
}