/* ecmcore — Bundle & Save · variante "merge" (consolidata). Direzione ECS 2026-08-03 + correzioni 08-04. Impianto: banner compatto (con frecce di navigazione step) + ricerca a tutta larghezza + chip filtro + banda compat accessori + griglia card a TUTTA LARGHEZZA (auto-fill, miniatura 4:3, SCROLL UNICO di pagina) + BARRA DEL SET ancorata in basso, BOXED e centrata (lascia gli angoli liberi per cookie/chat fixed), con la MAPPA COLORE della v12 (slot add-on a tinta piena + "+" bianco). Scoped #ecs-bundle-merge. */ #ecs-bundle-merge{ --coral:#CE4636;--coral-deep:#B23A2C;--ink:#32323F;--paper:#F2F1EF;--card:#FFF; --line:#E4E2DE;--muted:#6d6d78;--green:#2e9e6b; /* Palette di reparto = ESATTAMENTE quella della tavola V12, già in uso nel menu del tema (`.ecs-header__nav [data-id="category-N"]` in custom.css). Prima erano tinte vicine ma non uguali: stesso reparto, due verdi diversi a seconda di dove lo guardavi. Macchine=corallo · Macinacaffè=oliva · Accessori=azzurro · Caffè=terra · Altro=pervinca. */ --olive:#BEB35F;--teal:#5F8B95;--brown:#BA7D63;--plum:#8A8086;--peri:#7C83BC; --shadow:0 4px 40px rgba(50,50,63,.10);--radius:14px;--tray-gap:200px; max-width:1260px;margin:0 auto;color:var(--ink);padding-bottom:120px; } #ecs-bundle-merge *{box-sizing:border-box} #ecs-bundle-merge .num{font-variant-numeric:tabular-nums} #ecs-bundle-merge button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} #ecs-bundle-merge a{color:inherit;text-decoration:none} #ecs-bundle-merge img{max-width:100%} /* ---- barra nera di testa: RIMOSSA (rilievo ECS 2026-09-10) ---- Portava sottotitolo, badge "-10%" e le due frecce ‹ › di navigazione passo. Il badge ripeteva una promessa che ogni box già mostra, e le frecce duplicavano gli slot della barra del set, che sono cliccabili e ora portano anche il triangolino del passo attivo. Tolta la riga, la pagina parte ~60px più in alto. Il markup non viene più generato (bundle-merge.js, render()). */ /* ---- ricerca ---- */ #ecs-bundle-merge .bm-searchbar{display:flex;gap:10px;align-items:center;margin-bottom:10px} #ecs-bundle-merge .bm-search{position:relative;flex:1 1 auto;min-width:0} #ecs-bundle-merge .bm-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none} #ecs-bundle-merge .bm-search input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 40px 12px 42px;font-size:15px;background:var(--card);color:var(--ink)} #ecs-bundle-merge .bm-search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(50,50,63,.06)} #ecs-bundle-merge .bm-search__clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;color:var(--muted);font-size:15px;display:none;place-items:center} #ecs-bundle-merge .bm-search.has-q .bm-search__clear{display:grid} #ecs-bundle-merge .bm-search__clear:hover{background:var(--paper);color:var(--ink)} #ecs-bundle-merge .bm-sort{flex:0 0 auto;border:1.5px solid var(--line);border-radius:12px;padding:11px 34px 11px 14px;font-size:13.5px;background:var(--card) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d6d78' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;color:var(--ink);cursor:pointer} /* ---- chip filtro ---- */ #ecs-bundle-merge .bm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;max-height:74px;overflow:hidden;transition:max-height .2s} #ecs-bundle-merge .bm-chips.is-expanded{max-height:400px} #ecs-bundle-merge .bm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink);transition:all .12s} #ecs-bundle-merge .bm-chip:hover:not(:disabled){border-color:#cfccc6} #ecs-bundle-merge .bm-chip .c{color:var(--muted);font-weight:700;font-size:11px} #ecs-bundle-merge .bm-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)} #ecs-bundle-merge .bm-chip.is-on .c{color:rgba(255,255,255,.7)} #ecs-bundle-merge .bm-chip.is-on::after{content:"✕";font-size:10px;opacity:.85;margin-left:1px} #ecs-bundle-merge .bm-chip:disabled{opacity:.38;cursor:not-allowed} #ecs-bundle-merge .bm-chip--more{border-style:dashed;color:var(--muted)} #ecs-bundle-merge .bm-chip--group{background:transparent;border:none;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:6px 2px;cursor:default} /* ---- banda compatibilità accessori ---- */ #ecs-bundle-merge .bm-accnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f3f7f7;border:1px solid #cfe3e5;border-radius:10px;padding:7px 12px;margin-bottom:10px;font-size:12.5px;color:#2c6068} #ecs-bundle-merge .bm-accnote__txt b{font-weight:700} #ecs-bundle-merge .bm-accnote__all{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap} /* ---- griglia card (tutta larghezza, SCROLL UNICO di pagina, miniatura 4:3) ---- */ #ecs-bundle-merge .bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px;padding:2px 2px 6px;align-content:start} #ecs-bundle-merge .bm-empty{grid-column:1/-1;color:var(--muted);font-size:14px;padding:40px 10px;text-align:center} #ecs-bundle-merge .bm-card{background:var(--card);border:1.5px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:border-color .15s,box-shadow .15s} #ecs-bundle-merge .bm-card:hover{border-color:#cfccc6;box-shadow:var(--shadow)} #ecs-bundle-merge .bm-card.is-sel{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral) inset} #ecs-bundle-merge .bm-card__badge{position:absolute;top:8px;left:8px;z-index:2;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ecs-bundle-merge .bm-card__save{position:absolute;top:8px;right:8px;z-index:2;background:var(--coral);color:#fff;font-weight:800;font-size:10.5px;padding:3px 7px;border-radius:999px} #ecs-bundle-merge .bm-card__thumb{display:block;width:100%;aspect-ratio:4/3;background:var(--paper);overflow:hidden;padding:0} #ecs-bundle-merge .bm-card__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} #ecs-bundle-merge .bm-noimg{display:block;width:100%;height:100%} #ecs-bundle-merge .bm-card__body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:2px;flex:1} #ecs-bundle-merge .bm-card__brand{font-size:10.5px;color:var(--muted);text-transform:capitalize;min-height:13px} #ecs-bundle-merge .bm-card__nm{font-size:12.5px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em} #ecs-bundle-merge .bm-card__reason{font-size:10.5px;color:var(--teal);font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ecs-bundle-merge .bm-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;gap:6px} #ecs-bundle-merge .bm-card__pr{font-size:13.5px;font-weight:800} #ecs-bundle-merge .bm-card__add{flex:0 0 auto;width:32px;height:32px;border-radius:999px;border:1.5px solid var(--coral);color:var(--coral);font-size:19px;line-height:1;display:grid;place-items:center;transition:all .12s} #ecs-bundle-merge .bm-card__add:hover{background:var(--coral);color:#fff} #ecs-bundle-merge .bm-card.is-sel .bm-card__add{background:var(--coral);color:#fff;border-color:var(--coral)} /* ---- BARRA DEL SET — wrapper fixed trasparente (angoli liberi) + box bianco centrato ---- */ /* ⚠️ colonna, non riga: il pannello di riepilogo e la barra sono FIGLI dello stesso contenitore e in `row` finivano affiancati invece che impilati. */ #ecs-bundle-merge .bm-tray{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 12px;pointer-events:none} #ecs-bundle-merge .bm-tray__box{pointer-events:auto;width:min(1280px,calc(100vw - var(--tray-gap)));background:#fff;border-radius:16px;box-shadow:0 8px 34px rgba(50,50,63,.22);display:flex;align-items:stretch;gap:8px;padding:8px} /* etichetta verticale "Bundle & Save" */ #ecs-bundle-merge .bm-tray__brand{flex:0 0 auto;background:var(--ink);color:#fff;border-radius:11px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;padding:8px 3px;display:flex;align-items:center;justify-content:center} /* gli slot add-on stanno su UNA riga */ #ecs-bundle-merge .bm-tray__slots{display:flex;align-items:stretch;gap:8px;flex:1 1 auto;min-width:0} /* slot: base */ #ecs-bundle-merge .bm-slot{position:relative;display:flex;align-items:center;gap:9px;text-align:left;border-radius:11px;padding:8px 12px;transition:box-shadow .12s,filter .12s} #ecs-bundle-merge .bm-slot.is-on{box-shadow:0 0 0 2px var(--ink) inset} #ecs-bundle-merge .bm-slot__thumb{width:44px;height:44px;flex:0 0 auto;border-radius:8px;background:#fff;overflow:hidden;display:grid;place-items:center} #ecs-bundle-merge .bm-slot__thumb img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply} #ecs-bundle-merge .bm-slot__body{display:flex;flex-direction:column;min-width:0;gap:1px} #ecs-bundle-merge .bm-slot__nm{font-size:12.5px;font-weight:700;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px} #ecs-bundle-merge .bm-slot__lb{font-size:13px;font-weight:700} #ecs-bundle-merge .bm-slot__pr{font-size:11.5px} #ecs-bundle-merge .bm-slot__pct{font-size:11px;font-weight:800;margin-left:6px;opacity:.9} #ecs-bundle-merge .bm-slot__x{position:absolute;top:5px;right:6px;font-size:11px;line-height:1;width:16px;height:16px;display:grid;place-items:center;border-radius:999px;opacity:.6} #ecs-bundle-merge .bm-slot__x:hover{opacity:1;background:rgba(0,0,0,.12)} /* slot MACCHINA (fondo bianco, testo scuro, nome coral) */ #ecs-bundle-merge .bm-slot--machine{flex:0 0 auto;min-width:150px;max-width:230px;background:var(--card);border:1.5px solid var(--line)} #ecs-bundle-merge .bm-slot--machine .bm-slot__nm{color:var(--coral)} #ecs-bundle-merge .bm-slot--machine .bm-slot__pr{color:var(--ink);font-weight:600} #ecs-bundle-merge .bm-slot--machine.is-empty{justify-content:center;color:var(--muted)} #ecs-bundle-merge .bm-slot--machine.is-empty .bm-plus{color:var(--ink);background:var(--paper)} /* slot ADD-ON (tinta piena mappa colore v12, testo bianco) */ #ecs-bundle-merge .bm-slot--color{flex:1 1 0;min-width:120px;background:var(--slot);color:#fff;justify-content:center} #ecs-bundle-merge .bm-slot--color.is-done{justify-content:flex-start} #ecs-bundle-merge .bm-slot--color .bm-slot__pr{opacity:.92;font-weight:600} #ecs-bundle-merge .bm-slot--color.is-next{box-shadow:0 0 0 2px #fff inset} #ecs-bundle-merge .bm-slot--color .bm-slot__x{opacity:.8} #ecs-bundle-merge .bm-slot--color .bm-slot__x:hover{background:rgba(255,255,255,.28)} /* "+" bianco a quadrato tondo */ #ecs-bundle-merge .bm-plus{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--slot);font-size:26px;font-weight:400;line-height:1;display:grid;place-items:center} /* riepilogo (totale + carrello) */ #ecs-bundle-merge .bm-tray__sum{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 6px 0 14px;margin-left:auto;border-left:1px solid var(--line)} #ecs-bundle-merge .bm-tray__tot{display:flex;flex-direction:column;line-height:1.15;text-align:right} #ecs-bundle-merge .bm-tray__grand{font-size:22px;font-weight:800;color:var(--ink)} #ecs-bundle-merge .bm-tray__tot small{font-size:10.5px;color:var(--muted)} #ecs-bundle-merge .bm-tray__save{font-size:11.5px;font-weight:800;color:var(--green)} #ecs-bundle-merge .bm-tray__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;border-radius:11px;padding:13px 20px;font-weight:800;font-size:14.5px;white-space:nowrap} #ecs-bundle-merge .bm-tray__cta:hover{background:var(--coral-deep)} #ecs-bundle-merge .bm-tray__cta[disabled]{background:var(--paper);color:var(--muted);cursor:not-allowed} #ecs-bundle-merge .bm-tray__cta svg{width:18px;height:18px} /* ---- responsive ---- */ @media(max-width:1100px){#ecs-bundle-merge{--tray-gap:120px}} @media(max-width:820px){ #ecs-bundle-merge{--tray-gap:16px;padding-bottom:158px} #ecs-bundle-merge .bm-tray__box{flex-wrap:wrap} #ecs-bundle-merge .bm-tray__brand{display:none} #ecs-bundle-merge .bm-slot--machine{flex:1 1 auto;max-width:none} #ecs-bundle-merge .bm-slot--color{min-width:104px} #ecs-bundle-merge .bm-tray__sum{width:100%;margin-left:0;border-left:none;border-top:1px solid var(--line);padding:8px 4px 0;justify-content:space-between} #ecs-bundle-merge .bm-tray__cta{flex:1 1 auto;justify-content:center} } @media(max-width:640px){ #ecs-bundle-merge .bm-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} /* gli slot add-on vanno a scorrimento orizzontale per non sfondare in altezza */ #ecs-bundle-merge .bm-tray__box{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} #ecs-bundle-merge .bm-tray__box::-webkit-scrollbar{display:none} #ecs-bundle-merge .bm-slot--machine,#ecs-bundle-merge .bm-slot--color{flex:0 0 auto} #ecs-bundle-merge .bm-slot--color{min-width:118px} #ecs-bundle-merge .bm-tray__sum{width:auto;border-top:none;border-left:1px solid var(--line);margin-left:0;padding-top:0} } @media(prefers-reduced-motion:reduce){#ecs-bundle-merge *{transition:none!important;animation:none!important}} /* ---- titolo grande sopra la barra (round 3) ---- */ #ecs-bundle-merge .bm-title{font-size:clamp(30px,4.4vw,48px);font-weight:600;line-height:1.05;letter-spacing:-.01em;margin:6px 0 12px;color:var(--ink)} /* reparto add-on schiarito finché non cè unancora (macchina o grinder) */ #ecs-bundle-merge .bm-slot--color.is-locked{filter:grayscale(.75);opacity:.5} /* ---- barra set: stato vuoto ridistribuito (round 3, 08-04) — hint compatto, CTA normale ---- */ #ecs-bundle-merge .bm-tray__sum--empty{gap:12px} #ecs-bundle-merge .bm-tray__hint{display:flex;flex-direction:column;justify-content:center;text-align:right;line-height:1.2;max-width:190px} #ecs-bundle-merge .bm-tray__hint span{font-size:13px;font-weight:700;color:var(--ink)} #ecs-bundle-merge .bm-tray__hint small{font-size:11px;font-weight:500;color:var(--muted)} /* i box colorati si allargano equi ora che il riepilogo non ruba spazio */ #ecs-bundle-merge .bm-slot--color{min-width:132px} /* ---- combinazione scelta negli slot ---- */ #ecs-bundle-merge .bm-slot__combo{font-size:10.5px;font-weight:600;opacity:.85;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px} /* ---- modale "Configura" (prodotti con combinazioni) ---- */ body.bm-modal-open{overflow:hidden} #ecs-bundle-merge .bm-modal[hidden]{display:none} #ecs-bundle-merge .bm-modal{position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;padding:16px} #ecs-bundle-merge .bm-modal__backdrop{position:absolute;inset:0;background:rgba(30,30,40,.5)} #ecs-bundle-merge .bm-modal__box{position:relative;z-index:1;width:min(460px,100%);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:20px;max-height:calc(100vh - 32px);overflow:auto} #ecs-bundle-merge .bm-modal__x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;display:grid;place-items:center} #ecs-bundle-merge .bm-modal__x:hover{background:#e6e4e0} #ecs-bundle-merge .bm-modal__loading{padding:40px 0;text-align:center;color:var(--muted)} #ecs-bundle-merge .bm-modal__head{display:flex;gap:14px;align-items:center;margin-bottom:16px;padding-right:34px} #ecs-bundle-merge .bm-modal__thumb{width:72px;height:72px;flex:0 0 auto;border-radius:12px;background:var(--paper);overflow:hidden;display:grid;place-items:center} #ecs-bundle-merge .bm-modal__thumb img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply} #ecs-bundle-merge .bm-modal__brand{font-size:12px;color:var(--muted);text-transform:capitalize} #ecs-bundle-merge .bm-modal__nm{font-size:16px;font-weight:800;line-height:1.25;color:var(--ink)} #ecs-bundle-merge .bm-mgroup{margin-bottom:16px} #ecs-bundle-merge .bm-mgroup__lb{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px} #ecs-bundle-merge .bm-mgroup__opts{display:flex;flex-wrap:wrap;gap:8px} #ecs-bundle-merge .bm-opt{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--ink);transition:all .12s} #ecs-bundle-merge .bm-opt:hover{border-color:#cfccc6} #ecs-bundle-merge .bm-opt.is-on{border-color:var(--ink);background:var(--ink);color:#fff} #ecs-bundle-merge .bm-opt--color{width:34px;height:34px;padding:0;border-radius:999px;border:1.5px solid var(--line);background:#fff;position:relative} #ecs-bundle-merge .bm-opt--color::after{content:"";position:absolute;inset:4px;border-radius:999px;background:var(--sw);background-image:var(--swi,none);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)} #ecs-bundle-merge .bm-opt--color.is-on{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral)} #ecs-bundle-merge .bm-modal__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} #ecs-bundle-merge .bm-modal__price{font-size:22px;font-weight:800;color:var(--ink)} #ecs-bundle-merge .bm-modal__price small{font-size:12px;font-weight:600;color:var(--muted)} #ecs-bundle-merge .bm-modal__add{background:var(--coral);color:#fff;border-radius:11px;padding:13px 22px;font-weight:800;font-size:14.5px} #ecs-bundle-merge .bm-modal__add:hover{background:var(--coral-deep)} #ecs-bundle-merge .bm-modal__add[disabled]{background:var(--paper);color:var(--muted);cursor:not-allowed} /* box colorati vuoti: nome categoria + sconto impilati e piu grandi, + piu piccolo (Ale 08-05) */ #ecs-bundle-merge .bm-slot--color.is-empty{gap:10px} #ecs-bundle-merge .bm-slot--color.is-empty .bm-slot__lb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.1} #ecs-bundle-merge .bm-slot__lbname{font-size:15px;font-weight:700} #ecs-bundle-merge .bm-slot--color .bm-slot__pct{font-size:13px;font-weight:800;margin-left:0;opacity:.95} #ecs-bundle-merge .bm-slot--color .bm-plus{width:38px;height:38px;font-size:22px} /* ============================================================================================ Brief ECS 2026-08-25 — voltaggio, macinacaffè consigliati, modalità embed nella scheda prodotto ============================================================================================ */ /* ---- chip del voltaggio nella barra di ricerca: dice sempre su cosa stai filtrando ---- */ #ecs-bundle-merge .bm-voltchip-slot{flex:0 0 auto;display:flex} #ecs-bundle-merge .bm-voltchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13.5px;background:var(--card);color:var(--ink);white-space:nowrap;transition:border-color .12s} #ecs-bundle-merge .bm-voltchip:hover{border-color:var(--ink)} #ecs-bundle-merge .bm-voltchip__v{font-weight:800} #ecs-bundle-merge .bm-voltchip__go{color:var(--muted);font-size:12px;text-decoration:underline} #ecs-bundle-merge .bm-voltchip.is-empty{border-style:dashed;color:var(--muted);font-weight:600} /* ---- modale voltaggio: STESSA grafica della modale "Crea il tuo bundle" della scheda prodotto (card #32323F, due scelte affiancate con icona grande, ✕ tondo in alto a destra). ---- */ #ecs-bundle-merge .bm-volt[hidden]{display:none} /* Centrata come la modale d'ingresso (rilievo ECS 2026-09-10): `margin:auto` sulla card e non `align-items:center` sul contenitore, così una card più alta dello schermo resta scorrevole. */ #ecs-bundle-merge .bm-volt{position:fixed;inset:0;z-index:1060;background:rgba(50,50,63,.55);display:flex;justify-content:center;padding:24px 20px;overflow:auto} #ecs-bundle-merge .bm-volt__card{background:var(--ink);color:#fff;border-radius:14px;max-width:820px;width:100%;margin:auto;position:relative;overflow:hidden;padding:34px 0 0} #ecs-bundle-merge .bm-volt__head{padding:0 30px 22px;text-align:center} #ecs-bundle-merge .bm-volt__t{font-size:22px;font-weight:600} #ecs-bundle-merge .bm-volt__d{margin:8px auto 0;font-size:13px;color:#c7c7d0;max-width:56ch;line-height:1.45} #ecs-bundle-merge .bm-volt__choices{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.18)} #ecs-bundle-merge .bm-volt__choice{position:relative;padding:32px 26px 34px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#fff;transition:background .15s} #ecs-bundle-merge .bm-volt__choice+.bm-volt__choice{border-left:1px solid rgba(255,255,255,.18)} #ecs-bundle-merge .bm-volt__choice:hover{background:rgba(255,255,255,.07)} #ecs-bundle-merge .bm-volt__choice svg{opacity:.9} #ecs-bundle-merge .bm-volt__choice .t{font-size:26px;font-weight:700;letter-spacing:.01em} #ecs-bundle-merge .bm-volt__choice .d{font-size:12.5px;color:#c7c7d0;max-width:28ch;line-height:1.35} #ecs-bundle-merge .bm-volt__reco{margin-top:4px;background:var(--coral);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px} #ecs-bundle-merge .bm-volt__later{width:100%;padding:14px;background:rgba(255,255,255,.06);color:#c7c7d0;font-size:12.5px;text-decoration:underline;border-top:1px solid rgba(255,255,255,.18)} #ecs-bundle-merge .bm-volt__later:hover{background:rgba(255,255,255,.12);color:#fff} #ecs-bundle-merge .bm-volt__x{position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;background:none} #ecs-bundle-merge .bm-volt__x:hover{background:rgba(255,255,255,.15)} @media(max-width:560px){ #ecs-bundle-merge .bm-volt{padding:16px 12px} #ecs-bundle-merge .bm-volt__choices{grid-template-columns:1fr} #ecs-bundle-merge .bm-volt__choice+.bm-volt__choice{border-left:none;border-top:1px solid rgba(255,255,255,.18)} } /* ---- testata della vetrina dei macinacaffè consigliati ---- */ #ecs-bundle-merge .bm-reco:empty{display:none} #ecs-bundle-merge .bm-reco{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 10px} #ecs-bundle-merge .bm-reco__t{font-size:15px;font-weight:800} #ecs-bundle-merge .bm-reco__d{font-size:12.5px;color:var(--muted);flex:1 1 320px;min-width:0} #ecs-bundle-merge .bm-reco__back{font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:underline} /* ---- 10° riquadro "mostra tutti": stessa impronta di una card, aria diversa ---- */ #ecs-bundle-merge .bm-card--all{border-style:dashed;background:transparent;align-items:center;justify-content:center;gap:8px;padding:18px 14px;text-align:center;min-height:100%} #ecs-bundle-merge .bm-card--all:hover{border-color:var(--ink);background:var(--card)} #ecs-bundle-merge .bm-card--all__ico{color:var(--muted);width:34px;height:34px;display:block} #ecs-bundle-merge .bm-card--all__ico svg{width:100%;height:100%} #ecs-bundle-merge .bm-card--all__t{font-size:13.5px;font-weight:800;line-height:1.25} #ecs-bundle-merge .bm-card--all__d{font-size:11px;color:var(--muted);line-height:1.3} /* ============================================================================================ EMBED nella scheda prodotto — stesso motore, resa diversa: niente banner, niente barra fissa (una barra fissa su una scheda prodotto coprirebbe il contenuto della pagina ospite), niente larghezza massima propria. Il pannello vive dentro la colonna d'acquisto e scorre con la pagina. ============================================================================================ */ #ecs-bundle-merge.is-embed{max-width:none;margin:0;padding-bottom:0;background:var(--paper);border-radius:14px;padding:16px} #ecs-bundle-merge.is-embed .bm-title{display:none} #ecs-bundle-merge.is-embed .bm-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;max-height:min(58vh,560px);overflow:auto;padding-right:4px} /* allargato a tutta la scheda (rilievo ECS #16) la barra del set torna su una riga sola */ #ecs-bundle-merge.is-embed .bm-tray__box{flex-wrap:nowrap} @media(max-width:900px){#ecs-bundle-merge.is-embed .bm-tray__box{flex-wrap:wrap}} #ecs-bundle-merge.is-embed .bm-tray{position:sticky;bottom:0;left:auto;right:auto;padding:10px 0 0;z-index:5;align-items:stretch} #ecs-bundle-merge.is-embed .bm-tray__box{width:100%;box-shadow:0 -4px 22px rgba(50,50,63,.14)} #ecs-bundle-merge.is-embed .bm-volt, #ecs-bundle-merge.is-embed .bm-modal{position:fixed} #ecs-bundle-merge.is-embed .bm-searchbar{margin-bottom:8px} /* pié di pagina dell'embed: la via d'uscita verso la pagina intera, mai una trappola */ .ecs-bs-embed__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:12.5px} .ecs-bs-embed__foot a{color:#32323F;font-weight:700;text-decoration:underline} .ecs-bs-embed__close{color:#6d6d78;text-decoration:underline;background:none;border:none;cursor:pointer;font:inherit} .ecs-bs-embed{margin-top:14px} .ecs-bs-embed[hidden]{display:none} .ecs-bs-embed__loading{padding:26px;text-align:center;color:#6d6d78;font-size:13.5px;background:#F2F1EF;border-radius:14px} /* Nell'embed il voltaggio NON si cambia da qui: lo decide il selettore della scheda prodotto, che è la fonte di verità di quella pagina. Un secondo comando che dice la stessa cosa in modo diverso (e che potrebbe far sparire la macchina appena scelta) sarebbe solo un modo per contraddirsi. */ #ecs-bundle-merge.is-embed .bm-voltchip-slot { display: none; } /* --- barra del set nell'EMBED --- In pagina intera la barra ha ~1280px: macchina + 4 reparti + totale ci stanno in fila. Dentro la colonna d'acquisto della scheda prodotto ne ha ~580 e in fila NON ci stanno: la barra sfondava a destra e faceva scorrere l'intera pagina in orizzontale. Qui va a capo in tre fasce — [macchina][totale+CTA] · [i quattro reparti] — che è la stessa informazione, impilata. */ /* La barra va a capo solo quando l'embed è STRETTO. Allargato a tutta la scheda (rilievo #16) ci sta su una riga sola, come nella pagina intera: due impaginazioni diverse per la stessa barra si notano. */ #ecs-bundle-merge.is-embed .bm-tray__box { gap: 8px; } @media (max-width: 1000px) { #ecs-bundle-merge.is-embed .bm-tray__box { flex-wrap: wrap; } } #ecs-bundle-merge.is-embed .bm-tray__brand { display: none; } #ecs-bundle-merge.is-embed .bm-slot--machine { flex: 1 1 200px; max-width: none; } /* Gli slot restano al loro posto NELL'ORDINE DEL DOM — macchina · percorso · totale — come nella pagina intera. `order:3` era il residuo del vecchio layout a tre fasce, di quando l'embed era largo quanto la colonna d'acquisto: da quando va a tutta scheda (rilievo #16) la barra sta su una riga sola, e lì quell'ordine spostava il TOTALE fra la macchina e il percorso. Il rimescolamento serve solo quando la barra va davvero a capo. */ #ecs-bundle-merge.is-embed .bm-tray__slots { flex: 1 1 auto; } @media (max-width: 1000px) { #ecs-bundle-merge.is-embed .bm-tray__slots { flex: 1 1 100%; order: 3; } } #ecs-bundle-merge.is-embed .bm-slot--color { min-width: 0; padding: 8px; } #ecs-bundle-merge.is-embed .bm-slot--color .bm-plus { width: 34px; height: 34px; font-size: 21px; border-radius: 9px; } #ecs-bundle-merge.is-embed .bm-slot--color .bm-slot__thumb { width: 34px; height: 34px; } #ecs-bundle-merge.is-embed .bm-slot__nm { max-width: 100%; } #ecs-bundle-merge.is-embed .bm-tray__sum { margin-left: auto; padding-left: 10px; gap: 10px; } #ecs-bundle-merge.is-embed .bm-tray__grand { font-size: 19px; } #ecs-bundle-merge.is-embed .bm-tray__cta { padding: 11px 15px; font-size: 13.5px; } #ecs-bundle-merge.is-embed .bm-tray__sum--empty .bm-tray__hint { font-size: 12.5px; } /* ============================================================================================== Risposta ECS 2026-08-25 — card cliccabile, sconto in euro, voltaggio morbido, fasce, pannello set ============================================================================================== */ /* ---- la CARD intera seleziona; la scheda prodotto si apre dalla lente ---- */ #ecs-bundle-merge .bm-card{cursor:pointer} #ecs-bundle-merge .bm-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px} #ecs-bundle-merge .bm-card__peek{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .12s,color .12s} #ecs-bundle-merge .bm-card:hover .bm-card__peek, #ecs-bundle-merge .bm-card__peek:focus-visible{opacity:1} #ecs-bundle-merge .bm-card__peek:hover{color:var(--ink);border-color:var(--ink)} #ecs-bundle-merge .bm-card__peek svg{width:13px;height:13px} /* la pastiglia dello sconto lascia il posto alla lente quando si passa sopra */ #ecs-bundle-merge .bm-card:hover .bm-card__save{opacity:0} #ecs-bundle-merge .bm-card__save{transition:opacity .12s} #ecs-bundle-merge .bm-card__save--promo{background:var(--green);font-size:9.5px;font-weight:700} #ecs-bundle-merge .bm-card__thumb{display:block} /* ---- prodotto di un altro voltaggio: resta, ma si vede che è un'altra tensione ---- */ #ecs-bundle-merge .bm-card.is-offvolt{opacity:.62} #ecs-bundle-merge .bm-card.is-offvolt:hover{opacity:1} #ecs-bundle-merge .bm-card__offvolt{font-size:10.5px;font-weight:700;color:var(--brown);line-height:1.2} /* ---- piè di griglia: mostra tutti · altri voltaggi · risultati negli altri reparti ---- */ #ecs-bundle-merge .bm-gridfoot:empty{display:none} #ecs-bundle-merge .bm-gridfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 2px 4px} #ecs-bundle-merge .bm-gridfoot__btn{border:1.5px solid var(--ink);border-radius:12px;padding:10px 18px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--card);transition:background .12s,color .12s} #ecs-bundle-merge .bm-gridfoot__btn:hover{background:var(--ink);color:#fff} #ecs-bundle-merge .bm-gridfoot__link{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px} #ecs-bundle-merge .bm-gridfoot__link:hover{color:var(--ink)} #ecs-bundle-merge .bm-gridfoot__link b{color:var(--ink)} /* ---- le tre fasce degli accessori, spiegate ---- */ #ecs-bundle-merge .bm-tiers{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin:2px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.35} #ecs-bundle-merge .bm-tiers__t{font-size:15px;font-weight:800;color:var(--ink)} #ecs-bundle-merge .bm-tiers__one b{color:var(--ink);font-weight:700} /* ---- modale voltaggio: si vede qual è quello già selezionato ---- */ #ecs-bundle-merge .bm-volt__choice.is-current{background:rgba(255,255,255,.10)} #ecs-bundle-merge .bm-volt__cur{margin-top:4px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px} /* ---- pannello di riepilogo del set (si apre dal basso) ---- */ #ecs-bundle-merge .bm-tray__expand{flex:0 0 auto;border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;font-size:13px;font-weight:700;color:var(--ink);background:var(--card);white-space:nowrap} #ecs-bundle-merge .bm-tray__expand:hover{border-color:var(--ink)} #ecs-bundle-merge .bm-tray__save--promo{color:var(--green);font-weight:700;font-size:11.5px} #ecs-bundle-merge .bm-panel{pointer-events:auto;width:min(1280px,calc(100vw - var(--tray-gap)));flex:0 0 auto;margin:0 0 8px;background:#fff;border-radius:16px;box-shadow:0 8px 34px rgba(50,50,63,.22);max-height:min(56vh,520px);display:flex;flex-direction:column;overflow:hidden;animation:bm-panel-in .16s ease-out} @keyframes bm-panel-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){#ecs-bundle-merge .bm-panel{animation:none}} #ecs-bundle-merge .bm-panel__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)} #ecs-bundle-merge .bm-panel__title{font-size:15px;font-weight:800} #ecs-bundle-merge .bm-panel__close{font-size:13px;font-weight:700;color:var(--muted)} #ecs-bundle-merge .bm-panel__close:hover{color:var(--ink)} #ecs-bundle-merge .bm-panel__body{overflow:auto;padding:4px 16px 12px} #ecs-bundle-merge .bm-panel__grp{border-bottom:1px solid var(--line);padding:8px 0} #ecs-bundle-merge .bm-panel__grp:last-child{border-bottom:none} #ecs-bundle-merge .bm-panel__grp.is-empty{opacity:.55} #ecs-bundle-merge .bm-panel__head{display:flex;align-items:center;gap:8px} #ecs-bundle-merge .bm-panel__go{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-decoration:underline;text-underline-offset:3px} #ecs-bundle-merge .bm-panel__n{background:var(--paper);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;color:var(--muted)} #ecs-bundle-merge .bm-panel__none{font-size:11.5px;color:var(--muted);font-style:italic} #ecs-bundle-merge .bm-panel__list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} #ecs-bundle-merge .bm-panel__row{display:flex;align-items:center;gap:10px;padding:5px 0} #ecs-bundle-merge .bm-panel__thumb{width:38px;height:38px;flex:0 0 auto;border-radius:7px;background:var(--paper);overflow:hidden;display:grid;place-items:center} #ecs-bundle-merge .bm-panel__thumb img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply} #ecs-bundle-merge .bm-panel__id{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} #ecs-bundle-merge .bm-panel__nm{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ecs-bundle-merge .bm-panel__combo{font-size:11px;color:var(--muted)} #ecs-bundle-merge .bm-panel__save{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--green)} #ecs-bundle-merge .bm-panel__promo{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--green)} #ecs-bundle-merge .bm-panel__pr{flex:0 0 auto;font-size:13px;font-weight:800;min-width:72px;text-align:right} #ecs-bundle-merge .bm-panel__x{flex:0 0 auto;width:24px;height:24px;border-radius:999px;color:var(--muted);font-size:12px;display:grid;place-items:center} #ecs-bundle-merge .bm-panel__x:hover{background:var(--paper);color:var(--coral)} #ecs-bundle-merge .bm-panel__note{border-top:1px solid var(--line);padding:9px 16px;font-size:12px;color:var(--muted)} @media(max-width:640px){ #ecs-bundle-merge .bm-panel{width:calc(100vw - 16px)} #ecs-bundle-merge .bm-tray__expand{padding:9px 11px;font-size:12px} } /* ---- embed: il pannello segue la larghezza dell'embed ---- */ #ecs-bundle-merge.is-embed .bm-panel{width:100%;max-height:min(46vh,380px)} /* ====================================================================================== RIALLINEAMENTO ALLA TAVOLA V12 — brief ECS 2026-09-10 Tre cose, che a video sono una sola: far capire A COLPO D'OCCHIO in che passo si è. 1. triangolino sopra il box del passo attivo (nella tavola c'è, qui mancava) 2. i comandi della sezione prendono il COLORE del box del passo (verde macinacaffè, azzurro accessori…): il colore non è decorazione, è l'indice del passo 3. box vuoti sviluppati in VERTICALE (+ sopra, nome sotto) e senza percentuale Queste regole stanno in fondo di proposito: sovrascrivono per ultime, e si tolgono in blocco se la tavola cambia. ====================================================================================== */ /* --- 1. triangolino del passo attivo ------------------------------------------------- ⚠️ Corretto sulla tavola V12 (frame `bundle-flow` 6-6518, passo Accessori): nella tavola è BIANCO — cioè del colore della barra, come la punta di un fumetto — e punta in BASSO, sporgendo sotto il riquadro. Non è colorato e non punta in alto: quella era una mia lettura. Nella tavola la barra sta nel flusso e sotto ha il pannello di dettaglio; qui la barra è ancorata al fondo della finestra, quindi la punta non "indica" niente sotto di sé — resta però il segno che V12 ha disegnato, e sta nei 12px di aria sotto la barra. L'ombra serve: bianco su carta chiara, senza, il triangolo non si stacca. */ #ecs-bundle-merge .bm-slot::before{ content:"";position:absolute;left:50%;top:100%;margin-top:8px; width:18px;height:18px;background:#fff; transform:translateX(-50%) translateY(-4px) rotate(45deg); border-bottom-right-radius:3px; box-shadow:4px 4px 10px rgba(50,50,63,.13); opacity:0;transition:opacity .16s ease,transform .16s ease;pointer-events:none; } #ecs-bundle-merge .bm-slot.is-on::before{opacity:1;transform:translateX(-50%) translateY(-9px) rotate(45deg)} @media(prefers-reduced-motion:reduce){#ecs-bundle-merge .bm-slot::before{transition:none}} /* La punta vive nell'aria sotto la barra: se non ce n'è abbastanza viene tagliata. */ #ecs-bundle-merge .bm-tray{padding-bottom:16px} /* Il bordo interno del passo attivo resta com'era, ma deve battere quello bianco del box "prossimo suggerito": quando sono lo stesso box vinceva il bianco e il passo attivo non si distingueva più. */ #ecs-bundle-merge .bm-slot--color.is-on, #ecs-bundle-merge .bm-slot--color.is-next.is-on{box-shadow:0 0 0 2px var(--ink) inset} /* Sotto i 560px la barra scorre in orizzontale (`overflow-x:auto`) e taglierebbe la punta: lì il passo attivo lo dice solo il bordo interno. */ @media(max-width:560px){#ecs-bundle-merge .bm-slot::before{display:none}} /* --- 2. colore del passo sui comandi della sezione ----------------------------------- `--step` la scrive il JS a ogni cambio passo (setStep → paintStep). Il fallback corallo serve solo al primo frame e a chi arriva con JS a metà: nessun comando resta senza colore. */ #ecs-bundle-merge{--step:var(--coral)} #ecs-bundle-merge .bm-card__add{border-color:var(--step);color:var(--step)} #ecs-bundle-merge .bm-card__add:hover{background:var(--step);color:#fff} #ecs-bundle-merge .bm-card.is-sel{border-color:var(--step);box-shadow:0 0 0 1px var(--step) inset} #ecs-bundle-merge .bm-card.is-sel .bm-card__add{background:var(--step);color:#fff;border-color:var(--step)} #ecs-bundle-merge .bm-card__save{background:var(--step)} #ecs-bundle-merge .bm-chip.is-on{background:var(--step);border-color:var(--step);color:#fff} #ecs-bundle-merge .bm-gridfoot__btn{border-color:var(--step);color:var(--step)} #ecs-bundle-merge .bm-gridfoot__btn:hover{background:var(--step);color:#fff} #ecs-bundle-merge .bm-search input:focus{border-color:var(--step);box-shadow:0 0 0 3px color-mix(in srgb,var(--step) 18%,transparent)} #ecs-bundle-merge .bm-reco__t,#ecs-bundle-merge .bm-tiers__t{color:var(--step)} /* L'olivo (macinacaffè) e la sabbia sono chiari: il bianco sopra non si legge. Dove il colore del passo è chiaro il testo torna inchiostro — deciso per passo, non "a occhio" sul contrasto. */ #ecs-bundle-merge.is-step-grinder .bm-chip.is-on, #ecs-bundle-merge.is-step-grinder .bm-card__add:hover, #ecs-bundle-merge.is-step-grinder .bm-card.is-sel .bm-card__add, #ecs-bundle-merge.is-step-grinder .bm-gridfoot__btn:hover, #ecs-bundle-merge.is-step-grinder .bm-card__save{color:var(--ink)} /* Il carrello resta CORALLO in ogni passo: è l'azione finale, non appartiene a una sezione. (Sta dopo le regole sopra apposta: nessuna di quelle lo tocca, ma se un domani succedesse questa riga tiene.) */ #ecs-bundle-merge .bm-tray__cta:not([disabled]){background:var(--coral);color:#fff} #ecs-bundle-merge .bm-tray__cta:not([disabled]):hover{background:var(--coral-deep)} /* --- 3. box vuoti in verticale, senza percentuale ------------------------------------ Prima: "+ Macinacaffè −8%" tutto su una riga, che a 120px si tagliava. Ora il "+" sta sopra e il nome sotto, su due righe se serve: la barra si alza di ~20px e non taglia più niente. La percentuale è via (rilievo ECS 2026-09-10): il risparmio si legge già sulle card e nel totale, e sul box faceva rumore. */ #ecs-bundle-merge .bm-slot--color.is-empty, #ecs-bundle-merge .bm-slot--machine.is-empty{ flex-direction:column;justify-content:center;gap:7px;padding:10px 8px; } #ecs-bundle-merge .bm-slot--color.is-empty .bm-slot__lb, #ecs-bundle-merge .bm-slot--machine.is-empty .bm-slot__lb{ display:block;text-align:center;line-height:1.15;white-space:normal;overflow-wrap:anywhere; } #ecs-bundle-merge .bm-slot--color.is-empty .bm-slot__lbname{font-size:14px;font-weight:700} #ecs-bundle-merge .bm-slot--machine.is-empty .bm-slot__lb{font-size:14px;font-weight:700;color:var(--ink)} /* Tutti i box alla stessa altezza anche quando uno solo va a capo: la barra è una riga sola. */ #ecs-bundle-merge .bm-tray__box{align-items:stretch} #ecs-bundle-merge .bm-slot--color.is-empty, #ecs-bundle-merge .bm-slot--machine.is-empty{min-height:84px} /* La barra è più alta: la pagina lascia più fondo, o l'ultima riga di card ci finisce sotto. */ #ecs-bundle-merge{padding-bottom:150px} #ecs-bundle-merge.is-embed{padding-bottom:16px} #ecs-bundle-merge.is-embed .bm-slot--color.is-empty, #ecs-bundle-merge.is-embed .bm-slot--machine.is-empty{min-height:74px;gap:5px;padding:8px 6px} #ecs-bundle-merge.is-embed .bm-slot--color.is-empty .bm-slot__lbname{font-size:12.5px} @media(max-width:640px){ #ecs-bundle-merge .bm-slot--color.is-empty, #ecs-bundle-merge .bm-slot--machine.is-empty{min-height:76px} #ecs-bundle-merge .bm-slot--color.is-empty .bm-slot__lbname{font-size:12.5px} } /* Il box macchina resta bianco (miniatura + nome), ma il suo colore di reparto è il corallo: lo prendono il triangolino e i comandi della sezione, non lo sfondo. */ #ecs-bundle-merge .bm-slot--machine{--slot:var(--coral)} /* ====================================================================================== SECONDO GIRO SULLA TAVOLA V12 — 2026-09-10, richiesta "pulsanti e icone" Riferimento: `_theme-v12-hummingbird/figma-refs/bundle-flow_6-6518.png` (frame 6-25520/6-6518), letto frame per frame. Qui ci sono SOLO differenze verificate sulla tavola, non impressioni. ====================================================================================== */ /* --- slot PIENI: nella tavola sono verticali e BIANCHI, col nome nel colore del reparto --- (macchina in corallo, macinacaffè in oliva, accessorio in azzurro). Prima erano orizzontali, miniatura a sinistra, e gli add-on restavano a tinta piena col testo bianco. Il colore, così, dice il reparto anche quando la tessera è già stata riempita. */ #ecs-bundle-merge .bm-slot.is-done{ flex-direction:column;justify-content:center;gap:4px;padding:8px 10px; background:#fff;color:var(--ink); } #ecs-bundle-merge .bm-slot.is-done .bm-slot__body{align-items:center;text-align:center;min-width:0;max-width:100%} #ecs-bundle-merge .bm-slot.is-done .bm-slot__nm{color:var(--slot);font-weight:700;max-width:100%} #ecs-bundle-merge .bm-slot.is-done .bm-slot__combo{color:var(--muted);opacity:1;max-width:100%} #ecs-bundle-merge .bm-slot.is-done .bm-slot__pr{color:var(--ink);font-weight:600;opacity:1} #ecs-bundle-merge .bm-slot--machine.is-done{border-color:transparent} #ecs-bundle-merge .bm-slot.is-done .bm-slot__x{color:var(--muted)} #ecs-bundle-merge .bm-slot.is-done .bm-slot__x:hover{background:var(--paper);color:var(--coral)} /* Il bordo del passo attivo su una tessera ora bianca: inchiostro, non bianco su bianco. */ #ecs-bundle-merge .bm-slot--color.is-done.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-next.is-on{box-shadow:0 0 0 2px var(--ink) inset} /* --- tessere VUOTE: nella tavola sono UNITE, a tutta altezza, senza raggio e senza spazi --- Erano riquadri arrotondati staccati di 8px. Unite leggono come una barra di passi, che è quello che sono. Il raggio resta solo agli estremi del gruppo. */ #ecs-bundle-merge .bm-tray__slots{gap:0} #ecs-bundle-merge .bm-slot--color{border-radius:0} #ecs-bundle-merge .bm-tray__slots > .bm-slot--color:first-child{border-radius:11px 0 0 11px} #ecs-bundle-merge .bm-tray__slots > .bm-slot--color:last-child{border-radius:0 11px 11px 0} /* Una tessera già riempita torna bianca: fra due colorate lascerebbe un buco netto, quindi riprende il raggio e un filo d'aria attorno, come una scheda appoggiata sulla barra. */ #ecs-bundle-merge .bm-tray__slots > .bm-slot--color.is-done{border-radius:11px;margin:0 4px} /* --- blocco totali come nella tavola: valore, risparmio in pastiglia verde, totale --- */ #ecs-bundle-merge .bm-tray__tot{align-items:flex-end;gap:3px} #ecs-bundle-merge .bm-tray__val{font-size:12px;color:var(--muted);font-weight:500} #ecs-bundle-merge .bm-tray__grandline{display:flex;align-items:baseline;gap:4px} #ecs-bundle-merge .bm-tray__save{ display:inline-block;border:1.5px solid var(--green);border-radius:999px; padding:1px 10px;font-size:12px;font-weight:700;color:var(--green); } #ecs-bundle-merge .bm-tray__save--promo{border-color:var(--green);color:var(--green)} /* --- ricerca: pastiglia con la lente a DESTRA, non a tutta larghezza --- */ #ecs-bundle-merge .bm-search{flex:0 1 520px} #ecs-bundle-merge .bm-search input{border-radius:999px;border-color:var(--ink);padding:11px 44px 11px 20px;font-size:14px} /* ⚠️ Il selettore DEVE contenere `svg`, non solo la classe. La regola storica `#ecs-bundle-merge .bm-search svg{left:15px}` ha un selettore di tipo in più, quindi è più specifica di `.bm-search__ico` e vinceva lei: `left:auto` non veniva mai applicato, e con left e right entrambi impostati su un elemento di larghezza fissa comanda left. Risultato: la lente tornava a sinistra, sopra la scritta "Search" (segnalato da ECS il 12/09; misurato: lente a x=140, testo del segnaposto da x=145). Con `svg.bm-search__ico` la specificità è più alta e la lente resta a destra. */ #ecs-bundle-merge .bm-search svg.bm-search__ico{position:absolute;left:auto;right:16px;top:50%;transform:translateY(-50%); width:18px;height:18px;color:var(--ink);pointer-events:none} /* La ✕ e la lente non convivono mai (la lente sparisce appena si scrive), quindi la ✕ sta nello spazio che il padding destro dell'input riserva già: a `right:40px` finiva 20px DENTRO la zona del testo e una ricerca lunga ci passava sotto. */ #ecs-bundle-merge .bm-search__clear{right:14px} #ecs-bundle-merge .bm-search.has-q .bm-search__ico{display:none} /* la barra di ricerca non occupa più tutta la riga: l'ordinamento le sta accanto, a destra */ #ecs-bundle-merge .bm-searchbar{justify-content:flex-start} #ecs-bundle-merge .bm-voltchip-slot{margin-left:auto} /* Su telefono la riga non si divide in due: l'ordinamento si prende la larghezza che gli serve e alla casella di ricerca ne restavano 66px, dentro cui non ci sta nemmeno una parola. Va a capo. */ @media(max-width:640px){ #ecs-bundle-merge .bm-searchbar{flex-wrap:wrap} #ecs-bundle-merge .bm-search{flex:1 1 100%} } /* --- ordinamento: pastiglia grigia col chevron nel cerchio, come nella tavola --- */ #ecs-bundle-merge .bm-sort{ border:none;border-radius:999px;background-color:#dedbd6;color:var(--ink); padding:11px 42px 11px 20px;font-size:13.5px;font-weight:600; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='%2332323f'/%3E%3Cpath d='M7 9.5l4 4 4-4' fill='none' stroke='%2332323f' stroke-width='1.6'/%3E%3C/svg%3E"); background-position:right 11px center;background-size:22px 22px; } /* --- testata degli assi di filtro: pastiglia a filo col chevron nel cerchio (tavola V12) --- Prima era una scrittina maiuscoletta senza forma. Ora è il pulsante della tavola, e apre e chiude i valori del suo asse. */ #ecs-bundle-merge .bm-axis{ display:inline-flex;align-items:center;gap:9px; border:1px solid var(--ink);border-radius:999px;background:transparent; padding:5px 9px 5px 18px;font-size:12.5px;font-weight:700;color:var(--ink); transition:background .12s,color .12s; } #ecs-bundle-merge .bm-axis:hover{background:var(--ink);color:#fff} #ecs-bundle-merge .bm-axis__ico{ width:20px;height:20px;flex:0 0 20px;border:1px solid currentColor;border-radius:999px; background:center/9px no-repeat; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2332323f' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); transition:transform .18s ease; } /* chiuso = chevron a destra, come le righe "Scheda tecnica ›" della scheda prodotto */ #ecs-bundle-merge .bm-axis:not(.is-open) .bm-axis__ico{transform:rotate(-90deg)} #ecs-bundle-merge .bm-axis:hover .bm-axis__ico{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); } /* la riga dei filtri non si taglia più a 74px: le testate devono restare sempre visibili */ #ecs-bundle-merge .bm-chips{max-height:none;align-items:center} /* Assi di filtro (ECS 15/09, con l'asse "Tipo" degli accessori). Su desktop il contenitore di asse non esiste per il layout: le chip scorrono in riga come prima. Su telefono ogni asse diventa UNA riga scorrevole in orizzontale — con Tipo, Fascia e Marca aperti erano nove righe di chip (311px) prima di vedere un prodotto. */ #ecs-bundle-merge .bm-axisrow{display:contents} @media(max-width:640px){ #ecs-bundle-merge .bm-chips{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px} #ecs-bundle-merge .bm-axisrow{display:flex;flex-wrap:nowrap;align-items:center;gap:7px;min-width:0; overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px} #ecs-bundle-merge .bm-axisrow::-webkit-scrollbar{display:none} #ecs-bundle-merge .bm-axisrow>*{flex:0 0 auto;white-space:nowrap} } /* --- pulsante "+" sulle card: nella tavola è un QUADRATO arrotondato, non un cerchio --- */ #ecs-bundle-merge .bm-card__add{border-radius:7px;width:30px;height:30px;font-size:18px;border-width:1px} /* ═══ Barra dei passi — rilievi ECS 2026-09-10 ═══════════════════════════════════════ Tre correzioni alla barra colorata in fondo. Stanno in coda perché sovrascrivono per ultime: le regole di sopra restano leggibili con la loro spiegazione originale. 1. SQUADRATI. Il gruppo era già a spigolo vivo all'interno ma manteneva 11px agli estremi e sulle tessere riempite. Tolto ovunque: la barra dei passi è una fascia continua, e un raggio solo agli angoli esterni la faceva leggere come un bottone lungo. Anche la tessera riempita perde il raggio e l'aria attorno, altrimenti fra due colorate resta un buco bianco. 2. PUNTA PIÙ GRANDE. Il rombo bianco cresce da 18 a 24px: quello che si vede è la tacca in negativo che intacca il fondo della tessera attiva, e a 18px era un accenno. Serve anche più aria sotto la barra, o la punta viene tagliata. 3. NIENTE BORDO SCURO SUL PASSO ATTIVO. Il riquadro d'inchiostro sporcava la tinta piena; il passo attivo lo dice la punta, che ora si vede. ⚠️ Sotto i 560px la punta è nascosta (la barra scorre in orizzontale e la taglierebbe): lì il bordo resta, altrimenti non si distingue più quale passo è aperto. */ /* 1 — spigolo vivo su tutte le tessere colorate, piene o vuote */ #ecs-bundle-merge .bm-tray__slots > .bm-slot--color:first-child, #ecs-bundle-merge .bm-tray__slots > .bm-slot--color:last-child, #ecs-bundle-merge .bm-tray__slots > .bm-slot--color.is-done{border-radius:0} #ecs-bundle-merge .bm-tray__slots > .bm-slot--color.is-done{margin:0} /* 2 — punta più grande, e l'aria che le serve per non essere tagliata */ #ecs-bundle-merge .bm-slot::before{ width:24px;height:24px;border-bottom-right-radius:0; transform:translateX(-50%) translateY(-1px) rotate(45deg); } #ecs-bundle-merge .bm-slot.is-on::before{transform:translateX(-50%) translateY(-11px) rotate(45deg)} #ecs-bundle-merge .bm-tray{padding-bottom:20px} /* 3 — via il bordo interno scuro dal passo attivo (solo tessere colorate) */ #ecs-bundle-merge .bm-slot--color.is-on, #ecs-bundle-merge .bm-slot--color.is-next.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-next.is-on{box-shadow:none} @media(max-width:560px){ #ecs-bundle-merge .bm-slot--color.is-on, #ecs-bundle-merge .bm-slot--color.is-next.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-next.is-on{box-shadow:0 0 0 2px var(--ink) inset} } /* ═══ Il "+" delle card, misurato sulla tavola ═════════════════════════════════════════ Risposta alla domanda lasciata aperta ("va a fondo pieno con la crocetta bianca?"): NO. Riferimento: `figma-refs/bundle-flow_6-6518.png`, frame del passo Macinacaffè, ingrandito 4×. Nella tavola il pulsante è: · quadrato arrotondato ~36px, raggio generoso (~10px), non un cerchio e non 30px · fondo BIANCO con filo GRIGIO NEUTRO — il filo non prende il colore del reparto · il SEGNO (+ o −) sì: è nel colore del passo, a tratto sottile · la card già scelta mostra "−" nella stessa scatola, non un pulsante pieno; a dire che è scelta è il bordo della card, che nella tavola è oliva sul passo macinacaffè Quindi il colore del reparto entra dal segno, non dal fondo: sull'oliva, che è chiaro, un fondo pieno avrebbe costretto a girare anche il segno per leggerlo. */ #ecs-bundle-merge .bm-card__add{ width:36px;height:36px;border-radius:10px; border:1px solid var(--line);color:var(--step); font-size:21px;font-weight:400; } #ecs-bundle-merge .bm-card__add:hover{background:transparent;color:var(--step);border-color:var(--step)} #ecs-bundle-merge .bm-card.is-sel .bm-card__add{background:transparent;color:var(--step);border-color:var(--step)} /* Sul macinacaffè l'oliva è chiara: la regola che girava il testo a inchiostro serviva quando il fondo era pieno. Ora il fondo è bianco e il segno DEVE restare del colore del passo. */ #ecs-bundle-merge.is-step-grinder .bm-card__add, #ecs-bundle-merge.is-step-grinder .bm-card__add:hover, #ecs-bundle-merge.is-step-grinder .bm-card.is-sel .bm-card__add{color:var(--step)} /* ECS prova 7 (2026-09-11): pallini colore dei modelli in più colori, una card per modello */ #ecs-bundle-merge .bm-card__sw{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px} #ecs-bundle-merge .bm-sw{width:20px;height:20px;border-radius:50%;padding:0;margin:0;border:1px solid rgba(50,50,63,.35);background:var(--sw,#e6e6e6);background-image:var(--swi,none);background-size:cover;background-position:center;overflow:hidden;cursor:pointer;flex:0 0 auto;box-shadow:inset 0 0 0 2px #fff} #ecs-bundle-merge .bm-sw img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} #ecs-bundle-merge .bm-sw.is-on{outline:2px solid var(--step,#e64b38);outline-offset:1px} #ecs-bundle-merge .bm-sw:focus-visible{outline:2px solid #32323f;outline-offset:2px} /* ECS prova 10 (2026-09-12): il messaggio "manca il macinacaffè" va a capo e non copre più il pulsante Espandi */ #ecs-bundle-merge .bm-tray__save--unlock{white-space:normal;max-width:210px;line-height:1.15;font-size:10.5px;text-align:right;align-self:flex-end} @media (max-width:900px){#ecs-bundle-merge .bm-tray__save--unlock{max-width:160px}} /* Le quattro caselle colorate non si stringevano: sbordavano dal loro contenitore e finivano SOPRA il pulsante Espandi (che è statico, mentre le caselle hanno position:relative). Ora si stringono, e la colonna dei totali viene comunque disegnata sopra. (ECS 12/09) */ #ecs-bundle-merge .bm-tray__slots > .bm-slot{min-width:0;flex:1 1 0} #ecs-bundle-merge .bm-tray__sum{position:relative;z-index:3;background:var(--card)} /* ECS prova 11 (2026-09-12): prezzo pieno sbarrato accanto al prezzo di vendita, quando c'è una promo a catalogo */ #ecs-bundle-merge .bm-card__prices{display:flex;align-items:baseline;gap:6px;min-width:0} #ecs-bundle-merge .bm-card__was{font-size:11px;font-weight:600;color:var(--muted);text-decoration:line-through} #ecs-bundle-merge .bm-panel__was{font-size:11px;font-weight:600;color:var(--muted);text-decoration:line-through} /* Prova ECS 29 (23/09): badge editoriale («Recommended by ECS») e risparmio sulla stessa card. Il badge sta prima del risparmio nel markup: con tutti e due il risparmio scende sotto, invece di coprirsi a vicenda sulle card strette. */ #ecs-bundle-merge .bm-card__badge + .bm-card__save{top:34px} /* --- D21 (01/10/2026): bordo nero sulla categoria selezionata, come chiede V12 (18/09), E la punta sotto (richiesta di ECS del 10/09): le due cose insieme. Il bordo era stato tolto qui sopra (blocco 3); questa regola lo rimette sopra a tutto. Per tornare a come prima basta togliere queste righe. */ #ecs-bundle-merge .bm-slot--color.is-on, #ecs-bundle-merge .bm-slot--color.is-next.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-on, #ecs-bundle-merge .bm-slot--color.is-done.is-next.is-on{box-shadow:0 0 0 2px var(--ink) inset} /* ---- Contrasto AA delle tessere della barra (01/10/2026, EAA) ---- Testo bianco 14-15px su oliva/turchese/marrone/pervinca: 2,1-3,9:1, ne serve 4,5. Stessa regola del menu: sull'oliva il testo diventa scuro e il colore resta; sulle altre tinte il fondo è la stessa tinta scurita quanto basta per il bianco (≥ 4,6:1). `!important` perché --slot arriva dallo style in linea del JS. Le tessere bloccate restano cliccabili: non si sbiadisce più tutto (testo compreso) ma solo il fondo. */ #ecs-bundle-merge .bm-slot--color[data-step="acc"]{--slot:#557B84 !important} #ecs-bundle-merge .bm-slot--color[data-step="coffee"]{--slot:#996956 !important} #ecs-bundle-merge .bm-slot--color[data-step="other"]{--slot:#6B71A1 !important} #ecs-bundle-merge .bm-slot--color[data-step="grinder"]{color:var(--ink)} #ecs-bundle-merge .bm-slot--color[data-step="grinder"] .bm-plus{color:var(--ink)} #ecs-bundle-merge .bm-slot.is-done[data-step="grinder"] .bm-slot__nm{color:#6F6938} #ecs-bundle-merge .bm-slot--machine .bm-slot__nm{color:var(--coral-deep)} #ecs-bundle-merge .bm-slot--color.is-locked{filter:none;opacity:1;background:color-mix(in srgb, var(--slot) 30%, #fff);color:var(--ink)} #ecs-bundle-merge .bm-slot--color.is-locked .bm-plus{color:var(--ink);opacity:.6} /* ---- Barra del set sul telefono (01/10/2026, a5-02) ---- Con una macchina scelta la tessera si allargava col nome (flex:0 0 auto), le altre restavano larghe 16-20px e il pulsante «Aggiungi il set al carrello» finiva fuori schermo (x=575 su 390), raggiungibile solo scorrendo la barra. Ora due righe: le cinque tessere a pari larghezza (miniatura e prezzo; nome e variante si leggono con «Espandi»), sotto totale e pulsante. Sotto i 380px il pulsante va su una riga sua. */ @media(max-width:640px){ #ecs-bundle-merge .bm-tray__box{flex-wrap:wrap;overflow-x:visible;row-gap:8px;column-gap:4px} #ecs-bundle-merge .bm-tray__box > .bm-slot--machine{flex:1 1 0;min-width:0;max-width:none} #ecs-bundle-merge .bm-tray__slots{flex:4 1 0;min-width:0;display:flex;gap:4px} #ecs-bundle-merge .bm-tray__slots > .bm-slot{flex:1 1 0;min-width:0} #ecs-bundle-merge .bm-slot--color{min-width:0} #ecs-bundle-merge .bm-slot--color.is-empty,#ecs-bundle-merge .bm-slot--machine.is-empty{padding:6px 2px;min-height:68px} #ecs-bundle-merge .bm-slot .bm-plus{width:30px;height:30px;font-size:20px;border-radius:9px} #ecs-bundle-merge .bm-slot__lbname,#ecs-bundle-merge .bm-slot--machine.is-empty .bm-slot__lb{font-size:10.5px !important;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ecs-bundle-merge .bm-slot.is-done{padding:6px 2px;gap:2px;min-height:68px} #ecs-bundle-merge .bm-slot.is-done .bm-slot__nm,#ecs-bundle-merge .bm-slot.is-done .bm-slot__combo{display:none} #ecs-bundle-merge .bm-slot.is-done .bm-slot__thumb{width:34px;height:34px} #ecs-bundle-merge .bm-slot.is-done .bm-slot__thumb img{width:100%;height:100%;object-fit:contain} #ecs-bundle-merge .bm-slot.is-done .bm-slot__pr{font-size:10.5px;white-space:nowrap} #ecs-bundle-merge .bm-slot.is-done .bm-slot__x{position:absolute;top:1px;right:1px;width:18px;height:18px;font-size:10px} #ecs-bundle-merge .bm-tray__sum{flex:1 1 100%;width:100%;margin-left:0;border-left:none;border-top:1px solid var(--line);padding:8px 2px 0;justify-content:space-between;flex-wrap:nowrap;gap:8px} #ecs-bundle-merge .bm-tray__cta{flex:1 1 auto;justify-content:center;white-space:normal;text-align:center;padding:11px 12px;font-size:13.5px} #ecs-bundle-merge .bm-tray__grand{font-size:18px} #ecs-bundle-merge .bm-tray__grandline{white-space:nowrap} /* l'icona per riaprire i cookie sta in basso a sinistra, sopra «Espandi»: qui sale sopra la barra */ body#module-ecmcore-bundle .ecs-cookie-reopen{bottom:236px} } @media(max-width:380px){ #ecs-bundle-merge .bm-tray__sum{flex-wrap:wrap;row-gap:8px} #ecs-bundle-merge .bm-tray__cta{flex:1 1 100%} body#module-ecmcore-bundle .ecs-cookie-reopen{bottom:290px} } /* nella scheda prodotto (embed) la barra è più stretta della pagina: pulsante su una riga sua già sotto i 640px */ @media(max-width:640px){ #ecs-bundle-merge.is-embed .bm-tray__sum{flex-wrap:wrap;row-gap:8px} #ecs-bundle-merge.is-embed .bm-tray__cta{flex:1 1 100%} #ecs-bundle-merge.is-embed .bm-tray__save--unlock{max-width:none} } /* ECS · 2026-10-03: bundle affollati, nomi lunghi e riepilogo responsive. */ /* Nomi su due righe nelle tessere ampie; nome completo nel riepilogo scorrevole. */ #ecs-bundle-merge .bm-slot.is-done .bm-slot__nm{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; white-space:normal;overflow:hidden;line-height:1.2;max-width:100%;overflow-wrap:anywhere; } #ecs-bundle-merge .bm-slot.is-done .bm-slot__body{width:100%;} #ecs-bundle-merge .bm-slot__kind{display:none;} #ecs-bundle-merge .bm-panel__nm{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.35;} #ecs-bundle-merge:not(.is-embed){padding-bottom:180px;} /* Separiamo percorso e totale prima che cinque tessere riempite si schiaccino. */ @media (min-width:641px) and (max-width:1479px){ #ecs-bundle-merge:not(.is-embed){padding-bottom:260px;} #ecs-bundle-merge:not(.is-embed) .bm-tray__box{flex-wrap:wrap;row-gap:8px;} #ecs-bundle-merge:not(.is-embed) .bm-tray__brand{display:none;} #ecs-bundle-merge:not(.is-embed) .bm-tray__box > .bm-slot--machine{flex:1 1 0;min-width:0;max-width:none;} #ecs-bundle-merge:not(.is-embed) .bm-tray__slots{flex:4 1 0;min-width:0;} #ecs-bundle-merge:not(.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;} } /* Tra tablet e desktop le miniature stanno a fianco del testo: barra più bassa. */ @media (min-width:1100px) and (max-width:1479px){ #ecs-bundle-merge:not(.is-embed){padding-bottom:230px;} #ecs-bundle-merge:not(.is-embed) .bm-slot.is-done{flex-direction:row;align-items:center;text-align:left;justify-content:flex-start;gap:8px;padding:8px 9px;} #ecs-bundle-merge:not(.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;} #ecs-bundle-merge:not(.is-embed) .bm-slot.is-done .bm-slot__thumb{flex:0 0 38px;width:38px;height:38px;} #ecs-bundle-merge:not(.is-embed) .bm-slot.is-done .bm-slot__nm{font-size:12px;} } @media (min-width:641px) and (max-width:820px){ #ecs-bundle-merge:not(.is-embed) .bm-tray__cta{flex:0 0 auto;min-width:168px;} } #ecs-bundle-merge .bm-tray__expand{display:inline-flex;align-items:center;gap:7px;} #ecs-bundle-merge .bm-tray__count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--paper);font-size:10px;line-height:1;font-weight:800;} /* Sul telefono la barra riepiloga reparto, quantità e prezzo; i nomi sono nel pannello. */ @media (max-width:640px){ #ecs-bundle-merge:not(.is-embed){padding-bottom:270px;} #ecs-bundle-merge .bm-slot.is-done .bm-slot__nm,#ecs-bundle-merge .bm-slot.is-done .bm-slot__combo{display:none;} #ecs-bundle-merge .bm-slot.is-done .bm-slot__body{width:100%;} #ecs-bundle-merge .bm-slot.is-done .bm-slot__kind{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:700;line-height:1.15;color:var(--slot,var(--coral-deep));} #ecs-bundle-merge .bm-slot--machine.is-done .bm-slot__kind{color:var(--coral-deep);} #ecs-bundle-merge .bm-slot--color.is-done[data-step="grinder"] .bm-slot__kind{color:#6F6938;} #ecs-bundle-merge .bm-tray__sum{flex-wrap:wrap;row-gap:8px;} #ecs-bundle-merge .bm-tray__cta{flex:1 1 100%;white-space:normal;} #ecs-bundle-merge .bm-panel__row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:'thumb name remove' 'thumb save price';column-gap:10px;row-gap:3px;align-items:start;padding:9px 0;} #ecs-bundle-merge .bm-panel__thumb{grid-area:thumb;} #ecs-bundle-merge .bm-panel__id{grid-area:name;} #ecs-bundle-merge .bm-panel__save{grid-area:save;} #ecs-bundle-merge .bm-panel__pr{grid-area:price;min-width:0;max-width:115px;white-space:normal;} #ecs-bundle-merge .bm-panel__was{display:block;line-height:1.1;} #ecs-bundle-merge .bm-panel__x{grid-area:remove;} } @media (max-width:380px){#ecs-bundle-merge .bm-slot.is-done .bm-slot__kind{font-size:8.5px;}} /* === ECS 05/10/2026 — angoli come il resto del sito =========================================== Federico: «più squadrati, in modo da seguire quelli già presenti sul sito: così danno meno l'impressione di AI». Misurato col browser sul dev (scheda Silvia, categoria Macchine): 10px pulsanti, campi, card prodotto, pillole dei filtri (.ecs-facet__pill), ordinamento 15px contenitori grandi (riquadro d'acquisto .ecs-p28__buy, testata) 4px etichette piccole (li.badge.discount «-20%», «esaurito») Qui si riportano a quella scala le capsule (999px) e i 11-16px del bundle. Restano tondi apposta: pallini colore, ✕ di chiusura, cerchio del chevron. Blocco unico: per tornare indietro basta toglierlo. La barra in basso (tray) e il suo pannello «Espandi» restano com'erano (Federico, 05/10). */ #ecs-bundle-merge .bm-search input, #ecs-bundle-merge .bm-sort, #ecs-bundle-merge .bm-axis, #ecs-bundle-merge .bm-chip, #ecs-bundle-merge .bm-voltchip, #ecs-bundle-merge .bm-gridfoot__btn, #ecs-bundle-merge .bm-modal__add, #ecs-bundle-merge .bm-opt, #ecs-bundle-merge .bm-card, #ecs-bundle-merge .bm-accnote, #ecs-bundle-merge .bm-modal__thumb{border-radius:10px} #ecs-bundle-merge .bm-modal__box, #ecs-bundle-merge .bm-volt__card, #ecs-bundle-merge.is-embed, .ecs-bs-embed__loading{border-radius:15px} #ecs-bundle-merge .bm-card__badge, #ecs-bundle-merge .bm-card__save, #ecs-bundle-merge .bm-volt__reco, #ecs-bundle-merge .bm-volt__cur{border-radius:4px} #ecs-bundle-merge .bm-opt--color, #ecs-bundle-merge .bm-opt--color::after{border-radius:999px} /* === 06/10/2026 — una barra sola (brief Ale + Federico) ======================================== 1. La barra fissa della pagina Bundle prende la grafica di quella nella scheda prodotto (bundle-cta.css, regole `.is-embed` del 03/10): sopra macchina e reparti, sotto il riepilogo, a ogni larghezza da tablet in su. Prima sopra i 1480px tornava su una riga sola e le tessere erano piu' alte (84px contro 74). 2. Su tutte e due «Espandi» sta subito a sinistra di «Aggiungi al carrello» (l'ordine e' nel markup, bundle-merge.js): totale a sinistra, i due pulsanti a destra. `body` davanti per pesare quanto le regole dell'embed. Blocco unico: per tornare indietro si toglie. */ @media (min-width:1001px){ body #ecs-bundle-merge:not(.is-embed){padding-bottom:230px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__box{flex-wrap:wrap;gap:4px 8px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__brand{display:none} body #ecs-bundle-merge:not(.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:not(.is-embed) .bm-tray__slots{flex:1 1 0;min-width:0;order:0} body #ecs-bundle-merge:not(.is-embed) .bm-tray__slots > .bm-slot--color{min-width:92px;padding:8px 4px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__box > .bm-slot, body #ecs-bundle-merge:not(.is-embed) .bm-tray__slots > .bm-slot{min-height:74px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__slots > .bm-slot--color{gap:5px} body #ecs-bundle-merge:not(.is-embed) .bm-slot--color.is-empty .bm-slot__lbname{font-size:12.5px} body #ecs-bundle-merge:not(.is-embed) .bm-slot--color .bm-plus{width:34px;height:34px;font-size:21px;border-radius:9px} body #ecs-bundle-merge:not(.is-embed) .bm-slot--color .bm-slot__thumb{width:34px;height:34px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__sum{flex:1 1 100%;width:100%;margin:0;border-left:0;border-top:1px solid var(--line);padding:5px 4px 0;gap:10px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__grand{font-size:19px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__cta{padding:11px 15px;font-size:13.5px} body #ecs-bundle-merge:not(.is-embed) .bm-tray__expand, body #ecs-bundle-merge:not(.is-embed) .bm-tray__cta{min-height:44px} } @media (min-width:1200px){ body #ecs-bundle-merge:not(.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:not(.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:not(.is-embed) .bm-slot.is-done .bm-slot__thumb{flex:0 0 38px;width:38px;height:38px} body #ecs-bundle-merge:not(.is-embed) .bm-slot.is-done .bm-slot__nm{font-size:12px} } /* riepilogo, pagina e scheda: totale a sinistra, «Espandi» e carrello affiancati a destra */ body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty){justify-content:flex-end} body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty) .bm-tray__tot{margin-right:auto} @media (min-width:1001px){ body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty) .bm-tray__tot{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:8px;row-gap:2px;text-align:left} body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty) .bm-tray__grandline{flex:1 1 100%;justify-content:flex-start} body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty) .bm-tray__save--unlock{max-width:none;text-align:left} } @media (max-width:1000px){ body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty) .bm-tray__tot{align-items:flex-start;text-align:left} body #ecs-bundle-merge .bm-tray__sum:not(.bm-tray__sum--empty) .bm-tray__save--unlock{text-align:left;align-self:flex-start} } /* Pallino inox delle versioni standard (14/10/2026, Federico: «li voglio color inox», Mara X, Bianca, Silvia Pro X). Il gradiente inox sta in --sw, ma `background-image:var(--swi,none)` qui sopra lo cancellava e restava il bianco della card. Ora l'immagine è --swi (texture) se c'è, altrimenti --sw: un colore pieno lì non vale e resta il colore di fondo, un gradiente invece si vede. */ #ecs-bundle-merge .bm-sw{background-image:var(--swi,var(--sw,none))} /* Filtri degli accessori in righe (14/10/2026, Federico): Tipo in una riga, Fascia nella seconda, Marca subito sotto. Solo nel passo accessori: macchine e macinacaffè hanno due assi corti e restano su una riga sola. */ @media(min-width:641px){ #ecs-bundle-merge.is-step-acc .bm-axisrow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;flex:1 1 100%;min-width:0} } /* Pagina Bundle & Save a sé, computer (14/10/2026, Federico): schede della stessa misura della scheda prodotto (6 per riga invece di 5) e header che scorre via (classe da bundle-merge.js), così si vedono due righe intere. */ @media(min-width:992px){ #ecs-bundle-merge:not(.is-embed) .bm-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px} body#module-ecmcore-bundle #header{transition:transform .25s ease} body#module-ecmcore-bundle.ecs-bs-testa-via #header{transform:translateY(-100%)} }