/* ===============================================================
   Francone · PRODUCT PAGE & CAROUSEL
   Font body: var(--font-body) = Manrope
================================================================ */

/* ---------- TOKENS ---------- */
:root{
  --c-bg:#fff;
  --c-text:#222;
  --c-accent:#009578;
  --c-muted:#6b7280;
  --radius:.75rem;
  --shadow:0 4px 14px rgb(0 0 0 /.08);
  --max-width:900px;

  /* font principali */
  --font-body: "Manrope", system-ui, sans-serif;               /* corpo testo */
  --font-hand: 'Gloria Hallelujah', 'Caveat', cursive;         /* titoli */
}

/* -------------------------------------------------------------
   TIPOGRAFIA
--------------------------------------------------------------*/
h1, h2, h3,
.product-title{                /* titolo presente nella hero */
  font-family: var(--font-hand);
}

/* (opzionale) peso, grandezza e colore rimangono quelli che hai
   già definito più sotto, per es.:                       */
.product-title{
  font-size:clamp(1.7rem,4vw,2.4rem);
  font-weight:600;
  margin-top:1.25rem;
  color:#00512b;
}

/* ---------- WRAPPER ---------- */
.product-page{
  background:var(--c-bg);
  color:var(--c-text);
  padding:2rem 1rem 3rem;
}
.product-page .container{
  width:min(92%,var(--max-width));
  margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-body);
}

/* ---------- HERO ---------- */
.product-hero{text-align:center;margin-bottom:2rem;}
.product-cover{
  width:100%;max-width:620px;object-fit:contain;border-radius:var(--radius);
}
.product-title{
  font-size:clamp(1.7rem,4vw,2.4rem);
  font-weight:600;margin-top:1.25rem;color:#00512b;
}

/* ---------- BODY ---------- */
.product-body{
  display:flex;flex-direction:column;align-items:center;gap:2rem;
}
.description{
  font-size:1.05rem;font-weight:300;line-height:1.7;
  max-width:720px;text-align:center;
}

/* ---------- FORMATS GRID ---------- */
.product-formats{width:100%;}
.product-formats h2{font-size:1.35rem;text-align:center;margin-bottom:1.25rem;}
.formats-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;
}
.format{
  width:120px;background:#fff;border-radius:var(--radius);
  padding:1rem .5rem 1.25rem;text-align:center;
}
.format img{width:32px;height:32px;margin-bottom:.5rem;object-fit:contain;}
.format figcaption{font-size:.7rem;color:var(--c-muted);}

/* ---------- GALLERY ---------- */
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  justify-content: center;
}
@media (max-width: 599px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 601px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
.gallery-thumb{
  width:120px;height:120px;object-fit:cover;border-radius:.5rem;
  cursor:zoom-in;transition:opacity .25s;
}
.gallery-thumb:hover{opacity:.8}

/* ---------- LIGHTBOX ---------- */
.gallery-modal{
  position:fixed;inset:0;display:grid;place-items:center;
  background:rgb(0 0 0 /.8);opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.gallery-modal img{
  max-width:90%;max-height:90%;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.gallery-modal.show{opacity:1;pointer-events:auto;}

/* ---------- WAVE SEPARATORS ---------- */
.wave-top,
.wave-bottom{position:relative;filter:drop-shadow(0 3px 2px rgb(0 0 0 /.12));}
.wave-top::after,
.wave-bottom::after{
  content:"";position:absolute;left:0;width:100%;height:12px;pointer-events:none;
}
.wave-top::after{top:0;background:#fff;}
.wave-bottom::after{bottom:0;background:#c5c412;}

/* ---------- BACK BUTTON ---------- */
.back-link{text-align:right;margin-top:3rem;}
.btn-back{
  display:inline-block;padding:.8rem 2rem;border-radius:4px;
  background:var(--primary,#006837);color:#fff;font-weight:600;text-decoration:none;
  transition:background .2s;
}
.btn-back:hover,.btn-back:focus{
  background:var(--primary-dark,#00512b);outline:none;
}

/* ===============================================================
   CAROUSEL · DESKTOP (>=1025 px)
   badge 200 × 140 con frecce
================================================================ */
/* …qui restano le tue regole desktop originali (non mostrate)… */

/* ===============================================================
   CAROUSEL · TUTTI I DEVICE <=1024 px
   - frecce nascoste
   - swipe con dito
   - nessun overflow orizzontale
================================================================ */