/* =================================================================== */
/* 1) TOOLBAR ICONE SU MINIATURE                                       */
/* =================================================================== */

/* Variante assoluta (overlay su immagine) — usata solo se la barra resta nel blocco immagine */
.ml-thumbbar{
  position:absolute; left:8px; right:8px; bottom:8px;
  display:flex; gap:8px; justify-content:center; z-index:5;
}

/* Variante inline (sotto al prezzo / al posto dei bottoni nativi) */
.ml-thumbbar--inline{
  position:static;
  display:flex; justify-content:center; gap:12px;
  padding:10px 0 4px;
}

.product-miniature,
.js-product-miniature,
.elementor-product-miniature{ position:relative; }

.ml-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  backdrop-filter:saturate(1.1) blur(4px);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.ml-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.ml-btn:active{ transform:translateY(0); }
.ml-btn svg{ width:20px; height:20px; display:block; }
.ml-btn.is-active{ background:#111; color:#fff; }
.ml-thumbbar--inline .ml-btn{ width:44px; height:44px; box-shadow:0 8px 20px rgba(0,0,0,.12); }

@media (max-width:767.98px){
  .ml-btn{ width:40px; height:40px; }
}

/* =================================================================== */
/* 2) NASCONDERE I PULSANTI NATIVI QUANDO C'È LA NOSTRA BARRA           */
/* =================================================================== */

/* Caso standard: card processata */
.mltb-replaced form.elementor-atc,
.mltb-replaced form[action*="/carrello"],
.mltb-replaced button[data-button-action="add-to-cart"],
.mltb-replaced .product-add-cart .btn.btn-product-list.btn-view,
.mltb-replaced .btn.btn-product-list.btn-view,
.mltb-replaced .product-functional-buttons{
  display:none !important; pointer-events:none !important;
}

/* Guardie moderne con :has() (Chrome/Edge/Safari) */
article.product-miniature:has(.ml-thumbbar) .product-functional-buttons,
article.product-miniature:has(.ml-thumbbar) .product-add-cart .btn.btn-product-list.btn-view,
article.product-miniature:has(.ml-thumbbar) .btn.btn-product-list.btn-view,
article.elementor-product-miniature:has(.ml-thumbbar) form.elementor-atc,
article.elementor-product-miniature:has(.ml-thumbbar) form[action*="/carrello"],
article.elementor-product-miniature:has(.ml-thumbbar) button[data-button-action="add-to-cart"]{
  display:none !important; pointer-events:none !important;
}

/* Fallback: se la barra è sorella dei pulsanti */
:where(.elementor-product-miniature, .product-miniature, .js-product-miniature) .ml-thumbbar ~ form.elementor-atc,
:where(.elementor-product-miniature, .product-miniature, .js-product-miniature) .ml-thumbbar ~ form[action*="/carrello"],
:where(.elementor-product-miniature, .product-miniature, .js-product-miniature) .ml-thumbbar ~ button[data-button-action="add-to-cart"],
:where(.elementor-product-miniature, .product-miniature, .js-product-miniature) .ml-thumbbar ~ .product-add-cart .btn.btn-product-list.btn-view,
:where(.elementor-product-miniature, .product-miniature, .js-product-miniature) .ml-thumbbar ~ .btn.btn-product-list.btn-view{
  display:none !important; pointer-events:none !important;
}

/* =================================================================== */
/* 3) FORZA POSIZIONE INLINE QUANDO LA BARRA È NELL’AREA TESTO/PREZZO   */
/* =================================================================== */

.product-description .ml-thumbbar,
.product-add-cart .ml-thumbbar,
.product-price-and-shipping + .ml-thumbbar,
.elementor-content .ml-thumbbar,
.elementor-content .elementor-price-wrapper + .ml-thumbbar{
  position:static !important;
  left:auto !important; right:auto !important; bottom:auto !important;
  margin-top:10px;
  display:flex !important; justify-content:center; gap:12px;
}

/* Estetica bottoni in modalità inline */
.product-description .ml-thumbbar .ml-btn,
.elementor-content .ml-thumbbar .ml-btn{
  width:44px; height:44px; box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* Spegni nativi quando la barra è nella zona testo/prezzo */
.product-description:has(.ml-thumbbar) .product-add-cart,
.product-description:has(.ml-thumbbar) .btn.btn-product-list.btn-view,
article.product-miniature:has(.ml-thumbbar) .product-functional-buttons,
.elementor-content:has(.ml-thumbbar) form.elementor-atc,
.elementor-content:has(.ml-thumbbar) form[action*="/carrello"]{
  display:none !important; pointer-events:none !important;
}

/* =================================================================== */
/* 4) QUICKVIEW (markup custom)                                        */
/* =================================================================== */

#ml-qv-host{ position:fixed; inset:0; z-index:9999; }
#ml-qv-host .ml-qv-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); }

/* lock scroll quando la quickview è aperta */
.ml-qv-locked{ position:fixed; overflow:hidden; width:100%; }

.ml-qv-modal{
  background:#fff; border-radius:16px; box-shadow:0 25px 60px rgba(0,0,0,.28);
  max-width:1180px; margin:3% auto; padding:16px 18px 18px;
}
.ml-qv-header{ display:flex; align-items:center; justify-content:space-between; }
.ml-qv-title{ font-size:clamp(22px,2.5vw,32px); font-weight:800; margin:6px 8px 12px; line-height:1.2; }
.ml-qv-x{ background:transparent; border:0; cursor:pointer; font-size:22px; line-height:1; }

.ml-qv-body{ display:grid; gap:22px; grid-template-columns:1.05fr 1fr; align-items:start; }
.ml-qv-media img{ width:100%; height:auto; display:block; border-radius:16px; background:#f3f5f7; }
.ml-qv-meta{ padding:6px 6px 0; }

.ml-qv-availability{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
.ml-qv-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.ml-qv-dot.ok{ background:#1ec773; box-shadow:0 0 0 3px rgba(30,199,115,.15); }
.ml-qv-dot.ko{ background:#c71e1e; box-shadow:0 0 0 3px rgba(199,30,30,.15); }
.ml-qv-avail-text{ font-weight:600; color:#2f7a42; }

.ml-qv-desc{ color:#3d3d3d; line-height:1.5; margin:6px 0 10px; max-height:auto; overflow:auto; }
.ml-qv-price{ margin:10px 0 12px; }
.ml-qv-price .now{ font-size:22px; font-weight:800; }
.ml-qv-price .old{ font-size:16px; font-weight:600; color:#8b8b8b; text-decoration:line-through; margin-left:8px; }

.ml-qv-actions{ display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; margin-top:8px; }
.ml-qv-btn-primary, .ml-qv-btn-secondary{
  border-radius:999px; padding:11px 16px; font-weight:700; line-height:1.1;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.ml-qv-btn-primary{ background:#ff9800; color:#fff; border:0; }
.ml-qv-btn-primary:hover{ filter:brightness(0.98); }
.ml-qv-btn-secondary{ background:#fff; color:#1f2a37; border:1px solid #d6dee6; }

.ml-qv-caption{ color:#8a8f99; font-size:11.5px; display:block; margin-top:6px; text-align:left; }

/* Varianti clonate */
.ml-qv-variants .product-variants,
.ml-qv-variants .product-variants-item,
.ml-qv-variants .product-variants-wrapper{ display:grid; gap:10px; }
.ml-qv-variants select,
.ml-qv-variants input[type="radio"] + label,
.ml-qv-variants .radio{ font-size:14px; }
.ml-qv-variants .product-variants-item label{ font-weight:600; margin-bottom:4px; display:block; }
.ml-qv-variants .color,
.ml-qv-variants .input-color{ cursor:pointer; }
.ml-qv-variants .quantity_wanted,
.ml-qv-variants .qty{ max-width:110px; }

/* =================================================================== */
/* 5) Quickview: altezza 40vh su desktop                               */
/* =================================================================== */
@media (min-width:992px){
  .ml-qv-modal{ height:40vh; max-height:40vh; display:flex; flex-direction:column; }
  .ml-qv-header{ flex:0 0 auto; border-bottom:1px solid rgba(0,0,0,.06); margin-bottom:8px; padding-bottom:6px; }
  .ml-qv-body{ flex:1 1 auto; min-height:0; overflow:auto; padding-right:2px; }
  .ml-qv-media img{ height:auto; max-height:calc(40vh - 72px); object-fit:contain; }
}

/* =================================================================== */
/* 6) Responsive                                                        */
/* =================================================================== */
@media (max-width:991.98px){
  .ml-qv-body{ grid-template-columns:1fr; }
  .ml-qv-actions{ justify-content:flex-start; }
  .ml-qv-modal{ margin:4% auto; }
}
/* Spegni i nativi SOLO quando la card è stata sistemata (mltb-inline-ok) */
article.mltb-inline-ok .product-functional-buttons,
article.mltb-inline-ok .product-add-cart .btn.btn-product-list.btn-view,
article.mltb-inline-ok .btn.btn-product-list.btn-view,
article.mltb-inline-ok form.elementor-atc,
article.mltb-inline-ok form[action*="/carrello"],
article.mltb-inline-ok button[data-button-action="add-to-cart"]{
  display:none !important; pointer-events:none !important;
}

/* Quando la barra è in area testo/prezzo, renderla inline */
.product-description .ml-thumbbar,
.product-add-cart .ml-thumbbar,
.product-price-and-shipping + .ml-thumbbar,
.elementor-content .ml-thumbbar,
.elementor-content .elementor-price-wrapper + .ml-thumbbar{
  position:static !important;
  left:auto !important; right:auto !important; bottom:auto !important;
  margin-top:10px;
  display:flex !important; justify-content:center; gap:12px;
}
/* Elementor: quando la barra è dopo il form ATC o dopo il link prodotto → inline */
.elementor-product-miniature form.elementor-atc ~ .ml-thumbbar,
.elementor-product-miniature form[action*="/carrello"] ~ .ml-thumbbar,
.elementor-product-miniature a.elementor-product-link ~ .ml-thumbbar {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 10px;
  display: flex !important;
  justify-content: center;
  gap: 12px;
}

/* opzionale: bottoni leggermente più grandi quando sono inline */
.elementor-product-miniature form ~ .ml-thumbbar .ml-btn,
.elementor-product-miniature a.elementor-product-link ~ .ml-thumbbar .ml-btn {
  width: 44px; height: 44px; box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* spegni il pulsante nativo SOLO quando abbiamo sistemato la card */
.elementor-product-miniature.mltb-inline-ok form.elementor-atc,
.elementor-product-miniature.mltb-inline-ok form[action*="/carrello"] {
  display: none !important;
  pointer-events: none !important;
}
/* --- Quickview: niente scroll interno, si adatta fino a 86vh --- */
@media (min-width: 992px){
  .ml-qv-modal{
    height: auto !important;          /* STOP 40vh fisso */
    max-height: 86vh !important;      /* margine respiro in alto/basso */
  }
  .ml-qv-body{
    overflow: visible !important;      /* STOP scroll interno */
  }
  /* immagine limitata per non “spingere” fuori il testo */
  .ml-qv-media img{
    max-height: 60vh !important;       /* adatta se vuoi 55–65vh */
    object-fit: contain;
  }
}
/* ===========================
   QUICKVIEW — MOBILE TUNE-UP
   =========================== */

@media (max-width: 767.98px){

  /* contenitore */
  .ml-qv-modal{
    width: calc(100vw - 20px);
    max-width: 640px;
    margin: 10px auto;
    padding: 14px 14px calc(72px + env(safe-area-inset-bottom)); /* spazio per le azioni sticky */
    border-radius: 14px;
  }

  /* header + titolo + X */
  .ml-qv-header{ gap: 8px; }
  .ml-qv-title{
    font-size: clamp(18px, 5vw, 24px);
    margin: 4px 0 8px;
    line-height: 1.25;
  }
  .ml-qv-x{
    width: 40px; height: 40px;
    border-radius: 10px;
    font-size: 24px;
  }

  /* griglia -> una colonna */
  .ml-qv-body{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* immagine grande, contenuta */
  .ml-qv-media img{
    width: 100%;
    height: auto;
    max-height: 48vh;          /* evita che l’immagine divori troppo schermo */
    object-fit: contain;
    border-radius: 12px;
    background: #f5f7f9;
  }

  .ml-qv-meta{ padding: 0; }

  /* disponibilità + prezzo + testo più leggibili */
  .ml-qv-availability{ font-size: 13px; }
  .ml-qv-price .now{ font-size: 20px; }
  .ml-qv-price .old{ font-size: 14px; }
  .ml-qv-desc{
    max-height: none;          /* lascia scorrere naturalmente */
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.55;
  }

  /* ----- AZIONI STICKY IN BASSO ----- */
  .ml-qv-actions{
    position: sticky;
    bottom: calc(0px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    padding: 10px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 40%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    z-index: 2;
  }
  .ml-qv-btn-primary,
  .ml-qv-btn-secondary{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 999px;
    font-size: 14px;
  }

  /* nota sotto ai bottoni */
  .ml-qv-caption{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #8892a0;
  }

  /* evita bounce/scroll della pagina dietro il modal */
  #ml-qv-host{ overscroll-behavior: contain; }

  /* se esistono floating widgets della pagina (es. WhatsApp), tienili sotto al modal */
  .ml-qv-modal{ z-index: 9999; }
}

/* piccolo ritocco anche su tablet verticali */
@media (min-width: 768px) and (max-width: 991.98px){
  .ml-qv-media img{ max-height: 55vh; }
  .ml-qv-actions{
    position: sticky;
    bottom: 0;
    grid-template-columns: 1fr 1fr;
  }
}
/* ===========================
   QUICKVIEW — MOBILE FIX
   =========================== */
@media (max-width: 767.98px){

  /* il layer del modal sopra a qualunque widget */
  #ml-qv-host{ z-index: 2147483000; overscroll-behavior: contain; }

  /* il modal diventa un layout a colonna con altezza limitata */
  .ml-qv-modal{
    display: flex;
    flex-direction: column;
    width: calc(100vw - 20px);
    max-width: 640px;
    max-height: 92vh;                         /* NON oltre lo schermo */
    margin: 10px auto;
    padding: 12px 12px 0;                      /* niente padding sotto: lo gestiamo con le azioni sticky */
    border-radius: 14px;
  }

  /* header sempre visibile mentre scorre */
  .ml-qv-header{
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .ml-qv-title{
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.25;
    margin: 4px 0 8px;
  }
  .ml-qv-x{
    width: 40px; height: 40px; font-size: 24px; border-radius: 10px;
  }

  /* il corpo del modal è l'unico che scorre */
  .ml-qv-body{
    flex: 1 1 auto;
    min-height: 0;                              /* importante x scroll */
    overflow: auto;                             /* scroll interno */
    padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* spazio per bottoni sticky */
  }

  /* immagine più compatta */
  .ml-qv-media img{
    width: 100%;
    height: auto;
    max-height: 36vh;                           /* regola qui (32–40vh) se vuoi più/meno grande */
    object-fit: contain;
    border-radius: 12px;
    background: #f5f7f9;
  }

  .ml-qv-meta{ padding: 0; }
  .ml-qv-availability{ font-size: 13px; }
  .ml-qv-price .now{ font-size: 20px; }
  .ml-qv-price .old{ font-size: 14px; }
  .ml-qv-desc{ max-height: none; font-size: 15px; line-height: 1.55; }

  /* ----- AZIONI STICKY SEMPRE VISIBILI ----- */
  .ml-qv-actions{
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 40%);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;             /* una colonna? usa: 1fr */
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .ml-qv-btn-primary,
  .ml-qv-btn-secondary{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 999px;
    font-size: 14px;
  }
  .ml-qv-caption{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #8892a0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* tablet verticali: un filo più alta l'immagine e sticky attivi */
@media (min-width: 768px) and (max-width: 991.98px){
  .ml-qv-modal{ max-height: 90vh; }
  .ml-qv-media img{ max-height: 42vh; }
  .ml-qv-actions{
    position: sticky; bottom: 0;
    grid-template-columns: 1fr 1fr;
  }
}