/* ecmcore — Bundle & Save nella SCHEDA PRODOTTO (brief ECS 2026-08-25).
   Riga d'acquisto allineata alla PRODUZIONE: quantità | Aggiungi al carrello | Bundle & Save,
   stessa altezza, stesso spazio, le due azioni d'acquisto lette come un'alternativa.
   Misure riprese dal CSS del .com live (`.product-quantity{gap:16px;height:46px}`,
   `.bundle{background:#32323F;border-radius:10px}`, `%` grande e sottile). */

/* --- riga d'acquisto: col pulsante bundle la riga prende tutta la larghezza, come in produzione,
   dove il prezzo sta sopra e i comandi d'acquisto sotto su una riga sola. --- */
.ecs-product__buyrow.has-bundle { align-items: flex-start; }
.ecs-product__buyrow.has-bundle .ecs-product__cart { flex: 1 1 100%; }
.ecs-product__buyrow.has-bundle .ecs-product__cart .product__add-to-cart-container { align-items: stretch; }
.ecs-product__buyrow.has-bundle .ecs-product__cart .product__availability { text-align: left; }

.ecs-product__buyrow.has-bundle .product__actions-qty-add {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-height: 46px;
}
.ecs-product__buyrow.has-bundle .product__actions-qty-add > * { flex: 1 1 0; }
.ecs-product__buyrow.has-bundle .product__quantity { flex: 0 0 auto; min-width: fit-content; }
.ecs-product__buyrow.has-bundle .product__add-to-cart { display: flex; }
.ecs-product__buyrow.has-bundle .product__add-to-cart-button { width: 100%; justify-content: center; }

/* --- il pulsante: stessa impronta della produzione --- */
.ecs-bs { display: flex; }
.ecs-bs__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #32323F;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.8px;
  cursor: pointer;
  transition: background .15s;
}
.ecs-bs__btn:hover:not(:disabled) { background: #000; }
.ecs-bs__pct { font-size: 27.1px; line-height: 22px; font-weight: 100; }

/* Combinazione non disponibile: i due pulsanti si spengono INSIEME. Sono un'alternativa sullo
   stesso prodotto — se non si può comprare, non si può nemmeno metterlo in un set. Lo stato arriva
   dal server col blocco rigenerato, non da un JS che rincorre.
   Devono anche SEMBRARE spenti allo stesso modo: il disabilitato di serie del tema lascia
   "Aggiungi al carrello" corallo al 65% di opacità, che a colpo d'occhio non si legge come spento —
   accanto a un pulsante grigio sembrava che uno dei due funzionasse ancora. Qui li portiamo
   entrambi allo stesso grigio, solo dentro la riga d'acquisto col bundle. */
.ecs-product__buyrow.has-bundle .ecs-bs__btn:disabled,
.ecs-product__buyrow.has-bundle .product__add-to-cart-button:disabled {
  background: #C7C7CE;
  border-color: #C7C7CE;
  color: #F7F7F8;
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .ecs-product__buyrow.has-bundle .product__actions-qty-add { flex-wrap: wrap; }
  .ecs-product__buyrow.has-bundle .product__add-to-cart,
  .ecs-product__buyrow.has-bundle .ecs-bs { flex: 1 1 100%; }
}

/* --- modale "Crea il tuo Bundle / Affidati al team ECS" ---------------------------------------
   Ricalcata sulla tavola V12 dell'11/09/2026 (`ECS_prototipo_2026`, pagina "update 11 09 2026",
   nodo 116:2065), letta dal file e non dedotta da uno screenshot. Misure della tavola:

     barra      1300 × 170, fondo #32323F, raggio 15, ombra sfocata 10
     divisore   filo bianco 1px, alto 157, esattamente a metà (651/1300)
     scritte    Figtree 48px / interlinea 57,6 / peso 500, bianche
     icona      71 × 41, tratto bianco, solo sulla scelta di destra
     posizione  centrata nella pagina (rilievo V12: "preferibile l'uscita del pop-up al centro")

   Tutto è espresso in proporzione alla larghezza della barra, così la tavola resta vera anche
   sotto i 1300px: 48/1300 = 3,69vw · 170/1300 = 13,1vw · 71/1300 = 5,46vw.
   Le scritte NON hanno una descrizione sotto: quella era una nostra aggiunta e non c'è in tavola. */
.ecs-bs-modal[hidden] { display: none; }
/* La barra sta al CENTRO della finestra (rilievo ECS 10/09 e rilievo V12): appariva sotto il bordo
   superiore mentre il cliente guardava a metà pagina, e il gesto sembrava non aver fatto niente.
   `align-items:center` da solo non basta se il contenuto è più alto dello schermo — in flex quello
   che sborda in alto diventa irraggiungibile — quindi il centraggio lo fa `margin:auto`. */
.ecs-bs-modal {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(50,50,63,.55);
  display: flex; justify-content: center;
  padding: 24px 20px; overflow: auto;
}
.ecs-bs-bar {
  margin: auto;
  width: min(1300px, 100%);
  min-height: min(170px, 13.1vw);
  background: #32323F;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;   /* il filo è al centro esatto, come in tavola */
  align-items: center;
  position: relative;
}
.ecs-bs-sep {
  align-self: center;
  width: 1px;
  height: min(157px, 12.1vw);
  background: #fff;
}
.ecs-bs-choice {
  display: flex; align-items: center; justify-content: center;
  gap: min(24px, 1.8vw);
  padding: min(24px, 1.8vw) min(30px, 2.3vw);
  background: none; border: none; color: #fff;
  font-family: 'Figtree', sans-serif;
  font-size: min(48px, 3.69vw);
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;                   /* l'evidenza al passaggio resta dentro la barra */
  transition: background .15s;
}
/* L'evidenza al passaggio del mouse la tavola non la disegna: la teniamo minima, perché senza
   nessun segnale le due scritte non si leggono come cliccabili. */
.ecs-bs-choice:hover { background: rgba(255,255,255,.07); }
.ecs-bs-choice:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.ecs-bs-ico { width: min(71px, 5.46vw); height: auto; flex: none; }

/* Non è in tavola: serve per chiudere da tastiera e per chi usa un lettore di schermo.
   Discreta, fuori dal filo centrale, non ruba spazio alle due scritte. */
.ecs-bs-x {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; background: none;
}
.ecs-bs-x:hover { background: rgba(255,255,255,.15); }

/* Telefono: la tavola disegna solo il desktop. Le due scelte si impilano e il filo diventa
   orizzontale; sotto i 720px la scritta a 3,69vw sarebbe illeggibile, quindi la fermiamo. */
@media (max-width: 720px) {
  .ecs-bs-modal { padding: 16px 12px; }
  .ecs-bs-bar {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ecs-bs-sep { width: auto; height: 1px; justify-self: stretch; margin: 0 20px; }
  .ecs-bs-choice { font-size: clamp(19px, 5.2vw, 26px); padding: 22px 18px; gap: 14px; }
  .ecs-bs-ico { width: clamp(34px, 9vw, 46px); }
}


/* --- il pannello allargato deve COPRIRE, non sovrapporsi a metà ---
   Allargandosi oltre la colonna d'acquisto il bundle finisce sopra la galleria del prodotto, che
   ha un suo contesto di impilamento (frecce e miniature dello slider). Senza un piano proprio e
   uno sfondo pieno, la foto della macchina si vedeva attraverso le card. */
.ecs-bs-embed {
  position: relative;
  z-index: 3;
  background: #F2F1EF;
  border-radius: 14px;
}
.ecs-bs-embed[hidden] { display: none; }

/* --- bundle aperto nella scheda: barra del set, navigazione del telefono, chat e cookie (01/10/2026) ---
   `body.ecs-bs-in-vista` lo mette bundle-cta.js finché l'embed è in vista. Le misure sono quelle della pagina Bundle
   intera (custom.css del tema e bundle-merge.css), dove gli stessi elementi convivono già con la barra del set. */
body.ecs-bs-in-vista iframe#launcher { bottom: 150px !important; }
@media (max-width: 767px) {
  body.ecs-bs-in-vista .ecs-mbar { display: none; }
  body.ecs-bs-in-vista iframe#launcher { bottom: 236px !important; }
  body.ecs-bs-in-vista .ecs-cookie-reopen { bottom: 236px; }
}
/* Telefono: la barra del set come nella pagina intera, cioe' macchina e quattro reparti in fila e sotto totale e
   pulsante. Le regole dell'embed per schermi fino a 1000px (reparti su una riga loro, in fondo) erano pensate per il
   pannello largo quanto la colonna d'acquisto: sul telefono facevano una barra di quattro righe, 330px su 844.
   `body` davanti perche' bundle-merge.css si carica dopo questo file e a pari peso vincerebbe lui. */
@media (max-width: 640px) {
  body #ecs-bundle-merge.is-embed { padding: 10px 8px; }
  body #ecs-bundle-merge.is-embed .bm-tray__box > .bm-slot--machine { flex: 1 1 0; min-width: 0; }
  body #ecs-bundle-merge.is-embed .bm-tray__slots { flex: 4 1 0; order: 0; }
  /* la scritta «aggiungi un macinacaffe'...» resta stretta come nella pagina intera, cosi' Espandi e totale stanno in fila */
  body #ecs-bundle-merge.is-embed .bm-tray__save--unlock { max-width: 160px; }
}
/* Sopra i 1000px i quattro reparti e il riepilogo non possono condividere una sola riga
   senza schiacciare la macchina. Il percorso resta in alto; totale e CTA vanno sotto. */
@media (min-width: 1001px) {
  body #ecs-bundle-merge.is-embed .bm-tray__box { flex-wrap: wrap; }
  body #ecs-bundle-merge.is-embed .bm-tray__box > .bm-slot--machine { flex: 0 0 clamp(180px, 20%, 240px); min-width: 180px; max-width: none; }
  body #ecs-bundle-merge.is-embed .bm-tray__slots { flex: 1 1 0; min-width: 0; order: 0; }
  body #ecs-bundle-merge.is-embed .bm-tray__slots > .bm-slot--color { min-width: 92px; padding-left: 4px; padding-right: 4px; }
  body #ecs-bundle-merge.is-embed .bm-tray__sum { flex: 1 1 100%; width: 100%; margin: 0; border-left: 0; border-top: 1px solid var(--line); padding: 8px 4px 0; justify-content: space-between; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  body #ecs-bundle-merge.is-embed .bm-tray__save--unlock { max-width: 150px; }
}
/* Niente secondo scorrimento (Ale, 01/10/2026): nell'embed la griglia delle schede aveva un'altezza massima e scorreva
   per conto suo dentro la pagina. Ora scorre solo la pagina e la barra del set resta agganciata in fondo allo schermo
   finche' il bundle e' in vista (sticky). */
body #ecs-bundle-merge.is-embed .bm-grid { max-height: none; overflow: visible; padding-right: 0; }
/* Telefono: schede su due colonne come nella pagina Bundle intera. Con la colonna minima dell'embed (190px) ne stava una
   sola per riga e dieci schede facevano quasi 5.000px di pagina. */
@media (max-width: 640px) {
  body #ecs-bundle-merge.is-embed .bm-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
}

/* Su desktop miniature affiancate ai titoli per lasciare visibile la griglia. */
@media (min-width: 1200px) {
  body #ecs-bundle-merge.is-embed .bm-slot.is-done { flex-direction: row; align-items: center; text-align: left; justify-content: flex-start; gap: 8px; padding: 8px 9px; }
  body #ecs-bundle-merge.is-embed .bm-slot.is-done .bm-slot__body { flex: 1 1 auto; align-items: flex-start; text-align: left; width: auto; min-width: 0; }
  body #ecs-bundle-merge.is-embed .bm-slot.is-done .bm-slot__thumb { flex: 0 0 38px; width: 38px; height: 38px; }
  body #ecs-bundle-merge.is-embed .bm-slot.is-done .bm-slot__nm { font-size: 12px; }
}

/* Riepilogo desktop: confronto e risparmio sulla stessa riga, totale subito sotto. */
@media (min-width: 1001px) {
  body #ecs-bundle-merge.is-embed .bm-tray__box { row-gap: 4px; }
  body #ecs-bundle-merge.is-embed .bm-tray__sum { padding-top: 5px; }
  body #ecs-bundle-merge.is-embed .bm-tray__tot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; row-gap: 2px; text-align: center; }
  body #ecs-bundle-merge.is-embed .bm-tray__grandline { flex: 1 1 100%; justify-content: center; }
  body #ecs-bundle-merge.is-embed .bm-tray__expand,
  body #ecs-bundle-merge.is-embed .bm-tray__cta { min-height: 44px; }
}

/* --- bundle come sezione della scheda (14/10/2026, Federico): sotto Descrizione e Scheda tecnica, gia' aperto ---
   Titolo come le sezioni della pagina; spazio riservato mentre il catalogo arriva, cosi' la pagina non salta. */
.ecs-bs-embed--inline { margin-top: 40px; }
.ecs-bs-embed__title { margin: 0 0 14px; padding: 0 4px; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ecs-ink, #32323f); }
.ecs-bs-embed--inline .ecs-bs-embed__loading { min-height: 420px; }
@media (max-width: 767px) {
  .ecs-bs-embed--inline { margin-top: 28px; }
  .ecs-bs-embed__title { font-size: 22px; }
}
/* header fuori mentre il bundle occupa lo schermo (classe da bundle-cta.js, solo computer): due righe di schede in vista */
@media (min-width: 992px) {
  body #header { transition: transform .25s ease; }
  body.ecs-bs-testa-via #header { transform: translateY(-100%); }
}
/* Scheda prodotto, computer (14/10/2026, Federico: «trovargli un'altra posizione per ridurre l'altezza generale»):
   «Mostra tutti i macinacaffè» e gli altri voltaggi stanno nella riga della ricerca, a destra. Sotto la griglia
   resta solo «Mostra altri». La pagina del bundle a sé non ha questo spazio e resta com'era. */
#ecs-bundle-merge .bm-toplinks{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 18px;min-width:0}
#ecs-bundle-merge .bm-toplinks:empty{display:none}
#ecs-bundle-merge .bm-toplinks .bm-gridfoot__btn{padding:9px 16px}