/* Reset + mobile text-size fix */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#0b0b0b;color:#fff;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:gold;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Header + nav */
.site-header{position:sticky;top:0;background:#0b0b0b;border-bottom:1px solid #1f1f1f;z-index:20}
.nav-container{display:flex;align-items:center;gap:16px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.logo img{height:28px}
.hamburger{margin-left:auto;background:none;border:0;display:none;flex-direction:column;gap:4px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

/* desktop nav */
.nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav a{color:#ddd;padding:8px 10px;border-radius:8px}
.nav a[aria-current="page"]{color:#000;background:gold}
.nav .cta{color:#000;background:gold;font-weight:700}

/* MOBILE NAV */
@media (max-width:480px){
  .nav{display:none}
  .hamburger{display:flex}
  .nav.nav--open{
    display:flex;position:fixed;top:64px;left:0;right:0;
    background:#0b0b0b;border-bottom:1px solid #1f1f1f;
    padding:12px 16px;z-index:19;flex-direction:column;gap:8px;align-items:center
  }
}

/* =========================================================
   STORIES – un SOLO cerchio con lo SVG dentro (no ::before)
   ========================================================= */
.stories-wrap{position:sticky;top:64px;background:#0b0b0b;z-index:18;border-bottom:1px solid #1f1f1f}
.stories{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;overflow:hidden;flex-wrap:nowrap}
.story{flex:0 0 72px;text-align:center;color:#ddd}

.story img{
  width:52px;height:52px;
  aspect-ratio:1/1;            /* cerchio perfetto */
  border-radius:50%;
  border:2px solid gold;       /* unico bordo */
  background:#111;
  object-fit:contain;          /* lo SVG non si stira */
  margin:0 auto 4px;
}
.story span{font-size:12px;display:block;color:#9aa0a6}

/* Hover/Active */
.story:hover img{
  background:gold; border-color:gold;
  box-shadow:0 0 18px rgba(212,175,55,.35), 0 0 40px rgba(212,175,55,.20) inset;
  transform:translateY(-1px); transition:all .25s ease
}
.story:hover span{color:gold; text-shadow:0 0 6px rgba(212,175,55,.35); transform:translateY(-1px); transition:all .25s ease}
.story:active img{
  background:#ffe08a; border-color:#ffe08a;
  box-shadow:0 0 14px rgba(255,208,120,.45), 0 0 36px rgba(255,208,120,.20) inset;
  transform:translateY(0)
}
.story:active span{color:#ffe08a; text-shadow:0 0 6px rgba(255,208,120,.35); transform:translateY(0)}

/* Mobile: 5 icone equidistanti */
@media (max-width:480px){
  .stories{gap:8px}
  .story{flex:0 0 20%;max-width:20%}
  .story img{width:44px;height:44px}  /* solo dimensione */
  .story span{font-size:11px}
}

/* MARQUEE */
.marquee-wrap{overflow:hidden;border-top:1px solid #1f1f1f;border-bottom:1px solid #1f1f1f;background:gold}
.marquee{white-space:nowrap;display:flex;gap:64px;animation:marquee 8s linear infinite;line-height:1}
.marquee span{display:inline-block;color:#000;padding:8px 0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Hero / banner prezzo */
.hero{padding:24px 0 8px}
.title{font-size:clamp(26px,6vw,38px);margin:0 0 8px;color:gold;text-align:center}
.subtitle{text-align:center;color:#ddd;margin:0 auto 18px;max-width:780px}
.price-banner{display:grid;justify-items:center;gap:6px;margin:8px 0 16px}
.price-text{opacity:.9}
.price-line .price-was{text-decoration:line-through;opacity:.6}
.price-now{font-size:clamp(22px,6vw,32px);font-weight:800;color:#fff;background:#1a1a1a;padding:6px 14px;border-radius:10px;border:1px solid #2d2d2d}
.price-note{font-size:12px;opacity:.8}
.btn{display:inline-block;padding:10px 16px;border-radius:10px}
.btn.primary{background:gold;color:#000;font-weight:700}

/* Cards / grid */
.audio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:#121212;border:1px solid #1f1f1f;border-radius:16px;padding:16px}
.cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;margin:0 auto}
.track-title{margin:10px 0 12px;font-weight:600}

/* Player */
.vplayer{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.ring{position:relative;width:160px;height:160px;display:grid;place-items:center;margin:0 auto}
.ring-canvas{position:absolute;inset:0;width:100%;height:100%}
.play-btn{position:relative;width:96px;height:96px;border-radius:999px;border:2px solid gold;background:#fff;color:#000;display:grid;place-items:center;cursor:pointer;outline:0;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.play-tri,.pause-bars{position:absolute;inset:0;display:grid;place-items:center}
.play-tri{font-size:34px;translate:1px 0}
.pause-bars{grid-auto-flow:column;justify-content:center;align-items:center;column-gap:6px}
.pause-bars i{width:8px;height:28px;background:#000;border-radius:2px}
.is-playing .play-tri{display:none}
.is-paused .pause-bars{display:none}

/* Form + footer */
.form{display:grid;gap:12px;max-width:520px}
.form label{display:grid;gap:6px}
.form input,.form textarea{background:#0e0e0e;color:#fff;border:1px solid #2a2a2a;border-radius:10px;padding:10px}
.site-footer{border-top:1px solid #1f1f1f;margin-top:30px;padding:20px 0;background:#0b0b0b}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tiny{font-size:12px;opacity:.75}

/* ================== CALENDARIO (prenota) ================== */
.cal{
  position:relative;border:1px solid #222;border-radius:14px;padding:10px;background:#0f0f0f;margin-top:6px
}
.cal header{
  display:grid;grid-template-columns:32px 1fr 32px;align-items:center;margin-bottom:8px
}
.cal header .navbtn{
  width:24px;height:24px;border:1px solid #333;border-radius:6px;background:#1b1b1b;color:#ddd;font-size:14px;cursor:pointer
}
.cal header .title{ text-align:center;font-weight:800;line-height:1.2 }
.cal header .title .m{ text-transform:capitalize }
.cal header .title .y{ font-size:14px;opacity:.8 }

.cal grid{ display:grid;grid-template-columns:repeat(7,1fr);gap:6px }
.cal .dow{ font-size:12px;color:#aaa;text-align:center }
.cal .day{
  position:relative; /* per la riga sold out per-giorno */
  padding:8px 0;text-align:center;border:1px solid #222;border-radius:8px;cursor:pointer;min-height:36px;font-size:14px
}
.cal .day.disabled{ opacity:.35; pointer-events:none }
.cal .day.selected{ outline:2px solid gold }

/* Riga rossa opaca per OGNI giorno non disponibile, centrata orizzontalmente nel box */
.cal .day.disabled::after{
  content:"SOLD OUT";
  position:absolute;
  left:0; right:0;           /* centrata orizzontalmente */
  top:50%; transform:translateY(-50%);
  height:2px;                /* sottile */
  background:rgba(176,0,32,.7);
  color:#fff;
  font-size:9px; font-weight:700; line-height:0; /* testo “piatto” sopra la riga */
  text-align:center; white-space:nowrap; pointer-events:none;
}

/* (RIMOSSO il vecchio ribbon di mese intero) */