/* ============================================================================
   shop.css — ESTRATTO da style.css il 21 ott 2026 (split per area, misurato: 471 KB in un
   foglio solo, un quarto usato per pagina). CATALOGO /shop/ e archivi: toolbar (conteggio, ordina, toggle vista), chip dei filtri attivi e drawer «Lo Schedario». Caricato su shop, tassonomie prodotto e pagine promo (pillole del Supporto).
   Caricato DOPO dvd-style (dipendenza) solo dove serve: vedi functions.php.
   REGOLA MADRE invariata: solo token di theme.json.
   ========================================================================= */

/* ============================================================================
   TOOLBAR ARCHIVIO — revisione panel (Director+Designer+Optometrista, lug 2026)
   - space-between TENUTO (conteggio sx / controlli dx); il "vuoto" è aria, non bug.
   - Font TUTTI sulla scala φ (x-small 0.8 / small 1rem). Niente rem arbitrari.
   - Altezza controlli UNIFICATA via --tb-ctrl-h (44px desktop, 48px touch/mobile).
   - padding-inline 0 su OGNI viewport (allineamento al gutter di .dvd-archive).
   - Raggi da token (--r-control / --r-pill). Nessun 999px/38px/0.72rem hardcoded.
   ============================================================================ */
.dvd-archive__toolbar {
	--tb-ctrl-h: 44px;                    /* alias di layout: altezza-riga controlli (desktop-mouse) */
	display: flex;
	align-items: center;
	justify-content: space-between;       /* conteggio sx, controlli dx: corretto per una toolbar */
	gap: clamp(1rem, 2vw, 1.5rem);
	padding: clamp(1rem, 2.5vw, 1.5rem) 0; /* inline 0: allineato al gutter di .dvd-archive */
	border-bottom: 2px solid var(--wp--preset--color--base);
	flex-wrap: wrap;                      /* anti-overflow: consenti il wrap */
	min-width: 0;
}
/* touch: tap pieni 48px (tablet/telefoni) — il mouse non li richiede */
@media (hover: none) {
	.dvd-archive__toolbar { --tb-ctrl-h: 48px; }
}

/* CONTEGGIO — contrappeso sinistro allo space-between (dubbio A) */
.dvd-archive__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);   /* 1rem, sulla scala */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	min-width: 0;
}

/* CLUSTER CONTROLLI a destra */
.dvd-archive__controls {
	display: flex;
	align-items: center;
	gap: 13px;   /* s2 Fibonacci: gap unico tra i controlli (era clamp 0.6-1.25 incoerente) */
	flex-wrap: wrap;
	min-width: 0;
}

/* GRUPPO ORDINA */
.dvd-archive__sort { display: flex; align-items: center; gap: 8px; } /* s1: gruppo interno < gap-famiglia s2 */
.dvd-sort__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);  /* 0.8rem, sulla scala */
	letter-spacing: 0.06em;                            /* ridotto da 0.1em: over-45 */
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.dvd-sort__select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);    /* 1rem: testo che si legge/sceglie */
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface-2);
	border: 0;
	border-radius: var(--r-control);
	height: var(--tb-ctrl-h);                          /* riga coerente */
	padding: 0 1.9rem 0 13px;   /* sx = s2 (pareggiato ai bottoni); dx tiene lo spazio-freccia */
	cursor: pointer;
	min-width: 0;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%239a9a9a'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 0.9em;
}
.dvd-sort__dir {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--tb-ctrl-h); height: var(--tb-ctrl-h);  /* quadrato = altezza-riga, non 38px */
	background: var(--wp--preset--color--surface-2);
	border: 0;
	border-radius: var(--r-control);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);     /* icona ~1rem */
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* L'icona base e' arrow-down: DECRESCENTE la lascia giu' (dal piu' alto al piu'
   basso), CRESCENTE la ruota su. Prima era il contrario — invisibile finche'
   l'icona era `switch-vertical`, simmetrica: ruotarla non cambiava nulla. */
.dvd-sort__dir .dvd-icon { transition: transform 0.2s ease; }
.dvd-sort__dir:not(.is-desc) .dvd-icon { transform: rotate(180deg); }

/* TOGGLE VISTA */
/* Toggle vista = DUE BOTTONI SEPARATI come gli altri controlli (scelta utente: il
   segmented control è stato scartato — uniformità di distanze desktop+mobile). Stesso
   gap-famiglia s2 (13px), stessa altezza-riga, stesso raggio dei fratelli. */
.dvd-archive__toggle {
	display: flex;
	gap: 13px;   /* s2 = gap-famiglia della toolbar, uniforme desktop/mobile */
	flex: 0 0 auto;
}
.dvd-view-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; /* s1 */
	background: var(--wp--preset--color--surface-2);
	border: 0;
	border-radius: var(--r-control);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);   /* 0.8rem, sulla scala */
	letter-spacing: 0.06em; text-transform: uppercase;
	height: var(--tb-ctrl-h);                           /* riga coerente */
	padding: 0 13px;   /* s2, = filter-btn */
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.dvd-view-btn .dvd-icon { font-size: 1.15em; }
.dvd-view-btn.is-active { color: #fff; background: var(--wp--preset--color--primary); }

@media (hover: hover) {
	.dvd-view-btn:not(.is-active):hover { color: #fff; background: var(--wp--preset--color--surface-3); }
	.dvd-sort__select:hover { background-color: var(--wp--preset--color--surface-3); }
	.dvd-sort__dir:hover    { background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--primary); }
}

/* ---- MOBILE (≤600px): due righe — [Filtra + Ordina] sopra, [toggle vista] sotto ----
   padding-inline 0 (BUG FIX: NON reintrodurre il gutter, lo dà già .dvd-archive). */
@media (max-width: 600px) {
	.dvd-archive__toolbar {
		--tb-ctrl-h: 48px;                 /* tap pieni over-45 */
		gap: clamp(0.6rem, 2vw, 0.9rem);
		padding: clamp(0.85rem, 3vw, 1.1rem) 0;  /* inline 0: bug del doppio margine risolto */
	}
	.dvd-archive__count { flex: 1 0 100%; }       /* conteggio su riga propria, sopra */
	.dvd-archive__controls {
		flex: 1 1 100%;
		flex-wrap: wrap;                   /* due righe: Filtra+Ordina | Vista */
		align-items: stretch;
		gap: 0.5rem;
	}
	.dvd-sort__label { display: none; }           /* ridondante: le opzioni parlano da sole */
	/* riga 1: Filtra (intrinseco) + Ordina (elastico, riempie) */
	.dvd-filter-btn { flex: 0 0 auto; }
	.dvd-archive__sort { flex: 1 1 auto; min-width: 0; gap: 0.4rem; }
	.dvd-sort__select { flex: 1 1 auto; min-width: 0; }
	.dvd-sort__dir { flex: 0 0 auto; }
	/* riga 2: toggle vista a piena larghezza, i due bottoni 50/50 */
	.dvd-archive__toggle { flex: 1 1 100%; }
	.dvd-view-btn { flex: 1 1 50%; padding-inline: 13px; }   /* s2 = come desktop, uniforme */
}


/* CHIP DEI FILTRI ATTIVI (lug 2026).
   Il difetto di partenza: fascia da 73px con un `border-bottom` PROPRIO — cioè un
   SECONDO bordo a poca distanza da quello che la toolbar ha già — che compariva dal
   nulla e spingeva giù la griglia (prima card da 303 a 376px, misurato). Con
   l'aggiornamento AJAX quello spostamento si vede *accadere*.

   DESKTOP: restano una fascia sotto la toolbar, ma ALLEGGERITA — via il secondo
   bordo, padding ridotto — e vanno a capo normalmente se sono tanti. Provata e
   SCARTATA (richiesta utente) la variante col rientro nella toolbar via margine
   negativo: i chip finivano in un punto che non era il loro, e il valore andava
   indovinato. Qui non si scorre: se i filtri sono molti si vedono tutti.

   MOBILE (≤600px): riga sola SCORREVOLE. Lì la toolbar è già su TRE righe
   (conteggio / Filtra+Ordina / vista) e i chip a capo la farebbero crescere ancora;
   in più a 390px un chip come "Supporto: Cofanetto Blu-ray" occupa ~200px dei 342
   utili — meno di due per riga. Scorrere è l'unico modo di mostrarne più d'uno
   tenendo l'altezza costante. */
.dvd-arc-chips {
	display: flex; align-items: center; gap: 0.6rem;
	flex-wrap: wrap;                       /* desktop: a capo, si vedono tutti */
	padding: 0 0 clamp(0.7rem, 2vw, 1rem);
}

@media (max-width: 600px) {
	.dvd-arc-chips {
		flex-wrap: nowrap;                 /* una riga sola: altezza costante */
		overflow-x: auto;
		scrollbar-width: none;             /* la barra qui è rumore: si scorre col dito */
		padding-bottom: 0.6rem;
	}
	.dvd-arc-chips::-webkit-scrollbar { display: none; }
	.dvd-arc-chips > * { flex: 0 0 auto; } /* i chip non si comprimono: si scorre */
}

.dvd-arc-chip {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--r-pill);
	padding: 0.4rem 0.5rem 0.4rem 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.dvd-arc-chip__x {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.1rem; height: 1.1rem; border-radius: 50%;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--muted); font-size: 0.85em;
}
@media (hover: hover) {
	.dvd-arc-chip:hover { border-color: var(--wp--preset--color--line-2); }
	.dvd-arc-chip:hover .dvd-arc-chip__x { background: var(--wp--preset--color--primary); color: #fff; }
}
.dvd-arc-chip__clear {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small); font-weight: 600;
	color: var(--wp--preset--color--accent); text-decoration: none;
	margin-left: 0.2rem;
}
.dvd-arc-chip__clear:hover { color: var(--wp--preset--color--contrast); }

/* --- Filter button in toolbar (tokenizzato: font-scala φ, height --tb-ctrl-h, badge --r-pill) --- */
.dvd-filter-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* s1 */
	position: relative;
	background: var(--wp--preset--color--surface-2);
	border: 0;
	border-radius: var(--r-control);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);   /* 0.8rem, sulla scala */
	letter-spacing: 0.06em; text-transform: uppercase;
	height: var(--tb-ctrl-h);                           /* riga coerente con gli altri controlli */
	padding: 0 13px; cursor: pointer;   /* s2 */
	flex: 0 0 auto;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.dvd-filter-btn .dvd-icon { font-size: 1.05em; }
.dvd-filter-btn__badge {
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box;               /* GOTCHA: senza, il padding si SOMMA al min-width
	                                         → con 1 cifra il badge era OVALE, non cerchio */
	min-width: 21px; height: 21px; padding: 0 6px;   /* 1 cifra = 21×21 cerchio; 2+ si allunga in pillola */
	background: var(--wp--preset--color--primary); color: #fff;  /* bianco puro sul rosso brand */
	border-radius: var(--r-pill);                       /* token, non 999px */
	font-size: var(--wp--preset--font-size--x-small);   /* 0.8rem, sulla scala */
	font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .dvd-filter-btn:hover { background: var(--wp--preset--color--surface-3); } }

/* --- Filter drawer (inherits .dvd-panel) --- */
.dvd-filter-drawer__body {
	scrollbar-width: none;            /* Firefox: hide scrollbar */
	-ms-overflow-style: none;         /* old Edge */
}
.dvd-filter-drawer__body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */
/* ===== "LO SCHEDARIO" — accordion esclusivo (panel lug 2026, direzione 2) =====
   Cassetti <details name>: uno aperto alla volta → UN solo scroll (mai annidato).
   Il filetto rosso (firma) compare SOLO sul cassetto aperto ("migra"). Selezioni =
   STATO (surface/contrast, mai rosse). Pill-conteggio per cassetto + riepilogo. */
.dvd-filter__acc { border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-filter__acc:last-of-type { border-bottom: 0; }
.dvd-filter__sum {
	list-style: none; display: flex; align-items: center; gap: 0.75rem;
	min-height: 56px; cursor: pointer; user-select: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base); font-weight: 600; color: var(--wp--preset--color--contrast);
} /* small→base (optometristi): è il LANDMARK del cassetto, a 16 pareggiava i nomi-voce */
.dvd-filter__sum::-webkit-details-marker { display: none; }
.dvd-filter__sum-l { flex: none; }
.dvd-filter__sum-cnt {
	flex: none; font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: 0.68rem; line-height: 1.4; padding: 2px 8px; border-radius: var(--r-pill);
	background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--contrast);
}
.dvd-filter__sum-cnt[hidden] { display: none; }
.dvd-filter__sum-sel {
	margin-left: auto; color: var(--wp--preset--color--muted);   /* muted-2→muted (optometristi): feedback di stato, dev'essere leggibile */
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small);
	max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.dvd-filter__sum-ch { flex: none; color: var(--wp--preset--color--muted-2); display: inline-flex; }
.dvd-filter__sum-ch .dvd-icon { width: 17px; height: 17px; transition: transform 0.2s ease; }
.dvd-filter__acc[open] .dvd-filter__sum-ch .dvd-icon { transform: rotate(180deg); }
/* filetto-firma: solo sul cassetto aperto */
.dvd-filter__accrule { display: none; width: 26px; height: 2px; border-radius: 2px;
	background: var(--wp--preset--color--primary); margin: 0 0 8px; } /* s1 */
.dvd-filter__acc[open] .dvd-filter__accrule { display: block; }

.dvd-filter__group { border: 0; padding: 0 0 21px; margin: 0; } /* chiusura cassetto = s3 */
.dvd-filter__opts { display: flex; flex-direction: column; }
/* pill-toggle (Supporto/Decade: set chiusi corti) — selezione = STATO, non rosso */
.dvd-filter__opts--pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding-top: 8px; } /* gap 0.5rem=s1 OK */
.dvd-filter__pill {
	display: flex; align-items: center; justify-content: center; gap: 0.45rem; text-align: center;
	min-height: 48px; padding: 0.3rem 0.55rem; cursor: pointer; box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--r-control);
	background: transparent; color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); font-weight: 600;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.dvd-filter__pill input { position: absolute; opacity: 0; pointer-events: none; }
.dvd-filter__pill-n { min-width: 0; }
.dvd-filter__pill-c { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--body);
	font-weight: 400; font-size: var(--wp--preset--font-size--x-small); font-variant-numeric: tabular-nums; } /* muted-2→muted (optometristi) */
.dvd-filter__pill.is-on { background: var(--wp--preset--color--surface-3); border-color: var(--wp--preset--color--contrast); }
@media (hover: hover) { .dvd-filter__pill:hover { border-color: var(--wp--preset--color--line-2); } }
.dvd-filter__pill:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
/* label "I più presenti" (search-first Regista) */
.dvd-filter__toplbl { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted-2);
	margin: 13px 0 8px; } /* s2 sopra (cambio blocco), s1 sotto (prossimità lista) */
.dvd-filter__toplbl[hidden] { display: none; }

/* SEPARATORE fra i selezionati (risaliti in cima all'apertura del cassetto) e il
   resto della lista — direzione B del panel, seduta 5. Una hairline e basta: il
   blocco di sopra è già distinto dalle checkbox bianche, serve solo dire "qui
   finisce roba tua". Niente etichetta: sarebbe una terza voce di testo in un
   cassetto che ne ha già due (nome gruppo + "I più presenti"). */
.dvd-filter__selsep {
	display: block; height: 1px; margin: 0.55rem 0;
	background: var(--wp--preset--color--line-2);
}
/* badge conteggio nell'eyebrow del drawer */
.dvd-filter__headcnt { font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: 0.68rem; line-height: 1.4; padding: 2px 8px; border-radius: var(--r-pill); /* badge-segnaletica: 0.68 unico, esente scala (documentato) */
	background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--contrast); }
.dvd-filter__headcnt[hidden] { display: none; }

.dvd-filter__search { width: 100%; box-sizing: border-box; margin: 8px 0 8px; min-height: 46px;
	padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--field, #0a0a0a); color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); }
.dvd-filter__search:focus { outline: none; border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent); }
.dvd-filter__search::placeholder { color: var(--wp--preset--color--muted-2); }
/* Filter option row — the same 'row' as .dvd-navrow: hairline, ≥48px tap,
   label filling the row. Checkbox sits on the LEFT (it's a control), the box
   itself is the affordance instead of a chevron. */
.dvd-filter__opt {
	display: flex; align-items: center; gap: 0.75rem;
	min-height: 52px; padding: 0;   /* niente padding verticale: centra il min-height (52) */
	border-bottom: 1px solid rgba(255,255,255,0.06);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base); font-weight: 500;   /* small→base (optometristi): lettura ≥18 su lista lunga da scansionare */
	color: var(--wp--preset--color--contrast); cursor: pointer;
	transition: color 0.2s ease;
}
/* GOTCHA specificità (SMASCHERATO con inspector caccia-regola): woocommerce-blocktheme.css
   mette `.woocommerce-page label { margin-bottom: 0.7em }` (0,1,1) che BATTE la singola
   classe (0,1,0) → 11px di vuoto DOPO il bordo di ogni voce. Serve (0,2,0) per vincere. */
.dvd-filter-drawer .dvd-filter__opt { margin: 0; }
/* conteggio disjunctive a 0 (RAG "disabled facet values"): ATTENUATA ma visibile-cliccabile
   (mai nascosta: l'utente deve poter cambiare combinazione). I selezionati mai attenuati. */
.dvd-filter__opt.is-zero, .dvd-filter__pill.is-zero { opacity: 0.38; }
.dvd-filter__opt-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvd-filter__opt-c { flex: none; color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-variant-numeric: tabular-nums; } /* muted-2→muted (optometristi): è INFO decisionale, 4:1 non passa AA */
.dvd-filter__opt > span { min-width: 0; }
.dvd-filter__opt:last-child { border-bottom: 0; }
/* GOTCHA (stesso dell'empty wishlist): display:flex esplicito BATTE l'attributo [hidden]
   → la ricerca del gruppo Regista non filtrava (il JS metteva hidden ma le righe restavano
   visibili). La regola dedicata ripristina il comportamento nativo di hidden. */
.dvd-filter__opt[hidden] { display: none; }
@media (hover: hover) { .dvd-filter__opt:hover { color: #fff; } }
/* shadcn-style custom checkbox: hide the native control, draw our own box +
   an SVG check on :checked. Pure CSS, accessible (keyboard focus ring). */
.dvd-filter__opt input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: 0 0 auto;
	width: 23px; height: 23px;   /* 20→23 (optometrista: più leggibile over-45; tap = tutta la riga 52px) */
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--surface-2);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dvd-filter__opt input[type="checkbox"]::before {
	content: "";
	width: 11px; height: 11px;
	transform: scale(0);
	transition: transform 0.15s ease;
	background-color: #fff;
	/* checkmark shape via mask */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* spuntato = STATO (regola stato/gesto del sistema: mai rosso — il rosso è di Applica e
   del filetto): fondo BIANCO contrast + check SCURO. Stessa logica del cuore-salvato. */
.dvd-filter__opt input[type="checkbox"]:checked {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.dvd-filter__opt input[type="checkbox"]:checked::before { background-color: var(--wp--preset--color--base); }
.dvd-filter__opt input[type="checkbox"]:checked::before { transform: scale(1); }
.dvd-filter__opt input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, var(--acc-red));
	outline-offset: 2px;
}
@media (hover: hover) {
	.dvd-filter__opt input[type="checkbox"]:hover { border-color: var(--wp--preset--color--muted-ink); }
}
.dvd-filter-drawer__foot { display: flex; gap: 0.75rem; }
.dvd-filter__reset, .dvd-filter__apply {
	flex: 1 1 auto; min-height: 56px; padding: 0.5rem 1rem; border-radius: var(--r-control); cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
} /* CTA-drawer una specie sola: 56px come la CTA del carrello */
.dvd-filter__reset { background: var(--wp--preset--color--surface-2); border: 0; color: var(--wp--preset--color--muted); }
.dvd-filter__apply { background: var(--wp--preset--color--primary, var(--acc-red)); border: 0; color: #fff; flex: 1.618 1 auto; } /* rapporto aureo φ */
/* 0 risultati → "Nessun film" disabilitato: impossibile applicare un vicolo cieco */
.dvd-filter__apply:disabled { background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--muted-2); cursor: not-allowed; }
/* stato caricamento: "Applica" fa `location.href` → la pagina filtrata impiega a
   caricare (query + render server-side) e senza feedback il click sembra non
   arrivato. Spinner immediato + testo nascosto, STESSO pattern del bottone
   checkout del drawer carrello (riusa @keyframes dvd-spin).
   Il `:disabled` sopra viene dopo nel foglio ma ha la stessa specificita' → la
   regola `.is-loading` va DOPO per vincere sul fondo grigio del disabled: qui il
   bottone e' disabilitato per non farlo premere due volte, non perche' inattivo,
   quindi deve restare ROSSO e vivo. */
.dvd-filter__apply.is-loading,
.dvd-filter__apply.is-loading:disabled {
	background: var(--wp--preset--color--primary, var(--acc-red));
	color: transparent; position: relative; cursor: wait;
}
.dvd-filter__apply.is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 1.15rem; height: 1.15rem; margin: -0.575rem 0 0 -0.575rem;
	border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
	border-radius: 50%; animation: dvd-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.dvd-filter__apply.is-loading::after { animation: none; border-top-color: rgba(255,255,255,.4); }
}
@media (hover: hover) {
	.dvd-filter__reset:hover { color: #fff; background: var(--wp--preset--color--surface-3); }
	.dvd-filter__apply:hover { background: var(--wp--preset--color--primary-dark, var(--acc-red-dark)); }
}