/* ============================================================
   VDU Prodotti — sezione "Prodotti dell'azienda" — v.002 (19.10.2026,
   RUN-VDU-RIORDINO-2). Rispetto alla v.001: foto delle schede cliccabili con
   l'effetto della galleria, riquadro Punto Vendita senza pulsante e con titolo
   e testo piu' grandi, pulsanti Spedizioni nel sistema condiviso
   (vdu-comune/pulsanti/v.001: qui restano SOLO i colori di marca).
   Sito Valle degli Ulivi. Stessa lingua visiva del blocco Picnic al
   Caseificio (vdu-picnic v.004): stessi token, stessi caratteri, stesse
   carte con bordo e ombra, stessi riquadri contrastati verde scuro.
   TUTTO scoped sotto .vdu-prodotti — nessun selettore globale.

   SPECIFICITA' — la regola del sito, pagata due volte sui blocchi
   picnic e cheese: i reset di elemento (.vdu-prodotti h2/h3/p/a/button)
   valgono 0,1,1 e batterebbero una regola di sola classe. Quindi OGNI
   regola di componente e' scritta .vdu-prodotti .vdu-prodotti-<classe>
   (0,2,0), e ogni valore ridichiarato in una media query sta anch'esso
   a 0,2,0: una media query non aggiunge specificita'.
   ============================================================ */

.vdu-prodotti,
.vdu-prodotti *,
.vdu-prodotti *::before,
.vdu-prodotti *::after { box-sizing: border-box; }

.vdu-prodotti {
	--vdu-paper:      #FFFDF8;
	--vdu-ink:        #2A2722;
	--vdu-ink-soft:   #5A534A;
	--vdu-gold:       #B8902F;
	--vdu-gold-deep:  #8A6A1E;
	--vdu-gold-soft:  #C9A24B;
	--vdu-line:       #E4D9C2;
	--vdu-olive:      #5E6B43;
	--vdu-olive-deep: #43502E;
	--vdu-olive-cream:#EEF0E2;
	--vdu-green:      rgb(25, 160, 41);
	--vdu-shadow:     0 18px 50px -22px rgba(60,46,16,.45);
	--vdu-shadow-sm:  0 8px 24px -14px rgba(60,46,16,.4);
	--vdu-serif:      'Cormorant Garamond', Georgia, serif;
	--vdu-sans:       'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	position: relative;
	display: block;
	padding: 69px 0 72px;
	background: var(--vdu-olive-cream);
	color: var(--vdu-ink);
	font-family: var(--vdu-sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

/* reset di elemento confinati */
.vdu-prodotti h2,
.vdu-prodotti h3 { font-family: var(--vdu-serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: .2px; color: var(--vdu-ink); }
.vdu-prodotti p { margin: 0 0 1em; }
.vdu-prodotti img { display: block; max-width: 100%; height: auto; }
.vdu-prodotti button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; margin: 0; padding: 0; }
.vdu-prodotti a { color: inherit; text-decoration: none; }
.vdu-prodotti svg { display: inline-block; vertical-align: middle; }
.vdu-prodotti strong { font-weight: 800; color: var(--vdu-ink); }

.vdu-prodotti .vdu-prodotti-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.vdu-prodotti .vdu-prodotti-icon { flex-shrink: 0; }

/* ── TESTA: titolo, sottotitolo, introduzione ─────────────────── */
.vdu-prodotti .vdu-prodotti-head { max-width: 860px; }
.vdu-prodotti .vdu-prodotti-title {
	font-family: 'kbmgxgqntknaxywsufrdzxutduxanjlkpzfo', var(--vdu-serif);
	font-size: clamp(38px, 5.2vw, 62px);
	font-weight: 400;
	letter-spacing: -1.5px;
	line-height: 1.04;
	color: var(--vdu-green);
	text-transform: none;
	margin: 0 0 20px;
	outline: none;
}
.vdu-prodotti .vdu-prodotti-lead { font-family: var(--vdu-serif); font-size: clamp(20px, 2.4vw, 27px); font-style: italic; color: var(--vdu-olive); margin: 0 0 18px; line-height: 1.3; }
.vdu-prodotti .vdu-prodotti-intro { font-size: 17.5px; color: var(--vdu-ink-soft); margin: 0; }

/* ── LE QUATTRO SCHEDE — stessa dignita' grafica ───────────────── */
.vdu-prodotti .vdu-prodotti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 44px; align-items: stretch; }
.vdu-prodotti .vdu-prodotti-card {
	display: flex; flex-direction: column;
	background: var(--vdu-paper); border: 1px solid var(--vdu-line); border-radius: 18px;
	box-shadow: var(--vdu-shadow-sm); overflow: hidden; outline: none;
}
.vdu-prodotti .vdu-prodotti-media { position: relative; display: flex; gap: 6px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--vdu-line); }
.vdu-prodotti .vdu-prodotti-media-btn { position: relative; display: block; flex: 1 1 0; min-width: 0; height: 100%; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--vdu-line); }
.vdu-prodotti .vdu-prodotti-media .vdu-prodotti-img { width: 100%; height: 100%; object-fit: cover; }
.vdu-prodotti .vdu-prodotti-card.is-doppia .vdu-prodotti-media .vdu-prodotti-media-btn:first-child { flex: 1.25 1 0; }
.vdu-prodotti .vdu-prodotti-media-btn:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: -4px; }
/* la scheda si solleva come una tile della galleria quando il puntatore e' sulla sua foto
   (stessi valori di .vdu-prodotti-hover-card; la classe la mette prodotti.js) */
/* sollevamento con la proprieta' INDIPENDENTE translate: la regola della rivelazione
   (.vdu-prodotti.is-js .vdu-prodotti-reveal.is-in { transform: none }, specificita' 0,4,0)
   azzera transform, ma non tocca translate (misurato al collaudo: con transform la scheda
   restava ferma). Stessa distanza (6 px) e stessa ombra della tile della galleria. */
.vdu-prodotti.is-js .vdu-prodotti-card.vdu-prodotti-reveal { transition: translate .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.vdu-prodotti .vdu-prodotti-card.is-media-hover { translate: 0 -6px; box-shadow: 0 26px 60px -24px rgba(60,46,16,.6); }
.vdu-prodotti .vdu-prodotti-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 30px 30px; }
.vdu-prodotti .vdu-prodotti-card-title { font-size: 28px; color: var(--vdu-olive-deep); margin: 0 0 12px; }
.vdu-prodotti .vdu-prodotti-p { font-size: 16.5px; color: var(--vdu-ink-soft); line-height: 1.6; margin: 0 0 14px; }
.vdu-prodotti .vdu-prodotti-p:last-child { margin-bottom: 0; }
.vdu-prodotti .vdu-prodotti-formati { font-size: 16px; color: var(--vdu-ink-soft); margin: 0 0 14px; padding: 12px 16px; background: var(--vdu-olive-cream); border-radius: 10px; }

/* Riga sul glutine — BEN VISIBILE: pastiglia oro, bordo oro, testo pieno.
   Stesso linguaggio del chip "Prenotazione obbligatoria" del picnic. */
.vdu-prodotti .vdu-prodotti-glutine {
	display: flex; gap: 12px; align-items: flex-start;
	margin: 4px 0 0; padding: 14px 16px;
	background: #FBEFE0; border: 1.5px solid var(--vdu-gold-soft); border-radius: 12px;
	font-size: 16px; font-weight: 800; line-height: 1.45; color: var(--vdu-ink);
}
.vdu-prodotti .vdu-prodotti-glutine-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--vdu-gold); color: #fff; display: grid; place-items: center; }
.vdu-prodotti .vdu-prodotti-glutine-ico .vdu-prodotti-icon { width: 20px; height: 20px; }
.vdu-prodotti .vdu-prodotti-glutine-t { padding-top: 5px; }

.vdu-prodotti .vdu-prodotti-link {
	align-self: flex-start; margin-top: auto; padding-top: 14px;
	font-weight: 800; font-size: 16px; color: var(--vdu-olive-deep);
	border-bottom: 2px solid var(--vdu-gold-soft);
	transition: color .2s ease, border-color .2s ease;
}
.vdu-prodotti .vdu-prodotti-link:hover { color: var(--vdu-green); border-color: var(--vdu-green); }
.vdu-prodotti .vdu-prodotti-link:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }

/* ── RIQUADRI RIEPILOGATIVI CONTRASTATI ─────────────────────────── */
.vdu-prodotti .vdu-prodotti-box {
	position: relative; margin-top: 34px; padding: 30px 34px;
	background: var(--vdu-olive-deep); color: #fff; border-radius: 18px; box-shadow: var(--vdu-shadow);
}
.vdu-prodotti .vdu-prodotti-box-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--vdu-gold); color: #fff; display: grid; place-items: center; }
.vdu-prodotti .vdu-prodotti-box-title { font-size: 29px; font-weight: 700; font-style: italic; color: #fff; margin: 0 0 14px; }
.vdu-prodotti .vdu-prodotti-box-p { font-size: 16.5px; color: rgba(255, 255, 255, .88); line-height: 1.6; margin: 0 0 12px; }
.vdu-prodotti .vdu-prodotti-box-p:last-child { margin-bottom: 0; }
.vdu-prodotti .vdu-prodotti-box strong { color: #fff; }

.vdu-prodotti .vdu-prodotti-pv { display: grid; grid-template-columns: auto 1fr; gap: 22px 26px; align-items: center; }
.vdu-prodotti .vdu-prodotti-pv .vdu-prodotti-box-ico { align-self: start; margin-top: 2px; }
/* v.002 — Punto Vendita senza pulsante: titolo e testo un po' piu' grandi */
.vdu-prodotti .vdu-prodotti-pv .vdu-prodotti-box-title { font-size: 33px; }
.vdu-prodotti .vdu-prodotti-pv .vdu-prodotti-box-p { font-size: 18px; }

.vdu-prodotti .vdu-prodotti-ship { margin-top: 40px; text-align: center; background: var(--vdu-paper); color: var(--vdu-ink); border: 1.5px solid var(--vdu-gold-soft); box-shadow: var(--vdu-shadow-sm); }
.vdu-prodotti .vdu-prodotti-ship .vdu-prodotti-box-ico { margin: 0 auto 14px; }
.vdu-prodotti .vdu-prodotti-ship .vdu-prodotti-box-title { color: var(--vdu-olive-deep); }
.vdu-prodotti .vdu-prodotti-ship .vdu-prodotti-box-p { color: var(--vdu-ink-soft); max-width: 760px; margin-left: auto; margin-right: auto; }
.vdu-prodotti .vdu-prodotti-ship strong { color: var(--vdu-ink); }
.vdu-prodotti .vdu-prodotti-ship-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }

/* ── PULSANTI ─────────────────────────────────────────────────────
   WhatsApp: stesso verde, bordo 2px e inversione all'hover del pulsante
   del picnic. Gli altri due nello stesso schema, coi colori del blocco. */
.vdu-prodotti .vdu-prodotti-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
	font-weight: 800; font-size: 17px; line-height: 1.2; white-space: nowrap; max-width: 100%;
	box-shadow: 0 10px 26px -12px rgba(0,0,0,.35);
	transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.vdu-prodotti .vdu-prodotti-btn:hover { transform: translateY(-2px); }
.vdu-prodotti .vdu-prodotti-btn:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }
.vdu-prodotti .vdu-prodotti-btn .vdu-prodotti-icon,
.vdu-prodotti .vdu-prodotti-btn .vdu-prodotti-wa-ico { width: 24px; height: 24px; flex-shrink: 0; }

.vdu-prodotti .vdu-prodotti-btn.is-wa   { background: #25D366; color: #fff; border-color: #25D366; }
.vdu-prodotti .vdu-prodotti-btn.is-wa:hover { background: #fff; color: var(--vdu-green); border-color: var(--vdu-green); }
.vdu-prodotti .vdu-prodotti-btn.is-tel  { background: var(--vdu-olive-deep); color: #fff; border-color: var(--vdu-olive-deep); }
.vdu-prodotti .vdu-prodotti-btn.is-tel:hover { background: #fff; color: var(--vdu-olive-deep); }
.vdu-prodotti .vdu-prodotti-btn.is-mail { background: #fff; color: var(--vdu-olive-deep); border-color: var(--vdu-olive-deep); }
.vdu-prodotti .vdu-prodotti-btn.is-mail:hover { background: var(--vdu-olive-deep); color: #fff; }

/* ── GALLERIA DEL PUNTO VENDITA ─────────────────────────────────── */
.vdu-prodotti .vdu-prodotti-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.vdu-prodotti .vdu-prodotti-tile { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: var(--vdu-shadow-sm); padding: 0; text-align: left; cursor: pointer; background: var(--vdu-line); }
.vdu-prodotti .vdu-prodotti-tile .vdu-prodotti-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vdu-prodotti .vdu-prodotti-tile-hint { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--vdu-olive-deep); display: grid; place-items: center; }

.vdu-prodotti .vdu-prodotti-hover-card { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.vdu-prodotti .vdu-prodotti-hover-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -24px rgba(60,46,16,.6); }
.vdu-prodotti .vdu-prodotti-hover-card:focus-visible { outline: 2px solid var(--vdu-gold); outline-offset: 3px; }
.vdu-prodotti .vdu-prodotti-media-hover .vdu-prodotti-img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.vdu-prodotti .vdu-prodotti-media-hover:hover .vdu-prodotti-img { transform: scale(1.06); }

/* ── REVEAL (additivo: senza JS tutto e' gia' visibile) ─────────── */
.vdu-prodotti.is-js .vdu-prodotti-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.vdu-prodotti.is-js .vdu-prodotti-reveal.is-in { opacity: 1; transform: none; }

/* ── RIQUADRO INGRANDITO (stesse misure del picnic v.003+) ──────── */
.vdu-prodotti .vdu-prodotti-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(20,16,8,.92); }
.vdu-prodotti .vdu-prodotti-lightbox[hidden] { display: none; }
.vdu-prodotti .vdu-prodotti-lb-fig { margin: 0; max-width: min(1080px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vdu-prodotti .vdu-prodotti-lb-img { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); object-fit: contain; }
.vdu-prodotti .vdu-prodotti-lb-cap { color: rgba(255,255,255,.92); font-family: var(--vdu-serif); font-style: italic; font-size: 19px; text-align: center; }
.vdu-prodotti .vdu-prodotti-lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; width: 52px; height: 52px; font-size: 30px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.vdu-prodotti .vdu-prodotti-lb-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.05); }
.vdu-prodotti .vdu-prodotti-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vdu-prodotti .vdu-prodotti-lb-close { top: 22px; right: 22px; font-size: 26px; }
.vdu-prodotti .vdu-prodotti-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.vdu-prodotti .vdu-prodotti-lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.vdu-prodotti .vdu-prodotti-lb-prev:hover,
.vdu-prodotti .vdu-prodotti-lb-next:hover { transform: translateY(-50%) scale(1.05); }
.vdu-prodotti .vdu-prodotti-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 14px; letter-spacing: .04em; }

/* ── RESPONSIVE — ogni valore ridichiarato a 0,2,0 ───────────────── */
@media (max-width: 900px) {
	.vdu-prodotti .vdu-prodotti-grid { grid-template-columns: 1fr; gap: 22px; }
	.vdu-prodotti .vdu-prodotti-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.vdu-prodotti .vdu-prodotti-wrap { padding-left: 20px; padding-right: 20px; }
	.vdu-prodotti .vdu-prodotti-body { padding: 22px 22px 24px; }
	.vdu-prodotti .vdu-prodotti-card-title { font-size: 25px; }
	.vdu-prodotti .vdu-prodotti-box { padding: 24px 22px; }
	.vdu-prodotti .vdu-prodotti-box-title { font-size: 25px; }
	.vdu-prodotti .vdu-prodotti-pv { grid-template-columns: 1fr; gap: 14px; }
	.vdu-prodotti .vdu-prodotti-pv .vdu-prodotti-box-title { font-size: 28px; }
	.vdu-prodotti .vdu-prodotti-pv .vdu-prodotti-box-p { font-size: 17.5px; }
	.vdu-prodotti .vdu-prodotti-ship-btns { flex-direction: column; align-items: stretch; }
	.vdu-prodotti .vdu-prodotti-btn { white-space: normal; }
}
@media (max-width: 740px) {
	.vdu-prodotti { padding: 68px 0; }
	.vdu-prodotti .vdu-prodotti-title { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
}
@media (max-width: 600px) {
	.vdu-prodotti .vdu-prodotti-lb-btn { width: 44px; height: 44px; font-size: 24px; }
	.vdu-prodotti .vdu-prodotti-lb-close { top: 14px; right: 14px; }
	.vdu-prodotti .vdu-prodotti-lb-prev { left: 10px; }
	.vdu-prodotti .vdu-prodotti-lb-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.vdu-prodotti.is-js .vdu-prodotti-reveal { opacity: 1; transform: none; transition: none; }
	.vdu-prodotti .vdu-prodotti-hover-card,
	.vdu-prodotti .vdu-prodotti-card,
	.vdu-prodotti .vdu-prodotti-media-hover .vdu-prodotti-img,
	.vdu-prodotti .vdu-prodotti-btn { transition: none; }
}