/* =========================================================================
   ECS su Hummingbird (V12) — brand layer  ·  rev. 2026-07-20
   Riveste Hummingbird (PS9 / Bootstrap 5.3) con l'identità Espresso Coffee Shop.
   Selettori tarati sul markup REALE di Hummingbird (BEM: .product-miniature__*,
   .header-top/.header-bottom, .footer__main) + override delle CSS var Bootstrap.
   Palette/impaginazione allineate alla Figma V12 (home). Valori da rifinire coi
   token esatti Figma (spaziature/font-size) in un secondo giro.
   ========================================================================= */

/* ---- Font ----
   Figtree è il carattere del `.com` (nel tema di produzione arriva da un @import di Google Fonts).
   Qui è SERVITO DAL NOSTRO DOMINIO: niente richiesta a fonts.googleapis/gstatic (che è anche un
   trasferimento di IP verso Google su ogni visita), niente CSS di terze parti in mezzo al
   rendering. È il file variabile 300–900, quindi un solo download copre tutti i pesi. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Brand ECS --- */
  --ecs-ink:        #32323f;
  --ecs-ink-800:    #26262f;
  --ecs-accent:     #ce4636;   /* corallo dei fondi con testo bianco, 4,6:1 (era #e64b38 del logo, 3,9:1: scelta di Ale 01/10/2026) */
  --ecs-accent-600: #b83d2e;
  --ecs-accent-050: #fdeeec;
  --ecs-paper:      #f2f1ef;
  --ecs-line:       #e3e1dd;
  /* Contrasto AA (EAA, 01/10/2026): i testi piccoli devono stare a 4,5:1 sul bianco e sulla carta.
     Il grigio #8A8086 (3,4:1) e il corallo #E64B38 usato COME TESTO (3,4-3,9:1) non ci arrivano: per il testo
     si usano le stesse tinte scurite quanto basta. Il corallo resta identico dove è fondo, bordo o icona. */
  --ecs-muted:      #746c71;   /* era #8a8086 */
  --ecs-accent-text:#c34030;   /* corallo per il testo su bianco e carta (4,5 e 5,1:1) */
  --ecs-content-max: 1320px;   /* = .container-xxl di Hummingbird: larghezza unica header+home */

  /* --- Override token Bootstrap usati da Hummingbird --- */
  --bs-primary: #ce4636;
  --bs-primary-rgb: 230,75,56;
  --bs-link-color: #c34030;
  --bs-link-color-rgb: 230,75,56;
  --bs-link-hover-color: #d13a28;
  --bs-body-color: #32323f;
  --bs-body-color-rgb: 50,50,63;
  /* Manrope non è più nella pila: nel tema di produzione è dichiarato ma non arriva mai a
     renderizzare nulla (il `body{font-family:'Figtree'}` che viene dopo lo scavalca), quindi
     tenerlo qui significava solo un fallback che non si vede mai. */
  --bs-body-font-family: 'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;
}

/* ---- Tipografia ---- */
/* Sfondo pagina come in produzione: `body{background-color:#F2F1EF}` (non bianco).
   Le superfici che devono restare bianche (card prodotto, header, modali) se lo dichiarano. */
body { font-family: var(--bs-body-font-family); color: var(--ecs-ink); background: var(--ecs-paper); }
#wrapper, .page-content, main, #main { background: transparent; }
/* Pesi delle intestazioni come in produzione: `h1{font-weight:600}` e `h2{font-weight:500}`,
   h3-h5 restano a 700. Il 700 su tutto (e il letter-spacing negativo) che avevo messo prima
   era una mia scelta, non quella del `.com`: è ciò che faceva "sentire" un altro carattere. */
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.page-title,.products-section-title {
  font-family:'Figtree',sans-serif; font-weight:700; color:var(--ecs-ink);
}
h1,.h1,.page-title { font-weight:600; }
h2,.h2,.products-section-title { font-weight:500; }
a { color: var(--ecs-accent-text); text-underline-offset:2px; }
a:hover { color: var(--ecs-accent-600); }

/* ---- Testata di sezione: UN SOLO componente per tutte le sezioni --------------------
   ⚠️ Questi numeri NON sono una scelta: sono i token del `.com` in produzione, letti dal suo
   CSS. Prima ogni sezione portava il proprio <style> con valori copiati a occhio, ed è da lì
   che venivano titoli di tre misure diverse, filetti grigi e sottotitoli piccoli.
   Le sezioni ora non dichiarano più tipografia: usano queste classi. Un posto solo da toccare.

     desktop.css  hr{border-top:solid 1px #32323F;opacity:1}
                  h2{60px/72px w500} · h3{30px/36px w400 text-align:right}
                  .section-head{margin-bottom:30px} · .section-head hr{margin:10px 0 30px}
                  .cta{h40 · bordo 1px #32323F · radius 10px · gap 10px · padding 10px · row-reverse}
                  .cta span{14px/16.8px w700 lowercase} · .cta img{22x22}
     mobile.css (≤992px)  h2{32px/38.4px mb16} · h3{16px/19.2px a sinistra} · hr{display:none}
*/
.ecs-sec-head { margin-bottom: 30px; }
.ecs-sec-head__row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.ecs-sec-head__title { font-size:60px; font-weight:500; line-height:72px; color:var(--ecs-ink); margin:0; letter-spacing:0; }
.ecs-sec-head hr { border:0; border-top:solid 1px #32323F; opacity:1; margin:10px 0 30px; }
.ecs-sec-head__sub { font-size:30px; font-weight:400; line-height:36px; text-align:right; color:var(--ecs-ink); margin:0 0 30px; }
/* `row-reverse`: nel markup la freccia viene prima del testo, ma si vede a destra — come nel live. */
.ecs-sec-head__cta {
  flex:0 0 auto; height:40px; border:solid 1px #32323F; border-radius:10px;
  display:inline-flex; flex-direction:row-reverse; align-items:center; gap:10px; padding:10px;
  color:#32323F; text-decoration:none; white-space:nowrap;
}
.ecs-sec-head__cta:hover { border-color:var(--ecs-accent); color:var(--ecs-accent-text); }
.ecs-sec-head__cta img { height:22px; width:22px; }
.ecs-sec-head__cta span { font-size:14px; font-weight:700; line-height:16.8px; text-transform:lowercase; }
@media (max-width:992px){
  .ecs-sec-head { margin-bottom:16px; }
  .ecs-sec-head__row { flex-direction:column; align-items:flex-start; gap:.6rem; }
  .ecs-sec-head__title { font-size:32px; line-height:38.4px; margin-bottom:16px; }
  .ecs-sec-head hr { display:none; }
  .ecs-sec-head__sub { font-size:16px; line-height:19.2px; text-align:left; margin-bottom:20px; }
  /* Da telefono (Federico 07/10): titolo e pulsante sulla stessa riga, sotto la frase. Il pulsante
     è più piccolo e resta su una riga; se non c'è posto va a capo il titolo (in molte lingue
     «Find us around the world» da solo occupa la riga). Il bersaglio al dito resta 44 px (::after). */
  .ecs-sec-head__row { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .ecs-sec-head__title { flex:1 1 0; min-width:0; margin:0; font-size:28px; line-height:34px; }
  .ecs-sec-head__sub { margin-bottom:14px; line-height:22px; }
  .ecs-sec-head__cta { flex:0 0 auto; position:relative; height:auto; min-height:36px; padding:6px 10px; gap:6px; border-radius:8px; }
  .ecs-sec-head__cta::after { content:""; position:absolute; inset:-4px 0; }
  .ecs-sec-head__cta img { width:16px; height:16px; }
  .ecs-sec-head__cta span { font-size:12px; line-height:14px; }
}

/* ---- Header (override child: .ecs-header — riga unica come live/Figma) ---- */
/* Banda annuncio: nel live è alta 32px in tutto (`line-height:32px` + `a{padding:.5rem 0;line-height:1}`).
   Niente padding sul contenitore, altrimenti la fascia cresce a 40px. */
.header-banner { background: var(--ecs-ink); color:#fff; text-align:center; font-size:14px; line-height:32px; padding:0; }
.header-banner a { color:#fff; text-decoration:none; display:block; width:100%; padding:.5rem 0; line-height:1; }
.header-banner a > span { color:#fff; text-decoration:underline; text-decoration-color:#ffffff55; font-weight:400; display:inline-block; line-height:1.15; }
.header-banner .ecm-topbanner__ext { vertical-align:-2px; margin-left:.3em; }
/* il wrapper Hummingbird resta su paper: niente banda bianca residua sotto il banner */
#header.header { background: var(--ecs-paper); }

/* Card bianca arrotondata su fondo paper (come Figma V12).
   Il padding verticale sta su .ecs-header (non come margin sull'inner): evita il
   margin-collapse che spingeva il .9rem fuori dalla card creando la "fascia bianca". */
/* Misure della card header prese dal live (theme-348d67294.css):
   `.header-top{height:100px;padding:26px;gap:24px;border-radius:15px;box-shadow:0 4px 40px 0 #0000001A}`
   dentro un `#header{height:196px}` → ~32px di aria sopra e sotto la card, +30px prima del contenuto. */
.ecs-header { background: var(--ecs-paper); position:sticky; top:0; z-index:1030; padding:2rem 1rem; margin-bottom:30px;
  box-shadow:0 4px 50px 1px rgba(0,0,0,.05); }
/* La card contiene DUE righe, come in produzione: strumenti (100px) e menu categorie (50px),
   separate da un filo grigio. In produzione la seconda è `#ecs_listcategories` in absolute sul
   fondo della card; qui è una riga normale, che regge meglio il testo lungo delle altre lingue. */
.ecs-header__inner {
  background:#fff; border-radius:15px; box-shadow:0 4px 40px 0 rgba(0,0,0,.10);
  margin:0 auto; width:1300px; max-width:calc(100vw - 16px);
}
.ecs-header__row {
  display:flex; align-items:center; gap:24px; padding:26px; height:100px;
}
.ecs-header__logo { flex:0 0 auto; display:flex; align-items:center; }
/* nel live: `#header .logo{max-height:46px}` */
.ecs-header__logo img { max-height:46px; width:auto; }
.ecs-header__logo h1 { line-height:0; margin:0; }
.ecs-header__logo .navbar-brand { padding:0; margin:0; }

/* Ricerca — misure del live (`.header-top #search_widget …`): campo trasparente alto quanto la
   card, testo 25px con caret corallo e filo di riga sotto; LENTE A DESTRA (nel DOM viene dopo il
   campo), alta 40px, grigia e corallo quando il campo ha il focus. */
.ecs-header__search { flex:1 1 auto; min-width:0; height:100%; }
.ecs-header__search #_desktop_ps_searchbar,
.ecs-header__search .ps-searchbar { width:100% !important; max-width:none !important; margin:0 !important; float:none !important; height:100%; }
.ecs-header__search .ps-searchbar__form { position:relative; width:100%; height:100%; display:flex; align-items:center; gap:10px; }
.ecs-header__search .ps-searchbar__input {
  border:0 !important; border-bottom:solid 1px rgba(50,50,63,.03) !important; background:transparent !important;
  border-radius:0; box-shadow:none !important; padding:0 10px 0 0 !important;
  font-size:25px; height:100%; width:100%; color:var(--ecs-ink); caret-color:var(--ecs-accent);
}
/* il colore del placeholder resta quello di default del browser, come in produzione */
.ecs-header__search .ps-searchbar__magnifier, .ecs-header__search .js-search-icon {
  position:static; flex:0 0 auto; width:auto; height:40px; margin:0;
  stroke:#6D6D78; fill:none; cursor:pointer; /* era #AFAFAF: 2,1:1 sul bianco, sotto il 3:1 delle icone (review Codex 07/10/2026) */
}
.ecs-header__search .ps-searchbar__form:focus-within .js-search-icon { stroke:var(--ecs-accent); }
/* Hummingbird dà alla ricerca `min-width:19rem` e alla lente `top:50%;transform:translateY(-50%)` (pensata in
   absolute): con la lente in flusso il transform la alzava di 20px, e i 304px minimi spingevano il campo sopra
   lingua e paese fra 768 e 1100px (01/10/2026). */
.ecs-header__search > div { width:100%; height:100%; }
.ecs-header__search .ps-searchbar { min-width:0; }
.ecs-header__search .ps-searchbar__input { flex:1 1 auto; min-width:0; }
.ecs-header__search .ps-searchbar__magnifier, .ecs-header__search .js-search-icon { transform:none; }

/* Strumenti — geometria del live:
   pill lingua `#_desktop_language_selector{width:76px;height:40px;border-radius:10px;border:1px solid #E64B38}`,
   pill paese  `.ets_click_show{width:127px;height:40px;border-radius:10px;border:1px solid #E64B38;gap:10px;padding:0 10px}`,
   icone       `#displayTop{height:22px;gap:24px}` — nessun separatore verticale fra ricerca e strumenti. */
.ecs-header__tools { flex:0 0 auto; display:flex; align-items:center; gap:24px; }
.ecs-header__tools .ecs-tool { display:flex; align-items:center; }
.ecs-header__tools .header-block { margin:0 !important; }
/* account e carrello: solo icona, nessuna etichetta (le label sono tolte anche dai template) */
.ecs-header__tools .header-block__title { display:none !important; }
.ecs-header__tools .header-block__action-btn, .ecs-tool--wishlist { color:var(--ecs-ink); text-decoration:none; padding:0; }
.ecs-header__tools .header-block__action-btn:hover, .ecs-tool--wishlist:hover { color:var(--ecs-accent-text); }
.ecs-header__tools .material-icons { font-size:23px; }

/* pill lingua: il <select> nativo va spogliato (freccia UA compresa) per somigliare al bottone del live */
.ecs-tool--lang select.form-select {
  appearance:none; -webkit-appearance:none; background-image:none;
  width:76px; height:40px; border:1px solid var(--ecs-accent); border-radius:10px;
  padding:0 4px; font-size:14px; font-weight:700; color:var(--ecs-ink); background-color:#fff;
  text-align:center; text-align-last:center; box-shadow:none; cursor:pointer;
}
/* pill paese: freccia cerchiata 22px + nome, come il geolocalizzatore del .com */
.ecs-country {
  width:127px; height:40px; border:1px solid var(--ecs-accent); border-radius:10px;
  display:flex; justify-content:center; align-items:center; gap:10px; padding:0 10px;
  font-size:14px; font-weight:700; color:var(--ecs-ink); white-space:nowrap;
}
.ecs-country__arrow { width:22px; height:22px; flex:0 0 22px; }

/* nav row (menu categorie, solo pagine interne)
   Riproduce `#ecs_listcategories` del .com live: barra 50px sotto l'header, filo grigio in alto,
   voci distribuite, pill colorata sulla categoria corrente. Il markup però è quello nativo di
   `ps_mainmenu` (ul.top-menu > li#category-<id>), non il blocco scritto a mano della produzione:
   le voci si gestiscono dal BO e i colori restano qui, dove sono una scelta di tema. */
.ecs-header__nav { background:transparent; height:50px; padding:0 26px; border-top:1px solid #AFAFAF88; }
.ecs-header__nav .ps-mainmenu--desktop { height:100%; padding:0; flex:1 1 auto; width:100%; max-width:100%; }
.ecs-header__nav .ps-mainmenu__desktop { height:100%; width:100%; }
.ecs-header__nav .ps-mainmenu__tree {
  height:100%; gap:0; padding:0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap;
}
.ecs-header__nav .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  display:flex; align-items:center; justify-content:center;
  padding:3px 16px; border-radius:10px; text-decoration:none; white-space:nowrap;
  font-size:14px; font-weight:700; line-height:16.8px; color:#6D6D78; /* era #AFAFAF come in produzione: 2,1:1 sul bianco, la EAA chiede 4,5 (01/10/2026) */
}
.ecs-header__nav .ps-mainmenu__tree > li .ps-mainmenu__tree-link:hover {
  color:var(--ecs-menu-aa, var(--ecs-ink));
}
/* pill colorata sulla voce corrente: è l'unico punto in cui la produzione usa il colore.
   Contrasto AA (01/10/2026): i colori delle categorie sono toni medi e col testo bianco stanno fra 2,1 e 3,9:1.
   Dove il testo scuro arriva a 4,5 (oliva, offerte) resta il colore pieno col testo scuro; altrove il fondo è la
   stessa tinta scurita quanto basta (--ecs-menu-aa, ≥ 4,6:1 col bianco). Le tile della home non cambiano. */
.ecs-header__nav .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link,
.ecs-header__nav .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link:hover {
  background:var(--ecs-menu-pill, var(--ecs-menu-aa, var(--ecs-ink))); color:var(--ecs-menu-pill-ink, #fff);
}
/* colore per voce, come in produzione (lo stesso delle tile colorate in home) */
.ecs-header__nav [data-id="category-3"]  { --ecs-menu-color:#E64B38; --ecs-menu-aa:#CE4636; }  /* Macchine Espresso */
.ecs-header__nav [data-id="category-8"]  { --ecs-menu-color:#BEB35F; --ecs-menu-aa:#7C7648; --ecs-menu-pill:#BEB35F; --ecs-menu-pill-ink:#32323F; }  /* Macinacaffè */
.ecs-header__nav [data-id="category-26"] { --ecs-menu-color:#32323F; }  /* Set */
.ecs-header__nav [data-id="category-13"] { --ecs-menu-color:#5F8B95; --ecs-menu-aa:#557B84; }  /* Accessori */
.ecs-header__nav [data-id="category-25"] { --ecs-menu-color:#BA7D63; --ecs-menu-aa:#996956; }  /* Caffè */
.ecs-header__nav [data-id="category-24"] { --ecs-menu-color:#8A8086; --ecs-menu-aa:#7B7279; }  /* Pour Over */
.ecs-header__nav [data-id="category-36"] { --ecs-menu-color:#CB7FB6; --ecs-menu-aa:#99638C; }  /* Design Collection */
.ecs-header__nav [data-id="category-27"] { --ecs-menu-color:#5BAC83; --ecs-menu-aa:#488066; --ecs-menu-pill:#5BAC83; --ecs-menu-pill-ink:#32323F; }  /* Offerte */
.ecs-header__nav [data-id="manufacturers"] { --ecs-menu-color:#7C83BC; --ecs-menu-aa:#6B71A1; } /* Marchi */

/* In home la barra non si vede (come in produzione, dove è nascosta via CSS): il markup però
   resta, perché lì dentro c'è anche il pulsante che apre il menu offcanvas del telefono. */
.ecs-header__nav--home { height:auto; padding:0; border-top:0; }
/* ⚠️ QUI NON SI NASCONDE `.ps-mainmenu__desktop`, e non è una dimenticanza.
   Hummingbird compila il CSS con le **cascade layers**:
     @layer vendors,bs-base,bs-components,bs-custom-components,ps-base,ps-components,
            ps-pages,ps-modules,utilities;
   e le utility Bootstrap — fra cui `d-xl-block{display:block!important}`, che quel <nav> porta
   addosso — stanno in `@layer utilities`. Per le dichiarazioni `!important` l'ordine dei layer
   si INVERTE, e quelle **non-layered** (le nostre: custom.css non dichiara alcun layer) sono le
   più deboli in assoluto. Quindi un nostro `display:none!important`, per quanto specifico,
   perdeva sempre: sulla stessa identica regola `background` e `outline` passavano (nessuno li
   contendeva) mentre `display` no. Nessuna specificità può ribaltarlo — solo un layer.
   Si nasconde allora il contenitore NOSTRO, che nessuno contende, e senza `!important`:
   da xl in su (1200px, la soglia a cui `d-xl-block` accende il menu) il menu mobile è comunque
   nascosto, quindi non si perde nulla; sotto xl la barra resta, perché lì dentro c'è il
   pulsante che apre l'offcanvas — unico accesso alle categorie sul telefono. */
@media (min-width:1200px){ .ecs-header__nav--home { display:none; } }

/* Sotto xl Hummingbird nasconde l'albero e mostra il pulsante che apre il menu offcanvas:
   la barra non serve più, ma NON va nascosta o sul telefono sparisce l'unico accesso al menu. */
@media (max-width:1199.98px){
  .ecs-header__nav { height:auto; padding:0 10px 4px; border-top:0; }
}
@media (max-width:767px){
  .ecs-header { padding:1rem .6rem; margin-bottom:16px; }
  /* niente larghezza fissa qui: la card segue il contenitore */
  .ecs-header__inner { width:auto; max-width:100%; border-radius:14px; }
  .ecs-header__row { height:auto; padding:14px 16px; flex-wrap:wrap; gap:.7rem 1rem; }
  /* riga 1 = logomark + strumenti, riga 2 = ricerca a tutta larghezza */
  .ecs-header__logo--full { display:none; }
  .ecs-header__logo--mark { display:flex; align-items:center; }
  .ecs-header__logo--mark img { height:30px; width:auto; }
  .ecs-header__search { order:3; flex-basis:100%; }
  .ecs-header__search .ps-searchbar__form { gap:8px; }
  .ecs-header__search .ps-searchbar__input { font-size:16px; }
  .ecs-header__search .js-search-icon { height:28px; }
  .ecs-header__tools { gap:.85rem; margin-left:auto; flex-wrap:nowrap; }
  /* i widget desktop di account/carrello sul piccolo restano vuoti (Hummingbird li sposta) */
  .ecs-header__tools .ecs-tool--account:empty, .ecs-header__tools .ecs-tool--cart:empty { display:none; }
  /* i pill a larghezza fissa qui non servono: si restringono sul contenuto */
  .ecs-tool--lang select.form-select { width:auto; min-width:0; height:32px; font-size:13px; }
  .ecs-country { width:auto; height:32px; gap:0; padding:0 7px; }
  .ecs-country__label { display:none; }
  .ecs-country__arrow { width:18px; height:18px; flex-basis:18px; }
}
/* Tablet (768-991): logo e strumenti non lasciano spazio alla ricerca → va sulla seconda riga a tutta
   larghezza, come sul telefono; gli strumenti si stringono quanto basta perché il badge del carrello resti dentro. */
@media (min-width:768px) and (max-width:991.98px){
  .ecs-header__row { height:auto; flex-wrap:wrap; row-gap:6px; padding:20px 26px 10px; }
  .ecs-header__search { order:3; flex-basis:100%; height:48px; }
  .ecs-header__tools { margin-left:auto; gap:18px; }
}
/* il logomark è solo per il piccolo: sopra i 768px torna il logo esteso */
@media (min-width:768px){
  .ecs-header__logo--mark { display:none; }
  /* i contenitori dove Hummingbird sposta account/carrello sul piccolo: su desktop sono vuoti */
  .ecs-tool--mobile-slot { display:none; }
}
.ecs-tool--mobile-slot:empty { display:none; }

/* ---- Bottoni ---- */
.btn-primary {
  --bs-btn-bg:var(--ecs-accent); --bs-btn-border-color:var(--ecs-accent);
  --bs-btn-hover-bg:var(--ecs-accent-600); --bs-btn-hover-border-color:var(--ecs-accent-600);
  --bs-btn-active-bg:var(--ecs-accent-600); --bs-btn-active-border-color:var(--ecs-accent-600);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  font-weight:600; border-radius:999px; padding-inline:1.4rem;
}
.btn-outline-primary {
  --bs-btn-color:var(--ecs-accent-text); --bs-btn-border-color:var(--ecs-accent);
  --bs-btn-hover-bg:var(--ecs-accent); --bs-btn-hover-border-color:var(--ecs-accent); --bs-btn-hover-color:#fff;
  border-radius:999px;
}
.btn-secondary { --bs-btn-bg:var(--ecs-ink); --bs-btn-border-color:var(--ecs-ink); --bs-btn-hover-bg:var(--ecs-ink-800); border-radius:999px; }
.btn-link { color:var(--ecs-accent-text); }

/* CTA "pill con chevron" alla Figma (sezioni home) */
.products-section-title + a, .featured-products .all-product-link {
  border:1px solid var(--ecs-line); border-radius:999px; padding:.35rem 1rem; color:var(--ecs-ink); font-weight:600;
}

/* ---- Card prodotto: estetica del .com in produzione sul markup di Hummingbird ----
   Valori presi dal CSS compilato del live (theme-348d67294.css):
   card e immagine radius 10px con l'immagine "inset" di 10px · titolo 16px/19.2 peso 700 a
   sinistra · prezzo 20px/24 peso 600 a destra · pulsanti azione 40x40 bordo ink radius 10.
   La struttura Hummingbird resta intatta: restano quick view, recensioni e soprattutto i
   pallini delle COMBINAZIONI (.product-miniature__variants), che il .com non aveva. */
.product-miniature__inner {
  border:0; border-radius:10px; overflow:hidden; background:#fff; height:100%;
  display:flex; flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease;
}
.product-miniature:hover .product-miniature__inner { box-shadow:0 12px 30px rgba(50,50,63,.10); transform:translateY(-2px); }
.product-miniature__image-container { padding:10px; background:#fff; }
.product-miniature__image { border-radius:10px; width:100%; height:auto; }
.product-miniature__bottom { padding:0 10px 10px; display:flex; flex-direction:column; flex:1 1 auto; }
.product-miniature__infos { display:flex; flex-direction:column; flex:1 1 auto; gap:.5rem; }
.product-miniature__title {
  color:var(--ecs-ink); font-size:16px; font-weight:700; line-height:19.2px;
  text-align:left; text-decoration:none; margin:0;
}
.product-miniature__title:hover { color:var(--ecs-accent-text); }
/* prezzo in basso a destra, come nel .com */
.product-miniature__prices { margin-top:auto; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:.15rem; }
.product-miniature__price { font-size:20px; font-weight:600; line-height:24px; color:var(--ecs-ink); }
.product-miniature__discount-price, .product-miniature__regular-price {
  font-size:14px; font-weight:400; line-height:16.8px; color:var(--ecs-muted); text-decoration:line-through;
}
/* combinazioni (funzione di Hummingbird che teniamo): pallini colore discreti */
/* gap 6px, non .35rem (5,6): pallino 18 + 6 = 24 px da centro a centro, l'eccezione di spaziatura di WCAG 2.5.8 */
.product-miniature__variants { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.product-miniature__variants .color {
  width:18px; height:18px; border-radius:50%; border:1px solid var(--ecs-line); display:inline-block;
}
.product-miniature__variants .color:hover { border-color:var(--ecs-ink); }
/* pallino SCELTO (ECS 15/09): da quando il clic cambia la foto restando in elenco serve vedere quale
   colore si sta guardando. Anello staccato di 2px dal pallino, colore inchiostro: si legge anche sui
   colori chiari (giallo, bianco, cromo), dove un bordo semplice sparirebbe. */
.product-miniature__variants .color.is-current { border-color:#fff; box-shadow:0 0 0 2px var(--ecs-ink); }
/* Pallini con texture (img/co/<id>.jpg, per esempio i bicolore metà inox e metà nero): l'immagine
   copre tutto il pallino invece di ripetersi a mattonelle (07/10). */
.color.texture, .color[style*="background-image"] { background-size:cover; background-position:center; background-repeat:no-repeat; }
/* azioni: quadrati bianchi bordo ink 40x40, radius 10 (come #product-actions del live) */
.product-miniature__quickview-button, .product-miniature__quickview-touch,
.product-miniature .btn-square-icon {
  border:1px solid var(--ecs-ink); border-radius:10px; background:#fff; color:var(--ecs-ink);
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; box-shadow:none;
}
.product-miniature__quickview-button:hover, .product-miniature .btn-square-icon:hover {
  border-color:var(--ecs-accent); color:var(--ecs-accent-text); background:#fff;
}

/* ---- Prezzi / flag ---- */
.price, .product-price, .current-price-value, .product-miniature .price { color:var(--ecs-accent-text); font-weight:700; }
.regular-price, .product-miniature .regular-price { color:var(--ecs-muted); font-weight:400; }
.product-flag { background:var(--ecs-accent); color:#fff; border-radius:999px; }
.product-flag.new { background:var(--ecs-ink); }

/* ---- Sezioni home ---- */
.page-content--home > *, .featured-products { padding-block:2rem; }
.products-section-title, h2.products-section-title {
  text-align:center; position:relative; margin-bottom:1.4rem; font-size:clamp(1.5rem,2.4vw,2.1rem);
}
.products-section-title::after {
  content:""; display:block; width:54px; height:3px; background:var(--ecs-accent); border-radius:3px; margin:.55rem auto 0;
}

/* ---- Reassurance ---- */
.block-reassurance { background:var(--ecs-paper); border-radius:var(--bs-border-radius-lg); }
.block-reassurance svg, .block-reassurance i, .block-reassurance use { color:var(--ecs-accent-text); fill:var(--ecs-accent); }

/* pill paese: è un <button> (apre il pannello store) ma deve leggersi come il pill del live */
.ecs-header .ecs-country { cursor:pointer; background:#fff; font-family:inherit; }
.ecs-header .ecs-country:hover { border-color:var(--ecs-accent); color:var(--ecs-accent-text); }

/* ---- Icone custom ECS (importate dal tema di produzione v12ecmxecs) ----
   Sostituiscono le Material Icons di Hummingbird mantenendone classi e comportamento.
   Nel live le icone della barra strumenti sono alte 22px (`#displayTop{height:22px}`). */
.ecs-icon { display:block; width:auto; height:22px; object-fit:contain; }
.ecs-header__tools .ecs-icon, .ecs-header .header-block__icon { width:auto; height:22px; }
.ecs-header .header-block__action-btn { display:inline-flex; align-items:center; }

/* ---- Confronto prodotti ---- */
/* icona in header: stesso apice corallo del carrello; sparisce quando la lista è vuota */
.ecs-header__tools .ecs-tool--compare { position:relative; }
.ecs-tool__badge { position:absolute; top:-5px; right:-10px; color:var(--ecs-accent-text);
  font-size:12px; font-weight:1000; line-height:1; }
.ecs-tool__badge.is-empty { display:none; }
/* pulsante nelle miniature: quadrato bianco bordo ink come le altre azioni della card */
.ecs-compare-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  width:40px; height:40px; padding:0; background:#fff; border:1px solid var(--ecs-ink);
  border-radius:10px; color:var(--ecs-ink); cursor:pointer; }
.ecs-compare-btn:hover { border-color:var(--ecs-accent); color:var(--ecs-accent-text); }
.ecs-compare-btn.is-selected { background:var(--ecs-ink); border-color:var(--ecs-ink); }
.ecs-compare-btn.is-selected img { filter:invert(1) brightness(2); }
.ecs-compare-btn--labelled { width:auto; padding:0 14px; font-size:14px; font-weight:700; }
.ecs-compare-btn img { width:22px; height:22px; }

/* pallino carrello: nel live è un numerino corallo in apice, senza cerchio pieno
   (`#_desktop_cart span.cart-products-count{position:absolute;top:-5px;right:-10px;color:#E64B38;font-weight:1000;line-height:1}`) */
.ecs-header__tools .ps-shoppingcart .header-block { position:relative; }
.ecs-header__tools .header-block__badge {
  position:absolute; top:-5px; right:-10px; left:auto; transform:none;
  background:transparent !important; color:var(--ecs-accent-text) !important;
  font-size:12px; font-weight:1000; line-height:1; padding:0; min-width:0; border-radius:0;
}

/* ---- Footer ECS — allineato al .com in produzione (tema v12ecmxecs) ----
   Riferimenti presi dal CSS compilato del live (theme-348d67294.css):
   #footer{background-color:#E64B38} · #footer .content{gap:80px;padding:80px 0}
   #footer .content *{color:#fff} · h1{30px/36px w400} · section{gap:16px;14px/16.8px w700}
   socials 40x40 fondo bianco bordo #32323F radius 10 · input newsletter radius 10 bordo #32323F.
   NB: in produzione il footer NON ha striscia pagamenti né barra copyright. */
.footer__before { background: var(--ecs-paper); }
.ecs-footer { background: var(--ecs-accent); color:#fff; padding:0;
  /* le utility Bootstrap bg-body-tertiary del widget newsletter assumono il colore del footer */
  --bs-tertiary-bg: #ce4636; --bs-tertiary-bg-rgb: 206,70,54; --bs-body-bg: #ce4636; }
.ecs-footer * { color:#fff; }
/* nel live il footer sta in un `.container` Bootstrap 4 (1140px, padding 15) — più stretto
   della card header (1300px): le tre colonne sono larghe uguali, `#footer .content>div{flex:1}` */
.ecs-footer__inner { width:1140px; max-width:100%; margin:0 auto; padding:0 15px; }
.ecs-footer__cols { display:flex; justify-content:space-between; gap:80px; padding:80px 0; }
.ecs-footer__col { flex:1; min-width:0; display:flex; flex-direction:column; gap:32px; }
/* dentro la colonna i gruppi (link, newsletter, social, indirizzo) sono distanziati 32px,
   le voci fra loro 16px — come `#footer .content>div{gap:32px}` + `#footer section{gap:16px}` */
.ecs-footer__brand { flex:1; }
.ecs-footer__title { font-size:30px; font-weight:400; line-height:36px; margin:0; letter-spacing:0; }
/* la line-height va messa sul <li>: l'altezza della riga la decide il blocco che contiene
   l'<a>, non l'<a> stesso — con il 1.5 di Bootstrap ogni voce cresceva di 7px e il footer
   finiva 100px più lungo del live */
.ecs-footer__links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; line-height:16.8px; }
.ecs-footer__links li { margin:0; line-height:16.8px; }
.ecs-footer a { color:#fff; text-decoration:none; font-size:14px; font-weight:700; line-height:16.8px; }
.ecs-footer a:hover { text-decoration:underline; }
/* indirizzo: nel live i <p> NON ereditano il 14/700 della section, li vince la regola globale
   `p{font-size:.9375rem;font-weight:400}` (15px, tondo) con la line-height fissa del body (16.8px).
   Solo il nome dell'azienda, che è uno <strong>, resta in grassetto. */
.ecs-footer__addr { font-style:normal; }
.ecs-footer__addr p { margin:0 0 16px; font-size:15px; font-weight:400; line-height:16.8px; }
.ecs-footer__addr p:last-child { margin-bottom:0; }
.ecs-footer__addr a { font-size:15px; font-weight:400; line-height:16.8px; }
.ecs-footer__addr strong { font-size:14px; font-weight:700; }

/* Social: quadrati bianchi con bordo ink, come in produzione */
.ecs-footer__socials { display:flex; flex-direction:column; gap:16px; }
/* "Follow us on socials!": nel live è un <a>, quindi 14/700 come le altre voci */
.ecs-footer__socials > span { font-size:14px; font-weight:700; line-height:16.8px; }
.ecs-footer__socials .ecs-footer__socials-row { display:flex; gap:10px; }
.ecs-footer__socials a.ecs-social { height:40px; width:40px; padding:5px; background:#fff; border:solid 1px var(--ecs-ink);
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--ecs-ink); }
.ecs-footer__socials a.ecs-social:hover { background:#fff; }
/* le icone sono gli SVG originali del tema di produzione, serviti come <img>: portano il
   colore ink al loro interno, quindi il wildcard `.ecs-footer *{color:#fff}` non le tocca */
.ecs-footer__socials a.ecs-social img { max-height:100%; max-width:100%; }

/* Newsletter — struttura e misure del live (`#footer .newsletter …`): etichetta breve sopra,
   campo bianco radius 10 bordo ink, bottone busta DENTRO il campo (28px, a 16px dal bordo).
   Il markup arriva dall'override child di ps_emailsubscription: niente fascia, niente disclaimer. */
.ecs-footer__newsletter { display:flex; flex-direction:column; gap:16px; }
.ecs-footer__newsletter .ps-emailsubscription { background:transparent !important; padding:0 !important; display:flex; flex-direction:column; gap:16px; }
.ecs-footer__newsletter label, .ecs-footer__newsletter #block-newsletter-label {
  font-size:14px; font-weight:700; line-height:16.8px; margin:0; padding:0; text-align:left; color:#fff; }
.ecs-footer__newsletter form { position:relative; }
.ecs-footer__newsletter .ecs-newsletter__field { position:relative; width:100%; }
.ecs-footer__newsletter input[type=email], .ecs-footer__newsletter .form-control {
  width:100%; padding:12px 48px 12px 12px; color:var(--ecs-ink); background:#fff;
  border:solid 1px var(--ecs-ink); border-radius:10px; height:auto; box-shadow:none; }
.ecs-footer__newsletter input[type=email]:focus, .ecs-footer__newsletter input[type=email]:focus-visible {
  border:solid 1px var(--ecs-ink); outline:none; box-shadow:none; }
/* focus visibile solo da tastiera (review Codex 07/10): col mouse/dito resta come prima */
.ecs-footer__newsletter input[type=email]:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.ecs-newsletter__submit { position:absolute; right:16px; top:50%; transform:translateY(-50%);
  max-height:28px; max-width:100%; border-radius:50%; cursor:pointer; }
.ecs-footer__newsletter .ecs-newsletter__gdpr { font-size:12px; font-weight:400; line-height:1.5; }

/* Firma "web by ecm" — stessi valori del live (`#credits`): in basso a destra, opacità .5
   che va a 1 al passaggio del mouse, sottolineatura che si apre da sinistra. */
.ecs-footer__inner { position:relative; }
.ecs-footer__credits { position:absolute; right:10px; bottom:5px; opacity:1; transition:opacity .33s ease-out; } /* era .5: sul corallo non leggibile (01/10/2026) */
.ecs-footer__credits:hover { opacity:1; }
.ecs-footer__credits * { font-size:14px; line-height:16.8px; }
.ecs-footer__credits a { color:#fff; padding:5px; display:block; text-decoration:none; font-weight:400; }
.ecs-footer__credits span { color:#fff; }
.ecs-footer__credits a::after { content:""; display:block; width:0; height:1px; background:#fff;
  transition:500ms; position:relative; top:1px; }
.ecs-footer__credits a:hover::after { width:100%; }
.ecs-footer__credits a:hover { text-decoration:none; }

/* Contatti: in produzione stanno nel blocco mobile → qui compaiono sotto i 992px */
.ecs-footer__contacts { display:none; flex-direction:column; gap:18px; padding-bottom:40px; }
.ecs-footer__contacts > div { display:flex; gap:18px; align-items:center; }
.ecs-footer__contacts img { width:24px; height:24px; flex:0 0 24px; }
.ecs-footer__contacts p { margin:0; font-size:15px; font-weight:400; line-height:16.8px; }
.ecs-footer__contacts a { font-size:15px; font-weight:400; }
.ecs-footer__contacts strong { font-size:14px; font-weight:700; }

@media (max-width:991px){
  .ecs-footer__cols { flex-direction:column; gap:32px; padding:40px 0 60px; }
  .ecs-footer__brand { max-width:none; }
  .ecs-footer__contacts { display:flex; }
  .ecs-footer__newsletter { width:100%; } /* era 75%: lasciava un vuoto a destra (review Codex 07/10) */
  .ecs-footer__socials a.ecs-social { height:44px; width:44px; }
  /* link del footer su due colonne (Federico 07/10): il footer da telefono era una lista lunghissima */
  .ecs-footer__links { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
  .ecs-footer__links li a { display:block; }
  .ecs-footer__wdr .ecmwdr-footer-link { margin:0; } /* «Return an item» (modulo ecmwithdrawal) aveva .4rem e usciva di riga */
  .ecs-footer__title { font-size:24px; line-height:30px; }
}

/* ---- Recolor generico del blu Hummingbird residuo (#0b69f6) su elementi comuni ---- */
.pagination .page-item.active .page-link { background:var(--ecs-accent); border-color:var(--ecs-accent); }
.page-link { color:var(--ecs-accent-text); }
.form-control:focus, .form-select:focus { border-color:var(--ecs-accent); box-shadow:0 0 0 .2rem rgba(230,75,56,.15); }
.nav-tabs .nav-link.active { color:var(--ecs-accent-text); border-bottom-color:var(--ecs-accent); }
.text-primary { color:var(--ecs-accent-text) !important; }
.bg-primary { background-color:var(--ecs-accent) !important; }
.dropdown-item.active, .dropdown-item:active { background-color:var(--ecs-accent); }

/* ================================================================================
   Lista prodotti (categoria / ricerca / marca) — misure prese dal .com live
   `.section-head.category h2{font-size:32px;font-weight:500;line-height:38.4px}`
   `.section-head hr{margin-top:10px;margin-bottom:30px}`
   ================================================================================ */
.ecs-listing { --ecs-cat-color: var(--ecs-accent); --ecs-cat-ink:#B63B2C; --ecs-cat-aa:#CE4636; }
.ecs-listing__head {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
}
.ecs-listing__head #js-product-list-header { flex:1 1 auto; min-width:0; }
/* ⚠️ Il 32px veniva da `mobile.css` del .com — cioè da dentro `@media (max-width:992px)` — ed
   era finito applicato anche sul desktop. In produzione la pagina categoria usa lo STESSO
   `.section-head` della home (`<h2 class="category-header">`), quindi desktop 60/72 e 32/38.4
   solo sotto i 992px. Vedi il componente `.ecs-sec-head` più in alto. */
.ecs-listing .page-title-section {
  font-size:60px; font-weight:500; line-height:72px; margin:0;
}
.ecs-listing__rule { margin:10px 0 30px; border:0; border-top:1px solid rgba(50,50,63,.2); opacity:1; }

/* comandi: ordinamento + "mostra tutti i filtri", come i pill del live */
.ecs-listing__controls { flex:0 0 auto; }
.ecs-listing__controls .products__selection { display:flex; align-items:center; gap:12px; }
.ecs-listing__controls .products__sort { display:flex; align-items:center; gap:12px; }
.ecs-listing__controls .products__sort-label { display:none; }
.ecs-listing__controls .products__sort-dropdown-button,
.ecs-listing__controls .products__filter-button {
  display:inline-flex; align-items:center; gap:10px; white-space:normal; text-align:left;
  border-radius:10px; padding:10px 20px; font-size:14px; font-weight:700; line-height:16.8px;
}
/* il filtro è il pill chiaro, l'ordinamento quello scuro (come in produzione) */
.ecs-listing__controls .products__filter-button {
  background:#fff; color:var(--ecs-ink); border:1px solid var(--ecs-ink);
}
.ecs-listing__controls .products__filter-button:hover {
  background:var(--ecs-ink); color:#fff; border-color:var(--ecs-ink);
}
.ecs-listing__controls .products__sort-dropdown-button {
  background:var(--ecs-ink); color:#fff; border:1px solid var(--ecs-ink); max-width:230px;
}
.ecs-listing__controls .products__sort-dropdown-button:hover,
.ecs-listing__controls .products__sort-dropdown-button:focus { background:#000; color:#fff; }
.ecs-listing__controls .material-icons { font-size:20px; }

/* sottocategorie: pill nel colore della categoria madre, come `#search_filters .facet` del live */
.ecs-listing .subcategory { margin:0 0 30px; }
.ecs-listing .subcategory__list { display:flex; flex-wrap:wrap; gap:16px; }
.ecs-listing .subcategory__link {
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:56px; padding:10px 24px; border-radius:10px; text-decoration:none;
  font-size:14px; font-weight:700; line-height:16.8px; text-transform:capitalize;
  color:var(--ecs-cat-ink, var(--ecs-cat-color)); background:var(--ecs-cat-tint, rgba(230,75,56,.10));
}
.ecs-listing .subcategory__link:hover { color:var(--ecs-cat-pill-ink, #fff); background:var(--ecs-cat-pill, var(--ecs-cat-aa, var(--ecs-cat-color))); }
/* stesso colore del menu e delle tile di home */
.ecs-listing--cat3  { --ecs-cat-color:#E64B38; --ecs-cat-tint:rgba(230,75,56,.10); --ecs-cat-ink:#B63B2C; --ecs-cat-aa:#CE4636; }
.ecs-listing--cat8  { --ecs-cat-color:#BEB35F; --ecs-cat-tint:rgba(190,179,95,.14); --ecs-cat-ink:#6F6938; --ecs-cat-pill:#BEB35F; --ecs-cat-pill-ink:#32323F; }
.ecs-listing--cat26 { --ecs-cat-color:#32323F; --ecs-cat-tint:rgba(50,50,63,.08); --ecs-cat-ink:#32323F; --ecs-cat-aa:#32323F; }
.ecs-listing--cat13 { --ecs-cat-color:#5F8B95; --ecs-cat-tint:rgba(95,139,149,.12); --ecs-cat-ink:#496B73; --ecs-cat-aa:#557B84; }
.ecs-listing--cat25 { --ecs-cat-color:#BA7D63; --ecs-cat-tint:rgba(186,125,99,.12); --ecs-cat-ink:#885B48; --ecs-cat-aa:#996956; }
.ecs-listing--cat24 { --ecs-cat-color:#8A8086; --ecs-cat-tint:rgba(138,128,134,.12); --ecs-cat-ink:#6B6368; --ecs-cat-aa:#7B7279; }
.ecs-listing--cat36 { --ecs-cat-color:#CB7FB6; --ecs-cat-tint:rgba(203,127,182,.12); --ecs-cat-ink:#8A567C; --ecs-cat-aa:#99638C; }
.ecs-listing--cat27 { --ecs-cat-color:#5BAC83; --ecs-cat-tint:rgba(91,172,131,.12); --ecs-cat-ink:#3D7257; --ecs-cat-pill:#5BAC83; --ecs-cat-pill-ink:#32323F; }

/* blocco SEO in fondo: grigio piccolo, come in produzione */
.ecs-listing__seo { margin-top:40px; color:var(--ecs-muted); font-size:13px; line-height:1.6; }
.ecs-listing__seo h2, .ecs-listing__seo h3 { font-size:15px; font-weight:600; color:var(--ecs-muted); margin-top:1.2em; }
.ecs-listing__seo a { color:var(--ecs-muted); text-decoration:underline; }
.ecs-listing__seo p, .ecs-listing__seo li { font-size:13px; color:var(--ecs-muted); }

/* ---- Card prodotto ---- */
/* live: `.thumbnail-container{border-radius:10px;background:#fff}`, immagine con margine 10px e
   raggio 10px, titolo 16/700, prezzo 20/600 a destra, azioni in fondo alla card. */
.product-miniature__inner {
  height:100%; display:flex; flex-direction:column;
  background:#fff; border-radius:10px; padding:10px; border:0;
}
.product-miniature__top { border-radius:10px; overflow:hidden; }
.product-miniature__bottom { display:flex; flex-direction:column; flex:1 1 auto; padding:10px 0 0; }
.product-miniature__infos { flex:1 1 auto; }
.product-miniature__title {
  display:block; font-size:16px; font-weight:700; line-height:19.2px; color:var(--ecs-ink);
  text-decoration:none; text-transform:capitalize; margin-bottom:10px;
}
.product-miniature__title:hover { color:var(--ecs-accent-text); }
.product-miniature__prices { text-align:right; }
.product-miniature__price { font-size:20px; font-weight:600; line-height:24px; color:var(--ecs-ink); }
.product-miniature__regular-price { font-size:14px; color:var(--ecs-muted); text-decoration:line-through; }
/* riga azioni: "confronta" a sinistra, carrello a destra */
.product-miniature__actions { display:flex; align-items:stretch; gap:10px; margin-top:12px; }
.product-miniature__actions .ecs-compare-btn { flex:1 1 auto; }
.product-miniature__form { flex:0 0 auto; display:flex; align-items:stretch; }
.product-miniature__form .quantity-button { display:none; }
.product-miniature__add {
  border-radius:10px; width:44px; min-width:44px; height:100%; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.product-miniature__add-text { display:none; }
.product-miniature__details { border-radius:10px; font-size:14px; font-weight:700; }
/* la vista rapida non esiste sul .com live: la card lì ha il cuore della wishlist */
.product-miniature__quickview-button, .product-miniature__quickview-touch { display:none !important; }

/* ---- Barra filtri (un pill per filtro, pannello a tendina) ---- */
.ecs-facets { margin:0 0 24px; }

/* sottocategorie: pill colorate nel colore della categoria madre, come sul live.
   Qui non sono link di navigazione ma il filtro "Categorie": si sommano fra loro. */
.ecs-facets__categories { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 24px; }
.ecs-facets__category {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  min-height:56px; padding:10px 24px; border-radius:10px; text-decoration:none;
  font-size:14px; font-weight:700; line-height:16.8px; text-transform:capitalize;
  color:var(--ecs-cat-ink, var(--ecs-cat-color, var(--ecs-accent-text)));
  background:var(--ecs-cat-tint, rgba(230,75,56,.10));
  border:1px solid transparent;
}
.ecs-facets__category:hover { color:var(--ecs-cat-pill-ink, #fff); background:var(--ecs-cat-pill, var(--ecs-cat-aa, var(--ecs-cat-color, var(--ecs-accent)))); }
.ecs-facets__category.is-active {
  color:var(--ecs-cat-pill-ink, #fff); background:var(--ecs-cat-pill, var(--ecs-cat-aa, var(--ecs-cat-color, var(--ecs-accent))));
  border-color:var(--ecs-cat-color, var(--ecs-accent));
}
.ecs-facets__category-count { font-weight:400; opacity:.75; }
.ecs-facets__bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.ecs-facet__pill {
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px 0 18px; border-radius:10px;
  border:1px solid var(--ecs-ink); background:#fff; color:var(--ecs-ink);
  font-size:14px; font-weight:700; line-height:16.8px; white-space:nowrap;
}
.ecs-facet__pill:hover { border-color:var(--ecs-accent); color:var(--ecs-accent-text); }
.ecs-facet__pill.is-active { background:var(--ecs-ink); border-color:var(--ecs-ink); color:#fff; }
.ecs-facet__pill.is-active:hover { background:#000; color:#fff; }
.ecs-facet__count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--ecs-accent); color:#fff; font-size:12px; font-weight:700;
}
.ecs-facet__arrow { font-size:20px; transition:transform .15s ease; }
.ecs-facet__pill[aria-expanded="true"] .ecs-facet__arrow { transform:rotate(180deg); }

/* pannello: al posto della finestra modale del live — la pagina resta visibile dietro */
.ecs-facet__panel {
  min-width:280px; max-width:min(420px, 92vw); max-height:60vh; overflow-y:auto;
  padding:14px 16px; border:0; border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.14);
}
.ecs-facet__panel .accordion-body { list-style:none; margin:0; padding:0; }
.ecs-facet__panel li { list-style:none; }
.ecs-facet__panel .search-filters__item { padding:5px 0; }
.ecs-facet__panel .search-filters__link { color:var(--ecs-ink); text-decoration:none; font-size:15px; }
.ecs-facet__panel .search-filters__link:hover { color:var(--ecs-accent-text); }
.ecs-facet__panel .search-filters__magnitude { color:var(--ecs-muted); font-size:13px; }
.ecs-facet__panel .form-check-input:checked { background-color:var(--ecs-accent); border-color:var(--ecs-accent); }
/* cursore del prezzo: gli serve aria ai lati, altrimenti le maniglie escono dal pannello */
.ecs-facet__panel .search-filters__slider-container { padding:14px 10px 4px; }

.ecs-facets__clear {
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  border:0; background:transparent; color:var(--ecs-accent-text);
  font-size:14px; font-weight:700; text-decoration:underline;
}
.ecs-facets__clear .material-icons { font-size:18px; }

/* filtri attivi sotto la barra, come chip removibili */
.ecs-listing #js-active-search-filters { margin:0 0 20px; }

.ecs-facet__sheet-head { display:none; }

@media (max-width:767px){
  /* la barra scorre in orizzontale invece di andare a capo per quattro righe */
  .ecs-facets__bar { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ecs-facets__bar::-webkit-scrollbar { display:none; }
  .ecs-facet { flex:0 0 auto; }
  /* Da telefono il pannello sale dal basso (Federico 07/10: «Brand non esce fuori nulla»). Ancorato al pill restava
     dentro la barra che scorre di lato, che lo tagliava a zero. `fixed` lo porta fuori dal taglio; gli !important
     battono la posizione che Popper scrive inline. L'ombra larga fa da velo sulla pagina. */
  .ecs-facet__panel.show {
    position:fixed !important; inset:auto 0 0 0 !important; transform:none !important; margin:0 !important;
    width:100%; min-width:0; max-width:none; max-height:78vh; z-index:1065;
    padding:0 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius:20px 20px 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,.18), 0 0 0 100vmax rgba(50,50,63,.45);
    animation:ecs-sheet-up .22s ease-out;
  }
  @media (prefers-reduced-motion:reduce){ .ecs-facet__panel.show { animation:none; } }
  body:has(.ecs-facet__panel.show) { overflow:hidden; }
  .ecs-facet__sheet-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:1; background:#fff; margin:0 -20px 4px; padding:18px 12px 12px 20px;
    border-bottom:1px solid var(--ecs-line, #e3e1dd);
  }
  .ecs-facet__sheet-head::before {
    content:""; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px;
    border-radius:2px; background:#d4d1cc;
  }
  .ecs-facet__sheet-title { font-size:20px; font-weight:700; line-height:24px; color:var(--ecs-ink); }
  .ecs-facet__close {
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px;
    border:0; border-radius:50%; background:transparent; color:var(--ecs-ink);
  }
  .ecs-facet__close:focus-visible { outline:2px solid var(--ecs-ink); outline-offset:-2px; }
  /* voci a 44 px con il filo fra l'una e l'altra */
  .ecs-facet__panel .accordion-body > li + li { border-top:1px solid var(--ecs-line, #eeece9); }
  .ecs-facet__panel .search-filters__item { padding:0; }
  .ecs-facet__panel .search-filters__form-check { display:flex; align-items:center; gap:12px; min-height:48px; margin:0; padding:0; }
  .ecs-facet__panel .search-filters__form-check .form-check-input { float:none; margin:0; width:20px; height:20px; flex:0 0 20px; border:1.5px solid var(--ecs-ink); border-radius:5px; }
  .ecs-facet__panel .search-filters__form-label { flex:1; display:flex; align-items:center; gap:10px; min-height:48px; margin:0; font-size:16px; }
  .ecs-facet__panel .search-filters__link { flex:1; display:flex; align-items:center; gap:6px; min-height:48px; font-size:16px; }
  .ecs-facet__panel .search-filters__magnitude { margin-left:auto; }
}
/* `translate` e non `transform`: il transform è bloccato a none per battere Popper */
@keyframes ecs-sheet-up { from { translate:0 24px; opacity:.4; } to { translate:0 0; opacity:1; } }

@media (max-width:767px){
  .ecs-listing .page-title-section { font-size:32px; line-height:38.4px; }
  .ecs-listing__controls .products__selection { flex-wrap:wrap; }
  .ecs-listing .subcategory__list { gap:10px; }
  .ecs-listing .subcategory__link { min-height:44px; padding:8px 14px; font-size:13px; }
}

/* ================================================================================
   Blog (ets_blog) — vestizione ECS
   In produzione il blog era vestito da 28 template sovrascritti nel tema. Qui girano i
   template di serie del modulo e la vestizione è tutta qui: colori, raggi e pesi del tema,
   così il blog non stona col resto del sito e resta aggiornabile senza toccare i template.
   ================================================================================ */
.ets-blog-wrapper, .ets_blog_sidebar { color:var(--ecs-ink); }

/* elenco articoli: card bianca, immagine a sinistra */
.ets-blog-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; }
.ets-blog-list > li { list-style:none; }
.ets-blog-list .post-wrapper {
  display:flex; gap:24px; align-items:flex-start;
  background:#fff; border-radius:15px; padding:16px;
  box-shadow:0 4px 40px 0 rgba(0,0,0,.06);
}
.ets-blog-list .ets_item_img { flex:0 0 260px; max-width:260px; display:block; }
.ets-blog-list .ets_item_img img { width:100%; aspect-ratio:360/204; object-fit:cover; height:auto; border-radius:10px; display:block; }
.ets-blog-wrapper-content { flex:1 1 auto; min-width:0; }

/* ECM 15/10/2026: qualunque immagine venga caricata come "Post thumbnail" (sidebar "ultimi
   articoli", correlati), il box la ritaglia invece di stirarla se non è esattamente 360x204 -
   prima solo l'elenco articoli e la home (.ecs-bloghome) erano protetti, non la sidebar del
   post singolo (il box "di sinistra" nel layout a griglia qui sopra). */
.ets_blog_sidebar .ets_item_img img,
.ets-blog-related-posts .ets_item_img img {
  aspect-ratio:360/204; object-fit:cover; width:100%; height:auto;
}

/* titoli: come il resto del sito, non tutto maiuscolo */
.ets-blog-wrapper .ets_title_block,
.ets_blog_sidebar .ets_title_block {
  font-size:20px; font-weight:600; line-height:24px; color:var(--ecs-ink);
  text-transform:none; text-decoration:none; display:inline-block; margin-bottom:10px;
}
.ets-blog-wrapper .ets_title_block:hover { color:var(--ecs-accent-text); }
.ets_blog_sidebar .ets_title_block { font-size:16px; font-weight:700; line-height:19.2px; }
.blog_description, .ets-blog-latest-post-content { font-size:15px; line-height:1.6; color:var(--ecs-ink); }
.blog_date, .blog_date-add, .ets-blog-sidear-post-meta { font-size:13px; color:var(--ecs-muted); }
.ets-blog-sidear-post-meta a { color:var(--ecs-muted); }
.ets-blog-sidear-post-meta a:hover { color:var(--ecs-accent-text); }

/* "Read more" come link accentato */
.ets-blog-wrapper a.readmore, .ets-blog-wrapper .readmore a, .ets-blog-wrapper a[class*="readmore"] {
  font-style:normal; font-weight:700; font-size:14px; color:var(--ecs-accent-text); text-decoration:none;
}

/* pulsanti del modulo: dal turchese di serie al rosso ECS.
   ⚠️ Il colore sta sull'`<a>` interno, non sul contenitore `.blog_view_all_button`: colorando
   solo il contenitore restava un pulsante turchese dentro un riquadro rosso. */
.blog_view_all_button, .blog_view_all { background:transparent !important; padding:0 !important; }
.blog_view_all_button > a,
.blog_view_all > a,
.ets-blog-wrapper .btn-primary,
.ets_blog_sidebar .btn-primary {
  display:inline-block;
  background:var(--ecs-accent) !important; border-color:var(--ecs-accent) !important; color:#fff !important;
  border-radius:10px !important; font-size:14px; font-weight:700; text-transform:none;
  padding:10px 20px !important; box-shadow:none !important; text-decoration:none;
}
.blog_view_all_button > a:hover, .blog_view_all > a:hover { filter:brightness(.92); color:#fff !important; }

/* blocchi laterali: stesse card bianche del resto del tema */
.ets_blog_sidebar .ets_block_categories,
.ets_blog_sidebar .ets_block_latest,
.ets_blog_sidebar .ets_block_search,
.ets_blog_sidebar .ets_block_archive {
  background:#fff; border-radius:15px; padding:20px; margin-bottom:24px;
  box-shadow:0 4px 40px 0 rgba(0,0,0,.06);
}
.ets_blog_sidebar ul { list-style:none; margin:0; padding:0; }
.ets_blog_sidebar li a { color:var(--ecs-ink); text-decoration:none; font-size:15px; }
.ets_blog_sidebar li a:hover { color:var(--ecs-accent-text); }
.ets_blog_sidebar .form-control { border-radius:10px; }

/* Colonne del blog (01/10/2026). Il modulo fa flottare i blocchi laterali (`#left-column .block{float:left}`) dentro
   colonne `col-*` senza `.row`: la colonna restava alta 0, l'elenco articoli si stringeva accanto ai float (a 390px
   largo ZERO, invisibile; a 1440 fermo a 1029px) e nella pagina dell'articolo il testo finiva sotto il piè di pagina.
   Griglia esplicita: laterale a sinistra su desktop, sotto il contenuto da 991px in giù. */
#ets_blog_page #center-column { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:30px; align-items:start; }
#ets_blog_page #center-column > #left-column,
#ets_blog_page #center-column > #content-wrapper { width:auto; max-width:none; padding:0; margin:0; float:none; }
#ets_blog_page #left-column .block { float:none; width:auto; }
@media (max-width:991.98px){
  #ets_blog_page #center-column { grid-template-columns:minmax(0,1fr); }
  #ets_blog_page #center-column > #left-column { order:2; }
}

/* paginazione */
.blog-paggination .active a, .blog-paggination .current a { background:var(--ecs-accent); color:#fff; }

@media (max-width:767px){
  .ets-blog-list .post-wrapper { flex-direction:column; gap:14px; }
  .ets-blog-list .ets_item_img { flex-basis:auto; max-width:100%; }
}

/* ---- Micro ---- */
::selection { background:var(--ecs-accent); color:#fff; }

/* ==========================================================================
   SCHEDA PRODOTTO — tavola Figma `product_page_desktop` (3-1625)
   Titolo a tutta larghezza con la marca a destra, due colonne sotto,
   accordion dentro la colonna destra. Selettori reali di Hummingbird.
   ========================================================================== */

.ecs-product {
  width: 100%;                       /* la pagina prodotto è un grid-item: senza questo
                                        la sezione si stringe sul contenuto minimo */
  max-width: var(--ecs-content-max);
  margin: 0 auto;
  padding: 0 1rem 4.5rem;
}

/* ------------------------------------------------------------- testata */
.ecs-product__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--ecs-line);
  margin-bottom: 1.9rem;
}

.ecs-product__title {
  margin: 0;
  max-width: 62%;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 400;                  /* nella tavola il titolo è leggero, non 700 */
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ecs-ink);
  text-transform: none;
}

.ecs-product__brand {
  padding-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ecs-muted);
  white-space: nowrap;
}

.ecs-product__brand a { color: inherit; text-decoration: none; text-transform: capitalize; }
.ecs-product__brand a:hover { color: var(--ecs-ink); }

/* --------------------------------------------------------- due colonne */
.ecs-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
}

/* ------------------------------------------------- riga badge + Trustpilot */
.ecs-product__flagsrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2rem;
  margin-bottom: 0.85rem;
}

.ecs-product__flags { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.ecs-flag {
  display: inline-block;
  padding: 0.34rem 0.9rem;
  border-radius: 999px;
  background: var(--ecs-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.ecs-flag--discount, .ecs-flag--on-sale { background: var(--ecs-accent); }

.ecs-product__tp {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--ecs-ink);
}
.ecs-product__tp-stars { color: #00b67a; font-size: 1.05rem; letter-spacing: 2px; }
.ecs-product__tp-link { font-size: 0.8125rem; text-decoration: underline; }

/* ------------------------------------------------------ immagini prodotto */
.ecs-product__left .product__images { background: transparent; }

.ecs-product__left .product__carousel {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

/* le miniature sono una <ul>: il grid va sulla lista, non sul contenitore */
.ecs-product__left .product__thumbnails-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.ecs-product__left .product__thumbnails-item { margin: 0; }
.ecs-product__left .product__thumbnail {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.ecs-product__left .product__thumbnail-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.ecs-product__left .product__thumbnail.active,
.ecs-product__left .product__thumbnail[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--ecs-ink);
}
.ecs-product__left .carousel-indicators { display: none; }

/* ------------------------------------------- codice riferimento e nota paese */
.ecs-product__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  font-size: 0.9375rem;
}

.ecs-product__reflabel { color: var(--ecs-ink); }

.ecs-product__ref {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  background: #e6e4e0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ecs-product__notice { text-decoration: underline; color: var(--ecs-ink); }

/* -------------------------------------------------------------- varianti */
.ecs-product__right .product__variants { margin-bottom: 1.1rem; }

.ecs-product__right .product-variant {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
}

.ecs-product__right .product-variant__legend {
  display: inline;
  margin: 0 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ecs-ink);
}
.ecs-product__right .product-variant__legend::after { content: "."; }

.ecs-product__right .product-variant__selected {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ecs-muted);
}

.ecs-product__right .product-variant__attributes { margin-top: 0.6rem; }

/* radio resi come pill, come nella tavola */
.ecs-product__right .product-variant__radios { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.ecs-product__right .product-variant__radio {
  padding: 0;
  margin: 0;
  min-height: 0;
}
.ecs-product__right .product-variant__radio .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.ecs-product__right .product-variant__radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.2rem;
  padding: 0.62rem 1.1rem;
  border: 1px solid #cfccc7;
  border-radius: 8px;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.ecs-product__right .product-variant__radio label:hover { border-color: var(--ecs-ink); }
.ecs-product__right .product-variant__radio .form-check-input:checked + label {
  border-color: var(--ecs-ink);
  background: #fff;
  font-weight: 600;
}
.ecs-product__right .product-variant__radio .form-check-input:focus-visible + label {
  outline: 2px solid var(--ecs-accent);
  outline-offset: 2px;
}

/* pallini colore */
.ecs-product__right .product-variant__colors { display: flex; gap: 0.7rem; }
.ecs-product__right .input-color__label .color {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #cfccc7;
  display: block;
}
.ecs-product__right .input-color__label--active .color,
.ecs-product__right .input-color__label .color.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ecs-ink);
}

/* link "Non sai che caratteristiche scegliere?" */
.ecs-product__help {
  display: inline-block;
  margin: 0.2rem 0 1.2rem;
  font-weight: 700;
  color: var(--ecs-ink);
  text-decoration: underline;
}

/* ------------------------------------------------- prezzo + aggiungi al carrello */
.ecs-product__buyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 0.4rem;
}

.ecs-product__price .product__price,
.ecs-product__price .current-price-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ecs-ink);
}
.ecs-product__price .product__prices { margin: 0; }

.ecs-product__cart .product__add-to-cart-container { margin: 0; }
.ecs-product__cart .product__actions-qty-add { gap: 0.6rem; align-items: center; }

.ecs-product__cart .product__add-to-cart-button {
  border-radius: 8px;
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  background: var(--ecs-accent);
  border-color: var(--ecs-accent);
}
.ecs-product__cart .product__add-to-cart-button:hover {
  background: var(--ecs-accent-600);
  border-color: var(--ecs-accent-600);
}

/* la disponibilità va sotto la riga, non dentro */
.ecs-product__right .product__availability { margin-top: 0.8rem; font-size: 0.9375rem; }

/* ------------------------------------------------------------- accordion */
.ecs-accordion { margin-top: 2rem; --bs-accordion-border-color: var(--ecs-line); }

.ecs-accordion .accordion-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ecs-line);
}
.ecs-accordion .accordion-item:last-child { border-bottom: 1px solid var(--ecs-line); }

.ecs-accordion .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 1.05rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ecs-ink);
}
.ecs-accordion .accordion-button:not(.collapsed) { color: var(--ecs-ink); background: transparent; }
.ecs-accordion .accordion-button:focus { box-shadow: none; }

/* la freccia di serie sparisce: nella tavola è un chevron dentro un cerchio */
.ecs-accordion .accordion-button::after {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid #cfccc7;
  border-radius: 999px;
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2332323f' stroke-width='2'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  transition: transform .2s ease;
}
.ecs-accordion .accordion-button:not(.collapsed)::after { transform: rotate(90deg); }

.ecs-accordion .accordion-body {
  padding: 0 0 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a4a55;
}
.ecs-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* scheda tecnica a due colonne */
.ecs-specs { margin: 0; }
.ecs-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #efedea;
}
.ecs-specs__row:last-child { border-bottom: 0; }
.ecs-specs__name { margin: 0; font-weight: 600; color: var(--ecs-ink); }
.ecs-specs__value { margin: 0; color: #4a4a55; }

/* --------------------------------------------------------------- video */
.ecs-video { margin: 0; }
.ecs-video video, .ecs-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  display: block;
  background: #000;
}

/* segnaposto mostrato finché il consenso marketing non c'è: un video di YouTube
   installa cookie di profilazione, quindi non si carica prima del consenso */
.ecs-video__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #e6e4e0;
  text-align: center;
  padding: 1.5rem;
}
.ecs-video__consent p { margin: 0; font-size: 0.9375rem; color: #4a4a55; max-width: 34ch; }

/* --------------------------------------------------- consigli di montaggio */
.ecs-faq { display: flex; flex-direction: column; gap: 1rem; }
.ecs-faq__q { margin: 0 0 0.2rem; font-weight: 700; color: var(--ecs-ink); }
.ecs-faq__a { margin: 0; }

/* ------------------------------------------ contenuto della confezione (prova ECS 31) */
.ecs-package__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ecs-package__list li { display: flex; gap: 0.5rem; align-items: baseline; line-height: 1.4; }
.ecs-package__qty { flex: 0 0 2.4em; font-weight: 700; color: var(--ecs-ink); font-variant-numeric: tabular-nums; }
.ecs-package__note { margin: 0.75rem 0 0; font-size: 0.875rem; color: #6b6b75; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
  .ecs-product__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ecs-product__head { flex-direction: column; gap: 0.4rem; padding-top: 1.5rem; }
  .ecs-product__title { max-width: 100%; }
  .ecs-product__brand { padding-top: 0; font-size: 1.25rem; }
}

@media (max-width: 575.98px) {
  .ecs-product__buyrow { flex-direction: column; align-items: stretch; }
  .ecs-product__cart .product__add-to-cart-button { width: 100%; justify-content: center; }
}

/* ---- scheda prodotto: correzioni di equilibrio e leggibilità (2026-07-22) ---- */

/* La colonna delle immagini resta visibile mentre si legge l'accordion: senza questo,
   con una descrizione lunga la metà sinistra della pagina resta vuota per due schermate. */
@media (min-width: 992px) {
  .ecs-product__left { position: sticky; top: 1.5rem; }
}

/* miniatura attiva: filo scuro come nella tavola, non il rosso di serie */
.ecs-product__left .product__thumbnail.active,
.ecs-product__left .product__thumbnail[aria-current="true"],
.ecs-product__left .js-thumb-selected {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px var(--ecs-ink) !important;
}
.ecs-product__left .product__thumbnail:focus-visible { box-shadow: 0 0 0 2px var(--ecs-accent) !important; }

/* riga strumenti sotto l'immagine: confronta (e in futuro preferiti) come icone */
.ecs-product__tools {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.ecs-product__tools .product__additional-info,
.ecs-product__tools .product-additional-info { display: flex; gap: 0.6rem; margin: 0; }
.ecs-product__tools .btn,
.ecs-product__tools button {
  min-width: 46px;
  height: 46px;
  padding: 0 0.9rem;
  border: 1px solid #cfccc7;
  border-radius: 10px;
  background: #fff;
  color: var(--ecs-ink);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ecs-product__tools .btn:hover { border-color: var(--ecs-ink); background: #fff; }

/* descrizione lunga: si accorcia e si apre col "leggi tutto" */
.ecs-desc {
  position: relative;
  max-height: 19rem;
  overflow: hidden;
  transition: max-height .25s ease;
}
.ecs-desc::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5rem;
  background: linear-gradient(to bottom, rgba(242,241,239,0), var(--ecs-paper));
  pointer-events: none;
}
.ecs-desc__toggle:checked ~ .ecs-desc { max-height: none; }
.ecs-desc__toggle:checked ~ .ecs-desc::after { display: none; }

.ecs-desc__more {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--ecs-ink);
  text-decoration: underline;
  cursor: pointer;
}
.ecs-desc__more .ecs-desc__more-close { display: none; }
.ecs-desc__toggle:checked ~ .ecs-desc__more .ecs-desc__more-open { display: none; }
.ecs-desc__toggle:checked ~ .ecs-desc__more .ecs-desc__more-close { display: inline; }

/* disponibilità: sotto la riga d'acquisto, non accanto al prezzo */
.ecs-product__cart .product__add-to-cart-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.ecs-product__cart .product__actions-qty-add { order: 1; }
.ecs-product__cart .product__availability { order: 2; margin: 0; text-align: right; }

/* accessori e prodotti correlati: stessa larghezza del resto della pagina */
.product-accessories, .featured-products, .product__bottom { max-width: var(--ecs-content-max); margin-left: auto; margin-right: auto; }

/* ======================= rifiniture 2026-07-22 (seconda tornata) ======================= */

/* --- briciole di pane: stesso fondo della pagina, non una fascia bianca --- */
.breadcrumb__wrapper,
.breadcrumb__wrapper .breadcrumb,
.page-header--breadcrumb { background: transparent !important; }

/* --- scheda prodotto: il filo passa SOTTO la marca e taglia il titolo in due righe ---
   Nella tavola la riga orizzontale sta all'altezza della prima riga del titolo: il titolo
   continua sotto. Si ottiene con un filo disegnato all'altezza esatta della prima riga
   (padding + una interlinea), non con un bordo inferiore. */
.ecs-product__head {
  --ecs-ptitle: clamp(2rem, 3.6vw, 3.1rem);
  --ecs-ptitle-lh: 1.14;
  --ecs-phead-pad: 1rem;
  position: relative;
  border-bottom: 0;
  padding-bottom: 1.4rem;
}
.ecs-product__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ecs-phead-pad) + var(--ecs-ptitle-lh) * var(--ecs-ptitle));
  border-top: 1px solid var(--ecs-line);
  z-index: 0;
}
.ecs-product__title, .ecs-product__brand { position: relative; z-index: 1; }
.ecs-product__title { font-size: var(--ecs-ptitle); line-height: var(--ecs-ptitle-lh); }

/* --- blog in fondo alla home, boxato come nel .com --- */
.ecs-bloghome { width: 100%; max-width: var(--ecs-content-max); margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }
.ecs-bloghome__inner {
  max-width: var(--ecs-content-max);
  margin: 0 auto;
  /* niente riquadro bianco: nella tavola V12 e in produzione le sezioni della home stanno
     direttamente sul fondo della pagina. Il box era una mia interpretazione di "boxato". */
}
/* La testata del blog usa .ecs-sec-head come tutte le altre sezioni: qui non si ridichiara
   nulla, e sta FUORI dal riquadro bianco così resta allineata alle altre testate. */

/* Le schede sono dentro un carosello del modulo (owl): NON va trasformato in grid, o il
   carosello sbaglia i calcoli e le colonne si schiacciano. Si lascia lavorare lui e si
   interviene solo su spaziature e colori. Il pulsante del modulo si nasconde: il "vedi tutti
   i post" e' gia' nel cappello, uno solo basta. */
.ecs-bloghome .block_content { margin: 0; }
.ecs-bloghome .owl-carousel .owl-item { padding: 0 .6rem; }
.ecs-bloghome .block_content > .btn,
.ecs-bloghome .ets_blog_view_all,
.ecs-bloghome a.btn-primary { display: none !important; }
.ecs-bloghome .owl-nav button { color: var(--ecs-ink) !important; }
.ecs-bloghome .ets_item_img { display: block; overflow: hidden; border-radius: 10px; }
.ecs-bloghome .ets_item_img img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.ecs-bloghome .ets_item_img:hover img { transform: scale(1.04); }
.ecs-bloghome .ets_title_block {
  display: block; margin: 0.7rem 0 0.35rem;
  font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ecs-ink); text-decoration: none;
}
.ecs-bloghome .ets_title_block:hover { color: var(--ecs-accent-text); }
.ecs-bloghome .blog_description { font-size: 0.875rem; color: #4a4a55; line-height: 1.5; }
.ecs-bloghome .blog_date-add, .ecs-bloghome .ets-blog-sidear-post-meta { font-size: 0.8125rem; color: var(--ecs-muted); }
.ecs-bloghome .read_more { font-weight: 700; color: var(--ecs-accent-text); text-decoration: none; }
.ecs-bloghome .read_more:hover { text-decoration: underline; }

@media (max-width: 991.98px) { .ecs-bloghome .block_content { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ecs-bloghome .block_content { grid-template-columns: minmax(0, 1fr); } }

/* Blog della home da telefono: una riga che scorre col dito come «ECS selection» (Federico 07/10).
   Il carosello owl del modulo da telefono non parte: lo script in `latest_posts_block.tpl` toglie
   `ets_block_slider` e mette `ecs-blog-native` prima che il modulo lo cerchi. Così restano un
   <ul> e i suoi <li> veri, e lo scorrimento è quello del telefono (scroll-snap), non un trascinamento
   simulato. Tolti anche il riquadro bianco del modulo, la seconda data e il suo «View all posts»:
   il pulsante c'è già nella testata. */
.ecs-bloghome .ecs-blog-native { background:transparent; padding:0; margin:0; }
/* da telefono sopra il blog basta lo spazio della griglia della home */
@media (max-width: 767.98px) { .ecs-bloghome { padding-top:0; } }
.ecs-bloghome .ecs-blog-native .block_content { display:block; width:auto; margin:0; }
.ecs-bloghome .ecs-blog-native ul {
  display:flex; flex-wrap:nowrap; gap:12px; float:none; width:auto; max-width:none; list-style:none; /* max-width: `.row > *` lo fermava al 100% e il margine negativo non allargava la riga */
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-padding:0 1rem; margin:0 -1rem; padding:0 1rem 6px;
  scrollbar-width:none;
}
.ecs-bloghome .ecs-blog-native ul::-webkit-scrollbar { display:none; }
.ecs-bloghome .ecs-blog-native ul > li {
  flex:0 0 78%; max-width:78%; width:auto; padding:0 0 1rem; float:none;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden;
}
.ecs-bloghome .ecs-blog-native .ets_item_img { border-radius:0; }
.ecs-bloghome .ecs-blog-native .ets_item_img img { aspect-ratio:360/204; object-fit:cover; }
.ecs-bloghome .ecs-blog-native .ets-blog-latest-post-content {
  display:flex; flex-direction:column; flex:1; padding:.85rem 1rem 0;
}
/* titolo intero: il modulo lo fa flottare con un suo padding; le schede di una riga hanno
   comunque tutte la stessa altezza */
.ecs-bloghome .ecs-blog-native .ets_title_block {
  float:none; padding:0; margin:0 0 .3rem; font-size:.95rem; line-height:1.3;
}
.ecs-bloghome .ecs-blog-native .ets-blog-sidear-post-meta { margin-bottom:.45rem; }
.ecs-bloghome .ecs-blog-native .ets-blog-latest-toolbar:empty { display:none; }
.ecs-bloghome .ecs-blog-native .blog_description { font-size:.85rem; }
.ecs-bloghome .ecs-blog-native .blog_description p {
  margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ecs-bloghome .ecs-blog-native .read_more { margin-top:auto; padding-top:.7rem; font-size:.9rem; }
.ecs-bloghome .ecs-blog-native .blog_date-add,
.ecs-bloghome .ecs-blog-native .blog_view_all_button { display:none; }

/* La riga dell'IVA la scrive ecmcore (`.ecs-product__tax`) con le parole della produzione
   ("IVA IT 22% inclusa") invece del generico "Tax included" di Hummingbird: senza questa riga
   se ne vedrebbero due, una sopra l'altra. */
.ecs-product__price .product__tax-infos { display: none; }

/* Pillola "best choice" della tavola: nera, minuscola, sotto il titolo. */
.ecs-product__best {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 999px; background: var(--ecs-ink); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}

/* Selettore quantità: nella tavola NON c'è, quindi si vende un pezzo per aggiunta.
   Si nasconde il blocco invece di togliere il campo dal modulo: l'input resta nel form con
   valore 1, che è esattamente il comportamento voluto, e si torna indietro con una riga. */
/* Quantita mostrata come in produzione (scelta di Ale 2026-07-23). */

/* --- scheda prodotto: le tre diciture sotto il prezzo ---------------------------
   Nella tavola non ci sono; in produzione sì. Stanno in una riga sola, piccole, sotto il
   prezzo: sono informazioni che rassicurano prima dell'acquisto, non titoli. */
.ecs-product__info {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem;
  margin: .9rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--ecs-muted);
}
.ecs-product__avail { font-weight: 700; }
.ecs-product__avail.is-in { color: #2e7d5b; }
.ecs-product__avail.is-back { color: #b07d1a; }
.ecs-product__avail.is-out { color: var(--ecs-muted); }
.ecs-product__ship strong { color: var(--ecs-ink); font-weight: 700; }
/* la riga si spezza sempre prima della stima spedizione: è la più lunga delle tre */
.ecs-product__ship { flex-basis: 100%; }

/* --- pagina delle marche: piena larghezza, griglia di schede --- */
.ecs-brands { width: 100%; max-width: var(--ecs-content-max); margin: 0 auto; padding: 2rem 1rem 4rem; }
/* La pagina marche in produzione usa lo stesso `.section-head` di tutto il resto
   (`<h2>Most Loved Brands</h2>` + filo + sottotitolo): qui si usa il componente e basta. */
.ecs-brands__count { margin: 0.35rem 0 0; color: var(--ecs-muted); }

.ecs-brands__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ecs-brands__list .brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 1.15rem;
  background: #fff;
  border-radius: 15px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ecs-brands__list .brand:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.ecs-brands__list .brand__image { display: flex; align-items: center; justify-content: center; height: 74px; }
.ecs-brands__list .brand__img { max-height: 74px; width: auto; mix-blend-mode: multiply; }
.ecs-brands__list .brand__title { font-size: 1rem; font-weight: 700; color: var(--ecs-ink); text-decoration: none; text-transform: capitalize; }
.ecs-brands__list .brand__products { margin: 0; font-size: 0.875rem; color: var(--ecs-muted); }

/* ---- checkout: riquadro "crea il mio account" ---- */
.ecs-contact__account {
  margin: 1rem 0 .5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ecs-line);
  border-radius: 12px;
  background: #fff;
}
.ecs-contact__account .form-check-label,
.ecs-contact__account label { font-weight: 700; color: var(--ecs-ink); }
.ecs-contact__pwd { margin-top: .85rem; }
.ecs-contact__pwd[hidden] { display: none; }
.ecs-contact__pwd .form-label { font-weight: 400; }
.ecs-contact__login { margin: .9rem 0 0; font-size: .9375rem; }
.ecs-contact__login a { color: var(--ecs-ink); text-decoration: underline; }
.ecs-contact__login a:hover { color: var(--ecs-accent-text); }

/* Sezione "personalized set" (accessori del prodotto) — produzione */
.ecs-set { width: 100%; max-width: var(--ecs-content-max); margin: 2.5rem auto 0; padding: 0 1rem; }
.ecs-set .ecs-accordion { margin-top: 0; }
.ecs-set__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 991.98px) { .ecs-set__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ecs-set__grid { grid-template-columns: minmax(0, 1fr); } }

/* Appunti Ale 2026-07: meno spazio tra breadcrumb e titolo in scheda prodotto */
body#product .breadcrumb__wrapper { margin-bottom: 1rem; }

/* ================================================================================
   Refactoring miniatura / categoria — appunti Ale 2026-08-04
   1) modale carrello: CTA "Proceed to checkout" con testo bianco (era rosso su rosso)
   2) sottocategorie a 5 colonne, celle di pari altezza, testo su piu righe
   3) miniatura: prezzo scontato SOTTO il pieno barrato + chip sconto accanto al prezzo;
      pulsanti confronta/azione 50-50; combinazioni -> "Configura", semplici -> carrello + "Aggiungi"
   Regole appese in coda: stessa specificita' ma sorgente successiva -> vincono sulle definizioni
   precedenti della card. Vedi [[ecs-token-tipografici-dal-css-di-produzione]].
   ================================================================================ */

/* (1) Modale "aggiunto al carrello" — il CTA e' un <a>, il colore va forzato bianco
   (specificita' con l'id per battere l'eventuale colore-link del tema). */
#blockcart-modal .btn-primary,
#blockcart-modal a.btn-primary { color:#fff; }
#blockcart-modal .btn-primary:hover,
#blockcart-modal a.btn-primary:hover { color:#fff; }

/* (2) Sottocategorie: griglia 5 colonne, celle stirate a pari altezza, testo che va a capo */
.ecs-facets__categories {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin:0 0 24px;
}
.ecs-facets__category {
  display:flex; width:auto; height:100%; min-height:56px;
  white-space:normal; line-height:1.2; word-break:break-word;
}
@media (max-width:1199px){ .ecs-facets__categories { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:991px){ .ecs-facets__categories { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:575px){ .ecs-facets__categories { grid-template-columns:repeat(2, 1fr); } }

/* (3a) Prezzi: pieno barrato sopra, scontato sotto (evidenziato) + chip sconto accanto */
.product-miniature__prices {
  margin-top:auto; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px;
}
.product-miniature__regular-line { line-height:1; }
.product-miniature__regular-price {
  font-size:14px; font-weight:400; line-height:16.8px; color:var(--ecs-muted); text-decoration:line-through;
}
.product-miniature__price-line { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.product-miniature__price { font-size:20px; font-weight:700; line-height:24px; color:var(--ecs-ink); }
.product-miniature__prices--discounted .product-miniature__price { color:var(--ecs-accent-text); }
.product-miniature__discount-badge {
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px;
  background:var(--ecs-accent); color:#fff; font-size:12px; font-weight:700; line-height:1; white-space:nowrap;
}

/* (3b) Azioni: confronta + azione a meta ciascuno (50-50), stessa altezza */
.product-miniature__actions { display:flex; align-items:stretch; gap:10px; margin-top:12px; }
.product-miniature__actions > .ecs-compare-btn,
.product-miniature__form,
.product-miniature__configure,
.product-miniature__details { flex:1 1 0; min-width:0; }
.product-miniature__actions > .ecs-compare-btn { width:auto; height:auto; min-height:44px; }
.product-miniature__form { display:flex; }
.product-miniature__form .quantity-button { display:none; }
.product-miniature__add {
  width:100%; min-width:0; height:auto; min-height:44px; border-radius:10px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.product-miniature__add .material-icons { font-size:20px; }
.product-miniature__add-text { display:inline; font-size:14px; font-weight:700; }
.product-miniature__configure,
.product-miniature__details {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  border-radius:10px; font-size:14px; font-weight:700;
}

/* (3c) I pulsanti pieni della riga azioni sono <a>/<button>: forzo il testo bianco,
   altrimenti "Configura" esce corallo-su-corallo (stesso caso del modale). */
.product-miniature__actions .btn-primary,
.product-miniature__actions a.btn-primary { color:#fff; }
.product-miniature__actions .btn-primary:hover,
.product-miniature__actions a.btn-primary:hover { color:#fff; }

/* Pagine categoria: 4 prodotti per riga su desktop (era 3) — appunti Ale round 3 (08-04) */
@media (min-width:992px){
  #js-product-list .products { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   Scheda prodotto — refactor testata + tooltip + reference (Ale 2026-08-04)
   Testata: titolo a sinistra; a destra marca, filo separatore e Trustpilot sotto.
   Toglie il filo a tutta larghezza e avvicina la scheda al titolo (meno vuoto).
   ===================================================================== */
.ecs-product__head { margin-bottom: 1rem; padding-bottom: .8rem; }
.ecs-product__head::after { content: none !important; }
.ecs-product__headright {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .5rem; min-width: 190px; text-align: right; position: relative; z-index: 1;
}
.ecs-product__headright .ecs-product__brand { padding-top: .35rem; white-space: nowrap; }
.ecs-product__headsep {
  width: 100%; max-width: 240px; border: 0; border-top: 1px solid var(--ecs-line);
  margin: .1rem 0; opacity: 1;
}
.ecs-product__headright .ecs-product__tp { align-items: flex-end; }
/* ⚠️ Stelle VERDI, non corallo: nella tavola V12 (e nel badge del prefooter, e nel marchio
   Trustpilot) sono #00b67a. Erano diventate corallo spostando il blocco in alto a destra
   il 04/08 — uno strascico dello spostamento, non una scelta. */
.ecs-product__headright .ecs-product__tp-stars { color: #00b67a; font-size: 1.15rem; letter-spacing: 2px; }
.ecs-product__headright .ecs-product__tp-link { font-size: .8125rem; text-decoration: underline; color: var(--ecs-ink); }

/* Reference + "non disponibile" identici alla produzione */
.ecs-product__ref {
  background: #AFAFAF; color: #fff; border-radius: 10px; padding: 5px 10px;
  font-size: 14px; font-weight: 700; line-height: 16.8px; letter-spacing: 0;
}
.ecs-product__notice { font-size: 14px; font-weight: 700; line-height: 16.8px; text-decoration: underline; color: var(--ecs-ink); }

/* Varianti: sottotitolo "secondo il paese" + tooltip Voltaggio (valori esatti della produzione) */
.ecs-product__right .according-to-country { font-weight: 400; color: var(--ecs-muted); font-size: .9375rem; margin-left: .15rem; }
.ecs-tooltip { position: relative; display: inline-block; cursor: pointer; margin-left: .25rem; vertical-align: middle; }
.ecs-tooltip > span { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background-color: #555; color: #fff; text-align: center; font-weight: 700; font-size: 14px; }
.ecs-tooltip .content {
  visibility: hidden; opacity: 0; transition: opacity .3s;
  width: 300px; max-width: 70vw; background-color: #555; color: #fff; text-align: left;
  border-radius: 6px; padding: 1rem; position: absolute; z-index: 5; bottom: 150%; right: 50%;
  margin-right: -1.25rem; font-size: .875rem; line-height: 1.5; font-weight: 400;
}
.ecs-tooltip .content::after {
  content: ""; position: absolute; top: 100%; right: 1rem; margin-left: -5px;
  border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;
}
.ecs-tooltip:hover .content, .ecs-tooltip:focus-within .content { visibility: visible; opacity: 1; }

@media (max-width: 767.98px) {
  .ecs-product__headright { align-items: flex-start; text-align: left; min-width: 0; width: 100%; }
  .ecs-product__headsep { max-width: none; }
}

/* ============================================================================
   compare-bar round 6 — barra di confronto fissa in basso (FEATURE 1)
   Rimpiazza cdproductcomparisonplus del .com. Token tema: ink/paper/accent/line.
   ========================================================================== */
.ecs-compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:1040;background:#fff;box-shadow:0 -4px 24px rgba(50,50,63,.14);padding:12px 16px}
.ecs-compare-bar[hidden]{display:none}
.ecs-compare-bar__inner{max-width:1280px;margin:0 auto}
.ecs-compare-bar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ecs-compare-bar__title{font-size:15px;font-weight:700;color:var(--ecs-ink,#32323F)}
.ecs-compare-bar__close{background:none;border:0;font-size:24px;line-height:1;color:var(--ecs-ink,#32323F);cursor:pointer;padding:0 4px}
.ecs-compare-bar__close:hover{color:var(--ecs-accent-text)}
.ecs-compare-bar__body{display:flex;align-items:stretch;gap:14px}
.ecs-compare-bar__items{display:flex;gap:10px;overflow-x:auto;flex:1 1 auto;padding-bottom:2px}
.ecs-compare-bar__card{position:relative;border:1px solid var(--ecs-line,#e3e1dd);border-radius:10px;padding:10px;display:flex;gap:10px;min-width:230px;align-items:center;background:#fff}
.ecs-compare-bar__thumb{flex:0 0 auto;width:70px;height:70px;display:flex;align-items:center;justify-content:center}
.ecs-compare-bar__thumb img{max-width:70px;max-height:70px;width:auto;height:auto;object-fit:contain}
.ecs-compare-bar__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.ecs-compare-bar__brand{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#8a8a93}
.ecs-compare-bar__name{font-size:13px;font-weight:600;color:var(--ecs-ink,#32323F);text-decoration:none;line-height:1.25;max-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ecs-compare-bar__name:hover{color:var(--ecs-accent-text)}
.ecs-compare-bar__price{font-size:20px;font-weight:600;color:var(--ecs-ink,#32323F)}
.ecs-compare-bar__x{position:absolute;top:4px;right:6px;background:none;border:0;font-size:18px;line-height:1;color:#8a8a93;cursor:pointer;padding:0}
.ecs-compare-bar__x:hover{color:var(--ecs-accent-text)}
.ecs-compare-bar__actions{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:8px}
.ecs-compare-bar__clear{background:none;border:1px solid var(--ecs-ink,#32323F);border-radius:10px;padding:9px 16px;font-weight:700;font-size:14px;color:var(--ecs-ink,#32323F);cursor:pointer;white-space:nowrap}
.ecs-compare-bar__clear:hover{border-color:var(--ecs-accent,#e64b38);color:var(--ecs-accent-text)}
.ecs-compare-bar__go{display:inline-block;background:var(--ecs-ink,#32323F);color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;text-decoration:none;text-align:center;white-space:nowrap}
.ecs-compare-bar__go:hover{background:var(--ecs-accent,#e64b38);color:#fff}
@media(max-width:768px){.ecs-compare-bar__body{flex-direction:column}.ecs-compare-bar__actions{flex-direction:row}.ecs-compare-bar__card{min-width:200px}}

/* ============================================================================
   compare-simili round 6 — tabella "Confronta simili" a fondo scheda (FEATURE 2)
   Struttura .product-accessories > h2 + .scrool > table.comparatore come in produzione.
   ========================================================================== */
.product-accessories.ecs-simili{padding:20px 0}
.product-accessories.ecs-simili>h2{font-size:2rem;font-weight:500;margin:2rem 0 1rem;color:var(--ecs-ink,#32323F)}
.ecs-simili .scrool{overflow-x:auto}
.ecs-simili .comparatore{width:100%;border-collapse:collapse}
.ecs-simili .comparatore td,.ecs-simili .comparatore th{padding:10px;border-bottom:1px solid #ddd;text-align:center;vertical-align:top}
.ecs-simili .comparatore th.ecs-simili__label{text-align:left;font-size:14px;font-weight:700;white-space:nowrap;color:var(--ecs-ink,#32323F)}
.ecs-simili .comparatore img{max-width:100px;border-radius:10px;height:auto}
.ecs-simili .nome-prodotto{font-size:.9em;color:#555;text-transform:capitalize;margin-top:10px}
.ecs-simili .nome-prodotto a{color:#555;text-decoration:none}
.ecs-simili .nome-prodotto a:hover{color:var(--ecs-accent-text)}
.ecs-simili .prezzo{color:var(--ecs-accent-text);font-size:1.1em;font-weight:700}
.ecs-simili .prezzo s{color:#999;font-weight:400;font-size:.85em}
.ecs-simili__rating td,.ecs-simili__rating th{background:#f1f1f1}
.ecs-simili .is-current{background:#fff}
.ecs-simili .highlight-current-product{box-shadow:inset 0 0 0 2px var(--ecs-ink,#32323F);border-radius:10px}

/* =====================================================================================
   SCHEDA PRODOTTO — testata consolidata + pannello descrizione/scheda tecnica
   Tavola V12 aggiornata, brief ECS 2026-09-10. Primo avvicinamento: la tavola è ancora in
   lavorazione, quindi tutto sta in questo blocco e si sostituisce senza toccare il resto.
   ===================================================================================== */

/* --- estratto + le due porte sotto il prezzo --- */
.ecs-product__more { margin-top: 1.25rem; }
.ecs-product__excerpt {
  font-size: .95rem; line-height: 1.6; color: #4a4a55;
  /* Tre righe: l'estratto è un assaggio, il testo intero sta nel pannello. Il taglio è netto e
     non lascia una riga mozzata a metà altezza. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .85rem;
}
.ecs-product__excerpt p:last-child { margin-bottom: 0; }
/* Righe, non pastiglie: è il componente della tavola V12 — etichetta a sinistra, chevron in un
   cerchio a destra, filo sottile fra una riga e l'altra. Lo stesso identico look delle voci
   dell'accordion qui sotto (`.ecs-accordion .accordion-button`), perché nella tavola è lo stesso
   componente: quello che cambia è solo dove porta. */
.ecs-product__morerows { margin-top: 1.1rem; border-top: 1px solid var(--ecs-line); }
.ecs-product__morerow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem 0; background: none; border: 0;
  border-bottom: 1px solid var(--ecs-line);
  font-size: 1.25rem; font-weight: 400; color: var(--ecs-ink); text-align: left; cursor: pointer;
}
.ecs-product__morerow::after {
  content: ""; width: 26px; height: 26px; flex: 0 0 26px;
  border: 1px solid #cfccc7; border-radius: 999px;
  background-repeat: no-repeat; background-position: center; background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2332323f' stroke-width='2'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  transition: background-color .2s ease, border-color .2s ease;
}
.ecs-product__morerow:hover::after { background-color: var(--ecs-paper); border-color: var(--ecs-ink); }
.ecs-product__morerow:focus-visible { outline: 2px solid var(--ecs-accent); outline-offset: 2px; }

/* Icona del carrello DOPO l'etichetta, come nella tavola ("Aggiungi al carrello 🛒").
   Si gira con il CSS invece di copiare il partial del tema padre solo per spostare una <i>. */
.ecs-product__buyrow .product__add-to-cart-button { flex-direction: row-reverse; }

/* --- il pannello --- */
.ecs-pmodal[hidden] { display: none; }
.ecs-pmodal {
  position: fixed; inset: 0; z-index: 1090;
  display: flex; justify-content: center; padding: 24px 16px; overflow: auto;
}
.ecs-pmodal__bd { position: absolute; inset: 0; background: rgba(50,50,63,.55); }
/* `margin:auto` e non `align-items:center`: una scheda tecnica lunga deve poter scorrere, e in
   flex il contenuto centrato che sborda in alto diventa irraggiungibile. */
.ecs-pmodal__card {
  position: relative; z-index: 1; margin: auto;
  width: min(720px, 100%); max-height: calc(100vh - 48px);
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
}
.ecs-pmodal__head { padding: 26px 28px 0; position: relative; flex: 0 0 auto; }
.ecs-pmodal__eyebrow {
  margin: 0 2.5rem 4px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ecs-accent-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecs-pmodal__t { margin: 0 2.5rem 16px 0; font-size: 30px; line-height: 1.15; font-weight: 700; }
.ecs-pmodal__x {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ecs-line); background: #fff; color: var(--ecs-ink); font-size: 14px;
  line-height: 1; cursor: pointer;
}
.ecs-pmodal__x:hover { background: var(--ecs-ink); color: #fff; border-color: var(--ecs-ink); }
/* Linguette: filo sotto quella attiva, come le testate di sezione del sito. */
.ecs-pmodal__tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--ecs-line); }
.ecs-pmodal__tab {
  background: none; border: 0; padding: 0 0 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ecs-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.ecs-pmodal__tab:hover { color: var(--ecs-ink); }
.ecs-pmodal__tab.is-on { color: var(--ecs-ink); border-bottom-color: var(--ecs-accent); }
.ecs-pmodal__tab:focus-visible { outline: 2px solid var(--ecs-accent); outline-offset: 3px; }
/* Scorre il CORPO, non la pagina dietro: testata e linguette restano ferme mentre si legge. */
.ecs-pmodal__body { flex: 1 1 auto; overflow: auto; padding: 22px 28px 28px; }
.ecs-pmodal__pane[hidden] { display: none; }
.ecs-pmodal__pane { font-size: .95rem; line-height: 1.65; color: #4a4a55; }
.ecs-pmodal__pane img { max-width: 100%; height: auto; }
.ecs-pmodal__pane > :last-child { margin-bottom: 0; }
@media (max-width: 575px) {
  .ecs-pmodal { padding: 12px; }
  .ecs-pmodal__head { padding: 20px 18px 0; }
  .ecs-pmodal__t { font-size: 24px; }
  .ecs-pmodal__body { padding: 18px; }
  .ecs-pmodal__card { max-height: calc(100vh - 24px); }
}

/* ~~ECM 2026-09-25~~ «Il tuo account» a gruppi (a1-35, templates/customer/my-account.tpl): il titolo del
   gruppo occupa tutta la riga della griglia delle schede. */
.account-menu--gruppi .account-menu__gruppo { grid-column: 1 / -1; margin: 1.25rem 0 0; font-size: 1.125rem; font-weight: 600; color: var(--ecs-ink); }
.account-menu--gruppi .account-menu__gruppo:first-of-type { margin-top: 0; }

/* =====================================================================================
   Scheda prodotto — tavola V12 «update 28 09 2026» (Figma 116:1513, «Ready for dev» 29/09)
   ANTEPRIMA con ?v12=2809 (catalog/_partials/ecs-product-v2809.tpl). Tutto sotto .ecs-p28:
   si toglie in blocco. Misure della tavola a 1512 px: blocco 1021 (galleria 464 + 57 + 500),
   titolo Figtree 38/45,6 peso 500, riga d'acquisto 40, Bundle 57, righe della scheda tecnica 25.
   Altezze legate allo schermo come chiede la nota V12 (144:48): svh, --header-h misurata dal JS,
   clamp(), media query sull'altezza, soglia minima ~650 px, galleria sticky.
   ===================================================================================== */
.ecs-p28 {
  --p28-left: 464px;
  --p28-gap: 57px;
  --p28-img: clamp(300px, calc(100svh - var(--header-h, 190px) - 170px), 416px);
  max-width: 1021px;
  margin: 0 auto;
}
@media (max-height: 650px) { .ecs-p28 { --p28-img: 300px; } }

.ecs-p28__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px 16px; margin: 0 0 12px;
}
.ecs-p28__title {
  flex: 1 1 520px; min-width: 0; margin: 0; color: var(--ecs-ink);
  font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.2; font-weight: 500;
  overflow-wrap: break-word;
}
.ecs-p28__head-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; max-width: 100%; }
@media (max-width: 575.98px) {
  .ecs-p28__head-meta { width: 100%; justify-content: space-between; }
}

.ecs-p28__grid {
  display: grid;
  grid-template-columns: var(--p28-left) minmax(0, 1fr);
  column-gap: var(--p28-gap);
  align-items: start;
}
.ecs-p28__left { position: sticky; top: calc(var(--header-h, 0px) + 16px); }

/* galleria: un'immagine, pallini sotto dentro il riquadro, confronto in alto a sinistra */
.ecs-p28__gallery { position: relative; }
.ecs-p28 .product__carousel { border-radius: 10px; }
.ecs-p28 .product__carousel .carousel-item img {
  width: 100%; height: var(--p28-img); object-fit: contain; background: #fff;
}
.ecs-p28 .carousel-control-prev, .ecs-p28 .carousel-control-next { display: none; }
.ecs-p28 .product__thumbnails { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; pointer-events: none; }
.ecs-p28 .product__thumbnails-list {
  display: flex; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none;
}
.ecs-p28 .product__thumbnails-item { margin: 0; pointer-events: auto; }
.ecs-p28 .product__thumbnail {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%;
  background: #D9D9D9; box-shadow: none !important; overflow: hidden;
}
.ecs-p28 .product__thumbnail.active, .ecs-p28 .product__thumbnail[aria-current="true"] { background: #000; }
.ecs-p28 .product__thumbnail picture, .ecs-p28 .product__thumbnail img { display: none; }
.ecs-p28 .product-flags { left: auto; right: 12px; align-items: flex-end; }
.ecs-p28__tools { position: absolute; top: 19px; left: 11px; z-index: 3; }
.ecs-p28__tools .product__additional-info { margin: 0; }
.ecs-p28__tools .ecs-compare-btn {
  width: 43px; height: 40px; padding: 0; justify-content: center;
  border: 1px solid var(--ecs-ink); border-radius: 10px; background: #fff;
}
.ecs-p28__tools .ecs-compare-btn span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Badge e recensioni stanno accanto al titolo; la colonna d'acquisto parte subito sotto il filo. */
.ecs-p28__right { border-top: 1px solid var(--ecs-ink); padding-top: 8px; }
.ecs-p28__best {
  display: inline-flex; align-items: center; height: 24px; padding: 0 13px;
  border-radius: 10px; background: #000; color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
}
.ecs-p28__tp { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; color: var(--ecs-ink); text-decoration: none; }
.ecs-p28__tp-stars { color: #00b67a; font-size: 1.05rem; letter-spacing: 2px; line-height: 1.1; }
.ecs-p28__tp-link { font-size: 12px; text-decoration: underline; }

/* varianti: etichetta 14 px, pulsanti 40 px con filo scuro, pallini 32 px */
.ecs-p28 .product-variant { margin: 0 0 14px; }
.ecs-p28 .product-variant__legend, .ecs-p28 .product-variant__selected { font-size: 14px; line-height: 16.8px; }
.ecs-p28 .product-variant__attributes { margin-top: 8px; }
.ecs-p28 .product-variant__radios { gap: 8px; }
.ecs-p28 .product-variant__radio label {
  min-width: 72px; height: 40px; padding: 0 16px; border-color: var(--ecs-ink); border-radius: 10px; font-size: 15px;
}
.ecs-p28 .product-variant__radio .form-check-input:checked + label { background: var(--ecs-ink); color: #fff; }
.ecs-p28 .product-variant__colors { gap: 17px; }
.ecs-p28 .input-color__label .color { width: 32px; height: 32px; }
.ecs-p28__help {
  display: inline-block; margin: -4px 0 18px; font-size: 14px; font-weight: 700; line-height: 16.8px;
  color: var(--ecs-ink); text-decoration: underline;
}

/* una griglia sola: prezzo | quantità | carrello, poi riga verde, poi Bundle and Save */
.ecs-p28 .ecs-p28__buy {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  column-gap: 10px; row-gap: 12px; margin: 24px 0 0;
}
.ecs-p28 .ecs-p28__cart,
.ecs-p28 .ecs-p28__cart .product__add-to-cart-container,
.ecs-p28 .ecs-p28__cart .product__actions-qty-add { display: contents; }
.ecs-p28__price { order: 1; }
.ecs-p28 .ecs-p28__cart .product__quantity { order: 2; }
.ecs-p28 .ecs-p28__cart .add { order: 3; }
.ecs-p28__info { order: 4; grid-column: 1 / -1; }
.ecs-p28 .ecs-p28__cart .ecs-bs { order: 5; grid-column: 1 / -1; }
.ecs-p28 .ecs-p28__cart .product__availability { order: 6; grid-column: 1 / -1; margin: 0; }
.ecs-p28 .ecs-p28__cart .product__minimal-quantity { order: 7; grid-column: 1 / -1; }
.ecs-p28 .ecs-p28__cart .product__availability:not([hidden]):empty { display: none; }

.ecs-p28__price .product__price, .ecs-p28__price .current-price-value {
  font-size: 32px; line-height: 38.4px; font-weight: 600; color: var(--ecs-ink);
}
.ecs-p28__price .product__tax-infos { display: none; }

.ecs-p28 .quantity-button__group { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ecs-p28 .quantity-button__group .btn {
  width: 22px; height: 40px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ecs-ink);
}
.ecs-p28 .quantity-button__group .btn .material-icons { font-size: 22px; }
.ecs-p28 .quantity-button__group .form-control {
  width: 39px; height: 40px; flex: 0 0 39px; padding: 0; text-align: center;
  border: 1px solid var(--ecs-ink); border-radius: 10px !important; background: transparent; font-size: 16px;
}
.ecs-p28 .ecs-p28__cart .product__add-to-cart-button {
  display: inline-flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 10px;
  min-width: 187px; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.ecs-p28 .ecs-p28__cart .product__add-to-cart-button .material-icons { font-size: 20px; }

.ecs-p28__info {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  margin: 0; font-size: 12px; line-height: 14.4px; font-weight: 500; color: var(--ecs-ink);
}
.ecs-p28__avail.is-in { color: #2e7d5b; font-weight: 700; }
.ecs-p28__avail.is-back { color: #b07d1a; font-weight: 700; }
.ecs-p28__avail.is-out { color: var(--ecs-muted); font-weight: 700; }
.ecs-p28__ship strong { font-weight: 700; }
.ecs-p28__notice { text-decoration: underline; }

.ecs-p28 .ecs-bs__btn { min-height: 57px; font-size: 16px; }

/* sotto: due colonne, tendine a sinistra e scheda tecnica aperta a destra */
.ecs-p28__below {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px;
  align-items: start; margin-top: 32px;
}
.ecs-p28__below .ecs-accordion { margin-top: 0; --bs-accordion-border-color: rgba(50, 50, 63, .5); }
.ecs-p28__below .accordion-item { border-color: rgba(50, 50, 63, .5); }
.ecs-p28__below .accordion-button { font-size: 20px; line-height: 24px; font-weight: 400; padding: 8px 10px; }
.ecs-p28__below .accordion-body { padding: 10px 10px 18px; font-size: 14px; line-height: 16.8px; color: #000; }
.ecs-p28__details { display: none !important; }

.ecs-p28__specs { padding: 8px 0 12px; color: var(--ecs-ink); }
.ecs-p28__group + .ecs-p28__group { margin-top: 14px; }
.ecs-p28__gtitle { margin: 0 0 4px; padding: 0 23px; font-size: 14px; line-height: 16.8px; font-weight: 700; }
.ecs-p28__table { margin: 0; }
.ecs-p28__row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
  min-height: 25px; padding: 3px 23px; font-size: 14px; line-height: 16.8px;
}
.ecs-p28__table .ecs-p28__row:nth-child(odd) { background: rgba(0, 0, 0, .05); }
.ecs-p28__row dt { font-weight: 400; margin: 0; }
.ecs-p28__row dd { font-weight: 700; margin: 0; }
.ecs-p28__table--ref { margin-top: 14px; }
.ecs-p28__table--ref .ecs-p28__row { min-height: 52px; background: rgba(0, 0, 0, .05); }
.ecs-p28__table--ref dt { font-weight: 700; }

.ecs-p28__ricambi-n { font-weight: 700; margin: 0 0 10px; }
.ecs-p28__ricambi-t { margin: 12px 0 4px; font-weight: 700; }
.ecs-p28__ricambi-tav, .ecs-p28__ricambi-top { margin: 0; padding-left: 18px; }
.ecs-p28__ricambi a { color: var(--ecs-ink); }
.ecs-p28__ricambi-cta {
  display: inline-block; margin-top: 14px; padding: 9px 16px; border: 1px solid var(--ecs-ink);
  border-radius: 10px; font-weight: 700; text-decoration: none;
}
.ecs-p28__ricambi-cta:hover { background: var(--ecs-ink); color: #fff; }

/* tablet e telefono: una colonna; prezzo sopra, quantità e carrello sotto */
@media (max-width: 991.98px) {
  .ecs-p28 { --p28-img: clamp(260px, 70vw, 416px); padding: 0 16px; }
  .ecs-p28__grid, .ecs-p28__below { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ecs-p28__left { position: static; }
  .ecs-p28 .ecs-p28__buy { grid-template-columns: auto minmax(0, 1fr); }
  .ecs-p28__price { grid-column: 1 / -1; }
  .ecs-p28 .ecs-p28__cart .product__add-to-cart-button { width: 100%; min-width: 0; }
}

/* p28 — ritocchi dopo la prima prova a video (30/09) */
.ecs-p28 .product__carousel .product-flags,
.ecs-p28 .product__images .product-flags { left: auto; right: 12px; inset-inline-start: auto; inset-inline-end: 12px; align-items: flex-end; }
/* nella tavola il voltaggio viene prima del colore */
.ecs-p28 .product__variants { display: flex; flex-direction: column; }
.ecs-p28 .product-variant:has(.product-variant__colors) { order: 2; }
/* disponibilità: una sola, quella di PrestaShop (si aggiorna al cambio di combinazione), subito sopra la riga verde */
.ecs-p28__avail { display: none; }
.ecs-p28 .ecs-p28__cart .product__availability { order: 4; font-size: 12px; line-height: 14.4px; font-weight: 700; }
.ecs-p28 .ecs-p28__cart .product__availability .material-icons { font-size: 15px; }
.ecs-p28 .ecs-p28__cart .product__availability-status { display: flex; align-items: center; gap: 6px; }
.ecs-p28__info { order: 5; }
.ecs-p28 .ecs-p28__cart .ecs-bs { order: 6; }
/* descrizione: una dozzina di righe e «Leggi tutto» */
.ecs-p28__desc { max-height: calc(16.8px * 12); overflow: hidden; position: relative; }
.ecs-p28__desc:not(.is-open)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(rgba(242, 241, 239, 0), var(--ecs-paper));
}
.ecs-p28__desc.is-open { max-height: none; }
.ecs-p28__more {
  margin-top: 8px; padding: 0; border: 0; background: none; color: var(--ecs-ink);
  font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer;
}
/* etichette sulla foto a destra: a sinistra c e il confronto (il padre le mette a tutta larghezza allineate a sinistra) */
.ecs-p28 .product__images .product-flags { left: 0; right: 0; justify-content: flex-end; padding: .5rem .75rem .5rem 4rem; }
/* schermi bassi (nota V12: media query sull'altezza): spazi più stretti così a 1366x768 la parte
   alta, Bundle compreso, sta nello schermo; sotto ~650 px di altezza la pagina scorre normalmente */
@media (min-width: 992px) and (max-height: 820px) {
  body#product:has(.ecs-p28) .breadcrumb__wrapper { margin-bottom: .35rem; }
  .ecs-p28__head { margin-bottom: 8px; }
  .ecs-p28__title { font-size: 1.875rem; }
  .ecs-p28__right { padding-top: 5px; }
  .ecs-p28 .product-variant { margin-bottom: 8px; }
  .ecs-p28 .product-variant__attributes { margin-top: 6px; }
  .ecs-p28 .ecs-p28__buy { margin-top: 12px; row-gap: 8px; }
  .ecs-p28 .ecs-bs__btn { min-height: 48px; }
}

/* Checkout (30/09/2026): il pulsante tondo delle preferenze cookie, fisso in basso a sinistra, copriva i pallini di
   corrieri e pagamenti sul telefono. Nel checkout si nasconde: le preferenze restano nel link del footer. */
body#checkout .ecs-cookie-reopen { display: none !important; }

/* ── Descrizioni prodotto nel formato ECS (01/10/2026, voce a3-05) ───────────────────────────────────────────
   Il formato è «paragrafi e grassetto», ma 278 descrizioni su 1.695 portano stili scritti a mano (707 style=,
   span e div incollati da altri editor): font, colori e dimensioni che non sono del tema. Ripulire i dati non
   regge (al passaggio i testi si ricopiano dalla produzione, e l editor del BO li rimette): qui si neutralizzano a
   video. !important batte lo stile in linea normale. */
.ecs-p28__desc [style] {
  font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
  color: inherit !important; background: transparent !important; letter-spacing: normal !important;
  margin-left: 0 !important; width: auto !important; max-width: 100% !important;
}
.ecs-p28__desc h2, .ecs-p28__desc h3, .ecs-p28__desc h4 { font-size: 1rem; font-weight: 700; margin: 1em 0 .4em; }
.ecs-p28__desc img { max-width: 100%; height: auto; }

/* Disponibilità in scheda: il giallo `text-warning` di Bootstrap sulla carta è 1,4:1 → ambra scuro (4,6:1), 01/10/2026.
   La utility sta in `@layer utilities` con !important e vincerebbe su qualsiasi nostro !important (vedi testata):
   si cambia la variabile che legge, sull'elemento stesso. */
.product__availability-status.text-warning { --bs-warning-rgb: 138,104,4; }
/* «Leggi tutto» del blog (#999 del modulo, 2,8:1) e importo dello sconto nelle miniature (corallo su bianco, 3,9:1): 01/10/2026 */
.ets-blog-wrapper .read_more, .ets_blog_sidebar .read_more { color:var(--ecs-muted); }
.product-flags .badge.discount { color:var(--ecs-accent-text); }

/* Testata sul telefono (01/10/2026, a5-01). Era su tre righe (logo e strumenti, lente da sola, menu da solo) e
   restava ferma in cima scorrendo: con la fascia wholesale ~260px su 844, un terzo dello schermo. In produzione la
   testata del telefono scorre via con la pagina: qui lo stesso, e due righe sole — logo e strumenti, poi menu e
   ricerca. `display:contents` sulla riga fa salire logo, ricerca e strumenti al livello del menu, così si possono
   riordinare senza toccare il template. */
@media(max-width:767px){
  #header.header,.ecs-header{position:relative;top:auto}  /* fisso era #header di Hummingbird, con dentro fascia e testata */
  .ecs-header__inner{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px;padding:12px 14px}
  .ecs-header__row{display:contents}
  .ecs-header__logo{order:1}
  .ecs-header__tools{order:2;margin-left:auto}
  .ecs-header__nav,.ecs-header__nav--home{order:3;flex:0 0 auto;padding:0;height:auto;border-top:0;width:auto}
  .ecs-header__search{order:4;flex:1 1 0;min-width:0;height:auto}
}
@media(max-width:379.98px){
  .ecs-header__inner{column-gap:8px;padding:10px 10px}
  .ecs-header__logo--mark img{height:24px}
  .ecs-header__tools{gap:10px}
}

/* Barra in basso del telefono, come in produzione (scelta di Ale, 01/10/2026): menu, account, preferiti, confronto,
   carrello. Account e carrello sono i widget veri (Hummingbird li sposta nei contenitori `_mobile_…` della barra).
   In testata restano logo, paese e ricerca, su una riga. Niente barra nel Bundle (il fondo è della barra del set)
   e nel checkout. */
.ecs-mbar { display:none; }
@media (max-width:767px){
  .ecs-mbar {
    display:flex; position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); z-index:1030; height:60px; padding:0 6px;
    background:#fff; border-radius:14px; box-shadow:0 4px 30px rgba(0,0,0,.18);
    justify-content:space-around; align-items:center;
  }
  .ecs-mbar__item {
    position:relative; display:flex; align-items:center; justify-content:center; min-width:48px; min-height:48px;
    color:var(--ecs-ink); background:none; border:0; padding:0; text-decoration:none;
  }
  .ecs-mbar__item .header-block { margin:0; }
  .ecs-mbar__item .header-block__title { display:none; }
  .ecs-mbar__item .header-block__action-btn { color:var(--ecs-ink); padding:0; display:flex; align-items:center; }
  .ecs-mbar .ecs-icon, .ecs-mbar .header-block__icon { width:24px; height:auto; }
  /* come in testata: numerino corallo in apice, senza cerchio pieno */
  .ecs-mbar .ps-shoppingcart .header-block { position:relative; }
  .ecs-mbar .header-block__badge {
    position:absolute; top:-5px; right:-10px; left:auto; transform:none;
    background:transparent !important; color:var(--ecs-accent-text) !important;
    font-size:12px; font-weight:1000; line-height:1; padding:0; min-width:0; border-radius:0;
  }
  /* safe area: sugli iPhone senza tasto la barra non finisce sotto l'indicatore home (review Codex 07/10) */
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
  .ecs-header__tools .ecs-tool--account, .ecs-header__tools .ecs-tool--cart,
  .ecs-header__tools .ecs-tool--wishlist, .ecs-header__tools .ecs-tool--compare,
  .ecs-header__nav .menu-toggle { display:none; }
  .ecs-header__search { order:3; flex:0 0 auto; }
  .ecs-cookie-reopen { bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
  body#module-ecmcore-bundle .ecs-mbar, body#checkout .ecs-mbar { display:none; }
  body#module-ecmcore-bundle, body#checkout { padding-bottom:0; }
}

/* Spazi fra testata e contenuto meno generosi (Ale, 01/10/2026): il contenuto partiva troppo in basso.
   Prima, sotto la card: 32px di padding + 30 di margine; briciole 40px sopra il titolo; tessere della home 25px. */
.ecs-header { padding:1.25rem 1rem 1rem; margin-bottom:10px; }
.breadcrumb__wrapper { margin-bottom:12px; }
.breadcrumb__wrapper .breadcrumb { padding-top:0; padding-bottom:0; margin-bottom:0; }
body#product .breadcrumb__wrapper { margin-bottom:8px; }
body #ecmcore-home-cats { margin-top:.5rem; margin-bottom:0; }
body #ecmcore-slides { margin-top:0; }  /* fra tessere e riquadro resta solo lo spazio della griglia della home (40px) */
@media (max-width:767px){
  .ecs-header { padding:.6rem .6rem .5rem; margin-bottom:6px; }
  .breadcrumb__wrapper { margin-bottom:8px; }
}

/* Chat Zendesk (01/10/2026): il pulsante sta sopra la barra del telefono, come in produzione (lì a 96px), e sopra la barra
   del set nel Bundle. Zendesk mette `bottom:16px` nello style in linea dell'iframe: serve !important. */
@media (max-width:767px){ iframe#launcher { bottom:84px !important; } }
body#module-ecmcore-bundle iframe#launcher { bottom:150px !important; }
@media (max-width:767px){ body#module-ecmcore-bundle iframe#launcher { bottom:236px !important; } body#checkout iframe#launcher { bottom:16px !important; } }
/* Testata su tablet (01/10/2026): il riquadro era largo «schermo meno 16px» dentro un contenitore con 16px per lato, quindi
   fra 768 e 1330px sforava a destra e toccava il bordo dello schermo. Non supera piu' il contenitore: margini uguali. */
.ecs-header__inner { max-width:100%; }

/* ── Carrello e checkout come la produzione (01/10/2026) ───────────────────────────────────────────────────────────
   1) Link fatti a pulsante. Hummingbird mette i colori di Bootstrap nei layer CSS e la nostra `a { color }` (senza layer)
      vinceva sempre: ogni <a class="btn ..."> pieno usciva corallo su corallo («Procedi con il checkout» nel carrello, già
      prima del cambio di corallo; finora rattoppato caso per caso: finestra del carrello, «Configura» nelle miniature).
      Il colore torna alle variabili del pulsante, per tutti i tipi e gli stati. */
a.btn { color: var(--bs-btn-color); }
a.btn:hover, a.btn:focus-visible { color: var(--bs-btn-hover-color); }
a.btn:active, a.btn.active { color: var(--bs-btn-active-color); }
a.btn.disabled { color: var(--bs-btn-disabled-color); }
.btn-link { --bs-btn-color: var(--ecs-accent-text); --bs-btn-hover-color: var(--ecs-accent-text); --bs-btn-active-color: var(--ecs-accent-text); }
/* 2) Pulsante principale disabilitato: il tema non ne aveva mai ridefinito i colori e restava l'azzurro di Bootstrap
      («Ordine con obbligo di pagamento» nel checkout prima di accettare i termini). Grigio, con il testo leggibile. */
.btn-primary { --bs-btn-disabled-bg: #dedbd6; --bs-btn-disabled-border-color: #dedbd6; --bs-btn-disabled-color: #55555f; --bs-btn-disabled-opacity: 1; }
/* 3) Avvisi informativi (checkout: «Completa l'indirizzo...»): non l'azzurro di Bootstrap ma la carta un tono più scura. */
.alert-info { --bs-alert-bg: #e9e6e1; --bs-alert-border-color: #e9e6e1; --bs-alert-color: var(--ecs-ink); --bs-alert-link-color: var(--ecs-ink); border-radius: 10px; }
/* 4) Riepilogo di carrello e checkout senza riquadri bianchi, con la tipografia della produzione: righe a 14px con il
      valore in grassetto, totale in evidenza, IVA in piccolo sotto; tendine «Mostra dettagli» e «Codice promo» sul fondo. */
.checkout__summary-accordion, .checkout__summary-accordion-item, .cart-summary .accordion, .cart-summary .accordion-item {
  --bs-accordion-bg: transparent; --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent;
  --bs-accordion-color: var(--ecs-ink); --bs-accordion-btn-color: var(--ecs-ink); --bs-accordion-active-color: var(--ecs-ink);
  --bs-accordion-border-color: rgba(50, 50, 63, .18);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(206, 70, 54, .25);
}
.cart-summary .accordion-button { font-weight: 700; padding-left: 0; padding-right: 0; }
.cart-summary__line { font-size: 14px; }
.cart-summary__value { font-weight: 700; }
.cart-summary__total .cart-summary__line--bold:first-child .cart-summary__label { font-size: 16px; font-weight: 700; }
.cart-summary__total .cart-summary__line--bold:first-child .cart-summary__value { font-size: 22px; font-weight: 700; }
.cart-summary__total .cart-summary__line--bold:not(:first-child),
.cart-summary__total .cart-summary__line--bold:not(:first-child) > * { font-size: 13px; font-weight: 400; color: var(--ecs-muted); }
.cart-summary__actions .btn-lg { border-radius: 10px; font-size: 16px; padding-top: .7rem; padding-bottom: .7rem; }

/* ── Scheda prodotto: foto 40%, informazioni e acquisto 60% ─────────────────────────────────
   Il titolo resta sopra le due colonne. Varianti e acquisto condividono la colonna destra;
   su desktop le opzioni occupano righe compatte e il riquadro d'acquisto tutta la larghezza. */
body#product #wrapper .container { max-width: 1332px; padding-left: 16px; padding-right: 16px; }
.ecs-p28 { max-width: 1300px; --p28-gap: 40px; padding-left: 0; padding-right: 0; }  /* i 16px li dà il contenitore */
@media (min-width: 992px) {
  .ecs-p28__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (min-width: 1200px) {
  .ecs-p28__actions #add-to-cart-or-refresh { display: block; }
  .ecs-p28 .product__variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px 32px;
  }
  .ecs-p28 .product-variant { margin: 0; }
  .ecs-p28 .ecs-product__right .product-variant__attributes { padding-top: 10px; }
  .ecs-p28 .product-variant:has(.product-variant__colors) { grid-column: 1 / -1; }
  .ecs-p28__actions #add-to-cart-or-refresh:has(.product-variant) > .ecs-p28__buy { margin-top: 24px; }
  .ecs-p28__actions #add-to-cart-or-refresh:not(:has(.product-variant)) > .ecs-p28__buy,
  .ecs-p28__actions #add-to-cart-or-refresh:not(:has(.product-variant)) > .ecs-product__blocked { margin-top: 0; }
}

/* Riquadro d'acquisto: prezzo e disponibilità, informazioni, quantità e carrello, Bundle & Save */
.ecs-p28 .ecs-p28__buy {
  background: #fff; border-radius: 15px; padding: 20px; margin: 16px 0 0;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 14px; align-items: center;
}
.ecs-p28 .ecs-p28__price { grid-column: 1; grid-row: 1; }
.ecs-p28 .ecs-p28__cart .product__availability { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: 0; text-align: right; }
.ecs-p28 .ecs-p28__info { grid-column: 1 / -1; grid-row: 2; }
.ecs-p28 .ecs-p28__cart .product__quantity { grid-column: 1; grid-row: 3; }
.ecs-p28 .ecs-p28__cart .add { grid-column: 2; grid-row: 3; }
.ecs-p28 .ecs-p28__cart .add .product__add-to-cart-button { width: 100%; min-width: 0; }
.ecs-p28 .ecs-p28__cart .ecs-bs { grid-column: 1 / -1; grid-row: 4; }
.ecs-p28 .ecs-p28__cart .product__minimal-quantity { grid-column: 1 / -1; grid-row: 5; }
@media (max-width: 575.98px) { .ecs-p28 .ecs-p28__buy { padding: 16px; } }

/* Disponibilità: bollino come in produzione (maiuscolo, verde se pronto), sotto in piccolo gli ultimi pezzi */
.ecs-p28 .ecs-avail__status,
.ecs-p28 .ecs-p28__cart .ecs-avail__status { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } /* il secondo selettore batte l'align-items:center della riga di carrello (15/10) */
.ecs-p28 .ecs-avail__main { font-size: 12px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ecs-p28 .ecs-avail__main::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.ecs-p28 .ecs-avail--in .ecs-avail__main { color: #2e7d5b; }
.ecs-p28 .ecs-avail--back .ecs-avail__main { color: #8a5a00; }
.ecs-p28 .ecs-avail--out .ecs-avail__main { color: var(--ecs-muted); }
.ecs-p28 .ecs-avail__sub { font-size: 12px; line-height: 1.2; font-weight: 600; color: #8a5a00; }
.ecs-p28 .ecs-avail__sub--eta { font-weight: 500; color: var(--ecs-muted); }
.ecs-p28 .ecs-avail__sub--cd { font-weight: 600; color: #2e7d5b; }
@media (min-width: 576px) { .ecs-p28 .ecs-avail__sub--eta { white-space: nowrap; } }

/* Informazioni sotto il prezzo: IVA, spedizione con «Cambia paese» e avvisi */
.ecs-p28 .ecs-p28__info { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.35; font-weight: 400; color: var(--ecs-ink); }
.ecs-p28 .ecs-p28__tax { color: var(--ecs-muted); }
.ecs-p28 .ecs-p28__ship { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ecs-p28 .ecs-p28__ico { width: 18px; height: 18px; flex: 0 0 18px; }
.ecs-p28 .ecs-p28__change { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ecs-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ecs-p28 .ecs-p28__change:hover { color: var(--ecs-accent-text); }
.ecs-p28 .ecs-p28__warn { align-self: stretch; padding: 8px 10px; border-radius: 8px; background: #fbeee3; color: #6e3500; font-weight: 600; }
.ecs-p28 .ecs-p28__warn a { color: inherit; }
.ecs-p28 .ecs-p28__notice { text-decoration: none; }
.ecs-p28 .ecs-p28__coupon a { font-weight: 700; color: var(--ecs-ink); }

/* Varianti: etichetta e sottotitolo sulla stessa riga. La <legend> di un fieldset non sta in riga col testo che la segue
   (Chrome la tratta a parte): flottata sì, con la stessa altezza di riga di sottotitolo e «?» (22px). Il punto dopo il nome
   solo dove c'è il sottotitolo, come in produzione («Colore.», «Voltaggio.», «Materiale Macine»). */
.ecs-product__right .product-variant__legend { float: left; width: auto; margin: 0 .35rem 0 0; padding: 0; font-size: 14px; line-height: 22px; }
.ecs-product__right .product-variant__legend::after { content: none; }
.ecs-product__right .product-variant.has-sub .product-variant__legend::after { content: "."; }
.ecs-product__right .according-to-country,
.ecs-product__right .product-variant__selected { font-size: 14px; line-height: 22px; vertical-align: top; }
.ecs-product__right .ecs-tooltip { vertical-align: top; }
.ecs-product__right .product-variant__attributes { clear: both; margin-top: 0; padding-top: 8px; }
/* Tendine come in produzione: bordo inchiostro, angoli 10px, larghe quanto il testo, triangolino pieno */
.ecs-product__right .product-variant select.form-select {
  display: inline-block; width: auto; min-width: 150px; max-width: 100%; height: 40px;
  padding: 8px 40px 8px 12px; border: 1px solid var(--ecs-ink); border-radius: 10px;
  background-color: #fff; color: var(--ecs-ink); font-size: 16px; line-height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2332323f'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px;
}
/* spedizione: icona a sinistra, testo e «Cambia paese» a destra (sul telefono l'icona restava da sola su una riga) */
.ecs-p28 .ecs-p28__ship { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: start; }
.ecs-p28 .ecs-p28__ship .ecs-p28__change { grid-column: 2; justify-self: start; }
/* telefono stretto: «Aggiungi al carrello» su una riga sola, senza l'icona */
@media (max-width: 419.98px) {
  .ecs-p28 .ecs-p28__cart .product__add-to-cart-button .material-icons { display: none; }
  .ecs-p28 .ecs-p28__cart .product__add-to-cart-button { white-space: nowrap; padding: 0 12px; }
}

/* Responsive UI review, 2026-10-02: keep card actions readable in narrow grids. */
@media (max-width: 1199.98px) {
  .product-miniature__actions > .ecs-compare-btn {
    flex: 0 0 44px; width: 44px; min-width: 44px;
  }
  .product-miniature__actions > .ecs-compare-btn span { display: none; }
  .product-miniature__actions > .product-miniature__form,
  .product-miniature__actions > .product-miniature__configure,
  .product-miniature__actions > .product-miniature__details { flex: 1 1 0; min-width: 0; }
  .product-miniature__actions .product-miniature__add,
  .product-miniature__actions .product-miniature__configure,
  .product-miniature__actions .product-miniature__details {
    padding-inline: 6px; white-space: normal; text-align: center;
  }
  .product-miniature__actions .product-miniature__add .material-icons { display: none; }
}
@media (max-width: 359.98px) {
  #js-product-list .products { grid-template-columns: minmax(0, 1fr); }
}

/* The quantity controls and the links in the buy box need a useful touch area. */
.ecs-p28 .quantity-button__group .btn { width: 44px; min-width: 44px; height: 44px; }
.ecs-p28 .quantity-button__group .form-control { height: 44px; }
.ecs-p28 .ecs-p28__cart .product__add-to-cart-button { min-height: 44px; }
.ecs-p28 .ecs-p28__change, .ecs-p28__more { display: inline-flex; align-items: center; min-height: 44px; }
.ecs-p28 .product__zoom { min-width: 44px; min-height: 44px; }

/* At 320px the quantity box and CTA cannot share a row: the CTA shrank to 64px. */
@media (max-width: 419.98px) {
  .ecs-p28 .ecs-p28__buy { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .ecs-p28 .ecs-p28__price { grid-column: 1; grid-row: 1; }
  .ecs-p28 .ecs-p28__cart .product__availability {
    grid-column: 1; grid-row: 2; justify-self: start; text-align: left;
  }
  .ecs-p28 .ecs-p28__info { grid-column: 1; grid-row: 3; }
  .ecs-p28 .ecs-p28__cart .product__quantity { grid-column: 1; grid-row: 4; justify-self: start; }
  .ecs-p28 .ecs-p28__cart .add { grid-column: 1; grid-row: 5; width: 100%; }
  .ecs-p28 .ecs-p28__cart .ecs-bs { grid-column: 1; grid-row: 6; }
  .ecs-p28 .ecs-p28__cart .product__minimal-quantity { grid-column: 1; grid-row: 7; }
}

/* The compare tray must leave the mobile navigation usable. */
@media (max-width: 767px) {
  .ecs-header .ecs-country { min-width: 44px; height: 44px; padding: 0; }
  .ecs-tool--lang select.form-select { height: 44px; }
  body:not(#module-ecmcore-bundle):not(#checkout) .ecs-compare-bar {
    bottom: 76px; max-height: calc(100dvh - 84px); overflow-y: auto;
  }
}

/* On tablets, give the lone menu icon a deliberate 44px button and a clear row. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ecs-header__nav { display: flex; align-items: center; height: 58px; padding: 6px 20px; border-top: 1px solid var(--ecs-line); }
  .ecs-header__nav .ps-mainmenu--desktop { display: flex; align-items: center; width: auto; }
  .ecs-header__nav .ps-mainmenu__mobile-toggle .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--ecs-line); border-radius: 10px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ecs-header__search .ps-searchbar__input { font-size: 18px; }
}

/* On the narrowest product view the 4px tooltip gap extended variants past the viewport. */
@media (max-width: 359.98px) {
  .ecs-product__right .ecs-tooltip { margin-left: 0; }
}

/* An empty cart needs the return-to-shop action, not a zero-total checkout column. */
.cart-grid:has(.cart__empty) .cart-grid__aside { display: none; }
.cart-grid:has(.cart__empty) .cart-grid__content { width: 100%; }

/* Account: one clear primary action, quiet but recognizable alternatives. */
body#authentication .login,
body#password .forgotten-password {
  background:#fff;border:1px solid var(--ecs-line);border-radius:18px;
  padding:clamp(20px,3vw,32px);
}
body#authentication .login hr { border-color:var(--ecs-line);opacity:1;margin:24px 0 20px; }
body#authentication .login .buttons-wrapper--split {
  display:flex;flex-direction:column-reverse;align-items:stretch;gap:10px;margin-top:20px;
}
body#authentication #submit-login,
body#password #send-reset-link {
  width:100%;min-height:50px;font-size:16px;font-weight:700;
}
body#authentication .login .btn-basic,
body#password #back-to-login {
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 18px;border:1px solid var(--ecs-line);border-radius:999px;
  background:#fff;color:var(--ecs-ink);font-weight:600;text-decoration:none;
}
body#authentication .login .btn-basic { align-self:center; }
body#authentication .login .btn-basic:hover,
body#password #back-to-login:hover { border-color:var(--ecs-ink);background:var(--ecs-paper);color:var(--ecs-ink); }
body#authentication .login__register-prompt { text-align:center; }
body#authentication .login__register-prompt h2 { margin:0 0 12px;font-size:16px;font-weight:600; }
body#authentication .login__register-prompt .d-grid { justify-items:center; }
body#authentication .login__register-prompt .btn {
  width:auto;min-width:min(100%,230px);min-height:46px;display:inline-flex;
  align-items:center;justify-content:center;padding:10px 20px;
  color:var(--ecs-ink);border-color:var(--ecs-ink);font-weight:600;
}
body#authentication .login__register-prompt .btn:hover { color:#fff;background:var(--ecs-ink);border-color:var(--ecs-ink); }
body#authentication .login .form-control,
body#password .form-control {
  min-height:50px;padding:12px 15px;border:1px solid #cecac5;border-radius:12px;
  background:#fff;font-size:16px;
}
body#authentication .login .password-field .form-control,
body#password .password-field .form-control { border-radius:12px 0 0 12px; }
body#authentication .login .password-field > .btn,
body#password .password-field > .btn {
  min-width:52px;border:1px solid #cecac5;border-left:0;border-radius:0 12px 12px 0;
  background:#fff;color:var(--ecs-ink);
}
body#authentication .login .password-field > .btn:hover,
body#password .password-field > .btn:hover { background:var(--ecs-paper);color:var(--ecs-ink); }
body#authentication .login .form-label,
body#password .form-label { font-weight:600; }
body#authentication .login :is(a,button,input):focus-visible,
body#password :is(a,button,input):focus-visible { outline:2px solid var(--ecs-accent);outline-offset:2px; }
@media(max-width:575.98px){
  body#authentication .login,body#password .forgotten-password{padding:20px 18px;}
  body#authentication .login__register-prompt .btn{width:100%;}
}
/* Checkout: make the purchase path explicit before asking for contact details. */
.ecs-contact__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 24px;
}
.ecs-contact__choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 91px;
  padding: 15px 14px;
  border: 1px solid var(--ecs-line);
  border-radius: 14px;
  background: #fff;
  color: var(--ecs-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ecs-contact__choice:hover {
  border-color: var(--ecs-ink);
  background: #faf9f7;
  color: var(--ecs-ink);
  text-decoration: none;
}
.ecs-contact__choice[aria-pressed="true"] {
  border-color: var(--ecs-accent);
  background: #fff8f5;
}
.ecs-contact__choice:focus-visible {
  outline: 2px solid var(--ecs-accent);
  outline-offset: 3px;
}
.ecs-contact__choice-mark {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid #898990;
  border-radius: 50%;
}
.ecs-contact__choice[aria-pressed="true"] .ecs-contact__choice-mark {
  border-color: var(--ecs-accent);
}
.ecs-contact__choice[aria-pressed="true"] .ecs-contact__choice-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ecs-accent);
}
.ecs-contact__choice-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.ecs-contact__choice-copy strong { font-size: 15px; line-height: 1.25; font-weight: 700; }
.ecs-contact__choice-copy small { color: var(--ecs-muted); font-size: 12.5px; line-height: 1.35; }
.ecs-contact__choice--login { align-items: flex-start; border-color: #cbc8c3; }
.ecs-contact__choice-arrow { flex: 0 0 auto; margin-left: auto; font-size: 20px; line-height: 1; }
.ecs-contact__details-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ecs-ink); }
.ecs-contact__account { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ecs-contact__check[hidden], .ecs-contact__pwd[hidden] { display: none !important; }
.ecs-contact__pwd { margin: 15px 0 0; }
.ecs-contact__pwd .form-label { font-weight: 600; }
.ecs-contact .form-control {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #cecac5;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
.ecs-contact .form-control:focus { border-color: var(--ecs-accent); box-shadow: 0 0 0 3px rgba(206,70,54,.12); }
.ecs-contact .password-field .form-control { border-radius: 12px 0 0 12px; }
.ecs-contact .password-field > .btn {
  min-width: 52px;
  border: 1px solid #cecac5;
  border-left: 0;
  border-radius: 0 12px 12px 0;
  background: #fff;
  color: var(--ecs-ink);
}
.ecs-contact .password-field > .btn:hover { background: var(--ecs-paper); color: var(--ecs-ink); }
@media (max-width: 767.98px) {
  .ecs-contact__choices { grid-template-columns: 1fr; gap: 8px; margin: 12px 0 22px; }
  .ecs-contact__choice { align-items: center; min-height: 63px; padding: 11px 14px; }
  .ecs-contact__choice-mark { margin-top: 0; }
  .ecs-contact__choice-copy { gap: 2px; }
}

/* ── Scheda prodotto: brief telefonico Ale + Federico del 06/10/2026 ──────────────────────────
   Blocco unico in fondo: per tornare a prima si toglie (e si rimette il template di prima).
   1. Foto a 2/5 e colonna d'acquisto a 3/5 (la griglia c'era gia' dal 02/10): la foto ora riempie la sua colonna.
   2. Riquadro d'acquisto: IVA sulla riga del prezzo, alla sua destra; spedizione e paese in un riquadro
      solo con «Cambia paese» come comando; quantita', «Aggiungi al carrello» e «Bundle & Save» sulla stessa riga.
   3. «Product Details» non compare piu' al cambio di combinazione (nodo nascosto).
   4. «Clients also bought» a fondo pagina, sei card nello stile del Bundle & Save. */
@media (min-width: 992px) {
  .ecs-p28 { --p28-img: clamp(320px, calc(100svh - var(--header-h, 190px) - 150px), 500px); }
}

.ecs-p28 .ecs-p28__buy {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 10px; row-gap: 12px; padding: 18px 20px; align-items: center;
}
.ecs-p28 .ecs-p28__price {
  grid-column: 1 / 3; grid-row: 1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0;
}
.ecs-p28 .ecs-p28__price .ecs-p28__tax { font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--ecs-muted); }
.ecs-p28 .ecs-p28__cart .product__availability { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; text-align: right; }
.ecs-p28 .ecs-p28__info { grid-column: 1 / -1; grid-row: 2; gap: 8px; }
.ecs-p28 .ecs-p28__info:empty { display: none; }
.ecs-p28 .ecs-p28__cart .product__quantity { grid-column: 1; grid-row: 3; }
.ecs-p28 .ecs-p28__cart .add { grid-column: 2 / -1; grid-row: 3; width: auto; }
.ecs-p28 .ecs-p28__buy.has-bundle .ecs-p28__cart .add { grid-column: 2; }
.ecs-p28 .ecs-p28__cart .ecs-bs { grid-column: 3; grid-row: 3; margin: 0; }
.ecs-p28 .ecs-p28__cart .product__minimal-quantity { grid-column: 1 / -1; grid-row: 4; }
/* i due pulsanti alla pari: stessa altezza, stesso corpo */
.ecs-p28 .ecs-p28__cart .product__add-to-cart-button,
.ecs-p28 .ecs-bs__btn {
  width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ecs-p28 .ecs-bs__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ecs-p28 .ecs-bs__pct { font-size: 22px; line-height: 1; }

/* spedizione: un riquadro, a sinistra il costo verso il paese, a destra il comando che lo cambia */
.ecs-p28 .ecs-p28__ship {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%;
  padding: 6px 6px 6px 12px; border-radius: 10px; background: #f5f4f2;
  font-size: 13px; line-height: 1.35;
}
.ecs-p28 .ecs-p28__ship .ecs-p28__ico { flex: 0 0 18px; }
.ecs-p28 .ecs-p28__ship-txt { flex: 1 1 200px; min-width: 0; }
.ecs-p28 .ecs-p28__ship .ecs-p28__change {
  flex: 0 0 auto; grid-column: auto; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--ecs-ink); border-radius: 10px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ecs-ink); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ecs-p28 .ecs-p28__ship .ecs-p28__change:hover { background: var(--ecs-ink); color: #fff; }
.ecs-p28 .ecs-p28__ship .ecs-p28__change:focus-visible { outline: 2px solid var(--ecs-ink); outline-offset: 2px; }

/* tablet e telefono: quantita' e carrello in riga, Bundle & Save sotto a tutta larghezza */
@media (max-width: 575.98px) {
  .ecs-p28 .ecs-p28__buy { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .ecs-p28 .ecs-p28__price { grid-column: 1 / -1; grid-row: 1; }
  .ecs-p28 .ecs-p28__cart .product__availability { grid-column: 1 / -1; grid-row: 2; justify-self: start; text-align: left; }
  .ecs-p28 .ecs-avail__status,
  .ecs-p28 .ecs-p28__cart .ecs-avail__status { align-items: flex-start; }
  .ecs-p28 .ecs-p28__info { grid-row: 3; }
  .ecs-p28 .ecs-p28__cart .product__quantity { grid-column: 1; grid-row: 4; justify-self: start; }
  .ecs-p28 .ecs-p28__cart .add,
  .ecs-p28 .ecs-p28__buy.has-bundle .ecs-p28__cart .add { grid-column: 2; grid-row: 4; width: auto; }
  .ecs-p28 .ecs-p28__cart .ecs-bs { grid-column: 1 / -1; grid-row: 5; }
  .ecs-p28 .ecs-p28__cart .product__minimal-quantity { grid-row: 6; }
  .ecs-p28 .ecs-p28__ship .ecs-p28__change { margin-left: 28px; }
}
@media (max-width: 359.98px) {
  .ecs-p28 .ecs-p28__cart .product__quantity { grid-column: 1 / -1; }
  .ecs-p28 .ecs-p28__cart .add,
  .ecs-p28 .ecs-p28__buy.has-bundle .ecs-p28__cart .add { grid-column: 1 / -1; grid-row: 5; }
  .ecs-p28 .ecs-p28__cart .ecs-bs { grid-row: 6; }
  .ecs-p28 .ecs-p28__cart .product__minimal-quantity { grid-row: 7; }
}

/* codici in fondo alla scheda tecnica: ora le righe sono due (riferimento e codice del costruttore), piu' basse */
.ecs-p28 .ecs-p28__table--ref .ecs-p28__row { min-height: 34px; }

/* i «dettagli» che PrestaShop ridisegna al cambio di combinazione non si mostrano mai nella scheda */
.ecs-p28 .js-product-details { display: none; }

/* «Clients also bought»: sei card compatte come quelle del Bundle & Save */
.ecs-also { max-width: 1300px; margin: 48px auto 56px; }
.ecs-also__title { margin: 0 0 16px; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; font-weight: 500; color: var(--ecs-ink); }
.ecs-also__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ecs-also__card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1.5px solid #e4e2de; border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.ecs-also__card:hover { border-color: #cfccc6; box-shadow: 0 6px 22px rgba(50, 50, 63, .10); }
.ecs-also__img { display: block; background: #f5f4f2; aspect-ratio: 1 / 1; }
.ecs-also__img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ecs-also__body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 9px 11px 11px; }
.ecs-also__brand { min-height: 13px; font-size: 10.5px; line-height: 1.25; color: var(--ecs-muted); text-transform: capitalize; }
.ecs-also__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
  font-size: 12.5px; line-height: 1.25; font-weight: 700; color: var(--ecs-ink); text-decoration: none;
}
.ecs-also__name::after { content: ""; position: absolute; inset: 0; }   /* tutta la card apre il prodotto */
.ecs-also__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; }
.ecs-also__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.ecs-also__was { font-size: 11px; font-weight: 600; color: var(--ecs-muted); text-decoration: line-through; }
.ecs-also__pr { font-size: 13.5px; font-weight: 800; color: var(--ecs-ink); }
.ecs-also__form { position: relative; z-index: 1; margin: 0; }
.ecs-also__add {
  position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1.5px solid #e4e2de; border-radius: 10px; background: #fff; color: var(--ecs-ink);
  font-size: 19px; line-height: 1; text-decoration: none; cursor: pointer; transition: all .12s;
}
.ecs-also__add:hover { border-color: var(--ecs-ink); background: var(--ecs-ink); color: #fff; }
.ecs-also__add .material-icons { font-size: 18px; }
@media (max-width: 1199.98px) { .ecs-also__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ecs-also__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ecs-also { margin: 32px auto 40px; } }
/* telefono: una riga che scorre di lato, la terza card si intravede (Federico 07/10) */
@media (max-width: 767.98px) {
  .ecs-also { margin: 32px auto 40px; }
  .ecs-also__grid { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ecs-also__grid::-webkit-scrollbar { display: none; }
  .ecs-also__card { flex: 0 0 calc((100% - 32px - 20px) / 2.25); min-width: 150px; scroll-snap-align: start; }
}

/* ───────── 08/10/2026 (Ale): menu dell'account senza rosso ─────────
   Le voci dell'area utente (tessere della pagina account, colonna di sinistra) e del menu utente in testata prendevano
   il corallo dei link, e una colonna intera di voci rosse pesava. Ora testo e icone sono in inchiostro; il corallo
   resta per la voce della pagina in cui ci si trova e al passaggio del mouse o del fuoco. */
.account-menu .account-menu__link,
.account-menu .account-menu__link .account-menu__icon,
.header-block .dropdown-menu .dropdown-item,
.header-block .dropdown-menu .dropdown-item .material-icons { color: var(--ecs-ink); }
.account-menu .account-menu__link:hover,
.account-menu .account-menu__link:focus-visible,
.account-menu .account-menu__link--active,
.account-menu .account-menu__link[aria-current="page"],
.account-menu .account-menu__link:hover .account-menu__icon,
.account-menu .account-menu__link:focus-visible .account-menu__icon,
.account-menu .account-menu__link--active .account-menu__icon,
.account-menu .account-menu__link[aria-current="page"] .account-menu__icon,
.header-block .dropdown-menu .dropdown-item:hover,
.header-block .dropdown-menu .dropdown-item:focus-visible,
.header-block .dropdown-menu .dropdown-item[aria-current="page"],
.header-block .dropdown-menu .dropdown-item:hover .material-icons,
.header-block .dropdown-menu .dropdown-item:focus-visible .material-icons,
.header-block .dropdown-menu .dropdown-item[aria-current="page"] .material-icons { color: var(--ecs-accent); }
.account-menu .account-menu__link--active,
.account-menu .account-menu__link[aria-current="page"],
.header-block .dropdown-menu .dropdown-item[aria-current="page"] { font-weight: 600; }

/* 08/10/2026 (Ale): «My Coffee Corner» in evidenza, prima voce dell'account e del menu utente in testata */
.account-menu .account-menu__link.account-menu__link--evidenza,
.header-block .dropdown-menu .dropdown-item.dropdown-item--evidenza {
  background: color-mix(in srgb, var(--ecs-accent) 10%, #fff); color: var(--ecs-accent); font-weight: 600;
}
.account-menu .account-menu__link.account-menu__link--evidenza .account-menu__icon,
.header-block .dropdown-menu .dropdown-item.dropdown-item--evidenza .material-icons { color: var(--ecs-accent); }
.account-menu .account-menu__link.account-menu__link--evidenza:hover,
.account-menu .account-menu__link.account-menu__link--evidenza:focus-visible,
.header-block .dropdown-menu .dropdown-item.dropdown-item--evidenza:hover,
.header-block .dropdown-menu .dropdown-item.dropdown-item--evidenza:focus-visible { background: color-mix(in srgb, var(--ecs-accent) 16%, #fff); }
.account-menu--gruppi .account-menu__link.account-menu__link--evidenza { grid-column: 1 / -1; }
.account-menu--sidebar .account-menu__link.account-menu__link--evidenza { border-radius: 10px; margin-bottom: 6px; }

/* 08/10/2026 (Ale): nella colonna dell'account, sotto «My Coffee Corner», le sue tre sotto-voci (Garage, Consumabili,
   Salvadanaio) rientrate e un po' più piccole; quella della pagina aperta si evidenzia come le altre voci attive. */
.account-menu--sidebar .account-menu__link.account-menu__link--sotto { padding: .5rem 1rem .5rem 2.25rem; font-size: .9375rem; }
.account-menu--sidebar .account-menu__link.account-menu__link--sotto .account-menu__icon { font-size: 1.25rem; }
.account-menu--sidebar .account-menu__link--sotto + .account-menu__link:not(.account-menu__link--sotto) { margin-top: 6px; }

/* 14/10/2026 (Federico, pagina prodotto prima del go-live) ------------------------------------------------
   1) pallini colore bicolore divisi in VERTICALE e non in diagonale. Le texture img/co/<id>.jpg sono dati di catalogo
      (diagonali, riallineate ogni notte dalla produzione): qui si sostituiscono a video con due metà degli stessi
      colori, presi dai pixel delle texture. Solo nella scheda prodotto; i materiali (2198, 2199, 407) restano texture. */
.product__variants .color.texture[style*="/co/10867.jpg"] { background: linear-gradient(90deg, #c9cdd0 50%, #ecede8 50%) !important; }
.product__variants .color.texture[style*="/co/10868.jpg"] { background: linear-gradient(90deg, #c9cdd0 50%, #d9a687 50%) !important; }
.product__variants .color.texture[style*="/co/3485.jpg"] { background: linear-gradient(90deg, #dddddd 50%, #8a5c3b 50%) !important; }
.product__variants .color.texture[style*="/co/4097.jpg"] { background: linear-gradient(90deg, #c8c8c8 50%, #8a5c3b 50%) !important; }
.product__variants .color.texture[style*="/co/77.jpg"] { background: linear-gradient(90deg, #a1a1a1 50%, #1e1e1e 50%) !important; }
.product__variants .color.texture[style*="/co/78.jpg"] { background: linear-gradient(90deg, #c8c9c4 50%, #7b7e6b 50%) !important; }
.product__variants .color.texture[style*="/co/93.jpg"] { background: linear-gradient(90deg, #232323 50%, #9a9997 50%) !important; }
.product__variants .color.texture[style*="/co/94.jpg"] { background: linear-gradient(90deg, #2a2a2a 50%, #835941 50%) !important; }
.product__variants .color.texture[style*="/co/96.jpg"] { background: linear-gradient(90deg, #202020 50%, #ba764f 50%) !important; }
/* 2) pallini della galleria: con tante foto andavano oltre il riquadro e sotto la lente (TCA Inox/nero: 35).
      Ora vanno a capo dentro il riquadro e lasciano libero l'angolo della lente. */
.ecs-p28 .product__thumbnails { padding: 0 64px; }
.ecs-p28 .product__thumbnails-list { flex-wrap: wrap; row-gap: 6px; }
/* 3) tendine sotto la scheda (Descrizione, Cosa c'è nella scatola, Ricambi, Recensioni... a sinistra; Scheda tecnica a destra).
      Telefono e tablet: ogni tendina ha un'altezza massima e si scorre DENTRO; «Leggi tutto» apre la descrizione
      nello stesso riquadro scorrevole.
      Computer (14/10 sera, Federico: «le due colonne perfettamente della stessa lunghezza»): le due colonne sono ALTE
      UGUALI e finiscono sulla stessa riga. L'altezza la dà la Scheda tecnica (min 440 px, max lo schermo meno l'header);
      a sinistra è aperta una tendina alla volta (data-bs-parent nel tpl) e prende lo spazio che resta, scorrendo dentro. */
:root { --ecs-panel-max: min(520px, 65vh); }
@media (max-width: 991.98px) {
  .ecs-p28__below .accordion-collapse:not(#product_description_collapse) > .accordion-body {
    max-height: var(--ecs-panel-max); overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable;
  }
  .ecs-p28__desc.is-open { max-height: var(--ecs-panel-max); overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; padding-right: 6px; }
}
@media (min-width: 992px) {
  .ecs-p28__below {
    --ecs-below-min: 440px;
    --ecs-below-max: max(var(--ecs-below-min), min(760px, calc(100vh - var(--header-h, 120px) - 48px)));
    align-items: stretch; grid-template-rows: minmax(var(--ecs-below-min), auto);
  }
  .ecs-p28__below > .ecs-p28__col { display: flex; flex-direction: column; min-height: 0; max-height: var(--ecs-below-max); }
  .ecs-p28__below > .ecs-p28__col > .ecs-accordion {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid rgba(50, 50, 63, .5);
  }
  .ecs-p28__below .ecs-accordion > .accordion-item { flex: 0 0 auto; }
  .ecs-p28__below .ecs-accordion > .accordion-item:has(> .accordion-collapse.show, > .accordion-collapse.collapsing) {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  }
  .ecs-p28__below .collapsing { transition: none; }
  /* a sinistra il testo della tendina aperta non allunga la colonna: riempie lo spazio che resta e scorre */
  #product_accordion > .accordion-item > .accordion-collapse:is(.show, .collapsing) { flex: 1 1 0; min-height: 0; height: auto !important; position: relative; }
  #product_accordion > .accordion-item > .accordion-collapse:is(.show, .collapsing) > .accordion-body {
    position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable;
  }
  /* la descrizione intera, senza taglio e senza «Leggi tutto»: si scorre nel riquadro */
  #product_accordion .ecs-p28__desc { max-height: none; overflow: visible; }
  #product_accordion .ecs-p28__desc::after { content: none; }
  #product_accordion .ecs-p28__more { display: none; }
  /* a destra la Scheda tecnica fino all'altezza massima, poi scorre */
  #product_specs > .accordion-item { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #product_specs > .accordion-item > .accordion-collapse:is(.show, .collapsing) { flex: 1 1 auto; min-height: 0; height: auto !important; display: flex; flex-direction: column; }
  #product_specs > .accordion-item > .accordion-collapse > .accordion-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; }
}
/* 4) gruppo COLORE con una sola scelta (R58 Cinquantotto: solo «Cromo»): non si mostra. Resta nella pagina,
      nascosto, perché il suo valore serve a PrestaShop per trovare la combinazione; link e URL non cambiano. */
.product-variant.ecs-variant--unica { display: none !important; }

/* ═══ Ricerca JoliSearch nella grafica ECS (14/10/2026, Federico: «bruttissima la formattazione, non c'entra niente con
   la nostra grafica»; categorie con «No image available»). Solo CSS sopra al tema «modern» del modulo: niente nel
   modulo; in configurazione solo AAJJSS_DROPDOWN_LIST_POSITION = left (14/10: il box parte dove parte il testo cercato). Categorie e marche diventano pastiglie di testo come i filtri del Bundle & Save. ═══ */
body .jolisearch-dropdown.jolisearch-theme-modern{
  width:min(800px, calc(100vw - 32px)) !important;   /* 800 dal bordo sinistro della ricerca: finisce dentro lo schermo da 1366 in su (356-1156) */
  max-height:calc(100vh - 150px);overflow-y:auto;
  padding:18px 18px 14px;border:1px solid var(--ecs-line);border-radius:16px;background:#fff;
  box-shadow:0 18px 50px rgba(50,50,63,.18);font-family:var(--bs-body-font-family);color:var(--ecs-ink);
}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item{background:transparent;padding:0 4px;margin-bottom:6px}
/* testate di sezione: etichetta piccola grigia, non più la linguetta nera */
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item.jolisearch-section{width:100%;padding:14px 4px 0;margin:6px 0 8px;border-top:1px solid var(--ecs-line)}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-container>.jolisearch-section:first-child{padding-top:0;margin-top:0;border-top:0}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item.jolisearch-section .jolisearch-title{
  position:static;display:block;margin:0;padding:0;background:none;color:var(--ecs-muted);text-shadow:none;box-shadow:none;
  border-radius:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item.jolisearch-section .jolisearch-title:after{display:none}
/* prodotti: come le schede del bundle, allineati a sinistra */
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item a{
  padding:8px;border:1px solid transparent;border-radius:12px;color:var(--ecs-ink);text-align:left;text-decoration:none;transition:background .12s,border-color .12s}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item a:hover{background:var(--ecs-paper) !important;border:1px solid var(--ecs-line);border-radius:12px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item a:focus,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item a.jolisearch-item--focus,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item a.jolisearch-item--active{outline:2px solid var(--ecs-ink);outline-offset:1px;background:var(--ecs-paper) !important}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-image{width:100%;height:100px;object-fit:contain;margin:0 0 8px;border:0;border-radius:8px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description{padding:0 2px;justify-content:flex-start}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description span{padding:0}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description.product .jolisearch-name{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ecs-ink)}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description.product .jolisearch-name strong{display:block;font-size:12px;font-weight:500;color:var(--ecs-muted);margin-bottom:2px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-features:empty{display:none}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-post{font-size:12px;color:var(--ecs-muted);margin-top:3px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-price{font-size:14.5px;font-weight:700;color:var(--ecs-ink);margin-top:6px}
/* categorie e marche: pastiglie di testo, senza immagine */
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.category),
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.manufacturer){width:auto;padding:0;margin:0 8px 8px 4px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.category) a,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.manufacturer) a{
  flex-direction:row;align-items:center;height:auto;padding:7px 12px;background:#fff;border:1.5px solid var(--ecs-line);border-radius:10px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.category) a:hover,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.manufacturer) a:hover{border:1.5px solid var(--ecs-ink);border-radius:10px;background:#fff !important}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.category) .jolisearch-image,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item:has(.jolisearch-description.manufacturer) .jolisearch-image{display:none}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description.category,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description.manufacturer{height:auto;margin:0;padding:0;flex-direction:row;align-items:baseline;gap:6px}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description.category .jolisearch-name,
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description.manufacturer .jolisearch-name{font-size:13px;font-weight:600;color:var(--ecs-ink);white-space:nowrap}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-description .jolisearch-name strong{font-weight:inherit}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-results{font-style:normal;font-size:12px;color:var(--ecs-muted)}
/* «Altri risultati»: pulsante, non riga grigia */
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item.more-results{margin:10px 0 0;padding:12px 4px 0;border-top:1px solid var(--ecs-line);text-align:center}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item.more-results a{
  display:inline-block;padding:10px 20px;border:1.5px solid var(--ecs-ink);border-radius:10px;font-size:13.5px;font-weight:700;color:var(--ecs-ink);background:#fff}
body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-item.more-results a:hover{background:var(--ecs-ink) !important;color:#fff;border:1.5px solid var(--ecs-ink);border-radius:10px}
@media (max-width:576px){
  body .jolisearch-dropdown.jolisearch-theme-modern{padding:14px 10px 10px;border-radius:12px}
  body .jolisearch-dropdown.jolisearch-theme-modern .jolisearch-image{height:96px}
}

/* 14/10/2026 (Federico): riempitivo sotto il carrello, descrizione breve + garanzie (ecs-product-v2809.tpl).
   Sul computer non supera mai il fondo della foto: lo script sceglie quante righe tenere. */
.ecs-p28__fill{margin-top:22px}
.ecs-p28__exc{font-size:15px;line-height:1.55;color:#32323f;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--fill-l,4);overflow:hidden}
.ecs-p28__exc-more{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;color:#32323f;text-decoration:underline;text-underline-offset:3px}
.ecs-p28__trust{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid #d9d6d2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.ecs-p28__trust a{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;color:#32323f;text-decoration:none}
.ecs-p28__trust a:hover span{text-decoration:underline;text-underline-offset:3px}
.ecs-p28__trust svg{flex:0 0 22px}
.ecs-p28__fill.is-row .ecs-p28__trust{grid-template-columns:repeat(var(--fill-n,4),minmax(0,1fr));gap:10px 14px;margin-top:16px;padding-top:14px}
.ecs-p28__fill.is-row .ecs-p28__trust a{font-size:13px;line-height:1.3;gap:8px}
.ecs-p28__fill.no-exc .ecs-p28__exc,.ecs-p28__fill.no-exc .ecs-p28__exc-more{display:none}
.ecs-p28__fill.is-hidden{display:none}
/* 15/10/2026 (Federico): su telefono e tablet il riempitivo non serve, allunga solo la pagina (stessa soglia dello script) */
@media (max-width:991.98px){.ecs-p28__fill{display:none}}

/* 15/10/2026 (Federico): sopra la foto niente tasti. «Write your review» (productcomments, solo da collegati) e
   «Confronta» uscivano in alto a sinistra sull'immagine; il confronto resta nelle schede della categoria e nella testata. */
.ecs-p28__tools { display: none !important; }