/* =======================
   BASE + FLUID TYPE
   ======================= */
:root{
  --bg:#f8fafc; --text:#0f172a; --muted:#64748b;
  --card:#fff; --border:#e2e8f0; --accent-2:#6b7280;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --wrap-max:1200px;

  /* Palette blu / celeste */
  --primary-50:#f0f9ff;
  --primary-100:#e0f2fe;
  --primary-200:#bae6fd;
  --primary-300:#7dd3fc;
  --primary-400:#38bdf8;
  --primary-500:#0ea5e9;
  --primary-600:#0284c7;
  --primary-700:#0369a1;

  /* Accenti */
  --accent: var(--primary-600);

  /* Tipografia fluida */
  --fs-12: clamp(11px, 0.75vw, 12px);
  --fs-14: clamp(12px, 0.9vw, 14px);
  --fs-16: clamp(14px, 1.1vw, 16px);
  --fs-18: clamp(15px, 1.25vw, 18px);
  --fs-22: clamp(18px, 1.8vw, 22px);
  --fs-28: clamp(20px, 2.4vw, 28px);
  --fs-34: clamp(22px, 3vw, 34px);

  /* Gradiente pillola prezzo */
  --pill-from: var(--primary-500);
  --pill-to:   var(--primary-700);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid rgba(14,165,233,.35); outline-offset:2px}

.wrap{max-width:var(--wrap-max); margin:0 auto; padding:20px}
@media (max-width:720px){ .wrap{padding:16px} }
@media (max-width:400px){ .wrap{padding:12px} }

/* =======================
   TOPBAR (CHIARA)
   ======================= */
.topbar{ background:#fff; color:#0f172a; border-bottom:1px solid var(--primary-100); }
.topbar-in{
  max-width:var(--wrap-max); margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:16px; font-weight:800; letter-spacing:.2px }
/* LOGO PIÙ GRANDE */
.brand img{ height: clamp(48px, 8vw, 84px); display:block }
.brand small{ color:#6b7280; font-weight:600; font-size:var(--fs-12) }

.contact{ display:flex; align-items:center; gap:16px; font-size:var(--fs-14); color:#334155; flex-wrap:wrap }
.contact a{ color:inherit; border-bottom:1px dotted transparent }
.contact a:hover{ border-bottom-color:#334155 }
.contact .sep{ opacity:.35 }

.cta-site{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:9999px; background:#fff; color:#0b1220;
  border:1px solid var(--primary-100); font-weight:700;
  transition:transform .04s ease, box-shadow .2s ease;
}
.cta-site:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(2,132,199,.18) }

@media (max-width:820px){
  .topbar-in{ justify-content:center; text-align:center }
  .brand{ width:100%; justify-content:center }
  .contact{ justify-content:center }
}

/* =======================
   HEADER
   ======================= */
.site-title{ margin:14px 0 4px; font-size:var(--fs-34); font-weight:900; letter-spacing:.2px }
.muted{ color:var(--muted); font-size:var(--fs-16) }
.small{ font-size:var(--fs-12) }

/* =======================
   GRID (4→3→2→1)
   ======================= */
.grid{
  display:grid; gap:24px; margin-top:16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width:1100px){ .grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:800px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns: 1fr; gap:16px; } }

/* =======================
   CARD (STILE VETRINA)
   ======================= */
.card{
  position:relative; background:var(--card);
  border:2px solid rgba(2,132,199,.10);
  border-radius:26px; box-shadow:0 12px 28px rgba(15,23,42,.06);
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(15,23,42,.10); border-color:var(--primary-300) }
.card-body{ padding:16px 16px 18px } /* niente padding extra */

/* NASCONDI i bollini Lungo/Breve ovunque */
.badge, .card .badge, .popup .badge{ display:none !important; }

/* Titolo card: rimosso il margine extra che serviva al bollino */
.car-title{
  font-weight:900; letter-spacing:.3px;
  margin-right:0;
  font-size:var(--fs-18); text-transform:uppercase
}
.car-sub{ color:#334155; margin-top:4px; font-size:var(--fs-14) }

/* Immagine: tutta visibile senza crop */
.car-img-wrap{
  display:flex; align-items:center; justify-content:center;
  margin:12px 0; background:#fff;
  border:1px solid var(--primary-100); border-radius:18px; overflow:hidden;
  height: clamp(220px, 26vw, 280px);
  padding:14px;
}
.car-img{
  width:auto; max-width:100%;
  height:100%; max-height:100%;
  object-fit:contain; display:block;
}
@media (min-width:700px){ .car-img{ max-height:260px } }

/* Specs */
.specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px }
.specs .muted{ font-size:var(--fs-12); color:#6b7280 }
.specs strong{ font-weight:900; font-size:var(--fs-16) }
@media (max-width:420px){ .specs{ grid-template-columns:1fr 1fr } }

/* =======================
   PREZZO “PILLOLA” (GRADIENTE)
   ======================= */
.price-pill{
  margin-top:18px; width:100%; border:0; cursor:pointer; color:#fff;
  background: linear-gradient(135deg, var(--pill-from), var(--pill-to));
  border-radius:999px; padding:16px 18px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 12px 28px rgba(2,132,199,.25);
  transition:transform .05s ease, filter .15s ease, box-shadow .2s ease;
}
.price-pill:hover{ filter:brightness(.98); box-shadow:0 16px 36px rgba(2,132,199,.28) }
.price-pill:active{ transform:scale(.99) }
.price-pill .price{ font-size:clamp(22px, 3vw, 28px); font-weight:900; line-height:1 }
.price-pill .per{ opacity:.95; font-size:var(--fs-14) }
.price-pill .vat{ font-size:var(--fs-12); opacity:.95 }

/* Evidenzia offerta */
.card.is-featured{ border-color:var(--primary-400); box-shadow:0 18px 44px rgba(2,132,199,.20) }
.card.is-featured .price-pill{ background:linear-gradient(135deg, var(--primary-500), var(--primary-600)) }

/* =======================
   TABS (LUNGO/BREVE)
   ======================= */
.tabs{
  display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--primary-100);
  padding-bottom:6px; margin:0 0 14px; overflow:auto;
}
.tab{
  appearance:none; border:none; background:transparent; color:#0f172a;
  font-weight:800; letter-spacing:.2px; padding:10px 14px; border-radius:9999px;
  cursor:pointer; transition:background .15s ease, color .15s ease, transform .05s ease;
  white-space:nowrap;
}
.tab .count{
  margin-left:8px; padding:2px 8px; border-radius:999px; font-weight:700;
  background:#eef6ff; color:#475569; font-size:12px;
}
.tab:hover{ background:var(--primary-50) }
.tab.is-active{ background:var(--primary-600); color:#fff }
.tab.is-active .count{ background:rgba(255,255,255,.18); color:#fff }
.tab-panel[hidden]{ display:none !important }
@media (max-width:640px){ .tab{ padding:8px 12px } }

/* =======================
   MODAL / POPUP (z-index robusto)
   ======================= */
.modal.hidden{ display:none }
.modal{ position:fixed; inset:0; z-index:1000; overflow:auto }
.modal-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:1000; cursor:pointer }
.modal-dialog{
  position:relative; z-index:1001; background:#fff; max-width:1120px;
  margin:40px auto; border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
}
.modal-close{ position:absolute; top:8px; right:10px; border:none; background:transparent; font-size:28px; cursor:pointer }
.modal-content{ display:block; max-height:92vh; overflow:hidden; -webkit-overflow-scrolling:touch }

/* Layout popup */
.popup{ display:grid; grid-template-columns:1.05fr 1.25fr; height:100%; min-height:0 }
.popup-left,.popup-right{ padding:26px; overflow:auto; -webkit-overflow-scrolling:touch; min-height:0 }
.popup-right{ border-left:1px solid var(--border); background:#fff }

/* Area immagine principale */
.hero{
  width:100%; height: clamp(300px, 45vh, 460px);
  display:grid; place-items:center; background:#fff;
  overflow:visible !important;   /* evita tagli dei contenuti */
}
.hero img{ max-width:100%; max-height:100%; object-fit:contain }

/* ====== GALLERIA: THUMBS SOTTO E FUORI DALL'IMMAGINE ====== */
/* forza layout colonnare immagine -> thumbs, elimina qualsiasi overlay */
.popup-right{ display:flex; flex-direction:column; }
.popup-right .hero{ order:1; }
.popup-right .thumbs{ order:2; }

.thumbs{
  position: static !important;      /* NO overlay assoluto */
  display:flex; gap:10px; margin-top:12px !important;
  justify-content:center; flex-wrap:wrap;
  z-index:auto !important;
}
.thumbs .thumb{
  width: clamp(78px, 12vw, 104px);
  height: clamp(60px, 9vw, 78px);
  object-fit:cover;
  border:1px solid var(--border);
  border-radius:8px; cursor:pointer; background:#fff;
  transition:transform .1s ease, box-shadow .1s ease;
}
.thumbs .thumb:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08) }

/* Popup mobile full-screen */
@media (max-width:980px){
  .popup{ grid-template-columns:1fr }
  .popup-right{ border-left:none; border-top:1px solid var(--border) }
}
@media (max-width:640px){
  .modal-dialog{ margin:0; min-height:100vh; border-radius:0 }
  .modal-content{ max-height:100vh }
  .popup-left,.popup-right{ padding:16px }
}

/* =======================
   LISTE NEL POPUP
   ======================= */
.included{ margin-top:18px }
.checklist, .starlist{ columns:2; column-gap:24px }
.checklist li::marker{ content:'✔ ' } .starlist li::marker{ content:'★ ' }
@media (max-width:560px){ .checklist, .starlist{ columns:1 } }

/* =======================
   FOOTER
   ======================= */
.footer{
  margin-top:48px; padding:24px 0; border-top:1px solid var(--border);
  color:var(--muted); font-size:var(--fs-14);
}

/* =======================
   UTILITY
   ======================= */
.only-mobile{ display:none !important }
.only-desktop{ display:block !important }
@media (max-width:720px){
  .only-mobile{ display:block !important }
  .only-desktop{ display:none !important }
}

/* =======================
   ACCESSIBILITY / MOTION
   ======================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}