/* Equifast Service — schede.css: le 30 schede prodotto (/prodotti/<nome>/), un modello solo.
   La base è style.css: testata, piede, etichetta, pulsanti, il movimento del 5-bis e i pezzi delle pagine interne
   (.pagina-testo, .elenco, la fisarmonica .domanda, .collegamento, .pagina-azioni). Qui solo quello in più delle
   schede, coi pezzi della home: l'etichetta che torna al marchio (con la freccia del kit girata), il titolo a due toni
   della hero, la cornice quadrata delle foto di Golden Box. Nessun colore nuovo: le variabili di :root. */

/* ── la pagina ───────────────────────────────────────────────────────── */
.prodotto { padding: calc(var(--testata) + env(safe-area-inset-top, 0px) + 22px) 0 72px; }
.prodotto__griglia { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }

/* il marchio: l'etichetta della home, che torna alla pagina del marchio */
.prodotto__marchio a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: -10px 0;
  color: var(--accento);
  -webkit-user-select: none; user-select: none;
}
.ico--indietro {
  --ico: url("/assets/icone/freccia-destra.png"); width: 15px; height: 9px;
  transform: rotate(180deg); transition: transform 200ms var(--ease-out);
}
.prodotto__marchio a:active { opacity: 0.8; }

/* il nome del prodotto, come il titolo della hero; nei mangimi la riga dopo i due punti va sotto, nell'accento */
.prodotto__titolo {
  margin-top: 12px;
  font-size: min(8.2vw, 40px); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
}
.prodotto__sotto {
  display: block; margin-top: 10px;
  font-size: clamp(19px, 5.2vw, 22px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--accento);
}

/* ── la foto: la cornice delle foto di Golden Box, quadrata ──────────── */
.prodotto__foto {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 24px; width: 100%; max-width: 560px;
  aspect-ratio: 1 / 1;
  border-radius: var(--raggio);
  background: var(--fondo-scheda);
  border: 1px solid var(--linea);
}
.prodotto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms var(--ease-out); }
/* il sacco del marchio, su fondo trasparente: in piedi al centro, su un alone del verde dell'accento */
.prodotto__foto--sacco {
  background:
    radial-gradient(56% 50% at 50% 47%, rgba(193, 226, 124, 0.14) 0%, rgba(193, 226, 124, 0) 72%),
    var(--fondo-scheda);
}
.prodotto__foto--sacco img { object-fit: contain; padding: 9% 12% 7%; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.5)); }
/* la foto del marchio su fondo bianco: la cornice è bianca come la foto */
.prodotto__foto--studio { background: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.prodotto__foto--studio img { object-fit: contain; padding: 6%; }
@media (hover: hover) and (pointer: fine) {
  .prodotto__foto:hover img { transform: scale(1.04); }
}

/* ── il testo: i paragrafi e gli elenchi delle pagine interne ─────────── */
.prodotto__testo { margin-top: 26px; }
.prodotto__testo > :first-child { margin-top: 0; }
.prodotto__testo .prodotto__attacco { color: var(--testo-chiaro); }
.prodotto__testo .prodotto__elenco { margin-top: 16px; }
.prodotto__testo .prodotto__elenco + .pagina-testo { margin-top: 16px; }
.prodotto .elenco__voce { text-wrap: pretty; }
/* «L-lisina», «0,5%-1,3%»: mai a capo dopo il trattino */
.unito { white-space: nowrap; }

/* ── la scheda tecnica: la fisarmonica delle domande frequenti, aperta con un clic nella stessa pagina ── */
.prodotto__scheda { margin-top: 28px; }
.prodotto__scheda summary { min-height: 60px; font-size: 17px; }
.prodotto__scheda-corpo { padding: 0 18px 18px; }
.prodotto__scheda[open] .prodotto__scheda-corpo { --sale: 10px; animation: sale 420ms var(--ease-out) backwards; }
.prodotto__scheda-corpo > .elenco:first-child { margin-top: 2px; }
.prodotto__scheda .elenco { max-width: none; }
.prodotto__scheda .elenco__voce { font-size: 15px; line-height: 1.55; overflow-wrap: break-word; }
.prodotto__scheda .elenco__voce:last-child { border-bottom: 0; }
.prodotto__sezione + .prodotto__sezione { margin-top: 22px; }
.prodotto__sezione .elenco, .prodotto__sezione .pagina-testo { margin-top: 10px; }
.prodotto__sezione .pagina-testo { font-size: 15px; color: var(--testo-chiaro); }

/* ── i due pulsanti, come nella hero: il pieno e il cerchio con la freccia ── */
.prodotto__azioni { margin-top: 30px; }

/* ── la testata: la voce del marchio (Mangimi, Fieni o IRONHORSE) nell'accento, come la pagina corrente ── */
.menu__voci a[aria-current="true"], .tendina a[aria-current="true"] { color: var(--accento); }

/* ── da 768 px ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .prodotto { padding-top: calc(var(--testata) + 40px); padding-bottom: 88px; }
  .prodotto__titolo { margin-top: 16px; font-size: clamp(42px, 5.2vw, 54px); line-height: 1.04; }
  .prodotto__sotto { margin-top: 12px; font-size: clamp(22px, 2.1vw, 28px); }
  .prodotto__foto { margin-top: 32px; }
  .prodotto__testo { margin-top: 32px; }
  .prodotto__testo .prodotto__attacco { font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.55; }
  .prodotto__scheda summary { min-height: 68px; font-size: 18px; padding: 14px 22px; }
  .prodotto__scheda-corpo { padding: 0 22px 22px; }
  .prodotto__scheda .elenco__voce { font-size: 15.5px; }
  .prodotto__azioni { margin-top: 36px; }
}

/* ── da 1024 px: il testo a sinistra, la foto a destra, ferma mentre si legge la scheda ── */
@media (min-width: 1024px) {
  .prodotto { padding-top: clamp(150px, 12vw, 186px); padding-bottom: clamp(96px, 7.6vw, 120px); }
  .prodotto__griglia {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "testa foto" "corpo foto";
    column-gap: clamp(56px, 6.4vw, 96px);
  }
  .prodotto__testa { grid-area: testa; }
  .prodotto__corpo { grid-area: corpo; }
  .prodotto__foto { grid-area: foto; margin-top: 0; max-width: none; position: sticky; top: calc(var(--testata) + 44px); }
  .prodotto__titolo { font-size: clamp(42px, 3.75vw, 56px); }
}

/* ══ il movimento (5-bis): come la hero della home, regole di Emil Kowalski (09 § 0-bis-2) ══════════════
   Il marchio, il nome e la foto entrano da soli, in CSS (non aspettano il JavaScript); il resto entra mentre si
   scorre (.reveal → .in, main.js). Solo transform e opacity. */
.prodotto__marchio { --sale: 16px; animation: sale 800ms var(--ease-out) 60ms backwards; }
.prodotto__titolo { --sale: 28px; animation: sale 900ms var(--ease-out) 130ms backwards; }
.prodotto__foto { --sale: 32px; animation: sale 1000ms var(--ease-out) 220ms backwards; }
.prodotto__foto img { --da: 1.07; animation: avvicina 1600ms var(--ease-out) 220ms backwards; }

@media (hover: hover) and (pointer: fine) {
  .prodotto__marchio a:hover .ico--indietro { transform: rotate(180deg) translateX(4px); }
}

/* ── meno movimento: restano le dissolvenze, via spostamenti e ingrandimenti ── */
@media (prefers-reduced-motion: reduce) {
  .prodotto__marchio, .prodotto__titolo, .prodotto__foto { animation-name: appare; }
  .prodotto__foto img { animation: none; }
  .prodotto__scheda[open] .prodotto__scheda-corpo { animation-name: appare; }
  .prodotto__foto:hover img { transform: none; }
  .prodotto__marchio a:hover .ico--indietro { transform: rotate(180deg); }
}