/**
 * Madicks — Shop archive (shop principale + tassonomie product_*).
 *
 * Scope: hero header, toolbar Goya (.shop_bar), sidebar filtri YITH WCAN
 * (#side-filters/.side-panel), grid prodotti contenitore, paginazione.
 *
 * NON in scope (gestiti altrove):
 *  - Card prodotto: madicks-loop.css (già fixata)
 *  - Pagina prodotto singola: madicks-product.css
 *  - Header / top-bar / nav del sito (prompt separato)
 *
 * Variabili --m-* riusate da :root di madicks-product.css. Le ridichiariamo a
 * livello body.madicks-shop-archive solo per documentare lo scope locale: se
 * madicks-product.css non è caricato (caso shop archive non-prodotto-singolo)
 * le variabili non esisterebbero. È un override safe (stessi valori).
 *
 * Ordine selettori (basso → alto specificity per facilità di lettura):
 *   1. variabili
 *   2. hero
 *   3. toolbar Goya .shop_bar
 *   4. sidebar #side-filters
 *   5. grid prodotti (solo container, non la card)
 *   6. mobile / responsive
 */

body.madicks-shop-archive {
	--m-black: #0a0a0a;
	--m-teal: #00bcd4;
	--m-teal-dark: #0099b0;
	--m-gray-light: #f5f5f5;
	--m-gray-mid: #e0e0e0;
	--m-gray-text: #6e6e6e;
	--m-red-badge: #cb0001;
	--m-radius-card: 14px;
	--m-radius-pill: 25px;
	--m-shadow-card: 0 6px 32px -4px rgba(0,0,0,0.13);
	--m-shadow-hover: 0 10px 40px -4px rgba(0,0,0,0.22);
	--m-transition: all .22s cubic-bezier(.4,0,.2,1);
	--m-container-max: 1420px;
}

/* =====================================================================
 * 1. HERO HEADER
 *
 * Goya wrapper: .hero-header > .hero-header-container
 * Titolo: h1.et-shop-title (oppure .regular-title in alcune varianti)
 * Breadcrumb: nav.woocommerce-breadcrumb (renderizzato da hook di Goya in
 *   functions.php — woocommerce_archive_description priority 1).
 * ================================================================== */
body.madicks-shop-archive .hero-header {
	background: linear-gradient(135deg, #0a0a0a 0%, #1a2a2a 100%);
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}
body.madicks-shop-archive .hero-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 80% 50%, rgba(0,188,212,.18) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
body.madicks-shop-archive .hero-header-container {
	max-width: var(--m-container-max);
	margin: 0 auto;
	padding: 48px 16px;
	position: relative;
	z-index: 1;
	text-align: left;
	justify-content: flex-start;
}

/* Titolo. Override forzato della regola Goya:
   `.page-padding .hero-header-container .et-shop-title { font-size: 71px; font-weight: 600 !important; }`
   La regola originale ha già `!important`, quindi siamo costretti a usarlo
   anche qui per vincere la cascata (override di un !important esistente). */
body.madicks-shop-archive .hero-header-container .et-shop-title,
body.madicks-shop-archive .hero-header-container h1.regular-title,
body.madicks-shop-archive .hero-header-container .regular-title {
	font-size: 58px;
	font-weight: 900 !important; /* override style.css L777 (font-weight:600 !important) */
	color: #fff;
	line-height: 1.05;
	letter-spacing: -.04em;
	margin: 12px 0px;
	text-align: left;
}
body.madicks-shop-archive .hero-header-container .m-shop-title-accent {
	color: var(--m-teal);
	font-weight: inherit;
}

/* Breadcrumb dentro hero. */
body.madicks-shop-archive .hero-header-container .woocommerce-breadcrumb {
	color: rgba(255,255,255,.5);
	font-size: 13px;
	margin: 0 0 10px;
	letter-spacing: 0;
	text-transform: none;
	order: 1;
}
body.madicks-shop-archive .hero-header-container .woocommerce-breadcrumb a {
	color: rgba(255,255,255,.6);
	text-decoration: none;
	transition: var(--m-transition);
}
body.madicks-shop-archive .hero-header-container .woocommerce-breadcrumb a:hover {
	color: var(--m-teal);
}

/* Layout: breadcrumb (order:1) sopra titolo (order:2). */
body.madicks-shop-archive .woocommerce-products-header,
body.madicks-shop-archive .hero-header-container .row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
body.madicks-shop-archive .hero-header-container .et-shop-title {
	order: 2;
}

/* =====================================================================
 * 2. TOOLBAR — .shop_bar
 *
 * Markup Goya:
 *   .shop_bar > .row >
 *     .col-md-6.category_bar > nav.woocommerce-breadcrumb (DOPPIONE → hide)
 *     .col-md-6 > .filter-trigger-box / .shop-filters / .shop-views /
 *                 form.woocommerce-ordering
 *
 * Custom Madicks già esistente in functions.php:
 *   show_hide_filters_after_archive_description() emette un wrapper
 *   `.shop-filters` con bottone Filtri/Nascondi + sidebar inline + count +
 *   ordering. Lo restiliamo come "toolbar pill" senza alterarne il markup.
 * ================================================================== */
body.madicks-shop-archive .shop_bar {
	background: #fff;
	border-bottom: 1px solid var(--m-gray-mid);
	padding: 0 2.5%;
	margin: 0;
}
body.madicks-shop-archive .shop_bar > .row {
	max-width: var(--m-container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	flex-wrap: wrap;
}

/* Breadcrumb in toolbar — sempre nascosto.
 *
 * Il breadcrumb canonico è dentro l'hero (.hero-header > .woocommerce-breadcrumb),
 * renderizzato sempre dal template Goya loop/header.php su tutte le archive WC.
 * Il container .col-md-6.category_bar resta visibile per ospitare il count
 * nativo <p class="woocommerce-result-count">, mentre il <nav> interno è hidden.
 * Soluzione chirurgica: NON nascondere il container, solo il <nav>. */
body.madicks-shop-archive .shop_bar .col-md-6.category_bar {
	display: block;
}
body.madicks-shop-archive .shop_bar .col-md-6.category_bar > .woocommerce-breadcrumb {
	display: none !important; /* override style.css L819-820 + override eventuale Goya parent rule */
}

/* Layout colonne toolbar.
 * sx (.category_bar): solo count nativo, larghezza auto-fit.
 * dx (col-md-6:last-child): ordering, prende lo spazio rimanente. */
/* Layout colonne toolbar — Step 5.1 fix definitivo single-row.
 *
 * Bug pre-fix: senza display:flex e flex-wrap:nowrap espliciti sul .row,
 * Bootstrap .col-md-6 (flex: 0 0 50%; max-width: 50%) può forzare i due
 * col al 50% rispettivamente, e se il contenuto interno (counter dinamico
 * "514 Prodotti" + sort dropdown) supera lo spazio disponibile per qualunque
 * motivo (gap, padding, font-rendering), il flex container va a wrap → i
 * 2 col vanno uno sotto l'altro.
 *
 * Fix: display:flex + flex-wrap:nowrap + justify-content:space-between
 * sul .row + flex auto-width sui col (override Bootstrap !important).
 * Mobile (≤767) ripristina wrap per leggibilità (counter sopra, sort sotto). */
body.madicks-shop-archive .shop_bar > .row {
	display: flex !important;             /* override eventuale display block Bootstrap/Goya */
	flex-wrap: nowrap !important;         /* CRITICO: forza single-row, no wrap */
	align-items: center !important;
	justify-content: space-between !important; /* counter sx, sort dx ai lati estremi */
	gap: 16px;
	margin: 0;
	width: 100%;
}
body.madicks-shop-archive .shop_bar > .row > .col-md-6.category_bar {
	flex: 0 1 auto !important;            /* override Bootstrap flex: 0 0 50% */
	max-width: none !important;           /* override Bootstrap max-width: 50% */
	width: auto !important;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}
body.madicks-shop-archive .shop_bar > .row > .col-md-6:last-child {
	flex: 0 1 auto !important;            /* override Bootstrap flex: 0 0 50% */
	max-width: none !important;           /* override Bootstrap max-width: 50% */
	width: auto !important;
	padding-left: 0;
	padding-right: 0;
	text-align: right;
	margin-left: auto;                    /* spinge il col al lato destro (ridondante con space-between, defensive) */
}

/* Mobile (≤767): wrap verticale per leggibilità */
@media (max-width: 767px) {
	body.madicks-shop-archive .shop_bar > .row {
		flex-wrap: wrap !important;       /* override desktop nowrap */
		gap: 8px;
	}
	body.madicks-shop-archive .shop_bar > .row > .col-md-6.category_bar,
	body.madicks-shop-archive .shop_bar > .row > .col-md-6:last-child {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		text-align: left;
		margin-left: 0;
	}
}

/* Display switcher grid/list/small: non in design → sempre nascosto.
 * !important difensivo: Goya potrebbe forzare display:flex sul wrapper. */
body.madicks-shop-archive .shop_bar .shop-views,
body.madicks-shop-archive .shop_bar .shop-views * {
	display: none !important;
}

/* Bottone trigger filtri (#et-shop-filters): visibile SOLO in mobile/tablet.
 * In desktop la sidebar è persistente, il trigger è ridondante.
 *
 * Refactoring Step 5: media query mutuamente esclusive eliminano gli
 * !important della versione precedente (default hide vs mobile show che
 * si combattevano). Ora il browser sceglie esattamente UNA delle due. */
@media (min-width: 992px) {
	body.madicks-shop-archive .shop_bar .filter-trigger-box,
	body.madicks-shop-archive .shop_bar #et-shop-filters {
		display: none;
	}
}

/* Counter custom dinamico Madicks (.total-products-count) — Step 5.
 * Rendered da show_filtered_products_count (functions.php:370) con
 * woocommerce_before_shop_loop priority 10. JS lo sposta dentro
 * .shop_bar .category_bar (vedi madicks-shop.js relocateCounterToToolbar).
 *
 * Default: nascosto (anti-flicker prima dello spostamento JS).
 * Dopo move: visibile inside toolbar via classe .madicks-counter-in-toolbar
 * applicata dal JS post-spostamento.
 *
 * Counter nativo WC .woocommerce-result-count: rimosso via PHP in
 * inc/madicks/shop-archive.php (madicks_remove_native_result_count su
 * remove_action woocommerce_before_shop_loop priority 20). Step 5.1
 * cleanup: niente più hide CSS necessario, l'elemento non esiste nel DOM. */
body.madicks-shop-archive .total-products-count:not(.madicks-counter-in-toolbar) {
	display: none;
}

/* Counter custom in toolbar (post-spostamento JS) — visibile e stilizzato. */
body.madicks-shop-archive .shop_bar .madicks-counter-in-toolbar,
body.madicks-shop-archive .shop_bar .col-md-6.category_bar .total-products-count {
	display: block;
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--m-black);
	line-height: 1.4;
	white-space: nowrap;
}

/* Custom wrapper di functions.php (.shop-filters): lo trasformiamo in
   flexbox toolbar. Già flex in style.css ma lo "ripuliamo" qui. */
body.madicks-shop-archive .shop_bar .shop-filters {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0;
}

/* Bottone "Filtri" (custom Madicks #filterButton + #hideFilterButton). */
body.madicks-shop-archive .shop_bar .shop-filters-btn {
	order: 1;
}
body.madicks-shop-archive .shop_bar .filters-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent !important; /* override style.css L734 (.filters-btn background:transparent !important già esistente) */
	border: 1.5px solid var(--m-black) !important; /* override style.css L733 (.filters-btn border:none !important) */
	border-radius: var(--m-radius-pill);
	padding: 8px 18px !important; /* override style.css L700 (.filters-btn padding:0 !important) */
	font-size: 13px !important; /* override style.css L729 (font-size:15px) */
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--m-black) !important;
	cursor: pointer;
	transition: var(--m-transition);
	line-height: 1;
}
body.madicks-shop-archive .shop_bar .filters-btn:hover {
	background: var(--m-black) !important; /* override style.css L734 */
	color: #fff !important;
}
body.madicks-shop-archive .shop_bar .filters-btn-icon {
	width: 14px;
	height: 14px;
	margin-right: 0;
	filter: none;
}

/* (regola dead rimossa: .total-products-count è renderizzato FUORI da
   .shop_bar e ora nascosto via Fix 1.2.D — vedi sezione Result count) */

/* Form ordering → pill. */
body.madicks-shop-archive .shop_bar .woocommerce-ordering {
	order: 3;
	margin: 0;
}
body.madicks-shop-archive .shop_bar .orderby {
	border: 1.5px solid var(--m-gray-mid) !important; /* override style.css L1244 (border:0) */
	border-radius: var(--m-radius-pill);
	padding: 8px 36px 8px 16px !important; /* override style.css L1245-1247 */
	font-size: 13px !important;
	font-weight: 500 !important;
	background: #fff;
	cursor: pointer;
	outline: none;
	transition: var(--m-transition);
	text-transform: uppercase;
	max-width: none;
	color: var(--m-black);
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--m-black) 50%), linear-gradient(135deg, var(--m-black) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
body.madicks-shop-archive .shop_bar .orderby:focus {
	border-color: var(--m-teal) !important;
}

/* =====================================================================
 * CHIP FILTRI ATTIVI + RESET — riga sotto la toolbar
 *
 * Markup YITH WCAN preset enhanced:
 *   .yith-wcan-active-filters
 *     > h4 "Filtri attivi"               (nascosto)
 *     > .active-filter
 *         > b "Prodotto Misura:"         (visibile come label discreto)
 *         > a.active-filter-label "20 x 1.75"
 *           ::after = icona ✕ (cliccabile, rimuove il filtro via AJAX)
 *   .yith-wcan-reset-filters             (sibling, button)
 *
 * Strategia A: solo CSS, no PHP riposizionamento.
 *
 * Testo "Resetta filtri" → "Cancella tutti": override via filter gettext PHP
 * in inc/madicks/shop-archive.php (madicks_yith_reset_filters_label).
 * ================================================================== */

/* Wrapper chip row */
body.madicks-shop-archive .yith-wcan-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: var(--m-container-max);
	margin: 0 auto !important; /* override style.css L1266 (margin:0 !important) */
	padding: 12px 2.5% 8px !important; /* override style.css L1264-1265 + L1376 (margin-top:46px) */
	background: transparent;
	border: 0;
}

/* Intestazione "Filtri attivi" sopra le chip (Step 5).
 * Re-attiva il <h4> YITH che era nascosto in Step 3 + override regola
 * legacy in style.css L1379-1381 (anch'essa hidden).
 *
 * Il container .yith-wcan-active-filters ha già flex-wrap (vedi sotto):
 * basta dare al <h4> flex-basis 100% per forzarlo su riga propria sopra
 * le chip che restano in row. */
body.madicks-shop-archive .yith-wcan-active-filters > h4 {
	display: block !important; /* override style.css L1379 (display:none) */
	flex: 1 1 100%;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--m-gray-text);
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.4;
}

/* Singola chip pill */
body.madicks-shop-archive .yith-wcan-active-filters .active-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--m-gray-light);
	border: 1px solid var(--m-gray-mid);
	border-radius: var(--m-radius-pill);
	padding: 6px 14px 6px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--m-black);
	line-height: 1.4;
	transition: var(--m-transition);
	margin: 0;
	cursor: pointer;
}
body.madicks-shop-archive .yith-wcan-active-filters .active-filter:hover {
	background: #fff;
	border-color: var(--m-black);
}

/* Prefisso <b> "Prodotto Misura:" — re-show come label discreto.
 * style.css L1383 lo nasconde con display:none → override forzato. */
body.madicks-shop-archive .yith-wcan-active-filters .active-filter > b {
	display: inline-flex !important; /* override style.css L1383 (display:none) */
	font-weight: 400;
	color: var(--m-gray-text);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0;
}

/* Link valore (è il <a> cliccabile per rimuovere il filtro via AJAX YITH).
 * style.css L1387-1402 lo stila come pill grosso (padding 14px 38px) → reset. */
body.madicks-shop-archive .yith-wcan-active-filters .active-filter .active-filter-label {
	background: transparent !important; /* override style.css L1388 */
	border: 0 !important; /* override style.css L1390 */
	border-radius: 0 !important;
	padding: 0 !important; /* override style.css L1394 (14px 38px 14px 16px) */
	font-size: 12px !important; /* override style.css L1391 (15px) */
	font-weight: 500;
	color: var(--m-black);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}

/* Icona ✕ via SVG mask, currentColor.
 * Override dell'approccio style.css (background-image: icon-x.svg)
 * per coerenza tema (color-aware via mask + transition). */
body.madicks-shop-archive .yith-wcan-active-filters .active-filter .active-filter-label::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: currentColor !important; /* override style.css L1401 (transparent) */
	background-image: none !important; /* override style.css L1324 (icon-x.svg) */
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/contain no-repeat;
	color: var(--m-gray-text);
	transition: color .2s ease;
	position: static !important; /* override style.css L1398-1399 (right:10px; top:18px) */
	margin-left: 4px;
	right: auto;
	top: auto;
}
body.madicks-shop-archive .yith-wcan-active-filters .active-filter:hover .active-filter-label::after {
	color: var(--m-black);
}

/* Bottone YITH "Resetta filtri" — anti-flicker.
 *
 * Strategia Step 3.3: il bottone è SPOSTATO via JS (madicks-shop.js
 * moveResetButtonToSidebar) dalla posizione default (lato grid prodotti,
 * sibling di .yith-wcan-active-filters) dentro la sidebar (ul.shop-sidebar).
 * Re-applicato dopo ogni AJAX YITH.
 *
 * Per evitare flicker visibile durante il primo paint (~50ms tra render
 * e move JS), nascondiamo il bottone finché non viene spostato. Il JS
 * aggiunge la classe .madicks-reset-in-sidebar che fa da "marker" per
 * sbloccare il display via :not() qui sotto. */
body.madicks-shop-archive .shop-products-col > .yith-wcan-reset-filters:not(.madicks-reset-in-sidebar) {
	display: none !important; /* override style.css L1359 e mobile L3248 */
}

/* Mobile: chip-row padding ridotto */
@media (max-width: 767px) {
	body.madicks-shop-archive .yith-wcan-active-filters {
		padding: 10px 16px 6px !important;
		gap: 6px;
	}
}

/* =====================================================================
 * FILTRO PREZZO (price slider YITH) — label "Da"/"A" + currency visibili
 *
 * Markup YITH preset enhanced (data-filter-type="price_slider"):
 *   .yith-wcan-filter.filter-price-slider
 *     > .filter-content
 *       > .price-slider.fields[data-min][data-max][data-step]
 *         > label[for=*_min] "Da"          (Step 3.4: VISIBILE)
 *         > input.price-slider-min[type=number]
 *         > label[for=*_max] "A"           (Step 3.4: VISIBILE)
 *         > input.price-slider-max[type=number]
 *         > span.currency "€"              (Step 3.4: VISIBILE)
 *         > [eventuale slider UI grafico generato runtime]
 *
 * Design Step 3.4 (decisione Giuseppe):
 *  Layout flex con order esplicito:
 *   - Riga 1: label-Da | label-A (sopra)
 *   - Riga 2: input-min | input-max (sotto)
 *   - Riga 3: € allineato a destra
 * ================================================================== */

/* Hide eventuale slider UI grafico (track + handle generati da YITH JS).
 * Mantenuto: il design Madicks usa solo input number + label. */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > .ui-slider,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > .slider-track,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > .ui-slider-range {
	display: none;
}

/* Container price-slider: flex wrap. Order su ogni figlio per disporre
 * label sopra, input sotto, currency in fondo. */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	align-items: center;
	flex-direction: row;
}

/* Label "Da" / "A": ripristina visibilità (override visually-hidden Step 3.2).
 * Tipografia label uppercase discreta. */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > label {
	/* Reset visually-hidden technique applicata in Step 3.2 */
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border: 0;

	/* Layout: 50% width per stare 2 label sulla stessa riga */
	flex: 1 1 calc(35% - 5px);
	min-width: 0;

	/* Tipografia label */
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--m-gray-text);
	line-height: 1.4;
}

/* Order esplicito per disposizione corretta:
 * label-Da (1) | label-A (2) | input-min (3) | input-max (4) | currency (5) */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > label[for*="_min"] {
	order: 1;
}
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > label[for*="_max"] {
	order: 3;
}
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-min {
	order: 3;
}
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-max {
	order: 4;
}
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > .currency {
	order: 5;
}

/* Input min/max: 50% width, design Madicks */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-min,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-max {
	flex: 1 1 calc(100% - 5px);
	min-width: 0;
	width: auto;
	border: 1.5px solid var(--m-gray-mid);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--m-black);
	background: #fff;
	outline: none;
	transition: var(--m-transition);
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Rimuovi spinner native (più pulito, design Madicks). */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-min::-webkit-outer-spin-button,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-min::-webkit-inner-spin-button,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-max::-webkit-outer-spin-button,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-max::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-min:focus,
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider-max:focus {
	border-color: var(--m-teal);
}

/* Currency €: visibile in basso, allineato a destra. */
body.madicks-shop-archive .yith-wcan-filter.filter-price-slider .price-slider.fields > .currency {
	display: block;
	flex: 1 1 100%;
	text-align: right;
	font-size: 12px;
	font-weight: 500;
	color: var(--m-gray-text);
	margin-top: 2px;
	padding: 0;
}

/* =====================================================================
 * FILTRO DISPONIBILI (.filter-stock-sale) — re-show
 *
 * style.css L1404-1406 del child aveva `display:none !important` (legacy
 * design senza filtro stock visibile). La regola è stata commentata in
 * questo branch — vedi nota tracciante in style.css.
 *
 * Difensivo: forziamo display:block per coprire eventuali altre regole
 * hide non identificate (parent Goya, plugin override). Le altre proprietà
 * di styling sono ereditate dalle regole comuni a .yith-wcan-filter.
 * ================================================================== */
body.madicks-shop-archive .yith-wcan-filter.filter-stock-sale {
	display: block;
}

/* =====================================================================
 * BOTTONE RESET FILTRI YITH (riposizionato in sidebar via JS) — Step 3.5
 *
 * Markup live: il bottone YITH ha 5 classi:
 *   .btn .btn-primary .yith-wcan-reset-filters .reset-filters .enhanced
 *
 * Bootstrap .btn / .btn-primary applica con !important: background-color,
 * color, border, padding, font-size, box-shadow, font-weight. Lo stile
 * YITH "enhanced" e style.css legacy aggiungono ulteriori !important.
 *
 * Strategia (Step 3.5 — fix definitivo):
 *  - Selettori multipli strutturali per battere specificity Bootstrap
 *  - !important strategici su OGNI proprietà che Bootstrap forza
 *  - Override esplicito di .btn-primary background/color/border
 *  - La classe .madicks-reset-in-sidebar è opzionale (aggiunta dal JS):
 *    NON ne dipendiamo — usiamo selettori strutturali (in .shop-sidebar-col)
 *
 * Anti-flicker: l'hide del bottone in .shop-products-col è sopra (riga ~425).
 *
 * Ogni !important ha commento inline con riferimento all'origine vinta.
 * ================================================================== */
body.madicks-shop-archive .shop-sidebar-col .yith-wcan-reset-filters,
body.madicks-shop-archive ul.shop-sidebar > .yith-wcan-reset-filters,
body.madicks-shop-archive ul.shop-sidebar > button.yith-wcan-reset-filters,
body.madicks-shop-archive .madicks-reset-in-sidebar {
	/* Reset stili Bootstrap.btn/.btn-primary + YITH default */
	-webkit-appearance: none !important; /* override Bootstrap .btn appearance */
	appearance: none !important;
	background: transparent !important; /* override Bootstrap .btn-primary background-color */
	background-color: transparent !important;
	background-image: none !important; /* override Bootstrap .btn gradient potenziale */
	color: var(--m-black) !important; /* override Bootstrap .btn-primary color: #fff */
	box-shadow: none !important; /* override Bootstrap .btn box-shadow */
	text-shadow: none !important;
	border: 1px solid var(--m-black) !important; /* override Bootstrap .btn-primary border-color */
	border-radius: var(--m-radius-pill) !important; /* override Bootstrap .btn border-radius */

	/* Layout */
	display: block !important; /* override Bootstrap .btn inline-block */
	width: 100% !important;
	margin: 16px 0 0 !important; /* override style.css legacy (commentato L1367 margin-top:65px) */
	padding: 10px 18px !important; /* override Bootstrap .btn padding + style.css legacy L1360-1361 (13px) */

	/* Tipografia raffinata (sentence case, peso medio) — KEY FIX */
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important; /* override Bootstrap .btn font-size: 1rem */
	font-weight: 500 !important; /* override Bootstrap .btn font-weight: 400 / YITH enhanced */
	text-transform: none !important; /* override style.css legacy (commentato L1365 uppercase) */
	letter-spacing: .02em !important;
	text-align: center !important;
	line-height: 1.4 !important;

	/* Interazione */
	cursor: pointer !important;
	transition: var(--m-transition);
	text-decoration: none !important;
}

/* Hover: invertito (background nero, testo bianco) */
body.madicks-shop-archive .shop-sidebar-col .yith-wcan-reset-filters:hover,
body.madicks-shop-archive ul.shop-sidebar > .yith-wcan-reset-filters:hover,
body.madicks-shop-archive ul.shop-sidebar > button.yith-wcan-reset-filters:hover,
body.madicks-shop-archive .madicks-reset-in-sidebar:hover {
	background: var(--m-black) !important; /* override Bootstrap .btn-primary:hover */
	background-color: var(--m-black) !important;
	color: #fff !important; /* override style.css legacy mobile (commentato L3263 #000) */
	border-color: var(--m-black) !important; /* override style.css legacy mobile (commentato L3265) */
	box-shadow: none !important;
}

/* Focus accessibile (teal outline) */
body.madicks-shop-archive .shop-sidebar-col .yith-wcan-reset-filters:focus-visible,
body.madicks-shop-archive ul.shop-sidebar > .yith-wcan-reset-filters:focus-visible,
body.madicks-shop-archive .madicks-reset-in-sidebar:focus-visible {
	outline: 2px solid var(--m-teal) !important;
	outline-offset: 2px !important;
	box-shadow: none !important; /* override Bootstrap .btn:focus box-shadow */
}

/* Active: feedback tattile */
body.madicks-shop-archive .shop-sidebar-col .yith-wcan-reset-filters:active,
body.madicks-shop-archive ul.shop-sidebar > .yith-wcan-reset-filters:active,
body.madicks-shop-archive .madicks-reset-in-sidebar:active {
	transform: scale(0.98);
	background: var(--m-black) !important;
	color: #fff !important;
}

/* Mobile popup: padding orizzontale */
@media (max-width: 991px) {
	body.madicks-shop-archive .shop-sidebar-col .yith-wcan-reset-filters,
	body.madicks-shop-archive ul.shop-sidebar > .yith-wcan-reset-filters,
	body.madicks-shop-archive .madicks-reset-in-sidebar {
		margin: 16px 20px 24px !important;
		width: calc(100% - 40px) !important;
	}
}

/* =====================================================================
 * 3. SIDEBAR — #side-filters.side-panel (modalità Sidebar Left)
 *
 * Quando Customizer ha "Shop Filters Position = Sidebar" e
 * "Sidebar Position = Left", Goya emette:
 *   .shop-container.shop-sidebar-sidebar.shop-sidebar-position-left
 *     > #shop-products > .row
 *       > .shop-sidebar-col.col.shop-widget-scroll
 *         > #side-filters.side-panel.et-fixed
 *           > header (titolo "Filtri" + bottone "Fatto")
 *           > .side-panel-content > ul.shop-sidebar > [widget YITH WCAN]
 *       > .shop-products-col.col
 *
 * Su desktop trasformiamo il side-panel da popup in colonna inline.
 * Su mobile (≤991) ripristina il comportamento popup nativo Goya.
 * ================================================================== */

/* Wrapper colonna sidebar.
 *
 * padding-top — Step 5.2: respiro visivo tra fondo hero scuro e inizio
 * sidebar/grid prodotti. Padding (non margin) per evitare margin collapse
 * con elementi vicini. Mobile ridotto per non sprecare viewport. */
body.madicks-shop-archive .shop-container.shop-sidebar-sidebar {
	max-width: var(--m-container-max);
	margin: 0 auto;
	padding-top: 40px;
}
@media (max-width: 767px) {
	body.madicks-shop-archive .shop-container.shop-sidebar-sidebar {
		padding-top: 0px;
	}
}

/* Desktop only (≥992): side-panel inline, NO popup. */
@media (min-width: 992px) {
	/* Lo sticky-kit JS di Goya (assets/js/vendor/sticky-kit.min.js del parent)
	 * gestisce dinamicamente la position durante scroll: legge .et-fixed sul
	 * container, chiama stick_in_parent() e modifica live position
	 * (relative ↔ absolute con top calcolato).
	 *
	 * NON forziamo position:static !important: bloccherebbe sticky-kit dal
	 * cambiare la position runtime → la sidebar non scorrerebbe sticky.
	 * Usiamo position:relative come baseline (compatibile con sticky-kit).
	 *
	 * transform:none resta forzato per neutralizzare il translateX di Goya
	 * popup-mode (Goya emette transform inline quando il side-panel è chiuso). */
	body.madicks-shop-archive #side-filters.side-panel {
		position: relative; /* baseline, sticky-kit lo modifica runtime durante scroll */
		transform: none !important; /* override Goya popup-mode translateX */
		box-shadow: none;
		background: transparent;
		width: auto;
		max-width: none;
		height: auto;
		padding: 0;
		visibility: visible;
		opacity: 1;
	}
	body.madicks-shop-archive #side-filters.side-panel > header {
		display: none; /* "Filtri / Fatto" non serve in desktop */
	}
	body.madicks-shop-archive #side-filters .side-panel-content {
		padding: 0 !important; /* override Goya/style.css default 20px */
		overflow: visible;
		height: auto;
		max-height: none;
	}
	body.madicks-shop-archive .shop-sidebar.row {
		display: block;
		margin: 0;
	}
	/* Hide del trigger ora gestito globalmente fuori da @media (vedi Fix 1.2.B
	   in toolbar section): hide di default + show solo in mobile @media. */
}

/* Card filtro (ogni .yith-wcan-filter è una sezione). */
body.madicks-shop-archive .yith-wcan-filters {
	padding: 0 !important; /* override Goya default padding 20px 35px */
	margin: 0;
	background: transparent;
	box-shadow: none;
}
body.madicks-shop-archive .yith-wcan-filters .yith-wcan-filter {
	background: #fff;
	border: 0;
	border-radius: var(--m-radius-card);
	box-shadow: var(--m-shadow-card);
	margin-bottom: 16px !important; /* override style.css L1280 (margin-bottom:0) */
	padding: 0 !important; /* override style.css L1281-1283 (padding-top/bottom:16px) */
	overflow: hidden;
}

/* Titolo card (h4.filter-title).
 *
 * IMPORTANTE: il chevron è generato e ruotato da YITH WCAN preset enhanced
 * (vedi .filter-title.collapsable.opened/closed). NON aggiungiamo un nostro
 * pseudo-elemento perché si sovrapporrebbe a quello nativo (bug doppia
 * freccia riportato in review).
 *
 * Se in futuro serve un fine-tuning del chevron YITH (es. dimensione/colore),
 * targettare il pseudo-elemento esatto identificato via DevTools (varia tra
 * versioni del plugin) e aggiungere qui un piccolo override.
 */
body.madicks-shop-archive .yith-wcan-filters .filter-title,
body.madicks-shop-archive .yith-wcan-filters h4.filter-title {
	font-size: 12px !important; /* override style.css L1287 (15px) */
	font-weight: 700 !important; /* override style.css L1289 (500 !important) */
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 16px 20px;
	border-bottom: 1px solid var(--m-gray-mid);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	margin: 0;
	color: var(--m-black);
	line-height: 1.2;
	position: relative;
}

/* Allineamento chevron filter-title — Step 5.2.
 * YITH WCAN preset enhanced renderizza il chevron come pseudo-element con
 * font-icon e position:absolute; right:0 — risultato visivo: attaccato al
 * bordo destro della card, asimmetrico rispetto al padding-left:20px del
 * titolo. Fix: sposta a right:20px per allineamento simmetrico.
 *
 * Selezione difensiva di entrambi ::before e ::after (la versione esatta
 * varia tra release YITH). Se YITH non usa absolute (es. inline flex child),
 * la proprietà right è inerte → nessuna regressione. */
body.madicks-shop-archive .yith-wcan-filters .filter-title.collapsable::before,
body.madicks-shop-archive .yith-wcan-filters .filter-title.collapsable::after {
	right: 20px;
}

/* Contenuto card. */
body.madicks-shop-archive .yith-wcan-filters .filter-content {
	padding: 12px 20px 16px !important;
	margin: 0 !important; /* override style.css L1301-1302 */
	display: block;
}
body.madicks-shop-archive .yith-wcan-filters .filter-content.collapsable.closed {
	display: none;
}

/* Lista filtri checkbox. */
body.madicks-shop-archive .yith-wcan-filters .filter-items.filter-checkbox,
body.madicks-shop-archive .yith-wcan-filters .filter-items {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: none !important; /* override style.css L1295 (max-height 25vh) */
	overflow: visible;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item.checkbox,
body.madicks-shop-archive .yith-wcan-filters .filter-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 0;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f0;
	margin: 0 !important; /* override style.css L1328 */
	cursor: pointer;
	width: 100%;
}
body.madicks-shop-archive .yith-wcan-filters .filter-items > .filter-item:last-child {
	border-bottom: 0;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 13px !important; /* override style.css L1337 (15px) */
	font-weight: 400;
	color: var(--m-black);
	margin: 0;
	flex: 1;
	line-height: 1.4;
}
body.madicks-shop-archive .yith-wcan-filters .filter-checkbox .filter-item label input[type="checkbox"],
body.madicks-shop-archive .yith-wcan-filters .filter-item.checkbox label input[type="checkbox"] {
	display: inline-block !important; /* override style.css L1372 (display:none su tutti i .filter-item label input) */
	width: 15px;
	height: 15px;
	accent-color: var(--m-black);
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
	opacity: 1;
	position: static;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item .term-count,
body.madicks-shop-archive .yith-wcan-filters .filter-item .filter-count {
	font-size: 11px;
	color: var(--m-gray-text);
	background: var(--m-gray-light);
	padding: 2px 7px;
	border-radius: 20px;
	flex-shrink: 0;
	margin-left: 8px;
}

/* Hover/active. */
body.madicks-shop-archive .yith-wcan-filters .filter-item:hover label,
body.madicks-shop-archive .yith-wcan-filters .filter-item.active > label {
	color: var(--m-teal-dark);
}

/* Sub-livelli gerarchici (.level-1, .level-2, ...).
 *
 * Bug fix Step 2: il <li class="filter-item hierarchy-collapsable"> contiene
 * 3 figli DOM (label, <ul.filter-items.level-1>, <span.toggle-handle>). La
 * regola .filter-item { display: flex; align-items: center } applica un
 * layout orizzontale a tutto, e il <ul> annidato finisce affiancato al label
 * (visivamente: "card fluttuante a fianco" invece di blocco indented sotto).
 *
 * Soluzione: flex-wrap sul .filter-item gerarchico + flex-basis:100% sul
 * <ul> annidato per forzare wrap a riga nuova. order:2 per metterlo dopo
 * label (order 0) e toggle-handle (order 1).
 */
body.madicks-shop-archive .yith-wcan-filters .filter-item.hierarchy-collapsable {
	flex-wrap: wrap;
	row-gap: 4px;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item.hierarchy-collapsable > label {
	order: 0;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item.hierarchy-collapsable > .toggle-handle {
	order: 1;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item.hierarchy-collapsable > .filter-items {
	order: 2;
	flex-basis: 100%;
	width: 100%;
}

/* Sub-ul annidato: indent + border-left, niente styling card. */
body.madicks-shop-archive .yith-wcan-filters .filter-items .filter-items {
	padding-left: 14px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-left: 1px solid #f0f0f0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	/* Anti-modal defensive: se YITH attivasse position:absolute, forza inline. */
	position: static;
	transform: none;
}

/* Toggle-handle (chevron sub-livelli).
 * Lo <span> è vuoto nel markup YITH preset 3605: aggiungiamo l'icona via
 * SVG mask. Non c'è rischio doppia freccia (a differenza del .filter-title)
 * perché YITH non disegna nulla qui di nativo. Ruota su .opened. */
body.madicks-shop-archive .yith-wcan-filters .filter-item.hierarchy-collapsable > .toggle-handle {
	width: 14px;
	height: 14px;
	display: inline-block;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
	color: var(--m-gray-text);
	cursor: pointer;
	transition: transform .2s ease;
	flex-shrink: 0;
	margin-left: 8px;
}
body.madicks-shop-archive .yith-wcan-filters .filter-item.hierarchy-collapsable.opened > .toggle-handle {
	transform: rotate(180deg);
}
/* Quando YITH chiude il sub-livello, .filter-items.level-N ha display:none
 * inline. Lo rispettiamo (no override). */

/* Filtri "label-design" (es. misure 24"/26"/28") già flex via style.css.
   Riallineamo gap e dimensioni per coerenza pill. */
body.madicks-shop-archive .yith-wcan-filters .yith-wcan-filter.label-design .filter-items {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px !important;
	padding: 0;
	max-height: none;
}
body.madicks-shop-archive .yith-wcan-filters .yith-wcan-filter.label-design .filter-item.label {
	width: auto !important;
	border: 0;
	padding: 0;
}
body.madicks-shop-archive .yith-wcan-filters .yith-wcan-filter.label-design .filter-item.label a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 32px;
	padding: 0 10px !important;
	border: 1.5px solid var(--m-gray-mid);
	border-radius: var(--m-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--m-black);
	background: #fff;
	transition: var(--m-transition);
	text-decoration: none;
}
body.madicks-shop-archive .yith-wcan-filters .yith-wcan-filter.label-design .filter-item.label a:hover,
body.madicks-shop-archive .yith-wcan-filters .yith-wcan-filter.label-design .filter-item.active a {
	border-color: var(--m-black);
	background: var(--m-black);
	color: #fff;
}

/* Sticky sidebar (Goya .et-fixed gestisce position:sticky di base). */
@media (min-width: 992px) {
	body.madicks-shop-archive .shop-sidebar-col.et-fixed {
		align-self: flex-start;
	}
}

/* =====================================================================
 * 4. GRID PRODOTTI (container — la card è in madicks-loop.css)
 *
 * In modalità sidebar Goya emette i prodotti in `.shop-products-col` con
 * .products.row. Manteniamo gap coerente col prototipo (20px desktop).
 * ================================================================== */
body.madicks-shop-archive .shop-products-col .products.row,
body.madicks-shop-archive #shop-products .row.products {
	row-gap: 20px;
	column-gap: 0;
}

/* Layout shop principale: forza container max-width 1420 anche nel wrapper
   esterno se il template lo permette. */
body.madicks-shop-archive .shop-products.container,
body.madicks-shop-archive #shop-products.container {
	max-width: var(--m-container-max);
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
 * 5. RESPONSIVE — Mobile / Tablet
 * ================================================================== */

/* Tablet (≤991px): side-panel torna popup laterale.
 *
 * In sidebar mode su mobile, Goya mostra `#et-shop-filters` in toolbar e
 * aggiunge la classe `.fade-in` su `#side-filters` quando l'utente apre il
 * popup (vedi goya-app.js → shopFiltersHeader). Il template archive in
 * sidebar mode renderizza la sidebar in colonna inline anche su mobile, ma
 * il design Madicks la vuole popup → ripristiniamo position:fixed + slide.
 */
@media (max-width: 991px) {
	body.madicks-shop-archive .hero-header-container {
		padding: 24px 16px 28px;
	}
	body.madicks-shop-archive .hero-header-container .et-shop-title,
	body.madicks-shop-archive .hero-header-container h1.regular-title,
	body.madicks-shop-archive .hero-header-container .regular-title {
		font-size: 38px;
		line-height: 1.05;
	}
	body.madicks-shop-archive .hero-header-container .woocommerce-breadcrumb {
		font-size: 11px;
	}

	/* Layout sidebar: in mobile la colonna sidebar è ridotta a contenitore
	   del popup → no width, no margin. */
	body.madicks-shop-archive .shop-container.shop-sidebar-sidebar > #shop-products > .row {
		display: block;
	}
	body.madicks-shop-archive .shop-sidebar-col {
		max-width: none;
		flex: 0 0 100%;
		width: 100%;
		padding: 0;
	}
	body.madicks-shop-archive .shop-products-col {
		max-width: none;
		flex: 0 0 100%;
		width: 100%;
	}

	/* Bottone trigger (visibile in mobile, sidebar diventa popup laterale).
	   Restyle pill come da prototipo. Refactoring Step 5: nessun !important
	   su display perché il desktop @media (min-width:992px) hide è ora
	   mutuamente esclusivo (fuori da questo blocco). */
	body.madicks-shop-archive .shop_bar .filter-trigger-box {
		display: inline-flex;
		align-items: center;
		border: 0 !important; /* override style.css L1270 (.shop_bar .filter-trigger-box border-right:none) */
		padding: 0;
	}
	body.madicks-shop-archive .shop_bar #et-shop-filters {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: transparent;
		border: 1.5px solid var(--m-black);
		border-radius: var(--m-radius-pill);
		padding: 8px 18px;
		font-size: 13px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--m-black);
		text-decoration: none;
		line-height: 1;
		transition: var(--m-transition);
	}
	body.madicks-shop-archive #et-shop-filters:hover {
		background: var(--m-black);
		color: #fff;
	}

	/* Side-panel popup mobile: position fixed + slide da destra.
	   Override delle regole desktop sopra (position:static / transform:none). */
	body.madicks-shop-archive #side-filters.side-panel {
		position: fixed !important; /* override regola desktop sopra */
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 90%;
		max-width: 360px;
		height: 100vh;
		background: #fff;
		z-index: 999;
		transform: translateX(100%) !important; /* override regola desktop transform:none */
		transition: transform .3s ease;
		box-shadow: -4px 0 24px rgba(0,0,0,.15);
		overflow-y: auto;
		padding: 0;
	}
	/* Goya aggiunge .fade-in al click sul trigger (vedi goya-app.js).
	   Se in futuro la classe cambia, basta aggiornare qui. */
	body.madicks-shop-archive #side-filters.side-panel.fade-in,
	body.madicks-shop-archive #side-filters.side-panel.opened,
	body.madicks-shop-archive #side-filters.side-panel.is-open {
		transform: translateX(0) !important;
	}

	/* Header del popup mobile (titolo "Filtri" + bottone "Fatto"). */
	body.madicks-shop-archive #side-filters.side-panel > header {
		display: flex !important; /* override regola desktop display:none */
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
		background: #fff;
		border-bottom: 1px solid var(--m-gray-mid);
		position: sticky;
		top: 0;
		z-index: 1;
	}
	body.madicks-shop-archive #side-filters .side-panel-title {
		display: block; /* override style.css L2984 (display:none mobile) */
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--m-black);
	}
	body.madicks-shop-archive #side-filters .et-close.button.btn-sm,
	body.madicks-shop-archive #side-filters .et-close.button {
		background: var(--m-black) !important; /* override style.css L2993 (#fff !important) */
		color: #fff !important; /* override style.css L2989 (#000) */
		border-radius: var(--m-radius-pill);
		padding: 6px 14px !important; /* override style.css L2994 (0px) */
		font-size: 12px !important;
		font-weight: 600 !important;
		text-transform: uppercase;
		border: 0;
	}
	body.madicks-shop-archive #side-filters .side-panel-content {
		padding: 16px 16px 24px !important;
		background: #f7f8fa;
		overflow-y: visible;
		height: auto;
	}
}

/* Mobile (≤575px): hero più compatto. */
@media (max-width: 575px) {
	body.madicks-shop-archive .hero-header-container {
		padding: 20px 16px 22px;
	}
	body.madicks-shop-archive .hero-header-container .et-shop-title,
	body.madicks-shop-archive .hero-header-container h1.regular-title,
	body.madicks-shop-archive .hero-header-container .regular-title {
		font-size: 32px;
	}
	body.madicks-shop-archive .shop_bar > .row {
		gap: 8px;
		padding: 10px 0;
	}
	body.madicks-shop-archive .shop_bar .shop-filters {
		gap: 8px;
	}
	body.madicks-shop-archive .shop_bar .orderby {
		font-size: 12px !important;
		padding: 7px 30px 7px 12px !important;
	}
}

/* =====================================================================
 * 6. MOBILE TOOLBAR REFACTOR (≤768) — sticky toolbar + chip-row
 *   [claude/refactor-shopbar-mobile]
 *
 * Design target (vedi .design/prototypes/shop-mobile.html):
 *   ┌─ hero scuro (scroll normale)
 *   ├─ "27 PRODOTTI" centrato (scroll normale)
 *   ├─ [Filtri] [Ordina ▼]   ← sticky top
 *   ├─ [chip] [chip] [chip]→ ← sticky sotto, scroll orizzontale
 *   └─ grid 2 colonne
 *
 * Strategia:
 *  - Il counter .total-products-count viene posizionato dal JS come
 *    sibling PRIMA di .shop_bar (vedi madicks-shop.js, branch mobile di
 *    relocateCounterToToolbar). Qui lo stiliamo come blocco standalone
 *    centrato e nascondiamo l'eventuale copia residua dentro .shop_bar.
 *  - .shop_bar diventa interamente sticky (toolbar compatta che contiene
 *    solo .col-md-6:last-child > .shop-filters; la .category_bar viene
 *    nascosta perché vuotata in mobile dal counter spostato fuori).
 *  - .yith-wcan-active-filters (sibling di .shop_bar) diventa sticky
 *    subito sotto la toolbar, scrollabile orizzontalmente.
 *  - Classe .is-stuck applicata da madicks-shop.js (IntersectionObserver
 *    su sentinel) per attivare l'ombra quando la toolbar è ancorata.
 *
 * Vincoli rispettati: zero remove_action, zero template override, solo
 * child theme, var --m-* prefissate.
 * ================================================================== */
@media (max-width: 768px) {
	/* Token mobile-specifici. Valori calibrati sul sito Madicks:
	   - shopbar-top 145px = top-bar promo + header logo/cart + search bar
	   - shopbar-h 59px = altezza misurata pill-row Filtri+Ordina */
	body.madicks-shop-archive {
		--m-shopbar-top: 145px;
		--m-shopbar-h: 55px;
	}

	/* Counter standalone, posizionato dal JS come sibling prima di .shop_bar.
	   La classe .madicks-counter-in-toolbar è applicata sempre dal JS come
	   marker "visibile" (la regola hide-by-default della sezione 2 si basa
	   sulla sua assenza). Qui matchiamo TUTTE le occorrenze; il caso "ancora
	   dentro .shop_bar" è gestito dal selettore più sotto con !important
	   (display:none) per avere precedenza in source-order. */
	body.madicks-shop-archive .total-products-count.madicks-counter-in-toolbar {
		display: block;
		text-align: center;
		padding: 14px 16px;
		margin: 0;
		font-family: 'Poppins', sans-serif;
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--m-gray-text);
		background: #fff;
		border-bottom: 1px solid var(--m-gray-mid);
		line-height: 1.4;
		white-space: normal;
	}

	/* Difensivo: se JS non ha ancora spostato (o fallisce) il counter resta
	   dentro .shop_bar, lo nascondiamo lì per non mostrarlo dentro lo sticky. */
	body.madicks-shop-archive .shop_bar .total-products-count {
		display: none !important;
	}

	/* Counter nativo WC: già rimosso via PHP, ma defensive hide. */
	body.madicks-shop-archive .shop_bar .woocommerce-result-count {
		display: none !important;
	}

	/* In mobile la .category_bar resta vuota (counter spostato fuori,
	   breadcrumb già hidden globalmente). Nascondiamo l'intero col per
	   evitare margini/padding fantasma nella riga sticky. */
	body.madicks-shop-archive .shop_bar > .row > .col-md-6.category_bar {
		display: none !important;
	}

	/* shop_bar: sticky compatto (toolbar pill row).
	   z-index 90 sopra i prodotti, top via var per supportare header sticky. */
	body.madicks-shop-archive .shop_bar {
		position: sticky;
		top: var(--m-shopbar-top, 0px);
		z-index: 90;
		padding: 0;
		margin: 0;
		background: #fff;
		border-bottom: 1px solid var(--m-gray-mid);
		transition: box-shadow .2s ease;
	}
	body.madicks-shop-archive .shop_bar.is-stuck {
		box-shadow: 0 2px 10px rgba(0,0,0,0.07);
	}

	/* .row interno: una sola colonna utile (col-md-6:last-child con
	   .shop-filters), nowrap per stare in linea singola compatta.
	   Sovrascrive i blocchi @media 767 (L212-224) e 575 (L1244) sopra. */
	body.madicks-shop-archive .shop_bar > .row {
		flex-wrap: nowrap !important;
		gap: 0 !important;
		padding: 10px 16px !important;
		margin: 0;
	}
	body.madicks-shop-archive .shop_bar > .row > .col-md-6:last-child {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		text-align: left;
		margin-left: 0;
		padding: 0;
	}

	/* shop-filters: pill button a sx, select Ordina a dx */
	body.madicks-shop-archive .shop_bar .shop-filters {
		gap: 12px;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	/* Pill "Filtri" (#et-shop-filters): compatto come prototipo */
	body.madicks-shop-archive .shop_bar .filter-trigger-box {
		flex-shrink: 0;
	}
	body.madicks-shop-archive .shop_bar #et-shop-filters {
		padding: 8px 16px;
		font-size: 12px;
		gap: 6px;
		line-height: 1;
	}
	body.madicks-shop-archive .shop_bar #et-shop-filters .icon-filter,
	body.madicks-shop-archive .shop_bar #et-shop-filters .icon-filter svg {
		width: 14px;
		height: 14px;
		display: inline-flex;
		align-items: center;
	}

	/* Select Ordina pill compatto */
	body.madicks-shop-archive .shop_bar .woocommerce-ordering {
		flex-shrink: 0;
		margin: 0;
	}
	body.madicks-shop-archive .shop_bar .orderby {
		padding: 7px 30px 7px 14px !important;
		font-size: 12px !important;
		font-weight: 500 !important;
	}

	/* Chip row sticky subito sotto la toolbar.
	   top = altezza header (se sticky) + altezza toolbar mobile. */
	body.madicks-shop-archive .yith-wcan-active-filters {
		position: sticky;
		top: calc(var(--m-shopbar-top, 0px) + var(--m-shopbar-h, 52px));
		z-index: 89;
		background: #fff;
		border-bottom: 1px solid var(--m-gray-mid);
		margin: 0 !important;
		padding: 10px 16px !important;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body.madicks-shop-archive .yith-wcan-active-filters::-webkit-scrollbar {
		display: none;
	}

	/* h4 "Filtri attivi": hide su mobile (override desktop L393 display:block) */
	body.madicks-shop-archive .yith-wcan-active-filters > h4 {
		display: none !important;
	}

	/* Chip non si comprimono in scroll orizzontale */
	body.madicks-shop-archive .yith-wcan-active-filters .active-filter {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* =====================================================================
 * 7. MOBILE FILTERS PANEL (≤768) — drawer fullscreen + trigger button
 *   [claude/refactor-shopbar-mobile, Step 2]
 *
 * Sostituisce il pulsante Goya nativo #et-shop-filters (che apre un
 * popup vuoto perché Goya non popola il container in sidebar mode) con
 * un drawer custom Madicks che richiama lo shortcode YITH del preset
 * "draft-preset" (lo stesso usato dal widget sidebar desktop).
 *
 * Markup PHP: inc/madicks/shop-filters-panel.php (renderizzato in
 * wp_footer; il button viene riposizionato dentro .shop_bar
 * .shop-filters dal JS al ready).
 *
 * Visibilità: solo mobile (≤768). Su desktop il button + panel sono
 * nascosti via display:none e il pulsante Goya nativo continua a
 * funzionare come prima.
 * ================================================================== */

/* Default: button trigger nascosto fino a quando JS non lo rivela
   (attributo `hidden` removed). Anti-FOUC: evita flash del button
   "non posizionato" prima dello spostamento JS dentro .shop-filters. */
.m-mobile-filters-trigger[hidden] {
	display: none !important;
}

/* Pannello drawer: SEMPRE nel DOM, visibility:hidden + off-screen
   per evitare reflow al primo apri. Position fixed per indipendenza
   dal layout sticky della toolbar. */
.m-mobile-filters-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #fff;
	z-index: 9999;
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	visibility: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 24px rgba(0,0,0,.15);
}
.m-mobile-filters-panel.is-open {
	transform: translateX(0);
	visibility: visible;
}

.m-mobile-filters-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: #fff;
	border-bottom: 1px solid var(--m-gray-mid);
	position: sticky;
	top: 0;
	z-index: 1;
	flex-shrink: 0;
}
.m-mobile-filters-panel__title {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--m-black, #0a0a0a);
	margin: 0;
	line-height: 1;
}
.m-mobile-filters-panel__close {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--m-black, #0a0a0a);
	transition: color .2s ease;
}
.m-mobile-filters-panel__close:hover,
.m-mobile-filters-panel__close:focus-visible {
	color: var(--m-teal, #00bcd4);
	outline: none;
}
.m-mobile-filters-panel__close:focus-visible {
	outline: 2px solid var(--m-teal, #00bcd4);
	outline-offset: 2px;
	border-radius: 4px;
}

.m-mobile-filters-panel__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
	background: var(--m-gray-light, #f5f5f5);
}

/* Body scroll lock quando il drawer è aperto */
body.m-mobile-filters-open {
	overflow: hidden;
}

@media (max-width: 768px) {
	/* Pulsante Goya nativo: nascosto. Il container .filter-trigger-box
	   resta in DOM ma vuoto (lo nascondiamo per non lasciare gap nel
	   flex layout di .shop-filters). */
	body.madicks-shop-archive #et-shop-filters,
	body.madicks-shop-archive .shop_bar .filter-trigger-box {
		display: none !important;
	}

	/* Pulsante Madicks: pill identica al pattern Step 1 (#et-shop-filters
	   mobile L1146-1166). Mostrato dal JS rimuovendo l'attributo `hidden`
	   dopo averlo spostato dentro .shop-filters. */
	body.madicks-shop-archive .shop_bar .shop-filters .m-mobile-filters-trigger:not([hidden]) {
		display: inline-flex;
	}
	.m-mobile-filters-trigger:not([hidden]) {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: transparent;
		border: 1.5px solid var(--m-black, #0a0a0a);
		border-radius: var(--m-radius-pill, 25px);
		padding: 8px 16px;
		font-family: 'Poppins', sans-serif;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--m-black, #0a0a0a);
		line-height: 1;
		cursor: pointer;
		transition: var(--m-transition, all .2s cubic-bezier(.4,0,.2,1));
		flex-shrink: 0;
	}
	.m-mobile-filters-trigger:hover,
	.m-mobile-filters-trigger:focus-visible {
		background: var(--m-black, #0a0a0a);
		color: #fff;
		outline: none;
	}
	.m-mobile-filters-trigger:focus-visible {
		outline: 2px solid var(--m-teal, #00bcd4);
		outline-offset: 2px;
	}
	.m-mobile-filters-trigger__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 14px;
		height: 14px;
	}
	.m-mobile-filters-trigger__icon svg {
		width: 14px;
		height: 14px;
	}
	.m-mobile-filters-trigger__label {
		display: inline-block;
		line-height: 1;
	}
	/* Counter "(N)" inline. Nascosto se hidden o data-count="0". */
	.m-mobile-filters-trigger__count {
		display: inline-block;
		font-weight: 600;
		line-height: 1;
	}
	.m-mobile-filters-trigger__count[hidden],
	.m-mobile-filters-trigger__count[data-count="0"] {
		display: none;
	}
	.m-mobile-filters-trigger__count::before { content: " ("; }
	.m-mobile-filters-trigger__count::after  { content: ")"; }
}

/* Desktop: trigger e panel completamente fuori dal layout. */
@media (min-width: 769px) {
	.m-mobile-filters-trigger,
	.m-mobile-filters-panel {
		display: none !important;
	}
}