/*
Theme Name:   Sant'Elia
Theme URI:    https://santelia.it
Author:       Sant'Elia — Mascarin S.r.l.
Description:  Tema WordPress per Sant'Elia, il sapore della tradizione. Catalogo salumi premium, interattivo e senza prezzi, organizzato per linee (texture + prodotti) come il catalogo cartaceo. ACF PRO, GSAP, GLightbox, template PHP classici.
Version:      3.0.6
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  santelia
*/

/* ============================================================
   1. TOKENS — identità Sant'Elia
   ============================================================ */
:root {
	--se-gold:        #d39c0a;   /* oro del marchio */
	--se-gold-deep:   #b3850a;
	--se-black:       #14110c;   /* quasi-nero caldo */
	--se-ink:         #1e1a13;
	--se-graphite:    #5c564b;
	--se-muted:       #8f887c;
	--se-line:        #e2ddd2;
	--se-paper:       #f6f6f6;   /* fondo (con texture) */
	--se-paper-2:     #efeee9;
	--se-white:       #ffffff;
	--se-cream:       #faf9f5;

	--se-font-serif: "orpheuspro", Georgia, "Times New Roman", serif;
	--se-font-sans:  "archivo", "Manrope", "Helvetica Neue", Arial, sans-serif;

	--se-gap:        clamp(1rem, 2vw, 1.6rem);
	--se-section:    clamp(4rem, 9vw, 8rem);
	--se-container:  1280px;
	--se-narrow:     820px;

	--se-radius: 2px;
	--se-shadow: 0 1px 2px rgba(20,17,12,.05), 0 24px 60px rgba(20,17,12,.07);
	--se-ease: cubic-bezier(.22,1,.36,1);
	--se-t: .5s;
}


/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }
/* Niente bounce/pull-to-refresh: meno scatti con le toolbar del browser mobile */
html { overscroll-behavior-y: none; }
/* Scroll-lock a menu aperto (la posizione è gestita dal JS) */
body.menu-open { position: fixed; left: 0; right: 0; overflow: hidden; }
/* Con il body bloccato, l'header sticky finirebbe fuori schermo di quanto
   si era scrollato: lo fissiamo in cima, così logo e X restano visibili. */
body.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
body {
	margin: 0;
	font-family: var(--se-font-sans);
	font-size: clamp(1rem, .5vw + .9rem, 1.05rem);
	line-height: 1.68;
	color: var(--se-ink);
	background-color: var(--se-paper);
	/* Texture di sfondo del marchio */
	background-image: url("assets/images/sfondo.png");
	background-size: 580px auto;
	background-repeat: repeat;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
	font-family: var(--se-font-serif);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: 0;
	margin: 0 0 .5em;
	color: var(--se-black);
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 600; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.6rem); font-weight: 400; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p { margin: 0 0 1.15em; }
:focus-visible { outline: 2px solid var(--se-gold); outline-offset: 3px; }
::selection { background: var(--se-gold); color: #fff; }

/* Etichetta / eyebrow — stile del catalogo (maiuscolo, oro, spaziato) */
.eyebrow {
	font-family: var(--se-font-sans);
	font-size: .7rem; font-weight: 600;
	letter-spacing: .24em; text-transform: uppercase;
	color: var(--se-gold-deep);
	display: inline-block; margin: 0 0 1.1rem;
}
.eyebrow::after {
	content: ""; display: block; width: 34px; height: 1px;
	background: var(--se-gold); margin-top: .9rem;
}
.lead { font-size: 1.15rem; color: var(--se-graphite); max-width: 60ch; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container { width: 100%; max-width: var(--se-container); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.8rem); }
.container--narrow { max-width: var(--se-narrow); }
.section { padding-block: var(--se-section); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; background: var(--se-black); color: #fff; padding: .8rem 1.2rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); }

/* ============================================================
   4. BOTTONI
   ============================================================ */
.btn-primary, .btn-secondary {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--se-font-sans); font-size: .78rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	padding: 1rem 1.9rem; border-radius: var(--se-radius);
	cursor: pointer; border: 1px solid transparent;
	transition: background var(--se-t) var(--se-ease), color var(--se-t) var(--se-ease), border-color var(--se-t) var(--se-ease), transform .2s var(--se-ease);
}
.btn-primary { background: var(--se-black); color: #fff; }
.btn-primary:hover { background: var(--se-gold-deep); }
.btn-secondary { background: transparent; color: var(--se-black); border-color: var(--se-line); }
.btn-secondary:hover { border-color: var(--se-black); }
.btn-gold {
	display: inline-flex; align-items: center; gap: .7rem;
	font-family: var(--se-font-sans); font-size: .78rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	padding: 1rem 1.9rem; border-radius: var(--se-radius);
	cursor: pointer; border: 1px solid transparent;
	background: var(--se-gold); color: var(--se-black);
	transition: background var(--se-t) var(--se-ease), color var(--se-t) var(--se-ease), transform .2s var(--se-ease), box-shadow .3s var(--se-ease);
}
.btn-gold svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform .35s var(--se-ease); }
.btn-gold:hover { background: var(--se-black); color: var(--se-gold); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(20,17,12,.5); }
.btn-gold:hover svg { transform: translateX(3px) rotate(-4deg); }

/* Download catalogo (fondo pagine catalogo) */
.catalog-download { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.catalog-download__inner { display: flex; justify-content: center; }

/* Freccia come SVG in mask (il carattere "→" rende male su alcuni font/device);
   background-color: currentColor -> eredita sempre il colore del testo del bottone */
.btn--arrow::after {
	content: "";
	display: inline-block; width: 15px; height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .3s var(--se-ease);
}
.btn--arrow:hover::after { transform: translateX(4px); }

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header {
	position: sticky; top: 0; z-index: 100;
	height: 65px;
	background-color: var(--se-paper);
	background-image: url("assets/images/sfondo.png");
	background-size: 580px auto;
	background-repeat: repeat;
	border-bottom: 1px solid transparent;
	transition: border-color var(--se-t) var(--se-ease);
}
.site-header.scrolled { border-bottom-color: var(--se-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 100%; }
.brand-logo { display: inline-block; }
.brand-logo svg, .brand-logo img { height: 44px; width: auto; }
/* Logo caricato da Personalizza (anche SVG, che non ha dimensioni intrinseche) */
.custom-logo-link { display: inline-flex; align-items: center; }
.site-header .custom-logo { height: 44px; width: auto; max-height: 44px; }

.primary-nav { display: flex; align-items: center; } /* ul + monogramma sulla stessa riga */
.primary-nav ul { list-style: none; display: flex; gap: 1.9rem; margin: 0; padding: 0; }
/* Monogramma Mascarin compatto (solo header desktop) */
.nav-mascarin {
	display: inline-flex; align-items: center; margin-left: 1.9rem; padding-left: 1.9rem;
	border-left: 1px solid var(--se-line); line-height: 0;
	opacity: .85; transition: opacity .3s var(--se-ease);
}
.nav-mascarin:hover { opacity: 1; }
.nav-mascarin svg { height: 30px; width: auto; }
/* Tooltip custom del monogramma */
.nav-mascarin { position: relative; }
.nav-mascarin::after {
	content: attr(data-tooltip);
	position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
	background: var(--se-black); color: #fff;
	font-family: var(--se-font-sans); font-size: .72rem; font-weight: 500;
	letter-spacing: .02em; line-height: 1.3; white-space: nowrap;
	padding: .55rem .85rem; border-radius: 5px;
	box-shadow: 0 12px 30px -12px rgba(20,17,12,.45);
	opacity: 0; transform: translateY(-4px); pointer-events: none;
	transition: opacity .25s var(--se-ease), transform .25s var(--se-ease);
}
.nav-mascarin::before {
	content: ""; position: absolute; top: calc(100% + 6px); right: 12px; z-index: 60;
	border: 6px solid transparent; border-bottom-color: var(--se-black); border-top: 0;
	opacity: 0; transform: translateY(-4px); pointer-events: none;
	transition: opacity .25s var(--se-ease), transform .25s var(--se-ease);
}
.nav-mascarin:hover::after, .nav-mascarin:focus-visible::after,
.nav-mascarin:hover::before, .nav-mascarin:focus-visible::before {
	opacity: 1; transform: translateY(0);
	transition-delay: .12s;
}
.primary-nav a { font-size: .82rem; font-weight: 500; letter-spacing: .03em; color: var(--se-graphite); position: relative; padding-block: .3rem; transition: color .3s var(--se-ease); }
.primary-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--se-gold); transition: width .35s var(--se-ease); }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--se-black); }
.primary-nav a:hover::after, .primary-nav .current-menu-item > a::after { width: 100%; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; z-index: 95; position: relative; }
.nav-toggle span {
	display: block; width: 26px; height: 2px; background: var(--se-black);
	margin: 6px 0; border-radius: 2px; transform-origin: center;
	transition: transform .5s cubic-bezier(.65,.05,.36,1), opacity .3s var(--se-ease), width .35s var(--se-ease);
}
.nav-toggle span:nth-child(2) { width: 18px; margin-left: auto; }  /* asimmetria di partenza */
.nav-toggle:hover span:nth-child(2) { width: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.55); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   6. HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
/* L'altezza è dettata dall'immagine (proporzioni originali, mai tagliata) */
.hero--image { display: grid; align-items: center; color: #fff; }
.hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,17,12,.72) 0%, rgba(20,17,12,.35) 45%, rgba(20,17,12,0) 75%); z-index: 1; }
.hero--image.hero--no-grad::before { content: none; }
.hero__bg { grid-area: 1 / 1; z-index: 0; line-height: 0; }
.hero__bg img {
	width: var(--se-hero-img-w-d, 100%); height: var(--se-hero-img-h-d, auto);
	display: block; margin: var(--se-hero-img-margin-d, 0 auto); /* default: centrata */
	object-fit: cover; /* ininfluente con height auto; attivo con altezza fissa */
	object-position: var(--se-hero-pos, 50% 50%);
}
/* Mobile: hero ad altezza viewport gestibile (svh = stabile con le toolbar del browser) */
/* Pagine linea (tassonomia): hero alta ESATTAMENTE una viewport,
   la texture copre (niente hero che sfora oltre lo scroll). */
/* Altezza = una viewport esatta (65px = header sticky), MA il contenuto
   comanda: allineato in basso con margine e, se piu' alto, la hero cresce
   invece di tagliarlo. */
.tax-linea .hero--image {
	min-height: calc(100svh - 65px);
	height: auto;
	align-items: end;
	overflow: hidden;
}
.tax-linea .hero--image .container {
	padding-top: clamp(2rem, 6vh, 4rem);
	padding-bottom: clamp(2.5rem, 7vh, 5rem);
}
/* Sfondo FUORI dal flusso: l'altezza della hero la decide solo
   min-height/contenuto, mai l'immagine (con min-height i percent
   sull'altezza non si risolvono e l'img tornava alla taglia naturale). */
.tax-linea .hero__bg { position: absolute; inset: 0; height: auto; line-height: 0; }
.tax-linea .hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Mobile: piu' compatta (64svh), stessa copertura */
@media (max-width: 760px) {
	.tax-linea .hero--image { min-height: calc(64svh - 65px); }
}

@media (max-width: 760px) {
	.hero--image { min-height: var(--se-hero-h-m, 100svh); }
	/* Immagine MAI tagliata: proporzioni naturali a tutta larghezza,
	   centrata verticalmente nell'altezza dell'hero. */
	.hero__bg {
		height: 100%; display: flex;
		align-items: var(--se-hero-bg-align, center);       /* verticale */
		justify-content: var(--se-hero-bg-justify, center); /* orizzontale */
	}
	.hero__bg img {
		width: var(--se-hero-img-w-m, var(--se-hero-img-w-d, 100%));
		height: auto;
		margin: var(--se-hero-img-margin-m, var(--se-hero-img-margin-d, 0));
		object-position: var(--se-hero-pos-m, var(--se-hero-pos, 50% 50%));
	}
}
.hero--image .container {
	grid-area: 1 / 1; position: relative; z-index: 2;
	display: flex; width: 100%;
	align-items: var(--se-hero-cnt-align, center);       /* verticale */
	justify-content: var(--se-hero-cnt-justify, flex-start); /* orizzontale */
}
.hero__inner { position: relative; z-index: 2; max-width: 40ch; }
/* Desktop largo (>=1200px): titolo risalito e inner a colonna piena.
   SOLO hero della home: sulle pagine linea questi valori accatastavano
   sottotitolo, bollino ed eyebrow (fix set 2026). */
@media (min-width: 1200px) {
	.page-template-template-home .hero-title {
		margin-top: -300px !important;
	}
	.page-template-template-home .hero--image .hero__inner {
		max-width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.page-template-template-home .hero--image .container {
		grid-area: 1 / 1;
		position: relative;
		z-index: 2;
		display: flex;
		width: 100%;
		align-items: var(--se-hero-cnt-align, center);
		justify-content: var(--se-hero-cnt-justify, flex-start);
		height: 100%;
	}
}
.hero--image .hero__inner { max-width: 50%; }
@media (max-width: 760px) { .hero--image .hero__inner { max-width: 100%; } }
.hero--image .hero-title { color: var(--se-hero-color, #fff); }
.hero--image .hero__subtitle { color: #fff; }
.hero--image .eyebrow { color: #f0d68a; }
.hero--image .eyebrow::after { background: var(--se-gold); }
.hero-title {
	font-size: clamp(2.6rem, 6vw, var(--se-hero-size, 5rem));
	font-weight: 600;
	line-height: var(--se-hero-lh, 1.02);
	color: var(--se-hero-color, inherit);
	margin-top: var(--se-hero-title-mt, 0);
	margin-bottom: var(--se-hero-title-mb, 0);
}
.hero-title .accent { color: var(--se-gold); }
.hero--image .hero-title .accent { color: #f0c04a; }
.hero__subtitle { font-size: 1.2rem; color: var(--se-graphite); max-width: 46ch; margin-top: 1.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.hero--image .btn-secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.hero--image .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Hero editoriale (senza immagine) */
.hero--editorial { padding-block: clamp(4rem,10vh,8rem) 0; }
.hero--editorial .hero__inner { max-width: 24ch; }

/* ============================================================
   7. STORYTELLING (Stagioniamo / Tre generazioni)
   ============================================================ */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story--reverse .story__media { order: 2; }
.story__media { border-radius: var(--se-radius); overflow: hidden; }
.story__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.story__title { font-size: clamp(2rem, 4vw, 3.4rem); }
.story__text { color: var(--se-graphite); max-width: 46ch; }

/* Numeri / valori */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.value__num { font-family: var(--se-font-serif); font-size: clamp(2.6rem,5vw,4rem); color: var(--se-gold-deep); line-height: 1; }
.value__label { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--se-muted); margin-top: .6rem; }

/* ============================================================
   8. TOOLBAR CATALOGO (sticky trasparente: nav linee + ricerca)
   ============================================================ */
.catalog-toolbar {
	position: sticky; top: 65px; z-index: 40;
	background: transparent;               /* trasparente in cima */
	padding: .9rem 0;
	transition: background-color .35s var(--se-ease), box-shadow .35s var(--se-ease);
	border-bottom: 1px solid #000;
}
/* Quando si fissa: sfondo con la texture del sito */
.catalog-toolbar.is-stuck {
	background-color: var(--se-paper);
	background-image: url("assets/images/sfondo.png");
	background-size: 580px auto;
	background-repeat: repeat;
	box-shadow: 0 10px 30px -22px rgba(20,17,12,.4);
}
/* Riga unica: chip a sinistra (scrollabili), ricerca a destra */
.catalog-toolbar__inner { display: flex; flex-direction: row; align-items: center; gap: .85rem; }

/* Nav linee (chip) — occupa lo spazio disponibile */
.lines-nav { padding: 0; flex: 1 1 auto; min-width: 0; position: relative; }
.lines-nav::after {
	content: ""; position: absolute; right: 4px; top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--se-graphite);
	border-bottom: 2px solid var(--se-graphite);
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--se-ease);
}
.lines-nav.has-overflow::after { opacity: .8; animation: se-nudge 1.8s ease-in-out infinite; }
@keyframes se-nudge {
	0%, 100% { transform: translate(0, -50%) rotate(-45deg); }
	50%      { transform: translate(4px, -50%) rotate(-45deg); }
}
.lines-nav__inner {
	display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 72px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 72px), transparent 100%);
	scroll-snap-type: x proximity; padding: .1rem 44px .1rem 0;
}
.lines-nav__inner::-webkit-scrollbar { display: none; }
.line-chip {
	white-space: nowrap; font-size: .8rem; font-weight: 500; letter-spacing: .01em;
	padding: .55rem 1.15rem; border: 2px solid var(--se-line); border-radius: 5px;
	color: var(--se-graphite); background: color-mix(in srgb, var(--se-white) 78%, transparent);
	backdrop-filter: blur(6px); cursor: pointer; scroll-snap-align: start;
	transition: color .3s var(--se-ease), background .3s var(--se-ease), border-color .3s var(--se-ease), transform .2s var(--se-ease);
}
.line-chip:hover { border-color: var(--se-black); color: var(--se-black); background: var(--se-white); }
.line-chip:active { transform: scale(.97); }
.line-chip.is-active { background: var(--se-gold); border-color: var(--se-gold); color: #fff; }

/* Ricerca: icona che si espande in campo, allineata a destra dei chip */
.catalog-search {
	position: relative; display: flex; align-items: center;
	flex: 0 0 auto; width: 46px; height: 46px; overflow: hidden;
	border: 1px solid var(--se-line); border-radius: 100px;
	background: color-mix(in srgb, var(--se-white) 78%, transparent);
	backdrop-filter: blur(6px);
	transition: width .4s var(--se-ease), border-color .3s var(--se-ease), box-shadow .3s var(--se-ease), background .3s var(--se-ease);
}
.catalog-search.is-open { width: min(340px, 62vw); background: var(--se-white); border-color: var(--se-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--se-gold) 14%, transparent); }
.catalog-search__toggle {
	flex: 0 0 44px; width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; background: transparent; cursor: pointer;
	color: var(--se-graphite); transition: color .3s var(--se-ease);
}
.catalog-search__toggle svg { width: 18px; height: 18px; }
.catalog-search:hover .catalog-search__toggle,
.catalog-search.is-open .catalog-search__toggle { color: var(--se-gold-deep); }
.catalog-search input {
	flex: 1 1 auto; min-width: 0; width: 0; opacity: 0;
	font-family: inherit; font-size: .95rem; color: var(--se-ink);
	border: 0; background: transparent; padding: 0;
	transition: opacity .25s var(--se-ease) .1s;
}
.catalog-search input:focus { outline: none; }
.catalog-search input::placeholder { color: var(--se-muted); }
.catalog-search.is-open input { opacity: 1; padding-right: .4rem; }
/* Niente X nativa del browser sull'input search (doppione) */
.catalog-search input::-webkit-search-cancel-button,
.catalog-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.catalog-search__clear {
	-webkit-appearance: none; appearance: none; /* iOS: senza, il bottone viene schiacciato in ovale */
	flex: 0 0 auto; width: 32px; height: 32px; aspect-ratio: 1 / 1;
	padding: 0; margin-right: .45rem; align-self: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--se-black); color: #fff;
	font-size: 0; line-height: 0; /* il glifo testuale è nascosto: la X è un SVG centrato */
	display: none; place-items: center; transition: background .2s var(--se-ease), transform .2s var(--se-ease);
}
.catalog-search__clear::before {
	content: ""; display: block; width: 12px; height: 12px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.catalog-search__clear:hover { background: var(--se-gold-deep); transform: scale(1.05); }
.catalog-search.is-open.has-value .catalog-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   9. SEZIONE LINEA — schema: texture + prodotti
   ============================================================ */
.line-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); scroll-margin-top: 150px; }
.line-section + .line-section { border-top: 1px solid var(--se-line); }
.line-section__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.line-section--reverse .line-section__media { order: 2; }

/* Immagine texture della linea (sticky) */
.line-section__media { position: sticky; top: 130px; aspect-ratio: 3/4; border-radius: var(--se-radius); overflow: hidden; background: linear-gradient(150deg, #2a2419 0%, var(--se-black) 70%); }
/* Immagine sovradimensionata: il parallax resta sempre dentro al contenitore. */
.line-section__media img { position: absolute; inset: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.line-section__media-caption {
	position: absolute; left: 0; bottom: 0; right: 0; z-index: 2;
	padding: 3.2rem 1.8rem 1.6rem;
	background: linear-gradient(0deg, rgba(20,17,12,.82) 0%, rgba(20,17,12,.55) 55%, rgba(20,17,12,0) 100%);
	color: #fff;
}
.line-section__media-caption .mark { width: 80px; margin-bottom: 1rem; }
.line-section__media-caption h2 { color: #fff; margin: 0; font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 700; }
.line-section__media-caption .tagline { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #f0d68a; margin-top: .5rem; display: block; }
.line-section__media-caption .caption-desc { color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.6; margin: .7rem 0 0; max-width: 46ch; }

/* Intestazione testuale della linea */
.line-section__head { margin-bottom: 2.4rem; }
.line-section__head .mark { width: 40px; margin-bottom: 1rem; }
.line-section__title { font-size: clamp(2.1rem, 3.6vw, 3.2rem); margin: 0 0 .2rem; }
.line-section__tagline { font-family: var(--se-font-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--se-gold-deep); display: block; margin-bottom: 1.3rem; }
.line-section__desc { color: var(--se-graphite); max-width: 58ch; }

/* Griglia prodotti della linea */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(1.4rem, 2.5vw, 2.2rem); margin-top: 2.2rem; }

/* ============================================================
   9b. CATALOGO V2 — banda orizzontale + griglia 4 colonne
   ============================================================ */
.line-block { padding-block: clamp(2.8rem, 6vw, 5rem); scroll-margin-top: 150px; }
.line-block + .line-block { border-top: 1px solid var(--se-line); }
.line-block--child { padding-block: clamp(2rem, 4vw, 3.2rem); border-top: 0 !important; }

.line-band { position: relative; border-radius: var(--se-radius-padre, 5px); overflow: hidden; aspect-ratio: 21/10; background: linear-gradient(150deg, #2a2419 0%, var(--se-black) 70%); }
.line-block--child .line-band {
	border-radius: var(--se-radius-figlie, 5px);
	aspect-ratio: 1 / 6;
	max-height: 220px;
	width: 100%;
	min-height: 80px;
	min-width: 0;
}
/* Modalità oro (opzione): gradiente e radius sulla BANDA;
   la caption resta senza alcun gradiente. */
.line-block--child .line-band.line-band--gold {
	background: linear-gradient(0deg, rgb(211 155 11) 0%, rgb(211 155 11 / 48%) 55%, rgba(20, 17, 12, 0) 100%);
	/* border-bottom-left-radius: 25px; */
	/* border-bottom-right-radius: 25px; */
}
.line-band--gold img { display: none; }
.line-block--child .line-band.line-band--gold h3 { color: #000; }
.line-block--child .line-band.line-band--gold p { color: #000; }
/* Caption compatta nelle sotto-sezioni (banda bassa) */
.line-block--child .line-band__caption { background: none; padding: 1.6rem clamp(1.4rem, 3vw, 2.4rem) 1.2rem; }
.line-block--child .line-band__caption .mark { width: 48px; margin-bottom: .6rem; }
.line-block--child .line-band__caption .mark svg { filter: none; }
/* Colore gestibile da Impostazioni sito (default: oro brand) */
.line-block--child .line-band__caption .mark svg [fill]:not([fill="none"]) { fill: var(--se-mark-figlie, #d39c0a); }
.line-block--child .line-band__caption .caption-desc { font-size: .88rem; margin-top: .4rem; }
.line-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.line-band__caption {
	position: absolute; inset: auto 0 0 0;
	padding: 4.5rem 2.4rem 2.2rem;
	background: linear-gradient(0deg, rgba(20,17,12,.82) 0%, rgba(20,17,12,.5) 55%, rgba(20,17,12,0) 100%);
	color: #fff;
}
.line-band__caption .mark { width: 80px; margin-bottom: 1rem; }
.line-band__caption h2, .line-band__caption h3,
.line-section__media-caption h2 { overflow-wrap: break-word; }
.line-band__caption h2, .line-band__caption h3 { color: #fff; margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; }
.line-band__caption .caption-desc { color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.6; margin: .6rem 0 0; max-width: 64ch; }

.product-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .product-grid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .product-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mobile: toolbar catalogo */
@media (max-width: 720px) {
	/* 16px = niente auto-zoom iOS al focus dell'input */
	.catalog-search input { font-size: 16px; }
	/* Fascia chip a tutta larghezza: parte dal bordo pagina con la sfumatura
	   a sinistra; il primo chip mantiene il margine per allinearsi al contenuto */
	.lines-nav { margin-left: calc(clamp(1.2rem, 4vw, 2.8rem) * -1); }
	.lines-nav__inner {
		padding-left: clamp(1.2rem, 4vw, 2.8rem) !important;
		scroll-padding-left: clamp(1.2rem, 4vw, 2.8rem);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13px, #000 calc(100% - 64px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 13px, #000 calc(100% - 64px), transparent 100%);
	}
	/* Copertine linee: altezza fissa, larghezza sempre = contenuto pagina
	   (aspect-ratio + min-height causava overflow orizzontale per size-transfer) */
	.line-band { aspect-ratio: auto; height: 320px; }
	.line-band__caption { padding-top: 3.4rem; padding-bottom: 1.6rem; }
}

/* ============================================================
   9c. GLIGHTBOX — overlay chiaro (override del CSS nativo)
   ============================================================ */
.goverlay { background: rgb(255 255 255) !important; }
.glightbox-clean .gprev, .glightbox-clean .gnext { background: transparent !important; }
.glightbox-clean .gprev svg path, .glightbox-clean .gnext svg path { fill: var(--se-black) !important; }
/* Chiusura: stessa X della barra di ricerca (cerchio nero, X bianca) */
.glightbox-clean .gclose {
	width: 40px !important; height: 40px !important; border-radius: 50%;
	background: var(--se-black) !important; opacity: 1 !important;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s var(--se-ease), transform .2s var(--se-ease);
}
.glightbox-clean .gclose svg { width: 16px; height: 16px; }
.glightbox-clean .gclose svg path { fill: #fff !important; }
.glightbox-clean .gclose:hover { background: var(--se-gold-deep) !important; transform: scale(1.05); }
/* Animazioni più reattive (default .5s = chiusura percepita in ritardo) */
.gfadeIn { animation-duration: .28s !important; }
.gfadeOut { animation-duration: .15s !important; }
.gzoomIn { animation-duration: .3s !important; }
.gzoomOut { animation-duration: .15s !important; }
.glightbox-clean .gslide-media { box-shadow: none !important; }
.glightbox-clean .gslide-description { background: var(--se-white); }
.glightbox-clean .gslide-title { color: var(--se-black); }

/* ============================================================
   10. CARD PRODOTTO (senza prezzo, con codice)
   ============================================================ */
.product-card { display: flex; flex-direction: column; text-align: left; }
.product-card__media {
	position: relative; display: block; aspect-ratio: 1/1;
	background: transparent;
	border: 1px solid var(--se-line); border-radius: 5px;
	overflow: hidden; padding: 12%;
	transition: border-color var(--se-t) var(--se-ease), transform var(--se-t) var(--se-ease), box-shadow var(--se-t) var(--se-ease), background var(--se-t) var(--se-ease);
}
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--se-ease); mix-blend-mode: multiply; }
.product-card:hover .product-card__media { transform: translateY(-4px); box-shadow: var(--se-shadow); border-color: transparent; background: var(--se-white); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
/* Logo DOP nelle card: in basso a destra */
.product-card__cert { position: absolute; bottom: .7rem; right: .7rem; z-index: 2; line-height: 0; }
.product-card__cert svg { height: 44px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)); }
.product-card__badge { position: absolute; top: .7rem; right: .7rem; font-family: var(--se-font-sans); font-size: .58rem; font-weight: 700; letter-spacing: .1em; line-height: 1.4; background: var(--se-gold); color: #fff; padding: .2rem .5rem; border-radius: 2px; }
/* Scheda prodotto: badge su riga propria, sotto il titolo */
.single-product__badge { position: static; display: inline-block; margin: .6rem 0 0; }
/* Logo consorzio DOP al posto del badge testuale */
.single-product__cert { display: inline-block; line-height: 0; margin: .8rem 0 0; }
.single-product__cert svg { height: 76px; width: auto; }

/* Breadcrumb (Rank Math) vestiti dal tema */
.se-breadcrumbs {
	margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
	font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.se-breadcrumbs .rank-math-breadcrumb p { margin: 0; }
.se-breadcrumbs a { color: var(--se-graphite); transition: color .3s var(--se-ease); }
.se-breadcrumbs a:hover { color: var(--se-gold-deep); }
.se-breadcrumbs .separator { margin: 0 .55em; color: var(--se-gold); }
.se-breadcrumbs .last { color: var(--se-muted); }

/* Freccia "torna al catalogo" (in alto a sinistra della scheda) */
.back-link {
	position: relative; z-index: 5;
	display: inline-flex; align-items: center; gap: .55rem;
	margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
	font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--se-graphite); transition: color .3s var(--se-ease);
}
.back-link svg { width: 17px; height: 17px; transition: transform .3s var(--se-ease); }
.back-link:hover { color: var(--se-gold-deep); }
.back-link:hover svg { transform: translateX(-4px); }
.product-card__body { padding: 1rem .1rem 0; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-card__name { font-family: var(--se-font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--se-black); line-height: 1.35; margin: 0; }
.product-card__name a { transition: color .3s var(--se-ease); }
.product-card__name a:hover { color: var(--se-gold-deep); }
.product-card__code { font-size: .72rem; color: var(--se-muted); letter-spacing: .05em; margin-top: auto; padding-top: .5rem; }
.product-card__code::before { content: ""; display: block; width: 28px; height: 1px; background: var(--se-gold); margin: 0 0 .6rem; }
.product-card__media-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #cfc9bc; font-family: var(--se-font-serif); font-style: italic; }

/* Sezione home "Mappa territorio": composizione illustrata full-bleed.
   Tutte le coordinate sono % misurate sulla composizione 1980x1401:
   restano incollate al punto esatto a qualunque larghezza. */
.map-story { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
/* Desktop: la testa (logo+intro) è un overlay sullo stage, coordinate come prima */
.map-story__head { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Bordi che si fondono con la texture della pagina (mask a trasparente).
   Attivabili singolarmente dai toggle del layout: sopra, sotto o entrambi. */
.map-story__stage--fade-top {
	-webkit-mask-image: linear-gradient(180deg, transparent 1%, #000 22%);
	mask-image: linear-gradient(180deg, transparent 1%, #000 22%);
}
.map-story__stage--fade-bottom {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 99%);
	mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 99%);
}
.map-story__stage--fade-top.map-story__stage--fade-bottom {
	-webkit-mask-image: linear-gradient(180deg, transparent 1%, #000 22%, #000 78%, transparent 99%);
	mask-image: linear-gradient(180deg, transparent 1%, #000 22%, #000 78%, transparent 99%);
}
.map-story__stage { position: relative; }
.map-story__bg { display: block; width: 100%; height: auto; }

.map-story__path { position: absolute; line-height: 0; pointer-events: none; }
.map-story__traveler {
	position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--se-gold);
	box-shadow: 0 0 0 4px rgb(211 156 10 / 22%), 0 2px 8px rgb(20 17 12 / 25%);
	opacity: 0;
}
.map-story__path svg { width: 100%; height: auto; display: block; }
.map-story__path--1 { left: 36.52%; top: 25.98%; width: 54.34%; }
.map-story__path--2 { left: 14.14%; top: 26.27%; width: 32.73%; }

/* Logo illustrativo: centrato sul blocco del testo intro, appena sopra */
.map-story__logo { position: absolute; left: 20%; top: 14.5%; width: 10%; min-width: 90px; pointer-events: none; }
.map-story__logo svg { width: 100%; height: auto; }

.map-story__intro {
	position: absolute; left: 11%; top: 26%; width: 28%;
	margin: 0; text-align: center;
	font-family: "Bad Script", cursive;
	font-size: clamp(1rem, 1.75vw, 2.1rem);
	line-height: 1.5; color: var(--se-black);
}

/* Pin: la PUNTA è ancorata alle coordinate (translate -50%,-100%) */
.map-story__pin { position: absolute; transform: translate(-50%, -100%); text-align: center; }
.map-story__pin--1 { left: 78.26%; top: 28.55%; }
.map-story__pin--2 { left: 33.96%; top: 60.24%; }
.map-story__pin-icon { display: block; width: clamp(22px, 3vw, 60px); margin-inline: auto; }
.map-story__pin-icon svg { width: 100%; height: auto; display: block; }

/* Testi dei pin: sotto la punta, centrati sul pin */
.map-story__pin-copy {
	position: absolute; top: calc(100% + .4em); left: 50%; transform: translateX(-50%);
	width: 24em; max-width: 30vw;
}
.map-story__pin-copy h3 {
	margin: 0 0 .45em; font-family: var(--se-font-serif);
	font-size: clamp(.9rem, 1.5vw, 1.75rem); font-weight: 500; color: var(--se-black);
}
.map-story__pin-copy p {
	margin: 0; font-size: clamp(.62rem, .95vw, 1.05rem);
	line-height: 1.55; color: var(--se-ink);
}

/* ------------------------------------------------------------------
   Modalità desktop "Mappa fissa + scroll" (.map-story--scrub):
   composizione ORIGINALE (logo e intro dentro la mappa, posizione
   classica — via JS entrano nello stage e viaggiano con lei);
   la mappa si fissa e lo scroll compone pin e tracce. Il mobile
   (max 760) ha le sue regole dedicate e NON passa di qui.
------------------------------------------------------------------ */
@media (min-width: 761px) {
.map-story--scrub { overflow: visible; }
.map-story--scrub .map-story__scroll { height: 250vh; }
.map-story--scrub .map-story__viewport {
	position: sticky; top: 65px;
	height: min(calc(100svh - 65px), 70.8vw); /* mai piu' alta della mappa */
	overflow: hidden;
}
/* Sfumature: seguono i toggle del layout (le classi stanno sullo stage,
   la mask va sulla viewport fissa -> :has) */
.map-story--scrub .map-story__viewport:has(.map-story__stage--fade-top) {
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 9%);
}
.map-story--scrub .map-story__viewport:has(.map-story__stage--fade-bottom) {
	-webkit-mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
}
.map-story--scrub .map-story__viewport:has(.map-story__stage--fade-top):has(.map-story__stage--fade-bottom) {
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.map-story--scrub .map-story__stage { width: 100%; }
/* La viewport sticky ritaglia la parte alta della mappa (crop centrato):
   logo e intro scendono per restare pienamente in campo */
.map-story--scrub .map-story__logo { top: 25%; }
.map-story--scrub .map-story__intro { top: 36%; }
/* Pin 2: testo piu' largo -> meno alto, non scende mai sotto il taglio */
.map-story--scrub .map-story__pin--2 .map-story__pin-copy { width: 36em; max-width: 42vw; }
/* Pin piu' discreti in questa modalita' */
.map-story--scrub .map-story__pin-icon { width: clamp(20px, 1.8vw, 40px); }
/* Il percorso 2 qui non serve: la storia si chiude sul pin di Neviano */
.map-story--scrub .map-story__path--2 { display: none; }
.map-story--scrub .map-story__stage--fade-top,
.map-story--scrub .map-story__stage--fade-bottom,
.map-story--scrub .map-story__stage--fade-top.map-story__stage--fade-bottom {
	-webkit-mask-image: none; mask-image: none;
}
}

@media (max-width: 760px) {
	/* overflow:hidden su un antenato ROMPE position:sticky -> sbloccato qui;
	   la protezione orizzontale resta sulla viewport e sul clip globale del body */
	.map-story { overflow: visible; }
	/* Le mask desktop viaggerebbero con lo stage durante il pan: qui le
	   fissiamo alla VIEWPORT (sfumatura stabile ai bordi dello schermo). */
	.map-story__stage--fade-top,
	.map-story__stage--fade-bottom,
	.map-story__stage--fade-top.map-story__stage--fade-bottom {
		-webkit-mask-image: none; mask-image: none;
	}
	.map-story__viewport {
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	}

	/* Testa statica a larghezza piena */
	.map-story__head { position: static; padding: 2.2rem 1.4rem 1.2rem; pointer-events: auto; }
	.map-story__logo { position: static; width: 46%; min-width: 130px; max-width: 200px; margin: 0 auto 1.2rem; }
	.map-story__intro { position: static; width: 100%; font-size: 1.25rem; }

	/* Pan guidato dallo scroll: viewport sticky, mappa zoomata che scorre da pin 1 a pin 2 */
	.map-story__scroll { height: 260svh; }
	.map-story__viewport { position: sticky; top: 65px; height: calc(100svh - 65px); overflow: hidden; }
	.map-story__stage { width: 240%; will-change: transform; }

	.map-story__pin-copy { width: 220px; max-width: 60vw; }
	.map-story__pin-copy h3 { font-size: 1.05rem; }
	.map-story__pin-copy p { font-size: .78rem; }
}

/* Sezione home "Testo animato": 50% centrato, lettere che compaiono allo scroll */
.home-text-reveal {
	width: 50%; min-width: min(100%, 34ch); margin-inline: auto;
	text-align: center;
	font-family: var(--se-font-serif);
	font-size: var(--se-ta-size, clamp(1.5rem, 2.6vw, 2.4rem));
	font-weight: var(--se-ta-weight, 500); line-height: var(--se-ta-lh, 1.4); color: var(--se-black);
}
.home-text-reveal .accent { color: var(--se-gold-deep); font-style: italic; }
.section--text-anim {
	position: relative; z-index: 2;
	margin-top: var(--se-ta-mt, 0);
	margin-bottom: var(--se-ta-mb, 0);
}
/* Tablet (761–1024): margini dedicati, altrimenti eredita il desktop */
@media (max-width: 1024px) {
	.section--text-anim {
		margin-top: var(--se-ta-mt-t, var(--se-ta-mt, 0));
		margin-bottom: var(--se-ta-mb-t, var(--se-ta-mb, 0));
	}
}
@media (max-width: 760px) {
	.section--text-anim {
		margin-top: var(--se-ta-mt-m, var(--se-ta-mt-t, var(--se-ta-mt, 0)));
		margin-bottom: var(--se-ta-mb-m, var(--se-ta-mb-t, var(--se-ta-mb, 0)));
	}
}
.home-text-reveal p { margin: 0 0 .65em; }
.home-text-reveal p:last-child { margin-bottom: 0; }
.home-text-reveal .word { display: inline-block; white-space: nowrap; }
.home-text-reveal .char { display: inline-block; will-change: opacity, transform; }
@media (max-width: 760px) { .home-text-reveal { width: 100%; } }

/* Sezione home "Mappa": immagine + testo + link su fondo colore */
.home-map {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
	background: var(--se-map-bg, var(--se-cream));
	border-radius: 5px; overflow: hidden;
	padding: clamp(1.8rem, 4vw, 3.2rem);
}
.home-map__title { margin: 0 0 1rem; }
.home-map__text { color: var(--se-graphite); max-width: 46ch; margin: 0 0 1.8rem; }
.home-map__media { line-height: 0; }
.home-map__media img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 860px) {
	.home-map { grid-template-columns: 1fr; }
	.home-map__media { order: -1; }
}

/* Griglia linee home: colonne gestibili da Impostazioni sito */
.home-lines-grid { grid-template-columns: repeat(var(--se-home-cols, 3), minmax(0, 1fr)); }
@media (max-width: 960px) { .home-lines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-lines-grid { grid-template-columns: 1fr; } }

/* Card linee in home: gradiente nero->trasparente + descrizione in basso */
.line-card__overlay {
	position: absolute; inset: auto 0 0 0; z-index: 1;
	padding: 3.2rem 1.1rem 1.1rem;
	background: linear-gradient(0deg, rgba(20,17,12,.85) 0%, rgba(20,17,12,.45) 55%, rgba(20,17,12,0) 100%);
	pointer-events: none;
}
.line-card__desc {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	color: rgba(255,255,255,.92); font-size: .95rem; line-height: 1.55; text-transform: none;
	letter-spacing: 0; font-weight: 400;
}
.line-card .product-card__name { font-size: 1.05rem; letter-spacing: .04em; }
.line-card:hover .product-card__media img { transform: scale(1.04); }

/* ============================================================
   11. SINGOLO PRODOTTO
   ============================================================ */
.single-product { padding-block: clamp(2.5rem, 6vw, 5rem); }
.single-product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.single-product__media { position: sticky; top: 100px; background: transparent; border: 1px solid var(--se-line); border-radius: 5px; padding: 3rem; }
.single-product__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; }
.single-product__line { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--se-gold-deep); }
.single-product__title { font-size: clamp(2.2rem, 4vw, 3.4rem); margin: .3rem 0; }
.single-product__code { font-size: .85rem; color: var(--se-muted); letter-spacing: .06em; margin-bottom: 1.6rem; }
.single-product__desc { color: var(--se-graphite); }
.single-product__desc h3 { color: var(--se-black); margin-top: 2rem; }
.spec-table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.spec-table tr { border-bottom: 1px solid var(--se-line); }
.spec-table th, .spec-table td { text-align: left; padding: .8rem 0; font-size: .92rem; }
.spec-table th { width: 40%; font-weight: 500; color: var(--se-muted); font-family: var(--se-font-sans); }
.single-product__cta { margin-top: 2rem; padding: 1.8rem; border: 1px solid var(--se-line); border-radius: var(--se-radius); background: var(--se-cream); }
.single-product__cta h3 { margin-top: 0; }
.single-product__cta p { color: var(--se-graphite); }
.single-product__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }

/* Correlati */
.related { margin-top: var(--se-section); padding-top: 2.5rem; border-top: 1px solid var(--se-line); }

/* ============================================================
   11b. SIGILLO / BOLLINO — dimensioni esplicite
   ============================================================ */
.bollino, .mark, .hero-seal { display: inline-block; line-height: 0; }
.bollino { width: 100px; }
.mark { width: 40px; }
.hero-seal { width: 120px; margin-bottom: 1.2rem; display: block; }
/* Ombra per rendere il bollino bianco sempre leggibile su qualunque sfondo */
.bollino svg, .mark svg, .hero-seal svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }

/* ============================================================
   11c. PAGINA CONTATTI
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }

.contact-card { border: 1px solid var(--se-line); border-radius: 5px; padding: clamp(1.6rem, 3vw, 2.2rem); background: color-mix(in srgb, var(--se-white) 55%, transparent); }
.contact-card h3 { font-family: var(--se-font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--se-gold-deep); margin: 1.4rem 0 .35rem; }
.contact-card h3:first-child { margin-top: 0; }
.contact-card__row { font-style: normal; color: var(--se-ink); margin: 0; font-size: 1.02rem; line-height: 1.6; }
.contact-card__row a { border-bottom: 2px solid var(--se-line); transition: color .3s var(--se-ease), border-color .3s var(--se-ease); }
.contact-card__row a:hover { color: var(--se-gold-deep); border-color: var(--se-gold); }
.contact-card__brand { margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--se-line); font-size: .85rem; color: var(--se-muted); }

.contact-map { margin-top: 1.2rem; border-radius: 5px; overflow: hidden; border: 1px solid var(--se-line); aspect-ratio: 4/3; }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85) contrast(1.02); }

.contact-form-wrap h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1.4rem; }
.contact-form { display: grid; gap: 1.2rem; }
.form-row label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--se-graphite); margin-bottom: .45rem; }
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row textarea {
	width: 100%; font-family: inherit; font-size: 16px; color: var(--se-ink);
	padding: .9rem 1.1rem; border: 1px solid var(--se-line); border-radius: 5px;
	background: var(--se-white);
	transition: border-color .3s var(--se-ease), box-shadow .3s var(--se-ease);
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--se-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--se-gold) 14%, transparent); }
.form-row textarea { resize: vertical; min-height: 140px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-row--check { display: flex; align-items: flex-start; gap: .7rem; }
.form-row--check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--se-gold-deep); flex: 0 0 auto; }
.form-row--check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .88rem; color: var(--se-graphite); margin: 0; }
.contact-form .btn-primary { justify-self: start; }

/* WPForms con lo stile del tema — skin globale: funziona sia col campo ID
   della pagina Contatti sia con lo shortcode incollato in qualsiasi editor. */
.site-main .wpforms-container,
.site-main .wpforms-form,
.site-main .wpforms-field-container,
.site-main .wpforms-field-row {
	width: 100% !important; max-width: none !important;
}
.site-main .wpforms-field { padding: 0 0 1.2rem !important; }
.site-main .wpforms-field-label {
	display: block; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .08em;
	text-transform: uppercase; color: var(--se-graphite) !important; margin-bottom: .45rem;
}
.site-main .wpforms-field-sublabel {
	font-size: .68rem !important; letter-spacing: .06em; text-transform: uppercase;
	color: var(--se-muted) !important; margin-top: .35rem;
}
/* Mezze colonne (Nome/Cognome): flex pulito su QUALSIASI riga, niente float/negative margin */
.site-main .wpforms-field-row {
	display: flex !important; gap: 1.2rem; justify-content: flex-start;
	margin: 0 !important;
}
.site-main .wpforms-field-row::before,
.site-main .wpforms-field-row::after { content: none !important; }
.site-main .wpforms-field-row .wpforms-field-row-block,
.site-main .wpforms-one-half, .site-main .wpforms-two-fifths, .site-main .wpforms-three-fifths {
	float: none !important; margin: 0 !important; padding: 0 !important; /* via l'indent della prima colonna */
	width: auto !important; flex: 1 1 0; min-width: 0;
}
/* Telefono internazionale: spazio per la bandierina (il nostro padding la copriva) */
.site-main .wpforms-form .iti input[type="tel"],
.site-main .wpforms-form .wpforms-field-phone input[type="tel"] {
	padding-left: 3.4rem !important;
}
.site-main .wpforms-form input[type="text"],
.site-main .wpforms-form input[type="email"],
.site-main .wpforms-form input[type="tel"],
.site-main .wpforms-form input[type="number"],
.site-main .wpforms-form select,
.site-main .wpforms-form textarea {
	width: 100% !important; max-width: none !important;
	font-family: inherit !important; font-size: 16px !important; color: var(--se-ink) !important;
	padding: .9rem 1.1rem !important; border: 1px solid var(--se-line) !important; border-radius: 5px !important;
	background: var(--se-white) !important; box-shadow: none;
	transition: border-color .3s var(--se-ease), box-shadow .3s var(--se-ease);
}
.site-main .wpforms-form input:focus,
.site-main .wpforms-form select:focus,
.site-main .wpforms-form textarea:focus {
	outline: none !important; border-color: var(--se-gold) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--se-gold) 14%, transparent) !important;
}
.site-main .wpforms-form textarea { resize: vertical; min-height: 140px !important; }
.site-main .wpforms-form .wpforms-submit,
.site-main .wpforms-form button[type="submit"] {
	display: inline-flex !important; align-items: center; gap: .7rem;
	font-family: var(--se-font-sans) !important; font-size: .78rem !important; font-weight: 600 !important;
	letter-spacing: .12em !important; text-transform: uppercase !important;
	padding: 1rem 1.9rem !important; border: 1px solid transparent !important; border-radius: var(--se-radius) !important;
	background: var(--se-black) !important; color: #fff !important; cursor: pointer;
	transition: background var(--se-t) var(--se-ease), color var(--se-t) var(--se-ease), transform .2s var(--se-ease) !important;
}
.site-main .wpforms-form .wpforms-submit::after,
.site-main .wpforms-form button[type="submit"]::after {
	content: ""; display: inline-block; width: 15px; height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .3s var(--se-ease);
}
.site-main .wpforms-form .wpforms-submit:hover,
.site-main .wpforms-form button[type="submit"]:hover { background: var(--se-gold) !important; color: var(--se-black) !important; transform: translateY(-2px); }
.site-main .wpforms-form .wpforms-submit:hover::after,
.site-main .wpforms-form button[type="submit"]:hover::after { transform: translateX(4px); }
.site-main .wpforms-error { color: #8a3325 !important; font-size: .82rem; margin-top: .35rem; }
.site-main .wpforms-confirmation-container-full { background: #eef7ec; border: 1px solid #bfe0b8; color: #2f5d28; border-radius: 5px; padding: 1rem 1.2rem; }

.form-notice { padding: 1rem 1.2rem; border-radius: 5px; margin-bottom: 1.4rem; font-size: .95rem; }
.form-notice--ok { background: #eef7ec; border: 1px solid #bfe0b8; color: #2f5d28; }
.form-notice--err { background: #fdf0ee; border: 1px solid #f0c4bc; color: #8a3325; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 960px) {
	.contact-grid { grid-template-columns: 1fr; }
	.form-row--split { grid-template-columns: 1fr; }
}

/* ============================================================
   12. CTA BANNER / FOOTER
   ============================================================ */
/* CTA finale — full-bleed editoriale */
.cta-xl { position: relative; overflow: hidden; background: var(--se-black); color: #fff; margin-top: var(--se-section); }
/* Solo in home la CTA si attacca alla sezione precedente */
.page-template-template-home .cta-xl { margin-top: 0; }
.cta-xl__bg { position: absolute; inset: 0; z-index: 0; }
.cta-xl__bg img {
	width: 100%; height: 112%; object-fit: cover; position: absolute; top: -6%;
	opacity: .38; filter: saturate(.65) contrast(1.05) brightness(.75);
}
.cta-xl::after { content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(105deg, rgba(20,17,12,.92) 0%, rgba(20,17,12,.65) 55%, rgba(20,17,12,.35) 100%); }

/* Marquee di brand — loop ciclico continuo (due metà identiche = -50% seamless) */
.cta-xl__marquee { position: relative; z-index: 2; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.14); padding: .85rem 0; }
.cta-xl__track { display: flex; width: max-content; align-items: center; animation: se-marquee 80s linear infinite; will-change: transform; }
.cta-xl__half { display: flex; align-items: center; flex: 0 0 auto; }
.cta-xl__item {
	display: inline-flex; align-items: center; line-height: 1;
	font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(255,255,255,.75); white-space: nowrap;
	padding-left: 1.7rem;
}
.cta-xl__item::after {
	content: ""; display: inline-block; width: 6px; height: 6px;
	background-color: var(--se-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z'/%3E%3C/svg%3E") no-repeat center / contain;
	margin-left: 1.7rem;
}
@keyframes se-marquee { to { transform: translateX(-50%); } }

/* Contenuto */
.cta-xl__inner { position: relative; z-index: 2; padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.cta-xl__content { max-width: 62ch; }
.cta-xl__title { color: #fff; font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 600; line-height: 1.02; margin: 0 0 1.2rem; }
.cta-xl__title .accent { color: var(--se-gold); font-style: italic; }
.cta-xl__text { color: rgba(255,255,255,.78); font-size: 1.08rem; max-width: 48ch; margin: 0 0 2.4rem; }

/* Azioni */
.cta-xl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.cta-xl__btn {
	display: inline-flex; align-items: center; gap: 1rem;
	font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--se-black); background: var(--se-gold);
	padding: 1.15rem 1.4rem 1.15rem 2rem; border-radius: 100px;
	transition: background .4s var(--se-ease), color .4s var(--se-ease), transform .3s var(--se-ease), box-shadow .4s var(--se-ease);
}
.cta-xl__btn-arrow {
	display: grid; place-items: center; width: 34px; height: 34px;
	border-radius: 50%; background: rgba(20,17,12,.14); font-size: 1rem;
	transition: transform .35s var(--se-ease), background .35s var(--se-ease);
}
.cta-xl__btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.cta-xl__btn:hover .cta-xl__btn-arrow { transform: translateX(4px); background: var(--se-gold); }
.cta-xl__alt { font-size: .92rem; color: rgba(255,255,255,.72); border-bottom: 2px solid rgba(255,255,255,.28); padding-bottom: .15rem; transition: color .3s var(--se-ease), border-color .3s var(--se-ease); }
.cta-xl__alt:hover { color: var(--se-gold); border-color: var(--se-gold); }

/* Bollino rotante (timbro) */
.cta-xl__seal {
	position: absolute; right: clamp(1.5rem, 6vw, 5rem); bottom: clamp(2rem, 6vw, 4.5rem);
	width: clamp(88px, 10vw, 130px); z-index: 2; opacity: .95;
	animation: se-seal-spin 34s linear infinite;
}
@keyframes se-seal-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
	.cta-xl__seal { position: static; display: block; width: 84px; margin-top: 2.4rem; animation-duration: 40s; }
	.cta-xl__actions { gap: 1.1rem; }
}

.site-footer { background: var(--se-white); color: var(--se-graphite); padding-block: clamp(4rem,8vw,6rem) 2rem; margin-top: 0; border-top: 1px solid var(--se-black); }
.site-footer a { color: var(--se-graphite); transition: color .3s var(--se-ease); }
.site-footer a:hover { color: var(--se-gold-deep); }


/* Blocco brand centrato */
.site-footer__brand { text-align: center; }
.site-footer__brand .brand-logo--xl svg, .site-footer__brand .brand-logo--xl img { height: clamp(64px, 8vw, 92px); width: auto; }
.site-footer__tagline { font-family: "Bad Script", var(--se-font-serif), cursive; font-size: 1.25rem; color: var(--se-muted); margin: 1.1rem 0 0; }

/* Navigazione centrata in riga */
.site-footer__nav { margin-top: 2.6rem; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.4rem, 3.5vw, 3rem); }
.site-footer__nav a {
	font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--se-black); position: relative; padding-bottom: .3rem;
}
.site-footer__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--se-gold); transition: width .35s var(--se-ease); }
.site-footer__nav a:hover::after { width: 100%; }

/* Contatti centrati in riga */
.site-footer__contacts {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: .6rem 0; margin-top: 1.8rem; font-size: .9rem; color: var(--se-muted);
}
.site-footer__contacts span { display: inline-flex; align-items: center; }
.site-footer__contacts span + span::before {
	content: ""; display: inline-block; width: 5px; height: 5px;
	background-color: var(--se-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z'/%3E%3C/svg%3E") no-repeat center / contain;
	margin: 0 1.1rem;
}
.site-footer__contacts a { border-bottom: 2px solid transparent; }
.site-footer__contacts a:hover { border-color: var(--se-gold); }

/* Barra finale: copyright · firma Mascarin · social */
.site-footer__bottom {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.8rem;
	border-top: 1px solid var(--se-line);
	font-size: .8rem; color: var(--se-muted);
}
.site-footer__copy { justify-self: start; }
.social-links { display: flex; gap: 1.2rem; justify-self: center; }
.site-footer__spacer { justify-self: center; }

.footer-mascarin { display: inline-flex; line-height: 0; justify-self: end; }
.footer-mascarin svg { height: 36px; width: auto; }

/* Mappa Leaflet brandizzata (Contatti) */
.se-map { width: 100%; height: 420px; border: 1px solid var(--se-line); border-radius: 5px; overflow: hidden; z-index: 1; }
.se-map .leaflet-popup-content-wrapper { border-radius: 5px; box-shadow: 0 14px 34px -16px rgba(20,17,12,.4); font-family: var(--se-font-sans); }
.se-map-popup { display: grid; gap: .3rem; font-size: .88rem; color: var(--se-graphite); }
.se-map-popup strong { font-size: .95rem; color: var(--se-black); }
.se-map-popup a { color: var(--se-gold-deep); font-weight: 600; border-bottom: 2px solid var(--se-gold); width: fit-content; }
.se-map .leaflet-control-attribution { font-size: .62rem; background: rgba(255,255,255,.75); }

/* Firma "Sant'Elia è un marchio di Mascarin Srl" (solo menu mobile) */
.brandline { display: none; flex-direction: column; gap: .7rem; }
.brandline .mascarin-logo { display: inline-block; line-height: 0; }
.brandline .mascarin-logo svg, .brandline .mascarin-logo img { height: 34px; width: auto; }
.brandline__text { font-size: .8rem; color: var(--se-muted); line-height: 1.45; }

@media (max-width: 760px) {
	.site-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.4rem; }
	.site-footer__copy, .social-links, .site-footer__spacer, .footer-mascarin { justify-self: center; }
	.site-footer__contacts { flex-direction: column; }
	.site-footer__contacts span + span::before { content: none; }
}

/* ============================================================
   13. ANIMAZIONI
   ============================================================ */
.animate-on-scroll { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.animate-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
	.line-section__grid { grid-template-columns: 1fr; }
	.line-section--reverse .line-section__media { order: 0; }
	.line-section__media { position: static; aspect-ratio: 16/9; }
	.single-product__grid { grid-template-columns: 1fr; }
	.single-product__media { position: static; }
	.story { grid-template-columns: 1fr; }
	.story--reverse .story__media { order: 0; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.nav-toggle { display: block; }

	/* Overlay scuro dietro il pannello (clic fuori = chiusura, già gestita in JS) */
	body::after {
		content: ""; position: fixed; inset: 0; z-index: 85;
		background: rgba(20, 17, 12, .55);
		backdrop-filter: blur(2px);
		opacity: 0; pointer-events: none;
		transition: opacity .45s var(--se-ease);
	}
	body.menu-open::after { opacity: 1; pointer-events: auto; }

	.primary-nav {
		position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
		border-radius: 32px 0 0 32px;   /* angoli sinistri ampi */
		background-color: var(--se-paper);
		background-image: url("assets/images/sfondo.png");
		background-size: 580px auto; background-repeat: repeat;
		padding: 6rem 2.2rem 2rem;
		transform: translateX(100%);
		transition: transform .6s cubic-bezier(.77,0,.18,1);
		box-shadow: -30px 0 80px rgba(20,17,12,.16);
		z-index: 90;
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav ul { flex-direction: column; gap: 1.6rem; }

	/* Voci: entrata in dissolvenza a cascata (solo fade + ritardo) */
	.primary-nav li {
		opacity: 0;
		transition: opacity .35s var(--se-ease);
	}
	.primary-nav.is-open li {
		opacity: 1;
		transition: opacity .6s var(--se-ease);
	}
	.primary-nav.is-open li:nth-child(1) { transition-delay: .18s; }
	.primary-nav.is-open li:nth-child(2) { transition-delay: .26s; }
	.primary-nav.is-open li:nth-child(3) { transition-delay: .34s; }
	.primary-nav.is-open li:nth-child(4) { transition-delay: .42s; }
	.primary-nav.is-open li:nth-child(5) { transition-delay: .50s; }
	.primary-nav.is-open li:nth-child(6) { transition-delay: .58s; }
	.primary-nav.is-open li:nth-child(7) { transition-delay: .66s; }
	.primary-nav.is-open li:nth-child(8) { transition-delay: .74s; }

	/* Voci: hover con sola sottolineatura */
	.primary-nav a { font-size: 1.7rem; font-family: var(--se-font-serif); font-weight: 500; display: inline-block; transition: color .3s var(--se-ease); }
	.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--se-gold-deep); }
	.primary-nav a::after { height: 2px; background: var(--se-gold); }

	/* Pannello come colonna: la firma Mascarin va in fondo */
	.primary-nav { display: flex; flex-direction: column; }
	.primary-nav ul { width: 100%; }
	.primary-nav .brandline { width: 100%; }
	.primary-nav .brandline { display: flex; align-items: flex-start; text-align: left; margin-top: auto; padding-top: 1.8rem; border-top: 1px solid var(--se-line); }
	.primary-nav .nav-mascarin { display: none; }
	.values { grid-template-columns: 1fr; gap: 1.5rem; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}