/**
 * eBoots — Chrome (header + footer), site-wide.
 * --------------------------------------------------
 * - Footer: skin completa del footer custom (.eb-foot*, vedi templates/parts/site-footer.php).
 * - Header: skin leggera sul markup nativo Blocksy (.ct-header*). La STRUTTURA
 *   (righe, sticky, trasparente) resta gestita dal Customizer Blocksy: qui solo
 *   gli accenti d'identità (volt su hover/focus, badge carrello, tipografia menu).
 * Dipende dai token (tokens.css). Caricato ovunque (inc/enqueue.php).
 */

/* ========================================================================
   FOOTER custom — newsletter band + 3 colonne + bottom bar
   ======================================================================== */
.eb-foot {
	background: var(--surface);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-family: var(--font-ui);
}

/* ---- Newsletter band ---- */
.eb-foot__news {
	background:
		linear-gradient(100deg, rgba(199, 247, 63, 0.16), rgba(43, 230, 163, 0.10)),
		var(--surface-2);
	border-bottom: 1px solid var(--line);
}
/* Griglia 2×2: riga 1 = (titolo | form), riga 2 = (sottotitolo | disclaimer).
   align-items:center sul desktop → il centro del titolo combacia col centro della
   riga input+bottone (il disclaimer sta nella riga sotto, non sballa l'altezza). */
.eb-foot__news-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-5);
	display: grid;
	grid-template-columns: 1fr; /* mobile: impilato */
	grid-template-areas:
		"title"
		"sub"
		"form"
		"disclaimer";
	gap: var(--space-2);
}
.eb-foot__news-title {
	grid-area: title;
	margin: 0;
	font-family: var(--font-d);
	font-weight: 800;
	font-size: 1.8rem;
	line-height: 1;
	text-transform: uppercase;
	color: var(--txt);
}
.eb-foot__news-title span {
	color: var(--volt);
}
.eb-foot__news-sub {
	grid-area: sub;
	margin: 0;
	font-size: 0.95rem;
	color: var(--muted);
}
.eb-foot__news-form {
	grid-area: form;
	min-width: 0;
}
.eb-foot__news-form .frm-fluent-form,
.eb-foot__news-form form {
	margin: 0;
}
.eb-foot__news-form .ff-el-group {
	margin-bottom: var(--space-2);
}
/* Input e bottone alla STESSA altezza (50px), pill */
.eb-foot__news-form input[type="email"],
.eb-foot__news-form input[type="text"],
.eb-foot__news-form .ff-el-form-control {
	width: 100%;
	height: 50px;
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	padding: 0 1.2rem;
	color: var(--txt);
	font-family: var(--font-ui);
}
.eb-foot__news-form input::placeholder {
	color: var(--muted);
}
/* Bottone → volt pill, h=50px come l'input. !important per battere il CSS custom FF. */
.eb-foot .eb-foot__news-form .ff-btn-submit,
.eb-foot__news-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 50px;
	background: var(--volt) !important;
	background-image: none !important;
	color: var(--bg) !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	padding: 0 1.8rem !important;
	font-family: var(--font-ui) !important;
	font-weight: 700 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: none !important;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.eb-foot .eb-foot__news-form .ff-btn-submit:hover,
.eb-foot__news-form button[type="submit"]:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}
/* checkbox GDPR: da RIMUOVERE nel form FluentForm (required → non nascondibile via CSS) */
.eb-foot__news-form .ff_tc_label,
.eb-foot__news-form .ff-el-form-check-label {
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--muted);
}
/* Disclaimer (consenso implicito; sostituisce la checkbox GDPR una volta rimossa) */
.eb-foot__news-disclaimer {
	grid-area: disclaimer;
	margin: 0;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--muted);
}

/* ---- Colonne ---- */
.eb-foot__main {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-7) var(--space-5);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.eb-foot__logo {
	display: inline-block;
	font-family: var(--font-d);
	font-weight: 800;
	font-size: 1.7rem;
	text-transform: uppercase;
	color: var(--txt);
}
.eb-foot__tag {
	margin: var(--space-2) 0 var(--space-4);
	max-width: 32ch;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--muted);
}
.eb-foot__social {
	display: flex;
	gap: var(--space-3);
}
.eb-foot__social a {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--txt);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.eb-foot__social a:hover,
.eb-foot__social a:focus-visible {
	color: var(--volt);
	border-color: var(--volt);
}
.eb-foot__h {
	margin: 0 0 var(--space-3);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--txt);
}
.eb-foot__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.eb-foot__col a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.15s ease;
}
.eb-foot__col a:hover,
.eb-foot__col a:focus-visible {
	color: var(--volt);
}

/* ---- Bottom bar ---- */
.eb-foot__bottom {
	border-top: 1px solid var(--line);
}
.eb-foot__bottom-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-4) var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.eb-foot__copy {
	font-size: 0.78rem;
	color: var(--muted);
}
.eb-foot__pay {
	display: flex;
	gap: var(--space-2);
}
.eb-foot__pay-badge {
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 3px 8px;
	font-family: var(--font-ui);
	font-weight: 800;
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--txt);
}

@media (min-width: 1024px) {
	.eb-foot__main {
		grid-template-columns: 1.5fr 1fr 1fr; /* brand + Shop + Assistenza */
		gap: var(--space-7);
		padding-block: var(--space-8);
	}
	/* Newsletter band → griglia 2×2: titolo allineato (centro) alla riga input+bottone */
	.eb-foot__news-inner {
		grid-template-columns: 1fr minmax(320px, 440px);
		grid-template-areas:
			"title form"
			"sub   disclaimer";
		align-items: center;
		column-gap: var(--space-7);
		row-gap: var(--space-2);
	}
	.eb-foot__news-title {
		font-size: 2.1rem;
	}
}

/* ========================================================================
   HEADER — skin sul markup nativo Blocksy
   Sfondo scuro + testo/icone chiari (come lo sketch). Selettori a bassa
   specificità di proposito: se attivi il "Transparent Header" di Blocksy
   (Customizer), le sue regole più specifiche sovrascrivono lo sfondo qui
   sotto e l'header torna trasparente sopra l'hero. Struttura/righe/sticky/
   transparent restano gestiti dal Customizer.
   ======================================================================== */
/* Sfondo header → nero eBoots. Specificità pari a quella del CSS dinamico Blocksy
   ([data-header*="type-1"] .ct-header / [data-row*="..."]), che imposta #10161c;
   chrome.css è caricato DOPO global.css → a parità di specificità vince. */
[data-header*="type-1"] .ct-header,
[data-header*="type-1"] .ct-header [data-row*="top"],
[data-header*="type-1"] .ct-header [data-row*="middle"],
[data-header*="type-1"] .ct-header [data-row*="bottom"] {
	background-color: var(--bg); /* nero pieno come la base della home — niente grigio-blu #10161c */
	background-image: none;
}
/* testo e icone chiari sullo sfondo scuro */
.ct-header .ct-menu-link,
.ct-header .ct-account-item,
.ct-header .ct-cart-item,
.ct-header .ct-toggle,
.ct-header .ct-header-cta {
	color: var(--txt);
}

/* Voci menu: identità tipografica + hover volt */
.ct-header .ct-menu-link {
	font-family: var(--font-ui);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.15s ease;
}
.ct-header .ct-menu-link:hover,
.ct-header .menu-item:hover > .ct-menu-link,
.ct-header .current-menu-item > .ct-menu-link {
	color: var(--volt);
}

/* Icone account/carrello/toggle: hover volt */
.ct-header-account .ct-account-item:hover,
.ct-header-cart .ct-cart-item:hover,
.ct-header .ct-toggle:hover {
	color: var(--volt);
}

/* Niente menù: la navigazione avviene tutta dalla home. Nascondiamo SIA il
   trigger off-canvas (hamburger mobile) SIA la nav menu desktop di Blocksy. */
.ct-header-trigger,
.ct-header [data-id="trigger"],
.ct-header [data-id="menu"] {
	display: none !important;
}

/* Badge contatore carrello → pill volt */
.ct-header .ct-dynamic-count-cart {
	background: var(--volt) !important;
	color: var(--bg) !important;
	font-family: var(--font-ui);
	font-weight: 800;
}

/* ------------------------------------------------------------------------
   Icone header — sketch 022 C "cluster pill".
   Account e carrello in bottoni tondi bordati 44px con glifi 22px (i default
   Blocksy erano piccoli su desktop e attaccati su mobile); su desktop il
   carrello diventa pill volt con etichetta "Carrello" + conteggio.
   ------------------------------------------------------------------------ */
/* Respiro tra gli elementi della riga header (mobile compreso). */
.ct-header [data-items] {
	column-gap: 12px;
}
.ct-header .ct-account-item,
.ct-header .ct-cart-item {
	position: relative;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
	--theme-icon-size: 22px; /* var usata da Blocksy per dimensionare i glifi */
	transition: color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.ct-header-account .ct-account-item:hover,
.ct-header-cart .ct-cart-item:hover {
	border-color: var(--volt);
}
/* Glifi 22px anche dove la var Blocksy non arriva. */
.ct-header .ct-account-item svg,
.ct-header .ct-cart-item svg {
	width: 22px;
	height: 22px;
}
/* Avatar da loggati: tondo dentro il bottone. */
.ct-header .ct-account-item img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
}
/* Badge ancorato all'angolo del BOTTONE (non dell'icona): il wrapper icona
   torna static così l'assoluto risale al tondo. */
.ct-header .ct-cart-item .ct-icon-container {
	position: static;
}
.ct-header .ct-dynamic-count-cart {
	position: absolute;
	top: -5px;
	right: -5px;
	z-index: 1;
}

/* Desktop: carrello = pill volt "parlante" (icona + Carrello + conteggio). */
@media (min-width: 1000px) {
	.ct-header .ct-cart-item {
		width: auto;
		min-width: 44px;
		padding: 0 18px;
		column-gap: 10px;
		background: var(--volt);
		border-color: var(--volt);
		color: #0a0a0a;
		/* Blocksy colora i glifi con le sue variabili, non con color: senza
		   queste l'icona resta bianca sulla pill volt (sketch 022 C = nera). */
		--theme-icon-color: #0a0a0a;
		--theme-icon-hover-color: #0a0a0a;
	}
	.ct-header .ct-cart-item .ct-icon,
	.ct-header .ct-cart-item svg {
		fill: currentColor;
	}
	.ct-header-cart .ct-cart-item:hover {
		color: #0a0a0a; /* niente icona volt-su-volt (il generico hover sopra) */
		filter: brightness(1.06);
	}
	.ct-header .ct-cart-item::after {
		content: 'Carrello';
		font-family: var(--font-ui);
		font-weight: 800;
		font-size: 13px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
	/* Conteggio: bolla scura sull'angolo della pill (volt-su-volt sparirebbe). */
	.ct-header .ct-dynamic-count-cart {
		background: #0a0a0a !important;
		color: var(--volt) !important;
	}
}

/* Focus visibile coerente col brand */
.ct-header a:focus-visible,
.ct-header button:focus-visible {
	outline: 2px solid var(--volt);
	outline-offset: 2px;
}

/* CTA header (se usata) → pill volt */
.ct-header-cta .ct-button,
.ct-header-cta a.ct-button {
	background: var(--volt);
	color: var(--bg);
	border-radius: var(--radius-pill);
}