/* =========================================================================
   Nuvola B Studio - woocommerce.css
   Stili per shop, archivio prodotti, pagina prodotto, carrello e checkout.
   Mobile-first, coerente con la palette lilla definita in main.css.
   ========================================================================= */

.nuvolab-shop-main {
	padding-block: 40px;
}

/* -------------------------------------------------------------------------
   Archivio / Shop
   ---------------------------------------------------------------------- */
.woocommerce-products-header {
	margin-bottom: 30px;
	text-align: center;
}

/*
 * Griglia prodotti: usa il pattern "RAM" (Repeat/Auto/Minmax) invece di un
 * numero fisso di colonne. Un numero fisso di colonne (es. repeat(3, 1fr))
 * produce card strette e sproporzionate su molte larghezze intermedie molto
 * comuni (laptop 13"-14", finestre non a schermo intero): a 700-900px di
 * contenitore, 3 colonne fisse significano card da ~200px, troppo strette
 * per leggere bene titolo e prezzo. Con auto-fill + minmax, il browser
 * calcola da solo quante colonne stanno comodamente, garantendo SEMPRE una
 * larghezza minima leggibile (--nuvolab-card-min-width, impostata dal
 * Customizer in base a "Prodotti per riga" — vedi inc/customizer.php) e
 * aggiungendo colonne extra solo se lo spazio realmente lo consente.
 */
/*
 * IMPORTANTE: WooCommerce carica un proprio foglio di stile di base
 * (woocommerce.css del plugin) che imposta le card prodotto con un sistema
 * a colonne "vecchio stile" — float:left, width in percentuale in base a
 * classi tipo .columns-3/.columns-4, margini percentuali — e queste regole,
 * scritte dal plugin come "ul.products.columns-4 li.product", hanno una
 * specificità CSS più alta delle nostre semplici "ul.products li.product".
 * Risultato: senza !important, le larghezze/margini/float di WooCommerce
 * VINCONO sulla nostra griglia, producendo card strette, storte e con
 * spaziature incoerenti da riga a riga (esattamente il difetto segnalato).
 * Da qui in poi le proprietà di layout della griglia prodotti usano
 * !important per garantire che la nostra griglia responsive abbia sempre
 * la priorità, qualunque cosa imposti il CSS di base di WooCommerce.
 */
ul.products {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: clamp(20px, 3vw, 32px) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Il CSS di base di WooCommerce aggiunge a ul.products un clearfix
 * (::before/::after con content:" "; display:table;) pensato per il
 * vecchio sistema a colonne basato su float. Con display:grid questi
 * pseudo-elementi diventano ESSI STESSI elementi della griglia (la
 * spec CSS Grid tratta ::before/::after con "content" come grid item a
 * tutti gli effetti), inserendosi come prima e ultima "card fantasma":
 * questo sfalsa tutte le colonne di una posizione e spiega perché righe
 * diverse della stessa griglia risultavano disallineate tra loro.
 * Rimuovendo il contenuto disattiviamo la generazione di questi elementi.
 */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

body.nuvolab-layout-grid ul.products {
	grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 480px) {
	body.nuvolab-layout-grid ul.products {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--nuvolab-card-min-width, 260px)), 1fr)) !important;
	}
}

body.nuvolab-layout-list ul.products {
	grid-template-columns: 1fr !important;
}

@media (min-width: 700px) {
	body.nuvolab-layout-list ul.products li.product {
		display: grid !important;
		grid-template-columns: minmax(220px, 320px) 1fr !important;
		gap: 28px !important;
		align-items: center !important;
	}
	body.nuvolab-layout-list ul.products li.product img {
		aspect-ratio: 1/1 !important;
	}
}

ul.products li.product {
	background: #fff;
	border-radius: var(--nuvolab-radius);
	overflow: hidden;
	border: 1px solid var(--nuvolab-border);
	transition: transform var(--nuvolab-transition), box-shadow var(--nuvolab-transition);
	/* Neutralizza float/width/margin "vecchio stile" imposti dal CSS di
	   base di WooCommerce sulle classi .columns-N: qui la card è sempre e
	   solo un elemento della nostra griglia, mai un blocco flottante. */
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	clear: none !important;
}

body.nuvolab-layout-list ul.products li.product {
	flex-direction: row !important;
}

ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: var(--nuvolab-shadow);
}

/* Intensità ombra card (Customizer > Extra). Il default "soft" corrisponde
   a --nuvolab-shadow definita in main.css; le altre opzioni la sovrascrivono. */
body.nuvolab-shadow-none ul.products li.product:hover {
	box-shadow: none;
	transform: none;
}
body.nuvolab-shadow-medium ul.products li.product:hover {
	box-shadow: 0 16px 36px color-mix(in srgb, var(--nuvolab-primary) 40%, transparent);
}
body.nuvolab-shadow-strong ul.products li.product:hover {
	box-shadow: 0 24px 48px color-mix(in srgb, var(--nuvolab-primary) 55%, transparent);
	transform: translateY(-10px);
}

ul.products li.product a {
	display: block;
}

/* Il link principale (immagine+titolo+prezzo) cresce per riempire lo spazio
   disponibile, cosi' il pulsante "Aggiungi al carrello" resta sempre
   allineato in fondo alla card anche quando un titolo va su due righe. */
ul.products li.product > a.woocommerce-loop-product__link,
ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	width: auto !important;
}

body.nuvolab-layout-list ul.products li.product > a.woocommerce-loop-product__link,
body.nuvolab-layout-list ul.products li.product > a.woocommerce-LoopProduct-link {
	flex-direction: row !important;
	flex-grow: 0 !important;
}

ul.products li.product img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--nuvolab-image-ratio, 1/1) !important;
	object-fit: cover !important;
	transition: transform 0.6s ease;
}

ul.products li.product:hover img {
	transform: scale(1.06);
}

/* Overlay colore su hover */
ul.products li.product .nuvolab-product-media {
	position: relative;
	overflow: hidden;
	display: block;
}
ul.products li.product .nuvolab-product-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--nuvolab-primary) 55%, transparent));
	opacity: 0;
	transition: opacity var(--nuvolab-transition);
}
ul.products li.product:hover .nuvolab-product-media::after {
	opacity: 1;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: clamp(0.98rem, 1.4vw, 1.08rem);
	font-weight: 600;
	line-height: 1.35;
	margin: 16px 18px 6px;
}

ul.products li.product .star-rating {
	margin: 0 18px 6px;
	font-size: 0.85rem;
}

ul.products li.product .price {
	margin: auto 18px 18px !important;
	padding-top: 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--nuvolab-primary-dark) !important;
}
ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 400;
	font-size: 0.85em;
}
ul.products li.product .price ins {
	text-decoration: none;
	color: var(--nuvolab-accent) !important;
}

/* !important su sfondo/colore: WooCommerce definisce anche le proprie
   regole ".woocommerce ul.products li.product .button" con la stessa (o
   maggiore) specificità delle nostre — senza !important, a seconda
   dell'ordine di caricamento dei due fogli di stile, il pulsante poteva
   tornare al colore/blu di default del plugin invece del lilla del brand. */
ul.products li.product .button {
	display: block !important;
	width: auto !important;
	margin: 0 18px 20px !important;
	padding: 12px 18px !important;
	text-align: center;
	background: var(--nuvolab-primary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600;
	font-size: 0.92rem;
	transition: background var(--nuvolab-transition), transform var(--nuvolab-transition);
}
ul.products li.product .button:hover {
	background: var(--nuvolab-accent) !important;
	transform: scale(1.03);
}

/* Su mobile le card sono per forza più strette (1-2 per riga): senza una
   riduzione dedicata, pulsante e badge restano alle stesse dimensioni del
   desktop e finiscono per sembrare sproporzionatamente grandi rispetto
   alla card — esattamente il difetto segnalato ("tasti troppo grandi"). */
@media (max-width: 599px) {
	ul.products li.product .woocommerce-loop-product__title {
		margin: 12px 14px 4px;
		font-size: 0.92rem;
	}
	ul.products li.product .star-rating {
		margin: 0 14px 4px;
	}
	ul.products li.product .price {
		margin: auto 14px 14px !important;
		font-size: 0.95rem;
	}
	ul.products li.product .button {
		margin: 0 14px 14px !important;
		padding: 9px 14px !important;
		font-size: 0.82rem;
	}
	.onsale {
		top: 10px !important;
		left: 10px !important;
		padding: 4px 10px !important;
		font-size: 0.62rem !important;
	}
	.nuvolab-badge-new {
		top: 10px;
		right: 10px;
		padding: 4px 10px;
		font-size: 0.58rem;
	}
	li.product:has(.onsale) .nuvolab-badge-new {
		top: 40px;
	}
	.nuvolab-stock-info {
		margin: 8px 14px 0;
		font-size: 0.68rem;
		padding: 3px 9px 3px 7px;
	}
}

/* .onsale è anche il nome di classe usato dal CSS DI BASE del plugin
   WooCommerce, che lo stilizza come un cerchio a dimensione fissa (width/
   height/line-height in "em", per centrare "Sconto"/"-20%" al suo interno).
   Le nostre regole precedenti sovrascrivevano solo colore/sfondo, MAI
   width/height/line-height: risultato, il testo del badge veniva compresso
   dentro il cerchio grande e fisso del plugin invece che in una pillola
   comoda — esattamente il badge illeggibile/deforme segnalato. Qui
   resettiamo esplicitamente tutte le proprietà di dimensione, cosi' la
   pillola si adatta al contenuto invece che restare un cerchio fisso. */
.onsale {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	display: inline-flex !important;
	align-items: center;
	background: var(--nuvolab-sale-badge, var(--nuvolab-accent)) !important;
	color: #fff !important;
	font-size: 0.7rem !important;
	font-weight: 700;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--nuvolab-accent) 35%, transparent);
	white-space: nowrap;
	z-index: 3;
}

/* Badge "Novità" personalizzato (nuvolab-woocommerce-setup.php): stesso
   trattamento a pillola, angolo opposto (destra) cosi' non si sovrappone
   mai al badge sconto quando un prodotto è sia nuovo sia scontato. */
.nuvolab-badge-new {
	position: absolute;
	top: 14px;
	right: 14px;
	width: auto;
	height: auto;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	background: var(--nuvolab-primary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--nuvolab-primary) 35%, transparent);
	white-space: nowrap;
	z-index: 3;
}
/* Se un prodotto è sia in sconto sia "nuovo", i due badge sono già in
   angoli opposti (sconto a sinistra, novità a destra) quindi normalmente
   non si toccano; su schermi molto stretti dove le card sono minuscole,
   :has() ci permette comunque di abbassare "Novità" per stare più larghi. */
li.product:has(.onsale) .nuvolab-badge-new {
	top: 48px;
}

/* Stock disponibilità: pillola con pallino colorato invece di semplice
   testo colorato "buttato lì", cosi' si riconosce a colpo d'occhio anche
   tra le altre informazioni della card. */
.nuvolab-stock-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 16px 0;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	width: fit-content;
}
.nuvolab-stock-info::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.nuvolab-stock-info.in-stock {
	color: #1e6b30;
	background: color-mix(in srgb, #2e7d32 14%, white);
}
.nuvolab-stock-info.in-stock::before { background: #2e7d32; }
.nuvolab-stock-info.low-stock {
	color: #8a4b06;
	background: color-mix(in srgb, #b45309 16%, white);
}
.nuvolab-stock-info.low-stock::before { background: #b45309; }
.nuvolab-stock-info.out-of-stock {
	color: #8a1f1f;
	background: color-mix(in srgb, #c62828 14%, white);
}
.nuvolab-stock-info.out-of-stock::before { background: #c62828; }

/* Quick View */
.nuvolab-quick-view-btn {
	position: absolute;
	bottom: 78px;
	left: 50%;
	transform: translate(-50%, 10px);
	opacity: 0;
	background: #fff;
	color: var(--nuvolab-text);
	border: none;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	transition: opacity var(--nuvolab-transition), transform var(--nuvolab-transition);
	z-index: 3;
}
ul.products li.product:hover .nuvolab-quick-view-btn {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Effetti hover alternativi controllati dal Customizer (Animazioni) */
body.nuvolab-hover-tilt ul.products li.product {
	transition: transform 0.4s ease;
}
body.nuvolab-hover-tilt ul.products li.product:hover {
	transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
}
body.nuvolab-hover-lift ul.products li.product:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px color-mix(in srgb, var(--nuvolab-primary) 35%, transparent);
}

/* Guida taglie */
.nuvolab-size-guide-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.85rem;
	text-decoration: underline;
	color: var(--nuvolab-primary-dark);
}
.nuvolab-free-shipping-text {
	margin-top: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--nuvolab-text) 75%, transparent);
}

/* Barra "Aggiungi al carrello" fissa su mobile (Customizer > Extra) */
.nuvolab-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: #fff;
	border-top: 1px solid var(--nuvolab-border);
	box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
	padding: 12px 16px;
	transform: translateY(100%);
	transition: transform var(--nuvolab-transition);
}
.nuvolab-sticky-atc.is-visible {
	transform: translateY(0);
}
.nuvolab-sticky-atc__info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.nuvolab-sticky-atc__info img {
	width: 42px;
	height: 42px;
	border-radius: var(--nuvolab-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
}
.nuvolab-sticky-atc__title {
	display: block;
	font-size: 0.82rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 46vw;
}
.nuvolab-sticky-atc__price {
	display: block;
	font-size: 0.8rem;
	color: var(--nuvolab-primary-dark);
	font-weight: 700;
}
.nuvolab-sticky-atc__button {
	padding: 10px 20px;
	flex-shrink: 0;
	white-space: nowrap;
}
@media (min-width: 900px) {
	.nuvolab-sticky-atc {
		display: none;
	}
}

/* Sidebar shop / blog */
.nuvolab-shop-layout {
	/* Nota: il layout reale della sidebar shop (.nuvolab-shop-layout--with-
	   sidebar) è definito in main.css, vicino allo stesso pattern usato per
	   il drawer del menu mobile. Qui restano solo gli stili dei widget dei
	   filtri WooCommerce (sotto). */
}
.shop-widget, .blog-widget {
	position: relative;
	background: #fff;
	border: 1px solid var(--nuvolab-border);
	border-radius: var(--nuvolab-radius);
	padding: 22px 20px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* Piccola barra colorata in alto che si "accende" (si allarga da sinistra)
   al passaggio del mouse o quando un campo dentro il widget ha il focus:
   il dettaglio "curato" che rendeva i filtri piatti e anonimi prima. */
.shop-widget::before, .blog-widget::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--nuvolab-primary), var(--nuvolab-secondary), var(--nuvolab-accent));
	transition: width 0.35s ease;
}
.shop-widget:hover, .blog-widget:hover,
.shop-widget:focus-within, .blog-widget:focus-within {
	border-color: color-mix(in srgb, var(--nuvolab-primary) 45%, var(--nuvolab-border));
	box-shadow: 0 12px 30px color-mix(in srgb, var(--nuvolab-primary) 14%, transparent);
	transform: translateY(-2px);
}
.shop-widget:hover::before, .blog-widget:hover::before,
.shop-widget:focus-within::before, .blog-widget:focus-within::before {
	width: 100%;
}

/* -------------------------------------------------------------------------
   Widget filtro di WooCommerce nella sidebar shop (Ricerca, Categorie,
   Prezzo, Valutazione, Più popolari): la struttura arriva già pronta dal
   plugin, qui la riportiamo alla palette e agli spazi del tema, con più
   cura sui dettagli (bordi colorati, sfondi al passaggio, transizioni).
   ---------------------------------------------------------------------- */

/* Ricerca prodotti */
.widget_product_search .woocommerce-product-search {
	display: flex;
	gap: 8px;
}
.widget_product_search .search-field {
	flex: 1;
	padding: 11px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--nuvolab-border);
	background: color-mix(in srgb, var(--nuvolab-primary) 4%, white);
	color: var(--nuvolab-text);
	font: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.widget_product_search .search-field:focus {
	outline: none;
	border-color: var(--nuvolab-primary);
	background: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--nuvolab-primary) 16%, transparent);
}
.widget_product_search button.button,
.widget_product_search input[type="submit"] {
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 16px !important;
	background: linear-gradient(135deg, var(--nuvolab-primary), var(--nuvolab-secondary)) !important;
	color: #fff !important;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.widget_product_search button.button:hover,
.widget_product_search input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--nuvolab-primary) 35%, transparent);
}

/* Categorie: righe "pillola" con sfondo che scorre in dentro al passaggio
   e un piccolo accento colorato a sinistra, contatore come badge tondo. */
/* Nota importante: a seconda della versione/markup, il widget "Categorie
   prodotto" di WooCommerce genera lo <span class="count"> COME FRATELLO
   di <a> dentro <li> (non annidato al suo interno). Le regole precedenti
   mettevano display:flex solo su <a>, quindi il contatore — restando
   fuori da quel contenitore flex — cadeva semplicemente sulla riga
   successiva invece di restare accanto al nome: è il "numeri storti e
   disallineati" segnalato. Qui il flex/allineamento vive sul <li> stesso,
   cosi' funziona indipendentemente da dove il plugin mette il contatore. */
.product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}
.product-categories li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-right: 12px;
	border-radius: var(--nuvolab-radius-sm, 10px);
	transition: background 0.2s ease, padding-left 0.2s ease;
}
.product-categories li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--nuvolab-primary);
	transition: height 0.2s ease;
	pointer-events: none;
}
.product-categories li > a {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px 9px 16px;
	transition: color 0.2s ease;
}
.product-categories li:hover {
	background: color-mix(in srgb, var(--nuvolab-primary) 8%, white);
	padding-left: 4px;
}
.product-categories li:hover::before {
	height: 60%;
}
.product-categories li:hover > a {
	color: var(--nuvolab-primary-dark);
}
.product-categories li > .count,
.product-categories li > a .count {
	flex-shrink: 0;
	background: color-mix(in srgb, var(--nuvolab-primary) 14%, white);
	color: var(--nuvolab-primary-dark);
	font-weight: 700;
	font-size: 0.75rem;
	line-height: 1.6;
	padding: 1px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.product-categories .children {
	list-style: none;
	padding-left: 14px;
	margin: 4px 0 6px;
	border-left: 2px solid var(--nuvolab-border);
}
.product-categories li.current-cat {
	background: linear-gradient(90deg, var(--nuvolab-primary), var(--nuvolab-secondary));
	padding-left: 4px;
}
.product-categories li.current-cat::before {
	height: 60%;
	background: #fff;
}
.product-categories li.current-cat > a {
	color: #fff;
	font-weight: 700;
}
.product-categories li.current-cat > .count,
.product-categories li.current-cat > a .count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* Filtro prezzo: WooCommerce genera uno slider jQuery UI. Il plugin
   applica le classi "ui-slider" DIRETTAMENTE su ".price_slider" (non su un
   figlio separato) — qui teniamo conto di entrambi i casi possibili cosi'
   la barra ottiene sempre position:relative e un'altezza definita, invece
   di lasciare che l'indicatore (assoluto) "sfugga" e si posizioni rispetto
   a un antenato molto più grande, ingrandendosi a dismisura. */
.price_slider_wrapper {
	margin-bottom: 6px;
}
.price_slider,
.price_slider.ui-slider {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--nuvolab-primary) 15%, white);
	margin: 10px 4px 26px;
}
.price_slider .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nuvolab-primary), var(--nuvolab-secondary));
}
.price_slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	margin-left: -9px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nuvolab-primary);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--nuvolab-primary) 40%, transparent);
	cursor: pointer;
	outline: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	z-index: 2;
}
.price_slider .ui-slider-handle:hover,
.price_slider .ui-slider-handle:focus,
.price_slider .ui-slider-handle.ui-state-active {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--nuvolab-primary) 22%, transparent);
	transform: scale(1.08);
}
.price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.price_slider_amount .price_label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--nuvolab-text);
}
.price_slider_amount .price_label span {
	color: var(--nuvolab-primary-dark);
	font-weight: 700;
}
.price_slider_amount button.button {
	border: none !important;
	border-radius: 999px !important;
	padding: 9px 20px !important;
	background: linear-gradient(135deg, var(--nuvolab-primary), var(--nuvolab-secondary)) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.82rem !important;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price_slider_amount button.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--nuvolab-primary) 35%, transparent);
}

/* Filtro valutazione: riusa .star-rating già presente sulle card prodotto,
   ogni riga si comporta come le voci delle categorie (sfondo + accento). */
.woocommerce-widget-layered-nav-list,
.wc-layered-nav-rating {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-widget-layered-nav-list li {
	margin-bottom: 4px;
}
.woocommerce-widget-layered-nav-list a {
	display: flex;
	align-items: center;
	padding: 7px 10px;
	border-radius: var(--nuvolab-radius-sm, 10px);
	transition: background 0.2s ease;
}
.woocommerce-widget-layered-nav-list a:hover {
	background: color-mix(in srgb, var(--nuvolab-primary) 8%, white);
}
.woocommerce-widget-layered-nav-list .star-rating {
	display: inline-block;
	vertical-align: middle;
	margin: 0 6px 0 0 !important;
}

/* Mini prodotti nel widget "Più popolari" della sidebar: ogni riga come una
   mini-card che si solleva leggermente al passaggio del mouse. */
.shop-widget ul.product_list_widget,
.blog-widget ul.product_list_widget {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.shop-widget ul.product_list_widget li,
.blog-widget ul.product_list_widget li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: start;
	padding: 8px;
	border-radius: var(--nuvolab-radius-sm, 10px);
	transition: background 0.2s ease, transform 0.2s ease;
}
.shop-widget ul.product_list_widget li:hover,
.blog-widget ul.product_list_widget li:hover {
	background: color-mix(in srgb, var(--nuvolab-primary) 6%, white);
	transform: translateX(2px);
}
.shop-widget ul.product_list_widget img,
.blog-widget ul.product_list_widget img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--nuvolab-radius-sm, 8px);
	border: 1px solid var(--nuvolab-border);
}
.shop-widget ul.product_list_widget .product-title,
.blog-widget ul.product_list_widget .product-title {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 3px;
	transition: color 0.2s ease;
}
.shop-widget ul.product_list_widget li:hover .product-title,
.blog-widget ul.product_list_widget li:hover .product-title {
	color: var(--nuvolab-primary-dark);
}
.shop-widget ul.product_list_widget .woocommerce-Price-amount,
.blog-widget ul.product_list_widget .woocommerce-Price-amount {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--nuvolab-primary-dark);
}
.shop-widget ul.product_list_widget del .woocommerce-Price-amount {
	opacity: 0.55;
	font-weight: 400;
	color: inherit;
}

/* Pulsante "Rimuovi filtro" che WooCommerce aggiunge automaticamente
   quando è attivo un filtro (categoria/prezzo/valutazione). */
.woocommerce-remove-nav-filter,
.reset_variations {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	color: var(--nuvolab-accent);
	margin-top: 6px;
}

/* Filtri / ordinamento */
.woocommerce-ordering,
.woocommerce-result-count {
	margin-bottom: 20px;
}
.woocommerce-ordering select {
	padding: 8px 14px;
	border-radius: var(--nuvolab-radius-sm);
	border: 1px solid var(--nuvolab-border);
}

/* -------------------------------------------------------------------------
   Pagina prodotto singolo
   ---------------------------------------------------------------------- */
.nuvolab-single-product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-block: 50px;
}

@media (min-width: 900px) {
	.nuvolab-single-product {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.woocommerce div.product div.images img {
	border-radius: var(--nuvolab-radius);
}

.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--nuvolab-primary-dark);
	font-size: 1.4rem;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: color-mix(in srgb, var(--nuvolab-text) 75%, transparent);
	margin-block: 16px;
}

/* Campi di personalizzazione prodotto */
.nuvolab-personalization {
	background: color-mix(in srgb, var(--nuvolab-secondary) 18%, white);
	border: 1px solid var(--nuvolab-border);
	border-radius: var(--nuvolab-radius);
	padding: 22px;
	margin-block: 24px;
}
.nuvolab-personalization__title {
	font-size: 1rem;
	margin-bottom: 14px;
}
.nuvolab-personalization__field {
	margin-bottom: 14px;
}
.nuvolab-personalization__field label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.nuvolab-personalization__field input[type="text"],
.nuvolab-personalization__field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nuvolab-border);
	border-radius: var(--nuvolab-radius-sm);
	font-size: 1rem;
	background: #fff;
	transition: border-color var(--nuvolab-transition), box-shadow var(--nuvolab-transition);
}
.nuvolab-personalization__field input[type="text"]:focus,
.nuvolab-personalization__field select:focus {
	outline: none;
	border-color: var(--nuvolab-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nuvolab-primary) 25%, transparent);
}

/* Il modulo "Aggiungi al carrello" (quantità + pulsante, più eventuali
   pulsanti di pagamento rapido che un plugin di pagamento può iniettare
   dopo il pulsante) viene disposto a colonna con spaziatura regolare, cosi'
   ogni elemento resta ben distinto invece di ammassarsi tutto attaccato. */
.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.woocommerce div.product form.cart .quantity {
	margin: 0;
}

/* Selettore quantità: il browser di default mostra un piccolo input
   numerico con frecce minuscole, fuori stile rispetto al resto — qui lo
   trasformiamo in un gruppo -/numero/+ coerente con i bottoni arrotondati
   usati nel resto del tema. */
.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--nuvolab-border);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.woocommerce div.product form.cart .quantity .qty {
	width: 56px;
	border: none;
	background: transparent;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--nuvolab-text);
	padding: 12px 0;
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce div.product form.cart .quantity .qty:focus {
	outline: none;
}

.woocommerce div.product form.cart .button {
	padding: 16px 40px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--nuvolab-primary), var(--nuvolab-secondary));
	color: #fff;
	font-weight: 700;
	border: none;
	box-shadow: var(--nuvolab-shadow);
	transition: transform var(--nuvolab-transition), box-shadow var(--nuvolab-transition);
	text-align: center;
}
.woocommerce div.product form.cart .button:hover {
	transform: translateY(-3px);
}

/* Pulsanti di pagamento rapido (Google Pay, Amazon Pay, Apple Pay, ecc.):
   arrivano da plugin di pagamento di terze parti, spesso come iframe che
   non possiamo ridipingere internamente — ma possiamo comunque contenerli
   in un blocco pulito, largo quanto il pulsante "Aggiungi al carrello",
   con angoli arrotondati e staccati dal resto invece che ammassati subito
   sotto, che è il difetto segnalato. Copriamo i nomi di classe più comuni
   e, in generale, qualunque cosa un plugin aggiunga come fratello subito
   dopo il modulo, dentro il riepilogo prodotto. */
.woocommerce div.product .summary form.cart + * {
	margin-top: 6px;
	width: 100%;
}
.woocommerce div.product .summary form.cart + * iframe {
	border-radius: var(--nuvolab-radius-sm, 10px) !important;
}
.wc-stripe-payment-request-wrapper,
.wc-gpay-button-wrapper,
.wc-apple-pay-button-wrapper,
.wc-ppc-button-wrapper,
#amazon-pay-button,
.amazon-pay-button-container,
.woocommerce div.product form.cart .payment-request-wrapper {
	width: 100%;
	max-width: 100%;
	margin-top: 4px;
	border-radius: var(--nuvolab-radius-sm, 10px);
	overflow: hidden;
}

@media (max-width: 599px) {
	.woocommerce div.product form.cart {
		gap: 12px;
		width: 100%;
	}
	.woocommerce div.product form.cart .button {
		width: 100%;
		padding: 14px 24px;
	}
}

/* Tabs prodotto (descrizione, recensioni) */
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 24px;
	list-style: none;
	padding: 0;
	border-bottom: 1px solid var(--nuvolab-border);
	margin-bottom: 24px;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-bottom: 12px;
	font-weight: 600;
	color: color-mix(in srgb, var(--nuvolab-text) 60%, transparent);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--nuvolab-primary-dark);
	border-bottom: 2px solid var(--nuvolab-primary);
}

/* Prodotti correlati */
.related.products {
	margin-top: 60px;
}
.related.products > h2 {
	text-align: center;
	margin-bottom: 30px;
}

/* -------------------------------------------------------------------------
   Carrello e checkout
   ---------------------------------------------------------------------- */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--nuvolab-border);
	border-radius: var(--nuvolab-radius);
	overflow: hidden;
}
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
	background: color-mix(in srgb, var(--nuvolab-secondary) 25%, white);
	padding: 14px;
	text-align: left;
}
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
	padding: 14px;
	border-top: 1px solid var(--nuvolab-border);
}

.woocommerce #payment #place_order,
.woocommerce a.checkout-button,
.woocommerce-cart .checkout-button {
	background: linear-gradient(135deg, var(--nuvolab-primary), var(--nuvolab-accent));
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	padding: 16px 30px;
	border: none;
	box-shadow: var(--nuvolab-shadow);
}

.woocommerce-checkout #order_review,
.cart-collaterals .cart_totals {
	background: color-mix(in srgb, var(--nuvolab-secondary) 12%, white);
	border-radius: var(--nuvolab-radius);
	padding: 24px;
}

/* Messaggi/notice */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--nuvolab-primary) !important;
	border-radius: var(--nuvolab-radius-sm);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--nuvolab-primary) !important;
}

/* Account */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}
.woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--nuvolab-border);
	font-weight: 600;
	font-size: 0.9rem;
}
.woocommerce-MyAccount-navigation .is-active a {
	background: var(--nuvolab-primary);
	color: #fff;
	border-color: var(--nuvolab-primary);
}