/* Safira Phase B - Global Cart */
/* Pulsante carrello: icona PNG su sfondo TRASPARENTE (niente cerchio colorato).
   Posizione e dimensione sono allineate agli altri due pulsanti flottanti
   (ricerca e WhatsApp), definiti in style.css. */
.cart-float{
position:fixed;
right:16px;
bottom:250px;
width:76px;
height:76px;
border:none;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
background:none;
background-color:transparent;
color:transparent;
font-size:0;              /* nasconde l'emoji 🛒 */
line-height:0;
z-index:900;
box-shadow:none;
padding:0;
cursor:pointer;
transition:transform .22s ease, filter .22s ease;
filter:drop-shadow(0 6px 14px rgba(6,28,53,.20));
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.cart-float::before{
content:"";
position:absolute;
inset:0;
background:url('../assets/img/icon-carrello-v2.png') center/contain no-repeat;
}
.cart-float:hover{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 10px 20px rgba(31,143,163,.32))}
.cart-float:active{transform:scale(.95)}

@media (max-width:390px){
.cart-float{width:68px;height:68px;right:12px;bottom:228px}
}
.cart-count{
position:absolute;
top:-5px;
right:-5px;
min-width:22px;
height:22px;
padding:0 6px;
border-radius:999px;
background:#061c35;
color:white;
font-size:12px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
border:2px solid white;
}
.cart-overlay{
position:fixed;
inset:0;
background:rgba(3,16,31,.58);
backdrop-filter:blur(10px);
z-index:2500;
display:none;
}
.cart-overlay.active{display:block}
.cart-panel{
position:fixed;
top:0;
right:0;
width:min(430px,92vw);
height:100vh;
background:#fff;
z-index:2501;
transform:translateX(105%);
transition:transform .35s cubic-bezier(.2,.8,.2,1);
box-shadow:-24px 0 70px rgba(0,0,0,.22);
display:flex;
flex-direction:column;
}
.cart-panel.active{transform:translateX(0)}
.cart-header{
padding:22px 24px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #e6eef5;
}
.cart-header h3{
font-family:'Manrope','Inter',sans-serif;
font-size:24px;
letter-spacing:-.04em;
color:#082f52;
}
.cart-close{
width:38px;
height:38px;
border:none;
border-radius:50%;
background:#eef7fb;
color:#082f52;
font-size:25px;
cursor:pointer;
}
.cart-body{
flex:1;
overflow:auto;
padding:18px 20px;
}
.cart-empty{
text-align:center;
padding:44px 16px;
color:#526d86;
line-height:1.7;
}
.cart-item{
display:grid;
grid-template-columns:72px 1fr;
gap:14px;
padding:14px 0;
border-bottom:1px solid #edf2f6;
}
.cart-item img{
width:72px;
height:72px;
border-radius:16px;
object-fit:cover;
background:#edf7fb;
}
.cart-item h4{
font-family:'Manrope','Inter',sans-serif;
font-size:16px;
color:#082f52;
margin-bottom:4px;
}
.cart-item-meta{
font-size:13px;
color:#526d86;
margin-bottom:10px;
}
.cart-item-controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.qty-controls{
display:inline-flex;
align-items:center;
gap:8px;
background:#f2f8fb;
border-radius:999px;
padding:4px;
}
.qty-controls button{
width:28px;
height:28px;
border:none;
border-radius:50%;
background:white;
color:#082f52;
font-weight:800;
cursor:pointer;
box-shadow:0 4px 12px rgba(8,36,58,.08);
}
.qty-controls span{
min-width:22px;
text-align:center;
font-weight:800;
color:#082f52;
}
.cart-remove{
border:none;
background:none;
color:#b44646;
font-size:12px;
font-weight:800;
cursor:pointer;
}
.cart-footer{
padding:20px 24px 24px;
border-top:1px solid #e6eef5;
background:linear-gradient(180deg,#ffffff,#f7fbff);
}
.cart-total-row{
display:flex;
align-items:center;
justify-content:space-between;
font-family:'Manrope','Inter',sans-serif;
font-weight:800;
color:#082f52;
font-size:18px;
margin-bottom:14px;
}
.cart-actions{
display:grid;
gap:10px;
}
.cart-checkout,
.cart-clear{
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
border:none;
border-radius:999px;
padding:14px 18px;
font-family:'Manrope','Inter',sans-serif;
font-weight:800;
cursor:pointer;
}
.cart-checkout{background:linear-gradient(135deg,#49c5b6,#d9c2a3);color:#03263f}
.cart-clear{background:#eef7fb;color:#082f52}
.cart-toast{
position:fixed;
right:24px;
bottom:250px;
background:#061c35;
color:white;
border-radius:18px;
padding:12px 16px;
z-index:2600;
box-shadow:0 16px 40px rgba(0,0,0,.24);
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:.28s ease;
font-size:14px;
font-weight:700;
}
.cart-toast.active{opacity:1;transform:translateY(0)}
[data-cart-add]{
cursor:pointer;
}
.cart-add-btn{
border:none;
border-radius:999px;
padding:10px 14px;
background:linear-gradient(135deg,#49c5b6,#4fa3d9);
color:white;
font-family:'Manrope','Inter',sans-serif;
font-size:12px;
font-weight:800;
box-shadow:0 10px 24px rgba(73,197,182,.20);
}
@media(max-width:720px){
/* (rimosso: dimensioni e posizione ora gestite sopra) */
.cart-toast{right:18px;left:18px;bottom:242px;text-align:center}
.cart-header{padding:18px 20px}
.cart-panel{width:min(390px,94vw)}
}


/* Step 14 - Miniature prodotto con sfondo ottanio/turchese trasparente */
.cart-item img{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(73,197,182,.18), rgba(79,163,217,.10)) !important;
}

/* Step 15 - Feedback pulsanti aggiunta carrello */
[data-cart-add][disabled],
.cart-add-btn.cart-add-confirmed{
  opacity:.88;
  cursor:default;
  pointer-events:none;
  background:linear-gradient(135deg,#0b8d83,#49c5b6) !important;
  box-shadow:0 12px 28px rgba(73,197,182,.28);
  transform:scale(.98);
}

/* ===== Foglietto illustrativo (PDF) — condiviso Home + Prodotti ===== */
.leaflet-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(3,16,31,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:4200;}
.leaflet-overlay.active{display:flex;}
.leaflet-modal{width:min(980px,100%);max-height:92vh;background:#fff;border-radius:30px;box-shadow:0 34px 90px rgba(0,0,0,.32);position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto;border:1px solid rgba(255,255,255,.42);}
.leaflet-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:none;border-radius:50%;background:#eef7fb;color:#082f52;font-size:26px;cursor:pointer;z-index:3;box-shadow:0 10px 28px rgba(0,0,0,.12);}
.leaflet-header{padding:28px 34px 18px;border-bottom:1px solid rgba(8,47,82,.08);padding-right:76px;}
.leaflet-header span{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(73,197,182,.10);color:#0b8d83;font-family:Manrope,sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.leaflet-header h3{font-family:Manrope,sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:-.045em;color:#082f52;}
.leaflet-viewer{padding:22px;overflow:auto;background:linear-gradient(180deg,#f7fbff,#fff);-webkit-overflow-scrolling:touch;}
.leaflet-viewer iframe{display:block;width:100%;height:62vh;min-height:360px;border:none;border-radius:18px;box-shadow:0 16px 44px rgba(8,36,58,.10);background:#fff;}
.leaflet-viewer img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;object-fit:contain;border-radius:18px;box-shadow:0 16px 44px rgba(8,36,58,.10);}
.leaflet-empty{padding:44px 24px;text-align:center;color:#526d86;font-size:14px;line-height:1.6;}
.leaflet-actions{padding:14px 24px 4px;text-align:center;}
.leaflet-download{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,#0b8d83,#49c5b6);color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 12px 30px rgba(11,141,131,.30);}
.leaflet-note{padding:10px 24px 20px;font-size:12px;line-height:1.55;color:#526d86;text-align:center;background:#fff;}
button.product-modal-whatsapp{border:none;cursor:pointer;font:inherit;}
@media(max-width:720px){
.leaflet-overlay{padding:10px;align-items:flex-start;}
.leaflet-modal{border-radius:22px;max-height:94vh;margin-top:10px;}
.leaflet-header{padding:22px 22px 14px;padding-right:68px;}
.leaflet-close{top:14px;right:14px;width:38px;height:38px;font-size:24px;}
.leaflet-viewer{padding:14px;}
.leaflet-viewer iframe{height:56vh;min-height:300px;border-radius:14px;}
.leaflet-note{font-size:11px;padding:10px 16px 16px;}
}

/* Modifica 5 - Home: carrello flottante trasparente e allineato alle altre icone */
.cart-float{
  right:25px !important;
  bottom:175px !important;
  width:54px !important;
  height:54px !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#0E8A80 !important;
  font-size:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  transition:transform .25s ease, filter .25s ease !important;
  filter:drop-shadow(0 6px 12px rgba(6,24,41,.20));
}

.cart-float:hover{
  transform:scale(1.12) !important;
  box-shadow:none !important;
  filter:drop-shadow(0 8px 16px rgba(6,24,41,.26));
}

.cart-count{
  top:2px !important;
  right:2px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  border-radius:999px !important;
  border:none !important;
  background:#061c35 !important;
  color:#ffffff !important;
  font-size:10px !important;
  line-height:18px !important;
  box-shadow:0 4px 10px rgba(6,24,41,.18) !important;
}

@media(max-width:720px){
  .cart-float{
    right:25px !important;
    bottom:175px !important;
    width:54px !important;
    height:54px !important;
    font-size:27px !important;
  }
}
/* ============================================================
   SAFIRA — MENU LATERALE FLOTTANTE (carrello, ricerca, WhatsApp)
   File autonomo: va incluso in TUTTE le pagine (home, prodotti,
   ricerca, contatti), perche' le pagine usano CSS diversi.
   Richiede le icone in assets/img/:
     icon-carrello-v2.png, icon-ricerca-v2.png, icon-whatsapp-v2.png
   ============================================================ */

/* ============================================================
   MENU LATERALE FLOTTANTE — carrello, ricerca, WhatsApp
   Icone PNG su sfondo trasparente, allineate in colonna verticale.
   NB: il sito carica cart.css DOPO style.css, quindi il carrello veniva
   ridisegnato da quel file (da cui il "doppio carrello"). Qui si usano
   selettori ad alta specificita' + !important per avere la precedenza.
   Vale su tutte le pagine: home, prodotti, ricerca, contatti.
   ============================================================ */

/* --- base comune (alta specificita' per battere cart.css) --- */
body button.cart-float,
body a.cart-float,
body button.search-float,
body a.search-float,
body a.whatsapp,
body button.whatsapp,
body .cart-float,
body .search-float,
body .whatsapp{
  position:fixed !important;
  right:16px !important;
  width:62px !important;      /* piu' grandi: erano 58px */
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
  /* Cerchio bianco di base: garantisce che il pulsante sia VISIBILE anche se
     la sua icona PNG non fosse ancora sul server. Senza questo, un'icona
     mancante lascerebbe il pulsante completamente invisibile. */
  border-radius:0 !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:900 !important;
  overflow:visible !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .22s ease, filter .22s ease;
  filter:drop-shadow(0 6px 14px rgba(6,28,53,.20));
  /* nasconde COMPLETAMENTE l'emoji vecchia (🛒 🔎 💬) */
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* --- COLONNA VERTICALE allineata (86px tra un'icona e l'altra) --- */
body .cart-float   { bottom:180px !important; }
body .search-float, body a.search-float, body button.search-float { bottom:102px !important; }
body .whatsapp     { bottom: 24px !important; }

/* --- le immagini --- */
body .cart-float::before,
body .search-float::before,
body .whatsapp::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  font-size:0 !important;
}
body .cart-float::before, body button.cart-float::before, body a.cart-float::before { background-image:url('../assets/img/icon-carrello-v2.png') !important; }
body .search-float::before, body a.search-float::before, body button.search-float::before { background-image:url('../assets/img/icon-ricerca-v2.png') !important; }
body .whatsapp::before, body a.whatsapp::before { background-image:url('../assets/img/icon-whatsapp-v2.png') !important; }

/* --- elimina qualunque icona/pseudo-elemento disegnato da cart.css --- */
body .cart-float::after,
body .search-float::after,
body .whatsapp::after{
  content:none !important;
  display:none !important;
}
/* eventuali icone interne (svg/i/img) del vecchio carrello */
body .cart-float > svg,
body .cart-float > i,
body .cart-float > img,
body .search-float > svg,
body .search-float > i,
body .whatsapp > svg,
body .whatsapp > i{
  display:none !important;
}

/* --- contatore del carrello (deve restare visibile) --- */
body .cart-float .cart-count,
body .cart-float [data-cart-count]{
  position:absolute !important;
  top:-2px !important;
  right:-2px !important;
  min-width:24px !important;
  height:24px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:#123a63 !important;
  color:#ffffff !important;
  font-family:'Inter', sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 2px 6px rgba(6,28,53,.30) !important;
  z-index:3 !important;
  text-shadow:none !important;
}

body .cart-float:hover,
body .search-float:hover,
body .whatsapp:hover{
  transform:translateY(-3px) scale(1.06) !important;
  filter:drop-shadow(0 10px 20px rgba(31,143,163,.32));
}
body .cart-float:active,
body .search-float:active,
body .whatsapp:active{transform:scale(.95) !important}

@media (max-width:390px){
  body .cart-float, body .search-float, body .whatsapp{
    width:56px !important; height:56px !important;
    min-width:56px !important; min-height:56px !important;
    max-width:56px !important; max-height:56px !important;
    right:12px !important;
  }
  body .cart-float   { bottom:180px !important; }
  body .search-float { bottom:102px !important; }
  body .whatsapp     { bottom: 24px !important; }
}


/* ============================================================
   V34 — "RIMBALZO" DEL CARRELLO QUANDO SI AGGIUNGE UN PRODOTTO
   Quando si preme Acquista / Aggiungi al carrello:
   - l'icona del carrello fa un piccolo sobbalzo con oscillazione;
   - il numerino si gonfia un attimo e torna normale.
   La classe "carrello-aggiunto" la mette e la toglie cart.js.
   Si anima solo l'icona (::before) e il numerino: le regole della
   colonna di icone qui sopra (posizione, dimensioni, hover) non
   vengono toccate.
   Chi ha "Riduci movimento" attivo non vede l'effetto.
   ============================================================ */
@keyframes safiraCarrelloSobbalzo{
  0%  {transform:none}
  22% {transform:translateY(-7px) scale(1.14) rotate(-9deg)}
  45% {transform:translateY(0) scale(.95) rotate(6deg)}
  68% {transform:translateY(-2px) scale(1.04) rotate(-3deg)}
  100%{transform:none}
}
@keyframes safiraContatorePop{
  0%  {transform:scale(1)}
  35% {transform:scale(1.45)}
  65% {transform:scale(.9)}
  100%{transform:scale(1)}
}
body .cart-float.carrello-aggiunto::before{
  animation:safiraCarrelloSobbalzo .7s cubic-bezier(.3,.7,.3,1) both;
  transform-origin:50% 70%;
}
body .cart-float.carrello-aggiunto .cart-count,
body .cart-float.carrello-aggiunto [data-cart-count]{
  animation:safiraContatorePop .55s cubic-bezier(.3,.7,.3,1) .12s both;
}
@media (prefers-reduced-motion: reduce){
  body .cart-float.carrello-aggiunto::before,
  body .cart-float.carrello-aggiunto .cart-count,
  body .cart-float.carrello-aggiunto [data-cart-count]{animation:none}
}

/* ============================================================
   V35 — CARRELLO: messaggio di conferma, scorporo IVA,
          pulsante "Continua gli acquisti"
   ============================================================ */

/* ---- Il messaggio di conferma ----
   Prima stava a z-index 2600, cioe' SOTTO i riquadri dei prodotti
   (3000 sulla pagina Prodotti, 3200 sulla home, 4200 per la scheda
   singola e i foglietti). Da telefono si apriva la scheda, si
   toccava "aggiungi" e il messaggio finiva dietro: invisibile.
   5000 lo mette sopra tutto tranne il caricatore iniziale. */
body .cart-toast{
  z-index:5000 !important;
  display:flex !important;
  align-items:center;
  gap:12px;
  cursor:pointer;
  padding:13px 16px !important;
  max-width:min(420px, calc(100vw - 32px));
  text-align:left !important;
  pointer-events:none;
}
body .cart-toast.active{ pointer-events:auto; }
.cart-toast-segno{
  flex:0 0 26px;
  width:26px;height:26px;
  border-radius:50%;
  background:#2ec4b6;
  color:#03202c;
  display:grid;place-items:center;
  font-weight:900;font-size:15px;line-height:1;
}
.cart-toast-img{
  flex:0 0 34px;
  width:34px;height:34px;
  border-radius:9px;
  object-fit:cover;
  background:rgba(255,255,255,.10);
}
.cart-toast-testo{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto; }
.cart-toast-testo strong{
  font-size:14px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-toast-testo span{ font-size:12px;opacity:.78;line-height:1.2; }
.cart-toast-vai{
  flex:0 0 auto;
  font-size:12px;font-weight:800;
  color:#7fe3d8;
  border:1px solid rgba(127,227,216,.45);
  border-radius:999px;
  padding:5px 11px;
}

/* Su telefono: piu' in alto dei tre pulsanti flottanti, largo
   quanto lo schermo meno i margini, cosi' non puo' passare
   inosservato. */
@media (max-width:720px){
  body .cart-toast{
    left:14px !important;right:14px !important;
    bottom:auto !important;
    top:calc(env(safe-area-inset-top, 0px) + 74px) !important;
    max-width:none;
  }
}

/* ---- Scorporo dell'IVA ---- */
.cart-scorporo{
  display:flex;flex-direction:column;gap:5px;
  margin:0 0 10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(8,47,82,.10);
}
.cart-scorporo-riga{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13px;color:#5b7792;
}
.cart-scorporo-riga span:last-child{ font-variant-numeric:tabular-nums; }

/* ---- Continua gli acquisti ---- */
.cart-continua{
  display:block;width:100%;
  margin-top:8px;
  padding:13px 16px;
  border:1px solid rgba(8,47,82,.16);
  border-radius:16px;
  background:#fff;
  color:#0b5e78;
  font-family:inherit;font-size:14px;font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.cart-continua:hover{ background:#f2f8fb;border-color:rgba(8,47,82,.28); }

/* ============================================================
   V36 — PRODOTTI "PRESTO DISPONIBILE"

   Due cose sole: il pulsante spento e una fascetta sulla
   scheda. Il prezzo resta dov'era e come era: il visitatore
   deve poter vedere quanto costera'.

   Le classi vengono messe da js/cart.js (segnaNonDisponibili).
   Per rimettere in vendita un prodotto non si tocca niente
   qui: basta togliere il nome dai due elenchi.
   ============================================================ */

/* ---- Il pulsante spento ----
   Il selettore e' volutamente pesante. Piu' su, nel blocco del
   messaggio "Aggiunto ✓", c'e' gia' questa regola:

       [data-cart-add][disabled] { background: ...verde... !important }

   Serve a tenere il pulsante verde per un attimo dopo
   l'aggiunta. Ma il nostro pulsante e' spento anche lui, quindi
   quella regola lo colpisce e lo lascia verde. Non la tocco: fa
   ancora il suo lavoro. Scrivo invece un selettore piu' preciso
   (classe + attributo), che in CSS ha la precedenza. */
[data-cart-add].presto-disponibile,
[data-cart-add].presto-disponibile[disabled],
[data-cart-add].presto-disponibile[disabled]:hover{
  background:#e6edf3 !important;
  background-image:none !important;
  color:#6b8299 !important;
  border-color:rgba(8,47,82,.14) !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  transform:none !important;
  opacity:1;
  letter-spacing:.2px;
}

/* ---- La fascetta sulla scheda ----
   In alto a sinistra, dove non copre ne' il nome ne' il prezzo.
   La scheda ha bisogno di position:relative perche' la
   fascetta le si appoggi dentro: se l'avesse gia', questa riga
   non cambia nulla. */
.scheda-presto-disponibile{ position:relative; }

.scheda-presto-disponibile::after{
  content:"Presto disponibile";
  position:absolute;
  top:10px;left:10px;
  z-index:6;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(8,47,82,.88);
  color:#fff;
  font-family:inherit;
  font-size:11px;font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 4px 14px rgba(8,47,82,.22);
}

/* L'immagine un po' meno accesa: si capisce a colpo d'occhio
   che la scheda non e' attiva, senza renderla illeggibile. */
.scheda-presto-disponibile img{ filter:saturate(.75); }

@media (max-width:640px){
  .scheda-presto-disponibile::after{
    top:8px;left:8px;
    padding:4px 9px;
    font-size:10px;
  }
}