/*
Theme Name:        USAUTO
Theme URI:         https://iltuokmzero.com
Author:            Perabite
Author URI:        https://perabite.com
Description:       Block theme custom per USAUTO / Il Tuo KM Zero — concessionaria auto KM0 Mocauto Group. Costruito con Gutenberg, no page builder. Token derivati dal design system in _docs/design-system/.
Version:           0.1.4
Requires at least: 6.5
Tested up to:      6.7
Requires PHP:      8.2
License:           Proprietary
License URI:       https://iltuokmzero.com
Text Domain:       usauto
Tags:              block-theme, full-site-editing, woocommerce, automotive
*/

/* =========================================================================
   USAUTO theme CSS — overrides che `theme.json` non può esprimere.
   ========================================================================= */

/* ---- Layout root: header/main/footer flush (no block-gap) -------------
   WP applica `.wp-site-blocks > * + * { margin-block-start: 24px }` di
   default. Sul nostro sito header e footer fanno da "chrome" strutturale
   e devono attaccarsi al main senza gap. Le sezioni dentro main hanno
   il proprio padding-top/bottom (vedi singoli blocchi usauto-*). */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* WP applica `:root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap, 24px) }`
   ai sibling dei layout-flow container (tipicamente i <main> dei nostri
   template). Quel 24px crea strisce bianche fra blocchi di sezione che
   già gestiscono internamente il proprio padding-block. Override col
   selettore element+class (specificità 0,2,1 — vince contro il :where
   di WP che vale 0,1,0). */
main.wp-block-group.is-layout-flow > *,
main.wp-block-group.is-layout-flow > * + * {
	margin-block-start: 0;
}

/* Stesso problema dentro entry-content/post-content (single page/post). */
.entry-content > * + * {
	margin-block-start: 0;
}

/* ---- Brand textures (CSS custom properties globali) ------------------- */
/* NOTA: usiamo URL assoluto (con leading /) perché il behavior di url()
   relative dentro --custom-property varia tra browser (alcuni risolvono
   rispetto al document, altri alla CSS source). Absolute path è
   prevedibile ovunque. Se cambia lo slug tema (oggi `usauto`), update
   anche qui. */
:root {
	--usauto-texture-halftone: url('/wp-content/themes/usauto/assets/textures/halftone.png');
}

/* ---- Antialiasing globale --------------------------------------------- */
/* macOS WebKit di default usa subpixel AA che ingrassa visivamente il
   testo rispetto al rendering Figma. Applichiamo grayscale AA su tutto
   per matchare il look del design. */

body,
.has-display-font-family,
h1, h2, h3, h4, h5, h6,
p,
.wp-block-button__link,
.wp-block-navigation-item__content {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- Navigation: stile a pill (cfr. Figma navbar) ---------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--40);
	border-radius: 10px;
	min-width: 88px;
	text-align: center;
	transition: background-color 150ms ease, color 150ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--violet-1);
}

.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

/* ---- Voce "Promo mese": burst giallo dietro il testo (Figma 1226:8393),
   sia mobile che desktop. Il testo resta sopra il burst. --------------- */

.usauto-nav-promo .wp-block-navigation-item__content {
	position: relative;
	isolation: isolate;
}

.usauto-nav-promo .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 104px;
	height: 83px;
	background-image: url(assets/promo-mese-burst.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: -1;
	pointer-events: none;
}

/* Su hover/focus/active (pagina corrente): niente burst, resta solo il
   pill giallo in tinta unita come le altre voci. */
.usauto-nav-promo .wp-block-navigation-item__content:hover::before,
.usauto-nav-promo .wp-block-navigation-item__content:focus-visible::before,
.usauto-nav-promo .wp-block-navigation-item__content:active::before,
.usauto-nav-promo.current-menu-item .wp-block-navigation-item__content::before {
	display: none;
}

/* Menu desktop ingrandito di 1px (small 14px → 15px). !important per
   battere la classe .has-small-font-size del blocco navigation. */
@media (min-width: 782px) {
	header .wp-block-navigation.has-small-font-size {
		font-size: calc(var(--wp--preset--font-size--small) + 1px) !important;
	}
}

/* ---- Footer: lista link senza bullet/indent + colore violet-4 --------- */

footer .wp-block-list,
.wp-block-template-part > footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

footer .wp-block-list li {
	margin-left: 0;
	padding-left: 0;
}

/* Dot decorativo 4×4 round per separatori inline (cfr. Figma footer
   copyright row: "© 2026 iltuokmzero.com • ©2022 MocautoGroup Srl") */
.usauto-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--violet-4);
	flex-shrink: 0;
}

/* Footer separator: forza full-width (WP is-style-wide non sempre garantisce) */
.usauto-footer-separator {
	width: 100%;
	max-width: 100%;
	border: 0;
	height: 1px;
	margin: 0;
}

/* Top-row del footer: forza width 100% del constrained parent (1170).
   Senza, width:auto si dimensiona al content (1070) e i cols dentro
   si stringono perché la cols-wrapper riceve uno spazio inferiore al
   suo content-size totale. */
.usauto-footer-row {
	width: 100%;
}

/* Cols-wrapper interno: anche lui deve essere full-width del suo
   spazio (top-row - logo - gap) per non shrinkare i cols. */
.usauto-footer-row > .wp-block-group.is-layout-flex {
	flex: 1 1 auto;
}

/* Mobile: footer row stack verticale. Logo sopra, gruppo cols sotto
   (a sua volta con cols stack 2-col). Override del flexWrap:nowrap
   inline del block markup. */
@media (max-width: 720px) {
	.usauto-footer-row {
		flex-wrap: wrap !important;
		gap: 40px !important;
	}

	.usauto-footer-row > .wp-block-group.is-layout-flex {
		flex-wrap: wrap !important;
		gap: 32px !important;
	}

	/* Cols del footer: min-width fissa rimossa, ognuna stretch 100% */
	.usauto-footer-row > .wp-block-group.is-layout-flex > .wp-block-group {
		flex: 1 1 calc(50% - 16px) !important;
		min-width: 0 !important;
	}

	/* Più padding orizzontale al footer su mobile (24px → 32px). */
	footer.wp-block-group,
	.wp-block-template-part > footer.wp-block-group {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* ---- Header mobile: nav allineata a destra (logo sx, hamburger+
   customer-account+CTA tutti pinned dx) + voci menu overlay più
   grandi per leggibilità touch. */
@media (max-width: 781px) {
	/* WP triggera `responsive-container__open` button (hamburger) sotto
	   la breakpoint del navigation block (default 600px ma applichiamo
	   alla nostra header row a 781px che è ~breakpoint custom). */

	/* Header row: cambio justify da space-between a flex-end (con
	   margin-right:auto sul logo per spingerlo a sinistra). In flex
	   con space-between, margin auto non vince — serve flex-end. */
	header.wp-block-group > .wp-block-group.is-layout-flex,
	header.wp-block-group > .wp-block-group.wp-block-group-is-layout-flex {
		justify-content: flex-end !important;
		gap: 16px !important;
	}

	header.wp-block-group > .wp-block-group > .wp-block-image:first-child {
		margin-right: auto !important;
	}

	/* Quando l'overlay del menu è APERTO (full screen mobile menu),
	   le voci dovrebbero essere più grandi e arieggiate. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		font-size: 24px !important;
		padding: 16px 24px !important;
		line-height: 1.2;
	}

	/* Gap maggiore tra voci nell'overlay verticale. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		gap: 8px !important;
	}
}

/* ---- Header: sotto i 600px WP mostra l'hamburger (overlayMenu mobile).
   Lo spostiamo come ultimo elemento della riga (più a destra, dopo cuore +
   account) e lo ridisegniamo a 3 stanghette: WP core disegna un'icona a
   sole 2 barre, la sostituiamo con 3 linee (linea centrale + box-shadow
   sopra/sotto). */
@media (max-width: 599.98px) {
	header .wp-block-navigation {
		order: 5;
	}

	header .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	header .wp-block-navigation__responsive-container-open {
		position: relative;
		box-sizing: border-box;
		width: 30px;
		height: 22px;
		color: var(--wp--preset--color--violet-1);
	}

	header .wp-block-navigation__responsive-container-open::before {
		content: "";
		position: absolute;
		left: 4px;
		right: 4px;
		top: 50%;
		height: 2.5px;
		transform: translateY(-50%);
		background: currentColor;
		border-radius: 2px;
		box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
	}
}

/* ---- Wishlist link nel menu header (prepend a customer-account) -------
   Iniettato via Usauto\Core\Wishlist\MenuLink (filter render_block del
   blocco woocommerce/customer-account). Stessa scala visiva dell'icona
   account, colore brand violet-1 + hover magenta. */
.usauto-menu-wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--violet-1);
	text-decoration: none;
	transition: color 150ms ease;
}
.usauto-menu-wishlist:hover,
.usauto-menu-wishlist:focus-visible {
	color: var(--wp--preset--color--magenta);
}
.usauto-menu-wishlist svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* WC customer-account: stessa scala e colore del cuore wishlist. Override
   del CSS default WC che ridimensiona l'icona sul font-size del blocco. */
.wp-block-woocommerce-customer-account .wc-block-customer-account__link {
	color: var(--wp--preset--color--violet-1);
	transition: color 150ms ease;
	padding: 0;
}
.wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover,
.wp-block-woocommerce-customer-account .wc-block-customer-account__link:focus-visible {
	color: var(--wp--preset--color--magenta);
	text-decoration: none;
}
.wp-block-woocommerce-customer-account .wc-block-customer-account__account-icon {
	width: 28px;
	height: 28px;
	display: block;
}

/* Link nel footer: violet-4 (eredita dal parent), hover yellow.
   Override esplicito del global link color magenta (theme.json). */
footer a,
.wp-block-template-part > footer a {
	color: var(--wp--preset--color--violet-4);
	text-decoration: none;
	transition: color 150ms ease;
}

footer a:hover,
footer a:focus-visible {
	color: var(--wp--preset--color--yellow);
}

/* ---- Pulsanti: shadow signature offset (cfr. design system 02-foundations) */

.wp-block-button .wp-block-button__link {
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--violet-1);
}

.wp-block-button .wp-block-button__link:active {
	transform: translate(0, 0);
	box-shadow: none;
}

/* ---- Focus visible globale per accessibilità --------------------------- */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 2px;
}

/* ---- Single product (scheda auto): layout 2-col ---------------------
   Gallery sinistra 672px + info sidebar destra 475px, separati da gap.
   Corrispondente al layout Figma node 140:1237. */

.usauto-single-layout {
	position: relative;
	isolation: isolate;
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}

/* Wrapper "hero" scheda: contiene breadcrumb + layout, con lo sfondo giallo
   dietro ENTRAMBI così il breadcrumb ci si trova sopra (sfondo trasparente,
   testo bianco). */
.usauto-single-hero {
	position: relative;
	isolation: isolate;
}

/* Niente gap flow tra breadcrumb e layout dentro il wrapper. */
.usauto-single-hero.is-layout-flow > * + * {
	margin-block-start: 0;
}

/* Sfondo giallo (texture halftone + taglio) dietro tutta l'area prodotto
   (breadcrumb + layout): full-bleed a tutta larghezza, ancorato in alto;
   sotto il taglio la texture è trasparente e lascia vedere il bianco. */
.usauto-single-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background-image: url(assets/textures/hero-bg-gialla.png?v=0.1);
	background-repeat: no-repeat;
	/* Sfondo spostato su del ~20% (texture alta ~71vw, 20% ≈ 14vw). */
	background-position: center -14vw;
	background-size: 100% auto;
	z-index: -1;
	pointer-events: none;
}

/* Breadcrumb sopra il giallo: testo, separatori (frecce) e linea inferiore
   in #6B5B82 (violet-3), buon contrasto sul giallo. */
.usauto-single-hero .usauto-page-breadcrumb__crumb,
.usauto-single-hero .usauto-page-breadcrumb__crumb--current,
.usauto-single-hero .usauto-page-breadcrumb__separator {
	color: #6b5b82;
}

.usauto-single-hero .usauto-page-breadcrumb__crumb--home:hover,
.usauto-single-hero .usauto-page-breadcrumb__crumb--home:focus-visible {
	color: var(--wp--preset--color--violet-1);
}

.usauto-single-hero .usauto-page-breadcrumb__line {
	border-top-color: #6b5b82;
}

/* Mobile: breadcrumb in Inter 12px, voci più ravvicinate e su UNA riga; il
   testo lungo (nome veicolo) viene troncato con i tre puntini. */
@media (max-width: 768px) {
	.usauto-single-hero .usauto-page-breadcrumb__container {
		flex-wrap: nowrap;
		overflow: hidden;
		gap: 4px;
	}

	.usauto-single-hero .usauto-page-breadcrumb__crumb {
		font-family: "Inter", "Inter Tight", system-ui, -apple-system, sans-serif;
		font-size: 12px;
		/* Title Case invece di UPPERCASE (l'HTML ora è title-case dal render). */
		text-transform: capitalize;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* Crumb corrente: si restringe e tronca con ellissi invece di andare a capo. */
	.usauto-single-hero .usauto-page-breadcrumb__crumb--current {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.usauto-single-hero .usauto-page-breadcrumb__separator {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
	}
}

/* =========================================================================
   Breadcrumb sopra hero colorato — altre pagine (blog, articolo, single promo)
   Stessa impostazione della scheda veicolo (.usauto-single-hero):
   breadcrumb dentro il wrapper con lo sfondo dell'hero + stile mobile.
   Colore testo dipende dallo sfondo:
   - Blog + articolo singolo → sfondo FUCSIA → testo BIANCO.
   - Single promo → texture CHIARA → testo #6B5B82 (come veicolo).
   ========================================================================= */

/* Blog + articolo singolo (sfondo fucsia) → testo/frecce/linea BIANCHI. */
.usauto-post-article .usauto-page-breadcrumb__crumb,
.usauto-post-article .usauto-page-breadcrumb__crumb--current,
.usauto-post-article .usauto-page-breadcrumb__separator {
	color: #fff;
}

.usauto-post-article .usauto-page-breadcrumb__crumb--home:hover,
.usauto-post-article .usauto-page-breadcrumb__crumb--home:focus-visible {
	color: var(--wp--preset--color--yellow);
}

.usauto-post-article .usauto-page-breadcrumb__line {
	border-top-color: rgba(255, 255, 255, 0.5);
}

/* Single promo (texture chiara) → #6B5B82 come scheda veicolo. */
.usauto-promo-single-hero .usauto-page-breadcrumb__crumb,
.usauto-promo-single-hero .usauto-page-breadcrumb__crumb--current,
.usauto-promo-single-hero .usauto-page-breadcrumb__separator {
	color: #6b5b82;
}

.usauto-promo-single-hero .usauto-page-breadcrumb__crumb--home:hover,
.usauto-promo-single-hero .usauto-page-breadcrumb__crumb--home:focus-visible {
	color: var(--wp--preset--color--violet-1);
}

.usauto-promo-single-hero .usauto-page-breadcrumb__line {
	border-top-color: #6b5b82;
}

/* --- Chi siamo (body.usauto-page-about): l'about-hero ROSSO (texture ondulata
   hero-bg-rossa.png, ancorata in alto) è il primo blocco del contenuto, ma il
   breadcrumb sta nel template (page.html) sopra il contenuto. Per avere UN SOLO
   sfondo continuo (niente rosso piatto vs texture): il breadcrumb diventa
   trasparente e viene tirato giù sopra l'hero con margine negativo; l'hero
   risale e la sua texture copre anche il breadcrumb. Il contenuto dell'hero
   viene fatto ridiscendere di pari misura così non finisce sotto il breadcrumb.
   --usauto-bc-h = altezza del breadcrumb (una riga). --- */
body.usauto-page-about {
	--usauto-bc-h: 45px;
}

body.usauto-page-about .usauto-page-breadcrumb {
	position: relative;
	z-index: 2;
	margin-bottom: calc(-1 * var(--usauto-bc-h));
}

body.usauto-page-about .usauto-about-hero__container {
	margin-top: var(--usauto-bc-h);
}

/* Desktop: il breadcrumb è leggermente più alto (font 14px). */
@media (min-width: 769px) {
	body.usauto-page-about {
		--usauto-bc-h: 49px;
	}
}

body.usauto-page-about .usauto-page-breadcrumb__crumb,
body.usauto-page-about .usauto-page-breadcrumb__crumb--current,
body.usauto-page-about .usauto-page-breadcrumb__separator {
	color: #fff;
}

body.usauto-page-about .usauto-page-breadcrumb__crumb--home:hover,
body.usauto-page-about .usauto-page-breadcrumb__crumb--home:focus-visible {
	color: var(--wp--preset--color--yellow);
}

body.usauto-page-about .usauto-page-breadcrumb__line {
	border-top-color: rgba(255, 255, 255, 0.5);
}

/* --- Promo mese (archive): breadcrumb + hero sullo stesso sfondo ROSSO. ---
   Il wrapper .usauto-promo-archive-top avvolge breadcrumb + promo-archive-hero;
   lo sfondo rosso (texture) diventa un ::before full-bleed del wrapper così
   copre anche il breadcrumb (unico sfondo, come la scheda veicolo), e il bg
   proprio dell'hero viene disabilitato per non raddoppiarlo. */
.usauto-promo-archive-top {
	position: relative;
	isolation: isolate;
}

.usauto-promo-archive-top.is-layout-flow > * + * {
	margin-block-start: 0;
}

.usauto-promo-archive-top::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background-image: url(assets/textures/hero-bg-rossa.png?v=0.1);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	z-index: -1;
	pointer-events: none;
}

/* Dentro il wrapper l'hero non porta il proprio bg (lo dà il ::before). */
.usauto-promo-archive-top .usauto-promo-archive-hero--has-bg {
	background-image: none;
}

/* Breadcrumb sul rosso → testo/frecce/linea BIANCHI. */
.usauto-promo-archive-top .usauto-page-breadcrumb__crumb,
.usauto-promo-archive-top .usauto-page-breadcrumb__crumb--current,
.usauto-promo-archive-top .usauto-page-breadcrumb__separator {
	color: #fff;
}

.usauto-promo-archive-top .usauto-page-breadcrumb__crumb--home:hover,
.usauto-promo-archive-top .usauto-page-breadcrumb__crumb--home:focus-visible {
	color: var(--wp--preset--color--yellow);
}

.usauto-promo-archive-top .usauto-page-breadcrumb__line {
	border-top-color: rgba(255, 255, 255, 0.5);
}

/* Stile mobile condiviso (come veicolo): Inter 12px, capitalize, voci
   ravvicinate su UNA riga, crumb corrente troncato con ellissi. */
@media (max-width: 768px) {
	.usauto-post-article .usauto-page-breadcrumb__container,
	.usauto-promo-single-hero .usauto-page-breadcrumb__container,
	.usauto-promo-archive-top .usauto-page-breadcrumb__container,
	body.usauto-page-about .usauto-page-breadcrumb__container {
		flex-wrap: nowrap;
		overflow: hidden;
		gap: 4px;
	}

	.usauto-post-article .usauto-page-breadcrumb__crumb,
	.usauto-promo-single-hero .usauto-page-breadcrumb__crumb,
	.usauto-promo-archive-top .usauto-page-breadcrumb__crumb,
	body.usauto-page-about .usauto-page-breadcrumb__crumb {
		font-family: "Inter", "Inter Tight", system-ui, -apple-system, sans-serif;
		font-size: 12px;
		text-transform: capitalize;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.usauto-post-article .usauto-page-breadcrumb__crumb--current,
	.usauto-promo-single-hero .usauto-page-breadcrumb__crumb--current,
	.usauto-promo-archive-top .usauto-page-breadcrumb__crumb--current,
	body.usauto-page-about .usauto-page-breadcrumb__crumb--current {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.usauto-post-article .usauto-page-breadcrumb__separator,
	.usauto-promo-single-hero .usauto-page-breadcrumb__separator,
	.usauto-promo-archive-top .usauto-page-breadcrumb__separator,
	body.usauto-page-about .usauto-page-breadcrumb__separator {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
	}
}

.usauto-single-layout__container {
	display: grid;
	grid-template-columns: 1fr 475px;
	gap: 48px;
	align-items: start;
}

/* WP applica `is-layout-flow > * + * { margin-block-start: 24px }` di
   default sui group children. Sul grid container ci spinge il secondo
   item (info) giù di 24px, rompendo l'allineamento. Override. */
.usauto-single-layout__container.is-layout-flow > * + *,
.usauto-single-layout__container > * {
	margin-block-start: 0;
}

@media (max-width: 1024px) {
	.usauto-single-layout__container {
		/* `minmax(0, 1fr)` invece di `1fr`: previene che un child
		   con min-content > viewport (es. product-info width 475px)
		   faccia esplodere la colonna oltre la viewport mobile. */
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* Colonna sinistra: galleria + tab DETTAGLI/OPTIONAL/DESCRIZIONE impilati.
   Il product-tabs, dentro questa colonna, riempie la larghezza disponibile
   (niente padding verticale/orizzontale né max-width extra pensati per il
   full-width). */
.usauto-single-layout__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.usauto-single-layout__main.is-layout-flow > * + * {
	margin-block-start: 0;
}

.usauto-single-layout__main .usauto-product-tabs {
	width: 100%;
	padding-block: 0;
}

.usauto-single-layout__main .usauto-product-tabs__container {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.usauto-single-layout__main .usauto-product-tabs__container > * {
	max-width: 100%;
}

/* Mobile: la sezione tabs va full-bleed — lo sfondo grigio deve arrivare ai
   bordi del viewport, annullando il padding orizzontale 32px del layout. Il
   contenuto resta rientrato grazie al padding del __container. In più, 30px
   sopra il box dei tab (override del padding-block:0 ereditato). */
@media (max-width: 767px) {
	.usauto-single-layout__main .usauto-product-tabs {
		/* width:auto (override del width:100% del layout) + margini negativi
		   = la sezione si allarga fino ai bordi, non si limita a scorrere. */
		width: auto;
		margin-left: -32px;
		margin-right: -32px;
		/* Sfondo grigio full-bleed, ma contenuto distanziato 30px dai bordi
		   (il __container ha padding:0 nel layout). box-sizing:border-box
		   mantiene la larghezza full-bleed nonostante il padding. */
		padding-top: 30px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* Colonna aside destra: info prodotto + calcolatore rata impilati e sticky
   come un unico blocco (il calcolatore era originariamente dentro la card
   info sticky). Neutralizziamo lo sticky interno di product-info così che a
   scorrere sia l'intero gruppo a restare fermo. */
.usauto-single-layout__aside {
	align-self: start;
	position: sticky;
	top: 24px;
}

.usauto-single-layout__aside > * + * {
	margin-block-start: 24px;
}

.usauto-single-layout__aside .usauto-product-info,
.usauto-single-layout__aside .usauto-product-info__inner {
	width: 100%;
	position: static;
	top: auto;
}

@media (max-width: 1024px) {
	.usauto-single-layout__aside {
		position: static;
		top: auto;
	}

	/* Mobile: le tabs (DETTAGLI/OPTIONAL) vanno DOPO le info prodotto e il
	   box "Come preferisci pagare" (calcolatore rata). main e aside
	   diventano display:contents così gallery, info, calcolatore e tabs
	   condividono un unico flusso a colonna singola nel grid del container
	   e si riordinano con `order`. Lo spacing tra i blocchi è dato dal
	   `gap` del container. */
	.usauto-single-layout__main,
	.usauto-single-layout__aside {
		display: contents;
	}

	.usauto-single-layout__aside > * + * {
		margin-block-start: 0;
	}

	.usauto-single-layout__main > .usauto-product-gallery {
		order: 1;
	}

	.usauto-single-layout__aside > .usauto-product-info {
		order: 2;
	}

	.usauto-single-layout__aside > .usauto-fc {
		order: 3;
	}

	.usauto-single-layout__main > .usauto-product-tabs {
		order: 4;
	}
}

/* ---- Single promo (single-usauto_promo): layout 2-col ---------------
   Stessa logica del single product: main (gallery + post_content) a
   sinistra, info sidebar 475px a destra. Definito qui perché il wrapper
   è un wp:group nel template single-usauto_promo.html.
   Figma node 229:2317. */

/* Wrapper "hero" single promo: breadcrumb + layout sulla stessa texture
   chiara (come .usauto-single-hero per la scheda veicolo). */
.usauto-promo-single-hero {
	position: relative;
	isolation: isolate;
}

/* Niente gap flow tra breadcrumb e layout dentro il wrapper. */
.usauto-promo-single-hero.is-layout-flow > * + * {
	margin-block-start: 0;
}

.usauto-promo-single-layout {
	position: relative;
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}

/* Sfondo (texture halftone chiara) dietro l'area della singola promo
   (breadcrumb + layout): full-bleed a tutta larghezza, ancorato in ALTO così
   la texture sta dietro al breadcrumb e alla cima del layout (come il giallo
   della scheda veicolo), non a metà pagina. */
.usauto-promo-single-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background-image: url(assets/textures/hero-bg-bianca.png?v=0.1);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	z-index: -1;
	pointer-events: none;
}

.usauto-promo-single-layout__container {
	display: grid;
	grid-template-columns: 1fr 475px;
	gap: 48px;
	align-items: start;
}

/* Colonna destra (occhiello + info + CTA) sticky: resta ferma allo scroll
   mentre scorre la colonna sinistra (gallery + testo lungo). Stessa logica
   del single product. Sotto 1024px il layout collassa e torna statica. */
.usauto-promo-single-layout__container > .usauto-promo-info {
	align-self: start;
	position: sticky;
	top: 24px;
}

@media (max-width: 1024px) {
	.usauto-promo-single-layout__container > .usauto-promo-info {
		position: static;
		top: auto;
	}
}

/* Solo il contenuto testuale sotto la foto (post_content) va incapsulato
   in una card bianca stondata con bordino grigio: sopra la texture di
   sfondo il testo lungo non sarebbe leggibile. Gallery e info restano fuori. */
.usauto-promo-single-layout__main .wp-block-post-content,
.usauto-promo-single-layout__main .entry-content {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 32px;
}

/* Override del `is-layout-flow > * + *` di WP (margin-block-start: 24px
   sui figli del group) per non spingere giù la sidebar info. Vedi
   commento analogo su .usauto-single-layout__container. */
.usauto-promo-single-layout__container.is-layout-flow > * + *,
.usauto-promo-single-layout__container > * {
	margin-block-start: 0;
}

/* Col sx: dentro c'è gallery + post_content. La gallery resta in alto,
   il post_content scorre sotto con uno spacing dedicato. */
.usauto-promo-single-layout__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.usauto-promo-single-layout__main.is-layout-flow > * + * {
	margin-block-start: 0;
}

@media (max-width: 1024px) {
	.usauto-promo-single-layout__container {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ---- Archive product (cerca-auto): layout 2-col ----------------------
   Layout sidebar (filtri) + content (toolbar+grid+pagination). Sidebar
   fissa 277px, gap, products fills remaining. Definito qui (e non nel
   block.json di products-archive) perché il wrapper è un wp:group nel
   template archive-product.html, non un nostro blocco custom. */

.usauto-archive-intro {
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-left: auto;
	margin-right: auto;
	/* Padding-inline solo sotto a 1170+64=1234 (viewport mobile/tablet)
	   per evitare contenuto attaccato ai bordi. Desktop wide → 0 per
	   allinearsi a header e breadcrumb (full max-width 1170 senza pad). */
}

@media (max-width: 1233px) {
	.usauto-archive-intro {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* Forza left-alignment: il group è layout=default (flow), niente
   centering automatico via is-layout-constrained. Inoltre togliamo
   max-width sui figli per non avere il classico "auto margin centers"
   trick di WP. */
.usauto-archive-intro__title,
.usauto-archive-intro__subtitle {
	max-width: 673px;
	margin-left: 0 !important;
	margin-right: auto;
	text-align: left;
}

.usauto-archive-layout {
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-left: auto;
	margin-right: auto;
	/* Padding-inline solo su mobile/tablet (vedi nota su archive-intro). */
}

@media (max-width: 1233px) {
	.usauto-archive-layout {
		padding-left: 32px;
		padding-right: 32px;
	}
}

.usauto-archive-layout__grid {
	display: grid;
	grid-template-columns: 277px 1fr;
	gap: 48px;
	align-items: start;
}

.usauto-archive-sidebar {
	position: sticky;
	top: 24px;
	min-height: 200px;
}

.usauto-archive-sidebar__placeholder {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--wp--preset--color--line-strong);
	border-radius: 6px;
	text-align: center;
}

@media (max-width: 900px) {
	.usauto-archive-layout__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.usauto-archive-sidebar {
		position: static;
	}
}

/* ---- Single post (blog): featured image overlap + body typography ---
   La featured image sale di -64px sulla hero compatta (`usauto/post-hero`)
   creando una "card che taglia" la sezione viola — micro-momento di
   delight coerente col linguaggio brand (offset signature). Il body
   articolo ha max-width ridotta (720px) per leggibilità ottimale: line
   length 65-75 char con Inter Tight 18px.
*/

/* Sfondo fucsia (texture halftone + taglio) dietro TUTTO l'articolo single:
   full-bleed a tutta larghezza, ancorato in alto; sotto il taglio la texture
   è trasparente e mostra il bianco, dove scorre il corpo dell'articolo.
   Sostituisce la fascia hero col bordo dritto. */
.usauto-post-article {
	position: relative;
	isolation: isolate;
}

.usauto-post-article::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background-image: url(assets/textures/hero-bg-fucsia.png?v=0.1);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	z-index: -1;
	pointer-events: none;
}

/* Blog: sfondo spostato su del ~20% (il taglio sale, la fascia fucsia si
   accorcia). La texture è alta ~71vw a tutta larghezza, 20% ≈ 14vw. */
.usauto-post-article--blog::before {
	background-position: center -14vw;
}

/* Mobile: la hero blog è più compatta (padding ridotto), quindi il taglio
   a -14vw cadeva sul sottotitolo rendendolo illeggibile (bianco su bianco).
   Riportiamo il taglio a `center top`. */
@media (max-width: 767px) {
	.usauto-post-article--blog::before {
		background-position: center top;
	}
}

/* Sui telefoni (<=640px) la fascia fucsia deve restare alta e costante per
   coprire il sottotitolo (2-4 righe). NON usiamo `max()` in background-size:
   Safari iOS può ignorarlo e far ricadere il valore sul base `100% auto`,
   che si accorcia coi viewport piccoli e taglia il testo. Fissiamo invece
   una larghezza-immagine di 640px (fascia ~262px): full-bleed perché
   640px >= viewport a <=640, e altezza indipendente dal viewport. */
@media (max-width: 640px) {
	.usauto-post-article--blog::before {
		background-size: 640px auto;
	}
}

.usauto-post-featured {
	width: 100%;
	box-sizing: border-box;
}

.usauto-post-featured,
.usauto-post-featured *,
.usauto-post-featured *::before,
.usauto-post-featured *::after {
	box-sizing: border-box;
}

.usauto-post-featured__container {
	max-width: 870px;
	margin: -64px auto 0;
	padding: 0 32px;
}

.usauto-post-featured__container .wp-block-post-featured-image {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 8px 8px 0 0 var(--wp--preset--color--yellow);
}

.usauto-post-featured__container .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

@media (max-width: 700px) {
	.usauto-post-featured__container {
		max-width: 100%;
		margin-top: -32px;
		padding: 0 16px;
	}

	.usauto-post-featured__container .wp-block-post-featured-image {
		box-shadow: 4px 4px 0 0 var(--wp--preset--color--yellow);
	}
}

/* ---- Body articolo: typography curata ---------------------------------
   Tipografia "long-form" per il post_content del blog. Token già definiti
   nel theme.json (font display=Anton, body=Inter Tight). Drop-cap sulla
   prima lettera del primo paragrafo per editorial feel.
*/

.usauto-post-body {
	width: 100%;
	padding-block: 64px 80px;
	box-sizing: border-box;
}

.usauto-post-body__container {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 32px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--violet-1);
}

/* Reset margine del block-gap di WP per controllare lo spacing manuale */
.usauto-post-body__container > * + * {
	margin-block-start: 1.5em;
}

.usauto-post-body__container p {
	margin: 0;
}

.usauto-post-body__container h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(28px, 1.5rem + 1.5vw, 36px);
	line-height: 1.15;
	color: var(--wp--preset--color--violet-1);
	text-transform: uppercase;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

.usauto-post-body__container h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 1.25rem + 1vw, 28px);
	line-height: 1.2;
	color: var(--wp--preset--color--violet-1);
	text-transform: uppercase;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

.usauto-post-body__container h2 + p,
.usauto-post-body__container h3 + p {
	margin-block-start: 0.75em;
}

.usauto-post-body__container a {
	color: var(--wp--preset--color--magenta);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 150ms ease;
}

.usauto-post-body__container a:hover,
.usauto-post-body__container a:focus-visible {
	color: var(--wp--preset--color--violet-1);
}

.usauto-post-body__container strong {
	color: var(--wp--preset--color--violet-1);
	font-weight: 700;
}

.usauto-post-body__container ul,
.usauto-post-body__container ol {
	margin: 0;
	padding-left: 1.25em;
}

.usauto-post-body__container ul li,
.usauto-post-body__container ol li {
	margin-block-start: 0.5em;
}

.usauto-post-body__container ul li::marker {
	color: var(--wp--preset--color--magenta);
}

.usauto-post-body__container blockquote {
	margin: 0;
	padding: 24px 28px;
	border-left: 4px solid var(--wp--preset--color--yellow);
	background-color: var(--wp--preset--color--surface-1);
	border-radius: 0 12px 12px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(20px, 1.2rem + 0.5vw, 24px);
	line-height: 1.3;
	color: var(--wp--preset--color--violet-1);
}

.usauto-post-body__container blockquote p {
	margin: 0;
}

.usauto-post-body__container img,
.usauto-post-body__container figure {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.usauto-post-body__container figure {
	margin: 0;
}

.usauto-post-body__container figcaption {
	margin-block-start: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--violet-3);
	font-style: italic;
	text-align: center;
}

/* Drop cap sulla prima lettera del primo paragrafo dell'articolo. */
.usauto-post-body__container > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--display);
	font-size: 72px;
	line-height: 0.85;
	padding: 6px 12px 0 0;
	color: var(--wp--preset--color--magenta);
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.usauto-post-body__container {
		padding: 0 20px;
		font-size: 17px;
	}

	.usauto-post-body__container > p:first-of-type::first-letter {
		font-size: 56px;
		padding-right: 10px;
	}
}

/* ======================================================================
   WooCommerce customer pages — Cart, Checkout, My Account
   Adatta i blocchi/elementi WooCommerce al design system "Il Tuo KM Zero".
   Scope: body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account.
   Nessun !important; specificità ottenuta via prefisso body class + .entry-content
   o .wp-block-post-content.
   ====================================================================== */

/* ---- Wrapper / layout container -------------------------------------- */

body.woocommerce-cart .wp-block-post-content,
body.woocommerce-checkout .wp-block-post-content,
body.woocommerce-account .wp-block-post-content,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
	max-width: 1170px;
	margin-inline: auto;
	padding-inline: 32px;
	padding-block: 48px 96px;
	box-sizing: border-box;
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--body);
}

@media (max-width: 700px) {
	body.woocommerce-cart .wp-block-post-content,
	body.woocommerce-checkout .wp-block-post-content,
	body.woocommerce-account .wp-block-post-content,
	body.woocommerce-cart .entry-content,
	body.woocommerce-checkout .entry-content,
	body.woocommerce-account .entry-content {
		padding-inline: 20px;
		padding-block: 32px 64px;
	}
}

/* ---- Tipografia base interna ----------------------------------------- */

body.woocommerce-cart .entry-content h1,
body.woocommerce-cart .entry-content h2,
body.woocommerce-cart .entry-content h3,
body.woocommerce-cart .wp-block-post-content h1,
body.woocommerce-cart .wp-block-post-content h2,
body.woocommerce-cart .wp-block-post-content h3,
body.woocommerce-checkout .entry-content h1,
body.woocommerce-checkout .entry-content h2,
body.woocommerce-checkout .entry-content h3,
body.woocommerce-checkout .wp-block-post-content h1,
body.woocommerce-checkout .wp-block-post-content h2,
body.woocommerce-checkout .wp-block-post-content h3,
body.woocommerce-account .entry-content h1,
body.woocommerce-account .entry-content h2,
body.woocommerce-account .entry-content h3,
body.woocommerce-account .wp-block-post-content h1,
body.woocommerce-account .wp-block-post-content h2,
body.woocommerce-account .wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--violet-1);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 400;
	line-height: 1.05;
}

body.woocommerce-cart .entry-content a,
body.woocommerce-checkout .entry-content a,
body.woocommerce-account .entry-content a,
body.woocommerce-cart .wp-block-post-content a,
body.woocommerce-checkout .wp-block-post-content a,
body.woocommerce-account .wp-block-post-content a {
	color: var(--wp--preset--color--magenta);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-cart .entry-content a:hover,
body.woocommerce-checkout .entry-content a:hover,
body.woocommerce-account .entry-content a:hover {
	color: var(--wp--preset--color--violet-1);
}

/* Rimuovi text-transform random di WC default */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce,
body.woocommerce-cart .woocommerce *,
body.woocommerce-checkout .woocommerce *,
body.woocommerce-account .woocommerce * {
	text-transform: none;
}

/* Riapplica uppercase solo dove serve (headings, button, badge, table th) */
body.woocommerce-cart .woocommerce h1,
body.woocommerce-cart .woocommerce h2,
body.woocommerce-cart .woocommerce h3,
body.woocommerce-checkout .woocommerce h1,
body.woocommerce-checkout .woocommerce h2,
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-account .woocommerce h1,
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3 {
	text-transform: uppercase;
}

/* ---- Buttons (WC + blocks) ------------------------------------------- */

body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce input[type="submit"],
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce input[type="submit"],
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce input[type="submit"],
body.woocommerce-cart .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-button,
body.woocommerce-account .wc-block-components-button {
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 400;
	padding: 16px 24px;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce input[type="submit"]:hover,
body.woocommerce-checkout .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce input[type="submit"]:hover,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce input[type="submit"]:hover,
body.woocommerce-cart .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-components-button:hover,
body.woocommerce-account .wc-block-components-button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
}

/* Button secondario / outline (es. "Aggiorna carrello", "Continua shopping") */
body.woocommerce-cart .woocommerce button.button[name="update_cart"],
body.woocommerce-cart .woocommerce a.button.wc-backward,
body.woocommerce-account .woocommerce a.button.wc-backward,
body.woocommerce-cart .woocommerce button.button.alt[name="update_cart"] {
	background: transparent;
	color: var(--wp--preset--color--violet-1);
	border: 1px solid var(--wp--preset--color--violet-3);
	padding: 12px 16px;
}

body.woocommerce-cart .woocommerce button.button[name="update_cart"]:hover,
body.woocommerce-cart .woocommerce a.button.wc-backward:hover,
body.woocommerce-account .woocommerce a.button.wc-backward:hover {
	background: var(--wp--preset--color--violet-1);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--violet-1);
}

/* "Procedi al checkout" / "Place order" più grandi */
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout .woocommerce #place_order,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	padding: 20px 32px;
	font-size: 16px;
	width: 100%;
}

/* ---- Inputs / selects / textarea ------------------------------------- */

body.woocommerce-cart .woocommerce input[type="text"],
body.woocommerce-cart .woocommerce input[type="email"],
body.woocommerce-cart .woocommerce input[type="tel"],
body.woocommerce-cart .woocommerce input[type="password"],
body.woocommerce-cart .woocommerce input[type="number"],
body.woocommerce-cart .woocommerce input[type="url"],
body.woocommerce-cart .woocommerce select,
body.woocommerce-cart .woocommerce textarea,
body.woocommerce-checkout .woocommerce input[type="text"],
body.woocommerce-checkout .woocommerce input[type="email"],
body.woocommerce-checkout .woocommerce input[type="tel"],
body.woocommerce-checkout .woocommerce input[type="password"],
body.woocommerce-checkout .woocommerce input[type="number"],
body.woocommerce-checkout .woocommerce input[type="url"],
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea,
body.woocommerce-account .woocommerce input[type="text"],
body.woocommerce-account .woocommerce input[type="email"],
body.woocommerce-account .woocommerce input[type="tel"],
body.woocommerce-account .woocommerce input[type="password"],
body.woocommerce-account .woocommerce input[type="number"],
body.woocommerce-account .woocommerce input[type="url"],
body.woocommerce-account .woocommerce select,
body.woocommerce-account .woocommerce textarea,
body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-account .wc-block-components-text-input input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--violet-1);
	background: var(--wp--preset--color--white);
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease;
	width: 100%;
	box-sizing: border-box;
}

body.woocommerce-cart .woocommerce input:focus,
body.woocommerce-cart .woocommerce select:focus,
body.woocommerce-cart .woocommerce textarea:focus,
body.woocommerce-checkout .woocommerce input:focus,
body.woocommerce-checkout .woocommerce select:focus,
body.woocommerce-checkout .woocommerce textarea:focus,
body.woocommerce-account .woocommerce input:focus,
body.woocommerce-account .woocommerce select:focus,
body.woocommerce-account .woocommerce textarea:focus {
	border-color: var(--wp--preset--color--magenta);
	outline: none;
}

/* Label form */
body.woocommerce-cart .woocommerce label,
body.woocommerce-checkout .woocommerce label,
body.woocommerce-account .woocommerce label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--violet-1);
	margin-bottom: 6px;
	display: inline-block;
}

/* ---- Tables ---------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table,
body.woocommerce-account .woocommerce table.shop_table,
body.woocommerce-account .woocommerce table.account-orders-table {
	border-collapse: collapse;
	width: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.account-orders-table th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--violet-3);
	font-weight: 400;
	padding: 16px 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: transparent;
	text-align: left;
}

body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table td,
body.woocommerce-account .woocommerce table.shop_table td,
body.woocommerce-account .woocommerce table.account-orders-table td {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--violet-1);
	padding: 16px 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: transparent;
	vertical-align: middle;
}

body.woocommerce-cart .woocommerce table.shop_table tfoot th,
body.woocommerce-cart .woocommerce table.shop_table tfoot td,
body.woocommerce-checkout .woocommerce table.shop_table tfoot th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot td {
	font-weight: 600;
}

/* ---- Pricing --------------------------------------------------------- */

body.woocommerce-cart .woocommerce .amount,
body.woocommerce-checkout .woocommerce .amount,
body.woocommerce-account .woocommerce .amount,
body.woocommerce-cart .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-Price-amount,
body.woocommerce-account .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--violet-1);
	letter-spacing: 0.01em;
}

body.woocommerce-cart .woocommerce .woocommerce-Price-currencySymbol,
body.woocommerce-checkout .woocommerce .woocommerce-Price-currencySymbol,
body.woocommerce-account .woocommerce .woocommerce-Price-currencySymbol {
	font-size: 0.85em;
	margin-right: 2px;
}

body.woocommerce-cart .woocommerce .order-total .amount,
body.woocommerce-checkout .woocommerce .order-total .amount {
	color: var(--wp--preset--color--magenta);
	font-size: 1.25em;
}

/* ---- Cart page ------------------------------------------------------- */

body.woocommerce-cart .woocommerce .cart_item td.product-name a {
	color: var(--wp--preset--color--violet-1);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-cart .woocommerce .cart_item td.product-name a:hover {
	color: var(--wp--preset--color--magenta);
}

body.woocommerce-cart .woocommerce .quantity input.qty {
	width: 80px;
	text-align: center;
	padding: 10px 8px;
}

/* Coupon form: layout inline */
body.woocommerce-cart .woocommerce .cart .coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

body.woocommerce-cart .woocommerce .cart .coupon label {
	margin-bottom: 0;
}

body.woocommerce-cart .woocommerce .cart .coupon input.input-text {
	width: auto;
	min-width: 220px;
	flex: 1 1 220px;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 24px;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals h2,
body.woocommerce-cart .woocommerce .cross-sells h2 {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-1);
	margin-top: 0;
	margin-bottom: 16px;
}

/* Block-based cart */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wp-block-woocommerce-filled-cart-block {
	color: var(--wp--preset--color--violet-1);
}

body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 24px;
}

/* ---- Checkout page --------------------------------------------------- */

body.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: 1170px;
	margin-inline: auto;
}

body.woocommerce-checkout .woocommerce form.checkout h3,
body.woocommerce-checkout .woocommerce #order_review_heading {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-1);
	font-size: 22px;
	margin-bottom: 16px;
	letter-spacing: 0.02em;
}

body.woocommerce-checkout .woocommerce #payment {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 24px;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods {
	background: transparent;
	border: 0;
	padding: 0;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 12px 0;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li:last-child {
	border-bottom: 0;
}

body.woocommerce-checkout .woocommerce .woocommerce-checkout-review-order {
	background: var(--wp--preset--color--surface-1);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 24px;
}

/* ---- My Account ------------------------------------------------------ */

body.woocommerce-account .woocommerce {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	grid-template-areas:
		"notices"
		"nav"
		"content";
}

body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-area: notices;
}

body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
	grid-area: nav;
	width: auto;
	float: none;
	margin: 0;
}

body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	grid-area: content;
	width: auto;
	float: none;
	margin: 0;
}

@media (min-width: 900px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 320px 1fr;
		column-gap: 48px;
		row-gap: 24px;
		align-items: start;
		grid-template-areas:
			"notices notices"
			"nav content";
	}
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-3);
	padding: 14px 20px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--surface-1);
	color: var(--wp--preset--color--violet-1);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
}

body.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--wp--preset--color--violet-1);
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-1);
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--magenta);
	text-decoration: underline;
}

/* Addresses page: 2-col grid (override WC float layout) */
body.woocommerce-account .woocommerce-MyAccount-content .u-columns,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set,
body.woocommerce-account .woocommerce-MyAccount-content .addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content .u-columns::before,
body.woocommerce-account .woocommerce-MyAccount-content .u-columns::after,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set::before,
body.woocommerce-account .woocommerce-MyAccount-content .col2-set::after,
body.woocommerce-account .woocommerce-MyAccount-content .addresses::before,
body.woocommerce-account .woocommerce-MyAccount-content .addresses::after {
	content: none;
	display: none;
}

@media (min-width: 768px) {
	body.woocommerce-account .woocommerce-MyAccount-content .u-columns,
	body.woocommerce-account .woocommerce-MyAccount-content .col2-set,
	body.woocommerce-account .woocommerce-MyAccount-content .addresses {
		grid-template-columns: 1fr 1fr;
	}
}

body.woocommerce-account .woocommerce-MyAccount-content .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .col-2,
body.woocommerce-account .woocommerce-MyAccount-content .u-column1,
body.woocommerce-account .woocommerce-MyAccount-content .u-column2 {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	background: var(--wp--preset--color--surface-1);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 24px;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 22px;
	line-height: 1.1;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--magenta);
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--magenta);
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
	font-style: normal;
	color: var(--wp--preset--color--violet-3);
	margin: 0;
	line-height: 1.6;
}

/* ---- Login / register / reset password ------------------------------- */

body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword {
	max-width: 480px;
	margin-inline: auto;
	background: var(--wp--preset--color--surface-1);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 32px;
	box-sizing: border-box;
}

body.woocommerce-account .u-columns.col2-set {
	display: grid;
	gap: 32px;
}

@media (min-width: 760px) {
	body.woocommerce-account .u-columns.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

body.woocommerce-account .u-columns .u-column1,
body.woocommerce-account .u-columns .u-column2 {
	width: 100%;
	float: none;
	max-width: none;
}

body.woocommerce-account .u-columns h2 {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	font-size: 32px;
	color: var(--wp--preset--color--violet-1);
	margin-bottom: 24px;
	letter-spacing: 0.02em;
}

body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .lost_password a {
	color: var(--wp--preset--color--magenta);
	text-decoration: underline;
	font-size: 14px;
}

/* Checkbox "Ricordami" e privacy text */
body.woocommerce-account .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--violet-3);
	font-weight: 400;
}

body.woocommerce-account .woocommerce-form__label-for-checkbox input[type="checkbox"],
body.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
	accent-color: var(--wp--preset--color--magenta);
}

/* ---- Notices --------------------------------------------------------- */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-message {
	background: #E6F9F3;
	border-left: 4px solid #00A878;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	margin-bottom: 24px;
	list-style: none;
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error,
body.woocommerce-cart .woocommerce-notice--error,
body.woocommerce-checkout .woocommerce-notice--error,
body.woocommerce-account .woocommerce-notice--error {
	background: #FFEEEE;
	border-left: 4px solid #E52222;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	margin-bottom: 24px;
	list-style: none;
}

body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-account .woocommerce-info {
	background: var(--wp--preset--color--surface-1);
	border-left: 4px solid var(--wp--preset--color--cyan);
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	margin-bottom: 24px;
	list-style: none;
}

body.woocommerce-cart .woocommerce-message a.button,
body.woocommerce-checkout .woocommerce-message a.button,
body.woocommerce-account .woocommerce-message a.button,
body.woocommerce-cart .woocommerce-info a.button,
body.woocommerce-checkout .woocommerce-info a.button,
body.woocommerce-account .woocommerce-info a.button {
	margin-left: 12px;
	padding: 8px 16px;
	font-size: 12px;
}

/* ---- WC blocks buttons (global: cart + checkout + mini-cart drawer) -- */

/* Primary: WC block buttons (filled / contained) — appear everywhere
   including the mini-cart drawer in the header on any page. */
.wc-block-components-button.wp-element-button,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__shopping-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 400;
	padding: 16px 24px;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	min-height: 48px;
}

/* Force readable text inside nested button spans (WC wraps label in
   .wc-block-components-button__text). */
.wc-block-components-button.wp-element-button,
.wc-block-components-button.wp-element-button .wc-block-components-button__text,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer-checkout .wc-block-components-button__text,
.wc-block-mini-cart__shopping-button,
.wc-block-mini-cart__shopping-button .wc-block-components-button__text,
.wc-block-cart__submit-button,
.wc-block-cart__submit-button .wc-block-components-button__text {
	color: var(--wp--preset--color--white);
}

.wc-block-components-button.wp-element-button:hover,
.wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__shopping-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* Outline variant: "View cart" in mini-cart, "Continue shopping" links. */
.wc-block-components-button.wp-element-button.is-style-outline,
.wc-block-mini-cart__footer-cart {
	background: transparent;
	color: var(--wp--preset--color--violet-1);
	border: 1px solid var(--wp--preset--color--violet-3);
}

.wc-block-components-button.wp-element-button.is-style-outline,
.wc-block-components-button.wp-element-button.is-style-outline .wc-block-components-button__text,
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer-cart .wc-block-components-button__text {
	color: var(--wp--preset--color--violet-1);
}

.wc-block-components-button.wp-element-button.is-style-outline:hover,
.wc-block-mini-cart__footer-cart:hover {
	background: var(--wp--preset--color--violet-1);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--violet-1);
	text-decoration: none;
}

.wc-block-components-button.wp-element-button.is-style-outline:hover .wc-block-components-button__text,
.wc-block-mini-cart__footer-cart:hover .wc-block-components-button__text {
	color: var(--wp--preset--color--white);
}

/* Mini-cart drawer footer: vertical stack with consistent gap. */
.wc-block-mini-cart__footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}

.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__shopping-button {
	width: 100%;
}

/* ---- Mascot float + sway (hero, promo-banner, mariano-intro, ecc.) ---- */

/* Float + sway: due animazioni indipendenti compongono il movimento.
   - float (~3s): oscillazione verticale ±16px.
   - sway (~4.2s): rotazione ±3deg.
   Durate co-prime → la traiettoria non sembra mai ripetersi.
   Uso `translate` / `rotate` CSS properties individuali (non
   `transform`) così i mascot che hanno `transform: translate(-50%,-50%)`
   per centring restano centrati durante l'animazione. */

@keyframes usauto-mascot-float {
	0%, 100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -16px;
	}
}

@keyframes usauto-mascot-sway {
	0%, 100% {
		rotate: -3deg;
	}
	50% {
		rotate: 3deg;
	}
}

/* ---- Reduced motion respect ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-block-button .wp-block-button__link:hover {
		transform: none;
	}
}

/* =========================================================================
   Filter Everything Pro — restyle pixel-pari al Figma 116:3306
   Solo overrides di STILE, nessuna modifica della struttura del plugin.
   Scope: dentro la sidebar archive prodotti (.usauto-archive-sidebar).
   ========================================================================= */

/* Container globale: rimuovi padding/margin di default del widget WP. */
.usauto-fe-widget .widget_wpc_filters_widget {
	margin: 0;
	padding: 0;
}

.usauto-fe-widget .wpc-filters-main-wrap {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
}

/* Nasconde il bottone "Filtri" mobile open (è un toggle che nel nostro
   layout sidebar desktop non serve — la sidebar è sempre visibile). */
.usauto-fe-widget .wpc-filters-open-button-container,
.usauto-fe-widget .wpc-widget-close-container {
	display: none;
}

/* Container content: layout verticale con gap consistente fra sezioni. */
.usauto-fe-widget .wpc-filters-widget-content {
	display: block;
}

.usauto-fe-widget .wpc-filters-widget-containers-wrapper,
.usauto-fe-widget .wpc-filters-scroll-container,
.usauto-fe-widget .wpc-filters-widget-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* "Posts found" counter (es. "441 auto trovate"): caption discreta. */
.usauto-fe-widget .wpc-posts-found {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-3);
}

.usauto-fe-widget .wpc-posts-found-hidden {
	display: none;
}

/* Chips dei filtri attivi: pill cyan piccola, removibile. */
.usauto-fe-widget .wpc-filter-chips-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.usauto-fe-widget .wpc-filter-chips-list:empty,
.usauto-fe-widget .wpc-empty-chips-container {
	display: none;
}

.usauto-fe-widget .wpc-filter-chips-list li {
	margin: 0;
	padding: 4px 10px;
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--violet-1);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.usauto-fe-widget .wpc-filter-chips-list a {
	color: inherit;
	text-decoration: none;
}

/* ---- Section / blocco filtro singolo (label + control) -------------- */
.usauto-fe-widget .wpc-filters-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* UL checkbox/radio: reset margin (WP/plugin lo mette a 16px top). */
.usauto-fe-widget .wpc-filter-content ul,
.usauto-fe-widget .wpc-filters-ul-list,
.usauto-fe-widget ul.wpc-filters-radio,
.usauto-fe-widget ul.wpc-filters-checkboxes,
.usauto-fe-widget .wpc-checkboxes-list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Label "MARCA", "MODELLO", "CAMBIO", ... */
.usauto-fe-widget .wpc-filter-header,
.usauto-fe-widget .wpc-filter-title,
.usauto-archive-sidebar .widget-title {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-3);
}

/* Sezioni "collapsible" (Cambio, Categoria, Lifestyle): il plugin
   avvolge il testo in <button><span class="wpc-wrap-icons">…</span></button>.
   Default browser su <button> = bold + font-size più grande → override
   eredita lo stile della label parent. */
.usauto-fe-widget .wpc-filter-title button,
.usauto-fe-widget .wpc-filter-title button:hover,
.usauto-fe-widget .wpc-filter-title button:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	outline: none;
}

.usauto-fe-widget .wpc-filter-title button .wpc-wrap-icons {
	flex: 1 1 auto;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* Caret-down icona (.wpc-open-icon) — eredita color violet-3. */
.usauto-fe-widget .wpc-filter-title button .wpc-open-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--violet-3);
}

/* Filter content wrapper. */
.usauto-fe-widget .wpc-filter-content {
	margin: 0;
}

/* ---- Search field input ------------------------------------------- */
.usauto-fe-widget .wpc-search-field-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid var(--wp--preset--color--violet-4);
	border-radius: 6px;
	background: var(--wp--preset--color--surface-0);
	padding: 0 12px;
	min-height: 44px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.usauto-fe-widget .wpc-search-field-wrapper:focus-within {
	border-color: var(--wp--preset--color--magenta);
}

/* Icona lente: il plugin la posiziona `absolute; left: 12px` e
   copre l'inizio del placeholder. Inverto a `right: 12px`. */
.usauto-fe-widget .wpc-search-icon {
	position: absolute !important;
	left: auto !important;
	right: 12px !important;
	color: var(--wp--preset--color--violet-3) !important;
	pointer-events: none;
}

/* Icona "clear" (×): la sposto a sinistra della lente. */
.usauto-fe-widget .wpc-search-clear-icon-wrapper {
	position: absolute;
	right: 36px;
}

/* Search input: il theme/WP applica un border 1px ai text input
   → doppio bordo visibile sopra al wrapper. Reset esplicito con
   `!important` per evitare regressioni da plugin CSS caricati dopo. */
.usauto-fe-widget .wpc-search-field {
	flex: 1 1 auto;
	width: 100%;
	border: 0 !important;
	background: transparent !important;
	/* Padding-right per fare spazio alla lente posizionata absolute
	   a destra (24px icona + 12px right). Left padding 0 perché il
	   wrapper ha già il suo padding orizzontale. */
	padding: 0 32px 0 0 !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--violet-1);
	outline: none !important;
	box-shadow: none !important;
}

.usauto-fe-widget .wpc-search-field::placeholder {
	color: var(--wp--preset--color--violet-3);
	opacity: 1;
}

.usauto-fe-widget .wpc-search-clear-icon-wrapper {
	flex-shrink: 0;
	margin-left: 8px;
}

.usauto-fe-widget .wpc-search-clear-icon {
	color: var(--wp--preset--color--violet-3);
	text-decoration: none;
	font-size: 18px;
}

/* ---- Select dropdown (Marca, Modello, Alimentazione, Anno) --------
   Il plugin sostituisce i <select> nativi con Select2: le regole sotto
   coprono sia il fallback native (no JS) sia il wrapper Select2. */
.usauto-fe-widget .wpc-filters-widget-select,
.usauto-fe-widget .wpc-filter-content select {
	width: 100%;
	min-height: 44px;
	padding: 10px 36px 10px 12px;
	border: 1px solid var(--wp--preset--color--violet-4);
	border-radius: 6px;
	background-color: var(--wp--preset--color--surface-0);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='14' height='14'><path fill='%231A0536' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--violet-1);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	box-shadow: none;
}

.usauto-fe-widget .wpc-filters-widget-select:focus,
.usauto-fe-widget .wpc-filter-content select:focus {
	outline: none;
	border-color: var(--wp--preset--color--magenta);
}

/* ---- Select2 wrapper override -----------------------------------
   Quando JS enhanced il <select>, Select2 inserisce un proxy DOM:
     .select2-container
       .select2-selection.select2-selection--single
         .select2-selection__rendered  ← testo
         .select2-selection__arrow     ← caret
   Stilizzo per matchare il design dei native select. */
.usauto-fe-widget .select2-container--default .select2-selection--single,
.usauto-fe-widget .select2-container .select2-selection--single {
	height: 44px !important;
	padding: 0 !important;
	border: 1px solid var(--wp--preset--color--violet-4) !important;
	border-radius: 6px !important;
	background-color: var(--wp--preset--color--surface-0) !important;
	outline: none !important;
	box-shadow: none !important;
}

.usauto-fe-widget .select2-container--default.select2-container--focus
	.select2-selection--single,
.usauto-fe-widget .select2-container--default.select2-container--open
	.select2-selection--single {
	border-color: var(--wp--preset--color--magenta) !important;
}

.usauto-fe-widget .select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	height: 42px !important;
	padding: 0 36px 0 12px !important;
	line-height: 42px !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--violet-1) !important;
}

.usauto-fe-widget .select2-container--default
	.select2-selection--single
	.select2-selection__placeholder {
	color: var(--wp--preset--color--violet-1) !important;
}

/* Caret: nascondo il caret nativo Select2 (un BAS triangolo) e
   uso uno pseudo con la stessa SVG dei native select. */
.usauto-fe-widget .select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	position: absolute;
	top: 0 !important;
	right: 0 !important;
	height: 42px !important;
	width: 36px !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='14' height='14'><path fill='%231A0536' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
}

.usauto-fe-widget .select2-container--default
	.select2-selection--single
	.select2-selection__arrow b {
	display: none !important;
}

/* Dropdown panel (lista opzioni che appare al click). */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--wp--preset--color--violet-4) !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 12px rgba(26, 5, 54, 0.08);
}

.select2-container--default .select2-results__option {
	padding: 8px 12px !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--violet-1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--wp--preset--color--magenta) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ---- Checkbox (es. "Cambio: Automatico / Manuale") ---------------- */
.usauto-fe-widget .wpc-term-item,
.usauto-fe-widget .wpc-checkboxes-list,
.usauto-fe-widget ul.wpc-filter-content {
	list-style: none;
	margin: 0;
	padding: 0;
}

.usauto-fe-widget .wpc-checkboxes-list,
.usauto-fe-widget ul.wpc-filter-content {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

.usauto-fe-widget .wpc-term-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.usauto-fe-widget .wpc-term-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--violet-1);
}

.usauto-fe-widget .wpc-term-item input[type="checkbox"],
.usauto-fe-widget .wpc-term-item input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--violet-4);
	border-radius: 6px;
	background-color: var(--wp--preset--color--surface-1);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	position: relative;
}

.usauto-fe-widget .wpc-term-item input[type="radio"] {
	border-radius: 999px;
}

.usauto-fe-widget .wpc-term-item input[type="checkbox"]:checked,
.usauto-fe-widget .wpc-term-item input[type="radio"]:checked {
	background-color: var(--wp--preset--color--magenta);
	border-color: var(--wp--preset--color--magenta);
}

.usauto-fe-widget .wpc-term-item input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='14' height='14'><path fill='%23ffffff' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.usauto-fe-widget .wpc-term-item input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
}

.usauto-fe-widget .wpc-term-item input:focus-visible {
	outline: 2px solid var(--wp--preset--color--magenta);
	outline-offset: 2px;
}

/* Count badge "(X)" accanto al label term — discreto. */
.usauto-fe-widget .wpc-term-count {
	margin-left: 4px;
	color: var(--wp--preset--color--violet-3);
	font-size: 13px;
	font-weight: 500;
}

/* ---- Range / numeric input (es. PREZZO Min/Max) ------------------- */
.usauto-fe-widget .wpc-range-inputs,
.usauto-fe-widget .wpc-filter-numeric-fields,
.usauto-fe-widget .wpc-filter-layout-range .wpc-filter-content {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

.usauto-fe-widget input[type="number"],
.usauto-fe-widget .wpc-range-input,
.usauto-fe-widget .wpc-filter-content input[type="text"]:not(.wpc-search-field) {
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--violet-4);
	border-radius: 6px;
	background-color: var(--wp--preset--color--surface-0);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--violet-1);
	outline: none;
	box-shadow: none;
	-moz-appearance: textfield;
}

.usauto-fe-widget input[type="number"]::placeholder,
.usauto-fe-widget .wpc-range-input::placeholder {
	color: var(--wp--preset--color--violet-1);
}

.usauto-fe-widget input[type="number"]:focus,
.usauto-fe-widget .wpc-range-input:focus {
	border-color: var(--wp--preset--color--magenta);
}

.usauto-fe-widget input[type="number"]::-webkit-outer-spin-button,
.usauto-fe-widget input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- Range slider jQuery UI (prezzo) ---------------------------- */
.usauto-fe-widget .wpc-filters-range-slider-wrapper { padding: 8px 8px 0; }

.usauto-fe-widget .wpc-filters-range-slider-control.ui-slider,
.usauto-fe-widget .ui-slider.ui-slider-horizontal {
	position: relative;
	height: 4px !important;
	background: var(--wp--preset--color--line-strong) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	margin: 8px 0;
}

.usauto-fe-widget .ui-slider .ui-slider-range,
.usauto-fe-widget .ui-slider-range.ui-widget-header {
	position: absolute;
	top: 0;
	height: 4px !important;
	background: var(--wp--preset--color--magenta) !important;
	border: 0 !important;
	border-radius: 999px !important;
}

.usauto-fe-widget .ui-slider .ui-slider-handle,
.usauto-fe-widget .ui-slider-handle.ui-state-default {
	position: absolute;
	top: 50% !important;
	transform: translate(-50%, -50%);
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	background: var(--wp--preset--color--magenta) !important;
	background-image: none !important;
	border: 2px solid var(--wp--preset--color--surface-0) !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 3px rgba(26, 5, 54, 0.25) !important;
	cursor: pointer;
	outline: none;
}

.usauto-fe-widget .ui-slider .ui-slider-handle:focus,
.usauto-fe-widget .ui-slider .ui-slider-handle.ui-state-active {
	background: var(--wp--preset--color--magenta) !important;
	box-shadow: 0 0 0 4px rgba(204, 0, 153, 0.2) !important;
}

/* noUiSlider fallback. */
.usauto-fe-widget .noUi-target {
	height: 4px;
	background: var(--wp--preset--color--line-strong);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}
.usauto-fe-widget .noUi-connect { background: var(--wp--preset--color--magenta); }
.usauto-fe-widget .noUi-handle {
	width: 16px; height: 16px; border-radius: 999px;
	background: var(--wp--preset--color--magenta);
	border: 2px solid var(--wp--preset--color--surface-0);
	box-shadow: 0 1px 3px rgba(26, 5, 54, 0.25);
	cursor: pointer;
}

/* Range form min/max inputs row. */
.usauto-fe-widget .wpc-filters-range-wrapper {
	display: flex; gap: 16px; margin-bottom: 12px;
}
.usauto-fe-widget .wpc-filters-range-column { flex: 1 1 0; min-width: 0; }
.usauto-fe-widget .wpc-filters-range-min,
.usauto-fe-widget .wpc-filters-range-max {
	width: 100%; height: 44px; padding: 0 12px;
	border: 1px solid var(--wp--preset--color--violet-4);
	border-radius: 6px;
	background: var(--wp--preset--color--surface-0);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px; font-weight: 500;
	color: var(--wp--preset--color--violet-1);
	outline: none;
	-moz-appearance: textfield;
}
.usauto-fe-widget .wpc-filters-range-min:focus,
.usauto-fe-widget .wpc-filters-range-max:focus {
	border-color: var(--wp--preset--color--magenta);
}

/* Fix colore violet-1 sui term link (li > label > a) — il default
   tema usa magenta per <a>, conflitto con il label del filtro. */
.usauto-fe-widget .wpc-filter-link,
.usauto-fe-widget .wpc-term-item label a {
	color: var(--wp--preset--color--violet-1) !important;
	text-decoration: none;
}
.usauto-fe-widget .wpc-filter-link:hover,
.usauto-fe-widget .wpc-term-item label a:hover {
	color: var(--wp--preset--color--magenta) !important;
}

/* Term item content wrapper: checkbox + label inline. */
.usauto-fe-widget .wpc-term-item-content-wrapper {
	display: inline-flex; align-items: center; gap: 10px;
}

/* ---- Bottoni del plugin (Apply / Reset / Search) ------------------ */
.usauto-fe-widget .wpc-filters-buttons-wrap,
.usauto-fe-widget .wpc-filter-search-button,
.usauto-fe-widget .wpc-filters-bottom-container,
.usauto-fe-widget .wpc-button-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.usauto-fe-widget .wpc-filters-submit-button,
.usauto-fe-widget .wpc-filters-apply-button,
.usauto-fe-widget .wpc-filters-search-submit,
.usauto-fe-widget button.wpc-button {
	width: 100%;
	padding: 16px;
	background-color: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--magenta);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-font-smoothing: antialiased;
}

.usauto-fe-widget .wpc-filters-submit-button:hover,
.usauto-fe-widget .wpc-filters-apply-button:hover,
.usauto-fe-widget button.wpc-button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
}

.usauto-fe-widget .wpc-filters-reset-button,
.usauto-fe-widget a.wpc-filters-reset,
.usauto-fe-widget .wpc-filters-clear-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px;
	background: transparent;
	color: var(--wp--preset--color--magenta);
	border: 1px solid var(--wp--preset--color--magenta);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.usauto-fe-widget .wpc-filters-reset-button:hover,
.usauto-fe-widget a.wpc-filters-reset:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
}

/* Spinner: lo lasciamo discreto, magenta. */
.usauto-fe-widget .wpc-spinner {
	color: var(--wp--preset--color--magenta);
}

/* =========================================================================
   Hero homepage: override widget Filter Everything dentro la search card
   per matchare il Figma 45:1825 (layout grid 2-col, bg surface-1,
   border line-strong, slider con tail yellow). Specificità maggiore di
   .usauto-fe-widget per vincere senza !important inutili.
   ========================================================================= */

/* Nascondi titoli sezione: nel Figma il testo "Marca/Modello/Alimentazione/
   Anno" sta DENTRO il select come placeholder, non come label sopra. */
.usauto-hero__search-filters .wpc-filter-header,
.usauto-hero__search-filters .wpc-filter-title,
.usauto-hero__search-filters .widget-title {
	display: none;
}

/* Eccezione: i blocchi PREZZO (range) e CAMBIO (radio) MOSTRANO la
   loro label sopra (i radio non hanno placeholder come i select). */
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filter-header,
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filter-title,
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-filter-header,
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-filter-title {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-3);
}

/* ---- Filtro CAMBIO (radio inline) — Figma 45:1825 ---------------- */
/* Sezione: gap interno (label → content) ridotto come per Prezzo. */
.usauto-hero__search-filters .wpc-filters-section.wpc-filter-layout-radio {
	gap: 8px;
}

/* Lista radio: orizzontale + gap 24px tra Automatico/Manuale. */
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-filter-content {
	margin: 0;
	padding: 0;
}
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-filters-ul-list,
.usauto-hero__search-filters .wpc-filter-layout-radio ul.wpc-filters-radio {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px 24px;
}
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-radio-item,
.usauto-hero__search-filters .wpc-filter-layout-radio li.wpc-term-item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: inline-flex;
	align-items: center;
}
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-term-item-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.usauto-hero__search-filters .wpc-filter-layout-radio label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--violet-1);
	margin: 0;
}
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-filter-link {
	color: var(--wp--preset--color--violet-1) !important;
	text-decoration: none;
}
.usauto-hero__search-filters .wpc-filter-layout-radio .wpc-term-count {
	font-size: 13px;
	color: var(--wp--preset--color--violet-4);
}

/* Section prezzo: gap interno (label → content) ridotto da 16 → 8px
   per non avere troppo spazio vuoto. */
.usauto-hero__search-filters .wpc-filters-section.wpc-filter-layout-range {
	gap: 8px;
}

/* Layout prezzo orizzontale: [Min] [Max]   [slider]. Tre figli in una
   stessa row: 2 input wrapper + slider-wrapper che riempie il resto. */
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filter-content,
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filters-range-inputs,
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filter-range-form {
	width: 100%;
	min-width: 0;
}
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filter-range-form {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Wrapper input min/max: 50% del form (così ospita 2 colonne di
   25% ciascuna del form). */
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filters-range-wrapper {
	display: flex;
	gap: 8px;
	margin: 0;
	flex: 0 0 50%;
	width: 50%;
	min-width: 0;
}
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filters-range-column {
	flex: 1 1 50%;
	width: 50%;
	min-width: 0;
}
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filters-range-min,
.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filters-range-max {
	width: 100%;
}

.usauto-hero__search-filters .wpc-filter-layout-range .wpc-filters-range-slider-wrapper {
	flex: 0 0 48%;
	width: 48%;
	min-width: 0;
	padding: 0 8px;
}

/* Nascondi anche il chips bar e posts counter (no nello mock Figma). */
.usauto-hero__search-filters .wpc-filters-widget-top-container,
.usauto-hero__search-filters .wpc-posts-found,
.usauto-hero__search-filters .wpc-filters-widget-bottom-container {
	display: none;
}

/* Layout principale: grid 2-col responsive. Sections dei dropdown
   prendono metà larghezza; price-range e CTA prendono full-width. */
.usauto-hero__search-filters .wpc-filters-widget-content {
	display: block;
}
.usauto-hero__search-filters .wpc-filters-widget-containers-wrapper,
.usauto-hero__search-filters .wpc-filters-scroll-container {
	display: block;
}
.usauto-hero__search-filters .wpc-filters-widget-wrapper {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	/* Gap orizzontale ridotto a 8px (Figma 45:1825) per dare più
	   larghezza alle colonne; gap verticale 16px per respiro tra row. */
	column-gap: 8px;
	row-gap: 16px;
}

/* Section: il plugin applica max-width: 49% che fa shrinkare i field
   nella grid. Override → ogni section occupa l'intera cella grid. */
.usauto-hero__search-filters .wpc-filters-section {
	max-width: none !important;
	width: auto !important;
	min-width: 0 !important;
}

/* Select2 container: il JS inline assegna width: 140px. Forza 100%
   della section parent per riempire la cella grid. */
.usauto-hero__search-filters .select2-container {
	width: 100% !important;
	max-width: none !important;
	display: block !important;
}

/* Plugin appende `<span class="wpc-term-image-wrapper"><img no-image>`
   nei dropdown brand-aware (Marca). Sembra una piccola lente sopra al
   placeholder — la nascondiamo (è sempre "no-image" senza logo). */
.usauto-hero__search-filters .wpc-term-image-wrapper {
	display: none !important;
}

/* Bottoni "RESET" / "CERCA AUTO KMO" piccoli renderizzati come <img>
   inline dal filterset 6532 (action-buttons). Figma li omette. */
.usauto-hero__search-filters .wpc-filter-layout-action-buttons,
.usauto-hero__search-filters .wpc-action-buttons-wrap,
.usauto-hero__search-filters a.wpc-action-button,
.usauto-hero__search-filters .wpc-filters-section img[src*="data:image"] {
	display: none !important;
}

/* Search field (raro nella hero, ma se presente): full-width row. */
.usauto-hero__search-filters .wpc-filter-layout-search-field {
	grid-column: 1 / -1;
}

/* Price range + slider: full-width row. Cambio (radio) NO — deve
   restare nella colonna 2 accanto ad Alimentazione. */
.usauto-hero__search-filters .wpc-filter-layout-range,
.usauto-hero__search-filters .wpc-filter-layout-slider,
.usauto-hero__search-filters .wpc-filter-layout-checkbox.wpc-filter-price {
	grid-column: 1 / -1;
}

/* Stile dei field. Border violet-4 (più visibile su bg card bianco
   rispetto a line-strong). Bg surface-1 per dare leggero contrasto. */
.usauto-hero__search-filters .wpc-search-field-wrapper,
.usauto-hero__search-filters .wpc-filters-range-min,
.usauto-hero__search-filters .wpc-filters-range-max,
.usauto-hero__search-filters .select2-container--default .select2-selection--single,
.usauto-hero__search-filters .select2-container .select2-selection--single {
	background-color: var(--wp--preset--color--surface-1) !important;
	border-color: var(--wp--preset--color--violet-4) !important;
	min-height: 44px;
}

.usauto-hero__search-filters .wpc-filters-widget-select,
.usauto-hero__search-filters .wpc-filter-content select {
	background-color: var(--wp--preset--color--surface-1);
	border-color: var(--wp--preset--color--violet-4);
}

/* Range row label "Budget totale:" + valori — il plugin renderizza in
   .wpc-filters-range-wrapper sopra lo slider. Layout horizontal. */
.usauto-hero__search-filters .wpc-filters-range-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.usauto-hero__search-filters .wpc-filters-range-column {
	flex: 0 0 96px;
}

/* Slider trail yellow (Figma 45:1825): track e handle magenta, ma il
   range "non selezionato" oltre i due handle deve essere giallo. */
.usauto-hero__search-filters .ui-slider.ui-slider-horizontal,
.usauto-hero__search-filters .wpc-filters-range-slider-control.ui-slider {
	background: var(--wp--preset--color--yellow) !important;
}

/* Section submit-button: full-width grid row. Il filterset 6532
   include 2 sezioni `wpc-filter-layout-submit-button` (una dentro la
   grid, una "sticky" fuori) — entrambe diventano full-width row. */
.usauto-hero__search-filters .wpc-filters-section.wpc-filter-layout-submit-button {
	grid-column: 1 / -1;
	width: 100%;
}

/* Container interno dei due link (submit + reset). Il plugin lo
   renderizza con border/padding/bg → cleanup totale, solo flex column. */
.usauto-hero__search-filters .wpc-sticky-buttons {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
	align-items: stretch !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Submit "CERCA AUTO KM0" — full-width pill magenta (Figma 45:1825).
   Il plugin applica stili più specifici col blu/border-radius 4 →
   forziamo con !important per battere. */
.usauto-hero__search-filters .wpc-sticky-buttons a.wpc-filters-submit-button,
.usauto-hero__search-filters .wpc-filter-layout-submit-button a.wpc-filters-submit-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 100% !important;
	padding: 16px !important;
	background-color: var(--wp--preset--color--magenta) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.usauto-hero__search-filters a.wpc-filters-submit-button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
	color: var(--wp--preset--color--white) !important;
}

/* Counter "(452)" dentro il submit: piccolo, sotto-tono. */
.usauto-hero__search-filters .wpc-pc-apply-button {
	display: none;
}

/* Reset link: testo discreto sotto il submit, full-width centrato. */
.usauto-hero__search-filters a.wpc-filters-reset-button {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--violet-3) !important;
	text-decoration: none;
	padding: 4px 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Hover reset: solo sottolineato, NO box-shadow né transform offset. */
.usauto-hero__search-filters a.wpc-filters-reset-button:hover,
.usauto-hero__search-filters a.wpc-filters-reset-button:focus-visible {
	color: var(--wp--preset--color--magenta) !important;
	text-decoration: underline !important;
	box-shadow: none !important;
	transform: none !important;
	background: transparent !important;
}

.usauto-hero__search-filters .wpc-filters-reset-button:hover {
	color: var(--wp--preset--color--magenta) !important;
	text-decoration: underline;
}

/* CTA "hero" originale: se nella search card c'è il widget filtri,
   il CTA del block diventa duplicato del submit del widget. Lo
   nascondiamo via sibling selector — niente intervento sui block
   attributes/settings dell'utente. */
.usauto-hero__search-card .usauto-hero__search-filters ~ .usauto-hero__cta {
	display: none;
}

/* Responsive: mobile collapse a 1 colonna. */
@media (max-width: 600px) {
	.usauto-hero__search-filters .wpc-filters-widget-wrapper {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}


/* =========================================================================
   WhatsApp floating action button (FAB), visibile su tutte le pagine
   tramite wp_footer hook (functions.php). Stesso SVG di
   .usauto-product-info__cta-whatsapp ma con 10px in più di padding
   interno → bottone totale 64x64 (icona 44x44 centrata).
   ========================================================================= */
.usauto-whatsapp-fab {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 999px;
	background-color: #00e251;
	box-shadow: 0 6px 16px rgba(26, 5, 54, 0.25);
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.usauto-whatsapp-fab:hover,
.usauto-whatsapp-fab:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(26, 5, 54, 0.3);
	outline: none;
}

.usauto-whatsapp-fab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.usauto-whatsapp-fab__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Variante mascotte: Mariano che regge il cerchio WhatsApp (PNG con
   cerchio verde incluso). Niente sfondo/padding/clip del cerchio base:
   è un ritratto verticale che sporge sopra il cerchio. */
.usauto-whatsapp-fab--mascot {
	width: 77px;
	height: auto;
	padding: 0;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.usauto-whatsapp-fab--mascot:hover,
.usauto-whatsapp-fab--mascot:focus-visible {
	box-shadow: none;
	transform: translateY(-3px);
}

.usauto-whatsapp-fab--mascot .usauto-whatsapp-fab__icon {
	width: 100%;
	height: auto;
}

.usauto-whatsapp-fab--mascot .usauto-whatsapp-fab__icon img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 6px 10px rgba(26, 5, 54, 0.25));
}

/* Shake periodico dell'icona: la classe .is-shaking viene aggiunta/rimossa
   via JS a intervalli casuali 10-20s (vedi functions.php). Pivot in basso
   così ondeggia come un pendolo. Disattivato con prefers-reduced-motion. */
@keyframes usauto-wa-shake {
	0%,
	100% {
		transform: rotate(0);
	}
	10% {
		transform: rotate(-14deg);
	}
	24% {
		transform: rotate(11deg);
	}
	38% {
		transform: rotate(-8deg);
	}
	52% {
		transform: rotate(6deg);
	}
	66% {
		transform: rotate(-4deg);
	}
	80% {
		transform: rotate(2deg);
	}
}

.usauto-whatsapp-fab.is-shaking .usauto-whatsapp-fab__icon {
	transform-origin: 50% 88%;
	animation: usauto-wa-shake 0.82s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.usauto-whatsapp-fab.is-shaking .usauto-whatsapp-fab__icon {
		animation: none;
	}
}

@media (max-width: 600px) {
	.usauto-whatsapp-fab {
		bottom: 16px;
		right: 16px;
		width: 56px;
		height: 56px;
	}
	.usauto-whatsapp-fab__icon {
		width: 36px;
		height: 36px;
	}
	.usauto-whatsapp-fab--mascot {
		width: 58px;
		height: auto;
	}
	.usauto-whatsapp-fab--mascot .usauto-whatsapp-fab__icon {
		width: 100%;
		height: auto;
	}
}

/* =========================================================================
   YITH Wishlist — pagina /wishlist/
   Allinea il template YITH al design system del sito (surface, brand color,
   typography Anton/Inter, badge magenta). Selettori scoped sotto la classe
   `.wishlist_table` per non sporcare altri table.
   ========================================================================= */

/* Container della pagina wishlist: max-width allineato al resto del sito
   (1170px come gli altri blocchi __container) + padding-block ariosso. */
.page-id-6235 .entry-content,
.page-template-default .entry-content:has(#yith-wcwl-form) {
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-inline: auto;
	padding-block: 48px 80px;
	padding-inline: clamp(16px, 4vw, 32px);
}

.page-template-default .wishlist-title,
.wp-block-post-content .wishlist-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-1);
	margin-block: 0 24px;
}

/* H1 standard della page (se WP stampa anche il page title oltre alla
   wishlist-title YITH) — coerente con .wishlist-title. */
.page-template-default .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-1);
	margin-block: 0 24px;
}

/* Empty state custom (vedi WishlistTweaks::empty_message) — il blocco
   è dentro un <td colspan>, ma noi nascondiamo thead quando empty e
   stiliamo come box pieno. */
.wishlist_table:has(.wishlist-empty) thead,
.wishlist_table.no-items thead {
	display: none;
}
.wishlist_table:has(.wishlist-empty) {
	border-spacing: 0;
}
.wishlist_table .wishlist-empty {
	padding: 0;
	background: transparent;
}

.usauto-wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 24px;
	background-color: var(--wp--preset--color--surface-1);
	border-radius: 16px;
	text-align: center;
}
.usauto-wishlist-empty__icon {
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--magenta);
}
.usauto-wishlist-empty__icon svg {
	width: 56px;
	height: 56px;
}
.usauto-wishlist-empty__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 3vw, 32px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-1);
	margin: 0;
}
.usauto-wishlist-empty__text {
	color: var(--wp--preset--color--violet-3);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	max-width: 480px;
}
.usauto-wishlist-empty__cta {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	margin-top: 8px;
	background-color: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.usauto-wishlist-empty__cta:hover,
.usauto-wishlist-empty__cta:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--violet-1);
	color: var(--wp--preset--color--white);
}

.wishlist_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 12px;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--violet-3);
	margin-block: 16px 32px;
}

.wishlist_table thead th {
	background-color: var(--wp--preset--color--surface-1);
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 14px 16px;
	border: 0;
}

.wishlist_table tbody tr {
	background-color: var(--wp--preset--color--surface-1);
	border-radius: 16px;
	overflow: hidden;
}

.wishlist_table tbody td {
	padding: 16px;
	border: 0;
	vertical-align: middle;
	font-size: 15px;
}

.wishlist_table tbody td.product-thumbnail img {
	max-width: 96px;
	height: auto;
	border-radius: 8px;
}

.wishlist_table tbody td.product-name a {
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	text-decoration: none;
	text-transform: uppercase;
}
.wishlist_table tbody td.product-name a:hover {
	color: var(--wp--preset--color--magenta);
}

.wishlist_table tbody td.product-price .amount {
	color: var(--wp--preset--color--magenta);
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 700;
}

.wishlist_table tbody td.product-stock-status .wishlist-in-stock {
	color: var(--wp--preset--color--cyan);
	font-weight: 600;
}
.wishlist_table tbody td.product-stock-status .wishlist-out-of-stock {
	color: var(--wp--preset--color--magenta);
	font-weight: 600;
}

.wishlist_table .product-remove a.remove,
.wishlist_table .product-remove a.remove_from_wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background-color: transparent;
	color: var(--wp--preset--color--violet-3);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}
.wishlist_table .product-remove a.remove:hover,
.wishlist_table .product-remove a.remove_from_wishlist:hover {
	background-color: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
}

/* Pulsante "Aggiungi al carrello" dentro la wishlist (anche se per noi
   è un veicolo → di solito è disabilitato, ma manteniamo lo style). */
.wishlist_table .product-add-to-cart a.button,
.wishlist_table .yith-wcwl-add-to-cart-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	background-color: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.wishlist_table .product-add-to-cart a.button:hover,
.wishlist_table .yith-wcwl-add-to-cart-button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
}

/* Empty state */
.wishlist-empty {
	padding: 48px 24px;
	background-color: var(--wp--preset--color--surface-1);
	border-radius: 16px;
	color: var(--wp--preset--color--violet-3);
	font-size: 16px;
	text-align: center;
}

/* Toolbar (share, return-to-shop) sotto la tabella */
.wishlist-share,
.yith-wcwl-share {
	margin-block: 32px;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--violet-3);
}
.yith-wcwl-share .yith-wcwl-share-title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--violet-1);
	font-size: 16px;
	text-transform: uppercase;
	margin-block-end: 12px;
}

.return-to-shop a.button,
.yith-wcwl-button-row a {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	background-color: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--violet-1);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.return-to-shop a.button:hover,
.yith-wcwl-button-row a:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--violet-1);
}

/* Responsive: stack su mobile */
@media (max-width: 768px) {
	.wishlist_table thead {
		display: none;
	}
	.wishlist_table tbody tr {
		display: grid;
		grid-template-columns: 96px 1fr;
		gap: 8px 16px;
		padding: 16px;
		margin-block-end: 16px;
	}
	.wishlist_table tbody td {
		padding: 0;
		border: 0;
		background: transparent;
	}
	.wishlist_table tbody td.product-thumbnail {
		grid-row: span 4;
	}
	.wishlist_table tbody td.product-add-to-cart,
	.wishlist_table tbody td.product-remove {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   Mariano-Clippy — mascotte assistente fixed bottom-left del viewport.
   Vedi assets/js/mariano-clippy.js per la state machine.
   ========================================================================= */

.usauto-mariano-clippy {
	position: fixed;
	bottom: 0;
	left: 15px;                  /* piccolo respiro dal bordo sinistro */
	z-index: 950;                /* sotto il WhatsApp FAB (998) e le modali */
	display: flex;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;         /* passa gli eventi al content sotto */
}

/* Idle: entrambi hidden. Non applica visibility per non rompere
   transitions (sarebbe un jump discreto). */
.usauto-mariano-clippy[data-state="idle"] .usauto-mariano-clippy__mariano,
.usauto-mariano-clippy[data-state="idle"] .usauto-mariano-clippy__baloon {
	transform: translateY(110%);
	opacity: 0;
	transition: none;
}
.usauto-mariano-clippy[data-state="idle"] .usauto-mariano-clippy__baloon {
	transform: scale(0);
}

/* ---- Mariano character
   Entrata: slide-up dal basso 0ms delay.
   Uscita: slide-down con 200ms delay (esce DOPO baloon per naturalezza). */
.usauto-mariano-clippy__mariano {
	width: 140px;
	height: auto;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.15));
	transform: translateY(110%);
	opacity: 0;
	transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
	transition-delay: 0ms;
}
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__mariano {
	transform: translateY(0);
	opacity: 1;
}
.usauto-mariano-clippy[data-state="exiting"] .usauto-mariano-clippy__mariano {
	transform: translateY(110%);
	opacity: 0;
	transition: transform 360ms ease-in, opacity 260ms ease;
	transition-delay: 220ms;
}

/* ---- Baloon (fumetto)
   Entrata: pop scale da bottom-left (angolo puntato verso Mariano) con
   300ms delay (dopo Mariano).
   Uscita: shrink out immediato. */
.usauto-mariano-clippy__baloon {
	position: relative;
	width: 182px;                  /* -30% da 260px */
	max-width: 28vw;               /* -30% da 40vw */
	margin-bottom: 40px;             /* stacca dal top di Mariano */
	transform-origin: bottom left;    /* pop dall'angolo verso Mariano */
	transform: scale(1);
	opacity: 1;
	transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease;
	transition-delay: 0ms;
}
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__baloon {
	transform: scale(1);
	opacity: 1;
	transition-delay: 300ms;
}

/* Float verticale idle applicato all'INNER (non al container). Così non
   collide col transform:scale del container durante lo swap. Parte 900ms
   dopo l'ingresso, ampiezza -10px, ritmo 2.4s. */
.usauto-mariano-clippy__baloon-inner {
	position: relative;
	width: 100%;
}
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__baloon-inner {
	animation: usauto-mariano-baloon-float 2.4s ease-in-out 900ms infinite;
}
.usauto-mariano-clippy[data-state="exiting"] .usauto-mariano-clippy__baloon {
	transform: scale(0);
	opacity: 0;
	transition: transform 200ms ease-in, opacity 160ms ease;
	transition-delay: 0ms;
}

/* Selettori con `[data-state="speaking"]` per battere in specificità le
   rule .baloon di quello state (che ha transition-delay:300ms per
   posticipare l'ingresso — indesiderato durante lo swap). */
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__baloon.is-shrinking {
	transform: scale(0);
	opacity: 0;
	transition: transform 320ms ease-in, opacity 280ms ease;
	transition-delay: 0ms;
}
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__baloon.is-growing {
	animation: usauto-mariano-baloon-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: 0ms;
}

.usauto-mariano-clippy__baloon-img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}

.usauto-mariano-clippy__baloon-text {
	position: absolute;
	/* Area utile del baloon (esclusa la "coda" in basso). Coordinate
	   assolute rispetto a `.baloon-inner`. Allargate rispetto alle
	   percentuali iniziali per dare più respiro al testo dopo il
	   -30% del baloon: si estende quasi ai bordi del bianco utile. */
	top: 7%;
	left: 4%;
	width: 92%;
	height: 70%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4px 12px;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	color: var(--wp--preset--color--violet-1);
	pointer-events: none;
}

@keyframes usauto-mariano-baloon-pop {
	0%   { transform: scale(0);    opacity: 0; }
	60%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1);    opacity: 1; }
}

/* Float verticale idle mentre il baloon "parla". Ampiezza -10px per
   respiro visibile, ritmo 2.4s energico. Include `scale(1)` così l'anim
   non sovrascrive lo scale con cui il baloon è entrato. */
@keyframes usauto-mariano-baloon-float {
	0%, 100% { transform: translateY(0)     scale(1); }
	50%      { transform: translateY(-10px) scale(1); }
}

/* Swap animato del Mariano quando cambia posa tra sezioni.
   Stesse tempistiche del baloon (shrink 320ms → grow 380ms).
   Origin bottom-center: Mariano è "poggiato" al bordo inferiore quindi
   l'animazione parte/finisce da lì, mantenendo la sensazione di
   "spuntare" dal basso. */
.usauto-mariano-clippy__mariano {
	transform-origin: center bottom;
}
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__mariano.is-swap-out {
	animation: usauto-mariano-swap-out 320ms ease-in forwards;
}
.usauto-mariano-clippy[data-state="speaking"] .usauto-mariano-clippy__mariano.is-swap-in {
	animation: usauto-mariano-swap-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes usauto-mariano-swap-out {
	from { transform: translateY(0)    scale(1); opacity: 1; }
	to   { transform: translateY(0)    scale(0); opacity: 0; }
}
@keyframes usauto-mariano-swap-in {
	0%   { transform: translateY(0)    scale(0);    opacity: 0; }
	60%  { transform: translateY(0)    scale(1.1);  opacity: 1; }
	100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Sotto 768px: Mariano visibile ma più piccolo (occupa meno viewport e
   non collide col WhatsApp FAB). L'immagine è forzata a
   `clippy-mariano-responsive.png` dal JS + baloon a
   `clippy-baloon-responsive.svg` (aspect ratio 2.02, più lungo e basso). */
@media (max-width: 767px) {
	.usauto-mariano-clippy {
		left: 8px;                        /* meno respiro dal bordo su mobile */
		gap: 4px;
	}
	.usauto-mariano-clippy__mariano {
		width: 68px;                      /* mobile -25% da 90px */
	}
	.usauto-mariano-clippy__baloon {
		width: 180px;                     /* più largo, l'aspect è ~2:1 */
		max-width: 52vw;
		margin-bottom: 18px;              /* baloon più basso → meno margin-top verso Mariano */
		margin-left: -10px;               /* sposta il baloon 10px a sinistra (sovrappone leggermente Mariano) */
	}
	/* Text-area aggiustata al nuovo aspect: coda relativamente più piccola,
	   il bianco utile occupa più % di altezza. `top` ridotto da 6% a 1%
	   (~-5px, richiesto per centrare meglio il testo verticalmente) +
	   `height` aumentato in proporzione per non tagliare. */
	.usauto-mariano-clippy__baloon-text {
		top: 1%;
		left: 3%;
		width: 94%;
		height: 81%;
		font-size: 13px;
		padding: 2px 6px;
	}
}

/* Rispetta prefers-reduced-motion: niente animazioni fluide, solo
   toggle discreti di visibilità. */
@media (prefers-reduced-motion: reduce) {
	.usauto-mariano-clippy,
	.usauto-mariano-clippy__baloon {
		transition: opacity 100ms linear;
	}
	.usauto-mariano-clippy__baloon.is-growing {
		animation: none;
	}
}

/* ============================================================================
   Cerca-auto — tab "Filtra" (solo mobile)
   Su mobile i filtri (resi da Filter Everything, `.wpc-filters-section`)
   tranne il primo "Cerca" (`.wpc-filters-section-6199s`) vengono racchiusi in
   una tab collassabile. Il pulsante è creato da `assets/js/filters-toggle.js`,
   che toggla la classe `.usauto-filters-open` su `.wpc-filters-main-wrap`.
   ========================================================================== */

/* Pulsante "Filtra": nascosto di default (mostrato solo su mobile). */
.usauto-filters-toggle {
	display: none;
}

@media (max-width: 768px) {
	.usauto-filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 8px;
		margin: 12px 0 0;
		padding: 14px 16px;
		background-color: var(--wp--preset--color--violet-1);
		color: var(--wp--preset--color--white);
		border: 0;
		border-radius: 8px;
		font-family: var(--wp--preset--font-family--display);
		font-size: 16px;
		line-height: 1.2;
		text-transform: uppercase;
		cursor: pointer;
		-webkit-font-smoothing: antialiased;
	}

	/* Freccia (triangolo) che ruota all'apertura. */
	.usauto-filters-toggle__icon {
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 7px solid currentColor;
		transition: transform 0.2s ease;
	}

	.wpc-filters-main-wrap.usauto-filters-open .usauto-filters-toggle__icon {
		transform: rotate(180deg);
	}

	/* Collassa tutti i filtri tranne "Cerca" quando la tab è chiusa. */
	.wpc-filters-main-wrap:not(.usauto-filters-open) .wpc-filters-section:not(.wpc-filters-section-6199s) {
		display: none;
	}

	/* Select dei filtri (Select2) a piena larghezza dentro la tab. Select2
	   imposta `width: auto` inline sul container, quindi serve !important. */
	.wpc-filters-section .select2-container {
		width: 100% !important;
	}
}

/* Order-received (conferma ordine): più respiro sotto il box "Indirizzo di
   fatturazione" prima del blocco successivo. */
.wp-block-woocommerce-order-confirmation-billing-wrapper {
	margin-bottom: 48px;
}