/* Stili custom del tema Il Vending, oltre a quelli generati da theme.json */

/* Poppins self-hosted per i titoli (sostituisce Georgia/serif) */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}

/* ---- Transizione tra pagine: slide laterale (View Transitions API nativa) ---- */

@view-transition {
	navigation: auto;
}

/* Il contenuto principale è l'unico a scorrere: header/footer restano fermi */
main {
	view-transition-name: main-content;
}

::view-transition-old(main-content) {
	animation: ilv-page-out 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-new(main-content) {
	animation: ilv-page-in 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ilv-page-out {
	to {
		opacity: 0;
		transform: translateX(-40px);
	}
}

@keyframes ilv-page-in {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(main-content),
	::view-transition-old(main-content),
	::view-transition-new(main-content) {
		animation: none !important;
	}
}

/* Azzera il margin-top di default dell'elemento <main>: creava uno spazio bianco tra header e hero */
main {
	margin-top: 0;
}

/* ---- Hero slider ---- */

.ilv-hero-slider {
	position: relative;
	height: 88vh;
	max-height: 820px;
	min-height: 560px;
	overflow: hidden;
	background: var(--wp--preset--color--accent-ink);
}

.ilv-hero-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.ilv-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.ilv-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.ilv-hero-slide__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ilv-hero-slide__bg--tecnico {
	object-position: 35% 45%;
}

.ilv-hero-slide__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 60, 86, 0.82) 0%, rgba(15, 60, 86, 0.6) 45%, rgba(15, 60, 86, 0.35) 100%);
}

.ilv-hero-slide__inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1.5rem;
}

.ilv-hero-slide__content {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.ilv-hero-slide__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base-raised);
}

.ilv-hero-slide__title {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	color: var(--wp--preset--color--base-raised);
}

.ilv-hero-slide__text {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--base-raised);
	opacity: 0.92;
}

.ilv-hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}

.ilv-hero-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.ilv-hero-btn:hover {
	transform: translateY(-1px);
}

.ilv-hero-btn--primary {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--base-raised);
}

.ilv-hero-btn--outline {
	background: transparent;
	border: 1px solid #ffffff;
	color: var(--wp--preset--color--base-raised);
}

.ilv-hero-btn--outline-dark {
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent-ink);
	color: var(--wp--preset--color--accent-ink);
}

/* Slide "prodotto": macchina reale su sfondo colore brand, layout split invece di cover fotografico */
.ilv-hero-slide.is-product {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-soft) 0%, var(--wp--preset--color--base-raised) 70%);
}

.ilv-hero-slide__split {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.ilv-hero-slide__text-col {
	flex: 1 1 0;
	max-width: 480px;
}

.ilv-hero-slide__eyebrow--dark {
	color: var(--wp--preset--color--accent-ink);
}

.ilv-hero-slide__title--dark {
	color: var(--wp--preset--color--ink);
}

.ilv-hero-slide__text--dark {
	color: var(--wp--preset--color--ink-soft);
	opacity: 1;
}

.ilv-hero-slide__actions--start {
	justify-content: flex-start;
}

.ilv-hero-slide__media-col {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	max-width: 420px;
}

.ilv-hero-slide__media-col img {
	max-width: 100%;
	max-height: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(15, 60, 86, 0.22));
}

@media (max-width: 900px) {
	.ilv-hero-slide__split {
		flex-direction: column-reverse;
		gap: 1rem;
		padding: 1.5rem 1.5rem 0;
		text-align: center;
	}

	.ilv-hero-slide__text-col {
		max-width: none;
	}

	.ilv-hero-slide__actions--start {
		justify-content: center;
	}

	.ilv-hero-slide__media-col {
		max-width: 220px;
		height: 45%;
	}
}

.ilv-hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	cursor: pointer;
	transition: background 0.15s ease;
	z-index: 2;
}

.ilv-hero-slider__arrow:hover {
	background: rgba(255, 255, 255, 0.32);
}

/* Slide "prodotto" ha sfondo chiaro: frecce/dots passano a versione scura per restare leggibili */
.ilv-hero-slider.has-light-slide .ilv-hero-slider__arrow {
	background: rgba(15, 60, 86, 0.1);
	color: var(--wp--preset--color--accent-ink);
}

.ilv-hero-slider.has-light-slide .ilv-hero-slider__arrow:hover {
	background: rgba(15, 60, 86, 0.18);
}

.ilv-hero-slider.has-light-slide .ilv-hero-slider__dot {
	background: rgba(15, 60, 86, 0.25);
}

.ilv-hero-slider__arrow--prev {
	left: 1.25rem;
}

.ilv-hero-slider__arrow--next {
	right: 1.25rem;
}

.ilv-hero-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	z-index: 2;
}

.ilv-hero-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ilv-hero-slider__dot.is-active {
	background: var(--wp--preset--color--amber);
	transform: scale(1.2);
}

@media (max-width: 600px) {
	.ilv-hero-slider {
		height: 80vh;
	}

	.ilv-hero-slider__arrow {
		width: 36px;
		height: 36px;
	}

	.ilv-hero-slider__arrow--prev {
		left: 0.6rem;
	}

	.ilv-hero-slider__arrow--next {
		right: 0.6rem;
	}
}

.ilv-product-grid .wp-block-post-template,
.wp-block-query .wp-block-post-template {
	gap: 1.25rem;
	/* Quando i prodotti sono meno delle 4 colonne (es. categoria con 2-3
	   prodotti), grid-template-columns: repeat(4, 1fr) riempie comunque il
	   100% del contenitore (1fr è relativo allo spazio disponibile, non al
	   contenuto), quindi justify-content da solo non basta: le colonne
	   devono avere una larghezza massima fissa perché possano "raccogliersi"
	   al centro invece di allargarsi a coprire tutta la riga. 335px ≈ card
	   in una griglia a 4 colonne su alignwide (1400px) con questo gap. */
	grid-template-columns: repeat(4, minmax(0, 335px));
	justify-content: center;
}

/* WordPress genera anche una regola di fallback ".columns-4 > li { width:
   calc(25% - ...) }" per il layout flex, ma si applica comunque via CSS
   anche quando il layout attivo è grid (il selettore non richiede
   is-flex-container) — questo forzava ogni card a 25% del contenitore,
   vanificando il tetto di 335px sopra. Va neutralizzata esplicitamente. */
.ilv-product-grid .wp-block-post-template > li,
.wp-block-query .wp-block-post-template > li {
	width: auto;
}

/* Paginazione griglia prodotti (archivio categoria) */

.ilv-pagination {
	gap: 0.5rem;
	margin: 3rem 0 1rem;
}

.ilv-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.4rem;
}

.ilv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.5rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.ilv-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-ink);
}

.ilv-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base-raised);
}

.ilv-pagination .page-numbers.dots {
	color: var(--wp--preset--color--ink-soft);
	background: none;
}

.ilv-pagination .wp-block-query-pagination-previous,
.ilv-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ilv-pagination .wp-block-query-pagination-previous:hover,
.ilv-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

/* Card prodotto negli archivi (elenco categoria e /prodotti/) */
.ilv-product-card {
	overflow: hidden;
	background: var(--wp--preset--color--base-raised);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ilv-product-card:hover {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.ilv-product-card__media {
	margin: 0 !important;
}

.ilv-product-card__media img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 4 / 3;
	object-fit: contain !important;
	background: var(--wp--preset--color--base-raised);
	padding: 0.75rem;
}

.ilv-product-card__divider {
	margin: 0 !important;
	border-top-color: var(--wp--preset--color--line) !important;
}

.ilv-product-card .wp-block-post-title {
	margin: 0;
	line-height: 1.35;
	font-weight: 600;
}

.ilv-product-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.ilv-product-card .wp-block-post-terms,
.ilv-product-card__category.wp-block-post-terms {
	display: block;
	margin-bottom: 0.1rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
}

.ilv-product-card .wp-block-post-terms a,
.ilv-product-card__category.wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

.ilv-product-card__specs {
	margin: 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-product-card__link.wp-block-read-more {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.ilv-product-card__link.wp-block-read-more:hover {
	text-decoration: underline;
}

/* Header */
.ilv-header {
	background: var(--wp--preset--color--base-raised);
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
	position: sticky;
	top: 0;
	z-index: 100;
}

.ilv-header-logo {
	margin: 0;
}

.ilv-header-logo img {
	display: block;
	height: 42px;
	width: auto;
}

.ilv-footer-logo {
	margin: 0 0 0.75rem;
}

.ilv-footer-logo img {
	display: block;
	width: 140px;
	height: auto;
}

.ilv-header-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--amber);
	text-decoration: none;
	white-space: nowrap;
}

.ilv-header-cta:hover {
	text-decoration: underline;
}

.ilv-header-partner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	flex-shrink: 0;
	text-decoration: none;
}

.ilv-header-partner__label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
}

.ilv-header-partner img {
	display: block;
	height: 34px;
	width: auto;
}

@media (max-width: 640px) {
	.ilv-header-partner {
		display: none;
	}
}

.ilv-header-nav {
	justify-content: center;
}

.ilv-header-nav .wp-block-navigation__container {
	gap: 2.2rem;
}

.ilv-header-nav .wp-block-navigation-item__content {
	padding: 0.4rem 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.ilv-header-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Voce "AppCorr": servizio nuovo (Sisoft, non a catalogo) — va segnalato in nav
 * perché altrimenti si perde tra le voci storiche del menu. Selettore per
 * href (non per classe/ID): wp:navigation-link non espone un className
 * configurabile dal markup del menu senza un blocco custom, l'URL è l'unico
 * aggancio stabile disponibile qui. Badge "Novità" generato via ::after
 * (nessun markup extra da iniettare nel blocco core) + colore accento
 * ambra sul testo per farlo risaltare anche a badge nascosto (mobile).
 */
.ilv-header-nav .wp-block-navigation-item__content[href="/appcorr/"] {
	position: relative;
	color: var(--wp--preset--color--amber);
	font-weight: 600;
}

.ilv-header-nav .wp-block-navigation-item__content[href="/appcorr/"]:hover {
	color: var(--wp--preset--color--amber);
	opacity: 0.85;
}

.ilv-header-nav .wp-block-navigation-item__content[href="/appcorr/"]::after {
	content: "Novità";
	position: absolute;
	top: -0.65rem;
	right: -0.9rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--amber);
	color: #ffffff;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.5;
	pointer-events: none;
}

/* Dentro l'overlay hamburger mobile il badge assoluto rompe il layout a lista
   (si sovrappone alla voce successiva) — si passa a badge inline dopo il testo. */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[href="/appcorr/"]::after {
	position: static;
	display: inline-block;
	margin-left: 0.5rem;
	top: auto;
	right: auto;
}

/* Freccina del trigger "Prodotti": ruota quando il submenu è aperto */
.ilv-header-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
	margin-left: 0.3rem;
	transition: transform 0.2s ease;
}

.ilv-header-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon svg {
	width: 0.7em;
	height: 0.7em;
}

.ilv-header-nav .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.ilv-header-nav .wp-block-navigation-submenu.is-menu-open > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

.ilv-header-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base-raised) !important;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(15, 60, 86, 0.14);
}

/*
 * Mega-menu "Prodotti": griglia a colonne (immagine quadrata + nome categoria),
 * ispirata al menu prodotti di sandenvendo.it. Il markup è iniettato via filtro
 * PHP (vedi ilvending_render_prodotti_megamenu in inc/blocks.php) al posto della
 * lista submenu di default del blocco core/navigation-submenu.
 */
.ilv-header-nav .wp-block-navigation__submenu-container:has(.ilv-megamenu) {
	padding: 0;
	left: 50%;
	transform: translateX(-50%);
}

.ilv-megamenu {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	padding: 1.5rem;
	width: max-content;
	max-width: calc(100vw - 3rem);
}

.ilv-megamenu__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 168px;
	padding: 0.75rem 0.5rem;
	border-radius: 10px;
	text-decoration: none;
	white-space: normal;
	text-align: center;
	transition: background 0.15s ease;
}

.ilv-megamenu__sparkle {
	position: absolute;
	top: 0.35rem;
	right: 1.6rem;
	font-size: 1.15rem;
	line-height: 1;
	animation: ilv-sparkle-pulse 1.6s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.7));
}

@keyframes ilv-sparkle-pulse {
	0%, 100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
	50% {
		transform: scale(1.25) rotate(12deg);
		opacity: 0.75;
	}
}

.ilv-megamenu__item:hover {
	background: var(--wp--preset--color--accent-soft);
}

.ilv-megamenu__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	overflow: hidden;
	transition: transform 0.2s ease;
}

.ilv-megamenu__item:hover .ilv-megamenu__media {
	transform: scale(1.05);
}

.ilv-megamenu__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1.1rem;
}

.ilv-megamenu__media .ilv-placeholder-media {
	width: 100%;
	height: 100%;
}

.ilv-megamenu__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.ilv-megamenu__desc {
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-soft);
	margin-top: -0.35rem;
}

@media (max-width: 900px) {
	.ilv-megamenu {
		grid-template-columns: repeat(2, 1fr);
	}

	.ilv-header-nav .wp-block-navigation__submenu-container:has(.ilv-megamenu) {
		left: 0;
		transform: none;
	}
}

/*
 * Dentro l'overlay hamburger (wp-block-navigation__responsive-container), il
 * submenu "Prodotti" non è più un popover posizionato (position:absolute) ma
 * parte del flusso verticale della lista — qui .ilv-megamenu manteneva comunque
 * "width: max-content" + item a larghezza fissa (168px x 2 colonne + padding),
 * che eccede il container mobile reale e causa overflow orizzontale di tutto
 * il pannello (visto: 478px di contenuto dentro un viewport di 414px). Dentro
 * l'overlay va vincolato a riempire il container disponibile, con colonne
 * fluide invece che a larghezza fissa.
 */
.wp-block-navigation__responsive-container-content .ilv-megamenu {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.wp-block-navigation__responsive-container-content .ilv-megamenu__item {
	width: auto;
}

/*
 * Bug WordPress core: quando l'overlay hamburger è aperto (.is-menu-open),
 * il CSS core forza TUTTI i submenu a essere sempre visibili/espansi
 * (position: static, visibility: visible, height: auto — vedi
 * wp-includes/blocks/navigation/style.css, regola
 * ".is-menu-open ... .has-child .wp-block-navigation__submenu-container"),
 * ignorando lo stato "aperto/chiuso" che il blocco stesso traccia per singolo
 * submenu (attributo aria-expanded sul bottone toggle, gestito via
 * Interactivity API). Per una lista di semplici link questo comportamento è
 * innocuo (il submenu è corto), ma il nostro megamenu con foto è ingombrante
 * e appare già aperto appena si apre l'hamburger, senza che l'utente abbia
 * cliccato "Prodotti". Fix: si nasconde di nuovo il megamenu di default
 * dentro l'overlay, e lo si mostra solo quando aria-expanded="true" sul
 * toggle del submenu genitore (stato reale già tracciato da WP, qui solo
 * letto invece che ignorato).
 */
.wp-block-navigation__responsive-container-content .wp-block-navigation-submenu:has(.wp-block-navigation-submenu__toggle[aria-expanded="false"]) .wp-block-navigation__submenu-container {
	display: none !important;
}

/*
 * WordPress core nasconde anche il bottone toggle (freccetta) stesso dentro
 * l'overlay — coerente con "i submenu sono sempre tutti aperti", ma qui serve
 * riportarlo visibile: è l'unico modo per l'utente di espandere/richiudere il
 * megamenu ora che non è più permanentemente aperto.
 */
.wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle {
	display: inline-flex !important;
}

@media (max-width: 900px) {
	.ilv-header-nav {
		justify-content: flex-end;
	}

	.ilv-header-cta {
		display: none;
	}
}

/*
 * Sotto i 900px il blocco core/navigation calcola a runtime (via JS) se il menu
 * inline ci sta nello spazio disponibile: con 6 voci + submenu + CTA "Richiedi
 * preventivo" il calcolo va spesso storto (va a capo su due righe invece di
 * attivare l'hamburger). Si forza qui il comportamento in modo deterministico:
 * hamburger sempre visibile, container inline sempre nascosto sotto la soglia.
 */
@media (max-width: 900px) {
	.ilv-header-nav .wp-block-navigation__container {
		display: none;
	}

	.ilv-header-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

@media (min-width: 901px) {
	.ilv-header-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

/*
 * Placeholder visivi in attesa del materiale fotografico reale del cliente.
 * .ilv-placeholder-media: texture diagonale riconoscibile come segnaposto.
 * .ilv-placeholder-label: etichetta piccola che spiega cosa va sostituito.
 */
.ilv-placeholder-media {
	position: relative;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.05) 0px,
		rgba(255, 255, 255, 0.05) 2px,
		transparent 2px,
		transparent 14px
	);
}

.ilv-placeholder-label {
	opacity: 0.6;
	font-style: italic;
	margin-bottom: 1.5rem !important;
}

.ilv-section-divided {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ilv-service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	margin-bottom: 1rem;
}

.ilv-service-icon svg {
	width: 22px;
	height: 22px;
}

.ilv-chi-siamo-card {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 4px 24px rgba(15, 60, 86, 0.05);
}

/*
 * Qualunque wp:group alignwide con sfondo colorato/bordo pieno (card visiva a
 * sé stante: chi-siamo, servizi, accessori, perché-sceglierci, ecc.) NON ha
 * padding orizzontale proprio — si affida al padding root del tema, che dà
 * margine tra la card e il VIEWPORT ma non tra il testo e il BORDO della card
 * stessa. Su mobile, dove le colonne interne si impilano e il group diventa
 * l'unico contenitore visibile, il risultato è testo/immagini a contatto col
 * bordo colorato.
 *
 * Fix strutturale a due livelli, perché il colore/bordo di queste card è a
 * volte inline (classe/attributo WP standard "has-*-background-color") e a
 * volte CSS esterno scritto a mano (es. .ilv-chi-siamo-card, dove il bordo è
 * in main.css, non nell'HTML — il primo tentativo con selettori attributo
 * [class*="has-background"] mancava proprio questi casi):
 * 1) qualunque classe WP core "has-*-background-color" (accent-soft, ecc.)
 * 2) qualunque classe custom che finisce in "-card" (convenzione già in uso
 *    nel tema per le sezioni con bordo/ombra proprio: chi-siamo-card, ecc.)
 */
@media (max-width: 782px) {
	.wp-block-group[class*="background-color"],
	.wp-block-group[class*="-card"] {
		padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
		padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
	}
}

/*
 * Sotto i 782px il blocco core wp:buttons passa a orientamento verticale e i
 * bottoni prendono width:100% del contenitore — su colonne strette (es. card
 * chi-siamo impilata) risultano enormi rispetto al testo del bottone stesso.
 * Si forza la larghezza al contenuto ovunque nel sito.
 */
@media (max-width: 782px) {
	.wp-block-button {
		width: auto;
		flex-basis: auto;
	}

	.wp-block-button__link {
		width: auto;
	}
}

.ilv-chi-siamo-photo {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(15, 60, 86, 0.16);
}

.ilv-chi-siamo-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.ilv-trust-list {
	list-style: none;
	margin: 0;
	padding: 1.75rem 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 1.5rem;
	border-top: 1px solid rgba(15, 60, 86, 0.12);
}

.ilv-partner-strip .wp-block-column {
	min-width: 0;
}

.ilv-partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--base-raised);
	border-radius: 10px;
	padding: 2rem 1.75rem;
	box-shadow: 0 12px 28px rgba(15, 60, 86, 0.12);
	text-decoration: none;
	transition: box-shadow 0.15s, transform 0.15s;
}

.ilv-partner-logo:hover {
	box-shadow: 0 16px 34px rgba(15, 60, 86, 0.18);
	transform: translateY(-1px);
}

.ilv-partner-logo img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
}

@media (max-width: 700px) {
	.ilv-partner-logo {
		padding: 1.5rem;
	}
	.ilv-partner-logo img {
		max-width: 160px;
	}
}

.ilv-trust-list--boxed {
	padding: 2.5rem 2.5rem 0.5rem;
	gap: 2rem 2.5rem;
}

@media (max-width: 700px) {
	.ilv-trust-list--boxed {
		padding: 2rem 1.25rem 0.5rem;
	}
}

.ilv-trust-list__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.ilv-trust-list__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--base-raised);
	color: var(--wp--preset--color--accent);
}

.ilv-trust-list__icon svg {
	width: 20px;
	height: 20px;
}

.ilv-trust-list__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ilv-trust-list__text strong {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}

.ilv-trust-list__text span {
	font-size: 0.825rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.4;
}

@media (max-width: 600px) {
	.ilv-trust-list {
		grid-template-columns: 1fr;
	}
}

.ilv-h24-gallery {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 220px;
	gap: 1.25rem;
}

.ilv-h24-gallery__item {
	margin: 0;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(15, 60, 86, 0.14);
}

.ilv-h24-gallery__item--wide {
	grid-column: span 2;
	grid-row: span 2;
}

.ilv-h24-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ilv-h24-gallery__item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 1rem;
	font-size: 0.825rem;
	color: #fff;
	background: linear-gradient(to top, rgba(15, 60, 86, 0.75), transparent);
}

@media (max-width: 700px) {
	.ilv-h24-gallery {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.ilv-h24-gallery__item--wide {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.ilv-accessori-photos {
	display: grid;
	gap: 1.25rem;
}

.ilv-accessori-photos__item {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(15, 60, 86, 0.12);
}

.ilv-accessori-photos__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.ilv-h24-page-gallery {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 240px;
	grid-auto-flow: dense;
	gap: 1.25rem;
}

.ilv-h24-page-gallery__item {
	margin: 0;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(15, 60, 86, 0.14);
}

.ilv-h24-page-gallery__item--wide {
	grid-column: span 2;
	grid-row: span 2;
}

.ilv-h24-page-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ilv-h24-page-gallery__item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 1rem;
	font-size: 0.825rem;
	color: #fff;
	background: linear-gradient(to top, rgba(15, 60, 86, 0.75), transparent);
}

@media (max-width: 900px) {
	.ilv-h24-page-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ilv-h24-page-gallery {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.ilv-h24-page-gallery__item--wide {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.ilv-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.ilv-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ilv-category-grid {
		grid-template-columns: 1fr;
	}
}

.ilv-category-grid__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--base-raised);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ilv-category-grid__item:hover {
	box-shadow: 0 16px 32px rgba(15, 60, 86, 0.18);
	transform: translateY(-4px);
}

.ilv-category-grid__media {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--accent-ink);
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.ilv-category-grid__item:hover .ilv-category-grid__media {
	transform: scale(1.06);
}

.ilv-category-grid__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(15, 60, 86, 0.88) 0%, rgba(15, 60, 86, 0.15) 55%, rgba(15, 60, 86, 0) 75%);
}

.ilv-category-grid__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.5rem 1.5rem 1.4rem;
}

.ilv-category-grid__count {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.3rem 0.7rem;
	background: rgba(15, 60, 86, 0.55);
	backdrop-filter: blur(2px);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base-raised);
}

.ilv-category-grid__text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

.ilv-category-grid__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	line-height: 1.2;
}

.ilv-category-grid__desc {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	line-height: 1.35;
	opacity: 0.85;
}

.ilv-category-grid__arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--base-raised);
	transition: transform 0.2s ease;
}

.ilv-category-grid__item:hover .ilv-category-grid__arrow {
	transform: translateX(3px);
}

/* ---- Banner copertina archivio categoria ---- */
/* Versione statica e più bassa dello slider hero home, stesso layout split
   delle slide "prodotto": sfondo a gradiente verde brand (non la foto
   prodotto come sfondo cover — le anteprime hanno molto spazio vuoto attorno
   al prodotto e stirate a piena larghezza risultavano zoomate/sgranate).
   L'immagine resta piccola e a dimensione naturale (object-fit: contain), a
   destra del testo. */

.ilv-category-banner {
	position: relative;
	height: 340px;
	margin: 0 0 2.5rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-ink) 0%, var(--wp--preset--color--accent) 100%);
	color: var(--wp--preset--color--base-raised);
}

.ilv-category-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.5rem;
	width: 100%;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

.ilv-category-banner__text {
	max-width: 640px;
	min-width: 0;
}

.ilv-category-banner__breadcrumb {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	opacity: 0.85;
}

.ilv-category-banner__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ilv-category-banner__breadcrumb a:hover {
	text-decoration: underline;
}

.ilv-category-banner__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	color: inherit;
}

.ilv-category-banner__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	opacity: 0.92;
}

.ilv-category-banner__media {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 360px;
	height: 300px;
}

.ilv-category-banner__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Le foto prodotto Sanden Vendo hanno un'ombra ellittica chiara pensata per
	   sfondo bianco: su questo sfondo verde scuro resta come una fascia chiara
	   netta sul bordo inferiore. Sfumata via mask invece di ritagliare il file
	   originale (materiale del produttore, non va alterato alla fonte). */
	-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 97%);
	mask-image: linear-gradient(to bottom, #000 82%, transparent 97%);
}

@media (max-width: 780px) {
	.ilv-category-banner__media {
		display: none;
	}
}

@media (max-width: 600px) {
	.ilv-category-banner {
		height: 260px;
	}
}

/* ---- Pagina prodotto singola ---- */

.ilv-product-page {
	font-size: 0.95rem;
	padding-top: 2.5rem;
}

.ilv-product-hero {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 2rem;
	margin: 1.5rem 0 2rem;
}

.ilv-product-hero__media {
	flex: 1 1 0;
	max-width: none;
	position: sticky;
	top: 1.5rem;
}

.ilv-product-hero__media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-raised);
	padding: 0.75rem;
	box-shadow: 0 2px 10px rgba(20, 40, 35, 0.06);
}

.ilv-product-hero__info {
	flex: 1 1 0;
	min-width: 0;
}

.ilv-product-hero__category.wp-block-post-terms {
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin-bottom: 0.4rem;
}

.ilv-product-hero__info .wp-block-post-title {
	margin-top: 0.2rem;
	margin-bottom: 0.75rem;
}

.ilv-product-hero__info .wp-block-post-content {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 1.25rem;
}

.ilv-product-details {
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(20, 40, 35, 0.05);
}

.ilv-product-details__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ilv-product-details__title {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.ilv-product-details__variant {
	display: inline-block;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base-raised);
	white-space: nowrap;
}

.ilv-product-details__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.9rem 1.25rem;
	margin: 0;
}

.ilv-product-details__item dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 0.25rem;
}

.ilv-product-details__icon {
	display: inline-flex;
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.ilv-product-details__item dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.ilv-product-details__pdf {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-ink);
	text-decoration: none;
}

.ilv-product-details__pdf svg {
	flex-shrink: 0;
	display: block;
}

.ilv-product-details__pdf:hover {
	text-decoration: underline;
}

.ilv-product-quote {
	margin-top: 0.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--accent-soft);
	border-radius: 8px;
}

.ilv-product-quote .wp-block-heading {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* ---- Prodotti correlati (pagina prodotto singola) ---- */

.ilv-related-products {
	padding: 4rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ilv-related-products__title {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.ilv-related-products__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
}

.ilv-related-products__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.ilv-related-products__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem 1rem 1.25rem;
}

.ilv-related-products__name {
	line-height: 1.35;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1100px) {
	.ilv-related-products__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {
	.ilv-related-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ilv-quote-form {
	scroll-margin-top: 6rem;
}

/* ---- "Ideale per" (contesti d'uso, pagina prodotto singola) ---- */

.ilv-fitfor {
	padding: 4rem 0;
}

.ilv-fitfor__title {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.ilv-fitfor__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}

.ilv-fitfor__card {
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.25rem 1.1rem;
	text-align: center;
}

.ilv-fitfor__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-ink);
}

.ilv-fitfor__card h4 {
	margin: 0 0 0.3rem;
	font-size: 0.92rem;
}

.ilv-fitfor__card p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
}

/* ---- "Come funziona" (step, pagina prodotto singola) ---- */

.ilv-how-it-works {
	padding: 4rem 0;
}

.ilv-how-it-works__title {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.ilv-how-it-works__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	position: relative;
}

.ilv-how-it-works__steps::before {
	content: "";
	position: absolute;
	top: 0.85rem;
	left: 11%;
	right: 11%;
	height: 1px;
	background: var(--wp--preset--color--line);
	z-index: 0;
}

.ilv-how-it-works__step {
	position: relative;
	padding-top: 0.5rem;
}

.ilv-how-it-works__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--amber);
	letter-spacing: 0.05em;
	margin-bottom: 0.6rem;
	background: var(--wp--preset--color--base);
}

.ilv-how-it-works__step h4 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

.ilv-how-it-works__step p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 700px) {
	.ilv-how-it-works__steps {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.ilv-how-it-works__steps::before {
		display: none;
	}
}

/* ---- CTA verso la categoria (pagina prodotto singola) ---- */

.ilv-category-cta {
	padding: 4rem 0;
}

.ilv-category-cta__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-soft) 0%, var(--wp--preset--color--base-raised) 75%);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.5rem 1.75rem;
}

.ilv-category-cta__text h4 {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
}

.ilv-category-cta__text p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-category-cta__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-weight: 600;
	font-size: 0.88rem;
	padding: 0.7rem 1.3rem;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.ilv-category-cta__link:hover {
	background: var(--wp--preset--color--accent-soft);
}

@media (max-width: 600px) {
	.ilv-category-cta__box {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- FAQ prodotto (pagina prodotto singola) ---- */

.ilv-faq {
	padding: 4rem 0;
}

.ilv-faq__title {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.ilv-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ilv-faq__item {
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
}

.ilv-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	list-style: none;
}

.ilv-faq__item summary::-webkit-details-marker {
	display: none;
}

.ilv-faq__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-ink);
	font-size: 0.9rem;
	transition: transform 0.2s ease;
}

.ilv-faq__item[open] .ilv-faq__icon {
	transform: rotate(45deg);
}

.ilv-faq__item p {
	margin: 0;
	padding: 0 1.25rem 1.1rem;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9rem;
	max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
	.ilv-faq__icon {
		transition: none;
	}
}

/* ---- "Esplora anche" (archivio categoria) ---- */

.ilv-other-categories {
	padding: 4rem 0;
}

.ilv-other-categories__title {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.ilv-quote-form p {
	margin: 0 0 0.9rem;
}

.ilv-quote-form__row {
	display: flex;
	gap: 2.5rem;
}

.ilv-quote-form__row p {
	flex: 1 1 0;
	min-width: 0;
}

.ilv-quote-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.ilv-quote-form input,
.ilv-quote-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95rem;
}

.ilv-quote-form textarea {
	resize: vertical;
}

.ilv-quote-form__message {
	padding: 0.7rem 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.ilv-quote-form__message--success {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-ink);
}

.ilv-quote-form__message--error {
	background: var(--wp--preset--color--amber-soft);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 700px) {
	.ilv-product-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.ilv-product-hero__media {
		position: static;
		max-width: none;
		width: 100%;
	}

	.ilv-product-hero__media img {
		display: block;
		max-width: 260px;
		margin: 0 auto;
	}

	.ilv-quote-form__row {
		flex-direction: column;
		gap: 0;
	}
}

/* ---- Pagina Contatti ---- */

body.page-template-default .wp-block-post-title,
.page-id-7 .wp-block-post-title {
	text-align: center;
	margin-top: 2.5rem;
}

.ilv-contact-hero__text {
	max-width: 540px;
	margin: 0.75rem auto 3rem;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-contact-layout {
	display: grid;
	grid-template-columns: minmax(320px, 420px) 1fr;
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto 3.5rem;
	padding: 0 1.5rem;
	align-items: stretch;
}

.ilv-contact-card {
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: 0 1px 6px rgba(20, 40, 35, 0.05);
	padding: 2rem;
}

.ilv-contact-card__title {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
}

.ilv-contact-card__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 1.35rem;
}

.ilv-contact-card__item p {
	margin: 0.15rem 0 0;
	line-height: 1.5;
}

.ilv-contact-card__item a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
}

.ilv-contact-card__item a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.ilv-contact-card__label {
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.85rem;
}

.ilv-contact-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-ink);
}

.ilv-contact-card__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: #25d366;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.ilv-contact-card__whatsapp:hover {
	filter: brightness(0.95);
}

.ilv-contact-map {
	position: relative;
	min-height: 320px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 1px 6px rgba(20, 40, 35, 0.05);
}

.ilv-contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ilv-contact-form-section {
	background: var(--wp--preset--color--accent-soft);
	border-radius: 12px;
	padding: 2.75rem 2rem 3rem;
	margin: 0 auto 4rem !important;
	max-width: 1400px;
}

.ilv-contact-form-section .wp-block-heading {
	margin-top: 0;
}

.ilv-contact-form-section__text {
	max-width: 480px;
	margin: 0 auto 2rem;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-contact-form-section .ilv-quote-form {
	max-width: 640px;
	margin: 0 auto;
	background: var(--wp--preset--color--base-raised);
	border-radius: 10px;
	padding: 1.75rem 2rem;
	box-shadow: 0 1px 6px rgba(20, 40, 35, 0.05);
}

.ilv-contact-form-section .ilv-quote-form button {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	text-align: center;
	border: none;
	cursor: pointer;
}

@media (max-width: 800px) {
	.ilv-contact-layout {
		grid-template-columns: 1fr;
	}

	.ilv-contact-map {
		min-height: 280px;
	}

	.ilv-contact-form-section {
		padding: 2.25rem 1.25rem 2.5rem;
	}

	.ilv-contact-form-section .ilv-quote-form {
		padding: 1.5rem 1.25rem;
	}
}

/* ---- Footer ---- */

.ilv-footer__top {
	padding: 3.5rem 1.5rem 2.5rem;
	gap: 2.5rem !important;
}

.ilv-footer__title {
	position: relative;
	margin: 0 0 1.1rem;
	padding-bottom: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ilv-footer__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--amber);
}

.ilv-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ilv-footer__list a,
.ilv-footer__contact a {
	color: var(--wp--preset--color--base-raised);
	opacity: 0.82;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.ilv-footer__list a:hover,
.ilv-footer__contact a:hover {
	opacity: 1;
	text-decoration: underline;
}

.ilv-footer__contact {
	line-height: 1.7;
}

.ilv-footer__social {
	margin-top: 1.1rem !important;
	gap: 0.6rem !important;
}

.ilv-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--base-raised);
	transition: background 0.15s ease, transform 0.15s ease;
}

.ilv-footer__social-icon svg {
	width: 16px;
	height: 16px;
}

.ilv-footer__social-icon[aria-label="WhatsApp"] svg {
	transform: translateY(-1px);
}

.ilv-footer__social-icon:hover {
	background: var(--wp--preset--color--amber);
	transform: translateY(-2px);
}

.ilv-footer__bottom {
	background: rgba(0, 0, 0, 0.15);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ilv-footer__bottom .wp-block-group {
	padding: 1.25rem 1.5rem;
	gap: 0.5rem;
}

.ilv-footer__bottom p {
	opacity: 0.75;
	margin: 0;
}

.ilv-footer__bottom a {
	color: var(--wp--preset--color--base-raised);
	opacity: 1;
}

@media (max-width: 600px) {
	.ilv-footer__top {
		grid-template-columns: 1fr !important;
	}
}

/* ---- Sezione impatto (parallax) ---- */

.ilv-parallax {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--accent-ink);
}

/* Il layout "flow" di WordPress applica margin-block-start:24px a ogni figlio diretto
   (anche se position:absolute) — annullato qui perché rompe l'aggancio a inset:0. */
.ilv-parallax.wp-block-group > * {
	margin-block-start: 0;
}

.ilv-parallax__bg {
	position: absolute;
	inset: -100px 0;
	width: 100%;
	height: calc(100% + 200px);
	object-fit: cover;
	will-change: transform;
	transform: translateY(0);
}

.ilv-parallax__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 60, 86, 0.82) 0%, rgba(15, 60, 86, 0.72) 55%, rgba(15, 60, 86, 0.88) 100%);
}

.ilv-parallax__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 5rem 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--base-raised);
}

.ilv-parallax__eyebrow {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	margin: 0 0 0.75rem;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ilv-parallax__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.ilv-parallax__text {
	font-size: 1.05rem;
	line-height: 1.6;
	opacity: 0;
	color: rgba(255, 255, 255, 0.88);
	transform: translateY(16px);
	transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.ilv-parallax.is-visible .ilv-parallax__eyebrow,
.ilv-parallax.is-visible .ilv-parallax__title,
.ilv-parallax.is-visible .ilv-parallax__text {
	opacity: 1;
	transform: translateY(0);
}

.ilv-parallax__points {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 2.25rem 0 0;
}

.ilv-parallax__point {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ilv-parallax.is-visible .ilv-parallax__point {
	opacity: 1;
	transform: translateY(0);
}

.ilv-parallax.is-visible .ilv-parallax__point:nth-child(1) { transition-delay: 0.3s; }
.ilv-parallax.is-visible .ilv-parallax__point:nth-child(2) { transition-delay: 0.4s; }
.ilv-parallax.is-visible .ilv-parallax__point:nth-child(3) { transition-delay: 0.5s; }

.ilv-parallax__point-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--base-raised);
	animation: ilv-parallax-float 3.4s ease-in-out infinite;
}

.ilv-parallax__point:nth-child(2) .ilv-parallax__point-icon {
	animation-delay: 0.4s;
}

.ilv-parallax__point:nth-child(3) .ilv-parallax__point-icon {
	animation-delay: 0.8s;
}

.ilv-parallax__point-label {
	font-size: 0.9rem;
	font-weight: 600;
}

.ilv-parallax__actions {
	margin-top: 2.5rem;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;
}

.ilv-parallax.is-visible .ilv-parallax__actions {
	opacity: 1;
	transform: translateY(0);
}

@keyframes ilv-parallax-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@media (max-width: 782px) {
	.ilv-parallax__inner {
		padding: 3.5rem 1.25rem;
	}

	.ilv-parallax__title {
		font-size: 1.6rem;
	}

	.ilv-parallax__points {
		gap: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ilv-parallax__bg {
		transform: none !important;
	}

	.ilv-parallax__eyebrow,
	.ilv-parallax__title,
	.ilv-parallax__text,
	.ilv-parallax__point,
	.ilv-parallax__actions {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ilv-parallax__point-icon {
		animation: none;
	}
}

/* ---- Lightbox immagini (gallerie con [data-ilv-lightbox]) ---- */

.ilv-lightbox-trigger {
	cursor: zoom-in;
}

.ilv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(6, 15, 12, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.ilv-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ilv-lightbox__figure {
	margin: 0;
	max-width: min(92vw, 1200px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ilv-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ilv-lightbox__caption {
	margin-top: 1rem;
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
}

.ilv-lightbox__caption[hidden] {
	display: none;
}

.ilv-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ilv-lightbox__close:hover,
.ilv-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
}

body.ilv-lightbox-open {
	overflow: hidden;
}

/* ---- Prodotto in evidenza (homepage) ---- */
/* Layout split foto/testo, stesso spirito delle slide "prodotto" dell'hero:
   sfondo ambra tenue (amber-soft) per distinguersi dalle sezioni bianche e
   verdi (accent-soft) adiacenti in homepage (vedi ordine sezioni in
   templates/front-page.html). */

.ilv-featured-product {
	display: flex;
	align-items: center;
	gap: 3.5rem;
}

.ilv-featured-product__media {
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilv-featured-product__media img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: contain;
}

.ilv-featured-product__body {
	flex: 1;
	min-width: 0;
}

.ilv-featured-product__eyebrow {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ilv-featured-product__body .ilv-product-card__category {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-featured-product__name {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.ilv-featured-product__excerpt {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-featured-product__body .ilv-product-card__specs {
	display: block;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

.ilv-featured-product__cta {
	display: inline-block;
}

@media (max-width: 780px) {
	.ilv-featured-product {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}

	.ilv-featured-product__media {
		flex-basis: auto;
		width: 100%;
	}
}

/* ---- Pagina AppCorr ---- */
/* Palette dedicata (navy scuro invece del verde brand): AppCorr/SIRPORTAL è un
   prodotto Sisoft rivenduto da Il Vending, non un prodotto a catalogo — la
   pagina resta riconoscibile come "Il Vending" (stessa nav/footer/CTA), ma le
   sezioni hero e SIRPORTAL richiamano l'identità Sisoft (navy/rosso, coerente
   con AppCorr_Icon.png e SIRPORTAL.png) per segnalare che è un servizio in
   partnership, non una macchina del parco. */

.ilv-appcorr-eyebrow {
	display: inline-block;
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ilv-appcorr-eyebrow--light {
	color: #ff5a5a;
}

.ilv-appcorr-intro {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	color: var(--wp--preset--color--ink-soft);
}

.ilv-appcorr-note {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-soft);
}

/* Hero */

.ilv-appcorr-hero {
	background: linear-gradient(120deg, #0c1420 0%, #16233a 100%);
	color: #ffffff;
	padding: 4.5rem 0;
}

.ilv-appcorr-hero__inner {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.ilv-appcorr-hero__text {
	flex: 1 1 0;
	max-width: 560px;
}

.ilv-appcorr-hero__eyebrow {
	display: inline-block;
	margin: 0 0 0.85rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 90, 90, 0.16);
	color: #ff8686;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ilv-appcorr-hero__title {
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: #ffffff;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.18;
}

.ilv-appcorr-hero__text-p {
	margin: 0 0 1.75rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.05rem;
	line-height: 1.6;
}

.ilv-appcorr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.ilv-appcorr-hero__media {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
}

.ilv-appcorr-hero__media img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

@media (max-width: 900px) {
	.ilv-appcorr-hero__inner {
		flex-direction: column;
		text-align: center;
		gap: 2.5rem;
	}

	.ilv-appcorr-hero__text {
		max-width: none;
	}

	.ilv-appcorr-hero__actions {
		justify-content: center;
	}

	.ilv-appcorr-hero__media img {
		max-width: 320px;
	}
}

/* Normativa: card 3 colonne */

.ilv-appcorr-norm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

.ilv-appcorr-norm-card {
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.5rem 1.5rem 1.75rem;
}

.ilv-appcorr-norm-card__label {
	margin: 0 0 0.3rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ilv-appcorr-norm-card h3 {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
}

.ilv-appcorr-norm-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 900px) {
	.ilv-appcorr-norm-grid {
		grid-template-columns: 1fr;
	}
}

/* Soluzione: screenshot app */

.ilv-appcorr-app-media {
	display: flex;
	justify-content: center;
}

.ilv-appcorr-app-media img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 20px 40px rgba(15, 60, 86, 0.16));
}

/* Come funziona: riusa .ilv-how-it-works__step ma senza la linea guida centrale
   (qui a 4 colonne, non 3, e fuori dal contesto pagina prodotto) */

.ilv-appcorr-steps {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.ilv-appcorr-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ilv-appcorr-steps {
		grid-template-columns: 1fr;
	}
}

/* SIRPORTAL: banda navy con foto prodotto */

.ilv-appcorr-sirportal {
	background: linear-gradient(120deg, #0c1420 0%, #16233a 100%);
	color: #ffffff;
}

.ilv-appcorr-sirportal__inner {
	display: flex;
	align-items: center;
	gap: 4rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 4.5rem 1.5rem;
}

.ilv-appcorr-sirportal__media {
	flex: 0 0 40%;
	display: flex;
	justify-content: center;
}

.ilv-appcorr-sirportal__media img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.45));
}

.ilv-appcorr-sirportal__text {
	flex: 1 1 0;
	min-width: 0;
}

.ilv-appcorr-sirportal__title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: #ffffff;
}

.ilv-appcorr-sirportal__text-p {
	margin: 0 0 1.5rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1rem;
	line-height: 1.65;
}

.ilv-trust-list--light .ilv-trust-list__icon {
	background: rgba(255, 255, 255, 0.1);
	color: #ff8686;
}

.ilv-trust-list--light {
	border-top-color: rgba(255, 255, 255, 0.16);
}

.ilv-trust-list--light .ilv-trust-list__text strong {
	color: #ffffff;
}

.ilv-trust-list--light .ilv-trust-list__text span {
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
	.ilv-appcorr-sirportal__inner {
		flex-direction: column;
		text-align: center;
		padding: 3.5rem 1.5rem;
	}

	.ilv-appcorr-sirportal__media {
		flex-basis: auto;
	}

	.ilv-appcorr-sirportal__media img {
		max-width: 280px;
	}

	.ilv-trust-list--light {
		text-align: left;
	}
}

/* Perché Sisoft: numeri + partner strip */

.ilv-appcorr-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 2.5rem 0 3rem;
}

.ilv-appcorr-why-card {
	text-align: center;
	padding: 0 0.5rem;
}

.ilv-appcorr-why-num {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.ilv-appcorr-why-card h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

.ilv-appcorr-why-card p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 900px) {
	.ilv-appcorr-why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ilv-appcorr-why-grid {
		grid-template-columns: 1fr;
	}
}

/* La pagina ha già un H1 dentro l'hero custom (.ilv-appcorr-hero__title) — il
   wp:post-title del template page.html resta nel markup per SEO/accessibilità
   ma va nascosto visivamente per non duplicare titolo+hero in sequenza.
   Si usa l'ID pagina (page-id-193) invece dello slug: WordPress non genera
   sempre la classe "page-{slug}" in body_class() a seconda della struttura
   permalink attiva, l'ID è più affidabile (stessa convenzione già in uso per
   la pagina Contatti, vedi .page-id-7 sopra). */
.page-id-193 .wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ilv-appcorr-partners {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(15, 60, 86, 0.14);
}

.ilv-appcorr-partners__logo {
	height: 34px;
	width: auto;
	object-fit: contain;
	opacity: 0.85;
}

.ilv-appcorr-partners__logo--dark {
	height: 26px;
}

@media (max-width: 600px) {
	.ilv-appcorr-partners {
		gap: 2rem;
	}
}

/* ---- Teaser AppCorr (homepage) ---- */

.ilv-appcorr-teaser {
	background: linear-gradient(120deg, #0c1420 0%, #16233a 100%);
	color: #ffffff;
}

.ilv-appcorr-teaser__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
}

.ilv-appcorr-teaser__text {
	max-width: 560px;
}

.ilv-appcorr-teaser__eyebrow {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 90, 90, 0.16);
	color: #ff8686;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ilv-appcorr-teaser__title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: #ffffff;
}

.ilv-appcorr-teaser__desc {
	margin: 0 0 1.5rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.95rem;
	line-height: 1.6;
}

.ilv-appcorr-teaser__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilv-appcorr-teaser__media img {
	width: 120px;
	height: 120px;
	filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4));
}

@media (max-width: 780px) {
	.ilv-appcorr-teaser__inner {
		flex-direction: column;
		text-align: center;
		padding: 3rem 1.5rem;
	}

	.ilv-appcorr-teaser__text {
		max-width: none;
	}

	.ilv-appcorr-teaser__media img {
		width: 90px;
		height: 90px;
	}
}

/* Wizard richiesta ricambi (shortcode ilv_ricambi_wizard) */
.ilv-rw-card {
	background: #fff;
	border: 1px solid #e1e4e7;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
	padding: 1.75rem;
	max-width: 900px;
	margin: 0 auto;
}

.ilv-rw-flash {
	max-width: 900px;
	margin: 0 auto 1.25rem;
	background: #e8efe6;
	border: 1px solid #4a7c59;
	border-radius: 10px;
	padding: 0.9rem 1.1rem;
	color: #23281f;
}

.ilv-rw-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: #e8efe6;
	border: 1px solid #c9dbc9;
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	margin-bottom: 1.5rem;
}
.ilv-rw-search__icon svg { width: 16px; height: 16px; color: #0e6b5c; }
.ilv-rw-search input {
	border: none; background: none; outline: none; flex: 1;
	font-family: inherit; font-size: 0.9rem;
}
.ilv-rw-search__results {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.5rem;
	background: #fff; border: 1px solid #e1e4e7; border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	max-height: 320px; overflow-y: auto; z-index: 20;
}
.ilv-rw-search__item {
	display: flex; flex-direction: column; gap: 0.15rem;
	width: 100%; text-align: left; padding: 0.6rem 0.9rem;
	border: none; border-bottom: 1px solid #f0f1ef; background: none; cursor: pointer;
	font-family: inherit;
}
.ilv-rw-search__item:hover { background: #f7f8f6; }
.ilv-rw-search__item small { color: #5c6b5f; font-size: 0.75rem; }
.ilv-rw-search__empty { padding: 0.9rem; color: #5c6b5f; font-size: 0.85rem; }

.ilv-rw-breadcrumb-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.ilv-rw-breadcrumb {
	display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
	font-size: 0.82rem;
}
.ilv-rw-breadcrumb button {
	border: none; background: none; padding: 0; color: #5c6b5f; cursor: pointer;
	font-family: inherit; font-size: inherit; text-decoration: underline;
}
.ilv-rw-breadcrumb__sep { color: #c2c9c3; }

.ilv-rw-panel h2 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.ilv-rw-hint { font-size: 0.88rem; color: #5c6b5f; margin: 0 0 1.3rem; }
.ilv-rw-loading, .ilv-rw-empty, .ilv-rw-error { color: #5c6b5f; font-size: 0.9rem; }
.ilv-rw-error { color: #b3441f; }

/* Dissolvenza tra uno step e il successivo (vedi iniziaTransizionePanel/
   fineTransizionePanel in ricambi-wizard.js): l'altezza resta bloccata dal
   min-height impostato via JS mentre il contenuto vecchio sfuma e quello
   nuovo appare, cosi' il resto della pagina non "salta" (CLS). */
.ilv-rw-panel {
	transition: opacity 0.18s ease;
}
.ilv-rw-panel.is-loading {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.ilv-rw-panel { transition: none; }
}

.ilv-rw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.75rem;
}
.ilv-rw-choice {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
	border: 1px solid #e1e4e7; border-radius: 12px; padding: 1rem 0.9rem;
	background: #fff; cursor: pointer; text-align: left;
	font-family: inherit; transition: border-color 0.15s, transform 0.1s;
}
.ilv-rw-choice:hover { border-color: #0e6b5c; transform: translateY(-1px); }
.ilv-rw-choice__icon {
	width: 34px; height: 34px; border-radius: 9px;
	background: #e8efe6; color: #0e6b5c;
	display: flex; align-items: center; justify-content: center;
}
.ilv-rw-choice__icon svg { width: 18px; height: 18px; }
.ilv-rw-choice__icon--photo {
	width: 128px; height: 128px; padding: 10px; background: #f3f1ec;
}
.ilv-rw-choice__icon--photo img {
	width: 100%; height: 100%; object-fit: contain;
}
.ilv-rw-choice__title { font-size: 0.88rem; font-weight: 600; color: #23281f; }

.ilv-rw-card { max-width: 1200px; }

.ilv-rw-card.is-assieme {
	/* Rompe il contenimento "constrained" del blocco pagina (contentSize
	   900px da theme.json): lo step con l'esploso ha bisogno di molto più
	   spazio orizzontale del resto del wizard, che invece resta contenuto. */
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
}
/* Con l'esploso il disegno è il contenuto principale: meno testo/margini
   sopra, per lasciargli spazio verticale il prima possibile. */
.is-assieme .ilv-rw-breadcrumb-row { margin-bottom: 0.5rem; }
.is-assieme .ilv-rw-panel h2 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.is-assieme .ilv-rw-hint { margin-bottom: 0.6rem; }

.ilv-rw-exploded-layout {
	display: grid;
	grid-template-columns: 2.4fr 1fr;
	gap: 1.5rem;
	align-items: stretch;
}
@media (max-width: 900px) { .ilv-rw-exploded-layout { grid-template-columns: 1fr; } }

.is-assieme .ilv-rw-exploded-canvas,
.is-assieme .ilv-rw-parts-list {
	min-height: calc(100vh - 320px);
	height: calc(100vh - 320px);
}
@media (max-width: 900px) {
	.is-assieme .ilv-rw-exploded-canvas,
	.is-assieme .ilv-rw-parts-list {
		min-height: 60vh;
		height: 60vh;
	}
}

.ilv-rw-exploded-canvas {
	position: relative;
	background: #f7f8f6; border: 1px solid #e1e4e7; border-radius: 12px;
	min-height: 700px;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}
.ilv-rw-exploded-canvas.is-panning { cursor: grabbing; }
.ilv-rw-exploded-viewport {
	width: 100%; height: 100%; min-height: 700px;
	padding: 1rem;
	display: flex; align-items: center; justify-content: center;
	transform-origin: 0 0;
	transition: transform 0.08s ease-out;
}
.ilv-rw-exploded-svg { width: 100%; height: 100%; min-height: 680px; }
.ilv-rw-exploded-drag-overlay {
	position: absolute; inset: 0; z-index: 4;
	background: transparent;
	touch-action: none;
}
.ilv-rw-parts-list {
	height: 700px; max-height: none; overflow-y: auto;
	display: flex; flex-direction: column; gap: 0.5rem;
}

.ilv-rw-exploded-zoom-controls {
	position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5;
	display: flex; flex-direction: column; gap: 0.4rem;
}
.ilv-rw-exploded-zoom-controls button {
	width: 32px; height: 32px; border-radius: 8px;
	border: 1px solid #e1e4e7; background: #fff; color: #23281f;
	font-size: 1.1rem; font-weight: 600; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ilv-rw-exploded-zoom-controls button:hover { border-color: #0e6b5c; color: #0e6b5c; }
.ilv-rw-exploded-zoom-controls button svg { width: 14px; height: 14px; }
.ilv-rw-exploded-canvas--empty {
	flex-direction: column; gap: 0.6rem; color: #9ba69d; text-align: center; padding: 2rem;
}
.ilv-rw-exploded-canvas--empty svg { width: 32px; height: 32px; }

.ilv-rw-part-row {
	display: flex; align-items: center; gap: 0.65rem;
	border: 1px solid #e1e4e7; border-radius: 10px; padding: 0.6rem 0.75rem;
	cursor: pointer; font-size: 0.85rem;
}
.ilv-rw-part-row:hover { border-color: #0e6b5c; }
.ilv-rw-part-row.is-selected { border-color: #0e6b5c; background: #e8efe6; }
.ilv-rw-part-row__num {
	width: 24px; height: 24px; border-radius: 50%; background: #f7f8f6;
	border: 1.5px solid #e1e4e7; color: #5c6b5f;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.68rem; font-weight: 700; flex-shrink: 0;
}
.ilv-rw-part-row.is-selected .ilv-rw-part-row__num { background: #0e6b5c; border-color: #0e6b5c; color: #fff; }
.ilv-rw-part-row__info { flex: 1; }
.ilv-rw-part-row__name { font-weight: 600; }
.ilv-rw-part-row__code { font-size: 0.72rem; color: #5c6b5f; }
.ilv-rw-part-row__add {
	width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #e1e4e7;
	display: flex; align-items: center; justify-content: center; color: #5c6b5f; flex-shrink: 0;
}
.ilv-rw-part-row__add svg { width: 12px; height: 12px; }
.ilv-rw-part-row.is-selected .ilv-rw-part-row__add { background: #0e6b5c; border-color: #0e6b5c; color: #fff; }

.ilv-rw-cart-strip {
	display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
	background: #f3f1ec; border: 1px solid #e1e4e7; border-radius: 999px;
	padding: 0.3rem 0.8rem 0.3rem 0.3rem; font-size: 0.8rem; line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s;
}
.ilv-rw-cart-strip[hidden] { display: none; }
.ilv-rw-cart-strip.has-items {
	background: #faf0e3; border-color: #dcc196;
}
.ilv-rw-cart-strip__icon {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
	background: #e8efe6; color: #0e6b5c;
}
.ilv-rw-cart-strip.has-items .ilv-rw-cart-strip__icon { background: #0e6b5c; color: #fff; }
.ilv-rw-cart-strip__icon svg { width: 15px; height: 15px; }
.ilv-rw-cart-strip__badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 16px; height: 16px; padding: 0 3px;
	border-radius: 999px; background: #c17a2c; color: #fff;
	font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
	box-shadow: 0 0 0 2px #faf0e3;
}
.ilv-rw-cart-strip__hint { color: #5c6b5f; }
.ilv-rw-link-btn {
	border: none; background: none; color: #c17a2c; font-weight: 600;
	cursor: pointer; font-family: inherit; font-size: inherit;
}

.ilv-rw-riepilogo-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
	flex-wrap: wrap; margin-bottom: 1rem;
}
.ilv-rw-riepilogo-head h2 { margin-bottom: 0.2rem; }
.ilv-rw-riepilogo-head__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ilv-rw-add-more-btn {
	display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
	border: 1px solid #0e6b5c; background: #fff; color: #0e6b5c;
	border-radius: 999px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.82rem;
	cursor: pointer; font-family: inherit; white-space: nowrap;
	transition: background-color 0.15s;
}
.ilv-rw-add-more-btn:hover { background: #e8efe6; }
.ilv-rw-add-more-btn svg { width: 14px; height: 14px; }
.ilv-rw-clear-cart-btn {
	display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
	border: 1px solid #e1e4e7; background: #fff; color: #8a938c;
	border-radius: 999px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.82rem;
	cursor: pointer; font-family: inherit; white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ilv-rw-clear-cart-btn:hover { background: #fbeae5; border-color: #e0b3a3; color: #b3441f; }
.ilv-rw-clear-cart-btn svg { width: 14px; height: 14px; }

/* Riepilogo: carrello a sinistra, form contatti a destra, meta' pagina
   ciascuno da desktop in su - sotto quella soglia tornano impilati (form
   sempre dopo il carrello, cosi' si controllano prima i pezzi). */
.ilv-rw-riepilogo-layout {
	display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 900px) {
	.ilv-rw-riepilogo-layout { grid-template-columns: 1fr; }
}
/* Form a sinistra, carrello a destra: nel markup il carrello viene prima
   (si controllano subito i pezzi selezionati), qui si scambia solo l'ordine
   visivo. Da mobile impilati torna l'ordine naturale del DOM (carrello sopra,
   form sotto) - order non si applica sotto i 900px. */
@media (min-width: 901px) {
	.ilv-rw-summary-list { order: 2; }
	.ilv-rw-form-panel { order: 1; }
}

.ilv-rw-summary-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ilv-rw-summary-row {
	display: flex; align-items: center; gap: 0.75rem;
	border: 1px solid #e1e4e7; border-radius: 10px; padding: 0.7rem 0.9rem;
}
.ilv-rw-summary-row__icon {
	width: 36px; height: 36px; border-radius: 8px; background: #e8efe6; color: #0e6b5c;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ilv-rw-summary-row__icon svg { width: 18px; height: 18px; }
.ilv-rw-summary-row__icon--photo {
	background: #f3f1ec; padding: 4px; cursor: zoom-in; position: relative;
	transition: transform 0.12s;
}
.ilv-rw-summary-row__icon--photo:hover { transform: scale(1.08); }
/* Numero del pallino sull'esploso tecnico: stesso numero disegnato accanto al
   pezzo nello schema (vedi evidenziaSelezionatiSuSvg), cosi' si puo' confrontare
   subito la foto piccola col disegno tecnico senza dover aprire lo zoom. */
.ilv-rw-summary-row__posizione {
	position: absolute; bottom: -4px; right: -4px;
	min-width: 16px; height: 16px; padding: 0 3px;
	border-radius: 999px; background: #0e6b5c; color: #fff;
	font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.ilv-rw-summary-row__icon--photo:focus-visible { outline: 2px solid #0e6b5c; outline-offset: 2px; }
.ilv-rw-summary-row__icon--photo img { width: 100%; height: 100%; object-fit: contain; }
.ilv-rw-summary-row__info { flex: 1; display: flex; flex-direction: column; font-size: 0.85rem; }
.ilv-rw-summary-row__info small { color: #5c6b5f; font-size: 0.72rem; }
.ilv-rw-summary-row__provenienza { color: #8a938c; font-style: italic; margin-top: 0.15rem; }
.ilv-rw-qty-input {
	width: 56px; border: 1px solid #e1e4e7; border-radius: 8px; padding: 0.35rem 0.5rem;
	font-family: inherit;
}
.ilv-rw-remove-btn {
	border: none; background: none; color: #9ba69d; font-size: 1.3rem; line-height: 1;
	cursor: pointer; padding: 0 0.3rem;
}
.ilv-rw-remove-btn:hover { color: #b3441f; }

/* Pannello form: verde-brand molto tenue (stesso family dell'accent-soft usato
   altrove nel sito, vedi chi-siamo/servizi) - stacca dal bianco della lista
   pezzi senza il contrasto acceso di un colore CTA pieno. */
.ilv-rw-form-panel {
	background: #eef3ee; border: 1px solid #d7e2d5; border-radius: 14px;
	padding: 1.5rem 1.6rem;
}
.ilv-rw-form-panel h3 {
	margin: 0 0 1rem; font-size: 1rem; color: #23281f;
}
.ilv-rw-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; row-gap: 0.9rem; margin-bottom: 0.9rem; }
@media (max-width: 560px) { .ilv-rw-form-grid { grid-template-columns: 1fr; } }
.ilv-rw-field { margin-bottom: 0.9rem; }
.ilv-rw-field label { display: block; font-size: 0.76rem; font-weight: 600; margin-bottom: 0.3rem; color: #5c6b5f; }
.ilv-rw-field input, .ilv-rw-field textarea {
	width: 100%; border: 1px solid #c9d4c7; border-radius: 8px; padding: 0.55rem 0.7rem;
	font-family: inherit; font-size: 0.88rem; background: #fff;
	box-sizing: border-box;
}
.ilv-rw-field input:focus, .ilv-rw-field textarea:focus {
	outline: none; border-color: #0e6b5c; box-shadow: 0 0 0 3px rgba(14,107,92,0.15);
}
.ilv-rw-submit-btn {
	border: none; border-radius: 999px; padding: 0.55rem 1.4rem;
	background: #c17a2c; color: #fff; font-family: inherit; font-weight: 600;
	font-size: 0.85rem; cursor: pointer;
	transition: background-color 0.15s;
}
.ilv-rw-submit-btn:hover { background: #a8681f; }
.ilv-rw-submit-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Lightbox anteprima pezzo: overlay a tutto schermo, solo immagine + chiudi. */
.ilv-rw-zoom-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(20, 24, 20, 0.86);
	display: flex; align-items: center; justify-content: center;
	padding: 3rem;
	cursor: zoom-out;
}
.ilv-rw-zoom-overlay img {
	max-width: 100%; max-height: 100%; object-fit: contain;
	border-radius: 8px; background: #fff;
	cursor: default;
}
.ilv-rw-zoom-close {
	position: absolute; top: 1.2rem; right: 1.2rem;
	width: 40px; height: 40px; border-radius: 50%;
	border: none; background: rgba(255,255,255,0.15); color: #fff;
	font-size: 1.6rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.ilv-rw-zoom-close:hover { background: rgba(255,255,255,0.28); }