/*
 * BuonoandCo – elementi globali: fascia servizi, testata, pannello reparti, menu mobile,
 * piede, testata e piede ridotti, banner cookie. Misure dalle tavole della libreria (1440 / 390).
 * La testata passa alla versione mobile sotto i 1100 px (5 voci + ricerca + account + carrello).
 */

/* ---------- Bottone che sembra un link ---------- */
.link-testo {
	padding: 0; border: 0; background: none;
	font: inherit; font-weight: 600; color: inherit;
	text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
	cursor: pointer;
}

/* ---------- Fascia servizi ---------- */
.fascia-servizi {
	display: flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 6px var(--margine);
	background: var(--oro); color: var(--nero);
	font-size: 0.75rem; line-height: 1.3; font-weight: 600; text-align: center;
	text-decoration: none;
}
a.fascia-servizi:hover .fascia-servizi__desktop > span:not(.fascia-servizi__sep),
a.fascia-servizi:hover .fascia-servizi__mobile { text-decoration: underline; text-underline-offset: 3px; }
a.fascia-servizi:focus-visible { outline: 2px solid var(--nero); outline-offset: -4px; }
.fascia-servizi__desktop { display: none; }
.fascia-servizi__sep { margin: 0 14px; }
@media (min-width: 1100px) {
	.fascia-servizi { min-height: 44px; font-size: 0.8125rem; }
	.fascia-servizi__desktop { display: inline; }
	.fascia-servizi__mobile { display: none; }
}

/* ---------- Testata ---------- */
.testata { position: relative; z-index: 50; background: var(--bianco); border-bottom: 1px solid var(--grigio-linee); }
.testata__riga {
	display: grid;
	grid-template-columns: 44px 44px 1fr 44px 44px; /* colonne simmetriche: il logo resta al centro */
	grid-template-areas: "menu cerca logo account carrello" "ricerca ricerca ricerca ricerca ricerca";
	align-items: center;
	column-gap: 4px;
	padding-top: 8px; padding-bottom: 8px;
}
.testata__menu { grid-area: menu; }
.testata__cerca { grid-area: cerca; }
.testata__logo { grid-area: logo; justify-self: center; display: block; width: 89px; line-height: 0; } /* badge nero visibile 82 px: la cornice bianca del file sparisce sul bianco */
.testata__logo .logo-svg { width: 100%; height: auto; }
.testata__nav { display: none; }
/* Mobile: la ricerca si apre dalla lente, a tutta larghezza sotto la riga delle icone (26/10/2026). */
.testata .testata__ricerca { grid-area: ricerca; display: none; gap: 4px; margin-top: 8px; }
.testata.is-ricerca-aperta .testata__ricerca { display: flex; }
.testata__ricerca .ricerca__campo { flex: 1; min-width: 0; }
.testata__ricerca .ricerca__invia { right: 48px; }
.testata__cerca[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--oro); }
.testata__account { grid-area: account; }
.testata__carrello { grid-area: carrello; }
.testata__icona, .testata__link {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0;
	border: 0; background: none; color: var(--nero);
	text-decoration: none;
}
.testata__testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* su mobile resta per i lettori di schermo */
.testata__badge {
	position: absolute; top: 4px; right: 2px;
	min-width: 16px; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center;
}
.testata__badge:empty, .testata__badge[data-zero] { display: none; }

/* Ricerca: campo aperto con lente, bordo #6B6B6B */
.ricerca { position: relative; display: flex; }
.ricerca__campo { height: 44px; min-height: 44px !important; padding: 0 48px 0 14px !important; font-size: 1rem; }
.ricerca__invia {
	position: absolute; right: 0; top: 0; bottom: 0;
	width: 48px; display: grid; place-content: center;
	border: 0; background: none; color: var(--nero);
}
.ricerca__invia:focus-visible { outline-offset: -4px; }
.ricerca__campo::-webkit-search-cancel-button { appearance: none; }

@media (min-width: 1100px) {
	.testata__riga {
		grid-template-columns: auto 1fr 220px auto auto;
		grid-template-areas: "logo nav ricerca account carrello";
		column-gap: 0;
		min-height: 88px; padding-top: 0; padding-bottom: 0;
	}
	.testata__menu, .testata__cerca, .testata__chiudi-ricerca, .testata__badge, .testata__link > .icona { display: none; }
	.testata__logo { justify-self: start; width: 112px; margin-left: -4px; } /* badge nero visibile 103 px, allineato al margine */
	/* Come nel PNG: prima voce a 340 px su 1440, voci a circa 45 px l'una dall'altra */
	.testata__nav { grid-area: nav; display: block; justify-self: start; margin-left: clamp(16px, 10.9vw, 157px); }
	.testata__voci { display: flex; gap: 4px; margin: 0; }
	.testata__voce {
		position: relative;
		display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
		border: 0; background: none; color: var(--nero);
		font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap;
	}
	.testata__voce::after {
		content: ""; position: absolute; left: 16px; right: 8px; bottom: 2px;
		height: 2px; background: var(--oro); opacity: 0;
	}
	/* Filetto oro: reparto attivo o pannello aperto (06-elenco-sezioni: testata, pannello-reparti) */
	.testata__voce.is-attiva::after, .is-aperta > .testata__voce::after { opacity: 1; }
	.testata__voce:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--grigio-linee); }
	.testata__voce.is-attiva:hover, .is-aperta > .testata__voce:hover { text-decoration: none; }
	/* Voce con pannello: link + piccolo bottone freccia (apre il pannello da tastiera e touch). */
	.testata__voce-li { display: flex; align-items: center; }
	.testata__voce--pannello { padding-right: 4px; }
	.testata__voce--pannello::after { right: 4px; }
	.testata__apri {
		display: grid; place-content: center; width: 24px; height: 44px; margin-right: 4px; padding: 0;
		border: 0; background: none; color: var(--nero); cursor: pointer;
	}
	.testata__apri .icona { width: 16px; height: 16px; transition: transform .15s; }
	.testata__apri[aria-expanded="true"] .icona { transform: rotate(180deg); }
	.testata__apri:hover { color: var(--grigio-testo); }
	.testata .testata__ricerca { display: flex; margin: 0 0 0 auto; width: 220px; }
	.testata__ricerca .ricerca__invia { right: 0; }
	.testata__link { min-width: 0; padding: 0 0 0 26px; font-size: 1rem; white-space: nowrap; }
	.testata__carrello { padding-left: 40px; }
	.testata__testo { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; }
	.testata__link:hover .testata__testo { text-decoration: underline; text-underline-offset: 4px; }
}

/* ---------- Pannello reparti (desktop) ---------- */
.pannello { display: none; }
@media (min-width: 1100px) {
	.pannello {
		display: block;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--bianco);
		border-top: 1px solid var(--grigio-linee);
		border-bottom: 1px solid var(--grigio-linee);
	}
	.pannello[hidden] { display: none !important; }
	.pannello__griglia {
		display: grid;
		grid-template-columns: minmax(0, 320px) 1fr minmax(0, 360px); /* come il PNG: 80 · 440 · 720 · 1000-1360 */
		column-gap: 40px;
		padding-top: 48px; padding-bottom: 72px;
	}
	.pannello__titolo { margin-bottom: 16px; }
	.pannello__elenco {
		display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: 280px 1fr;
		column-gap: 0; row-gap: 26px; align-content: start;
		padding-top: 6px;
	}
	.pannello__elenco a { font-size: 1rem; text-decoration: none; }
	.pannello__elenco a:hover { text-decoration: underline; text-underline-offset: 4px; }
	.pannello__conta { margin-left: 6px; color: var(--grigio-testo); font-size: 0.8125rem; }
	.pannello__riquadro { display: grid; gap: 12px; justify-items: start; width: 100%; text-decoration: none; color: var(--nero); }
	.pannello__foto { display: block; width: 100%; aspect-ratio: 360 / 199; background: var(--grigio-fondo); overflow: hidden; }
	.pannello__foto img { width: 100%; height: 100%; object-fit: cover; }
	.pannello__riquadro:hover .pannello__riquadro-titolo { text-decoration: underline; text-underline-offset: 4px; }
}
.segnaposto-foto {
	display: grid; place-content: center; width: 100%; height: 100%;
	min-height: 120px; background: var(--grigio-fondo); color: var(--grigio-testo); text-align: center;
	border: 1px solid var(--grigio-linee); outline: 8px solid var(--grigio-fondo); outline-offset: -9px;
}

/* ---------- Menu mobile ---------- */
.menu-mobile {
	position: fixed; inset: 0; z-index: 100;
	display: flex; flex-direction: column;
	background: var(--bianco); overflow-y: auto; overscroll-behavior: contain;
}
.menu-mobile__testa {
	display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
	padding: 8px var(--margine) 12px; border-bottom: 1px solid var(--grigio-linee);
}
.menu-mobile__testa .testata__logo { grid-area: auto; justify-self: center; width: 89px; }
.menu-mobile__corpo { padding: 0 var(--margine); flex: 1 0 auto; }
.menu-mobile__voce { border-bottom: 1px solid var(--grigio-linee); }
.menu-mobile__reparto {
	display: flex; width: 100%; align-items: center; justify-content: space-between;
	min-height: 64px; padding: 8px 0; border: 0; background: none; color: var(--nero);
	font-family: var(--font-titoli); font-size: 1.75rem; line-height: 1.1; text-align: left; text-decoration: none;
}
.menu-mobile__voce.is-attiva > .menu-mobile__reparto span { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu-mobile__reparto .icona { width: 20px; height: 20px; flex: none; }
.se-aperto { display: none; }
[aria-expanded="true"] > .se-aperto { display: block; }
[aria-expanded="true"] > .se-chiuso { display: none; }
.menu-mobile__figli { padding: 0 0 20px 14px; display: grid; }
.menu-mobile__figli a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1rem; text-decoration: none; }
.menu-mobile__figli .icona { width: 16px; height: 16px; }
.menu-mobile__servizio { display: grid; padding: 16px 0 24px; }
.menu-mobile__servizio a { display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1rem; text-decoration: none; }
.menu-mobile__negozio { padding: 28px var(--margine) 36px; font-size: var(--fs-piccolo); line-height: 1.6; }
.menu-mobile__negozio .filetto { margin-bottom: 14px; }
.menu-mobile__negozio a { text-decoration: none; }
body.menu-aperto { overflow: hidden; }
@media (min-width: 1100px) { .menu-mobile { display: none !important; } }

/* ---------- Piede ---------- */
.piede { padding: 56px 0 40px; }
.piede a { color: var(--bianco); text-decoration: none; }
.piede a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede__apertura { display: grid; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--grigio-testo); }
.piede__marchio .filetto { margin-bottom: 20px; }
.piede__marchio-riga { display: grid; gap: 20px; }
.piede__logo { display: block; width: 92px; line-height: 0; }
.piede__frase { font-family: var(--font-titoli); font-size: 1.25rem; line-height: 1.3; }
.piede__newsletter { display: grid; gap: 14px; }
.piede__newsletter h2 { margin: 0; }
.piede__newsletter-testo { font-size: var(--fs-piccolo); line-height: var(--lh-piccolo); }
.newsletter__riga { display: grid; gap: 8px; }
.newsletter__riga input { border-color: var(--bianco); }
.newsletter__riga input:focus-visible { outline: 2px solid var(--bianco); outline-offset: 2px; }
.newsletter__consenso a { text-decoration: underline; }
.newsletter__esito:empty { display: none; }
.newsletter__esito { font-size: var(--fs-piccolo); font-weight: 600; }

.piede__colonne { display: grid; padding: 8px 0 24px; border-bottom: 1px solid var(--grigio-testo); }
.piede__colonna { border-bottom: 1px solid var(--grigio-testo); }
.piede__colonna:last-child { border-bottom: 0; }
.piede__titolo { margin: 0; }
.piede__titolo-testo { display: none; }
.piede__apri {
	display: flex; width: 100%; align-items: center; justify-content: space-between;
	min-height: 52px; padding: 0; border: 0; background: none; color: var(--bianco);
	font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.piede__apri .icona { width: 18px; height: 18px; }
.piede__corpo { padding-bottom: 20px; font-size: var(--fs-piccolo); line-height: 1.6; }
.piede__corpo address { font-style: normal; display: grid; gap: 0; }
.piede__link { display: grid; gap: 4px; }
.piede__link a { display: inline-flex; min-height: 32px; align-items: center; }

.piede__fondo { display: grid; gap: 16px; padding-top: 28px; font-size: 0.75rem; line-height: 1.5; }
.piede__pagamenti { display: grid; gap: 12px; }
.pagamenti { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pagamenti li { padding: 4px 14px; border: 1px solid var(--bianco); font-weight: 600; font-size: 0.75rem; line-height: 1.4; }
.piede__nota, .piede__legale { margin: 0; }
.piede__legali { display: flex; flex-wrap: wrap; gap: 4px 0; font-weight: 600; }
.piede__legali li:not(:last-child)::after { content: "·"; margin: 0 10px; font-weight: 400; } /* il punto chiude la voce: se la riga va a capo, la nuova non comincia con "·" */
.piede__legali a, .piede__legali .link-testo { font-weight: 600; text-decoration: none; }
.piede__legali a:hover, .piede__legali .link-testo:hover { text-decoration: underline; }

@media (min-width: 1100px) {
	.piede { padding: 88px 0 44px; }
	.piede__apertura { grid-template-columns: 1fr 540px; gap: 60px; padding-bottom: 44px; }
	.piede__marchio-riga { grid-template-columns: auto 1fr; gap: 36px; align-items: start; }
	.piede__logo { width: 144px; }
	.piede__frase { font-size: 1.5rem; line-height: 1.25; padding-top: 4px; }
	.piede__newsletter { padding-top: 0; }
	.newsletter__riga { grid-template-columns: 1fr 150px; gap: 8px; }
	.piede__colonne { grid-template-columns: 1.12fr 1fr 0.94fr 1fr; column-gap: var(--gap); padding: 44px 0 44px; }
	.piede__colonna { border-bottom: 0; }
	.piede__titolo-testo { display: block; margin-bottom: 18px; }
	.piede__apri { display: none; }
	.piede .piede__corpo, .piede .piede__corpo[hidden] { display: block !important; padding: 0; font-size: 1rem; line-height: 1.75; }
	.piede__corpo address p + p { margin-top: 28px; }
	.piede__link { gap: 0; }
	.piede__link a { min-height: 0; }
	.piede__fondo { padding-top: 22px; font-size: 0.8125rem; }
	.piede__pagamenti { grid-template-columns: 1fr auto; align-items: center; margin-bottom: 18px; }
}
@media (max-width: 1099px) {
	.piede__corpo address p + p { margin-top: 0; }
}

/* ---------- Testata ridotta e piede ridotto (checkout) ---------- */
.testata--ridotta .testata__riga {
	grid-template-columns: auto 1fr auto; grid-template-areas: "logo centro aiuto";
	min-height: 64px; padding-top: 8px; padding-bottom: 8px;
}
.testata--ridotta .testata__logo { justify-self: start; }
.testata__rassicura { display: none; grid-area: centro; justify-self: center; margin: 0; font-weight: 600; font-size: var(--fs-piccolo); }
.testata__aiuto { grid-area: aiuto; margin: 0; font-weight: 600; font-size: var(--fs-piccolo); }
.testata__aiuto a { text-decoration: none; }
@media (min-width: 1100px) {
	.testata--ridotta .testata__riga { min-height: 88px; }
	.testata__rassicura { display: block; }
	.testata__aiuto { font-weight: 400; }
	.testata--ridotta .testata__testo { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; }
}
.piede-ridotto { border-top: 1px solid var(--grigio-linee); padding: 28px 0 48px; font-size: 0.75rem; line-height: 1.5; }
.piede-ridotto__riga { display: grid; gap: 16px; }
.piede-ridotto__aiuto { display: grid; gap: 4px; }
.piede-ridotto__tel { font-size: 0.875rem; font-weight: 600; margin: 0; }
.piede-ridotto__tel a { text-decoration: none; }
.piede-ridotto .piede__legali { margin-top: 8px; }
/* Area di tocco di almeno 24 px (WCAG 2.5.8) anche quando i link vanno a capo. */
.piede-ridotto .piede__legali li { display: inline-flex; align-items: center; min-height: 24px; }
.piede-ridotto .piede__legali a, .piede-ridotto .piede__legali .link-testo { display: inline-flex; align-items: center; min-height: 24px; }
.piede-ridotto .piede__legali a, .piede-ridotto .link-testo { color: var(--nero); }
@media (min-width: 1100px) {
	.piede-ridotto { padding: 32px 0 56px; font-size: 0.8125rem; }
	.piede-ridotto__riga { grid-template-columns: 1fr auto; }
	.piede-ridotto__aiuto { text-align: right; order: 0; }
	.piede-ridotto__legale { order: 0; }
	.piede-ridotto__tel { font-size: 0.9375rem; }
}
@media (max-width: 1099px) {
	.piede-ridotto__aiuto { order: -1; }
}

/* ---------- Banner cookie (aspetto) ---------- */
.banner-cookie {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	background: var(--bianco); color: var(--nero);
	border-top: 1px solid var(--grigio-testo);
	max-height: 100vh; overflow-y: auto;
}
.banner-cookie__riga { position: relative; display: grid; gap: 14px; padding-top: 22px; padding-bottom: 20px; }
.banner-cookie__testo { display: grid; gap: 10px; justify-items: start; font-size: 0.8125rem; line-height: 1.5; padding-right: 32px; }
.banner-cookie__policy { font-weight: 600; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 0.875rem; }
.banner-cookie__azioni { display: grid; gap: 10px; justify-items: stretch; }
.banner-cookie__azioni .bottone { min-height: 44px; }
.banner-cookie__pref { justify-self: start; padding: 6px 0 3px; text-decoration: none; border-bottom: 1px solid currentColor; font-size: 0.875rem; }
.banner-cookie__chiudi {
	position: absolute; top: 6px; right: calc(var(--margine) - 12px);
	width: 44px; height: 44px; display: grid; place-content: center;
	border: 0; background: none; color: var(--nero);
}
.banner-cookie__chiudi .icona { width: 18px; height: 18px; }
.banner-cookie__preferenze { display: grid; gap: 16px; padding-top: 8px; border-top: 1px solid var(--grigio-linee); }
.banner-cookie__preferenze fieldset { display: grid; gap: 12px; margin: 0; padding: 12px 0 0; border: 0; }
.banner-cookie__preferenze legend { padding: 0; margin-bottom: 4px; }
.banner-cookie__preferenze .bottone { justify-self: start; }
@media (min-width: 1100px) {
	.banner-cookie__riga { grid-template-columns: 1fr auto; column-gap: 64px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
	.banner-cookie__testo { font-size: 0.875rem; max-width: 640px; padding-right: 0; }
	.banner-cookie__azioni { grid-auto-flow: column; grid-auto-columns: auto; align-items: center; gap: 12px; padding-right: 48px; }
	.banner-cookie__azioni .bottone { min-width: 130px; min-height: 42px; }
	.banner-cookie__pref { margin-left: 4px; }
	.banner-cookie__chiudi { top: 8px; right: calc(var(--margine) - 20px); }
	.banner-cookie__preferenze { grid-column: 1 / -1; }
}

/* ---------- Contenuto dopo il consenso (mappa) ---------- */
.dopo-consenso { position: relative; }
.dopo-consenso.is-attivo .dopo-consenso__segnaposto { display: none; }