/* ============================================================ HEADER — account e carrello Questo foglio si carica su TUTTE le pagine, non solo sul negozio: il carrello nell'header c'è anche in home. Per questo i colori sono scritti per esteso invece che con i token --gr-*: quelli vivono dentro .gr-main (vedi home.css) e qui fuori non arriverebbero. Stessa scelta di footer.css. Sulla specificità: le regole di Woo per il mini carrello stanno sotto `.woocommerce`, che è una classe del e c'è solo sulle pagine del negozio. Il pannello quindi va vestito da zero (altrove arriverebbe nudo) e con selettori abbastanza lunghi da vincere quando invece quelle regole ci sono. ============================================================ */ /* Testo per i soli lettori di schermo. Le icone qui sotto non hanno etichetta visibile: senza questa classe un'icona sarebbe un pulsante muto. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================ LE DUE ICONE ============================================================ */ .gr-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .gr-header-actions__link, .gr-minicart__toggle { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease; } .gr-header-actions__link:hover, .gr-header-actions__link:focus-visible, .gr-minicart__toggle:hover, .gr-minicart__toggle:focus-visible { background: rgba(255, 255, 255, .12); color: #B6D94C; } .gr-header-actions svg { width: 21px; height: 21px; display: block; } .gr-minicart { position: relative; } /* Il numero di prodotti. Resta nel DOM anche a zero (solo nascosto): wc-cart-fragments lo ritrova per selettore, e un elemento che non c'è non si può sostituire. */ .gr-minicart__count { position: absolute; top: 1px; right: 0; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #B6D94C; color: #0E3B22; font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; } .gr-minicart__count.is-empty { display: none; } /* ============================================================ IL PANNELLO ============================================================ */ .gr-minicart__panel { position: absolute; top: calc(100% + 14px); right: 0; z-index: 1102; width: 346px; max-width: calc(100vw - 32px); padding: 22px; border: 1px solid rgba(14, 59, 34, .13); border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -30px rgba(14, 59, 34, .55); color: #152019; font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; text-align: left; animation: gr-minicart-in .18s cubic-bezier(.22, .61, .36, 1); } /* L'attributo hidden da solo basterebbe, ma bootstrap.min.css è globale e dichiara display su parecchi elementi: meglio dirlo esplicitamente. */ .gr-minicart__panel[hidden] { display: none; } @keyframes gr-minicart-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gr-minicart__panel { animation: none; } } /* La punta che aggancia il pannello all'icona. */ .gr-minicart__panel::before { content: ''; position: absolute; top: -7px; right: 15px; width: 12px; height: 12px; transform: rotate(45deg); border-top: 1px solid rgba(14, 59, 34, .13); border-left: 1px solid rgba(14, 59, 34, .13); border-radius: 2px 0 0 0; background: #fff; } /* ── L'elenco dei prodotti ── */ .gr-minicart__panel ul.woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; max-height: 46vh; overflow-y: auto; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item { position: relative; margin: 0; padding: 14px 30px 14px 0; border-bottom: 1px solid rgba(14, 59, 34, .12); list-style: none; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item:first-child { padding-top: 0; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item:last-child { border-bottom: 0; } /* Il link del prodotto contiene foto e nome: qui diventa una riga sola. Il selettore esclude il link "rimuovi", che è suo fratello. */ .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item a:not(.remove) { display: flex; align-items: center; gap: 12px; font-weight: 600; line-height: 1.3; color: #152019; text-decoration: none; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item a:not(.remove):hover { color: #175934; } /* Woo fa galleggiare la miniatura a destra a 32px: qui torna un quadrato a sinistra, allineato al nome. */ .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item img { float: none; width: 54px; height: 54px; flex-shrink: 0; margin: 0; border-radius: 10px; object-fit: cover; box-shadow: none; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item .quantity { display: block; margin-top: 6px; padding-left: 66px; color: #5F6D63; font-size: 13px; font-weight: 500; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item dl.variation { margin: 6px 0 0; padding-left: 66px; font-size: 12.5px; color: #5F6D63; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item dl.variation dt, .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item dl.variation dd { display: inline; margin: 0; padding: 0; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item a.remove { position: absolute; top: 50%; right: 0; left: auto; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: rgba(14, 59, 34, .06); /* Woo dichiara `color: red !important` su .woocommerce a.remove: senza un !important di rimando la crocetta resta rosso semaforo. È l'unico punto di questo foglio dove serve. */ color: #5F6D63 !important; font-size: 17px; font-weight: 500; line-height: 1; text-decoration: none; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item:first-child a.remove { top: 27px; } .gr-minicart__panel ul.woocommerce-mini-cart li.mini_cart_item a.remove:hover { background: rgba(180, 80, 46, .12); color: #B4502E !important; } /* ── Totale e bottoni ── */ .gr-minicart__panel p.woocommerce-mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 0; border-top: 1px solid rgba(14, 59, 34, .12); border-bottom: 0; font-size: 15px; } .gr-minicart__panel p.woocommerce-mini-cart__total strong { font-weight: 600; color: #5F6D63; } .gr-minicart__panel p.woocommerce-mini-cart__total .woocommerce-Price-amount { font-size: 19px; font-weight: 800; color: #0E3B22; } .gr-minicart__panel p.woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; padding: 0; } .gr-minicart__panel p.woocommerce-mini-cart__buttons a.button { display: block; width: 100%; margin: 0; padding: 13px 20px; border: 1.5px solid rgba(14, 59, 34, .25); border-radius: 999px; background: transparent; color: #0E3B22; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none; text-transform: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .gr-minicart__panel p.woocommerce-mini-cart__buttons a.button:hover { background: rgba(14, 59, 34, .05); color: #0E3B22; } /* "Vai alla cassa" è l'azione principale: piena, non a filo. */ .gr-minicart__panel p.woocommerce-mini-cart__buttons a.button.checkout { border-color: #0E3B22; background: #0E3B22; color: #fff; } .gr-minicart__panel p.woocommerce-mini-cart__buttons a.button.checkout:hover { background: #175934; border-color: #175934; color: #fff; } .gr-minicart__panel p.woocommerce-mini-cart__empty-message { margin: 0; padding: 12px 0; color: #5F6D63; text-align: center; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 1024px) { /* Il menu mobile è un pannello fisso a z-index 1100 che copre anche l'header: senza questo le icone ci finirebbero sotto e sparirebbero a menu aperto. L'hamburger sta a 1101, qui si sta alla pari. Niente `position: relative` qui, e non è una dimenticanza: questo è un figlio di .header-inner, che è flex, e su un elemento flex lo z-index vale anche da statico. Renderlo relative lo farebbe diventare il riferimento del pannello del carrello, che invece deve misurarsi sull'header per potersi stendere da un bordo all'altro (vedi più sotto, a 560px). */ .gr-header-actions { z-index: 1101; gap: 0; } .gr-header-actions__link, .gr-minicart__toggle { width: 40px; height: 40px; } /* A menu aperto il pannello sotto è bianco: le icone bianche non si vedrebbero più. Stesso trattamento che header.css riserva all'hamburger, ma preso dall'altro capo — le icone vengono prima del pulsante nel DOM, quindi non c'è un fratello da cui partire. */ header:has(#mobile-menu-open.is-open) .gr-header-actions__link, header:has(#mobile-menu-open.is-open) .gr-minicart__toggle { color: #152019; } .gr-minicart__panel { width: 320px; right: -8px; padding: 18px; } } @media (max-width: 560px) { /* Su telefono il pannello si stende da un bordo all'altro dello schermo. Per farlo deve smettere di misurarsi sull'icona, che è larga 40px, e prendere come riferimento l'header: da qui il position: static, che toglie .gr-minicart dalla catena dei riferimenti e la passa all'header, che è fisso e quindi largo quanto lo schermo. Il bollino non ne risente perché si misura su .gr-minicart__toggle, che resta relative. E la punta sparisce: puntava all'icona, e da qui in giù il pannello non è più agganciato a lei. */ .gr-minicart { position: static; } .gr-minicart__panel { top: calc(100% + 8px); left: 12px; right: 12px; width: auto; max-width: none; } .gr-minicart__panel::before { display: none; } }