/* ============================================================================
   VDU — SISTEMA DEI PULSANTI LUNGHI — v.001 (19.10.2026, RUN-VDU-RIORDINO-2)
   UNA sola regola condivisa dai blocchi vdu-prodotti (v.002+), vdu-picnic
   (v.006+) e vdu-cheese (v.005+, tutte e due le modalita'). Ogni versione
   nuova emette questo foglio UNA volta per richiesta, prima del suo markup.

   COSA DECIDE QUESTO FOGLIO: la GEOMETRIA dei pulsanti lunghi (a pillola) —
   carattere, peso, imbottitura, icona, altezza — e il comportamento dei
   GRUPPI (stessa larghezza su desktop, impilati a tutta larghezza su telefono).
   COSA NON DECIDE: i COLORI. Fondo, testo, bordo e hover restano quelli di
   marca di ciascun blocco, scritti nel foglio del blocco.

   Misure di partenza (19.10.2026, Chromium 1440): CTA picnic e cheese 24 px
   peso 700, imbottitura 7/39 px, icona 54 px, alti 72 px; pulsanti del
   riquadro Spedizioni 17 px peso 800, icona 24 px, larghi 181/154/136 px.
   Regola nuova: 22 px su desktop (2 px in meno), peso 600, imbottitura
   circa -18%, icona 1,7 volte il testo (piu' grande del testo e ben
   visibile), stessa altezza per tutti i pulsanti di un gruppo.

   SPECIFICITA': :where() vale zero, quindi i blocchi restano liberi; la
   tripla classe sull'elemento a (0,3,1) batte ogni regola di geometria dei
   fogli dei blocchi (al massimo 0,3,0), media query comprese.
   I pulsanti quadrati o tondi (frecce del riquadro ingrandito, icone delle
   tile, barra fissa) NON portano la classe .vdu-pulsante e non cambiano.
   ============================================================================ */

:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) a.vdu-pulsante.vdu-pulsante.vdu-pulsante {
	--vdu-pls-fs: clamp(17px, 1.53vw, 22px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	min-height: calc(1.7em + .54em + 4px);
	padding: .27em 1.45em;
	border-width: 2px;
	border-style: solid;
	border-radius: 999px;
	font-size: var(--vdu-pls-fs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
	white-space: nowrap;
	max-width: 100%;
}
/* icona: l'icona WhatsApp e' 1,7 volte il testo; le icone di linea (telefono,
   busta) restano proporzionate al testo, l'altezza la tiene min-height. */
:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) a.vdu-pulsante.vdu-pulsante.vdu-pulsante > svg {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	margin: 0;
}
:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) a.vdu-pulsante.vdu-pulsante.vdu-pulsante.is-wa > svg,
:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) a.vdu-pulsante.vdu-pulsante.vdu-pulsante > svg[class$="-wa-ico"] {
	width: 1.7em;
	height: 1.7em;
}

/* GRUPPO: i pulsanti affiancati prendono TUTTI la larghezza del piu' largo.
   Una griglia in linea con colonne 1fr, dimensionata sul contenuto, risolve
   ogni colonna sulla larghezza massima dei suoi elementi. */
:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) .vdu-pulsanti-gruppo {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 14px;
	max-width: 100%;
	vertical-align: middle;
}
:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) .vdu-pulsanti-gruppo > a.vdu-pulsante.vdu-pulsante.vdu-pulsante {
	width: 100%;
}

/* TELEFONO: impilati, a tutta larghezza. */
@media (max-width: 760px) {
	:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) .vdu-pulsanti-gruppo {
		display: grid;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		width: 100%;
		gap: 12px;
	}
	:where(.vdu-prodotti, .vdu-picnic, .vdu-cheese) a.vdu-pulsante.vdu-pulsante.vdu-pulsante {
		white-space: normal;
	}
}