/* ============================================================================ ms-cartbtn.css — accesso al carrello (P3) ============================================================================ Lo stato del carrello NON è nell'HTML: la pagina arriva dalla cache LiteSpeed uguale per tutti, quindi nasce sempre "vuota". Il numero vero lo scrive lo snippet inline di inc/ms-cart-count.php su , PRIMA del paint. Qui si traduce quell'attributo in pixel: nessun lampeggio, e il pulsante è corretto anche se il JS esterno non gira mai. Palette: crema #F5F0E8 · carbone #23211D · rosso #D41119 (solo richiamo). ========================================================================== */ /* Testo per soli screen reader (il tema non ne ha uno proprio). */ .ms-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ============================================================================ 1. PULSANTE FLOTTANTE Valori ereditati dall'inline che stava in inc/woo-skin.php (wp_footer): ora vivono qui, in un file versionato e cache-bustato. ========================================================================== */ .ms-cartbtn{ position:fixed; z-index:120; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:.7em; background:var(--red,#D41119); color:#fff; font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:.95rem; padding:.9em 1.4em; border-radius:2px; box-shadow:0 10px 30px rgba(35,33,29,.22); text-decoration:none; transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s,background .3s; } .ms-cartbtn:hover, .ms-cartbtn:focus-visible{ background:var(--red-hover,#B00E15); color:#fff; } .ms-cartbtn.is-empty{ transform:translateY(180%); opacity:0; pointer-events:none; } .ms-cartbtn svg{ width:20px; height:20px; flex:none; } .ms-cartbtn__count{ background:#fff; color:var(--red,#D41119); border-radius:999px; min-width:1.6em; height:1.6em; display:inline-grid; place-items:center; font-size:.78rem; font-weight:700; padding:0 .45em; line-height:1; } @media(max-width:600px){ .ms-cartbtn{ left:16px; right:16px; bottom:16px; justify-content:center; padding:1.05em; font-size:1rem; } } /* IL FIX. L'HTML cachato dice "is-empty"; il cookie dice il contrario e lo dice prima del paint. Specificità 0,4,1: batte .ms-cartbtn.is-empty ovunque stia. */ html[data-ms-cart]:not([data-ms-cart="0"]) .ms-cartbtn.is-empty{ transform:none; opacity:1; pointer-events:auto; } /* Il pulsante copre l'ultima riga del footer: si compensa già dal primo paint, senza aspettare il :has() di coherence.css (che dipende dalla classe che toglie il JS). Non serve su carrello/checkout, dove il pulsante non esiste. */ html[data-ms-cart]:not([data-ms-cart="0"]) body:not(.woocommerce-cart):not(.woocommerce-checkout) .foot{ padding-bottom:104px; } @media(prefers-reduced-motion:reduce){ .ms-cartbtn{ transition:opacity .2s; } .ms-cartbtn.is-empty{ transform:none; } } /* ============================================================================ 2. ICONA CARRELLO NELL'HEADER — persistente, a QUALSIASI larghezza ============================================================================ site.css:86 (e la copia inline in ognuno dei 7 page-template) nasconde `.nav__menu` e `.nav__cta .btn` sotto i 900 px: su telefono, dopo un add-to-cart, il carrello non era raggiungibile se non digitando l'URL. Questa icona NON è un `.btn`, quindi quella regola non la tocca; la riga esplicita qui sotto lo rende un'intenzione, non un caso fortunato. ========================================================================== */ .ms-hcart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; /* target tattile pieno */ color:var(--cream,#F5F0E8); text-decoration:none; transition:color .4s,opacity .25s; } .ms-hcart svg{ width:22px; height:22px; display:block; } .ms-hcart:hover{ opacity:.72; } .ms-hcart:focus-visible{ outline:2px solid var(--red,#D41119); outline-offset:3px; } /* La nav è trasparente sopra la hero e diventa crema con lo scroll: l'icona segue lo stesso contratto di colore del burger (site.css:79-81). ⚠️ Qui c'era anche `.ms-shared .ms-hcart`, e `.ms-shared` sta sul di TUTTE le pagine con header condivisa (shop, carrello, scheda prodotto). Il colore seguiva quindi il TIPO DI PAGINA invece dello STATO della nav: sullo shop l'icona restava scura anche quando la nav è trasparente sopra l'hero scuro, cioè invisibile — ed era la differenza che si notava fra l'header della home e quella dello shop. Si tiene solo `.nav.scrolled`, che è la condizione vera: fondo crema → inchiostro; fondo scuro → crema. */ .nav.scrolled .ms-hcart{ color:var(--ink,#23211D); } body.menu-open .ms-hcart{ color:var(--cream,#F5F0E8); } /* Badge: unico punto in cui compare il rosso, ed è un richiamo vero. */ .ms-hcart__count{ position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--red,#D41119); color:#fff; font-family:'Inter',system-ui,sans-serif; font-size:10px; font-weight:700; line-height:17px; text-align:center; letter-spacing:0; box-shadow:0 0 0 2px var(--cream,#F5F0E8); /* stacca dall'icona su fondo crema */ } .nav:not(.scrolled) .ms-hcart__count{ box-shadow:none; } /* su hero scura il ring è un alone */ /* Il pallino si vede SEMPRE, anche a zero (richiesta di Luigi, 2026-08-11). Prima spariva a carrello vuoto: l'icona restava muta e non si capiva se il carrello fosse vuoto o se il numero non fosse ancora arrivato. Un `0` esplicito è un'informazione; l'assenza di pallino è un'ambiguità. A zero il pallino è smorzato — presente ma non richiama come il rosso, che resta riservato al carrello che ha davvero qualcosa dentro. */ html:not([data-ms-cart]) .ms-hcart__count, html[data-ms-cart="0"] .ms-hcart__count{ background:rgba(35,33,29,.42); color:var(--cream,#F5F0E8); } html:not([data-ms-cart]) .nav.scrolled .ms-hcart__count, html[data-ms-cart="0"] .nav.scrolled .ms-hcart__count{ background:rgba(35,33,29,.30); } @media(max-width:900px){ .nav__cta .ms-hcart{ display:inline-flex; } /* esplicito: NON è un .btn, non sparisce */ } @media(max-width:600px){ .ms-hcart{ width:40px; } } /* ============================================================================ 3. ATTRITI DELLA PIPELINE FRAGMENT ============================================================================ updateFragments() di WooCommerce fa addClass('updating') + fadeTo(.6) + $.blockUI() sull'elemento prima di sostituirlo. Su una barra fissa e su un'icona da 22px il velo grigio è solo un lampeggio sporco. */ .ms-cartbtn .blockUI, .ms-hcart .blockUI{ display:none!important; } .ms-cartbtn.updating, .ms-hcart.updating{ opacity:1!important; } /* Micro-conferma all'aggiunta: il numero "batte", il resto sta fermo. */ @keyframes ms-cart-bump{ 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} } .ms-hcart.is-bump .ms-hcart__count{ animation:ms-cart-bump .38s ease; } .ms-cartbtn.is-bump .ms-cartbtn__count{ animation:ms-cart-bump .38s ease; } @media(prefers-reduced-motion:reduce){ .ms-hcart.is-bump .ms-hcart__count, .ms-cartbtn.is-bump .ms-cartbtn__count{ animation:none; } }