/* ------------------------------------------------------------------
   NEGOZIO (WooCommerce)
   Solo le rifiniture che theme.json non sa fare da solo.
   ------------------------------------------------------------------ */

/* La colonna dei filtri: su telefono sparisce, perche' Woo mostra da solo
   il pulsante "Filtri" che apre il pannello a scomparsa. */
.piero-colonna-filtri {
	font-size: var(--wp--preset--font-size--medio);
}

.piero-filtri h3 {
	margin: 0 0 .6rem;
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 600;
}

.piero-filtri .wp-block-woocommerce-product-filter-price,
.piero-filtri .wp-block-woocommerce-product-filter-status,
.piero-filtri .wp-block-woocommerce-product-filter-attribute,
.piero-filtri .wp-block-woocommerce-product-filter-rating {
	padding-bottom: 1.4rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--wp--preset--color--chiaro);
}

.piero-filtri .wp-block-woocommerce-product-filter-price:last-child,
.piero-filtri .wp-block-woocommerce-product-filter-status:last-child,
.piero-filtri .wp-block-woocommerce-product-filter-attribute:last-child {
	border-bottom: 0;
}

/* Schede prodotto nelle griglie: stessa aria dappertutto. */
.wp-block-woocommerce-product-template li {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* Il prezzo scontato: il vecchio in grigio e piu' piccolo, il nuovo in evidenza. */
.wc-block-components-product-price del {
	opacity: .55;
	font-size: .9em;
	margin-right: .4rem;
}

.wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 700;
}

/* Su schermi stretti la colonna dei filtri non deve occupare mezza pagina:
   ci pensa il pannello a scomparsa di Woo. */
@media (max-width: 781px) {
	.piero-colonna-filtri {
		flex-basis: 100% !important;
	}
}

/* Galleria della scheda prodotto: angoli come le altre immagini del tema. */
.wp-block-woocommerce-product-image-gallery img {
	border-radius: 12px;
}

/* Il bollino "In offerta": nei nostri colori, non il tondo giallo di serie. */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--acqua);
	color: var(--wp--preset--color--notte);
	border: 0;
	border-radius: 8px;
	padding: .3rem .7rem;
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 600;
	line-height: 1.2;
	min-height: 0;
	min-width: 0;
}

/* I filtri non devono uscire dalla loro colonna. */
.piero-colonna-filtri,
.piero-filtri {
	min-width: 0;
	max-width: 100%;
}

.piero-filtri input[type="text"],
.piero-filtri input[type="number"] {
	max-width: 48%;
	box-sizing: border-box;
}

/* Schede della scheda prodotto (descrizione, informazioni, recensioni):
   niente cornici stile 2013, solo una riga sotto la scheda scelta. */
.woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--chiaro);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .6rem 0;
	color: var(--wp--preset--color--tenue);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--notte);
	border-bottom-color: var(--wp--preset--color--acciaio);
}

/* ⚠️ Il filtro prezzo di WooCommerce nasce largo quanto il contenuto della
   pagina (378px misurati), e in una colonna da 260 sbordava sui prodotti:
   il campo del prezzo massimo finiva tagliato. Qui lo si riporta dentro. */
.piero-colonna-filtri.wp-block-column {
	min-width: 0;
	overflow: hidden;
}

.piero-filtri > *,
.piero-filtri .wp-block-woocommerce-product-filter-price,
.piero-filtri .wc-block-product-filter-price-slider,
.piero-filtri input[type="range"] {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

.piero-filtri [class*="wc-block-product-filter"],
.piero-filtri .wc-block-product-filter-price-slider__range,
.piero-filtri .wc-block-product-filter-price-slider__left,
.piero-filtri .wc-block-product-filter-price-slider__right,
.piero-filtri input.min,
.piero-filtri input.max {
	max-width: 100%;
}

/* I due campi del prezzo, minimo e massimo, uno accanto all'altro. */
.piero-filtri .wc-block-product-filter-price-slider__content {
	gap: .5rem;
}

/* I due campi del prezzo stanno affiancati dentro la colonna. */
.piero-filtri .wc-block-product-filter-price-slider__left,
.piero-filtri .wc-block-product-filter-price-slider__right {
	width: calc(50% - .3rem);
	max-width: calc(50% - .3rem);
}

.piero-filtri .wc-block-product-filter-price-slider__left input,
.piero-filtri .wc-block-product-filter-price-slider__right input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Il cursore del prezzo: lascia respiro ai due pomelli, altrimenti quello di
   destra finisce fuori dalla colonna e non si prende. */
.piero-filtri .wc-block-product-filter-price-slider__range {
	width: calc(100% - 16px);
	max-width: calc(100% - 16px);
	margin: 0 8px;
}

/* La lista delle spunte non e' un riquadro: e' un elenco. */
.piero-filtri .wc-block-product-filter-checkbox-list {
	border: 0;
	padding: 0;
}

/* WooCommerce mette le spunte dentro un fieldset: senza questa riga si vede
   la cornice grigia di serie del browser, che sembra un errore. */
.piero-filtri fieldset,
.wc-block-product-filters__overlay fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* I campi del prezzo, vestiti come il resto del tema. */
.piero-filtri input[type="text"],
.wc-block-product-filters__overlay input[type="text"] {
	border: 1px solid var(--wp--preset--color--chiaro);
	border-radius: 8px;
	padding: .45rem .6rem;
	font-size: var(--wp--preset--font-size--piccolo);
	background: var(--wp--preset--color--bianco);
}

/* Il pulsante "Filtra prodotti" e quello "Applica" del pannello a scomparsa. */
.wc-block-product-filters__open-overlay {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1px solid var(--wp--preset--color--chiaro);
	border-radius: 10px;
	padding: .6rem 1rem;
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--notte);
	font-weight: 600;
}