/* =========================================================================
   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:     #e64b38;   /* corallo del logo */
  --ecs-accent-600: #d13a28;
  --ecs-accent-050: #fdeeec;
  --ecs-paper:      #f2f1ef;
  --ecs-line:       #e3e1dd;
  --ecs-muted:      #8a8086;
  --ecs-content-max: 1320px;   /* = .container-xxl di Hummingbird: larghezza unica header+home */

  /* --- Override token Bootstrap usati da Hummingbird --- */
  --bs-primary: #e64b38;
  --bs-primary-rgb: 230,75,56;
  --bs-link-color: #e64b38;
  --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-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); }
.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; }
}

/* ---- 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:#AFAFAF; fill:none; cursor:pointer;
}
.ecs-header__search .ps-searchbar__form:focus-within .js-search-icon { stroke:var(--ecs-accent); }

/* 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); }
.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:#AFAFAF;
}
.ecs-header__nav .ps-mainmenu__tree > li .ps-mainmenu__tree-link:hover {
  color:var(--ecs-menu-color, var(--ecs-ink));
}
/* pill colorata sulla voce corrente: è l'unico punto in cui la produzione usa il colore */
.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-color, var(--ecs-ink)); color:#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; }  /* Macchine Espresso */
.ecs-header__nav [data-id="category-8"]  { --ecs-menu-color:#BEB35F; }  /* Macinacaffè */
.ecs-header__nav [data-id="category-26"] { --ecs-menu-color:#32323F; }  /* Set */
.ecs-header__nav [data-id="category-13"] { --ecs-menu-color:#5F8B95; }  /* Accessori */
.ecs-header__nav [data-id="category-25"] { --ecs-menu-color:#BA7D63; }  /* Caffè */
.ecs-header__nav [data-id="category-24"] { --ecs-menu-color:#8A8086; }  /* Pour Over */
.ecs-header__nav [data-id="category-36"] { --ecs-menu-color:#CB7FB6; }  /* Design Collection */
.ecs-header__nav [data-id="category-27"] { --ecs-menu-color:#5BAC83; }  /* Offerte */
.ecs-header__nav [data-id="manufacturers"] { --ecs-menu-color:#7C83BC; } /* 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; }
}
/* 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); --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); }

/* 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); }
/* 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 */
.product-miniature__variants { display:flex; flex-wrap:wrap; gap:.35rem; 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); }
/* 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); background:#fff;
}

/* ---- Prezzi / flag ---- */
.price, .product-price, .current-price-value, .product-miniature .price { color:var(--ecs-accent); 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); 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); }

/* ---- 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);
  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); }
.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) !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: #e64b38; --bs-tertiary-bg-rgb: 230,75,56; --bs-body-bg: #e64b38; }
.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; }
.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:.5; transition:opacity .33s ease-out; }
.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 { opacity:.5; 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:75%; }
  .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); }
.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); border-bottom-color:var(--ecs-accent); }
.text-primary { color:var(--ecs-accent) !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-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-color); background:var(--ecs-cat-tint, rgba(230,75,56,.10));
}
.ecs-listing .subcategory__link:hover { color:#fff; background: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-listing--cat8  { --ecs-cat-color:#BEB35F; --ecs-cat-tint:rgba(190,179,95,.14); }
.ecs-listing--cat26 { --ecs-cat-color:#32323F; --ecs-cat-tint:rgba(50,50,63,.08); }
.ecs-listing--cat13 { --ecs-cat-color:#5F8B95; --ecs-cat-tint:rgba(95,139,149,.12); }
.ecs-listing--cat25 { --ecs-cat-color:#BA7D63; --ecs-cat-tint:rgba(186,125,99,.12); }
.ecs-listing--cat24 { --ecs-cat-color:#8A8086; --ecs-cat-tint:rgba(138,128,134,.12); }
.ecs-listing--cat36 { --ecs-cat-color:#CB7FB6; --ecs-cat-tint:rgba(203,127,182,.12); }
.ecs-listing--cat27 { --ecs-cat-color:#5BAC83; --ecs-cat-tint:rgba(91,172,131,.12); }

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

/* ---- 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); }
.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:#8A8086; 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-color, var(--ecs-accent));
  background:var(--ecs-cat-tint, rgba(230,75,56,.10));
  border:1px solid transparent;
}
.ecs-facets__category:hover { color:#fff; background:var(--ecs-cat-color, var(--ecs-accent)); }
.ecs-facets__category.is-active {
  color:#fff; background: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); }
.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); }
.ecs-facet__panel .search-filters__magnitude { color:#8A8086; 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);
  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; }

@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; }
  .ecs-facet { flex:0 0 auto; }
  .ecs-facet__panel { max-height:70vh; }
}

@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%; height:auto; border-radius:10px; display:block; }
.ets-blog-wrapper-content { flex:1 1 auto; min-width:0; }

/* 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); }
.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:#8A8086; }
.ets-blog-sidear-post-meta a { color:#8A8086; }
.ets-blog-sidear-post-meta a:hover { color:var(--ecs-accent); }

/* "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-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); }
.ets_blog_sidebar .form-control { border-radius:10px; }

/* 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; }

/* ------------------------------------------------------------- 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); }
.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-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); } }

/* 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); }

/* 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:#8A8086; 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); }
.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,#e64b38)}
.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,#e64b38)}
.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,#e64b38)}
.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,#e64b38)}
.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,#e64b38)}
.ecs-simili .prezzo{color:var(--ecs-accent,#e64b38);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);
  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); }
}