/*
Theme Name: HCN Store Child
Description: Child theme di HCN - Store basato su Twenty Twenty-Five. Grafica allineata 1:1 al tema del sito news (hcn-theme): stessi colori (brand #FA5403), stessi font (Poppins + Roboto), stesse misure header/footer. Sorgente gestita nel repository (theme/hcn-store-child) e deployata su LocalWP tramite copia.
Author: HCN
Version: 0.4.73
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
Template: twentytwentyfive
License: GNU General Public License v2 or later
Text Domain: hcn-store-child
*/

/* ============================================================================
   HCN — TOKEN GRAFICI (fonte: tema news hcn-theme/assets/css/theme.css,
   derivato dai design token di hcn-work, decisioni D-004/D-024/D-025/D-027).
   I colori primitive vivono in theme.json (palette HCN); qui solo i
   semantici + le regole di header/footer replicate dal tema news.
   ========================================================================== */

/* --- Font: stessi file woff2 del tema news (copiati identici, md5 verificato).
   Poppins = titoli/nav (font-display), Roboto = corpo (font-sans). ---------- */
@font-face{font-family:Poppins;src:url("assets/fonts/poppins-300.woff2") format("woff2");font-display:swap;font-weight:300;font-style:normal;}
@font-face{font-family:Poppins;src:url("assets/fonts/poppins-400.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal;}
@font-face{font-family:Poppins;src:url("assets/fonts/poppins-500.woff2") format("woff2");font-display:swap;font-weight:500;font-style:normal;}
@font-face{font-family:Poppins;src:url("assets/fonts/poppins-600.woff2") format("woff2");font-display:swap;font-weight:600;font-style:normal;}
@font-face{font-family:Poppins;src:url("assets/fonts/poppins-700.woff2") format("woff2");font-display:swap;font-weight:700;font-style:normal;}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-400-normal.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal;}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-500-normal.woff2") format("woff2");font-display:swap;font-weight:500;font-style:normal;}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-700-normal.woff2") format("woff2");font-display:swap;font-weight:700;font-style:normal;}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-400-italic.woff2") format("woff2");font-display:swap;font-weight:400;font-style:italic;}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-500-italic.woff2") format("woff2");font-display:swap;font-weight:500;font-style:italic;}
@font-face{font-family:Roboto;src:url("assets/fonts/roboto-700-italic.woff2") format("woff2");font-display:swap;font-weight:700;font-style:italic;}
/* Fallback metrici (Arial), come nel tema news: evitano lo scarto di layout
   durante il font-display:swap. */
@font-face{font-family:"Poppins fallback";src:local("Arial");font-display:swap;font-weight:300 700;font-style:normal;size-adjust:111.0361%;ascent-override:94.5638%;descent-override:31.5213%;line-gap-override:9.0061%;}
@font-face{font-family:"Roboto fallback";src:local("Arial");font-display:swap;font-weight:300 700;font-style:normal;size-adjust:99.7809%;ascent-override:92.9771%;descent-override:24.4677%;line-gap-override:0%;}

/* --- Token semantici (identici al tema news, con dark mode light-dark()).
   La palette dà le primitive; qui solo ciò che header/footer consumano. ----- */
:root {
	color-scheme: light dark;

	--hcn-font-sans: Roboto, "Roboto fallback", system-ui, "Segoe UI", Arial, sans-serif;
	--hcn-font-display: Poppins, "Poppins fallback", system-ui, "Segoe UI", sans-serif;

	--hcn-neutral-100: oklch(98% 0.002 253);
	--hcn-neutral-200: oklch(91% 0.007 253);
	--hcn-neutral-150: oklch(93.5% 0 253); /* #E7E7E7: fascia grigia del live */
	--hcn-neutral-600: oklch(46.5% 0.013 253); /* ≈ #54595F secondary */
	--hcn-neutral-700: oklch(35% 0.013 253);
	--hcn-neutral-800: oklch(24% 0.011 253);
	--hcn-neutral-900: oklch(18% 0.009 253); /* ≈ "nero" #111 */
	--hcn-neutral-950: oklch(13% 0.008 253);

	--hcn-text: light-dark(var(--hcn-neutral-900), var(--hcn-neutral-100));
	--hcn-text-muted: light-dark(var(--hcn-neutral-600), var(--hcn-neutral-400, oklch(68% 0.012 253)));
	--hcn-on-brand: light-dark(#fff, var(--hcn-neutral-950)); /* testo sopra riempimenti brand */

	--hcn-surface-menu: light-dark(#e6e6e6, var(--hcn-neutral-800));
	--hcn-surface-header: light-dark(#ececec, var(--hcn-neutral-900)); /* riga logo header */
	--hcn-footer-bg: light-dark(#d8d8d8, var(--hcn-neutral-800));
	--hcn-band-bg: light-dark(#e7e7e7, var(--hcn-neutral-900));

	/* D-241 del tema news (porting store, v0.4.65, richiesta owner «l'arancione
	   deve essere sempre #FA5403»): niente tinte schiarite in dark — l'arancio
	   di brand è #FA5403 in ENTRAMBI i temi. hover resta uno STATO più scuro:
	   light #E04A00 (invariato), dark brand-600 #DC4400 (come il news).
	   Contrasti D-241: quasi-nero su #FA5403 6.07:1 (entrambi i temi);
	   #FA5403 come testo su fondi scuri ≥4.96:1; hover #DC4400 + quasi-nero
	   4.67:1; focus ring ≥4.96:1 (req. 3:1) — tutto AA. */
	--hcn-primary: #FA5403;
	--hcn-primary-hover: light-dark(#E04A00, #DC4400);
	--hcn-link: light-dark(#C63E02, #FA5403); /* testo brand su fondo pagina */
	--hcn-focus-ring: #FA5403;

	--hcn-container: 71.25rem; /* 1140px: larghezza container del live (news: --container-default) */
	--hcn-sale: light-dark(#cc0000, oklch(68% 0.19 25)); /* sconti: stesso rosso del prezzo ins */
	--hcn-border-width: 1px;
	--hcn-border: light-dark(var(--hcn-neutral-200), var(--hcn-neutral-700));
	--hcn-radius-card: 9px; /* raggi card misurati sul live (D-011) */
	--hcn-card-bg: light-dark(#fff, var(--hcn-neutral-800));
	--hcn-border-card: light-dark(#000, var(--hcn-neutral-600)); /* --border-card del tema news */
	--hcn-radius-md: 0.75rem;
	--hcn-radius-full: 999px;
	--hcn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--hcn-duration-fast: 120ms;
	--hcn-z-sticky: 100;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Fallback se il browser non supporta light-dark(): resta sul tema chiaro. */
@supports not (color: light-dark(#fff, #000)) {
	:root {
		--hcn-text: #111;
		--hcn-text-muted: #54595F;
		--hcn-on-brand: #fff;
		--hcn-surface-menu: #e6e6e6;
		--hcn-surface-header: #ececec;
		--hcn-footer-bg: #d8d8d8;
		--hcn-band-bg: #e7e7e7;
		--hcn-primary: #FA5403;
		--hcn-primary-hover: #E04A00;
		--hcn-link: #C63E02;
		--hcn-focus-ring: #FA5403;
		--hcn-border: #d5d5d5;
		--hcn-card-bg: #fff;
		--hcn-border-card: #000;
	}
}

@media (prefers-color-scheme: dark) {
	@supports not (color: light-dark(#fff, #000)) {
		html:not([data-theme="light"]) {
			--hcn-text: var(--hcn-neutral-100);
			--hcn-text-muted: oklch(68% 0.012 253);
			--hcn-on-brand: var(--hcn-neutral-950);
			--hcn-surface-menu: var(--hcn-neutral-800);
			--hcn-surface-header: var(--hcn-neutral-900);
			--hcn-footer-bg: var(--hcn-neutral-800);
			--hcn-band-bg: var(--hcn-neutral-900);
			--hcn-primary: #FA5403;
			--hcn-primary-hover: #DC4400;
			--hcn-link: #FA5403;
			--hcn-focus-ring: #FA5403;
			--hcn-border: var(--hcn-neutral-700);
			--hcn-card-bg: var(--hcn-neutral-800);
			--hcn-border-card: var(--hcn-neutral-600);
		}
	}
}

/* --- Corpo: Roboto come il sito news ------------------------------------ */
/* Sfondo pagina come tema news (--color-bg: light-dark bianco/neutral-950):
   theme.json dipinge il body di bianco STATICO e in dark mode i token testo
   vanno near-white → contrasto rotto su tutte le pagine statiche (emerso in
   bacheca wishlist v0.4.21). :root body batte la specificità di wp-singular. */
:root body {
	font-family: var(--hcn-font-sans);
	color: var(--hcn-text);
	background-color: light-dark(#fff, var(--hcn-neutral-950));
}
h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.wp-block-navigation {
	font-family: var(--hcn-font-display);
}

/* ============================================================================
   HEADER — replica di Header.astro → header.php del tema news:
   topbar arancione (36px, radius solo in alto) + riga logo 86px su #ECECEC.
   ========================================================================== */

.hcn-topbar {
	background-color: var(--hcn-primary);
	color: var(--hcn-on-brand);
	font-family: var(--hcn-font-display);
	border-radius: 10px 10px 0 0;
	margin: 10px 10px 0;
	min-block-size: 2.25rem; /* 36px come il live */
	padding: 0 10px;
	display: flex;
}

.hcn-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	inline-size: 100%;
	min-block-size: 2.25rem;
	font-size: 0.625rem;
}

.hcn-topbar__links {
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcn-topbar__links a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--hcn-on-brand);
	font-size: 0.625rem;
	font-weight: 500;
	text-decoration: none;
	transition: opacity var(--hcn-duration-fast) var(--hcn-ease-out);
}

.hcn-topbar__links a:hover { opacity: 0.8; }
.hcn-topbar__links svg { flex-shrink: 0; }

.hcn-topbar__social {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcn-topbar__social a {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	color: var(--hcn-on-brand);
	transition: opacity var(--hcn-duration-fast) var(--hcn-ease-out);
}

.hcn-topbar__social a:hover { opacity: 0.75; }

/* Riga logo: attaccata alla topbar, grigio #ECECEC, 86px (8+12 di padding
   e logo 66px), radius in basso — misure live verificate (D-028). */
.hcn-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-block-size: 5.375rem;
	margin: 0 10px;
	padding-block: 0.5rem 0.75rem;
	background-color: var(--hcn-surface-header);
	border-radius: 0 0 10px 10px;
}

.hcn-header__brand {
	margin-inline-end: auto;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--hcn-text);
}

.hcn-header__brand .wp-block-site-title {
	margin: 0;
	font-weight: 600;
	font-size: 1.5rem;
}

/* Ricerca (D-079): pill con lente + etichetta su desktop, solo icona su
	 * mobile. Stessa altezza dei toggle. Bordo arancione SEMPRE visibile
	 * (richiesta owner nel tema news: il bordo neutro sembrava assente). */
.hcn-header__search {
	display: flex;
	align-items: center;
	gap: 8px;
	inline-size: auto;
	block-size: 2.75rem;
	padding-inline: 12px;
	border-radius: var(--hcn-radius-full);
	border: var(--hcn-border-width) solid var(--hcn-primary);
	background: transparent;
	color: var(--hcn-text);
	cursor: pointer;
	font-family: var(--hcn-font-display);
	font-size: 0.875rem;
	font-weight: 500;
}

.hcn-header__search:hover {
	color: var(--hcn-link);
	border-color: var(--hcn-primary-hover);
	background: color-mix(in srgb, var(--hcn-primary) 8%, transparent);
}

.hcn-header__search:focus-visible {
	outline: 2px solid var(--hcn-primary);
	outline-offset: 2px;
}

.hcn-header__search svg { flex-shrink: 0; }
.hcn-header__search .hcn-header__search-label { display: none; }

/* Scorciatoia Ctrl K, identica al tema news (nascosta su mobile). */
.hcn-header__search-kbd {
	display: none;
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
	font-size: 0.6875rem;
	padding: 1px 6px;
	border: 1px solid var(--hcn-border);
	border-radius: 5px;
	color: var(--hcn-text-muted);
}

@media (min-width: 48rem) {
	.hcn-header__search .hcn-header__search-label { display: inline; }
	.hcn-header__search-kbd { display: inline-block; }
}

/* ==========================================================================
   SEARCHMODAL (dialog #hcn-search-modal) — porting 1:1 del tema news
   (assets/css/theme.css righe 1761-1999, D-079/D-081/D-082). Le classi
   hikaru → hcn-search: stesse proprietà, stessi valori, stesso ordine.
   ========================================================================== */

/* NOTA (D-079): stili GLOBALI con prefisso #hcn-search-modal (id unico nel
   sito): il prefisso id evita collisioni con gli stili dei block template
   di WooCommerce/Twenty Twenty-Five.
   ------------------------------------------------------------ box ---- */
#hcn-search-modal.hcn-search {
	/* dialog: il browser centra di default, qui personalizziamo */
	border: none;
	padding: 0;
	background: transparent;
	max-inline-size: min(640px, calc(100vw - 32px));
	inline-size: 100%;
	margin-inline: auto;
}

#hcn-search-modal.hcn-search::backdrop {
	background: color-mix(in srgb, black 55%, transparent);
	backdrop-filter: blur(2px);
}

#hcn-search-modal .hcn-search__box {
	background: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
	overflow: hidden;
}

/* ---------------------------------------------------------------- bar ---- */
#hcn-search-modal .hcn-search__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-block-end: 1px solid var(--hcn-border);
}

#hcn-search-modal .hcn-search__ico {
	flex: none;
	color: var(--hcn-text-muted);
}

#hcn-search-modal .hcn-search__input {
	flex: 1;
	min-inline-size: 0;
	border: none;
	outline: none;
	background: transparent;
	color: var(--hcn-text);
	font-family: var(--hcn-font-display); /* Poppins, come il resto dell'UI */
	font-size: 1rem; /* ≥16px: iOS non zooma */
	font-weight: 400;
}

#hcn-search-modal .hcn-search__input::placeholder {
	color: var(--hcn-text-muted);
}

#hcn-search-modal .hcn-search__input::-webkit-search-cancel-button {
	display: none; /* il bottone chiudi è più raggiungibile */
}

#hcn-search-modal .hcn-search__close {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	color: var(--hcn-text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
}

#hcn-search-modal .hcn-search__close:hover {
	color: var(--hcn-text);
}

#hcn-search-modal .hcn-search__esc {
	font-family: var(--hcn-font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", monospace);
	font-size: 0.6875rem;
	border: 1px solid var(--hcn-border);
	border-radius: 4px;
	padding: 1px 5px;
}

@media (max-width: 47.99rem) {
	#hcn-search-modal .hcn-search__esc {
		display: none; /* su mobile non esiste Esc */
	}
}

/* ---------------------------------------------------------------- hint --- */
#hcn-search-modal .hcn-search__hint {
	margin: 0;
	padding: 10px 16px 4px;
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	color: var(--hcn-text-muted);
}

/* ------------------------------------------------------------ risultati -- */
#hcn-search-modal .hcn-search__results {
	list-style: none;
	margin: 0;
	padding: 4px 8px;
	max-block-size: min(60vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

#hcn-search-modal .hcn-search__results:empty {
	display: none;
}

#hcn-search-modal .hcn-search__item {
	/* Separatore 1px fra i risultati: NESSUN radius qui — il radius curverebbe
	 * il bordo creando dei "box" invece della linea sottile (difetto visto
	 * in verifica nel tema news). L'highlight al passaggio sta sul link
	 * interno, che ha il suo radius. */
	border-block-end: 1px solid var(--hcn-border);
	content-visibility: auto;
	contain-intrinsic-size: auto 65px;
}

#hcn-search-modal .hcn-search__item:last-child {
	border-block-end: none;
}

#hcn-search-modal .hcn-search__link {
	display: grid;
	grid-template-columns: 48px 1fr; /* miniatura + testo (D-081) */
	gap: 12px;
	align-items: center;
	padding: 8px 12px;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
}

/* Miniatura 48px (D-081): riquadro fisso; se non c'è copertina, glifo
	 * documento. */
#hcn-search-modal .hcn-search__thumb {
	inline-size: 48px;
	block-size: 48px;
	border-radius: 8px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--hcn-text) 8%, transparent);
	display: grid;
	place-items: center;
	color: var(--hcn-text-muted);
}

#hcn-search-modal .hcn-search__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

#hcn-search-modal .hcn-search__testo {
	display: grid;
	gap: 2px;
	min-inline-size: 0; /* il titolo lungo ellissa invece di sbordare */
}

#hcn-search-modal .hcn-search__item.is-active .hcn-search__link,
#hcn-search-modal .hcn-search__item:hover .hcn-search__link {
	background: color-mix(in srgb, var(--hcn-primary) 12%, transparent);
}

#hcn-search-modal .hcn-search__titolo {
	font-family: var(--hcn-font-display);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--hcn-text);
	display: -webkit-box;
	-webkit-line-clamp: 2; /* max 2 righe: liste lunghe restano scansionabili */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#hcn-search-modal .hcn-search__titolo mark {
	background: none;
	color: var(--hcn-primary);
	font-weight: 700;
}

#hcn-search-modal .hcn-search__sub {
	font-family: var(--hcn-font-display);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--hcn-text-muted);
}

/* ---------------------------------------------------------------- footer - */
#hcn-search-modal .hcn-search__footer {
	display: flex;
	gap: 16px;
	padding: 8px 16px;
	border-block-start: 1px solid var(--hcn-border);
	font-family: var(--hcn-font-display);
	font-size: 0.75rem;
	color: var(--hcn-text-muted);
}

#hcn-search-modal .hcn-search__footer kbd {
	font-family: var(--hcn-font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", monospace);
	font-size: 0.6875rem;
	border: 1px solid var(--hcn-border);
	border-radius: 4px;
	padding: 1px 5px;
	margin-inline-end: 4px;
	background: var(--hcn-surface-header);
}

@media (max-width: 47.99rem) {
	#hcn-search-modal .hcn-search__footer {
		display: none; /* su mobile: niente scorciatoie da tastiera */
	}
}

@media (prefers-reduced-motion: reduce) {
	#hcn-search-modal.hcn-search,
	#hcn-search-modal.hcn-search::backdrop {
		transition: none;
	}
}

/* Toggle (tema + burger): cerchi 44px come i toggle del tema news. */
.hcn-header__toggle {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--hcn-radius-full);
	color: var(--hcn-text);
	background: transparent;
	/* Come il tema news: i toggle tema/burger hanno bordo neutro. */
	border: var(--hcn-border-width) solid var(--hcn-border);
	cursor: pointer;
}

.hcn-header__toggle:hover {
	background: color-mix(in srgb, var(--hcn-primary) 8%, transparent);
}

.hcn-header__toggle:focus-visible {
	outline: 2px solid var(--hcn-primary);
	outline-offset: 2px;
}

.hcn-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Toggle tema: summary-as-button dentro <details> (come details.theme). */
.hcn-theme { position: relative; display: inline-grid; }
.hcn-theme summary { list-style: none; cursor: pointer; }
.hcn-theme summary::-webkit-details-marker { display: none; }

.hcn-theme summary:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

.hcn-theme__panel {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: var(--hcn-z-sticky);
	display: grid;
	gap: 2px;
	min-inline-size: 11rem;
	padding: 0.25rem;
	background-color: var(--hcn-surface-menu);
	border: 1px solid var(--hcn-primary);
	border-radius: var(--hcn-radius-md);
	box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.5);
}

.hcn-theme__opt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	cursor: pointer;
	font-family: var(--hcn-font-display);
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
	color: var(--hcn-text);
}

.hcn-theme__opt:hover { background-color: var(--hcn-band-bg); }

.hcn-theme__ico--moon { display: none; }

[data-theme="dark"] .hcn-theme__ico--sun { display: none; }
[data-theme="dark"] .hcn-theme__ico--moon { display: block; }

/* Tema "Automatico": l'icona segue la preferenza di sistema. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .hcn-theme__ico--sun { display: none; }
	html:not([data-theme]) .hcn-theme__ico--moon { display: block; }
}

/* Menu mobile: pannello popover in top layer, stile dropdown del live. */
.hcn-header__mobile {
	position: fixed;
	inset: 0 0 auto 0;
	margin: 0;
	max-block-size: calc(100svh - 1rem);
	overflow-y: auto;
	padding: 1.5rem 1.5rem 3rem;
	background-color: var(--hcn-surface-menu);
	border: 1px solid var(--hcn-primary);
	border-radius: var(--hcn-radius-md);
	box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.5);
}

.hcn-header__mobile:not(:popover-open) { display: none; }

.hcn-header__mobile::backdrop { background-color: rgb(0 0 0 / 0.4); }

.hcn-header__mobile .wp-block-navigation__submenu-container,
.hcn-header__mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcn-header__mobile a {
	font-family: var(--hcn-font-display);
	color: var(--hcn-text);
	text-decoration: none;
	padding-block: 0.5rem;
	display: block;
	font-weight: 700; /* categorie principali in grassetto nel menu mobile (D-134) */
}

/* --- Menu (desktop + mobile): lista WP standard via [hcn_menu].
   Sulla riga logo la lista è TRASPARENTE (niente pannello grigio diverso
   da #ECECEC — fix 2026-09-27); il grigio #E6E6E6 spetta SOLO ai dropdown,
   come il live. ---------------------------------------------------------- */
.hcn-menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcn-menu li { position: relative; }

.hcn-menu a {
	display: block;
	color: var(--hcn-text);
	text-decoration: none;
	font-family: var(--hcn-font-display);
	font-weight: 300;
	padding-block: 0.5rem;
}

/* Sottomenu a discesa: come nel live (#E6E6E6, bordo arancione 1px,
   radius 8px, ombra 0 0 30px nero 50%). */
.hcn-menu .sub-menu {
	display: none;
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 100%;
	z-index: var(--hcn-z-sticky);
	min-inline-size: 14rem;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--hcn-surface-menu);
	border: 1px solid var(--hcn-primary);
	border-radius: var(--hcn-radius-md);
	box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.5);
}

.hcn-menu .sub-menu a {
	padding: 0.8125rem 1.125rem;
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
	border-block-end: 1px solid rgb(0 0 0 / 0.08);
}

.hcn-menu li:hover > .sub-menu,
.hcn-menu li:focus-within > .sub-menu {
	display: block;
}

.hcn-menu a:hover,
.hcn-menu .current-menu-item > a {
	color: var(--hcn-link);
}

/* Da telefono il menu vive nel popover mobile (stile dropdown del live):
   categorie principali in grassetto, sotto-voci light + muted (D-134). */
.hcn-menu--mobile > li > a { font-weight: 700; }

.hcn-menu--mobile .sub-menu {
	display: block;
	position: static;
	border: 0;
	box-shadow: none;
	background: transparent;
	padding-inline-start: 1.5rem;
}

.hcn-menu--mobile .sub-menu a {
	font-weight: 300;
	color: var(--hcn-text-muted);
	border-block-end: 0;
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
}

/* Nav desktop: orizzontale da 960px, Poppins 300 18px come il live. */
/* v0.4.45: min-width:0 — da flex item il nav non poteva restringersi
 * (min-width:auto): il menu nowrap sforava a 1280 (scrollW 1407) spingendo
 * FUORI dal viewport carrello/account/tema; le ellissi previste dal design
 * non scattavano mai. Con 0 il nav cede e le ellissi lavorano; sopra ~1440px
 * il menu sta intero senza tagli. NIENTE overflow:hidden sul nav: taglierebbe i dropdown. */
.hcn-header__nav { display: none; min-width: 0; }

@media (min-width: 60rem) {
	.hcn-header__nav { display: block; }

	.hcn-header__nav .hcn-menu {
		flex-direction: row;
		gap: 0.5rem;
	}

	/* Le voci stanno su UNA riga (fix 2026-09-27): niente wrap; se un'etichetta
	 * è lunga (es. «Ricariche & Abbonamenti») si tronca con ellissi invece
	 * di rientrare in una seconda riga. */
	/* v0.4.73 FIX «VOCI TAGLIATE IN LIVE» (owner): col catalogo reale le
	 * categorie padre diventano 8 con etichette lunghe (Carte Collezionabili,
	 * Ricariche & Abbonamenti, Action Figure…): su una riga sola il nav si
	 * trova stretto e le ELLISSI tagliano le voci a 960–1440px (il demo locale
	 * aveva poche categorie e il difetto non emergeva). Fix: il WRAP fra le
	 * VOCI è permesso (righe multiple, etichette sempre INTERE, riga rigida
	 * allineata in alto); l'ellipsis resta solo come guardia estrema sul caso
	 * «etichetta più larga del viewport». Allineamento logico (block-start):
	 * con 2 righe la prima resta sulla linea del brand. */
	.hcn-header__nav .hcn-menu {
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: 0.125rem;
	}

	.hcn-header__nav .hcn-menu > li {
		white-space: nowrap;
		min-width: 0;
	}

	.hcn-header__nav .hcn-menu a {
		padding: 5px 6px;
		font-size: 1.0625rem; /* 17px: sotto i 18px live per far stare le voci su una riga */
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* Dropdown con campo per «Ricariche & Abbonamenti» (16rem: media fra le misure live 14–18rem). */
	.hcn-header__nav .hcn-menu .sub-menu {
		min-inline-size: 16rem;
	}

	/* Voce attiva: sottolineatura arancione come il pointer del live. */
	.hcn-header__nav .hcn-menu .current-menu-item > a {
		box-shadow: inset 0 -2px 0 0 var(--hcn-primary);
	}

	.hcn-header__burger { display: none; }
}

/* Da telefono la topbar arancione non compare (D-211, solo CSS): i percorsi
   restano nel menu burger e nel footer. La cornice resta la riga logo. */
/* v0.4.55 FIX OVERFLOW MOBILE (audit 390px: scrollW 381 su 374, colpa di
   brand+4 toggle): brand marinabile con ellissi (min-width:0 + nowrap),
   gap 0.375rem, toggle immutati 44px (WCAG 2.5.8). Identico al pattern
   nav v0.4.45: min-width:auto non restringe MAI un flex item. */
@media (max-width: 30rem) {
	.hcn-topbar { display: none; }

	.hcn-header__inner {
		margin-block-start: 10px;
		margin-inline: 6px;
		border-radius: 10px;
		gap: 0.375rem;
	}

	.hcn-header__brand {
		min-width: 0;
	}

	.hcn-header__brand .wp-block-site-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 1.25rem;
	}

	.hcn-header__actions {
		flex-shrink: 0;
		gap: 0.375rem;
	}
}

/* ============================================================================
   FOOTER — allineato al footer recente del tema news (footer.php, restyling
   D-240/D-240b + D-243 + D-245 + D-246, live dal 01/10/2026): griglia 3
   colonne ≥60rem 1.4fr 1fr 1.2fr (brand+social / «Informazioni» / newsletter
   a destra), riga copyright DENTRO la fascia e CENTRATA (solo ©+credito).
   Contrasti misurati lato news (metodo D-237c): testo n900 su #d8d8d8
   13.19:1, muted 4.89:1, CTA on-primary 6.07:1 light / 8.35:1 dark.
   Traduzione token: --space-* e --text-* news → valori literal rem;
   on-primary → var(--hcn-neutral-950) (quasi-nero su #FA5403 in ENTRAMBI i
   temi, come --color-on-primary news); panel/input con light-dark() literal
   come il tema news.
   ========================================================================== */

.hcn-footer {
	/* Rosso messaggi form col contrasto AA SUI FONDI DEL FOOTER (news:
	   --footer-danger — il --hcn-sale farebbe < 4.5:1 su #d8d8d8). */
	--hcn-footer-danger: light-dark(oklch(0.5 0.21 29), oklch(0.68 0.19 29));

	margin-block-start: 2rem;
	background-color: var(--hcn-footer-bg);
	/* D-240b: ritmo verticale compatto («il footer prende troppo spazio»). */
	padding-block: 1rem 1.5rem;
	font-size: 0.9375rem;
	color: var(--hcn-text);
}

.hcn-footer .hcn-footer__grid {
	/* v0.4.26: contenuto footer al container 89% come il live news
	 * (footer.footer > .container.footer__grid), non full-width. */
	width: min(100% - 2 * var(--hcn-gutter, 10px), var(--hcn-container, 71.25rem));
	margin-inline: auto;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
	.hcn-footer .hcn-footer__grid {
		/* D-240: colonna descrizione più larga; la NEWSLETTER occupa la
		   colonna destra (richiesta owner «a dx»). */
		grid-template-columns: 1.4fr 1fr 1.2fr;
		gap: 2rem;
	}
}

.hcn-footer__logo { display: inline-block; margin-block-end: 0.5rem; }

.hcn-footer__logo .wp-block-site-title {
	margin: 0;
	font-weight: 600;
	font-size: 1.5rem;
}

/* Se un giorno il brand userà un logo immagine (come il footer news). */
.hcn-footer__logo img {
	inline-size: min(15rem, 100%);
	block-size: auto;
}

.hcn-footer__desc {
	margin: 0;
	max-inline-size: 46ch;
	color: var(--hcn-text);
	line-height: 1.75;
}

/* v0.4.70: la seconda riga del brand (claim) è stata rimossa nel markup
   (duplicava la descrizione): regola rimossa con essa. */

/* Social: target touch 44px (icona 18px + padding), accent brand al
   passaggio — il brand come colore di STATO resta ≥3:1 (WCAG 1.4.11). */
.hcn-footer__social {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}

.hcn-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--hcn-radius-full);
	color: var(--hcn-text);
	transition: color var(--hcn-duration-fast) var(--hcn-ease-out),
		background-color var(--hcn-duration-fast) var(--hcn-ease-out);
}

.hcn-footer__social a:hover {
	color: var(--hcn-primary-hover);
	background-color: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.08));
}

.hcn-footer__social a:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

/* Intestazioni di gruppo: piccole, spaziate, muted (NN/g footers, D-240):
   guidano la scansione senza competere col logo. */
.hcn-footer__heading {
	margin: 0 0 0.5rem;
	font-family: var(--hcn-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hcn-text-muted);
}

/* Liste «Informazioni» — v0.4.69 (owner): la vecchia lista verticale di
   wp:page-list (10 righe) rendeva il footer troppo alto. Ora DUE colonne
   compatte curate (Negozio / Legale) con micro-heading e righe strette:
   footer decisamente più basso (best practice UX 2026: link di footer
   essenziali, scan rapidi, niente pagine di servizio inutili). */
.hcn-footer__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
}

.hcn-footer__links-title {
	margin: 0 0 0.15rem;
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hcn-text-muted);
}

.hcn-footer__links ul {
	display: grid;
	list-style: none;
	padding: 0;
	margin: 0;
}

.hcn-footer__links li,
.hcn-footer__extra {
	margin: 0;
}

.hcn-footer__extra {
	display: grid;
	list-style: none;
	padding: 0;
	margin: 0;
}

.hcn-footer__links a,
.hcn-footer button.hcn-footer__preferenze {
	display: inline-block;
	padding: 0;
	padding-block: 0.3rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--hcn-text);
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--hcn-duration-fast) var(--hcn-ease-out);
}

/* D-240b: su touch si allargano le righe (target ~30px+): la compattezza
   vale su desktop/mouse, su mobile resta il comfort di tocco. */
@media (pointer: coarse) {
	.hcn-footer__links a,
	.hcn-footer button.hcn-footer__preferenze {
		padding-block: 0.5rem;
	}
}

.hcn-footer__links a:hover,
.hcn-footer button.hcn-footer__preferenze:hover {
	color: var(--hcn-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hcn-footer__links a:focus-visible,
.hcn-footer button.hcn-footer__preferenze:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Newsletter (colonna destra, D-240): pannello interno che stacca il blocco
   dalla fascia grigia senza colori fuori token. */
.hcn-footer__newsletter {
	padding: 1rem;
	border: 1px solid light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
	border-radius: 1.25rem;
	background-color: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.04));
}

.hcn-footer__newsletter-desc {
	margin: 0 0 1rem;
	color: var(--hcn-text);
	line-height: 1.75;
}

.hcn-footer__form {
	display: grid;
	gap: 0.75rem;
}

.hcn-footer__riga {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hcn-footer__input {
	flex: 1 1 12rem;
	min-inline-size: 0;
	padding: 0.65rem 0.75rem;
	font: inherit;
	color: var(--hcn-text);
	background-color: light-dark(rgb(255 255 255 / 0.85), rgb(0 0 0 / 0.25));
	border: 1px solid light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25));
	border-radius: 0.375rem;
}

.hcn-footer__input::placeholder {
	color: var(--hcn-text-muted);
}

.hcn-footer__input:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

/* CTA: on-primary (quasi-nero) su primary = 6.07:1 light / 8.35:1 dark. */
.hcn-footer__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.1rem;
	font-family: var(--hcn-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hcn-neutral-950);
	background-color: var(--hcn-primary);
	border: 0;
	border-radius: 0.375rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hcn-duration-fast) var(--hcn-ease-out);
}

.hcn-footer__submit:hover {
	background-color: var(--hcn-primary-hover);
}

.hcn-footer__submit:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

.hcn-footer__consenso {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--hcn-text);
}

.hcn-footer__consenso input {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	margin-block-start: 0.15rem;
	accent-color: var(--hcn-primary);
}

.hcn-footer__consenso a {
	color: var(--hcn-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hcn-footer__consenso a:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Messaggi JS (validazione client): stati marcati con data-stato. */
.hcn-footer__form-msg {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.hcn-footer__form-msg[data-stato='errore'] {
	color: var(--hcn-footer-danger);
	font-weight: 600;
}

.hcn-footer__form-msg[data-stato='ok'] {
	color: var(--hcn-text);
	font-weight: 600;
}

/* D-243: niente SECONDA banda — la riga copyright sta nella prima fascia,
   subito dopo le colonne: footer più compatto.
   D-245 (richiesta owner): solo ©+credito, riga CENTRATA. */
.hcn-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin-block-start: 1rem;
	color: var(--hcn-text-muted);
}

.hcn-footer__copyright {
	margin: 0;
}

/* D-245: «Developed by Asura» resta sulla riga del ©, che ora è centrata. */
.hcn-footer__copyright strong {
	font-weight: 600;
	color: var(--hcn-text);
}

/* ============================================================================
   SEZIONI HOME — stile hcn-theme: fascia #E7E7E7 (band), titolo + «Vedi
   tutto» sulla stessa riga, card bianche radius 9px (D-011/D-013/D-024).
   ========================================================================== */

.hcn-band {
	background-color: var(--hcn-band-bg);
}

/* Riga titolo + «Vedi tutto»: stessa base, link allineato a destra.
   v0.4.28: 1:1 con .section__title-row del news HOME (misurato: gap 16px,
   view-all 15px text-sm) — le barre hero 8px/13px sono una variante del
   news non usata nello store. */
.hcn-section-head {
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.5rem;
}

.hcn-section-title {
	margin: 0;
	font-family: var(--hcn-font-display);
	font-weight: 600;
	color: var(--hcn-text);
}

/* ===== «Perché scegliere HCN - Store» (v0.4.69, owner: «più professionale
   a livello di css»): 3 card con icona su tile brand, bordo token, gap
   uniforme, testo muted; dark mode a token (nessun colore fisso). ===== */
.hcn-why .hcn-why__grid {
	gap: 1.25rem;
}

.hcn-why__card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem;
	border: 1px solid var(--hcn-border);
	border-radius: 12px;
	background-color: var(--hcn-card-bg);
	transition: border-color var(--hcn-duration-fast, 120ms) var(--hcn-ease-out, ease);
}

.hcn-why__card:hover {
	border-color: var(--hcn-primary);
}

.hcn-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.4rem;
	border-radius: 10px;
	background-color: var(--hcn-primary);
	color: var(--hcn-on-brand, #fff);
}

.hcn-why__card .hcn-why__title {
	margin: 0;
	font-family: var(--hcn-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hcn-text);
}

.hcn-why__card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--hcn-text-muted);
}

/* v0.4.28: 1:1 con .section__view-all del news HOME (misurato: text-sm
   15px, weight 600, --color-link = arancio pieno #FA5403, NON il bruno
   --hcn-link), freccia → aria-hidden nel markup, hover underline. */
.hcn-view-all {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--hcn-font-display);
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
	font-weight: 600;
	color: var(--hcn-primary); /* --color-link del news = arancio pieno */
}

.hcn-view-all a {
	color: inherit;
	text-decoration: none;
}

.hcn-view-all a {
	color: inherit;
	text-decoration: none;
	transition: color var(--hcn-duration-fast, 120ms) var(--hcn-ease-out, ease);
}

.hcn-view-all a:hover,
.hcn-view-all a:focus-visible {
	text-decoration: underline;
}

.hcn-view-all a:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

/* Card: bianche, radius 9px del live, bordo 1px nero (--border-card). */
.hcn-card {
	background-color: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: var(--hcn-radius-card);
}

.hcn-card h3 { margin-block-start: 0; }

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

.hcn-card a:hover,
.hcn-card a:focus-visible {
	color: var(--hcn-link);
	text-decoration: underline;
}

.hcn-card p { margin-block-end: 0; }

/* ============================================================================
   PAGINA PRODOTTO — Baymard 2026 §3 (KB UX): breadcrumbs leggibili, galleria
   con raggi del live, box fiducia (spedizione/resi) vicino alla CTA.
   ========================================================================== */

.hcn-product .wp-block-woocommerce-breadcrumbs {
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
	color: var(--hcn-text-muted);
	margin-block-end: 1.5rem;
}

.hcn-product .wp-block-woocommerce-breadcrumbs a {
	color: var(--hcn-link);
	text-decoration: none;
}

.hcn-product .wp-block-woocommerce-breadcrumbs a:hover {
	text-decoration: underline;
}

.hcn-product .wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--hcn-radius-card);
}

/* — Fedeltà al template Elementor di produzione (dump completo in KB) — */

/* Titolo a «banner»: CSS custom del live replicato 1:1 (custom_css del
   widget titolo nel JSON): sfondo arancio full-width, badge flottante
   «Prodotto Ufficiale», bordo sx 4px, radius 0 15px 0 0, ombra arancio,
   linea decorativa in fondo. */
.hcn-title-chip {
	position: relative;
	display: inline-block;
	width: 100%;
	background-color: var(--hcn-primary);
	padding: 5px 10px 10px;
	border-left: 4px solid #ff8c00;
	border-radius: 0 15px 0 0;
	box-shadow: 0 4px 15px rgb(250 84 3 / 0.2);
	margin-block-end: 0;
}

/* Etichetta «Prodotto Ufficiale» (live: selector::before). */
.hcn-title-chip::before {
	content: "Prodotto Ufficiale";
	position: absolute;
	top: -10px;
	inset-inline-start: 10px;
	background: #EBEBEB;
	color: var(--hcn-primary);
	font-family: var(--hcn-font-display);
	font-size: 10px;
	font-weight: 600;
	padding: 1px 10px;
	border-radius: 3px;
	letter-spacing: 1px;
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

/* Linea decorativa in fondo alla barra (live: selector::after). */
.hcn-title-chip::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 3px;
	background: rgb(0 0 0 / 0.1);
}

/* Testo principale (romaji): bianco, Poppins 18px 500, ls 0.5 (live). */
.hcn-title-chip h1 {
	margin: 0;
	color: #fff;
	font-family: var(--hcn-font-display);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.3;
}

/* Titolo italiano racchiuso in .titolo-ita (se presente nel titolo del
   prodotto, come sul live): bianco trasparente, 13px, sotto al romaji.
   display:block (non inline-block): dentro il <p> wpautop reso
   «display:contents» l'inline-block erediterebbe lo strut della riga del
   paragrafo (line-height body 27.2px per uno span da 16px = barra gonfia). */
.hcn-title-chip .titolo-ita {
	color: rgb(255 255 255 / 0.85);
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.5px;
	display: block;
	margin-block-start: 4px;
	line-height: 1.2;
}

.hcn-title-chip .titolo-ita:empty {
	display: none;
	margin: 0;
	padding: 0;
}

/* wpautop avvolge in <p> l'output dello shortcode [hcn_titolo_ita] (v0.4.13:
   la rimozione del filtro NON è efficace sui block template) e il margine
   del paragrafo (19.2px) spingeva il titolo italiano molto sotto al romaji.
   Stessa rete della riga acquisto: il <p> diventa trasparente al flusso e
   lo span torna ad avere SOLO il suo margin-top 4px del live. */
.hcn-title-chip p {
	margin: 0;
	display: contents;
}

.hcn-product .wp-block-woocommerce-breadcrumbs {
	margin-block-start: 10px;
	font-family: var(--hcn-font-display);
	font-size: 0.875rem;
	font-weight: 500;
}

/* Prezzi (live: base Poppins 500 nero; prezzo promo rosso 700 30px). */
.hcn-product .wc-block-components-product-price {
	font-family: var(--hcn-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	color: #000;
	margin-block-start: 10px;
}

.hcn-product .wc-block-components-product-price ins {
	color: var(--hcn-sale); /* v0.4.23: token sale al posto del #FF0000 puro */
	font-weight: 700;
	font-size: 1.875rem;
	text-decoration: none;
}

.hcn-product .wc-block-components-product-price del {
	color: var(--hcn-text-muted);
	font-weight: 400;
	font-size: 1.125rem;
}

/* Stock (live: rosso, Poppins 15px, tirato su verso il prezzo). */
.hcn-product .wc-block-components-product-stock-indicator {
	margin-block-start: -10px;
	font-family: var(--hcn-font-display);
	font-size: 0.9375rem;
}

/* Descrizione breve su banda grigia #EEEEEE (live). */
.hcn-summary-band {
	background-color: #EEEEEE;
	padding: 8px 12px;
	margin-block: 6px 0;
}

.hcn-summary-band p {
	margin: 0;
	font-family: var(--hcn-font-display);
	font-size: 0.9375rem;
	font-weight: 400;
}

/* Riga acquisto (live: titolo Poppins 300 italic 22px + azioni affiancate). */
.hcn-buy-row {
	align-items: center;
	gap: 1rem;
	margin-block-start: 0.75rem;
}

/* Altezza UNIFORME dei bottoni (fix v0.4.14 da screenshot: «Acquista Ora»
   133px vs CTA 101px — la CTA veniva squeezata e il testo andava a capo,
   il quick-buy si stirava con align stretch). Altezza fissa 44px per
   entrambi, testo su una riga, centramento della riga. */
.hcn-buy-actions {
	align-items: center;
}

.hcn-buy-actions .single_add_to_cart_button {
	white-space: nowrap;
	height: 44px;
	min-height: 44px;
	padding-block: 0;
	padding-inline: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hcn-buy-actions #hikaru-quick-buy-btn.hikaru-btn-custom {
	height: 44px !important;
	min-height: 44px;
	align-self: center;
}

.hcn-buy-title {
	margin: 0;
	font-family: var(--hcn-font-display);
	font-size: 1.375rem;
	font-weight: 300;
	font-style: normal; /* corsivo rimosso (richiesta owner v0.4.23) */
	color: var(--hcn-text);
}

.hcn-buy-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.hcn-buy-actions form.cart {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* Il margin-bottom Woo (32px) sul form gonfia il wrapper a 78px e sposta
   il centro della riga: vince su .wp-block-add-to-cart-form form.cart
   (misurato nel browser, v0.4.14). */
.hcn-buy-actions .wp-block-add-to-cart-form form.cart {
	margin: 0 !important;
}

/* Il wrapper del blocco add-to-cart eredita margini Woo (32px sotto il
   form): il wrapper diventa 78px e il centro della riga disallinea il
   bottone accanto. Flex + margin 0 → wrapper = altezza form. */
.hcn-buy-actions .wp-block-add-to-cart-form {
	display: flex;
	align-items: center;
}

.hcn-buy-actions .quantity input {
	border-radius: 10px;
	border: var(--hcn-border-width) solid var(--hcn-border);
	height: 44px;
}

.hcn-buy-actions .single_add_to_cart_button {
	background-color: var(--hcn-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: var(--hcn-font-display);
	font-size: 1rem;
	font-weight: 500;
	padding: 12px 20px;
	min-height: 44px;
	cursor: pointer;
}

.hcn-buy-actions .single_add_to_cart_button:hover {
	background-color: var(--hcn-primary-hover);
}

/* «Acquista Ora»: grigio scuro 40% come il live (css-pulsante.css), qui
   imparentato nella stessa riga. */
.hcn-buy-actions #hikaru-quick-buy-btn.hikaru-btn-custom {
	width: auto !important;
	margin: 0 !important;
	padding: 0 18px !important;
	font-size: 1rem !important;
	border-radius: 10px !important;
}

/* Allineamento verticale perfetto nella riga di acquisto (fix 0.4.12):
   il CSS del plugin prevedeva width 40% + margine alto + lift al hover,
   nati per il layout Elementor; qui il bottone affianca la CTA nativa
   con ALTEZZA UGUALE e senza spostamenti. */
.hcn-buy-actions {
	align-items: stretch;
}

.hcn-buy-actions .hcn-stock-inline {
	align-self: center; /* la pill non si distende con la riga */
}

/* Rete di sicurezza: se un giorno un <p> spurio dovesse tornare attorno
   agli output shortcode nella riga, non deve creare un flex item con
   margini (fix disallineamento bottoni, screenshot 27/09/2026). */
.hcn-buy-actions p {
	margin: 0;
	display: contents;
}

/* MOBILE/TABLET (v0.4.55 audit 390px + v0.4.60/61 audit 1024px): la riga
   d'acquisto sbordava di 131px a 390 e di 58px a 1024 (la colonna prodotto
   60% è stretta finché il container non supera ~1035px, cioè viewport ~1056:
   sotto, titolo+CTA+quick-buy+wishlist nowrap non entrano). A ≤47.99rem riga
   a COLONNE: titolo sopra, bottoni sotto wrappabili (CTA piena larghezza).
   A 48–65.99rem la riga resta ROW ma WRAPPABILE con flessibilità sulle
   larghezze (NB: 63.99rem erano 1023.84px e lasciavano fuori proprio 1024).
   Oltre 66rem la riga a piano com'è da live (colonna larga, audit 1280 OK).
   Le altezze 44px e i nowrap SINGOLI bottoni restano ovunque (v0.4.13/14). */
@media (max-width: 47.99rem) {
	.hcn-buy-row {
		flex-direction: column;
		align-items: stretch;
	}

	.hcn-buy-actions {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.hcn-buy-actions .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.hcn-buy-actions #hikaru-quick-buy-btn.hikaru-btn-custom {
		flex: 1 1 40%;
		min-width: 0;
	}

	.hcn-buy-actions .hcn-wl-btn--single {
		flex: 0 0 44px;
	}
}

@media (min-width: 48rem) and (max-width: 65.99rem) {
	.hcn-buy-actions {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.hcn-buy-actions .single_add_to_cart_button {
		flex: 1 1 180px;
	}

	.hcn-buy-actions #hikaru-quick-buy-btn.hikaru-btn-custom {
		flex: 1 1 160px;
		min-width: 0;
	}
}

.hcn-buy-actions #hikaru-quick-buy-btn.hikaru-btn-custom {
	min-width: 9rem;
	min-height: 44px;
	height: auto;
	box-shadow: none;
	transform: none !important;
}

.hcn-buy-actions #hikaru-quick-buy-btn.hikaru-btn-custom:hover {
	transform: none !important; /* il lift rompeva l'allineamento */
	background-color: #1a1a1a !important;
}

/* --- Galleria nativa: zoom + miniatures (v0.4.12, Baymard §3.1) --------- */

/* Cursore zoom sull'immagine principale. */
.hcn-product .woocommerce-product-gallery__image {
	cursor: zoom-in;
}

/* Trigger lightbox (lente Woo): discreto, angolo alto a destra. */
.hcn-product .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 9;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	border: 1px solid var(--hcn-border);
	text-indent: -9999px;
	overflow: hidden;
}

.hcn-product .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

/* Carosello di miniature sotto l'immagine principale: compare solo quando
   il prodotto ha più foto (galleria slider Woo nativa). */
.hcn-product ol.flex-control-thumbs {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	overflow-x: auto;
}

.hcn-product ol.flex-control-thumbs li {
	flex: 0 0 72px;
	inline-size: 72px;
}

.hcn-product ol.flex-control-thumbs img {
	inline-size: 100%;
	block-size: 72px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--hcn-duration-fast) var(--hcn-ease-out), border-color var(--hcn-duration-fast) var(--hcn-ease-out);
}

.hcn-product ol.flex-control-thumbs img:hover {
	opacity: 1;
}

.hcn-product ol.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--hcn-primary);
}

/* Benefici con icone (live: FA blu #036FFA, divisori 2px, gap 15px). */
.hcn-perks {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.hcn-perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	font-family: var(--hcn-font-display);
	font-size: 1rem;
	font-weight: 300;
}

.hcn-perks li + li {
	border-top: 2px solid rgb(0 0 0 / 0.08);
}

.hcn-perks svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: #036FFA;
}

/* Dettagli attivazione (campo _activationDetails, presente solo per i
   prodotti che lo compilano). */
.hcn-activation {
	margin-block-start: 10px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Titoli di sezione della scheda (live: Poppins 20px 600, bordo 2px arancio). */
.hcn-product .hcn-section-title {
	font-size: 1.25rem;
	font-weight: 600;
	padding-block-end: 6px;
	border-block-end: 2px solid var(--hcn-primary);
	margin-block: 2rem 1.25rem;
}

/* Tabella attributi (live: righe compatte, testo Poppins). */
.hcn-attrs {
	width: 100%;
	border-collapse: collapse;
}

.hcn-attrs th,
.hcn-attrs td {
	text-align: left;
	padding: 8px 10px;
	border-block-end: 1px solid rgb(0 0 0 / 0.08);
	font-family: var(--hcn-font-display);
	font-size: 0.9375rem;
}

.hcn-attrs th {
	width: 30%;
	color: var(--hcn-text-muted);
	font-weight: 500;
}

/* Ritmo colonna acquisto (KB UX §3): prezzo prominente, respiro prima della
   CTA e fra i box; niente muri di testo. */
.hcn-product .wp-block-woocommerce-product-price {
	margin-block-end: 0.75rem;
}

.hcn-product .wp-block-post-excerpt {
	margin-block: 1.25rem 1.75rem;
}

.hcn-product .hcn-buy-box {
	margin-block: 0 2rem;
}

/* Box fiducia sotto la CTA: senza costi nascosti e diritti chiari (KB §8.4). */
.hcn-trust {
	display: grid;
	gap: 0.375rem;
	background-color: var(--hcn-band-bg);
	border-radius: var(--hcn-radius-card);
	padding: 1rem 1.25rem;
	margin-block: 1.5rem;
}

.hcn-trust p {
	margin: 0;
}

.hcn-trust p::before {
	content: "✓";
	color: var(--hcn-primary);
	font-weight: 700;
	margin-inline-end: 0.5rem;
}

/* Box «Riepilogo acquisto» (porting dal template Elementor di produzione):
   card bianca con CTA, punti fiducia e pagamenti — tutto vicino alla CTA
   (Baymard §3.3/§3.4). */
.hcn-buy-box {
	background-color: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: var(--hcn-radius-card);
	padding: 1.25rem 1.5rem 1.5rem;
	margin-block: 1.5rem;
}

.hcn-buy-box__title {
	margin: 0 0 1rem;
}

.hcn-buy-box .hcn-buy-points {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.hcn-buy-box .hcn-buy-points li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
}

.hcn-buy-box .hcn-buy-points li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--hcn-primary);
	font-weight: 700;
}

.hcn-pay {
	margin: 1rem 0 0;
	color: var(--hcn-text-muted);
}

/* «Scopri le categorie»: chip/pill come le tag del live (radius 15px). */
.hcn-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.hcn-cats a {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--hcn-primary);
	border-radius: 15px;
	color: var(--hcn-text);
	text-decoration: none;
	font-family: var(--hcn-font-display);
	font-size: var(--wp--preset--font-size--text-sm, 0.9375rem);
	font-weight: 500;
	transition: background-color var(--hcn-duration-fast) var(--hcn-ease-out);
}

.hcn-cats a:hover,
.hcn-cats a:focus-visible {
	background: color-mix(in srgb, var(--hcn-primary) 10%, transparent);
	color: var(--hcn-link);
}

/* «Dal magazine»: card VERTICALI dentro il carosello hikaru (v0.4.8):
   il layout (4/3/2 per vista, altezze, hover lift) è definito negli
   override in coda a assets/css/hikaru-carosello.css — qui solo la
   tipografia interna della card. Output sempre monolinea (invariante). */
.hcn-magazine-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--hcn-text);
	text-decoration: none;
}

.hcn-magazine-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
	padding: 0.625rem 0.75rem 0.75rem;
}

.hcn-magazine-thumb {
	width: 100%;
	height: 128px;
	object-fit: cover;
	display: block;
	border-radius: 11px 11px 0 0;
}

.hcn-magazine-date {
	display: block;
	font-size: 0.6875rem;
	color: var(--hcn-text-muted);
}

.hcn-magazine-title {
	font-family: var(--hcn-font-display);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hcn-magazine-cta {
	margin-block-start: auto;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--hcn-link);
}

/* ============================================================================
   CONFORMITÀ + UX 2026 (v0.4.11) — data-driven: ogni blocco compare solo
   quando i dati esistono. Fonti: KB Conformità UE (P0) + Baymard §3.
   ========================================================================== */

/* Larghezza contenuti = token container del tema news (1140px = 89% a
   1280px, richiesta owner v0.4.23): Woo limita account/cart/checkout a
   1000px e i template usavano alignwide (1440px) — entrambi fuori token. */
.woocommerce-account main .woocommerce,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce {
	max-width: var(--hcn-container, 71.25rem);
}

/* Account nell'header (Baymard §3.2, v0.4.23): stessa forma del carrello. */
.hcn-account {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--hcn-radius-full);
	border: var(--hcn-border-width) solid var(--hcn-border);
	color: var(--hcn-text);
}

.hcn-account svg {
	width: 20px;
	height: 20px;
}

.hcn-account:hover {
	background: color-mix(in srgb, var(--hcn-primary) 8%, transparent);
	color: var(--hcn-primary);
}

/* Carrello nell'header (Baymard §3.10): toggle come gli altri + badge qty. */
.hcn-cart {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--hcn-radius-full);
	border: var(--hcn-border-width) solid var(--hcn-border);
	color: var(--hcn-text);
}

.hcn-cart svg {
	width: 20px;
	height: 20px;
}

.hcn-cart:hover {
	background: color-mix(in srgb, var(--hcn-primary) 8%, transparent);
}

.hcn-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-inline-size: 18px;
	block-size: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--hcn-primary);
	color: #fff;
	font-family: var(--hcn-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	display: grid;
	place-items: center;
}

.hcn-cart-count.is-empty { display: none; }

/* Preordine (art. 61): avviso con bordo arancio. */
.hcn-preorder-note {
	margin: 0.75rem 0 0;
	padding: 0.625rem 0.875rem;
	border-inline-start: 4px solid var(--hcn-primary);
	background: color-mix(in srgb, var(--hcn-primary) 6%, transparent);
	font-size: 0.875rem;
}

/* Omnibus: didascalia discreta sotto il prezzo. */
.hcn-omnibus-note {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--hcn-text-muted);
}

/* Trust: recesso + garanzia sotto la riga acquisto (Baymard §3.4). */
.hcn-trust-note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--hcn-text-muted);
}

/* Stock inline alla CTA (Baymard §3.3). */
.hcn-stock-inline {
	display: inline-flex;
	align-items: center;
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 2px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.hcn-stock-in {
	background: color-mix(in srgb, #1a7f37 12%, transparent);
	color: #1a7f37;
}

.hcn-stock-back {
	background: color-mix(in srgb, var(--hcn-primary) 12%, transparent);
	color: var(--hcn-link);
}

.hcn-stock-out {
	background: color-mix(in srgb, #FF0000 10%, transparent);
	color: #FF0000;
}

/* Recensioni: media + distribuzione (Baymard §3.6). */
.hcn-reviews {
	margin-block-start: 1.5rem;
	border: 1px solid var(--hcn-border-card);
	border-radius: var(--hcn-radius-card);
	padding: 1rem 1.25rem;
	font-family: var(--hcn-font-display);
}

.hcn-rev-head {
	margin-block-end: 0.75rem;
	font-size: 0.9375rem;
}

.hcn-rev-row {
	display: grid;
	grid-template-columns: 1.25rem 1fr 2rem;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.8125rem;
	padding-block: 2px;
}

.hcn-rev-star { text-align: center; color: var(--hcn-text-muted); }

.hcn-rev-bar {
	display: block;
	block-size: 8px;
	border-radius: 4px;
	background: color-mix(in srgb, currentColor 10%, transparent);
	overflow: hidden;
}

.hcn-rev-bar > span {
	display: block;
	block-size: 100%;
	background: var(--hcn-primary);
	border-radius: 4px;
}

.hcn-rev-qty { text-align: right; color: var(--hcn-text-muted); }

/* Badge «In offerta!» (v0.4.23): il cerchio oliva di Woo (highlight #958e09)
   è fuori brand — chip rosso squadrato coerente con la semantica del sito
   (rosso = prezzo scontato, stesso token del prezzo ins) e col design dei
   badge product_cat (radius 4px, Poppins bold, uppercase). */
.woocommerce span.onsale {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	inline-size: auto;
	block-size: auto;
	min-inline-size: 0;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 4px;
	background: var(--hcn-sale);
	color: #fff;
	font-family: var(--hcn-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Prezzo scontato in scheda: il rosso «sale» è semantica del sito, non
   il rosso puro Woo (che in dark mode resta #a00 illeggibile). */
.woocommerce .price ins,
.woocommerce div.product .price ins {
	color: var(--hcn-sale);
	text-decoration: none;
}

.woocommerce .price del {
	color: var(--hcn-text-muted);
	font-weight: 400;
}

/* ==========================================================================
   TESSERA GOLD (v0.4.25): landing premium + banner home. Oro = #F6CE2B
   (accent del tema news) su superfici scure contrastate; dark mode a token.
   ========================================================================== */
.hcn-gold-hero {
	background:
		radial-gradient(1200px 500px at 75% -10%, rgb(246 206 43 / 0.18), transparent 60%),
		var(--hcn-neutral-950);
	color: var(--hcn-neutral-100);
	padding-block: var(--wp--preset--spacing--90, 6rem);
	margin-block-end: var(--wp--preset--spacing--70, 3rem);
}

.hcn-gold-hero__inner { text-align: center; }

.hcn-gold-eyebrow {
	display: inline-block;
	padding: 4px 14px;
	border: 1px solid rgb(246 206 43 / 0.55);
	border-radius: 999px;
	color: #F6CE2B;
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.hcn-gold-title {
	font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
	font-weight: 600; /* v0.4.26: weight heading del tema (era 700) */
	color: #F6CE2B;
	margin: 0 0 1rem;
}

.hcn-gold-lead {
	font-size: var(--wp--preset--font-size--text-lg, 1.25rem);
	color: var(--hcn-neutral-100);
	margin: 0 auto 1.75rem;
	max-width: 44rem;
}

.hcn-gold-cta-row {
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.hcn-gold-cta-row p { margin: 0; }

/* CTA: [add_to_cart] di Woo mette la classe hcn-gold-cta sul WRAPPER <p>
   e renderizza il bottone dentro → stile il bottone interno. Il banner home
   usa invece un wp:button con classe sul link (selettore diretto).
   v0.4.26 (richiesta owner «pulsante non coerente»): le AZIONI sono
   ARANCIO brand come tutto il sito (theme.json: primary/on-brand, 500);
   l'oro resta identità della pagina (titolo/eyebrow/bordi), non colore CTA. */
p.hcn-gold-cta { margin: 0; border: none; background: none; padding: 0; }

p.hcn-gold-cta .add_to_cart_button,
.hcn-gold-cta-row .add_to_cart_button,
a.hcn-gold-cta,
.hcn-gold-cta.wp-block-button__link {
	display: inline-block;
	padding: 14px 34px !important;
	border-radius: 999px !important;
	/* Identici ai bottoni standard del sito (theme.json button): preset
	 * STATICI — il primary token flippa in dark ma i bottoni Woo no. */
	background: var(--wp--preset--color--hcn-primary, #FA5403) !important;
	color: var(--wp--preset--color--hcn-white, #fff) !important;
	font-family: var(--hcn-font-display);
	font-weight: 500 !important;
	font-size: 1.0625rem !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: 0 8px 24px rgb(250 84 3 / 0.35);
	transition: transform var(--hcn-duration-fast, 120ms) var(--hcn-ease-out, ease), box-shadow 120ms ease;
}

p.hcn-gold-cta .add_to_cart_button:hover,
.hcn-gold-cta-row .add_to_cart_button:hover,
.hcn-gold-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgb(250 84 3 / 0.45);
	background: var(--wp--preset--color--hcn-primary-hover, #E04A00) !important;
}

.hcn-gold-price-tag {
	font-family: var(--hcn-font-display);
	font-size: 1.125rem;
	color: var(--hcn-neutral-100);
}

.hcn-gold-price-tag strong { color: #F6CE2B; }

.hcn-gold-micro {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--hcn-neutral-400, #b9b9b9);
}

/* Perk grid. */
.hcn-gold-section { padding-block: var(--wp--preset--spacing--60, 2rem); }

/* Respiro sotto i titoli sezione (v0.4.26: 19px era troppo stretto). */
.hcn-gold-section .hcn-section-title,
.hcn-gold-band .hcn-section-title {
	margin-block-end: 1.5rem;
}

.hcn-gold-perk {
	background: var(--hcn-card-bg);
	border: 1px solid var(--hcn-border-card);
	border-radius: var(--hcn-radius-card);
	padding: 1.5rem;
	height: 100%;
	box-sizing: border-box;
}

.hcn-gold-perk__ico {
	display: inline-grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 999px;
	background: rgb(246 206 43 / 0.15);
	color: #C99A00;
	font-family: var(--hcn-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
}

.hcn-gold-perk h3 {
	font-family: var(--hcn-font-display);
	font-size: 1.0625rem;
	margin: 0 0 0.5rem;
	color: var(--hcn-text);
}

.hcn-gold-perk p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--hcn-text-muted);
}

/* Banda «come funziona» su fondo scuro gold-tinted. */
.hcn-gold-band {
	background:
		radial-gradient(900px 400px at 20% 120%, rgb(246 206 43 / 0.12), transparent 60%),
		var(--hcn-neutral-900);
	color: var(--hcn-neutral-100);
	padding-block: var(--wp--preset--spacing--70, 3rem);
	margin-block: var(--wp--preset--spacing--60, 2rem);
}

.hcn-gold-band .hcn-section-title { color: #F6CE2B; }

/* Banner homepage: striscia premium con CTA verso la landing. */
.hcn-gold-banner {
	background:
		radial-gradient(700px 300px at 85% 50%, rgb(246 206 43 / 0.25), transparent 55%),
		linear-gradient(100deg, #131313, #2a2110 60%, #131313);
	color: #fff;
	padding: 2rem;
	border-radius: var(--hcn-radius-card);
	border: 1px solid rgb(246 206 43 / 0.4);
}

.hcn-gold-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.hcn-gold-banner h2 {
	font-family: var(--hcn-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
	color: #F6CE2B;
	margin: 0 0 0.25rem;
}

.hcn-gold-banner p {
	margin: 0;
	color: var(--hcn-neutral-100);
	font-size: 0.9375rem;
}

.hcn-gold-banner .hcn-gold-cta { flex: 0 0 auto; }

@media (max-width: 600px) {
	.hcn-gold-banner__inner { flex-direction: column; align-items: flex-start; }
	.hcn-gold-hero { padding-block: var(--wp--preset--spacing--70, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
	.hcn-gold-cta { transition: none; }
	.hcn-gold-cta:hover { transform: none; }
}

/* PEGI (P1): badge quadrato + descrittori. */
.hcn-pegi {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block: 0.5rem 0;
	text-decoration: none;
}

.hcn-pegi-age {
	display: inline-block;
	background: #000;
	color: #fff;
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
}

.hcn-pegi-desc {
	font-size: 0.75rem;
	color: var(--hcn-text-muted);
}

/* GPSR (P0): blocco sicurezza prodotto. */
.hcn-gpsr {
	margin-block-start: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--hcn-band-bg);
	border-radius: var(--hcn-radius-card);
	font-size: 0.875rem;
	display: grid;
	gap: 0.375rem;
}

.hcn-gpsr > strong {
	font-family: var(--hcn-font-display);
	font-size: 0.9375rem;
}

/* Barra acquisto mobile sticky (Baymard 2026): solo su mobile/tablet. */
.hcn-buybar {
	display: none;
}

@media (max-width: 60rem) {
	.hcn-buybar {
		position: fixed;
		inset-inline: 10px;
		bottom: 10px;
		z-index: var(--hcn-z-sticky);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.625rem 0.875rem;
		background: var(--hcn-card-bg);
		border: 1px solid var(--hcn-border-card);
		border-radius: var(--hcn-radius-card);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
	}

	.hcn-product {
		padding-block-end: 5rem; /* spazio per la barra fissa */
	}
}

.hcn-buybar-price {
	font-family: var(--hcn-font-display);
	font-weight: 600;
	font-size: 1.125rem;
}

.hcn-buybar-btn {
	background: var(--hcn-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: var(--hcn-font-display);
	font-weight: 500;
	font-size: 0.9375rem;
	padding: 12px 18px;
	min-height: 44px;
	cursor: pointer;
}

.hcn-buybar-btn:hover { background: var(--hcn-primary-hover); }

/* ============================================================================
   UX 2026 (invariante del child, mantenuta dalla v0.3.0)
   ========================================================================== */

/* Target touch minimo 44x44px (WCAG 2.2, 2.5.8 AA — vedi KB RICERCA-UX). */
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"] {
	min-height: 44px;
}

/* Eccezioni (v0.4.44, screenshot owner «cerchio ovale»): le ICONE-CERCHIO
 * piccole (freccia carosello 38px, share scheda 38px) diventavano OVALI:
 * il min-height 44 globale superava la loro height 38 con radius 50%.
 * WCAG 2.2 2.5.8 conta l'AREA del target (24px), non il lato: un cerchio
 * di 38px di diametro è conforme. Le CTA restano ≥44 di ALTEZZA. */
button.hikaru-carousel-nav,
.hcn-share__btn {
	min-height: 0;
}

/* Focus visibile e coerente (WCAG 2.2, 2.4.13). */
a:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

/* Transizioni sottili, disattivate se l'utente preferisce ridurre il movimento. */
@media (prefers-reduced-motion: reduce) {
	a,
	.wp-element-button,
	.wp-block-button__link,
	.hcn-magazine-card {
		transition: none !important;
	}
}

a { transition: opacity 0.15s ease-in-out; }

.wp-element-button,
.wp-block-button__link {
	transition: opacity 0.15s ease-in-out;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	opacity: 0.85;
}

/* ============================================================================
   CONDIVISIONE SOCIAL SCHEDA (v0.4.42): barra icone brand al hover.
   ============================================================================ */
.hcn-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 1.25rem;
	padding-block: 12px;
	border-block: 1px solid var(--hcn-border-card);
}

.hcn-share__label {
	font-family: var(--hcn-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hcn-text-muted);
	margin-inline-end: 4px;
}

.hcn-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 999px;
	color: var(--hcn-text);
	background: var(--hcn-band-bg);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hcn-share__btn:hover {
	transform: translateY(-2px);
	color: #fff;
}

.hcn-share__btn--reddit:hover { background: #ff4500; }
.hcn-share__btn--whatsapp:hover { background: #25d366; }
.hcn-share__btn--telegram:hover { background: #229ed9; }
.hcn-share__btn--x:hover { background: #000; }
.hcn-share__btn--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.hcn-share__btn--copy:hover { background: var(--hcn-primary); }

.hcn-share__btn:focus-visible {
	outline: 2px solid var(--hcn-focus-ring);
	outline-offset: 2px;
}

.hcn-share__copied {
	font-family: var(--hcn-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hcn-sale);
}

.hcn-share__copied[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.hcn-share__btn { transition: none; }
	.hcn-share__btn:hover { transform: none; }
}

/* ==========================================================================
   LARGHEZZA 89% — CHECKOUT (v0.4.46, 4ª segnalazione owner «tutto al
   100%»): il checkout Woo (pagina /pagamento/, mai skinnato) portava
   entry-content alignwide a 1440px (wideSize 90rem di theme.json) = 89.5%
   a 1608 e 112% a 1280. Riferimento owner: hikarucentralnews.com live =
   container 1140px FISSO a qualunque viewport (89.1% a 1280, 70.9% a
   1608), bande full-width con FIGLI al container. Cap al token container
   come già fatto per il carrello (v0.4.33). NB: NON estendere il cap a
   TUTTI i main .alignwide — i gruppi constrained con has-global-padding
   (home) hanno figli a 1140: caparli restringerebbe i figli a 1092.
   ========================================================================== */
.woocommerce-checkout .entry-content,
.wp-block-woocommerce-checkout.alignwide,
.wc-block-checkout .wc-block-components-sidebar-layout {
	max-width: var(--hcn-container, 71.25rem);
	margin-inline: auto;
}

/* Cross-sell carrello: il grid Woo esce di 16px dal cap della pagina. */
.woocommerce-cart .wc-block-grid__products {
	max-width: var(--hcn-container, 71.25rem);
	margin-inline: auto;
}

/* MOBILE (v0.4.55, audit 390px): la riga item del carrello Woo somma colonne
   fisse (80+132+11+91px + gap 16×3 ≈ 362px) su contenuto disponibile 350px →
   scrollW 377 su 374 (3px). Grid esplicito a 3 colonne mobile: immagine fissa,
   prodotto fluido (minmax 0 = restringibile), totale auto a destra. */
@media (max-width: 782px) {
	/* Specificità (0,4,1) > Woo (0,3,1): la regola Woo cart.css usa
	   .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row. */
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr) auto;
		column-gap: 12px;
	}

	.woocommerce-cart .wc-block-cart-item__total {
		justify-self: end;
		text-align: end;
	}
}

/* ==========================================================================
   BADGE METODI DI PAGAMENTO (v0.4.51, tile FIX v0.4.52) — loghi ufficiali
   SVG dei marchi (assets/img/payments/) su chip card. Segnale di fiducia
   vicino alla CTA (Baymard §6: 19% abbandona per mancanza di fiducia; 9%
   per metodi insufficienti — KB RICERCA-UX §1).
   TILE SEMPRE BIANCA in entrambi i temi (v0.4.52): i loghi monocromatici
   (Visa, Mastercard, Amex, PayPal, Apple Pay, Google Pay, Klarna = path neri)
   su --hcn-card-bg flippante erano NERO SU SCURO in dark = invisibili. La
   tile bianca fissa è la convenzione di settore per i brand asset (tile
   pagamento in footer dark di Shopify/Stripe) e garantisce leggibilità
   senza ricolorare i loghi (uso non conforme ai brand). Bordo e radius
   restano token-based; radius 6, target ≥ 24px (WCAG 2.5.8).
   ========================================================================== */
.hcn-pay-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.hcn-pay-icons li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 28px;
	min-block-size: 24px;
	padding: 4px 6px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hcn-border-card) 35%, transparent);
	border-radius: 6px;
}

/* Loghi BRAND A COLORI (v0.4.54, richiesta owner «vederli in nero è brutto»):
   versioni ufficiali dei marchi (Visa blu/oro, Mastercard rosso/arancio,
   PayPal blu, Google multicolor, Amex #0077a6, Klarna rosa, Satispay,
   BANCOMAT) sulla STESSA tile bianca — i colori ufficiali su bianco sono
   la superficie d'uso prevista dai brand e valgono in ENTRAMBI i temi.
   ECCEZIONE Apple Pay: nero di BRAND (Apple non pubblica il marchio
   Apple Pay in versione a colori; nero anche nei checkout Shopify/Stripe). */
.hcn-pay-icons img {
	display: block;
	height: 20px;
	width: auto;
}

.hcn-pay-icons-fallback {
	margin: 0.75rem 0 0;
	font-size: 0.7rem;
	color: var(--hcn-text-muted);
}

/* Variante checkout (v0.4.53): riga come SORELLA del blocco radice (fuori dalla
   portata dell'idratazione React, vedi filtro render_block). Allineamenti
   MISURATI a runtime: desktop la CTA «place order» sta nella colonna main
   (steps, a sinistra) → badge sotto di essa a sinistra; mobile (≤782px) la
   CTA è centrata → badge centrati. La sidebar sticky non viene toccata. */
.hcn-pay-icons--checkout {
	margin-block-start: 10px;
}

@media (max-width: 782px) {
	.hcn-pay-icons--checkout {
		justify-content: center;
	}
}

/* Variante footer: riga dedicata centrata come il copyright (stesso
   container 89% della barra). Le tile restano BIANCHE anche nel footer
   dark (fix v0.4.52: --hcn-footer-bg scuro ripeteva il bug tile scura). */
.hcn-pay-icons--footer {
	justify-content: center;
	margin-block-start: 1rem; /* v0.4.70: ritmo verticale più asciatto nel footer */
}

.hcn-footer .hcn-pay-icons img {
	height: 18px;
}

@media (prefers-reduced-motion: no-preference) {
	.hcn-pay-icons li {
		transition: border-color 0.15s ease;
	}

	.hcn-pay-icons li:hover {
		border-color: var(--hcn-border-card);
	}
}