/*
 * Abello Restyling — Shop e pagine categoria.
 * Pattern sincronizzato "Layout shop" (colonne .abello-shop: Filtri | Prodotti), blocchi Filtri prodotto,
 * conteggio risultati, ordinamento, paginazione; su mobile il pannello filtri in overlay.
 * Le card sono in cards.css. Solo variabili di tokens.css.
 */

/* ================================================================ Colonne */
.woocommerce-content .abello-shop {
	max-width: var(--ab-width-wide);
	margin: 0 auto !important;
	gap: var(--ab-space-8);
}
@media (min-width: 782px) {
	.woocommerce-content .abello-shop > .wp-block-column:first-child { flex-basis: var(--ab-sidebar) !important; flex-grow: 0; }
	.woocommerce-content .abello-shop > .wp-block-column:last-child { flex-basis: 0 !important; flex-grow: 1; min-width: 0; }
}
@media (min-width: 782px) {
	.woocommerce-content .abello-shop .wc-block-product-filters {
		position: sticky;
		top: calc(var(--ab-header-h-compact) + var(--ab-space-5));
		max-height: calc(var(--ab-vh) - var(--ab-header-h-compact) - var(--ab-space-7));
		overflow-y: auto;
		padding-right: var(--ab-space-2);
		scrollbar-width: thin;
	}
}

/* ================================================================ Filtri */
.wc-block-product-filters { color: var(--ab-color-text); font-size: var(--ab-text-ui); }
.wc-block-product-filters .wc-block-product-filters__overlay-content { gap: 0; }

.wc-block-product-filters h2 {
	font-size: var(--ab-text-xl) !important;
	margin: 0 0 var(--ab-space-4) !important;
}
.wc-block-product-filters h3 {
	margin: 0 0 var(--ab-space-3) !important;
	font-size: var(--ab-text-ui) !important;
	text-transform: none;
	letter-spacing: normal;
}
/* filtri attivi: senza filtri il blocco è vuoto e non deve lasciare spazio */
.wc-block-product-filters .wp-block-woocommerce-product-filter-active:not(:has(.wc-block-product-filter-removable-chips__item:not(template *))) { display: none; }
.wc-block-product-filters .wp-block-woocommerce-product-filter-price,
.wc-block-product-filters .wp-block-woocommerce-product-filter-taxonomy,
.wc-block-product-filters .wp-block-woocommerce-product-filter-status,
.wc-block-product-filters .wp-block-woocommerce-product-filter-attribute {
	margin-top: var(--ab-space-5) !important;
	padding-top: var(--ab-space-5);
	border-top: var(--ab-border-hair) solid var(--ab-color-border);
}

/* Caselle */
.wc-block-product-filter-checkbox-list__items { display: grid; gap: var(--ab-space-1); }
.wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: var(--ab-space-3);
	min-height: var(--ab-space-6);
	font-size: var(--ab-text-ui);
	line-height: var(--ab-leading-snug);
	color: var(--ab-color-text);
	cursor: pointer;
}
.wc-block-product-filter-checkbox-list__input-wrapper { flex: none; }
.wc-block-product-filter-checkbox-list__input {
	width: var(--ab-check) !important;
	height: var(--ab-check) !important;
	margin: 0;
	border: var(--ab-border-hair) solid var(--ab-color-border-field) !important;
	border-radius: var(--ab-radius-1) !important;
	background: var(--ab-color-surface) !important;
}
.wc-block-product-filter-checkbox-list__input:checked {
	border-color: var(--ab-color-action) !important;
	background: var(--ab-color-action) !important;
}
.wc-block-product-filter-checkbox-list__mark { color: var(--ab-color-on-action); }
.wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__text { text-decoration: underline; text-underline-offset: var(--ab-underline-offset); }
.wc-block-product-filter-checkbox-list__show-more-button {
	margin-top: var(--ab-space-2);
	padding: var(--ab-space-1) 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: var(--ab-weight-semibold);
	color: var(--ab-color-link);
	text-decoration: underline;
	text-underline-offset: var(--ab-underline-offset);
	cursor: pointer;
}

/* Prezzo */
.wc-block-product-filter-price-slider { color: var(--ab-color-action); accent-color: var(--ab-color-action); }
.wc-block-product-filter-price-slider .range-bar { background: var(--ab-color-border) !important; }
.wc-block-product-filter-price-slider__content input[type="text"] {
	width: var(--ab-field-xs);
	min-height: var(--ab-tap);
	padding: var(--ab-space-2) var(--ab-space-3);
	border: var(--ab-border-hair) solid var(--ab-color-border-field);
	border-radius: var(--ab-radius-1);
	background: var(--ab-color-surface);
	color: var(--ab-color-text);
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);
}

/* Filtri attivi e "Cancella filtri" */
.wc-block-product-filter-removable-chips__item {
	border: 0 !important;
	border-radius: var(--ab-radius-2) !important;
	background: var(--ab-color-stage) !important;
	color: var(--ab-color-text);
	font-size: var(--ab-text-sm);
}
.wc-block-product-filters .wc-block-product-filter-clear-button .wp-block-button__link {
	padding: var(--ab-space-1) 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--ab-color-link) !important;
	font-size: var(--ab-text-ui) !important;
	font-weight: var(--ab-weight-semibold);
	text-decoration: underline !important;
	text-underline-offset: var(--ab-underline-offset);
}

/* ================================================================ Barra sopra la griglia */
.abello-shop .wp-block-woocommerce-product-results-count,
.abello-shop .woocommerce-result-count { margin: 0; font-size: var(--ab-text-ui); color: var(--ab-color-text-muted); }
.abello-shop .wp-block-column:last-child > .wp-block-group > .wp-block-group.alignwide {
	align-items: center;
	gap: var(--ab-space-4);
	margin-bottom: var(--ab-space-6);
	padding-bottom: var(--ab-space-4);
	border-bottom: var(--ab-border-hair) solid var(--ab-color-border);
}
.woocommerce .woocommerce-ordering,
.wp-block-woocommerce-catalog-sorting .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select {
	width: auto;
	max-width: 100%;
	min-height: var(--ab-tap);
	padding: var(--ab-space-2) var(--ab-space-7) var(--ab-space-2) var(--ab-space-3);
	border: var(--ab-border-hair) solid var(--ab-color-border-field) !important;
	border-radius: var(--ab-radius-1);
	background-color: var(--ab-color-surface);
	background-position: right var(--ab-space-3) center;
	color: var(--ab-color-text);
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);   /* 16 px: sotto, iOS ingrandisce la pagina al tocco */
}

/* ================================================================ Paginazione */
.abello-shop .wp-block-query-pagination {
	margin-top: var(--ab-space-8);
	gap: var(--ab-space-2);
	font-size: var(--ab-text-ui);
}
.abello-shop .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: var(--ab-space-2); }
.abello-shop .wp-block-query-pagination .page-numbers,
.abello-shop .wp-block-query-pagination-next,
.abello-shop .wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ab-tap);
	min-height: var(--ab-tap);
	padding: 0 var(--ab-space-3);
	border: var(--ab-border-hair) solid var(--ab-color-border);
	border-radius: var(--ab-radius-1);
	color: var(--ab-color-text);
	text-decoration: none;
}
.abello-shop .wp-block-query-pagination a.page-numbers:hover,
.abello-shop .wp-block-query-pagination-next:hover,
.abello-shop .wp-block-query-pagination-previous:hover { border-color: var(--ab-color-border-strong); }
.abello-shop .wp-block-query-pagination .page-numbers.current { background: var(--ab-color-dark); border-color: var(--ab-color-dark); color: var(--ab-color-on-dark); }
.abello-shop .wp-block-query-pagination .page-numbers.dots { border: 0; min-width: 0; }

/* ================================================================ Mobile: pulsante e pannello dei filtri */
.wc-block-product-filters__open-overlay {
	display: inline-flex;
	align-items: center;
	gap: var(--ab-space-2);
	min-height: var(--ab-tap);
	padding: var(--ab-space-2) var(--ab-space-4);
	border: var(--ab-border-hair) solid var(--ab-color-border-field);
	border-radius: var(--ab-radius-1);
	background: var(--ab-color-surface);
	color: var(--ab-color-text);
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);
	font-weight: var(--ab-weight-semibold);
	cursor: pointer;
}
/* Il pannello aperto deve coprire l'header fisso, che altrimenti nasconde "Chiudi".
   Lo z-index da solo non basta: .wrapper ha l'animazione "fade-load" del genitore (fill-mode forwards),
   che la tiene in un proprio contesto di sovrapposizione sotto l'header. Finché il pannello è aperto
   l'header scende di livello. */
.wc-block-product-filters__overlay { z-index: var(--ab-z-overlay) !important; }
body:has(.wc-block-product-filters.is-overlay-opened) .header { z-index: 0; }
.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog { background: var(--ab-color-bg) !important; color: var(--ab-color-text); }
.wc-block-product-filters__overlay-header { padding: var(--ab-space-4) var(--ab-gutter); border-bottom: var(--ab-border-hair) solid var(--ab-color-border); }
.wc-block-product-filters__close-overlay { min-height: var(--ab-tap); font-family: var(--ab-font-text); font-size: var(--ab-text-ui); color: var(--ab-color-text); }
.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-content { padding: var(--ab-space-5) var(--ab-gutter); }
.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer { padding: var(--ab-space-4) var(--ab-gutter); border-top: var(--ab-border-hair) solid var(--ab-color-border); background: var(--ab-color-bg); box-shadow: none; }
.wc-block-product-filters__apply {
	width: 100%;
	min-height: var(--ab-tap-lg);
	border: 0;
	border-radius: var(--ab-radius-1) !important;
	background: var(--ab-color-action) !important;
	color: var(--ab-color-on-action) !important;
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);
	font-weight: var(--ab-weight-semibold);
}
.wc-block-product-filters__apply:hover { background: var(--ab-color-action-hover) !important; }

@media (max-width: 781.98px) {
	.woocommerce-content .abello-shop { gap: var(--ab-space-4); }
	.abello-shop .wp-block-column:last-child > .wp-block-group > .wp-block-group.alignwide { flex-wrap: wrap; }
}

/* ================================================================ Focus da tastiera nei filtri */
.wc-block-product-filter-checkbox-list__input:focus-visible { outline: var(--ab-focus-ring) solid var(--ab-color-focus) !important; outline-offset: var(--ab-focus-offset); }
.wc-block-product-filter-price-slider input[type="range"]:focus-visible { outline: none !important; }
.wc-block-product-filter-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--ab-focus-ring) var(--ab-color-focus); }
.wc-block-product-filter-price-slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 var(--ab-focus-ring) var(--ab-color-focus); }
.wc-block-product-filter-price-slider:has(input[type="range"]:focus-visible) .wc-block-product-filter-price-slider__range {
	outline: var(--ab-focus-ring) solid var(--ab-color-focus);
	outline-offset: var(--ab-focus-offset);
	border-radius: var(--ab-radius-1);
}

/* ================================================================ Mobile: niente salto al caricamento
   WooCommerce stampa le regole dell'overlay dei filtri in un <style> a fondo pagina: finché non arrivano,
   l'elenco dei filtri resta nel flusso (alto ~1.200 px) e poi sparisce, spostando i prodotti (CLS 0,4).
   Qui, nell'<head>, lo stato chiuso dell'overlay è già quello finale (stessa soglia di WooCommerce: 600 px). */
@media (max-width: 600px) {
	.wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay {
		position: fixed;
		inset: 0;
		pointer-events: none;
		background: transparent;
	}
	.wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay-dialog {
		visibility: hidden;
		transition-property: visibility; transition-delay: var(--ab-duration-slow);   /* scompare dopo lo scorrimento di chiusura */
	}
}