/*
 * GOYN — Sezioni della scheda prodotto
 *
 * Fonte: `PdFormula`, `PdReviews`, `PdBundle`, `PdRelated`, `PdFaq` e `PdShots`
 * in src/components/ProductSections.jsx, con le classi `.pd-*` e `.ct-faq-*` di
 * src/styles.css.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * UN FOGLIO PER CINQUE WIDGET, ED È VOLUTO
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * La convenzione del progetto è un foglio per widget. Qui si fa un'eccezione
 * perché le cinque sezioni condividono la testatina (`.goyn-ps__head`), il
 * reticolo, le pastiglie, le schede e la scala dei colori: separarle vorrebbe
 * dire ripetere quelle regole cinque volte, e allinearle a mano ogni volta che
 * cambia una misura.
 *
 * Il prefisso è `goyn-ps` (product sections). Ogni widget aggiunge una classe di
 * variante alla radice — `--formula`, `--reviews`, `--bundle`, `--related`,
 * `--faq`, `--shots` — e le regole che valgono per una sola sezione stanno sotto
 * quella.
 *
 * Costo dichiarato: una pagina che usa una sola di queste sezioni scarica il
 * foglio intero. Sono circa 500 righe, e le sezioni viaggiano quasi sempre
 * insieme sulla stessa pagina.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-ps`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-zoom`, `.goyn-btn`, `.goyn-line`,
 * `.goyn-eyebrow`, `.goyn-display`, `.goyn-label`, `.goyn-wrap`, `.goyn-sr-only`,
 * `.goyn-link-sweep` + `.goyn-arrow`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Testatina comune
 *   3. Formula: attivi
 *   4. Formula: rituale
 *   5. Recensioni
 *   6. Il modulo delle recensioni
 *   7. Acquistati insieme
 *   8. Consigliati
 *   9. Domande frequenti
 *  10. Tris di scatti
 *  11. Entrate
 *  12. Responsive
 *  13. prefers-reduced-motion
 */

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

.goyn-ps {
	--goyn-ps-bg: var(--goyn-cream-2, #efebe0);
	--goyn-ps-title: var(--goyn-petrol, #1f535d);
	--goyn-ps-accent: var(--goyn-rust, #c0603c);
	--goyn-ps-ink: var(--goyn-petrol-deep, #163e46);
	--goyn-ps-muted: var(--goyn-muted, #5e6e6e);
	--goyn-ps-card: var(--goyn-cream, #e9e5d9);
	--goyn-ps-ritual: var(--goyn-petrol, #1f535d);
	--goyn-ps-rule: var(--goyn-petrol-16, rgba(31, 83, 93, 0.16));
	--goyn-ps-photo-bg: var(--goyn-petrol-deep, #163e46);

	--goyn-ps-cols: 4;
	--goyn-ps-shot-cols: 3;
	--goyn-ps-shot-ratio: 4 / 3;
	--goyn-ps-shot-bg: var(--goyn-petrol-deep, #163e46);

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

	padding: clamp(60px, 6vw, 96px) var(--goyn-pad, clamp(22px, 5vw, 80px));
	background-color: var(--goyn-ps-bg);
}

/* Il tris va a filo pagina: nessuno spazio, nessun contenitore di larghezza. */
.goyn-ps--shots {
	padding: 0;
	background-color: transparent;
}

/* ============================================================
   2. Testatina comune
   ------------------------------------------------------------
   Sovratitolo ruggine, titolo su due righe mascherate. È il `PdHead` dell'app.
   ============================================================ */

.goyn-ps__head {
	margin-bottom: clamp(28px, 3vw, 44px);
}

.goyn-ps__eyebrow {
	margin: 0;
	color: var(--goyn-ps-accent);
}

.goyn-ps .goyn-ps__title {
	margin: 14px 0 0;
	/* Il carattere è dichiarato: il Kit stampa `.elementor-kit-5 h2`, che ha
	   specificità (0,1,1) e batterebbe `.goyn-display`. */
	font-family: var(--goyn-font-display);
	font-size: clamp(28px, 3.4vw, 52px);
	line-height: 0.95;
	color: var(--goyn-ps-title);
}

/* Nel rituale la testatina sta su fondo petrol. */
.goyn-ps__head--on-dark .goyn-ps__eyebrow {
	color: var(--goyn-peach, #e8c39f);
}

.goyn-ps__head--on-dark .goyn-ps__title {
	color: var(--goyn-cream, #e9e5d9);
}

/* Nelle domande la testatina non ha spazio sotto: ce l'ha il testo che segue. */
.goyn-ps__head--stacked {
	margin-bottom: 0;
}

/* ============================================================
   3. Formula: attivi
   ============================================================ */

.goyn-ps__formula {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(22px, 2.6vw, 46px);
	align-items: start;
}

/*
 * `auto-fill` e non `auto-fit`: con due soli attivi le schede restano della
 * larghezza giusta invece di allargarsi a mezza pagina. È la nota dell'originale,
 * e vale la pena ripeterla — la differenza fra le due parole è tutta qui.
 */
.goyn-ps__actives {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(18px, 2vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-ps__active-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--goyn-ps-photo-bg);
}

.goyn-ps__active-photo .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.
 */
.goyn-ps .goyn-ps__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.goyn-ps__active-name {
	margin: 16px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--goyn-ps-ink);
}

.goyn-ps__active-desc {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--goyn-ps-muted);
}

/* ============================================================
   4. Formula: rituale
   ============================================================ */

.goyn-ps__ritual {
	padding: clamp(26px, 2.8vw, 44px);
	color: var(--goyn-cream, #e9e5d9);
	background-color: var(--goyn-ps-ritual);
}

.goyn-ps__steps {
	display: flex;
	flex-direction: column;
	margin: clamp(24px, 2.6vw, 36px) 0 0;
	padding: 0;
	/* Il numero visibile arriva dal dato ("01"), quindi il segnaposto nativo
	   dell'elenco sarebbe un secondo numero. */
	list-style: none;
}

.goyn-ps__step {
	display: flex;
	gap: clamp(14px, 1.4vw, 22px);
	padding: clamp(16px, 1.8vw, 24px) 0;
	border-top: 1px solid rgba(232, 195, 159, 0.3);
	border-top-color: color-mix(in srgb, var(--goyn-peach, #e8c39f) 30%, transparent);
}

.goyn-ps__step-num {
	flex: none;
	min-width: 42px;
	font-size: 30px;
	line-height: 1;
	color: var(--goyn-peach, #e8c39f);
}

.goyn-ps__step-copy {
	display: block;
}

.goyn-ps__step-title {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 2.2px;
}

.goyn-ps__step-desc {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(233, 229, 217, 0.76);
	color: color-mix(in srgb, var(--goyn-cream, #e9e5d9) 76%, transparent);
}

/* ============================================================
   5. Recensioni
   ============================================================ */

.goyn-ps__reviews {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(24px, 3vw, 52px);
	align-items: start;
}

.goyn-ps__summary {
	padding: clamp(24px, 2.6vw, 36px);
	background-color: var(--goyn-ps-card);
	border: 1px solid var(--goyn-ps-rule);
}

.goyn-ps .goyn-ps__average {
	margin: 0;
	font-family: var(--goyn-font-display);
	font-size: clamp(44px, 5vw, 74px);
	line-height: 1;
	color: var(--goyn-ps-ink);
}

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

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

.goyn-ps__summary .goyn-ps__stars {
	margin-top: 10px;
}

.goyn-ps__count {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--goyn-ps-muted);
}

.goyn-ps__spread {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.goyn-ps__spread-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	color: var(--goyn-ps-muted);
}

.goyn-ps__spread-stars {
	min-width: 26px;
	letter-spacing: 1px;
	color: var(--goyn-ps-ink);
}

.goyn-ps__spread-track {
	position: relative;
	flex: 1 1 0;
	height: 5px;
	overflow: hidden;
	background-color: rgba(31, 83, 93, 0.14);
	background-color: color-mix(in srgb, var(--goyn-ps-title) 14%, transparent);
}

/*
 * La barra cresce da sinistra con `scaleX` e non con `width`: la larghezza fa
 * ricalcolare l'impaginazione a ogni fotogramma, la scala no.
 */
.goyn-ps__spread-fill {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	background-color: var(--goyn-ps-title);
	scale: var(--goyn-ps-pct, 0%) 1;
}

.goyn-ps__spread-pct {
	min-width: 34px;
	text-align: right;
}

.goyn-ps__write {
	width: 100%;
	justify-content: center;
	margin-top: 26px;
}

.goyn-ps__review-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.goyn-ps__review {
	padding: clamp(20px, 2vw, 28px);
	background-color: var(--goyn-ps-card);
	border: 1px solid var(--goyn-ps-rule);
}

.goyn-ps__review-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.goyn-ps__review-date {
	font-size: 12px;
	color: var(--goyn-ps-muted);
}

.goyn-ps__review-body {
	margin-top: 14px;
}

.goyn-ps__review-body p {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--goyn-ink, #1a2c30);
}

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

.goyn-ps__review-who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--goyn-ps-ink);
}

.goyn-ps__verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--goyn-ps-accent);
}

.goyn-ps__more {
	align-self: flex-start;
	padding-bottom: 6px;
	font-size: 12px;
	letter-spacing: 1.6px;
	color: var(--goyn-ps-accent);
	text-decoration: none;
}

/* ============================================================
   6. Il modulo delle recensioni
   ------------------------------------------------------------
   Il markup è quello di `comment_form()` di WordPress e WooCommerce, quindi qui
   si vestono le LORO classi. È il secondo punto del progetto in cui succede,
   dopo il modulo della newsletter, e per la stessa ragione: riscrivere quel
   modulo vorrebbe dire riscrivere anche l'accesso richiesto, la valutazione a
   stelle e la moderazione, sbagliandone una.
   ============================================================ */

/*
 * ⚠️ Nessun `margin-top` qui. La colonna delle recensioni è un flex con
 *    `gap: 14px`, che separa già il modulo da ciò che lo precede — e quando non
 *    c'è nulla sopra (prodotto senza recensioni) un margine spingerebbe il
 *    riquadro più in basso di quello del riepilogo accanto: i due box uscivano
 *    disallineati di 28px. Segnalato a schermo.
 */
.goyn-ps__form {
	padding: clamp(20px, 2vw, 28px);
	background-color: var(--goyn-ps-card);
	border: 1px solid var(--goyn-ps-rule);
}

.goyn-ps__form-title {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--goyn-ps-ink);
}

.goyn-ps__form p {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--goyn-ps-muted);
}

.goyn-ps__form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--goyn-font-label);
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ps-ink);
}

.goyn-ps__form input[type='text'],
.goyn-ps__form input[type='email'],
.goyn-ps__form textarea {
	width: 100%;
	padding: 13px 14px;
	font-size: 14px;
	color: var(--goyn-ps-ink);
	background-color: var(--goyn-cream-2, #efebe0);
	border: 1px solid var(--goyn-ps-rule);
}

.goyn-ps__form textarea {
	min-height: 120px;
	resize: vertical;
}

/* Le stelle del voto di WooCommerce: sono un carattere iconico suo, si tinge. */
.goyn-ps__form .stars a {
	color: var(--goyn-ps-ink);
}

.goyn-ps__form .comment-form-cookies-consent label,
.goyn-ps__form .comment-form-cookies-consent {
	display: inline;
	font-family: inherit;
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--goyn-ps-muted);
}

.goyn-ps__form-submit {
	margin-top: 6px;
}

/* ============================================================
   7. Acquistati insieme
   ============================================================ */

.goyn-ps__bundle {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	gap: clamp(22px, 2.6vw, 44px);
	align-items: start;
}

.goyn-ps__bundle-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-ps__bundle-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 26px);
	padding: clamp(14px, 1.4vw, 20px);
	background-color: var(--goyn-ps-card);
	border: 1px solid var(--goyn-ps-rule);
}

.goyn-ps__bundle-photo {
	position: relative;
	flex: none;
	width: clamp(74px, 7vw, 104px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--goyn-ps-photo-bg);
}

.goyn-ps__bundle-name {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--goyn-ps-ink);
}

.goyn-ps__bundle-name a {
	color: inherit;
	text-decoration: none;
}

.goyn-ps__bundle-variant {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--goyn-ps-muted);
}

.goyn-ps__bundle-price {
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--goyn-ps-title);
}

.goyn-ps__bundle-price .woocommerce-Price-amount {
	color: inherit;
}

/*
 * Il più fra due schede: sta a cavallo del bordo, quindi il fondo della sezione
 * dietro di sé per non farsi tagliare dal filetto.
 */
.goyn-ps__bundle-plus {
	position: absolute;
	left: 50%;
	bottom: -22px;
	z-index: 2;
	padding: 0 10px;
	font-size: 34px;
	line-height: 1.25;
	color: var(--goyn-ps-accent);
	background-color: var(--goyn-ps-bg);
	translate: -50% 0;
}

.goyn-ps__bundle-total {
	padding: clamp(22px, 2.4vw, 32px);
	background-color: var(--goyn-ps-card);
	border: 1.5px solid var(--goyn-ps-title);
}

.goyn-ps__bundle-badge {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: var(--goyn-cream, #e9e5d9);
	background-color: var(--goyn-ps-accent);
}

.goyn-ps__bundle-total-label {
	margin: 0;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--goyn-ps-muted);
}

.goyn-ps .goyn-ps__bundle-new {
	margin: 6px 0 0;
	font-family: var(--goyn-font-display);
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1;
	color: var(--goyn-ps-ink);
}

.goyn-ps__bundle-new .woocommerce-Price-amount {
	color: inherit;
}

.goyn-ps__bundle-form {
	margin: 20px 0 0;
}

.goyn-ps__bundle-add {
	width: 100%;
	justify-content: center;
}

.goyn-ps__bundle-note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--goyn-ps-muted);
}

/* ============================================================
   8. Consigliati
   ============================================================ */

.goyn-ps__related {
	display: grid;
	grid-template-columns: repeat(var(--goyn-ps-cols), minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `position: relative` per lo strato del collegamento, che copre la scheda. */
.goyn-ps__rel {
	position: relative;
}

.goyn-ps__rel-photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--goyn-ps-photo-bg);
}

.goyn-ps__rel-photo .goyn-photo {
	position: absolute;
	inset: 0;
}

.goyn-ps__rel-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	color: var(--goyn-ps-ink);
	background-color: rgba(239, 235, 224, 0.92);
	background-color: color-mix(in srgb, var(--goyn-cream-2, #efebe0) 92%, transparent);
}

.goyn-ps__rel-name {
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: var(--goyn-ps-ink);
}

.goyn-ps__rel-link {
	color: inherit;
	text-decoration: none;
}

/*
 * Lo strato che rende cliccabile tutta la scheda, come nel catalogo: un solo
 * collegamento per scheda, con il nome del prodotto come etichetta.
 */
.goyn-ps__rel-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.goyn-ps__rel-variant {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--goyn-ps-muted);
}

.goyn-ps__rel-price {
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--goyn-ps-title);
}

.goyn-ps__rel-price .woocommerce-Price-amount {
	color: inherit;
}

/* ============================================================
   9. Domande frequenti
   ============================================================ */

.goyn-ps__faq {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 3vw, 52px);
	align-items: start;
}

.goyn-ps__faq-text {
	max-width: 340px;
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--goyn-ps-muted);
}

.goyn-ps__faq-text a {
	color: var(--goyn-ps-accent);
}

.goyn-ps__faq-row {
	border-bottom: 1px solid var(--goyn-ps-rule);
}

.goyn-ps__faq-row:first-child {
	border-top: 1px solid var(--goyn-ps-rule);
}

.goyn-ps__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 17px 0;
	/* Carattere del corpo, non quello delle etichette: nell'originale la domanda è
	   in Barlow a cassa mista, e in Oswald sarebbe una voce di menu. Misurato su
	   entrambi. */
	font-size: 14px;
	letter-spacing: 0.6px;
	color: var(--goyn-ps-ink);
	cursor: pointer;
	/* Il triangolino nativo di `<summary>` non c'entra con questa grafica: al suo
	   posto c'è il segno + a destra. */
	list-style: none;
}

.goyn-ps__faq-q::-webkit-details-marker {
	display: none;
}

.goyn-ps__faq-q:hover {
	color: var(--goyn-ps-accent);
}

.goyn-ps__faq-sign {
	display: inline-block;
	flex: none;
	font-size: 19px;
	line-height: 1;
	color: var(--goyn-ps-title);
	transition:
		rotate 0.45s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		color 0.45s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Il + diventa × girando di 135°, come nell'originale. Nessuno script. */
.goyn-ps__faq-row[open] .goyn-ps__faq-sign {
	rotate: 135deg;
	color: var(--goyn-ps-accent);
}

.goyn-ps__faq-a p {
	margin: 0 44px 18px 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--goyn-ps-muted);
}

/* ============================================================
   10. Tris di scatti
   ============================================================ */

.goyn-ps--shots {
	display: grid;
	grid-template-columns: repeat(var(--goyn-ps-shot-cols, 3), minmax(0, 1fr));
}

.goyn-ps__shot {
	position: relative;
	aspect-ratio: var(--goyn-ps-shot-ratio);
	overflow: hidden;
	background-color: var(--goyn-ps-shot-bg);
}

.goyn-ps__shot .goyn-photo {
	position: absolute;
	inset: 0;
}

/* ============================================================
   11. Entrate
   ------------------------------------------------------------
   Il meccanismo è condiviso (reveal.css); qui i tempi dell'originale.
   ============================================================ */

.goyn-ps [data-goyn-rise] {
	--goyn-rise-shift: 22px;
	--goyn-rise-dur: 0.75s;
}

.goyn-ps__eyebrow {
	--goyn-rise-shift: 16px;
}

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

.goyn-ps .goyn-ps__active {
	--goyn-rise-shift: 28px;
	--goyn-rise-dur: 0.8s;
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 90ms);
}

.goyn-ps .goyn-ps__step {
	--goyn-rise-shift: 18px;
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 90ms);
}

.goyn-ps .goyn-ps__review {
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 70ms);
}

.goyn-ps .goyn-ps__bundle-item {
	--goyn-rise-dur: 0.75s;
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 100ms);
}

.goyn-ps .goyn-ps__rel {
	--goyn-rise-shift: 28px;
	--goyn-rise-dur: 0.8s;
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 80ms);
}

.goyn-ps .goyn-ps__faq-row {
	--goyn-rise-shift: 18px;
	--goyn-rise-dur: 0.7s;
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 60ms);
}

.goyn-ps .goyn-ps__shot {
	--goyn-rise-shift: 30px;
	--goyn-rise-dur: 0.85s;
	--goyn-delay: calc(var(--goyn-ps-index, 0) * 100ms);
}

/*
 * La barra della distribuzione cresce quando la sezione entra. Sta qui e non in
 * reveal.css perché è un'entrata propria di questa sezione: il contratto è
 * documentato in testa a quel file.
 */
[data-goyn-scene].is-armed .goyn-ps__spread-fill {
	scale: 0 1;
}

[data-goyn-scene].is-armed.is-in .goyn-ps__spread-fill {
	scale: var(--goyn-ps-pct, 0%) 1;
	transition: scale 1s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

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

@media (max-width: 860px) {
	.goyn-ps__formula,
	.goyn-ps__reviews,
	.goyn-ps__bundle {
		grid-template-columns: minmax(0, 1fr);
	}

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

	/* Due colonne fisse invece di `auto-fill`: sotto gli 860px la larghezza minima
	   di 230px ne farebbe stare una sola, e la fila diventerebbe una pila. È la
	   regola dell'originale, e vale anche sotto i 560px. */
	.goyn-ps__actives {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* In colonna singola il più sta sotto la scheda, non a cavallo del bordo. */
	.goyn-ps__bundle-plus {
		bottom: -20px;
	}

	/* Il tris diventa una colonna: tre fotografie affiancate su un telefono
	   sarebbero tre francobolli. */
	.goyn-ps--shots {
		grid-template-columns: minmax(0, 1fr);
	}

	.goyn-ps__shot {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 560px) {
	/* Gli attivi restano su due colonne anche qui, come nell'originale: il
	   riquadro è quadrato e piccolo, ma la fila di due si legge come una coppia. */
	.goyn-ps__related {
		--goyn-ps-cols: 2;
		gap: 22px 12px;
	}

	/* Col dito la superficie comoda è 44px. */
	.goyn-ps__faq-q {
		min-height: 44px;
	}
}

/* ============================================================
   13. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate le annulla reveal.css. Qui l'ingrandimento delle fotografie in
   hover e la barra della distribuzione, che va mostrata al suo valore.
   ============================================================ */

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

	[data-goyn-scene].is-armed .goyn-ps__spread-fill,
	[data-goyn-scene].is-armed.is-in .goyn-ps__spread-fill {
		scale: var(--goyn-ps-pct, 0%) 1;
		transition: none;
	}

	.goyn-ps__faq-sign {
		transition: none;
	}
}