/*
 * GOYN — Scheda prodotto
 *
 * Fonte: `PdDetail` in src/components/ProductSections.jsx e le classi `.pd-*` di
 * src/styles.css.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-pd`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-zoom`, `.goyn-btn` + varianti, `.goyn-line`,
 * `.goyn-display`, `.goyn-label`, `.goyn-wrap`, `.goyn-sr-only`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`, `data-goyn-rise-wipe`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Briciole
 *   3. Le due colonne
 *   4. La galleria senza JavaScript
 *   5. I bollini
 *   6. Colonna acquisto: titolo, claim, valutazione, prezzo
 *   7. I benefici
 *   8. Quantità e bottoni
 *   9. Le rassicurazioni
 *  10. La tabella dei dettagli
 *  11. Entrate: le misure di questa sezione
 *  12. Responsive
 *  13. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ============================================================ */

.goyn-pd {
	--goyn-pd-bg: var(--goyn-cream, #e9e5d9);
	--goyn-pd-title: var(--goyn-petrol-deep, #163e46);
	--goyn-pd-claim: var(--goyn-petrol, #1f535d);
	--goyn-pd-price: var(--goyn-petrol-deep, #163e46);
	--goyn-pd-desc: var(--goyn-ink, #1a2c30);
	--goyn-pd-muted: var(--goyn-muted, #5e6e6e);
	--goyn-pd-icon: var(--goyn-petrol, #1f535d);
	--goyn-pd-accent: var(--goyn-rust, #c0603c);
	--goyn-pd-rule: var(--goyn-petrol-16, rgba(31, 83, 93, 0.16));
	--goyn-pd-frame: var(--goyn-cream-2, #efebe0);

	--goyn-pd-col-gallery: 1.02fr;
	--goyn-pd-col-buy: 0.98fr;
	--goyn-pd-pad-top: 150px;
	--goyn-pd-pad-bottom: 80px;
	--goyn-pd-stage-ratio: 2 / 3;

	/* Variabile di `.goyn-zoom` del tema: 1.06 è il valore dell'originale. */
	--goyn-zoom-scale: 1.06;

	padding: clamp(112px, 12vh, var(--goyn-pd-pad-top)) var(--goyn-pad, clamp(22px, 5vw, 80px))
		clamp(50px, 5vw, var(--goyn-pd-pad-bottom));
	background-color: var(--goyn-pd-bg);
}

/* ============================================================
   2. Briciole
   ============================================================ */

.goyn-pd__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(22px, 2.4vw, 34px);
	font-size: 10.5px;
	letter-spacing: 1.8px;
	color: var(--goyn-pd-muted);
}

.goyn-pd__crumb a {
	color: inherit;
	text-decoration: none;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-pd__crumb a:hover,
.goyn-pd__crumb a:focus-visible {
	color: var(--goyn-pd-accent);
}

.goyn-pd__crumb .is-current {
	color: var(--goyn-pd-title);
}

/* ============================================================
   3. Le due colonne
   ------------------------------------------------------------
   `align-items: start` e non `stretch`: la colonna dell'acquisto è più corta
   della galleria e non deve stirarsi per pareggiarla.
   ============================================================ */

.goyn-pd__main {
	display: grid;
	grid-template-columns: minmax(0, var(--goyn-pd-col-gallery)) minmax(0, var(--goyn-pd-col-buy));
	gap: clamp(28px, 3.6vw, 62px);
	align-items: start;
}

/* ============================================================
   4. La galleria senza JavaScript
   ------------------------------------------------------------
   Gli `<input type="radio">` stanno in cima al contenitore, le miniature sono le
   loro `<label>`, e il palco è l'ultimo fratello. Il cambio di foto è quindi:
   il radio numero k spuntato → la foto numero k visibile.

   ⚠️ SERVE UNA REGOLA PER FOTOGRAFIA, e sono scritte a mano fino a otto: il CSS
      non ha un modo di dire "il figlio con lo stesso indice del checked". Otto è
      il limite ragionevole per una scheda prodotto — oltre, le foto in più
      esistono nel documento ma non si raggiungono, e il palco resta sulla prima.

   Il palco è una pila: tutte le foto sovrapposte, quella scelta a opacità 1.
   `visibility` accompagna l'opacità perché una foto trasparente resterebbe
   cliccabile e raggiungibile da tastiera.
   ============================================================ */

.goyn-pd__gallery {
	display: grid;
	grid-template-columns: clamp(72px, 6vw, 92px) minmax(0, 1fr);
	gap: clamp(10px, 1vw, 16px);
}

/* Con una foto sola le miniature non esistono: una colonna. */
.goyn-pd__gallery--single {
	grid-template-columns: minmax(0, 1fr);
}

.goyn-pd__thumbs {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1vw, 16px);
}

.goyn-pd__thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--goyn-pd-frame);
	border: 1px solid var(--goyn-pd-rule);
	cursor: pointer;
	transition: border-color 0.45s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-pd__thumb:hover {
	border-color: color-mix(in srgb, var(--goyn-pd-claim) 50%, transparent);
}

.goyn-pd__stage {
	position: relative;
	aspect-ratio: var(--goyn-pd-stage-ratio);
	overflow: hidden;
	background-color: var(--goyn-pd-frame);
}

.goyn-pd__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.55s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		visibility 0.55s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/*
 * ⚠️ `opacity: 0` qui NON è uno stato che aspetta JavaScript: la prima foto è
 *    visibile perché il suo radio ha `checked` nel markup, quindi la regola qui
 *    sotto vale già al primo byte. Senza script la galleria funziona: si cambia
 *    foto e non c'è nulla da inizializzare.
 */
.goyn-pd__gallery--single .goyn-pd__shot {
	opacity: 1;
	visibility: visible;
}

.goyn-pd__shot .goyn-photo,
.goyn-pd__thumb .goyn-photo {
	position: absolute;
	inset: 0;
}

/*
 * ⚠️ Regola discendente: `.goyn-widget img { height: auto }` del tema e
 *    `.elementor img` sono (0,1,1) e batterebbero una classe sola — l'immagine
 *    verrebbe dimensionata dalle proprie proporzioni invece che dal riquadro.
 *    Errore già pagato nell'hero.
 */
.goyn-pd .goyn-pd__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le otto coppie di regole: radio numero k → foto numero k e miniatura k. */
.goyn-pd__pick:nth-of-type(1):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(1),
.goyn-pd__pick:nth-of-type(2):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(2),
.goyn-pd__pick:nth-of-type(3):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(3),
.goyn-pd__pick:nth-of-type(4):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(4),
.goyn-pd__pick:nth-of-type(5):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(5),
.goyn-pd__pick:nth-of-type(6):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(6),
.goyn-pd__pick:nth-of-type(7):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(7),
.goyn-pd__pick:nth-of-type(8):checked ~ .goyn-pd__stage .goyn-pd__shot:nth-child(8) {
	opacity: 1;
	visibility: visible;
}

.goyn-pd__pick:nth-of-type(1):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(1),
.goyn-pd__pick:nth-of-type(2):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(2),
.goyn-pd__pick:nth-of-type(3):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(3),
.goyn-pd__pick:nth-of-type(4):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(4),
.goyn-pd__pick:nth-of-type(5):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(5),
.goyn-pd__pick:nth-of-type(6):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(6),
.goyn-pd__pick:nth-of-type(7):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(7),
.goyn-pd__pick:nth-of-type(8):checked ~ .goyn-pd__thumbs .goyn-pd__thumb:nth-child(8) {
	border-color: var(--goyn-pd-claim);
}

/*
 * Il contorno del fuoco va sulla MINIATURA, non sul radio: quello è fuori
 * schermo, e senza questa regola chi naviga da tastiera non vedrebbe dove si
 * trova.
 */
.goyn-pd__pick:focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb {
	outline: 2px solid var(--goyn-pd-accent);
	outline-offset: 2px;
}

.goyn-pd__pick:nth-of-type(1):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(1)),
.goyn-pd__pick:nth-of-type(2):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(2)),
.goyn-pd__pick:nth-of-type(3):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(3)),
.goyn-pd__pick:nth-of-type(4):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(4)),
.goyn-pd__pick:nth-of-type(5):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(5)),
.goyn-pd__pick:nth-of-type(6):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(6)),
.goyn-pd__pick:nth-of-type(7):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(7)),
.goyn-pd__pick:nth-of-type(8):focus-visible ~ .goyn-pd__thumbs .goyn-pd__thumb:not(:nth-child(8)) {
	outline: none;
}

/* ============================================================
   5. I bollini
   ============================================================ */

.goyn-pd__claims {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 22px);
	margin: clamp(28px, 3vw, 44px) 0 0;
	padding: clamp(26px, 2.8vw, 38px) 0 0;
	list-style: none;
	border-top: 1px solid var(--goyn-pd-rule);
}

.goyn-pd__claim-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.goyn-pd__claim-icon {
	display: inline-flex;
	color: var(--goyn-pd-icon);
	transition:
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		translate var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/*
 * ⚠️ L'icona si muove con `translate` e non con `transform`: l'elemento che
 *    entra ha `data-goyn-rise` sul GENITORE, ma il genitore è la voce e
 *    l'animazione lascia scritta la propria `transform`. Usare la proprietà
 *    separata evita di dover aggiungere un altro livello solo per 4 pixel.
 */
.goyn-pd__claim-item:hover .goyn-pd__claim-icon {
	color: var(--goyn-pd-accent);
	translate: 0 -4px;
}

.goyn-pd__claim-label {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--goyn-pd-muted);
	/* Il capo scritto nel pannello diventa un capo a schermo. */
	white-space: pre-line;
}

/* ============================================================
   6. Colonna acquisto: titolo, claim, valutazione, prezzo
   ============================================================ */

.goyn-pd__buy {
	padding-top: clamp(0px, 0.6vw, 8px);
}

/*
 * ⚠️ Regola discendente, e col carattere dichiarato: il Kit di Elementor stampa
 *    la tipografia dei titoli come `.elementor-kit-5 h1 { … }`, che ha
 *    specificità (0,1,1) e batte `.goyn-display` (0,1,0). Con la sola classe il
 *    titolo perdeva Anton e usciva col carattere del corpo — misurato a schermo,
 *    ed è il quarto inciampo dello stesso tipo dopo `img`, l'ombra dei link e
 *    `select`: i reset e i default usano selettori di elemento.
 */
.goyn-pd .goyn-pd__title {
	margin: 0;
	font-family: var(--goyn-font-display);
	font-size: clamp(30px, 3.5vw, 54px);
	line-height: 0.94;
	color: var(--goyn-pd-title);
}

.goyn-pd__claim {
	margin: 14px 0 0;
	font-size: clamp(13px, 1.2vw, 17px);
	font-weight: 500;
	letter-spacing: 2.4px;
	color: var(--goyn-pd-claim);
}

.goyn-pd__rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-size: 13.5px;
	color: var(--goyn-pd-muted);
}

.goyn-pd__rating a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.goyn-stars {
	display: inline-flex;
	gap: 4px;
	color: var(--goyn-pd-title);
}

.goyn-stars > span[aria-hidden] {
	display: inline-flex;
	gap: 4px;
}

.goyn-pd__price {
	margin: 22px 0 0;
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1;
	color: var(--goyn-pd-price);
}

/* Il prezzo di WooCommerce arriva con i suoi tag: si allineano al resto. */
.goyn-pd__price .woocommerce-Price-amount {
	color: inherit;
}

.goyn-pd__price del {
	margin-right: 8px;
	opacity: 0.55;
}

.goyn-pd__price ins {
	text-decoration: none;
}

.goyn-pd__unit {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--goyn-pd-muted);
}

.goyn-pd__desc {
	max-width: 430px;
	margin: clamp(20px, 2.2vw, 30px) 0 0;
}

.goyn-pd__desc p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--goyn-pd-desc);
}

.goyn-pd__desc p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   7. I benefici
   ============================================================ */

.goyn-pd__benefits {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 20px);
	margin: clamp(26px, 3vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.goyn-pd__benefit {
	display: flex;
	align-items: center;
	gap: 16px;
}

.goyn-pd__benefit-icon {
	display: inline-flex;
	flex: none;
	color: var(--goyn-pd-icon);
}

.goyn-pd__benefit .goyn-label {
	font-size: 12.5px;
	letter-spacing: 2px;
	color: var(--goyn-pd-title);
}

/* ============================================================
   8. Quantità e bottoni
   ============================================================ */

.goyn-pd__cart {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(28px, 3.2vw, 44px);
}

.goyn-pd__qty {
	display: flex;
	flex: none;
	align-items: center;
	background-color: var(--goyn-pd-frame);
	border: 1px solid color-mix(in srgb, var(--goyn-pd-claim) 24%, transparent);
	/* Ripiego per i browser senza color-mix: la stessa gradazione, senza il legame
	   al colore scelto nel pannello. */
	border-color: rgba(31, 83, 93, 0.24);
	border-color: color-mix(in srgb, var(--goyn-pd-claim) 24%, transparent);
}

/*
 * ⚠️ NASCOSTI finché product.js non mette `goyn-pd-js` su <html>: senza script
 *    questi due bottoni non farebbero nulla, e un comando morto è peggio della
 *    sua assenza. Il campo numerico resta usabile coi comandi nativi del
 *    browser. È lo stesso schema dell'hamburger dell'header.
 */
.goyn-pd__qty-btn {
	display: none;
	min-width: 44px;
	min-height: 54px;
	background: none;
	border: none;
	font-size: 17px;
	color: var(--goyn-pd-claim);
	cursor: pointer;
	transition: color 0.3s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-pd-js .goyn-pd__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.goyn-pd__qty-btn:hover,
.goyn-pd__qty-btn:focus-visible {
	color: var(--goyn-pd-accent);
}

.goyn-pd .goyn-pd__qty-input {
	width: 64px;
	min-height: 54px;
	padding: 0 8px;
	font-family: var(--goyn-font-label);
	font-size: 14px;
	text-align: center;
	color: var(--goyn-pd-title);
	background: none;
	border: none;
}

/* Con i due bottoni le frecce native sono un doppione: si nascondono solo là. */
.goyn-pd-js .goyn-pd__qty-input {
	width: 46px;
	appearance: textfield;
	-moz-appearance: textfield;
}

.goyn-pd-js .goyn-pd__qty-input::-webkit-outer-spin-button,
.goyn-pd-js .goyn-pd__qty-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.goyn-pd__add {
	flex: 1 1 240px;
	justify-content: center;
	min-height: 54px;
}

.goyn-pd__now {
	flex: 1 1 100%;
	justify-content: center;
	min-height: 54px;
}

.goyn-pd__soldout {
	margin: clamp(28px, 3.2vw, 44px) 0 0;
	padding: 16px 20px;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--goyn-pd-accent);
	border: 1px solid currentColor;
}

/* ============================================================
   9. Le rassicurazioni
   ============================================================ */

.goyn-pd__usp {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: clamp(22px, 2.4vw, 30px) 0 0;
	list-style: none;
	border-top: 1px solid var(--goyn-pd-rule);
}

.goyn-pd__usp-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.goyn-pd__usp-icon {
	display: inline-flex;
	flex: none;
	margin-top: 1px;
	color: var(--goyn-pd-icon);
}

.goyn-pd__usp-title {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: var(--goyn-pd-title);
}

.goyn-pd__usp-desc {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--goyn-pd-muted);
}

/* ============================================================
   10. La tabella dei dettagli
   ------------------------------------------------------------
   Filetti sottili invece di riquadri: è la scelta dell'originale, e su una
   colonna stretta pesa molto meno di quattro cornici.
   ============================================================ */

.goyn-pd__specs {
	margin: clamp(28px, 3vw, 46px) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--goyn-pd-claim) 20%, transparent);
	border-top-color: rgba(31, 83, 93, 0.2);
	border-top-color: color-mix(in srgb, var(--goyn-pd-claim) 20%, transparent);
}

.goyn-pd__spec {
	display: grid;
	grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
	gap: clamp(14px, 1.6vw, 28px);
	padding: clamp(16px, 1.6vw, 22px) 0;
	border-bottom: 1px solid var(--goyn-pd-rule);
}

.goyn-pd__spec-label {
	margin: 2px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 2.2px;
	color: var(--goyn-pd-title);
}

.goyn-pd__spec-value {
	margin: 0;
}

.goyn-pd__spec-value p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--goyn-pd-muted);
}

.goyn-pd__nutri-note {
	margin: 0 0 10px;
	font-size: 10.5px;
	letter-spacing: 1.6px;
	color: var(--goyn-pd-accent);
}

/*
 * ⚠️ `margin: 0`: il reset di Hello Elementor dà a ogni `table` un
 *    `margin-block-end: 15px`, e dentro il pannello lo spazio lo decide il pannello.
 */
.goyn-pd__nutri {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 13.5px;
}

/*
 * ⚠️⚠️ `border: 0` PRIMA del filetto, e senza quella riga la tabella è un altro
 *      disegno. `reset.css` di Hello Elementor scrive
 *      `table td, table th { border: 1px solid hsla(0,0%,50%,.502); padding: 15px;
 *      vertical-align: top }`: sovrascrivendo solo `border-bottom` restavano in
 *      piedi i bordi ALTO, DESTRO e SINISTRO di ogni cella — cioè un filetto
 *      verticale continuo fra etichetta e valore, un bordo sopra la prima riga e il
 *      testo schiacciato contro quelle linee. Misurato:
 *      `border-right-width: 1px solid` vinto da `reset.css`, ed è esattamente la
 *      tabella "con le spaziature rotte" segnalata guardando la pagina.
 *
 *      `vertical-align: baseline` per la stessa ragione: il reset forza `top`,
 *      l'originale non dichiara niente.
 *
 * ⚠️ `background-color: transparent` non è ridondante: la zebratura dello stesso
 *    reset (`table tbody > tr:nth-child(odd) > th`, misurata
 *    `hsla(0, 0%, 50%, .071)`) colorava le righe alterne, e la tabella usciva a
 *    bande grigie invece che a filetti puntinati.
 *
 * Il selettore è discendente per la ragione di sempre: quelle regole partono da
 * `table`, cioè da un elemento, e una classe sola non basta mai.
 */
.goyn-pd .goyn-pd__nutri th,
.goyn-pd .goyn-pd__nutri td {
	padding: 7px 0;
	border: 0;
	border-bottom: 1px dotted rgba(31, 83, 93, 0.22);
	border-bottom-color: color-mix(in srgb, var(--goyn-pd-claim) 22%, transparent);
	vertical-align: baseline;
	text-align: left;
	font-weight: 400;
	line-height: 1.5;
	color: var(--goyn-pd-muted);
	background-color: transparent;
}

.goyn-pd .goyn-pd__nutri th {
	padding-right: 16px;
}

.goyn-pd .goyn-pd__nutri td {
	text-align: right;
	color: var(--goyn-pd-title);
	/* I valori non si spezzano: "5 mg (50% VNR)" su due righe è illeggibile. */
	white-space: nowrap;
}

.goyn-pd .goyn-pd__nutri tr:last-child th,
.goyn-pd .goyn-pd__nutri tr:last-child td {
	border-bottom: none;
}

.goyn-pd__notice {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   11. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   I ritardi dell'originale: briciole subito, titolo a righe di 100ms, claim
   140ms, valutazione 200, prezzo 260, descrizione 320, benefici 360 + 80 per
   voce, carrello 500. Le miniature entrano da sinistra a 100 + 80 per voce; qui
   entrano col resto, perché una miniatura che scivola mentre il palco si scopre
   era un movimento in più senza guadagno.
   ============================================================ */

.goyn-pd [data-goyn-rise] {
	--goyn-rise-shift: 18px;
	--goyn-rise-dur: 0.7s;
}

.goyn-pd__crumb {
	--goyn-rise-shift: 14px;
}

.goyn-pd .goyn-line > span[data-goyn-rise-line] {
	--goyn-rise-dur: 1s;
	--goyn-delay: calc(var(--goyn-pd-line, 0) * 100ms);
}

.goyn-pd__stage[data-goyn-rise-wipe] {
	--goyn-rise-dur: 1s;
}

.goyn-pd .goyn-pd__benefit {
	--goyn-rise-shift: 0px;
	--goyn-rise-dur: 0.6s;
	--goyn-delay: calc(360ms + var(--goyn-pd-index, 0) * 80ms);
}

.goyn-pd .goyn-pd__claim-item {
	--goyn-rise-shift: 20px;
	--goyn-delay: calc(var(--goyn-pd-index, 0) * 80ms);
}

.goyn-pd .goyn-pd__usp-item {
	--goyn-rise-shift: 14px;
	--goyn-rise-dur: 0.6s;
	--goyn-delay: calc(var(--goyn-pd-index, 0) * 70ms);
}

.goyn-pd .goyn-pd__spec {
	--goyn-rise-shift: 16px;
	--goyn-delay: calc(var(--goyn-pd-index, 0) * 60ms);
}

/* ============================================================
   12. Responsive
   ============================================================ */

@media (max-width: 860px) {
	.goyn-pd__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.goyn-pd__gallery {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	/* Una 2:3 a tutta larghezza occuperebbe più di uno schermo. */
	.goyn-pd {
		--goyn-pd-stage-ratio: 3 / 4;
	}

	.goyn-pd__claims {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 18px;
	}

	.goyn-pd__spec {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.goyn-pd__usp {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	/* Col dito la superficie comoda è 44px, e sotto i 16px iOS ingrandisce da sé. */
	.goyn-pd .goyn-pd__qty-input {
		min-height: 44px;
		font-size: 16px;
	}

	.goyn-pd__qty-btn {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ============================================================
   13. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate le annulla reveal.css. Qui l'ingrandimento della fotografia e il
   cambio di foto, che diventa istantaneo invece di sfumare.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-pd .goyn-pd__stage:hover .goyn-photo img {
		transform: none;
	}

	.goyn-pd__shot {
		transition: none;
	}
}