/* =========================================================
   VARIABILI GLOBALI (colori, spaziature)
   Cambiando questi valori cambi il colore/stile in tutto il sito
   senza dover cercare ogni singola regola.
   ========================================================= */
:root{
    --bg:#000000;           /* nero di sfondo del sito precedente #07080a */
    --panel:#101211;        /* grigio scuro usato per pannelli/card */
    --green:#3fe64a;        /* verde principale (bordi, accenti) */
    --green-bright:#a6ffb4; /* verde chiaro (testi, glow) */
    --green-dim:#1f8a2a;    /* verde spento (bordi sottili, dettagli) */
    --steel:#5b625b;        /* grigio neutro (testi secondari, pulsanti disattivati) */
    --off-white:#f2f2ea;    /* bianco sporco, colore testo principale */
    --gap: clamp(1.5rem, 4vw, 4rem); /* margine laterale standard di ogni sezione */
    --marquee-h: 2.2rem; /* altezza della striscia che scorre sopra la navbar */
  }

  /* Reset di base: azzera margini/padding di default del browser */
  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; } /* scroll fluido quando si clicca un link del menu */

  body{
    background:var(--bg);
    color:var(--off-white);
    font-family:'Barlow Condensed', sans-serif; /* font principale del sito */
    font-size:1.15rem;
    line-height:1.5;
    overflow-x:hidden;
  }

  /* Disattiva le animazioni per chi ha impostato "riduci movimento" nel sistema */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  a{ color:inherit; text-decoration:none; }

  /* ===== STRISCIA ANNUNCIO (sopra la navbar, su ogni pagina) =====
     Testo che scorre in loop infinito, verde su nero. Caricata insieme
     alla navbar (stesso frammento partials/nav.html), per questo sta
     qui prima del blocco NAV. Per cambiare il testo: modifica
     partials/nav.html (due copie identiche di .marquee-content, serve
     il duplicato per il loop senza scatti). Per cambiare la velocità:
     modifica la durata (18s) di @keyframes marquee-scroll qui sotto. */
  .marquee{
    position:fixed;
    top:0; left:0; right:0;
    z-index:101; /* sopra la navbar (100) */
    height:var(--marquee-h);
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--bg);
    border-bottom:1px solid var(--green-dim);
  }
  .marquee-track{
    display:flex;
    /* niente "width:max-content" qui: essendo l'unico figlio di un
       flex container (.marquee) con contenuto che non va a capo
       (white-space:nowrap sui figli), si dimensiona già automaticamente
       al contenuto — testato: stessa identica larghezza in entrambi i
       casi. La keyword max-content in più però fa sì che Safari
       ricalcoli il layout più spesso durante un'animazione continua,
       che è probabilmente la causa degli scatti/vuoti periodici
       osservati. will-change forza l'animazione sul livello GPU
       (compositor) invece di rientrare nel normale ciclo di layout. */
    will-change:transform;
    animation:marquee-scroll 18s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }
  .marquee-content{
    display:flex;
    align-items:center;
    white-space:nowrap;
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.8rem;
    color:var(--off-white);
    /* NESSUN padding qui: tutta la spaziatura viene da .marquee-item
       (vedi sotto), così lo spazio tra la fine di una copia e l'inizio
       della successiva è identico a quello tra due elementi qualsiasi
       — se no si crea un vuoto più grande proprio in quel punto, che
       si vede come una "pausa" ogni volta che il loop si ripete. */
  }
  .marquee-item{
    padding-right:2.4rem; /* spazio uniforme tra ogni elemento, incluso tra un blocco e il successivo: modifica questo valore per cambiarlo */
  }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); } /* metà = una copia intera del testo, per il loop senza scatti */
  }

  /* ===== NAV =====
     Barra di navigazione fissa in alto su tutte le pagine, sotto la
     striscia annuncio qui sopra (vedi --marquee-h).
     Su desktop mostra i link normali; sotto i 720px si trasforma in
     un menu a scomparsa con hamburger (vedi @media in fondo al blocco).
  */
  nav{
    position:fixed;
    top:var(--marquee-h); left:0; right:0;
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 0.9rem var(--gap);
    background:linear-gradient(to bottom, rgba(7,8,10,0.92), rgba(7,8,10,0));
    backdrop-filter:blur(2px);
  }
  nav .brand{
    font-family:'Bungee', sans-serif;
    font-size:1rem;
    letter-spacing:0.05em;
    color:var(--green-bright);
    text-shadow:0 0 8px rgba(63,230,74,0.6);
  }
  nav ul{
    list-style:none;
    display:flex;
    gap:clamp(1rem, 2.5vw, 2.2rem);
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    font-size:0.95rem; /* dimensione voci menu su mobile */
    letter-spacing:0.04em;
  }
  /* Da desktop le voci del menu sono leggermente più grandi: modifica
     questo font-size per cambiarne la dimensione (era 0.95rem come su
     mobile). */
  @media (min-width:721px){
    nav ul{ font-size:1.2rem; }
  }
  nav ul a{ position:relative; padding-bottom:3px; }
  @media (hover:hover){
    nav ul a:hover{ color:var(--green-bright); }
  }

  /* Link "← Home" usato nelle pagine Shop/Gallery vuote (non più usato ora
     che hanno la nav completa, ma resta disponibile se serve altrove) */
  .back-link{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.95rem;
    color:var(--off-white);
  }
  @media (hover:hover){
    .back-link:hover{ color:var(--green-bright); }
  }

  /* Bottone hamburger (le 3 lineette), visibile solo su mobile.
     Le classi nav.open aggiunte via JS (script.js) trasformano le
     3 lineette in una "X" e aprono il menu laterale. */
  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0.4rem;
    z-index:110;
  }
  .nav-toggle span{
    width:26px; height:2px;
    background:var(--green-bright);
    box-shadow:0 0 6px rgba(63,230,74,0.6);
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Sfondo scuro semi-trasparente dietro il menu mobile aperto,
     cliccabile per richiudere il menu (gestito in script.js) */
  #menuOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:90;
  }
  nav.open + #menuOverlay{
      opacity:1;
      visibility:visible;
  }

  /* Sotto i 720px: nasconde i link normali, mostra l'hamburger,
     il menu diventa un pannello che scorre da destra */
  @media (max-width:720px){
    .nav-toggle{ display:flex; }
    nav ul{
      position:fixed;
      top:var(--marquee-h); right:0;
      height:calc(100dvh - var(--marquee-h));
      width:240px;
      flex-direction:column;
      justify-content:flex-start;
      gap:0.7rem;
      background:rgba(7,8,10,0.98);
      border-left:1px solid var(--green-dim);
      transform:translateX(100%);
      transition:transform 0.3s ease;
      font-size:1.3rem;
      padding:5rem 1rem 1rem; /* top 7rem (sotto la navbar), 2rem sugli altri lati */
    }
    nav.open ul{ transform:translateX(0); }
    /* Linea verde sottile tra una voce di menu e l'altra (+ sopra la
       prima voce e sotto l'ultima): resta inset dai bordi sx/dx del
       menu grazie al padding di nav ul qui sopra. */
    nav ul li{
      padding-bottom:0.7rem;
      border-bottom:1px solid var(--green-dim);
    }
    nav ul li:first-child{
      padding-top:0.7rem;
      border-top:1px solid var(--green-dim);
    }
  }

  /* ---------- HERO ---------- */
  /* ===== HERO (landing page) =====
     Sezione iniziale a piena pagina: foto di sfondo + logo + tagline.
     - .hero::before = la foto di sfondo, scurita con filter+gradiente
       per far risaltare logo e testo sopra
     - .hero-content = logo + tagline, spostati leggermente sotto il
       centro verticale tramite margin-top
  */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: calc(6rem + var(--marquee-h)) var(--gap) 4rem;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:url('../assets/brand/crowd.jpg') center 30%/cover no-repeat;
    filter:saturate(1.1) brightness(0.55); /* scurisce la foto */
    z-index:0;
  }
  /* ===== PROVA VIDEO DI SFONDO (temporaneo, vedi index.html) =====
     Stesso trattamento della foto sopra: riempie l'hero, viene
     ritagliato per coprire tutto lo spazio (object-fit:cover) e sta
     allo stesso livello (z-index:0) della foto in .hero::before, ma
     essendo un elemento vero (non uno pseudo-elemento) la dipinge
     sopra — quindi la copre senza bisogno di toccare quella regola. */
  .hero-video{
    position:absolute; inset:0;
    z-index:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    /* velo scuro sfumato sopra la foto, più intenso verso il basso */
    background:linear-gradient(to bottom, rgba(7,8,10,0.55) 0%, rgba(7,8,10,0.35) 40%, rgba(7,8,10,0.95) 100%);
    z-index:1;
  }
  .hero-content{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem; /* distanza logo-tagline, uguale su mobile e desktop: modifica questo valore per cambiarla */
    margin-top:0vh; /* sposta il contenuto verso il basso rispetto al centro */
  }
  .hero img.logo{
    width:min(560px, 82vw);
  }
  .hero .tag{
    font-family:'Barlow Condensed', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.35em;
    font-size:0.95rem; /* dimensione tagline su mobile */
    color:var(--green-bright);
  }
  /* Da desktop la tagline è leggermente più grande: modifica questo
     font-size per cambiarne la dimensione (era 0.95rem come su mobile). */
  @media (min-width:721px){
    .hero .tag{ font-size:1.1rem; }
  }
  .scroll-cue{
    position:absolute;
    bottom:2rem; left:50%; transform:translateX(-50%);
    z-index:3;
    font-size:0.8rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--steel);
    display:flex; flex-direction:column; align-items:center; gap:0.4rem;
    animation:bob 2.2s ease-in-out infinite;
  }
  @keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

  /* ---------- SECTION SHELL ---------- */
  section{ padding: clamp(3rem,6vw,5rem) var(--gap); position:relative; }
  @media(max-width:720px){
  section{
      padding-top:1.5rem;
      padding-bottom:1.5rem;
  }
  }
  .eyebrow{
    font-size:0.85rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:0.6rem;
  }
  /* Da desktop "// Music" e "// About Us" sono leggermente più grandi
     delle altre eyebrow del sito: modifica questo font-size per
     cambiarne la dimensione (era 0.85rem come le altre). */
  @media (min-width:721px){
    #music .eyebrow,
    #about .eyebrow{
      font-size:1rem;
    }
  }
  /* ===== SEZIONI SHOP E GALLERY (sulla home) =====
     Foto a piena larghezza/altezza come sfondo della sezione stessa
     (background-image), con il pulsante sopra. Foto diverse per
     mobile/desktop tramite media query (vedi sotto).

     FORMATO FOTO CONSIGLIATO (non obbligatorio al pixel esatto,
     ma più ci si avvicina meno "sorprese" nel taglio):
     - Desktop: 16:9 orizzontale, es. 1920×1080px
     - Mobile:  4:5 o 3:4 verticale, es. 900×1200px
     Il CSS "background-size:cover" ritaglia comunque automaticamente
     qualsiasi foto per riempire lo spazio, qualunque sia la sua
     proporzione originale — il formato consigliato serve solo per
     controllare TU cosa viene tagliato, invece di lasciarlo al caso.
  */
  .teaser-banner{
    position:relative;
    height:85vh;              /* altezza fissa e definita: niente ambiguità di layout */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:2.5rem 0;          /* respiro tra una sezione e l'altra, evita che si "fondano" visivamente */
    background-size:cover;    /* la foto riempie sempre tutto lo spazio, ritagliando se serve */
    background-position:center;
    background-repeat:no-repeat;
  }
  @media (max-width:720px){
  .teaser-banner{
    height:60vh;
  }
}
  /* Foto DESKTOP: una per sezione, selezionata tramite ID */
  #shop.teaser-banner{
    background-image:url('../assets/teasers/shop-teaser-desktop.jpg');
  }
  #gallery.teaser-banner{
    background-image:url('../assets/teasers/gallery-teaser-desktop.jpg');
  }
  /* Sotto i 720px: swap automatico con le versioni verticali mobile.
     Per cambiare le foto: sostituisci questi 4 file in assets/,
     stessi nomi, non serve toccare questo CSS. */
  @media (max-width:720px){
    #shop.teaser-banner{
      background-image:url('../assets/teasers/shop-teaser-mobile.jpg');
    }
    #gallery.teaser-banner{
      background-image:url('../assets/teasers/gallery-teaser-mobile.jpg');
    }
  }
  /* ===== PULSANTI TEASER SHOP/GALLERY — versioni provate =====
     Sotto la regola ATTIVA (quella non commentata) tieni traccia delle
     versioni scartate: per tornarci, commenta quella attiva e
     scommenta la versione che vuoi. Nessuna versione tocca l'HTML,
     solo questa regola .teaser-cta (+ il suo :hover).

     VERSIONE 1 (originale) — riquadro pieno verde, testo nero:
     .teaser-cta{
       position:relative; z-index:1; display:inline-block;
       background:var(--green); color:var(--bg);
       font-family:'Bungee', sans-serif; font-size:0.9rem;
       text-transform:uppercase; padding:0.9rem 1.8rem; letter-spacing:0.04em;
       transition:transform 0.15s ease, box-shadow 0.15s ease;
     }
     @media (hover:hover){
       .teaser-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(63,230,74,0.35); }
     }

     VERSIONE 2 — riquadro con bordo verde, testo verde su nero:
     .teaser-cta{
       position:relative; z-index:1; display:inline-block;
       background:var(--bg); color:var(--green-bright);
       border:1.5px solid var(--green);
       font-family:'Bungee', sans-serif; font-size:0.9rem;
       text-transform:uppercase; padding:0.9rem 1.8rem; letter-spacing:0.04em;
       transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
     }
     @media (hover:hover){
       .teaser-cta:hover{
         background:var(--green); color:var(--bg);
         transform:translateY(-2px); box-shadow:0 6px 18px rgba(63,230,74,0.35);
       }
     }

     VERSIONE 3 — niente riquadro, solo scritta verde luminosa con
     sottolineatura animata (scartata: poco leggibile su foto chiare):
     .teaser-cta{
       position:relative; z-index:1; display:inline-block;
       background:none; border:none; padding:0 0 0.4rem;
       color:var(--green-bright);
       font-family:'Bungee', sans-serif; font-size:1.1rem;
       text-transform:uppercase; letter-spacing:0.06em;
       text-shadow:
         0 0 10px rgba(63,230,74,0.6),
         0 0 22px rgba(63,230,74,0.3),
         0 2px 6px rgba(0,0,0,0.85);
       transition:letter-spacing 0.2s ease;
     }
     .teaser-cta::after{
       content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
       background:var(--green); box-shadow:0 0 8px rgba(63,230,74,0.6);
       transform:scaleX(0); transform-origin:left; transition:transform 0.25s ease;
     }
     @media (hover:hover){
       .teaser-cta:hover{ letter-spacing:0.1em; }
       .teaser-cta:hover::after{ transform:scaleX(1); }
     }
  */

  /* VERSIONE 4 (attiva) — pillola con sfondo scuro semi-trasparente
     sfocato (leggibile sopra qualsiasi punto della foto, chiaro o
     scuro) + bordo e testo verde. Stessa logica hover di V2 (inversione
     colori), forma diversa (arrotondata invece che squadrata). */
  .teaser-cta{
    position:relative;
    z-index:1;
    display:inline-block;
    background:rgba(7,8,10,0.7);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1.5px solid var(--green);
    border-radius:999px;
    color:var(--green-bright);
    font-family:'Bungee', sans-serif;
    font-size:0.9rem;
    text-transform:uppercase;
    padding:0.9rem 1.9rem;
    letter-spacing:0.04em;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  @media (hover:hover){
    .teaser-cta:hover{
      background:var(--green);
      color:var(--bg);
      transform:translateY(-2px);
      box-shadow:0 6px 18px rgba(63,230,74,0.35);
    }
  }

  /* ---------- CHI SIAMO / ABOUT ---------- */
  .about{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items:center;
  }
  .about-photo{
    position:relative;
    aspect-ratio: 4/5;
    overflow:hidden;
    border:1px solid var(--green-dim);
  }
  .about-photo img{
    width:100%; height:100%; object-fit:cover;
  }
  .about p{ color:#cfd4cd; max-width:52ch; font-size:1.2rem; margin-bottom:1rem; }
  .about p:last-child{ margin-bottom:0; }

  @media (max-width:820px){
    .about{ grid-template-columns:1fr; }
  }

  /* ---------- GALLERY PAGE (foto per città) ---------- */
  .gallery-page{
    padding-top:calc(7rem + var(--marquee-h));
    max-width:1400px;
    margin:0 auto;
  }
  .city-group{
    margin-bottom:3rem;
  }
  .city-name{
    font-family:'Bungee', sans-serif;
    font-size:1.4rem;
    color:var(--green-bright);
    text-shadow:0 0 8px rgba(63,230,74,0.5);
    text-transform:uppercase;
    margin-bottom:1.2rem;
  }
  /* Il "mosaico": su mobile column-count:1 = foto impilate in singola
     colonna. Da 721px in su (vedi @media sotto) diventa un collage
     "bento" a griglia fissa: 4 celle nominate (a=hero 2x2, b=larga 2x1,
     c/d=piccole 1x1) che riempiono sempre l'intero rettangolo, qualunque
     sia il formato reale delle foto (vedi object-fit:cover sotto).
     Pensato per gruppi di 4 foto per città — se una città avrà un
     numero diverso di foto andrà definito un pattern dedicato. */
  .mosaic{
    column-count:1;
    column-gap:0.8rem;
  }
  .mosaic img{
    width:100%;
    display:block;
    margin-bottom:0.8rem;
    break-inside:avoid;
    border:1px solid #1c1f1c;
  }
  @media (min-width:721px){
    .mosaic{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      grid-template-rows:repeat(2, clamp(160px, 18vw, 260px));
      grid-template-areas:
        "a a b b"
        "a a c d";
      gap:0.8rem;
    }
    /* Pattern diversi per città, assegnati con una classe esplicita
       sul singolo .mosaic (mosaic--b/c/d) invece che contando i
       fratelli via CSS: coi selettori tipo ":nth-of-type" o "~" la
       numerazione si sfasa facilmente (es. l'eyebrow prima dei
       city-group non è un .city-group ma è comunque un <div>) e non
       scala bene oltre 2 città. Una classe per gruppo è esplicita e
       non si rompe aggiungendo nuove città.
       Nota: la mappatura foto→area (nth-child sotto) resta identica
       per tutti i pattern: cambia solo DOVE sta ogni area nella
       griglia, non quale foto le corrisponde. */

    /* Pattern A (default, es. Rimini): hero a sinistra */
    /* — già coperto dal .mosaic sopra, nessuna regola aggiuntiva */

    /* Pattern B (es. Milano): speculare, hero a destra */
    .mosaic--b{
      grid-template-areas:
        "b b a a"
        "c d a a";
    }

    /* Pattern C (es. Firenze): hero al centro, foto alta a sinistra,
       due piccole impilate a destra — diverso da A/B (lì l'hero è
       sempre su un lato, mai in mezzo). */
    .mosaic--c{
      grid-template-areas:
        "b a a c"
        "b a a d";
    }

    /* Pattern D (es. Parma): niente hero quadrato 2x2 come A/B/C —
       2 quadratini + un rettangolo orizzontale per riga, specchiati
       (rettangolo a destra sopra, a sinistra sotto). Usa 6 foto
       invece di 4 (vedi nth-child(5)/(6) sotto e gallery.html). */
    .mosaic--d{
      grid-template-areas:
        "a b c c"
        "d d e f";
    }

    .mosaic img:nth-child(1){ grid-area:a; }
    .mosaic img:nth-child(2){ grid-area:b; }
    .mosaic img:nth-child(3){ grid-area:c; }
    .mosaic img:nth-child(4){ grid-area:d; }
    .mosaic img:nth-child(5){ grid-area:e; }
    .mosaic img:nth-child(6){ grid-area:f; }
    .mosaic img{
      width:100%;
      height:100%;
      object-fit:cover;
      margin-bottom:0;
    }
  }

  /* ---------- PLAYLIST PANEL (Music) ---------- */
  .panel{
    border:2px solid var(--steel);
    background:
      radial-gradient(circle, rgba(63,230,74,0.06) 1px, transparent 1.2px) 0 0/10px 10px,
      var(--panel);
    padding: clamp(1.5rem,4vw,3rem);
    position:relative;
  }
  .panel::before{
    content:"";
    position:absolute; inset:8px;
    border:1px solid rgba(63,230,74,0.18);
    pointer-events:none;
  }
  .playlist-wrap iframe{
    width:100%;
    border-radius:0;
    filter:grayscale(0.1);
  }
  .panel-label{
    font-family:'Bungee', sans-serif;
    font-size:0.85rem;
    color:var(--green-bright);
    text-transform:uppercase;
    letter-spacing:0.15em;
    margin-bottom:1rem;
  }

  /* ---------- SHOP PAGE (elenco prodotti) ----------
     Mobile: griglia a 2 colonne. Desktop: per ora una singola colonna
     verticale, centrata e non a piena larghezza (vedi @media sotto).
     Le foto prodotto non hanno bordo/cornice apposta: essendo su
     sfondo nero come il resto del sito, l'effetto voluto è di
     continuità con la pagina, non di "scheda" separata. */
  .shop-page{
    padding-top:calc(7rem + var(--marquee-h));
    max-width:1400px;
    margin:0 auto;
  }
  .products-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:2.5rem 1rem;
  }
  .product-card{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  /* Contenitore della foto prodotto: tiene le proporzioni della
     card e permette di sovrapporre la foto n.2, mostrata al passaggio
     del mouse (solo dove il mouse esiste, vedi @media hover sotto). */
  .product-photo-wrap{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1/1;
  }
  .product-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .product-photo--hover{
    opacity:0;
    transition:opacity 0.2s ease;
  }
  @media (hover:hover){
    .product-card:hover .product-photo--hover{
      opacity:1;
    }
  }
  .product-name{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.03em;
    font-size:1rem;
    color:var(--off-white);
  }
  .product-price{
    font-family:'Barlow Condensed', sans-serif;
    color:var(--green-bright);
    font-size:0.95rem;
  }
  @media (min-width:721px){
    .products-grid{
      /* 320px = larghezza massima di ogni card: alzalo per ingrandire
         ancora i prodotti e lasciare meno spazio vuoto ai lati. */
      grid-template-columns:repeat(3, minmax(0, 320px));
      justify-content:center;
      gap:3rem 2rem;
    }
  }

  /* ---------- PRODUCT PAGE (dettaglio singolo prodotto) ----------
     Generata da js/script.js (loadProductDetail) leggendo
     data/products.json in base a ?id= nell'URL. Mobile: colonne
     impilate. Desktop: due colonne fianco a fianco (vedi @media). */
  .product-page{
    padding-top:calc(7rem + var(--marquee-h));
    max-width:1100px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:2.5rem;
  }
  .product-gallery{
    display:flex;
    flex-direction:column;
    gap:0.8rem;
  }
  .product-main-photo{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    display:block;
  }
  .product-thumbs{
    display:flex;
    gap:0.6rem;
  }
  .product-thumbs img{
    width:70px;
    height:70px;
    object-fit:contain;
    cursor:pointer;
    border:1.5px solid transparent;
    opacity:0.6;
    transition: border-color 0.2s, opacity 0.2s;
  }
  .product-thumbs img.active{
    border-color:var(--green);
    opacity:1;
  }

  .product-info{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
  }
  .product-title{
    font-family:'Bungee', sans-serif;
    font-size:clamp(1.4rem, 3vw, 2rem);
    text-transform:uppercase;
    color:var(--off-white);
    letter-spacing:0.02em;
  }
  .product-info .product-price{
    font-family:'Barlow Condensed', sans-serif;
    font-size:1.4rem;
    color:var(--green-bright);
    margin-top: -1rem;
  }
  .product-availability{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.85rem;
    color:var(--green-bright);
    margin-top: -0.8rem;
  }
  .product-availability.is-soldout{
    color:var(--steel);
  }

  .product-field{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .product-field-label{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.8rem;
    color:var(--steel);
    margin-top: -0.3rem;
  }
  /* Contenitore della select: la freccina è un ::after posizionato
     sopra, perché una <select> non supporta pseudo-elementi propri
     in modo affidabile tra browser diversi. Un "▾" ruotato con un ">"
     per un chevron più sottile/stilizzato invece del triangolo pieno. */
  .product-select-wrap{
    position:relative;
    max-width:110px;
  }
  .product-select-wrap::after{
    content:">";
    position:absolute;
    top:50%; right:1rem;
    transform:translateY(-50%) rotate(90deg);
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    font-size:0.9rem;
    color:var(--green-bright);
    pointer-events:none; /* il click deve passare alla select sotto */
  }
  .product-size-select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
    background:var(--panel);
    border:1.5px solid var(--green-dim);
    color:var(--off-white);
    font-family:'Barlow Condensed', sans-serif;
    font-size:1rem;
    padding:0.6rem 2.2rem 0.6rem 1rem; /* spazio a destra per non finire sotto la freccina */
    width:100%;
    cursor:pointer;
  }
  .product-size-select::-ms-expand{ display:none; }

  .product-buy-btn{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    text-align:center;
    border-radius:0;
    border:1.5px solid var(--green);
    background:var(--green);
    color:var(--bg);
    font-family:'Barlow Condensed', sans-serif;
    font-size:1.1rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding:0.9rem 1.5rem;
    cursor:pointer;
    transition: opacity 0.2s;
  }
  .product-buy-btn.is-disabled{
    pointer-events:none;
    opacity:0.4;
  }
  @media (hover:hover){
    .product-buy-btn:hover{ opacity:0.85; }
  }

  .product-accordion{
    border-top:1px solid #1c1f1c;
  }
  .accordion-item{
    border-bottom:1px solid #1c1f1c;
  }
  .accordion-trigger{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:none;
    border:none;
    color:var(--off-white);
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-size:0.95rem;
    padding:1rem 0;
    cursor:pointer;
  }
  .accordion-trigger::after{
    content:"+";
    color:var(--green-bright);
    font-size:1.2rem;
  }
  .accordion-item.open .accordion-trigger::after{
    content:"−";
  }
  .accordion-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 0.25s ease;
  }
  .accordion-item.open .accordion-panel{
    grid-template-rows:1fr;
  }
  .accordion-panel-inner{
    overflow:hidden;
  }
  .accordion-panel-inner p,
  .accordion-list{
    padding-bottom:1rem;
    color:#cfd4cd;
    font-size:1.05rem; /* testo di Dettagli/Spedizione (non i pulsanti, quelli sono .accordion-trigger) */
    line-height:1.5;
  }
  .accordion-list{
    list-style:disc;
    padding-left:1.2rem;
  }

  @media (min-width:721px){
    .product-page{
      flex-direction:row;
      align-items:flex-start;
      gap:4rem;
    }
    .product-gallery,
    .product-info{
      flex:1;
    }
  }

  /* ---------- ALTRI PRODOTTI (sotto la pagina prodotto) ----------
     Riga orizzontale scorrevole con gli altri prodotti (stesse card
     dello shop, stesso hover foto n.2), sia su mobile che desktop —
     a differenza della griglia dello shop, qui è sempre una sola riga
     che scorre lateralmente. */
  .related-products{
    max-width:1400px;
    margin:0 auto;
  }
  .products-scroll{
    display:flex;
    gap:1.5rem;
    overflow-x:auto;
    padding-bottom:0.5rem;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .products-scroll .product-card{
    flex:0 0 160px;
    scroll-snap-align:start;
  }
  @media (min-width:721px){
    .products-scroll .product-card{
      flex-basis:220px;
    }
  }

  /* ---------- FOOTER ---------- */
  /* ===== FOOTER =====
     Piè di pagina uguale su tutte le pagine.
     - .footer-top = logo piccolo, allineato a sinistra
     - .footer-columns = le 4 categorie (Links, Sezioni sito, Contatti,
       Info legali) affiancate in colonne su desktop, a 2 colonne
       sotto i 720px (vedi @media in fondo al blocco)
  */
  footer{
    padding:3rem var(--gap) 2.4rem;
    text-align:left;
    border-top:1px solid #1c1f1c;
    color:var(--off-white);
    font-size:0.9rem;
    letter-spacing:0.05em;
  }
  .footer-top{
    margin-bottom:2.5rem;
  }
  .footer-logo{
    width:100px; /* logo piccolo, modifica questo valore per cambiarne la dimensione */
    height:auto;
    display:block;
  }
  /* Le 4 categorie affiancate come colonne. Da desktop justify-content:
     space-between le distribuisce su tutta la larghezza del footer
     invece di tenerle raggruppate a sinistra (gap resta come spaziatura
     minima se lo spazio si stringe). */
  .footer-columns{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:3rem;
  }
  /* Da desktop: margine laterale aggiuntivo sulle colonne (oltre al
     padding del footer) per restringerne la fascia e avvicinarle tra
     loro invece di farle arrivare fino ai bordi del footer. Alza/abbassa
     questo valore per allontanarle/avvicinarle ancora. */
  @media (min-width:721px){
    .footer-columns{
      margin:0 4rem;
    }
  }
  .footer-category{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
  }
  .footer-heading{
    font-family:'Bungee', sans-serif;
    font-size:0.8rem;
    color:var(--steel);
    text-transform:uppercase;
    letter-spacing:0.15em;
    margin-bottom:0.4rem;
  }
  .footer-category a{
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.85rem;
  }
  @media (hover:hover){
    .footer-category a:hover{ color:var(--green-bright); }
  }
  /* Sotto i 720px: 2 colonne invece delle 4 affiancate. grid-auto-flow:
     column riempie la prima colonna dall'alto (Links, Sezioni sito) e
     poi la seconda (Contatti, Info legali), senza dover toccare
     l'ordine nell'HTML. */
  @media (max-width:720px){
    .footer-columns{
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:repeat(2, auto);
      grid-auto-flow:column;
      column-gap:1.5rem;
      row-gap:2rem;
    }
  }

  /* Testo generico di stato (caricamento/vuoto/errore) — riusato da
     js/shop.js e js/product.js per i loro messaggi. */
  .no-events{
    color:#b8beb6;
    font-style:italic;
    font-size:1.05rem;
  }

  /* ===== SCHERMATA DI CARICAMENTO =====
     Copre tutto lo schermo (z-index alto, sopra a tutto il resto)
     finché la pagina non è pronta. La classe "loaded" (aggiunta da
     js/common.js quando la pagina ha finito di caricare) fa sparire
     l'overlay con una dissolvenza.
  */
  #pageLoader{
    position:fixed;
    inset:0;
    z-index:300;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity 0.5s ease;
  }
  #pageLoader.loaded{
    opacity:0;
    pointer-events:none; /* non blocca più i click una volta sparito */
  }
  .loader-logo{
    width:min(280px, 60vw);
    animation:loaderPulse 1.4s ease-in-out infinite; /* leggero "respiro" mentre carica */
  }
  @keyframes loaderPulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.6; transform:scale(0.96); }
  }

  /* ===== PAGINE LEGALI (Privacy, Termini, Recesso) =====
     Layout semplice: titolo + testo. Il contenuto reale va incollato
     dentro .legal-content in ciascuna pagina (privacy.html, ecc.),
     es. lo snippet generato da Iubenda.
  */
  .legal-page{
    padding-top:calc(7rem + var(--marquee-h));
    max-width:800px;
    margin:0 auto;
  }
  .legal-content{
    color:#cfd4cd;
    font-size:1.1rem;
    line-height:1.7;
  }
  .legal-content p{
    margin-bottom:1rem;
  }