/* ==========================================================================
   HCN Store — Archivio prodotti (v0.4.18)
   Porting dei componenti owner (griglia + filtri + card) dal plugin live
   hikaru-quick-buy, con rebrand #ff9900/#ff3333 → #FA5403, Poppins e
   dark mode via token semantici light-dark() del tema.
   ========================================================================== */

/* Layout archivio: sidebar filtri 260px + griglia fluida. */
.hcn-archivio-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

/* ---------- Header categoria ---------- */
.hcn-archivio-head {
	margin-block-end: 1.5rem;
}

.hcn-archivio-title {
	font-family: var(--hcn-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--hcn-text);
	margin: 0;
	padding-block-end: 6px;
	border-block-end: 2px solid var(--hcn-primary);
	letter-spacing: 0.3px;
}

.hcn-archivio-count {
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	color: var(--hcn-text-muted);
	margin: 0.4rem 0 0;
}

.hcn-archivio-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hcn-text);
	margin: 0.6rem 0 0;
	/* v0.4.70 (owner): la descrizione della categoria deve occupare tutta la
	 * larghezza disponibile (il max-width 60ch la faceva sembrare tagliata). */
	max-width: none;
}

/* ---------- Griglia card (live: repeat(6,4fr) buggy → 1fr) ----------
   v0.4.44 (richiesta owner «schede troppo piccole»): da 4 a 3 colonne su
   desktop → card +33% di larghezza (contenuto per scheda). */
.hikaru-modern-products-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

/* Card del prodotto (css live invariato a parte i colori) */
.hikaru-product-card {
	background: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hikaru-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgb(0 0 0 / 0.06);
}

.hikaru-card-img-wrapper {
	position: relative;
	width: 100%;
	padding-top: 100%;
	background: var(--hcn-band-bg);
}

.hikaru-card-img-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0; /* v0.4.44: full-bleed — la copertina PARTE dall'inizio della scheda (richiesta owner; prima padding 10px = bordo interno) */
}

.hikaru-card-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-direction: row; /* v0.4.36: RIGA orizzontale (best practice flag prodotto), non colonna */
	flex-wrap: wrap;
	gap: 4px;
	z-index: 2;
	/* v0.4.37: il cuore NON è più sulla copertina → la fila può usare tutta
	 * la larghezza (prima riservava 64px per il cuore a destra). */
	max-width: calc(100% - 16px);
}

.hikaru-badge {
	font-family: var(--hcn-font-display);
	font-size: 9px; /* v0.4.36: −2px su richiesta owner, uniforme su tutta la fila */
	font-weight: bold;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.badge-lang { background-color: var(--hcn-text); color: var(--hcn-card-bg); } /* v0.4.44: era color #fff fisso → BIANCO SU BIANCO in dark (screenshot owner); --hcn-card-bg flippa in dark come --hcn-text → contrasto garantito */
.badge-preorder { background-color: var(--hcn-primary); }
.badge-outofstock { background-color: #cc0000; }

/* «In offerta» (v0.4.23): stesso token rosso sale del prezzo ins —
   semantica coerente rosso=sconto su scheda, card e correlati. */
.badge-sale { background-color: var(--hcn-sale); }

/* v0.4.36: lo slot assoluto .hcn-sale-pill (v0.4.35) è RIMOSSO — la pill
   «In offerta» sta nella FILA badge in alto a sinistra con gli altri flag
   (best practice: flag prodotto tutti in alto sx, cuore-azione solo a dx). */

/* Aggiungi al carrello (v0.4.35, richiesta owner): BLU #1b90fc al posto
   del nero — hover più scuro; «Acquista ora» resta brand arancio. */
.hikaru-card-btn.hikaru-add-to-cart {
	background: #1b90fc;
	color: #fff;
}

.hikaru-card-btn.hikaru-add-to-cart:hover {
	background: #1470c4;
	color: #fff;
}

/* Griglia homepage (v0.4.24): card owner in contesti Woo block + shortcode
   [hcn_home_preordini]. v0.4.44: 3 colonne come l'archivio. */
.hcn-home-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 1200px) { .hcn-home-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px)  { .hcn-home-grid { grid-template-columns: repeat(2, 1fr); } }

/* Griglie Woo block (product-new / product-on-sale): card uniformi.
   v0.4.26: gap esplicito — le griglie wc-block-grid sono flex con gap 0
   (card attaccate, richiesta owner: distanza minima 2px, usiamo i 20px
   del design owner). */
ul.wp-block-post-template.is-layout-grid > li.wp-block-post,
ul.products.columns-4 > li.product {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-product-query ul.wp-block-post-template,
.wp-block-woocommerce-product-on-sale ul.wp-block-post-template,
.wc-block-grid .wc-block-grid__products {
	gap: 20px;
}

/* ---------- RISULTATI DI RICERCA (v0.4.34): la pagina /?s=…&post_type=product
   rende il Product Collection block (la gerarchia search NON risolve
   archive-product.html del tema): estendiamo qui la skin card ai suoi
   selettori, per risultati coerenti con le card owner. ---------- */

/* La search usa il template index (main constrained del tema): i figli
   (titolo query, collection, notice) escono a 1239px misurati → cap 89%
   come OVUNQUE nel sito (invariante v0.4.27). NB specificità: il layout WP
   scrive `.wp-site-blocks .alignwide { max-width: wide-size }` (0,2,0) che
   batte `body.search-results main > *` (0,1,2): serve lo stesso prefisso. */
body.search-results .wp-site-blocks main > * {
	/* !important: il CSS blocchi Woo aggiunge max-width wide-size anche ai
	 * notice wrapper a parità di specificità ma DOPO il tema (misurato su
	 * .wc-block-store-notices.alignwide = 1440px). Scopo limitato alla search. */
	max-width: var(--hcn-container, 71.25rem) !important;
	margin-inline: auto;
}

.wc-block-product-template {
	gap: 20px;
}

.wc-block-product-template .wc-block-product,
.wc-block-product-template .wp-block-post {
	padding: 0;
	background: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: var(--hcn-radius-card);
	overflow: hidden;
}

.wc-block-product-template .wc-block-components-product-name {
	font-family: var(--hcn-font-display);
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hcn-text) !important;
}

.wc-block-product-template .wc-block-components-product-price {
	font-family: var(--hcn-font-display);
	color: var(--hcn-text);
}

.wc-block-product-template .wc-block-components-product-price ins {
	color: var(--hcn-sale);
	text-decoration: none;
	font-weight: 700;
}

.wc-block-product-template .wc-block-components-product-price del {
	color: var(--hcn-text-muted);
}

.wc-block-product-template .wp-block-button__link {
	background: var(--hcn-primary);
	color: var(--hcn-on-brand);
	border-radius: 999px;
}

/* Skin Woo block (v0.4.24): stesso linguaggio delle card owner — badge
   «Sconto» chip rosso sale (NON il pallino oliva), prezzi token, card. */
.wc-block-grid__product {
	padding: 0;
	background: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: var(--hcn-radius-card);
	overflow: hidden;
}

.wc-block-grid__product-onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	margin: 0;
	padding: 3px 8px;
	border: none;
	border-radius: 4px;
	background: var(--hcn-sale) !important;
	color: #fff;
	font-family: var(--hcn-font-display);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.wc-block-grid__product-title,
.wc-block-components-product-name {
	font-family: var(--hcn-font-display);
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hcn-text) !important;
}

.wc-block-grid__product-price,
.wc-block-components-product-price {
	font-family: var(--hcn-font-display);
	color: var(--hcn-text);
}

.wc-block-grid__product-price ins,
.wc-block-components-product-price ins {
	color: var(--hcn-sale);
	text-decoration: none;
	font-weight: 700;
}

.wc-block-grid__product-price del,
.wc-block-components-product-price del {
	color: var(--hcn-text-muted);
}

.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	background: var(--hcn-primary);
	color: var(--hcn-on-brand);
	border-radius: 999px;
}

.hikaru-card-content {
	padding: 15px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hikaru-card-title {
	font-family: var(--hcn-font-display);
	font-size: 14px !important;
	font-weight: 600 !important;
	margin: 0 0 3px 0 !important; /* v0.4.39: −5px su richiesta owner (era 8px) */
	line-height: 1.4 !important;
	height: 40px;
	overflow: hidden;
}

.hikaru-card-title a {
	color: var(--hcn-text) !important;
	text-decoration: none !important;
}

.hikaru-card-title a:hover {
	color: var(--hcn-primary) !important;
}

.hikaru-card-price {
	font-family: var(--hcn-font-display);
	font-size: 16px;
	font-weight: bold;
	color: var(--hcn-text);
	margin-bottom: 12px;
}

.hikaru-card-price del {
	font-size: 13px;
	color: var(--hcn-text-muted);
	margin-right: 5px;
	font-weight: normal;
}

.hikaru-card-price ins {
	text-decoration: none;
	color: var(--hcn-sale); /* v0.4.23: token sale (flippa in dark) */
}

/* RIGA PREZZO+CUORE (v0.4.37, richiesta owner): il prezzo e il cuore
   condividono la stessa riga — prezzo a sinistra, cuore a destra. */
.hikaru-card-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* RETE wpautop (v0.4.38, stessa famiglia v0.4.13): wpautop avvolge lo slot
   del cuore in un <p> spurio con margin 17px → riga gonfiata a 78px e
   VUOTO enorme fra titolo e prezzo (screenshot owner). display:contents
   scioglie il <p>: il bottone diventa flex-item diretto, riga = 44px. */
.hikaru-card-price-row p {
	margin: 0;
	display: contents;
}

.hikaru-card-price-row .hikaru-card-price {
	margin-bottom: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.hikaru-card-price-row .hcn-wl-btn {
	color: var(--hcn-text-muted);
}

.hikaru-card-price-row .hcn-wl-btn:hover {
	color: var(--hcn-primary);
}

.hikaru-card-price-row .hcn-wl-btn.is-active {
	color: var(--hcn-primary);
}

.hikaru-card-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
}

.hikaru-card-btn {
	display: block;
	text-align: center;
	background: var(--hcn-text, #222);
	color: var(--hcn-card-bg, #fff) !important;
	padding: 8px 12px;
	border-radius: 4px;
	font-family: var(--hcn-font-display);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.2s;
}

.hikaru-card-btn:hover {
	background: var(--hcn-primary);
	color: var(--hcn-on-brand, #fff) !important;
}

.hikaru-buy-now { background: var(--hcn-primary); color: var(--hcn-on-brand, #fff) !important; }
.hikaru-buy-now:hover { background: var(--hcn-primary-hover) !important; color: var(--hcn-on-brand, #fff) !important; }

.hikaru-no-products,
.hikaru-archivio-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	color: var(--hcn-text-muted);
	font-family: var(--hcn-font-display);
}

.hikaru-archivio-empty .hikaru-card-btn {
	display: inline-block;
	margin-top: 0.75rem;
	background: var(--hcn-primary);
	color: var(--hcn-on-brand, #fff) !important;
	padding: 10px 20px;
	border-radius: 6px;
}

/* Paginazione (live: nero #1a1a1a + rosso #ff3333 → token) */
/* v0.4.44: durante l'AJAX dei filtri la paginazione DIVENTA INCOERENTE
 * (i link puntano a ?page=N del set NON filtrato: «pagina 2» mostrava i
 * prodotti sbagliati → l'owner leggeva «i filtri non funzionano»). Nascosta
 * con l'applicazione dei filtri; torna al reset. */
body.hcn-filtri-attive .hikaru-pagination {
	display: none;
}

.hikaru-pagination {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
}

.hikaru-pagination ul {
	display: inline-flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 8px;
}

.hikaru-pagination li a,
.hikaru-pagination li span {
	display: block;
	padding: 10px 18px;
	background-color: var(--hcn-text, #1a1a1a);
	color: var(--hcn-card-bg, #fff);
	text-decoration: none;
	border-radius: 4px;
	font-family: var(--hcn-font-display);
	font-weight: bold;
	transition: all 0.3s ease;
}

.hikaru-pagination li span.current {
	background-color: var(--hcn-primary);
	color: var(--hcn-on-brand, #fff);
}

.hikaru-pagination li a:hover {
	background-color: var(--hcn-primary);
	color: var(--hcn-on-brand, #fff);
}

/* ---------- Sidebar filtri ---------- */
.hikaru-filter-sidebar-container {
	background-color: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: 8px;
	padding: 20px;
}

.hikaru-filter-main-title {
	font-family: var(--hcn-font-display);
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--hcn-text);
	margin-bottom: 15px !important;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--hcn-primary);
}

.hikaru-active-filters {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: var(--hcn-band-bg);
	padding: 12px;
	border-radius: 6px;
	margin-bottom: 20px;
	border: 1px dashed var(--hcn-border);
}

.hikaru-active-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hikaru-tag {
	background-color: var(--hcn-text, #333);
	color: var(--hcn-card-bg, #fff);
	font-family: var(--hcn-font-display);
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hikaru-close-tag {
	cursor: pointer;
	font-style: normal;
	font-weight: bold;
	color: var(--hcn-primary);
}

.hikaru-reset-btn {
	background: transparent;
	border: none;
	color: #cc0000;
	font-family: var(--hcn-font-display);
	font-size: 12px;
	cursor: pointer;
	text-align: left;
	padding: 0;
	text-decoration: underline;
}

.hikaru-filter-group {
	margin-bottom: 25px;
}

.hikaru-filter-group:last-child {
	margin-bottom: 0;
}

.hikaru-filter-group h4 {
	font-family: var(--hcn-font-display);
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hcn-text-muted);
	margin-bottom: 12px !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Slider doppia punta (colori live, brand token) */
.hikaru-range-slider-container {
	position: relative;
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
}

.hikaru-slider-track {
	position: absolute;
	width: 100%;
	height: 6px;
	border-radius: 5px;
	background-color: var(--hcn-border);
	z-index: 1;
}

.hikaru-range-slider-container input[type="range"] {
	position: absolute;
	width: 100%;
	height: 6px;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
}

.hikaru-range-slider-container input[type="range"]::-webkit-slider-thumb {
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background: var(--hcn-primary);
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
	position: relative;
}

.hikaru-range-slider-container input[type="range"]::-moz-range-thumb {
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background: var(--hcn-primary);
	cursor: pointer;
	pointer-events: auto;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
	position: relative;
}

.hikaru-price-values {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--hcn-text-muted);
	margin-top: 5px;
}

.hikaru-price-values strong {
	color: var(--hcn-primary);
	font-weight: 600;
}

/* Toggle stato — v0.4.70 (owner: «pallini non visualizzati correttamente»):
 * lista radio VERTICALE (pattern standard per i filtri, NN/g): ogni voce ha
 * il pallino visibile + etichetta su riga intera (il segmented orizzontale
 * con i pallini non conteneva «Pre-Order» e lo tagliava). */
.hikaru-status-toggle-group {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hcn-border);
	border-radius: 6px;
	overflow: hidden;
}

.hikaru-status-btn + .hikaru-status-btn {
	border-top: 1px solid var(--hcn-border);
}

.hikaru-status-btn {
	cursor: pointer;
	margin: 0 !important;
}

.hikaru-status-btn input[type="radio"] {
	display: none;
}

.hikaru-status-btn span {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	white-space: normal;
	font-family: var(--hcn-font-display);
	font-size: 12px;
	background-color: var(--hcn-card-bg);
	color: var(--hcn-text-muted);
	transition: background 0.2s;
}

/* v0.4.70 (owner): pallino radio VISIBILE in ogni pillola (prima: solo testo,
 * l'input era display:none → nessun indicatore di selezione leggibile). */
.hikaru-status-btn span::before {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid var(--hcn-text-muted);
	background: transparent;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.hikaru-status-btn input:checked + span::before {
	border-color: var(--hcn-on-brand, #fff);
	background: var(--hcn-on-brand, #fff);
	box-shadow: inset 0 0 0 3px var(--hcn-primary);
}

.hikaru-status-btn input[type="radio"]:checked + span {
	background-color: var(--hcn-primary);
	color: var(--hcn-on-brand, #fff);
	font-weight: 500;
}

/* Checkbox */
.hikaru-filter-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 200px;
	overflow-y: auto;
	padding-right: 5px;
}

.hikaru-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--hcn-text);
	cursor: pointer;
}

.hikaru-checkbox-label input[type="checkbox"] {
	accent-color: var(--hcn-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.hikaru-modern-products-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 992px) {
	.hcn-archivio-layout {
		grid-template-columns: 1fr;
	}
	.hikaru-modern-products-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 576px) {
	.hikaru-modern-products-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.hikaru-card-content { padding: 10px; }
	.hikaru-card-title { font-size: 13px !important; height: 36px; }
	.hikaru-card-btn { font-size: 12px; padding: 8px 8px; }
}

/* Tipografia card più generosa (v0.4.44, «schede troppo piccole»): con le
   card più larghe (+33%) anche titolo/prezzo/CTA salgono di scala. */
.hikaru-card-title {
	font-size: 15px !important;
	height: 42px;
}

/* Pill «Disponibile» vicino al prezzo (v0.4.44, richiesta owner): respiro
   minimo dal prezzo, poi la nota Omnibus la segue. */
.hcn-product .hcn-stock-inline {
	margin-block: 2px 0;
}

/* Griglie Woo block home (novità/offerte): da 4 a 3 colonne (v0.4.44,
   «schede troppo piccole») — l'attributo columns di Woo genera la classe
   has-N-columns con grid-template-columns: repeat(N, minmax(0,1fr)). */
.wc-block-grid.has-4-columns .wc-block-grid__products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hikaru-card-price {
	font-size: 17px;
}

.hikaru-card-price del {
	font-size: 14px;
}

.hikaru-card-btn {
	font-size: 14px;
	padding: 12px 14px;
	min-height: 44px;
	box-sizing: border-box;
}

/* ---------- Reduced motion (KB UX) ---------- */
@media (prefers-reduced-motion: reduce) {
	.hikaru-product-card,
	.hikaru-product-card:hover,
	.hikaru-card-btn,
	.hikaru-pagination li a {
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   FILTRI ARCHIVIO (v0.4.44): la logica AJAX funzionava (misurata), ma la
   CSS non rispettava WCAG 2.2 2.5.8 (target 24px) né il look 2026:
   checkbox 13px, toggle 35px, nessun focus visibile. Skin consistente con
   il resto del tema (Poppins, token, brand). Ordine in CODA: vince in cascade
   sulle regole legacy sopra (stesse proprietà, specificità maggiore).
   ========================================================================== */

/* Checkbox/label ≥24px di target (WCAG 2.2 2.5.8 AA): la checkbox è 16px,
 * il target esteso via padding della label. */
.hikaru-checkbox-label {
	position: relative;
	min-height: 28px; /* target + respiro */
	align-items: center;
	font-family: var(--hcn-font-display);
	font-size: 0.875rem;
	color: var(--hcn-text);
	padding: 2px 0;
	border-radius: 6px;
}

.hikaru-checkbox-label:hover {
	background: color-mix(in srgb, var(--hcn-primary) 7%, transparent);
}

.hikaru-checkbox-label input[type="checkbox"] {
	inline-size: 16px;
	block-size: 16px;
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}

/* Toggle stato: voci 44px, radio reale accessibile da tastiera. */
.hikaru-status-toggle-group {
	border-radius: 8px;
}

.hikaru-status-btn span {
	padding: 11px 12px; /* v0.4.44: 22+border ≈ 44px di target; v0.4.70 lista verticale a righe */
	white-space: normal;
	font-size: 0.8125rem;
	font-weight: 500;
}

.hikaru-status-btn input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.hikaru-status-btn input[type="radio"]:focus-visible + span {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: -3px;
}

/* Slider: thumb 20px (target ≈24) + focus ring. */
.hikaru-range-slider-container input[type="range"]::-webkit-slider-thumb {
	height: 20px;
	width: 20px;
}

.hikaru-range-slider-container input[type="range"]::-moz-range-thumb {
	height: 20px;
	width: 20px;
}

.hikaru-range-slider-container input[type="range"]:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 4px;
}

/* Focus visibile su tutte le checkbox (raggio morbido sul box input). */
.hikaru-checkbox-label input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}