/* ==========================================================================
   Brico Ecommerce — Catalogo e scheda prodotto
   Caricato SOLO su pagine WooCommerce (shop, categoria, prodotto, carrello,
   checkout, account), vedi inc/shop-assets.php — non pesa sul resto del
   sito. Usa le variabili definite in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   Base
   -------------------------------------------------------------------- */
.woocommerce,
.woocommerce-page {
	--wc-focus-color: var(--brico-color-secondary);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce .quantity input.qty:focus-visible {
	outline: 2px solid var(--brico-color-secondary);
	outline-offset: 2px;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
	color: var(--brico-color-text-muted);
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a {
	color: var(--brico-color-text-muted);
	text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
	color: var(--brico-color-secondary);
	text-decoration: underline;
}

/* --------------------------------------------------------------------
   Barra risultati + ordinamento
   -------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1.5rem;
}
.woocommerce .woocommerce-ordering select {
	border-radius: var(--brico-radius-sm);
	border: 1px solid var(--brico-color-border);
	padding: 0.5em 2em 0.5em 0.9em;
	font-family: var(--brico-font-base);
}

/* --------------------------------------------------------------------
   Griglia prodotti
   -------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.75rem;
	margin: 0 0 2.5rem;
	list-style: none;
	padding: 0;
}

.woocommerce ul.products li.product {
	position: relative;
	background: var(--brico-color-surface);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
	padding: 1rem 1.1rem 1.2rem;
	overflow: hidden;
	box-shadow: var(--brico-shadow);
	transition: box-shadow var(--brico-transition), transform var(--brico-transition);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--brico-shadow-hover);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--brico-color-surface-alt);
	border-radius: var(--brico-radius-sm);
	margin-bottom: 0.9rem;
	transition: transform 400ms ease;
}

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

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3.woocommerce-loop-product__title {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--brico-color-text);
	margin: 0 0 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .star-rating {
	font-size: 0.85rem;
	color: var(--brico-color-accent-dark);
	margin-bottom: 0.35rem;
}

/* ------------------------------------------------------------------
   v1.5.7 — LE FOTO VERE, PIU' GRANDI POSSIBILE

   Dove c'e' una fotografia il riquadro prende tutta la larghezza della
   card e resta quadrato: e' la richiesta, ed e' giusta — su un
   prodotto la foto e' l'informazione, non la decorazione. `contain` e
   non `cover` perche' su un catalogo di ferramenta le foto dei
   fornitori arrivano in formati diversi e ritagliarle taglierebbe via
   proprio il pezzo (una punta, un attacco, una filettatura).

   Il segnaposto NON segue questa regola: vedi il blocco "catalogo
   senza fotografie" piu' sotto, e la nota nel changelog della 1.5.7.
   ------------------------------------------------------------------ */
.woocommerce ul.products li.product:not(.brico-senza-foto) img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	padding: 0.5rem;
	background: #fff;
}

/* v1.5.0 — Il prezzo della griglia non e' piu' rosso.
   Il rosso del brand e' il colore dell'offerta: se lo porta OGNI
   prezzo non segnala piu' niente, e una pagina di 24 prezzi rossi
   urla senza dire nulla. Resta rosso solo dove lo sconto c'e'
   davvero (`ins`, qui sotto) — che e' l'unico posto in cui serve. */
.woocommerce ul.products li.product .price {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brico-color-text);
	margin-bottom: 0.7rem;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount {
	color: var(--brico-color-primary);
}
.woocommerce ul.products li.product .price del {
	color: var(--brico-color-text-muted);
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.8;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	background: var(--brico-color-secondary);
	color: #fff;
	border: none;
	border-radius: var(--brico-radius-sm);
	padding: 0.7em 1em;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background var(--brico-transition);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--brico-color-secondary-dark);
	color: #fff;
}
.woocommerce ul.products li.product .button.loading::after {
	border-top-color: #fff;
}

/* Badge sconto/percentuale (vedi inc/shop-enhancements.php) */
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	z-index: 2;
	background: var(--brico-color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 999px;
	padding: 0.3em 0.75em;
	min-height: 0;
	line-height: 1.4;
}

.woocommerce ul.products li.product .brico-badge-lowstock,
.woocommerce ul.products li.product .brico-badge-backorder {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index: 2;
	font-size: 0.72rem;
	font-weight: 600;
	border-radius: 999px;
	padding: 0.3em 0.7em;
}
/* Scorte limitate: ambra del brand, ancora acquistabile ma in evidenza */
.woocommerce ul.products li.product .brico-badge-lowstock {
	background: var(--brico-color-accent);
	color: var(--brico-color-dark);
}
/* Su ordinazione: blu del brand, informativo (non un problema, solo tempi diversi) */
.woocommerce ul.products li.product .brico-badge-backorder {
	background: var(--brico-color-secondary);
	color: #fff;
}

/* --------------------------------------------------------------------
   Sidebar filtri (widget WooCommerce nativi: prezzo, categorie, attributi)
   -------------------------------------------------------------------- */
.woocommerce .widget_price_filter .price_slider_amount .button {
	background: var(--brico-color-secondary);
	border-radius: var(--brico-radius-sm);
	color: #fff;
	float: right;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--brico-color-secondary);
	border-color: var(--brico-color-secondary-dark);
}

.woocommerce .widget_layered_nav ul,
.woocommerce .widget_product_categories ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.woocommerce .widget_layered_nav ul li,
.woocommerce .widget_product_categories ul li {
	border-bottom: 1px solid var(--brico-color-border);
	padding: 0.5rem 0;
}
.woocommerce .widget_layered_nav ul li a,
.woocommerce .widget_product_categories ul li a {
	color: var(--brico-color-text);
	text-decoration: none;
}
.woocommerce .widget_layered_nav ul li a:hover,
.woocommerce .widget_product_categories ul li a:hover {
	color: var(--brico-color-secondary);
}

/* --------------------------------------------------------------------
   Paginazione
   -------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul {
	border: none;
	gap: 0.4rem;
	display: inline-flex;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: var(--brico-radius-sm);
	border: 1px solid var(--brico-color-border);
	color: var(--brico-color-text);
	padding: 0.5em 0.9em;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--brico-color-secondary);
	border-color: var(--brico-color-secondary);
	color: #fff;
}

/* --------------------------------------------------------------------
   Scheda prodotto singolo
   -------------------------------------------------------------------- */
.woocommerce div.product {
	position: relative;
}

.woocommerce div.product div.images {
	border-radius: var(--brico-radius);
	overflow: hidden;
}
.woocommerce div.product div.images img {
	border-radius: var(--brico-radius);
}
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--brico-radius-sm);
	opacity: 0.7;
	transition: opacity var(--brico-transition);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
}

.woocommerce div.product .product_title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--brico-color-text);
	margin-bottom: 0.5rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--brico-color-primary);
	font-size: 1.5rem;
	font-weight: 700;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--brico-color-text-muted);
	font-size: 0.75em;
	font-weight: 400;
}

.woocommerce div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: 0.9rem;
	border-radius: 999px;
	padding: 0.35em 0.9em;
	margin: 0.6rem 0 1rem;
}
.woocommerce div.product .stock.in-stock {
	background: rgba(30, 126, 52, 0.1);
	color: var(--brico-color-success);
}
/* Scorte limitate: ambra del brand, non rosso — resta acquistabile */
.woocommerce div.product .stock.low-stock {
	background: rgba(251, 192, 0, 0.16);
	color: var(--brico-color-accent-dark);
}
/* Su ordinazione: blu del brand, informativo — resta acquistabile */
.woocommerce div.product .stock.on-backorder {
	background: rgba(46, 95, 192, 0.1);
	color: var(--brico-color-secondary);
}
/* Mantenuto per compatibilita' (prodotti non gestiti a scorta con stato manuale "esaurito") */
.woocommerce div.product .stock.out-of-stock {
	background: rgba(196, 31, 38, 0.1);
	color: var(--brico-color-danger);
}

/* Selettore quantità con pulsanti +/- (markup aggiunto via JS, vedi shop.js) */
.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	overflow: hidden;
	margin-right: 0.6rem;
	vertical-align: middle;
}
.woocommerce div.product form.cart .quantity input.qty {
	width: 3.2rem;
	border: none;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce div.product form.cart .brico-qty-btn {
	background: var(--brico-color-surface-alt);
	border: none;
	width: 2.4rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--brico-color-text);
	transition: background var(--brico-transition);
}
.woocommerce div.product form.cart .brico-qty-btn:hover {
	background: var(--brico-color-border);
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	background: var(--brico-color-primary);
	border: none;
	border-radius: var(--brico-radius-sm);
	color: #fff;
	font-weight: 700;
	padding: 0.85em 1.8em;
	font-size: 1rem;
	vertical-align: middle;
	transition: background var(--brico-transition);
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
	background: var(--brico-color-primary-dark);
	color: #fff;
}

/* Badge di fiducia sotto il pulsante acquista (vedi inc/shop-enhancements.php) */
.brico-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 1.5rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--brico-color-border);
	border-bottom: 1px solid var(--brico-color-border);
}
.brico-trust-badges .brico-trust-badge {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.85rem;
	color: var(--brico-color-text);
	flex: 1 1 160px;
}
.brico-trust-badges .brico-trust-badge svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--brico-color-secondary);
}

/* Tab prodotto (Descrizione / Informazioni aggiuntive / Recensioni) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--brico-color-border);
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: none;
	background: none;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.8em 1.2em;
	color: var(--brico-color-text-muted);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--brico-color-secondary);
	border-bottom-color: var(--brico-color-secondary);
}
.woocommerce div.product .woocommerce-tabs .panel {
	padding: 1.5rem 0;
}

/* Prodotti correlati / cross-sell: riusano lo stile card della griglia */
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .up-sells ul.products {
	margin-top: 1rem;
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .up-sells > h2 {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 782px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.woocommerce div.product .product_title {
		font-size: 1.3rem;
	}
	.brico-trust-badges {
		flex-direction: column;
		gap: 0.75rem;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.7rem;
	}
	.woocommerce ul.products li.product .brico-card-body {
		padding: 0.75rem 0.8rem 1rem;
	}
}

/* ==========================================================================
   v1.5.0 — CATALOGO SENZA FOTOGRAFIE
   --------------------------------------------------------------------------
   Il catalogo Passepartout ha 0 immagini su 28.656 articoli e i
   fornitori ne copriranno al massimo un terzo. La griglia disegnata
   per un ecommerce con le foto riservava a ogni card un quadrato 1:1:
   su 24 prodotti sono 24 riquadri vuoti che occupano piu' di meta'
   schermo, e comunicano "qui manca qualcosa" invece di far leggere il
   prodotto.

   Qui il riquadro si accorcia, il segnaposto diventa un simbolo del
   ramo merceologico (inc/product-placeholder.php) e lo spazio torna
   al testo: codice, nome, prezzo, disponibilita'. Le card CON la foto
   vera restano com'erano — quando le immagini arriveranno il
   catalogo migliorera' da solo, senza rimettere mano a questo file.

   Il gancio e' la classe `brico-senza-foto`, messa sul <li> solo per
   i prodotti privi di immagine (vedi brico_child_classe_ramo).
   ========================================================================== */

/* --------------------------------------------------------------------
   Il riquadro del segnaposto
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product.brico-senza-foto .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product.brico-senza-foto .woocommerce-LoopProduct-link {
	display: block;
}

.woocommerce ul.products li.product.brico-senza-foto img.brico-placeholder {
	/* ALTEZZA FISSA, non aspect-ratio. Con le proporzioni il riquadro
	   cambia altezza al cambiare della larghezza della card, e in una
	   griglia responsive vuol dire righe che non si allineano mai. Un
	   simbolo non ha proporzioni da rispettare: gli si da' una fascia
	   costante e si allinea tutto. */
	width: 100%;
	height: 150px;                 /* v1.5.7: era 104. Piu' presenza,
	                                  senza tornare al quadrato vuoto */
	object-fit: contain;           /* un simbolo non si ritaglia */
	padding: 1.1rem;
	background: var(--brico-color-surface-alt);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	margin-bottom: 0.85rem;
}

/* Niente ingrandimento al passaggio del mouse su un segnaposto: su una
   foto e' un invito a guardare, su un simbolo e' solo rumore. */
.woocommerce ul.products li.product.brico-senza-foto:hover img.brico-placeholder {
	transform: none;
}

/* --------------------------------------------------------------------
   Codice articolo sulla card (inc/catalog-layout.php)
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product .brico-card-code {
	display: inline-block;
	max-width: 100%;
	font-family: var(--brico-font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--brico-color-text-muted);
	background: var(--brico-color-surface-alt);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	padding: 0.12em 0.5em;
	margin-bottom: 0.5rem;
	/* Il 92% dei codici sono sei cifre, ma il gestionale ne contiene
	   una manciata da 19-27 caratteri: li' si taglia, e il valore
	   intero resta nel `title` dell'elemento. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* Micro-etichetta della categoria, sopra il titolo (markup di Astra) */
.woocommerce ul.products li.product .ast-woo-product-category {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brico-color-text-muted);
	margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------------
   Interruttore griglia / elenco
   -------------------------------------------------------------------- */
.brico-vista {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: var(--brico-color-surface-alt);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	vertical-align: middle;
	margin: 0 0 1.5rem 0.75rem;
}

.brico-vista__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: none;
	background: transparent;
	border-radius: 4px;
	padding: 0.42em 0.75em;
	font-family: var(--brico-font-base);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--brico-color-text-muted);
	cursor: pointer;
	transition: background var(--brico-transition), color var(--brico-transition);
}

.brico-vista__btn svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.brico-vista__btn:hover {
	color: var(--brico-color-text);
}

.brico-vista__btn[aria-pressed="true"] {
	background: var(--brico-color-surface);
	color: var(--brico-color-secondary);
	box-shadow: var(--brico-shadow);
}

.brico-vista__btn:focus-visible {
	outline: 2px solid var(--brico-color-secondary);
	outline-offset: 1px;
}

/* Sotto i 600px restano solo le icone: le due parole non ci stanno
   accanto all'ordinamento. */
@media (max-width: 600px) {
	.brico-vista__btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.brico-vista {
		margin-left: 0.4rem;
	}
}

/* --------------------------------------------------------------------
   Scheda prodotto: via le carte di credito finte
   --------------------------------------------------------------------
   Astra stampa sotto il pulsante d'acquisto una fila di loghi
   (Visa, Mastercard, American Express, Discover) che NON dipende dai
   gateway davvero attivi: e' una decorazione del tema. American
   Express e Discover in una ferramenta di Arezzo non li accetta
   nessuno, e mostrare un metodo di pagamento che poi al checkout non
   c'e' e' il modo piu' rapido di perdere un ordine.

   Questa riga lo nasconde subito. Il posto giusto per toglierlo del
   tutto e' Aspetto > Personalizza > WooCommerce > Prodotto singolo >
   icone di pagamento: la regola qui sotto resta come rete di
   sicurezza, cosi' non ricompare se qualcuno rimette la spunta.
   -------------------------------------------------------------------- */
.ast-single-product-payments {
	display: none;
}


/* ==========================================================================
   v1.5.4 — ALLINEAMENTO DELLA GRIGLIA
   --------------------------------------------------------------------------
   Tre difetti visti solo a schermo, con 28.644 prodotti veri dentro.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. IL NUMERO DI COLONNE LO DECIDEVA ASTRA, NON NOI

   `ul.products` era gia' `display: grid` — quello passava — ma
   `grid-template-columns` no: Astra lo fissa a un numero di colonne
   deciso nel Personalizza, e su una zona contenuto da 609px stampava
   **tre colonne da 184px**. Sotto i 230px minimi che avevamo chiesto,
   e troppo strette per un titolo di ferramenta: il nome andava a capo
   tre volte e il pulsante finiva a quote diverse da card a card.

   Qui si torna a `auto-fill`: le colonne le decide lo spazio
   disponibile, non un numero fisso. Su una zona da 609px diventano due
   card larghe invece di tre strette; su un monitor da ufficio quattro.
   Specificita' alzata con `.woocommerce-page` per battere la regola di
   Astra senza `!important`.
   -------------------------------------------------------------------- */
/* v1.5.5 — IL SELETTORE GIUSTO, misurato invece che indovinato.
   La 1.5.4 aveva alzato la specificita' a naso e non era bastato. La
   regola che vince davvero e', in `woocommerce-layout-grid.min.css`:

     .woocommerce ul.products:not(.elementor-grid).columns-3
     { grid-template-columns: repeat(3, minmax(0, 1fr)) }

   cioe' **(0,4,1)**: quattro classi — `.woocommerce`, `.products`,
   l'argomento di `:not()` che conta come una classe, e `.columns-3`.
   La nostra `.woocommerce ul.products` stava a (0,2,1) e non aveva
   speranze.

   Il numero nella classe lo mette WooCommerce dalle impostazioni
   (`ul class="products columns-3"`), quindi non si puo' inseguire un
   valore solo: `[class*="columns-"]` li prende tutti e vale come una
   classe, riportandoci a (0,4,1). Pareggio, e a parita' vince chi
   viene dopo: shop.css e' caricato dopo il foglio di WooCommerce.

   Niente `!important`: qui la cascata basta, se la si legge. */
.woocommerce ul.products:not(.elementor-grid)[class*="columns-"],
.woocommerce-page ul.products:not(.elementor-grid)[class*="columns-"],
.woocommerce-js ul.products:not(.elementor-grid)[class*="columns-"] {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* --------------------------------------------------------------------
   2. I PULSANTI NON ERANO ALLINEATI

   Misurati nella stessa riga: 804px, 822px, 804px. Diciotto pixel di
   sfasamento, perche' la seconda card aveva la categoria su due righe
   ("AUTO SENZA TRANSPONDER"). In una griglia di ventiquattro card e'
   il genere di disordine che si nota senza saper dire cosa non va.

   La card diventa una colonna flessibile e il pulsante si spinge in
   fondo con `margin-top: auto`: il testo sopra puo' occupare le righe
   che vuole, il pulsante sta sempre sulla stessa quota.
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .button {
	margin-top: auto;
}

/* Il titolo su due righe fisse fa la sua parte: senza, una card con
   nome corto e una con nome lungo restano diverse anche col pulsante
   allineato. */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	min-height: 2.7em;
}

/* "Aggiungi al carrello" e' lungo: su colonne strette andava a capo in
   mezzo. Si lascia andare a capo, ma con le due righe gia' previste
   nell'altezza, cosi' non sposta niente. */
.woocommerce ul.products li.product .button {
	line-height: 1.25;
	text-wrap: balance;
}

/* --------------------------------------------------------------------
   3. IL BADGE DI GIACENZA COPRIVA IL SEGNAPOSTO

   Misurato: badge largo 94px appoggiato sopra un riquadro largo 147px.
   Con la fotografia vera un'etichetta sospesa sull'angolo funziona;
   sopra un simbolo in un riquadro piccolo copre proprio la cosa che
   deve far vedere.

   Dalla v1.5.4 il badge non e' piu' sovrapposto: sta nel blocco di
   testo, accanto al codice articolo (vedi lo spostamento del gancio in
   inc/shop-enhancements.php). E' anche piu' corretto di suo — la
   disponibilita' e' un dato, non un adesivo.

   Il badge sconto `.onsale` resta sovrapposto: compare di rado e li'
   l'evidenza serve davvero.
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product .brico-badge-lowstock,
.woocommerce ul.products li.product .brico-badge-backorder {
	position: static;
	display: inline-block;
	margin: 0 0 0.5rem 0.4rem;
	vertical-align: middle;
}

/* Codice e badge sulla stessa riga, che e' il motivo per cui il badge
   e' stato spostato li'. */
.woocommerce ul.products li.product .brico-card-code {
	vertical-align: middle;
}


/* --------------------------------------------------------------------
   v1.5.5 — CODICE E DISPONIBILITA' SULLA STESSA RIGA

   Dove finiscono davvero: Astra esegue `woocommerce_after_shop_loop_item_title`
   DENTRO il link della miniatura, non nel blocco di testo. Verificato
   leggendo la struttura della card in pagina — la sola figlia di
   `.astra-shop-thumbnail-wrap` e' il link, e il codice e il badge
   stanno li' dentro.

   Non e' un problema: sotto l'immagine e' esattamente il posto in cui
   Wurth mette il codice, ed e' quello che volevamo. Ma senza un
   contenitore che li metta in riga andavano a capo uno sotto l'altro,
   sprecando due righe per due informazioni corte.

   `flex-wrap: wrap` perche' su colonne strette o con un codice da 19
   cifre devono poter andare a capo: non si impedisce, si ordina.
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

/* L'immagine occupa la riga intera; codice e badge si dividono quella
   sotto. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
	flex: 0 0 100%;
}

.woocommerce ul.products li.product .brico-card-code,
.woocommerce ul.products li.product .brico-badge-lowstock,
.woocommerce ul.products li.product .brico-badge-backorder {
	margin: 0;
}

/* ==========================================================================
   v1.5.6 — VISTA A ELENCO, RISCRITTA
   --------------------------------------------------------------------------
   La prima stesura (v1.5.0) era stata scritta prima di sapere due cose,
   e sbagliava per tutte e due:

   1. la sua regola sulle colonne stava a (0,3,1) e perdeva contro la
      (0,4,1) di WooCommerce, quindi l'elenco restava a due colonne —
      cioe' non era un elenco;
   2. la card e' fatta di DUE contenitori — `.astra-shop-thumbnail-wrap`
      (che contiene il link con immagine, codice e badge) e
      `.astra-shop-summary-wrap` (categoria, titolo, prezzo, pulsante).
      Le regole di allora si rivolgevano a figli che stanno in rami
      diversi, e il `display: flex` della v1.5.4 sulle card le passava
      sopra perche' viene dopo nel file.

   Riscritta sulla struttura vera, e messa in fondo al foglio apposta:
   deve venire dopo le regole della griglia, non prima.

   LA FORMA: [icona + codice + stato] | [reparto + nome] | prezzo | pulsante
   E' come si legge un listino di carta, ed e' il motivo per cui Wurth,
   RS e Manutan hanno tutti la vista a elenco: chi confronta quaranta
   misure della stessa vite ha bisogno che il prezzo stia sempre nella
   stessa colonna.
   ========================================================================== */

/* Una colonna sola. Stessa specificita' della regola di WooCommerce
   (0,4,1) piu' la classe della vista, quindi vince senza dubbi. */
.brico-vista-elenco .woocommerce ul.products:not(.elementor-grid)[class*="columns-"],
.brico-vista-elenco .woocommerce-page ul.products:not(.elementor-grid)[class*="columns-"],
.brico-vista-elenco .woocommerce-js ul.products:not(.elementor-grid)[class*="columns-"] {
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

/* La riga. `display: grid` deve battere il `display: flex` che la
   v1.5.4 mette su tutte le card: stessa specificita', ma questa regola
   sta piu' in basso nel foglio.

   v1.5.6b — La prima colonna era 104px con icona, codice e stato
   INCOLONNATI: misurata, la riga veniva alta **196px**. Un listino con
   righe da 196px non e' un listino, e' una griglia stretta. Ora la
   colonna e' larga 180px e i tre elementi stanno IN RIGA: icona a
   sinistra, codice e stato accanto. Altezza attesa ~90px. */
.brico-vista-elenco .woocommerce ul.products li.product {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	align-items: center;
	column-gap: 1.1rem;
	padding: 0.7rem 1rem;
}

/* In elenco la riga non si solleva: venti righe che si alzano una per
   una al passaggio del mouse sono una distrazione, non un'indicazione.
   Basta il fondo che cambia. */
.brico-vista-elenco .woocommerce ul.products li.product:hover {
	transform: none;
	box-shadow: var(--brico-shadow);
	background: var(--brico-color-surface-alt);
}

/* Colonna 1: icona, codice e stato incolonnati. Sono tutti e tre
   dentro il link della miniatura (vedi v1.5.5), quindi si impaginano
   insieme. */
.brico-vista-elenco .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	grid-column: 1;
}

.brico-vista-elenco .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

/* Il selettore DEVE nominare il link. La regola della griglia e'
   `.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img`
   = (0,4,4); senza `a` questa stava a (0,4,3) e perdeva, lasciando
   l'immagine a `flex: 0 0 100%` — cioe' a tutta riga, con codice e
   stato buttati sotto. Terza volta oggi che un elemento in piu' nel
   selettore altrui ribalta il conto: si contano, non si stimano. */
.brico-vista-elenco .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
	width: 88px;
	height: 80px;
	padding: 0.5rem;
	margin: 0;
	flex: 0 0 88px;               /* NON piu' 100%: e' la regola della griglia */
	transform: none !important;   /* niente ingrandimento su una riga */
}

/* Codice e stato incolonnati accanto all'icona, stretti sulla loro
   larghezza. */
.brico-vista-elenco .woocommerce ul.products li.product a.woocommerce-LoopProduct-link > span {
	flex: 0 1 auto;
}

.brico-vista-elenco .woocommerce ul.products li.product .brico-card-code,
.brico-vista-elenco .woocommerce ul.products li.product .brico-badge-lowstock,
.brico-vista-elenco .woocommerce ul.products li.product .brico-badge-backorder {
	font-size: 0.7rem;
	padding: 0.15em 0.5em;
	max-width: 100%;
	text-align: center;
}

/* Colonna 2: il testo si spalanca in tre — nome, prezzo, pulsante —
   cosi' prezzi e pulsanti di righe diverse restano incolonnati, che e'
   tutto il punto della vista a elenco. */
.brico-vista-elenco .woocommerce ul.products li.product .astra-shop-summary-wrap {
	grid-column: 2;
	display: grid;
	/* v1.5.6b — erano 7rem + 11rem: su una zona da 479px lasciavano al
	   nome solo 185px, e il titolo si troncava proprio nella vista che
	   si sceglie per leggerlo per intero. Ora il pulsante e' piu'
	   stretto e il prezzo tiene la sua colonna senza sprecarla. */
	grid-template-columns: minmax(0, 1fr) 5.5rem 9.5rem;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 1rem;
	row-gap: 0;
}

.brico-vista-elenco .woocommerce ul.products li.product .ast-woo-product-category {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.brico-vista-elenco .woocommerce ul.products li.product .ast-loop-product__link {
	grid-column: 1;
	grid-row: 2;
}

/* Il nome per esteso su due righe: in elenco c'e' la larghezza per
   leggerlo, ed e' il motivo per cui si sceglie l'elenco. */
.brico-vista-elenco .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	-webkit-line-clamp: 2;
	min-height: 0;
	font-size: 1rem;
	margin: 0;
}

.brico-vista-elenco .woocommerce ul.products li.product .price {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: end;
	text-align: right;
	font-size: 1.1rem;
	margin: 0;
}

.brico-vista-elenco .woocommerce ul.products li.product .button {
	grid-column: 3;
	grid-row: 1 / span 2;
	margin: 0;
	width: 100%;
}

/* --------------------------------------------------------------------
   QUANDO IMPILARE: si guarda la COLONNA, non la finestra

   Prima c'era una media query a 1024px. Sbagliata di principio: fra il
   sito e la finestra c'e' la barra laterale dei filtri, quindi la zona
   utile e' circa il 60% della larghezza. Misurato adesso: finestra
   larga, **zona contenuto 635px**, e le tre colonne del testo lasciavano
   al nome **101px** — troncato proprio nella vista che si sceglie per
   leggerlo per intero.

   Una `@container` guarda la larghezza vera della lista, quindi si
   comporta bene sia con la barra laterale sia senza, sia in una pagina
   a tutta larghezza sia dentro un riquadro stretto. E' la domanda
   giusta: non "quanto e' grande lo schermo" ma "quanto spazio ho io".
   -------------------------------------------------------------------- */
.brico-vista-elenco .woocommerce ul.products {
	container-type: inline-size;
	container-name: brico-elenco;
}

@container brico-elenco (max-width: 760px) {

	.brico-vista-elenco .woocommerce ul.products li.product {
		grid-template-columns: 150px minmax(0, 1fr);
	}
	.brico-vista-elenco .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
		width: 64px;
		height: 60px;
		flex-basis: 64px;
	}
	.brico-vista-elenco .woocommerce ul.products li.product .astra-shop-summary-wrap {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		row-gap: 0.45rem;
	}
	.brico-vista-elenco .woocommerce ul.products li.product .ast-woo-product-category,
	.brico-vista-elenco .woocommerce ul.products li.product .ast-loop-product__link {
		grid-column: 1 / -1;
	}
	.brico-vista-elenco .woocommerce ul.products li.product .price {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		text-align: left;
	}
	.brico-vista-elenco .woocommerce ul.products li.product .button {
		grid-column: 2;
		grid-row: 4;
		width: auto;
	}
}

/* ==========================================================================
   v1.6.2 — SCHEDA PRODOTTO E CARRELLO
   --------------------------------------------------------------------------
   Difetti visti aprendo le pagine interne una per una, l'11/09/2026.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Il segnaposto in scheda prodotto

   Ora arriva anche qui (vedi il filtro `woocommerce_placeholder_img_src`
   in inc/product-placeholder.php), ma il template della galleria lo
   chiede a 600px: senza queste righe si otterrebbe un simbolo alto
   seicento pixel, cioe' un cartellone.

   Il riquadro resta generoso — una scheda prodotto puo' permetterselo,
   e al centro c'e' comunque l'informazione — ma il simbolo dentro sta
   alla sua misura.
   -------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery--without-images img,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	padding: 2.5rem;
	background: var(--brico-color-surface-alt);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
}

/* --------------------------------------------------------------------
   2. CONTRASTO delle etichette di disponibilita'

   axe ne ha segnalata una sola perche' era l'unica in pagina; le altre
   due le ho calcolate a mano sul colore composito, ed erano messe
   peggio. Il testo su un fondo tinta si legge contro IL FONDO TINTA,
   non contro il bianco.

     in-stock      #1E7E34 su #E9F2EC = 4,49:1  appena sotto
     low-stock     #C99400 su #FDF2CC = 2,43:1  molto sotto
     on-backorder  #2E5FC0 su #E6ECF9 = 5,05:1  passava gia'

   Il caso peggiore era proprio "scorte limitate", cioe' il messaggio
   che ha piu' bisogno di essere letto.
   -------------------------------------------------------------------- */
.woocommerce div.product .stock.in-stock {
	color: #1A6E2D;   /* 5,55:1 sul fondo verde chiaro */
}

.woocommerce div.product .stock.low-stock {
	color: #8A6600;   /* 4,71:1 sul fondo ambra, era 2,43 */
}

/* --------------------------------------------------------------------
   3. I codici lunghi sfondavano la loro etichetta

   `text-overflow: ellipsis` non taglia niente dentro un contenitore
   flessibile finche' l'elemento puo' crescere: serve `min-width: 0`,
   che e' la riga che manca a meta' dei troncamenti che "non
   funzionano". Visto sui codici anomali del gestionale, quelli da 19-27
   cifre.
   -------------------------------------------------------------------- */
.woocommerce ul.products li.product .brico-card-code {
	min-width: 0;
	max-width: 14ch;
}

.brico-vista-elenco .woocommerce ul.products li.product .brico-card-code {
	max-width: 100%;
}

/* --------------------------------------------------------------------
   4. Il selettore di quantita', ora che e' uno solo

   I comandi doppi di Astra vengono tolti da shop.js. Qui si da' al
   nostro la forma che aveva sempre avuto in scheda prodotto, ma anche
   nel CARRELLO, dove prima non arrivava — e dove sta il caso peggiore:
   tre righe, tre quantita', dodici comandi.
   -------------------------------------------------------------------- */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	overflow: hidden;
	vertical-align: middle;
}

.woocommerce .quantity input.qty {
	width: 3.2rem;
	border: none;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
}

.woocommerce .quantity .brico-qty-btn {
	background: var(--brico-color-surface-alt);
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--brico-color-text);
	transition: background var(--brico-transition);
}

.woocommerce .quantity .brico-qty-btn:hover {
	background: var(--brico-color-border);
}

/* --------------------------------------------------------------------
   v1.6.3 — I COMANDI DI QUANTITA' DI ASTRA

   Astra aggiunge i suoi `<a class="minus">` e `<a class="plus">` col
   proprio JavaScript, che gira DOPO il nostro: toglierli da shop.js non
   funziona, perche' quando ci proviamo non esistono ancora. Misurato in
   scheda prodotto: `- − 1 + +`, quattro comandi per una quantita'. Nel
   carrello, con tre righe, dodici.

   Contro qualcosa che arriva a tempo indefinito il CSS vince sempre:
   questa regola vale comunque, e `display: none` li toglie anche dalla
   sequenza di tabulazione. Restano i nostri, che sono `<button>` veri
   con la loro `aria-label` — i suoi sono `<a href="javascript:void(0)">`,
   cioe' link che non portano da nessuna parte.
   -------------------------------------------------------------------- */
.woocommerce .quantity a.minus,
.woocommerce .quantity a.plus,
.woocommerce .quantity > .screen-reader-text {
	display: none;
}

/* ==========================================================================
   v1.7.0 — AREA ACCOUNT E CHECKOUT
   --------------------------------------------------------------------------
   Erano rimaste al WooCommerce di serie: elenchi puntati, link blu di
   sistema, campi senza forma. Accanto al catalogo restilizzato
   sembravano di un altro sito — ed e' un guaio piu' serio di quanto
   sembri, perche' sono le uniche due pagine in cui l'utente SCRIVE, e
   sono quelle dove decide se fidarsi.
   ========================================================================== */

/* --------------------------------------------------------------------
   0. I LINK DENTRO AL TESTO SI SOTTOLINEANO

   axe, sia in account sia al checkout: `link-in-text-block`, contrasto
   **1,99:1 fra il link e il testo che lo circonda**. Un link
   riconoscibile SOLO dal colore deve staccarsi di almeno 3:1 dal testo
   vicino, oppure avere un altro segno (WCAG 1.4.1). Il blu dei link su
   testo quasi nero non ci arriva, e la sottolineatura e' l'altro segno
   — quello che si vede anche a chi non distingue i colori.

   E' L'UNICO `!important` di questo foglio, e non e' una scorciatoia:
   e' stato verificato che serve. La regola senza, a specificita'
   (0,1,2), perdeva contro dei reset a (0,0,1) — il che non ha senso
   nella cascata. La prova decisiva: iniettando in fondo alla pagina un
   `<style>` con lo STESSO identico selettore, il calcolato restava
   `none`. Cioe' non e' un problema di specificita' ne' di ordine: c'e'
   qualcosa (Astra o gli stili globali di Gutenberg, che azzerano
   entrambi la decorazione dei link) che vince comunque.

   Contro un reset globale che non si riesce a individuare, e per un
   requisito di accessibilita' e non di gusto, `!important` e' lo
   strumento giusto. Se un giorno si trova la regola vera, questa va
   tolta — non lasciata li' "che tanto funziona".

   Solo dentro ai blocchi di testo: non su menu, pulsanti e schede, dove
   la forma gia' dice che sono cliccabili.
   -------------------------------------------------------------------- */
.woocommerce-MyAccount-content p a,
.woocommerce-checkout p a,
.woocommerce-privacy-policy-text a,
a.woocommerce-privacy-policy-link,
.woocommerce-terms-and-conditions-link,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-info a,
.woocommerce-message a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------
   1. IL MENU DELL'ACCOUNT

   Era un elenco puntato con i bordi. Diventa una colonna di voci con
   la barra del brand su quella corrente — lo stesso segnale che usano
   le voci attive del pannello filtri, cosi' il sito parla una lingua
   sola.
   -------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
	overflow: hidden;
	background: var(--brico-color-surface);
	box-shadow: var(--brico-shadow);
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--brico-color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.85rem 1.1rem;
	min-height: max(2.75rem, 44px);
	color: var(--brico-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border-left: 3px solid transparent;
	transition: background var(--brico-transition), border-color var(--brico-transition), color var(--brico-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--brico-color-surface-alt);
	color: var(--brico-color-secondary);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--brico-color-surface-alt);
	border-left-color: var(--brico-color-secondary);
	color: var(--brico-color-secondary);
}

/* "Esci" non e' una voce come le altre: e' l'unica che ti porta fuori.
   Staccarla dal gruppo evita di premerla per sbaglio cercando
   "Dettagli account", che le sta subito sopra. */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a {
	color: var(--brico-color-text-muted);
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-content {
	font-size: 0.97rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------------
   2. IL CHECKOUT

   Due colonne: a sinistra i campi, a destra il riepilogo che **resta
   in vista mentre si scorre**. Su un ordine di ferramenta con venti
   righe, un riepilogo che scappa in cima e' il motivo per cui si
   ricontrolla tre volte prima di confermare.
   -------------------------------------------------------------------- */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--brico-color-text);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--brico-color-border);
}

/* I campi: stessa forma dei campi del pannello filtri. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection {
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	padding: 0.6em 0.8em;
	min-height: max(2.75rem, 44px);
	font-family: var(--brico-font-base);
	font-size: 0.95rem;
	background: var(--brico-color-surface);
	transition: border-color var(--brico-transition), box-shadow var(--brico-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--brico-color-secondary);
	box-shadow: 0 0 0 3px rgba(46, 95, 192, 0.15);
	outline: none;   /* sostituito dal riquadro qui sopra, che e' piu' visibile */
}

.woocommerce form .form-row label {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--brico-color-text);
	margin-bottom: 0.35rem;
	display: block;
}

/* L'asterisco dei campi obbligatori in rosso e con un nome vero per
   chi non lo vede: WooCommerce lo stampa come `<abbr title="richiesto">`. */
.woocommerce form .form-row .required {
	color: var(--brico-color-primary);
	text-decoration: none;
	border: none;
}

/* Il campo facoltativo lo dice sottovoce, non con la stessa forza del
   nome del campo. */
.woocommerce form .form-row label .optional {
	color: var(--brico-color-text-muted);
	font-weight: 400;
}

/* Il riepilogo dell'ordine: una scheda, come le card del catalogo. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--brico-color-surface);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
	padding: 1.25rem 1.4rem 1.4rem;
	box-shadow: var(--brico-shadow);
	position: sticky;
	top: 1.5rem;
}

.woocommerce-checkout table.shop_table {
	border: none;
	border-radius: 0;
	margin: 0;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border-top: none;
	border-bottom: 1px solid var(--brico-color-border);
	padding: 0.7rem 0;
	font-size: 0.92rem;
}

.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
	border-bottom: none;
	font-size: 1.1rem;
	font-weight: 700;
	padding-top: 1rem;
}

.woocommerce-checkout table.shop_table tfoot .order-total td {
	color: var(--brico-color-primary);
}

/* Il pulsante che conclude: rosso come "Aggiungi al carrello" della
   scheda prodotto. E' l'azione che impegna, ed e' l'unica in pagina
   che deve avere quel peso. */
.woocommerce #place_order,
.woocommerce-checkout #place_order {
	width: 100%;
	background: var(--brico-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--brico-radius-sm);
	padding: 0.95em 1.5em;
	font-size: 1.05rem;
	font-weight: 700;
	margin-top: 1rem;
	min-height: max(3.25rem, 52px);
	transition: background var(--brico-transition);
}

.woocommerce #place_order:hover {
	background: var(--brico-color-primary-dark);
}

/* I metodi di pagamento */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: none;
	padding: 1rem 0 0;
	margin: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--brico-color-surface-alt);
	border-radius: var(--brico-radius-sm);
	font-size: 0.9rem;
	margin-top: 0.6rem;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;   /* il triangolino di WooCommerce, che con questo bordo non torna */
}

/* --------------------------------------------------------------------
   3. CARRELLO: la scheda dei totali e i pulsanti
   -------------------------------------------------------------------- */
.woocommerce .cart_totals > h2 {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--brico-color-border);
}

.woocommerce .cart-collaterals .cart_totals {
	background: var(--brico-color-surface);
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
	padding: 1.25rem 1.4rem 1.4rem;
	box-shadow: var(--brico-shadow);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: var(--brico-color-primary);
	border-radius: var(--brico-radius-sm);
	font-weight: 700;
	font-size: 1.02rem;
	padding: 0.9em 1.5em;
	min-height: max(3rem, 48px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--brico-color-primary-dark);
}

.woocommerce table.shop_table.cart {
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
	overflow: hidden;
}

.woocommerce table.shop_table.cart td.product-name a {
	color: var(--brico-color-text);
	text-decoration: none;
	font-weight: 600;
}

.woocommerce table.shop_table.cart td.product-name a:hover {
	color: var(--brico-color-secondary);
	text-decoration: underline;
}

/* --------------------------------------------------------------------
   4. Messaggi di WooCommerce (avvisi, errori, conferme)

   Quello di serie ha una barra colorata in cima e nient'altro. Qui
   prendono il colore del loro significato su tutto il bordo, che si
   riconosce prima di leggere.
   -------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 4px solid;
	border-radius: var(--brico-radius-sm);
	background: var(--brico-color-surface-alt);
	padding: 1rem 1.2rem;
	font-size: 0.94rem;
}

.woocommerce-message {
	border-left-color: #1A6E2D;
}

.woocommerce-info {
	border-left-color: var(--brico-color-secondary);
}

.woocommerce-error {
	border-left-color: var(--brico-color-primary);
}

/* --------------------------------------------------------------------
   5. Sotto i 921px il riepilogo smette di essere appiccicato: su un
   telefono "sticky" vuol dire mangiarsi mezzo schermo.
   -------------------------------------------------------------------- */
@media (max-width: 921px) {
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .woocommerce-checkout-review-order {
		position: static;
	}
}

/* ==========================================================================
   v1.9.2 — IMPAGINAZIONE DEL CATALOGO: SIDEBAR AL 20%, CONTENUTO ALL'80%,
            CINQUE/SEI COLONNE DI PRODOTTI
   --------------------------------------------------------------------------
   Richiesta del cliente (22/09/2026): sidebar al 20%, catalogo all'80%,
   griglia a 5/6 colonne.

   IL PROBLEMA ARITMETICO, MISURATO PRIMA DI SCRIVERE
   Stato di partenza rilevato a schermo sul catalogo locale (viewport
   1920px):

     .ast-container   1440px   (max-width di Astra)
     #secondary        432px   (30%, con 60px di gronda a destra)
     #primary         1008px   (70%, con 60px di gronda a sinistra)
     ul.products       947px -> 3 colonne da 297px

   Portando solo le percentuali a 20/80 il contenuto passa da 1008 a
   1152px e la griglia utile a 1092px. Sei colonne dentro 1092px, tolte
   le cinque gronde, fanno card da 158px: il titolo di un articolo di
   ferramenta ci va a capo quattro volte e "Aggiungi al carrello" si
   spezza. Sarebbe stata la richiesta rispettata alla lettera e il
   catalogo peggiorato.

   LA SCELTA: le sei colonne si pagano con la larghezza, non con la
   strettezza delle card. Sulle sole pagine di catalogo il contenitore
   sale da 1440 a 1860px (marcato dalla classe .brico-catalogo, messa
   sul <body> da inc/catalog-layout.php). Su 1920px il conto diventa:

     contenitore      1860px  (meno 2x24px di gronda = 1812px utili)
     #secondary        362px  (20%)
     #primary         1450px  (80%, meno 60px di gronda = 1390px)
     ul.products      1390px -> 6 colonne da 211px

   PERCHE' AUTO-FILL E NON repeat(6, 1fr)
   Un numero fisso di colonne e' esattamente l'errore corretto nella
   v1.5.4/1.5.5, dove era Astra a fissarlo: su uno schermo piu' stretto
   sei colonne diventano sei strisce illeggibili. Con `auto-fill` il
   numero lo decide lo spazio, e la scaletta misurata e' questa:

     viewport 1920 -> 6 colonne da 211px
     viewport 1600 -> 5 colonne da 217px
     viewport 1440 -> 4 colonne da 245px
     viewport 1280 -> 4 colonne da 213px
     viewport 1024 -> 3 colonne da 224px

   cioe' proprio il "5/6 colonne" chiesto dal cliente sui monitor su cui
   il sito verra' guardato, senza rompersi sugli altri. Per forzare un
   numero diverso basta cambiare --brico-card-min qui sotto: e' l'unica
   manopola.

   LA SIDEBAR SOTTO I 1600px
   Il 20% e' una percentuale, quindi si restringe con lo schermo: su un
   1280 sarebbero 246px lordi, 186px netti tolta la gronda, e i filtri
   (brico-filtri) non ci stanno piu'. Sotto i 1600px si resta quindi a
   25/75, che e' comunque piu' catalogo di prima. Sotto i 922px Astra
   impila da sola la barra laterale e qui non tocchiamo niente.

   SPECIFICITA', SENZA !important
   - il contenitore: la regola da battere e'
     `.ast-woo-shop-archive .site-content > .ast-container` (0,3,1) nella
     CSS inline di WooCommerce. Si usa `#content` invece di
     `.site-content` -> (1,1,1), vinta sull'id senza alzare la voce.
   - le percentuali: Astra scrive `#primary{width:70%}` (1,0,0) nella sua
     inline. `body.brico-catalogo #primary` e' (1,1,1).
   - la griglia: si eredita il selettore gia' calibrato nella v1.5.5
     (vedi sopra), aggiungendoci `body.brico-catalogo`.
   ========================================================================== */

:root {
	/* Le tre manopole dell'impaginazione del catalogo. */
	--brico-catalogo-max: 1860px;   /* larghezza massima del contenitore  */
	--brico-catalogo-gronda: 1.5rem;/* respiro ai bordi e fra le card     */
	--brico-card-min: 200px;        /* larghezza minima di una card       */
}

/* --------------------------------------------------------------------
   1. Il contenitore, solo sulle pagine di catalogo.

   La gronda laterale non e' un vezzo: style.css azzera il padding di
   .ast-container, quindi senza queste due righe su un monitor da 1700px
   il catalogo toccherebbe i bordi della finestra.
   -------------------------------------------------------------------- */
body.brico-catalogo #content > .ast-container {
	max-width: var(--brico-catalogo-max);
	padding-left: var(--brico-catalogo-gronda);
	padding-right: var(--brico-catalogo-gronda);
}

/* --------------------------------------------------------------------
   2. Il riparto fra barra laterale e catalogo.
   -------------------------------------------------------------------- */
@media (min-width: 1600px) {
	body.brico-catalogo #primary   { width: 80%; }
	body.brico-catalogo #secondary { width: 20%; }
}

@media (min-width: 922px) and (max-width: 1599.98px) {
	body.brico-catalogo #primary   { width: 75%; }
	body.brico-catalogo #secondary { width: 25%; }
}

/* --------------------------------------------------------------------
   3. La griglia dei prodotti.
   -------------------------------------------------------------------- */
body.brico-catalogo ul.products:not(.elementor-grid)[class*="columns-"] {
	grid-template-columns: repeat(auto-fill, minmax(var(--brico-card-min), 1fr));
	gap: var(--brico-catalogo-gronda);
}

/* --------------------------------------------------------------------
   4. Tablet e telefono.

   ATTENZIONE, difetto preesistente corretto qui: le regole responsive
   della v1.4 (`.woocommerce ul.products` dentro @media 782px e 480px)
   valgono (0,2,1) e stanno PRIMA della regola della v1.5.5, che vale
   (0,3,1). Da allora sul telefono non vincevano piu': la griglia
   restava su `minmax(260px, 1fr)`, cioe' UNA colonna sola su qualunque
   schermo sotto i 548px. Qui le due colonne del telefono tornano, con
   la stessa specificita' della regola che le annullava.
   -------------------------------------------------------------------- */
@media (max-width: 921.98px) {
	body.brico-catalogo ul.products:not(.elementor-grid)[class*="columns-"] {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 600px) {
	body.brico-catalogo ul.products:not(.elementor-grid)[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.7rem;
	}
}

/* --------------------------------------------------------------------
   5. Card piu' strette: il titolo ha bisogno di una riga in piu'.

   Con card da 297px il titolo stava in due righe (min-height 2.7em,
   v1.5.4). A 211px i nomi del gestionale ("SEGA CIRCOLARE 190MM 1400W")
   ne occupano tre: senza questo ritocco i pulsanti tornerebbero a
   sfalsarsi, che e' il difetto chiuso nella v1.5.4.
   -------------------------------------------------------------------- */
@media (min-width: 922px) {
	body.brico-catalogo ul.products li.product h2.woocommerce-loop-product__title {
		min-height: 4em;
	}
}

/* ==========================================================================
   v1.9.3 — LA BARRA DEI FILTRI A SCOMPARSA, ANCHE SU DESKTOP
   --------------------------------------------------------------------------
   La barra vale il 20% di ogni pagina di catalogo ma serve solo nel
   momento in cui si filtra. Da chiusa esce dal flusso (non e' un
   pannello sovrapposto: niente velo, niente prodotti coperti proprio
   mentre si sceglie) e il catalogo prende tutta la larghezza.

   IL VERSO DELLA LOGICA, CHE NON E' OVVIO
   Il CSS di base disegna la barra APERTA, esattamente com'era nella
   1.9.2, e sono le classi su <html> a chiuderla. Il contrario —
   base chiusa, classe che apre — avrebbe lasciato un browser senza
   JavaScript con un catalogo senza filtri e senza modo di tirarli
   fuori. Cosi' invece il caso peggiore e' il comportamento vecchio.
   Per lo stesso motivo il pulsante si vede solo sotto
   `.brico-filtri-js`: un pulsante che non fa niente e' peggio di un
   pulsante assente.

   I NUMERI, misurati (viewport 1920):

     aperta   catalogo 1390px -> 6 colonne da 211px
     chiusa   catalogo 1812px -> 6 colonne da 282px

   cioe' lo stesso numero di prodotti a schermo con un terzo di spazio
   in piu' per ognuno. Il tetto a sei colonne e' una scelta: con
   `auto-fill` da chiusa ne sarebbero venute otto da 219px, e su un
   catalogo senza fotografie conta piu' la larghezza del titolo del
   numero di riquadri.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Il pulsante, nella stessa barra di Griglia/Elenco.

   Stile ereditato da .brico-vista__btn perche' i due comandi stanno
   accanto e devono sembrare parenti, non due epoche diverse del sito.
   -------------------------------------------------------------------- */
.brico-filtri-toggle {
	display: none; /* senza JavaScript non compare: vedi sopra. */
}

.brico-filtri-js .brico-filtri-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	vertical-align: middle;
	/* Stesso distacco dal conteggio risultati che .brico-vista tiene dal
	   pulsante dei filtri: senza, "...risultati" e "Filtri" si toccano. */
	margin: 0 0 1.5rem 0.75rem;
	padding: 0.42em 0.85em;
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	background: var(--brico-color-surface-alt);
	font-family: var(--brico-font-base);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--brico-color-text-muted);
	cursor: pointer;
	transition: background var(--brico-transition), color var(--brico-transition),
	            border-color var(--brico-transition);
}

.brico-filtri-toggle svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.brico-filtri-toggle:hover {
	color: var(--brico-color-text);
	border-color: var(--brico-color-text-muted);
}

/* Aperta = premuto. Lo stato e' gia' detto ad alta voce da
   `aria-expanded`; questo lo dice a chi guarda, e usa lo stesso
   trattamento del pulsante attivo di Griglia/Elenco. */
.brico-filtri-toggle[aria-expanded="true"] {
	background: var(--brico-color-surface);
	border-color: var(--brico-color-secondary);
	color: var(--brico-color-secondary);
	box-shadow: var(--brico-shadow);
}

.brico-filtri-toggle:focus-visible {
	outline: 2px solid var(--brico-color-secondary);
	outline-offset: 1px;
}

/* v1.9.4 — qui c'era una regola che sotto i 600px lasciava la sola
   icona. E' stata tolta, non spostata: da questa versione il pulsante
   non esiste affatto sotto i 922px (vedi sotto), quindi era codice che
   non poteva piu' applicarsi. Una regola morta in un foglio da 2000
   righe e' una mezz'ora persa per chi la legge fra sei mesi. */

/* --------------------------------------------------------------------
   2. Lo stato chiuso.

   `display: none` e non `width: 0`: a larghezza zero i collegamenti
   dentro la barra restano raggiungibili col tasto Tab e annunciati dai
   lettori di schermo, cioe' un pannello invisibile pieno di trappole.
   Niente transizione, per la stessa ragione — e perche' animare la
   larghezza di una colonna su una pagina da 36 card significa un
   riflusso per fotogramma.

   Specificita': `html.brico-filtri-chiusi body.brico-catalogo #primary`
   vale (1,2,2) e batte sia la regola di Astra `#primary{width:70%}`
   (1,0,0) sia le nostre della 1.9.2 (1,1,1), dentro o fuori dalle loro
   media query — la specificita' non guarda le media query.
   -------------------------------------------------------------------- */
/* v1.9.4 — DA 922px IN SU, E NON PIU' OVUNQUE.
   La 1.9.3 nascondeva #secondary a ogni larghezza, e sul telefono era
   un difetto: sotto i 921px esiste gia' il pulsante "Filtra"
   (inc/catalog-filters.php) che apre il pannello a cassetto, e quel
   pannello VIVE DENTRO #secondary, messo li' dal widget
   [brico_filtri]. Nascondendo la colonna si spegneva il cassetto — e
   il pulsante restava, ad aprire il nulla.
   Sotto i 922px si torna quindi al comportamento precedente alla
   1.9.3, che era gia' giusto: colonna impilata da Astra, filtri
   raggiungibili dal loro pulsante. */
@media (min-width: 922px) {
	.brico-filtri-chiusi body.brico-catalogo #secondary {
		display: none;
	}

	.brico-filtri-chiusi body.brico-catalogo #primary {
		width: 100%;
		padding-left: 0;
	}

	.ast-left-sidebar #primary {
        border-left:none;
    }
}

/* --------------------------------------------------------------------
   3. La griglia a barra chiusa: sei colonne, non otto.

   `:not(.brico-vista-elenco)` non e' una precauzione, e' necessario:
   senza, questa regola varrebbe (0,4,3) e batterebbe la riga unica
   della vista a elenco, che vale (0,4,1). Con il `:not` la regola
   semplicemente non si applica in vista elenco, che resta padrona
   della sua griglia.

   Il tetto scatta da 1500px in su: sotto, `auto-fill` da sola fa gia'
   sei colonne o meno (misurato: 6 a 1440, 5 a 1280, 4 a 1024) e
   imporne sei le renderebbe strisce.
   -------------------------------------------------------------------- */
@media (min-width: 1500px) {
	.brico-filtri-chiusi:not(.brico-vista-elenco) body.brico-catalogo ul.products:not(.elementor-grid)[class*="columns-"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* A barra chiusa le card sono larghe: il titolo torna a stare in due
   righe e il min-height da 4em della 1.9.2 lascerebbe un vuoto sotto
   ogni nome corto. */
@media (min-width: 1500px) {
	.brico-filtri-chiusi body.brico-catalogo ul.products li.product h2.woocommerce-loop-product__title {
		min-height: 2.7em;
	}
}

/* ==========================================================================
   v1.9.4 — LA TESTATA DEL CATALOGO E IL PULSANTE DEI FILTRI
   --------------------------------------------------------------------------
   Due richieste del 22/09/2026: il pulsante "Filtri" piu' evidente e
   alto quanto i comandi accanto, e meno vuoto fra la fine
   dell'intestazione e la prima card.

   LO SPAZIO, MISURATO PRIMA E DOPO

     prima   263px   64 margine + 24 briciole + 15 + 50 titolo(36px)
                     + 36 vuoto + 50 barra + 24
     dopo    ~185px  28 margine + 20 briciole + 8 + 36 titolo(29px)
                     + 15 + filetto + 14 + 50 barra + 20

   Circa un terzo in meno senza togliere niente: il conteggio non
   sparisce, cambia posto (inc/catalog-layout.php), e il titolo scende
   da 36 a 29px, che su una pagina che dice "Shop" e' abbastanza.

   LA FIRMA DI MARCA, NON UN ORNAMENTO NUOVO
   Il filetto verticale accanto al titolo e' la STESSA striscia a tre
   colori di .brico-footer__accent, girata di 90 gradi: rosso Andreani,
   blu Brico, giallo casco, un terzo ciascuno. Inventare qui un
   dettaglio grafico diverso avrebbe aggiunto un secondo vocabolario al
   tema; riusare quello che c'e' lo rende una firma invece che una
   decorazione.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Meno margine sopra.

   Astra da' 4em (64px) sopra e sotto alla colonna. Sotto va bene, e'
   lo stacco dal footer; sopra, su una pagina di catalogo, e' vuoto.
   Si cambia il solo margine di sopra e si tocca ANCHE #secondary,
   altrimenti a filtri aperti la barra partirebbe 36px piu' in basso
   del catalogo.
   -------------------------------------------------------------------- */
@media (min-width: 922px) {
	body.brico-catalogo #primary,
	body.brico-catalogo #secondary {
		margin-top: 1.75rem;
	}
}

/* --------------------------------------------------------------------
   2. Le briciole: piu' piccole e piu' vicine al titolo.
   -------------------------------------------------------------------- */
body.brico-catalogo .woocommerce-breadcrumb {
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------
   3. La testata: titolo, filetto tricolore, numero di articoli.

   `align-items: baseline` e non `center`: il numero deve appoggiarsi
   alla stessa linea di scrittura del titolo, che e' quello che fa
   sembrare le due cose una frase sola invece di due oggetti
   impilati male.
   -------------------------------------------------------------------- */
body.brico-catalogo .woocommerce-products-header {
	position: relative;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.3rem 0.85rem;
	padding: 0 0 0.9rem 1.05rem;
	margin: 0 0 0.85rem;
	border-bottom: 1px solid var(--brico-color-border);
}

/* Il filetto tricolore. Copre solo l'altezza del titolo, non tutta la
   testata: da' l'idea di una firma accanto al nome, non di una
   cornice. */
body.brico-catalogo .woocommerce-products-header::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 5px;
	height: 1.5em;
	border-radius: 3px;
	background: linear-gradient(
		180deg,
		var(--brico-color-primary) 0%,
		var(--brico-color-primary) 33.33%,
		var(--brico-color-secondary) 33.33%,
		var(--brico-color-secondary) 66.66%,
		var(--brico-color-accent) 66.66%,
		var(--brico-color-accent) 100%
	);
}

body.brico-catalogo .woocommerce-products-header .page-title,
body.brico-catalogo .woocommerce-products-header__title {
	margin: 0;
	font-size: clamp( 1.5rem, 1.1rem + 1vw, 1.85rem );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--brico-color-text);
}

/* I nomi di categoria arrivano dal gestionale in MAIUSCOLO
   ("ABBIGLIAMENTO", "AUTO SENZA TRANSPONDER"): a 29px e in grassetto
   urlano. Mezzo punto di spaziatura in meno li calma senza toccare il
   dato, che resta quello che dice il gestionale. */
body.brico-catalogo.tax-product_cat .woocommerce-products-header .page-title {
	letter-spacing: 0;
}

/* Il numero di articoli. Etichetta, non paragrafo: e' un dato di
   contorno che deve leggersi in un colpo d'occhio e non competere
   col titolo. */
body.brico-catalogo .brico-conteggio {
	margin: 0;
	padding: 0.28em 0.75em;
	border: 1px solid var(--brico-color-border);
	border-radius: 999px;
	background: var(--brico-color-surface-alt);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--brico-color-text-muted);
	white-space: nowrap;
}

/* Tutto il resto che WooCommerce puo' infilare qui dentro — la
   descrizione della categoria, in primo luogo — va a capo per conto
   suo invece di accodarsi al titolo. */
body.brico-catalogo .woocommerce-products-header > *:not(.page-title):not(.woocommerce-products-header__title):not(.brico-conteggio) {
	flex-basis: 100%;
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	color: var(--brico-color-text-muted);
}

/* --------------------------------------------------------------------
   4. La barra dei comandi.

   `float: none` sull'ordinamento non e' pignoleria: WooCommerce lo
   manda a destra con `float: right`, e un float dentro un contenitore
   flex viene ignorato come float ma resta a disturbare i margini. Si
   spegne e si va a destra con `margin-left: auto`, che in una riga
   flex e' il modo giusto di dire "tu stai in fondo".
   -------------------------------------------------------------------- */
body.brico-catalogo .brico-barra {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 1.25rem;
}

body.brico-catalogo .brico-barra .woocommerce-ordering {
	float: none;
	margin: 0 0 0 auto;
}

body.brico-catalogo .brico-barra .brico-vista,
body.brico-catalogo .brico-barra .brico-filtri-toggle {
	margin: 0;
}

/* --------------------------------------------------------------------
   5. Il pulsante "Filtri": evidente, e alto quanto i comandi accanto.

   ALTEZZA. Il gruppo Griglia/Elenco misura 50px (44 di pulsanti + 2+2
   di imbottitura + 1+1 di bordo) e la tendina dell'ordinamento 40.
   Il pulsante ne misurava 28: sembrava un'etichetta, non un comando.
   Si fissa a 50px con `min-height`, non con `height`, cosi' se un
   domani la traduzione lo fa andare a capo cresce invece di tagliare.

   EVIDENZA. Fondo pieno nel blu del marchio, testo bianco: e' l'unico
   comando della riga che apre qualcosa, e su un catalogo da 28.644
   articoli filtrare e' IL gesto. Contrasto bianco su #2E5FC0 misurato
   a schermo: 5,98:1, sopra il 4,5:1 di WCAG AA anche per il testo
   normale (vedi feedback_contrasto_si_misura: misurato, non dedotto
   dalla dichiarazione).

   STATO. Da aperto va nel blu scuro con un'ombra interna — premuto,
   non spento — e la freccetta gira di 180 gradi. Lo stato vero lo dice
   `aria-expanded`; questi due segni lo dicono a chi guarda.
   -------------------------------------------------------------------- */
.brico-filtri-js .brico-filtri-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 50px;
	padding: 0 1.15em;
	border: 1px solid var(--brico-color-secondary);
	border-radius: var(--brico-radius-sm);
	background: var(--brico-color-secondary);
	font-family: var(--brico-font-base);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	transition: background var(--brico-transition), border-color var(--brico-transition),
	            box-shadow var(--brico-transition);
}

.brico-filtri-toggle svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	flex: none;
}

/* La freccetta: piccola, e gira. `transform` e non un secondo SVG,
   cosi' il verso e' sempre coerente con lo stato e non c'e' un
   disegno da tenere allineato all'altro. */
.brico-filtri-toggle .brico-filtri-toggle__freccia {
	width: 11px;
	height: 11px;
	transition: transform var(--brico-transition);
}

.brico-filtri-toggle[aria-expanded="true"] .brico-filtri-toggle__freccia {
	transform: rotate(180deg);
}

.brico-filtri-js .brico-filtri-toggle:hover {
	background: var(--brico-color-secondary-dark);
	border-color: var(--brico-color-secondary-dark);
}

.brico-filtri-js .brico-filtri-toggle[aria-expanded="true"] {
	background: var(--brico-color-secondary-dark);
	border-color: var(--brico-color-secondary-dark);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22);
}

.brico-filtri-toggle:focus-visible {
	outline: 2px solid var(--brico-color-dark);
	outline-offset: 2px;
}

/* SOTTO I 922px IL PULSANTE NON C'E'.
   Non e' una scelta di stile: sotto quella soglia comanda il pulsante
   "Filtra" della 1.7 col suo cassetto, che li' funziona meglio (il
   pannello copre lo schermo invece di spingere il catalogo in basso di
   mille pixel). Due pulsanti che dicono quasi la stessa cosa, accanto,
   con comportamenti diversi, sarebbero peggio di uno solo. */
@media (max-width: 921.98px) {
	.brico-filtri-js .brico-filtri-toggle {
		display: none;
	}
}

/* ==========================================================================
   v1.9.4 — L'APERTURA ANIMATA DELLA BARRA DEI FILTRI
   --------------------------------------------------------------------------
   Il ragionamento sul perche' si usa una View Transition invece di una
   transizione CSS sta in assets/js/shop.js, sopra applicaFiltri(). In
   due righe: aprire la barra non muove un elemento, ricalcola
   l'impaginazione di tutta la colonna, e animare `width` vorrebbe dire
   rifare impaginazione e disegno di 36 card sessanta volte al secondo.
   Con una View Transition il browser interpola DUE FOTOGRAFIE sul
   compositore e l'impaginazione la rifa' una volta sola.

   COSA SI VEDE, E IN CHE ORDINE
   1. il catalogo (gruppo `root`) passa da sei card larghe a sei strette
      con una dissolvenza incrociata. Non si "schiaccia": sono due
      immagini diverse che si scambiano, quindi il testo non si
      deforma mai;
   2. la barra dei filtri, che ha un nome suo, entra scivolando da
      sinistra invece di comparire e basta.

   Il tempo e' 260ms per la barra e 200 per il catalogo: la barra e'
   l'oggetto che si presenta, il catalogo e' lo sfondo che si adatta, e
   uno sfondo che ci mette quanto il protagonista sembra lento. La curva
   `cubic-bezier(.32, .72, 0, 1)` parte decisa e si ferma dolcemente —
   e' il profilo di un cassetto ben fatto, non di una molla.

   TUTTO DENTRO prefers-reduced-motion: no-preference
   A chi ha chiesto meno movimento il JavaScript non avvia proprio la
   transizione; queste regole restano comunque scritte sotto la query
   giusta, cosi' anche se un domani qualcuno chiamasse la transizione
   da un'altra parte, qui non si anima niente.
   ========================================================================== */

/* Il nome vive SOLO durante la transizione (classe messa e tolta da
   shop.js) E SOLO da 922px in su, dove il pulsante esiste. Il perche'
   sta per esteso in shop.js: sotto quella soglia #secondary contiene
   il cassetto `position: fixed` dei filtri del telefono, e un
   `view-transition-name` lo trasformerebbe nel suo blocco contenitore.
   Due condizioni per la stessa ragione: il nome non deve mai esistere
   dove quel cassetto e' in uso. */
@media (prefers-reduced-motion: no-preference) and (min-width: 922px) {
	html.brico-filtri-in-moto body.brico-catalogo #secondary {
		view-transition-name: brico-barra-filtri;

		/* v1.9.5 — IL FONDO PIENO E' META' DELLA CORREZIONE DELLO
		   SFARFALLIO, e va spiegato perche' sembra inutile.

		   #secondary non ha un fondo suo: si vede il bianco della pagina
		   attraverso. A schermo non cambia niente — bianco su bianco —
		   ma la fotografia che la View Transition ne prende NON eredita
		   lo sfondo della pagina: diventa il testo dei filtri ritagliato
		   sul NULLA. In chiusura quel ritaglio trasparente resta sospeso
		   sopra le card che intanto compaiono sotto, e per due decimi di
		   secondo si leggono due testi sovrapposti. E' quello lo
		   sfarfallio.

		   Con un fondo esplicito la fotografia diventa un PANNELLO
		   opaco, che scorrendo via scopre il catalogo invece di
		   mescolarcisi. Vale solo durante la transizione, quindi non
		   cambia una virgola di come la barra appare normalmente. */
		background-color: var(--brico-color-surface);
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* Tutti i gruppi allo stesso tempo: se il gruppo dura piu' delle
	   immagini che contiene, la transizione resta "viva" a schermo
	   fermo e la classe si toglie in ritardo. */
	::view-transition-group(*) {
		animation-duration: 240ms;
	}

	/* --------------------------------------------------------------
	   v1.9.5 — VIA LA DISSOLVENZA DI SERIE. L'altra meta' della
	   correzione.

	   Il browser incrocia le due fotografie del catalogo facendo
	   sfumare la vecchia verso zero E la nuova da zero, tenendole
	   insieme con `mix-blend-mode: plus-lighter`. Quel blend SOMMA la
	   luce: dove le due immagini sono diverse — ed e' tutta la zona
	   della barra — la somma va oltre il bianco e si vede un lampo.
	   Su una pagina bianca con testo scuro e' il difetto piu' visibile
	   che l'API abbia.

	   Qui si fa piu' semplice e non lampeggia: la fotografia VECCHIA
	   resta ferma e opaca, e la NUOVA le compare sopra. Una sola cosa
	   si muove, sotto c'e' sempre un'immagine piena, quindi niente
	   somma di luci e niente calo a meta' strada (il difetto opposto,
	   che si sarebbe visto passando a `normal` e lasciando sfumare
	   tutt'e due).

	   Funziona perche' nell'albero delle pseudo-classi `-new` si
	   disegna SOPRA `-old`: e' l'ordine dato dalla specifica, non una
	   fortuna.
	   -------------------------------------------------------------- */
	::view-transition-old(root) {
		animation: none;
		opacity: 1;
		mix-blend-mode: normal;
	}

	::view-transition-new(root) {
		animation: brico-catalogo-compare 220ms ease both;
		mix-blend-mode: normal;
	}

	/* La barra: scivola ed entra. 18px e non 100%: e' un pannello che
	   si presenta, non un cassetto che arriva da fuori schermo — e su
	   una colonna larga 362px un ingresso da meno cento percento
	   sembrerebbe una porta che sbatte. */
	::view-transition-new(brico-barra-filtri) {
		animation: brico-filtri-entra 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
	}

	::view-transition-old(brico-barra-filtri) {
		animation: brico-filtri-esce 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
	}
}

@keyframes brico-catalogo-compare {
	from {
		opacity: 0;
	}
}

/* L'opacita' non segue lo spostamento: arriva a uno a meta' corsa e
   ci resta. Un pannello che scivola restando semitrasparente per tutto
   il tragitto e' un fantasma; uno che diventa solido subito e poi si
   sistema e' un pannello. Stessa ragione, al contrario, in uscita:
   resta pieno finche' non ha cominciato ad andarsene davvero. */
@keyframes brico-filtri-entra {
	from {
		opacity: 0;
		transform: translateX(-18px);
	}
	45% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes brico-filtri-esce {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	55% {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translateX(-18px);
	}
}

/* ==========================================================================
   v2.0.0 — Prezzo: parte intera grande, centesimi piccoli (29/09/2026)
   Il markup lo prepara inc/price-display.php su ogni prezzo; qui lo si
   disegna SOLO nelle card del catalogo. Carrello, checkout e minicart
   restano tipografia normale: in una colonna di totali i centesimi
   piccoli si leggerebbero male.
   ========================================================================== */
.woocommerce ul.products li.product .price {
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.woocommerce ul.products li.product .price .brico-cent {
	font-size: 0.6em;
	font-weight: 700;
	vertical-align: 0.55em;
	margin-left: 0.02em;
	letter-spacing: 0;
}
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
	font-size: 0.7em;
	font-weight: 600;
	margin-left: 0.12em;
}
.woocommerce ul.products li.product .price del .brico-cent {
	/* Il prezzo barrato resta leggibile come numero intero: niente apice
	   dentro una riga barrata, la linea taglierebbe i centesimi. */
	font-size: inherit;
	vertical-align: baseline;
}

/* ==========================================================================
   v2.1.3 — "+ IVA" accanto ai prezzi netti, e categoria cliccabile sulle card
   ========================================================================== */
.woocommerce ul.products li.product .price .brico-piu-iva,
.single-product div.product .summary p.price .brico-piu-iva {
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--brico-color-text-muted);
	white-space: nowrap;
	margin-left: 0.35em;
	vertical-align: baseline;
}

/* La categoria sopra il titolo: stesso aspetto di prima (colore e misura
   li eredita dallo span di Astra), in piu' si capisce che e' un link solo
   quando ci si passa sopra o ci si arriva da tastiera. Area di tocco
   allargata in verticale senza spostare niente. */
.woocommerce ul.products li.product .ast-woo-product-category a.brico-card-cat {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 4px 0;
	margin: -4px 0;
	position: relative;
	z-index: 2; /* sopra un eventuale link che copre la card */
}
.woocommerce ul.products li.product .ast-woo-product-category a.brico-card-cat:hover {
	color: var(--brico-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.woocommerce ul.products li.product .ast-woo-product-category a.brico-card-cat:focus-visible {
	outline: 2px solid var(--brico-color-text);
	outline-offset: 2px;
	border-radius: 2px;
}