/* ============================================================================= IL CASSETTO DEL CARRELLO — riscritto da zero il 04/09/2026 ----------------------------------------------------------------------------- Foglio di 000953. Veste il widget `woocommerce-menu-cart` di Elementor Pro in modalita' cassetto laterale. Via di fuga: ?cassetto=0 PERCHE' DA ZERO. Il foglio del 03/09 era nato in un pomeriggio e aveva poi ricevuto cinque toppe (sezioni 7-11), ognuna per vincere una battaglia di cascata persa dalla toppa precedente. Diverse regole erano scritte due volte — una a sole classi, che perdeva, e una col prefisso, che vinceva — e nessuno poteva piu' dire quale delle due comandasse. Qui ogni regola sta scritta UNA VOLTA SOLA, col prefisso giusto fin dall'inizio. ----------------------------------------------------------------------------- ⚠️ LA X GIGANTE: LA CAUSA, PER CHI TORNERA' QUI ----------------------------------------------------------------------------- Su ogni riga del cassetto era dipinta una X diagonale chiara larga 153 px, centrata sulla lista delle specifiche. Non era un artefatto della cattura. La disegnava ELEMENTOR, non noi — ma la scatenava una nostra riga. Nel foglio del widget (`widget-woocommerce-menu-cart.min.css`): .elementor-menu-cart__product-remove { position: absolute; ← il pulsante «togli» width: 22px; height: 22px; border: 1px solid #d5d8dc; border-radius: 22px; } .elementor-menu-cart__product-remove::before, .elementor-menu-cart__product-remove::after { content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 1px; ← PERCENTUALI background: #d5d8dc; z-index: 1; } .elementor-menu-cart__product-remove::before { transform: rotate(45deg) } .elementor-menu-cart__product-remove::after { transform: rotate(-45deg) } Cioe': la crocetta del pulsante «togli» NON e' un carattere, sono due barrette da 1 px larghe il 50%, ruotate di 45 gradi. Finche' il contenitore e' `position: absolute` quelle percentuali si misurano su SE STESSO — 50% di 22 px = 11 px — e vengono fuori 11 px di × pulita. Il foglio di ieri, inseguendo un altro difetto, aveva scritto `.elementor-menu-cart__product-remove { position: static }`. Da quel momento le due barrette non avevano piu' un antenato posizionato dentro il pulsante e andavano a misurarsi sul primo che trovavano: la RIGA, che lo stesso foglio aveva appena messo a `position: relative`. 50% di 307 px = 153,5 px di larghezza e `top: 50%` di 298 px di altezza — una X grande quanto la riga, ruotata di 45 gradi, dipinta con `z-index: 1` sopra tutto il resto. E' anche il motivo per cui tutte le prove fatte prima davano esito negativo: · non e' testo → sono due `background`, non un colore di testo · sopravvive al fondo rosso → `position: absolute` + `z-index: 1` · `elementsFromPoint` non trova niente sopra → gli pseudo-elementi NON sono elementi: quella funzione non li restituisce, per definizione · nessun `background-image`, nessun SVG grande, nessun `content` → giusto: la X non e' nessuna di quelle cose · con `?cassetto=0` sparisce → vero, ma perche' sparisce la nostra riga `position: static`, non perche' la X sia nostra LA REGOLA DA NON DIMENTICARE: un elemento assolutamente posizionato con misure in percentuale e' innocuo finche' il suo blocco contenitore e' quello che l'autore aveva in mente. Cambiare il `position` di un contenitore altrui non sposta un elemento: gli cambia il metro. Qui sotto il pulsante «togli» torna `position: absolute` — e la crocetta di Elementor torna a essere la sua, di 17 px, dentro il suo cerchio. ----------------------------------------------------------------------------- COME DEVE VENIRE ----------------------------------------------------------------------------- Il cassetto e la pagina /cart sono i due posti in cui il cliente guarda lo stesso ordine: devono somigliarsi. Il linguaggio arriva da `scatole-pagina-carrello.css`, che e' stato rifatto bene il 04/09: un'icona disegnata per ogni specifica, la misura interna promossa su un velo petrolio, etichetta piccola in maiuscoletto SOPRA il valore scuro. La differenza sta nella larghezza: la pagina /cart ha 900 px e puo' mostrare undici specifiche in due colonne, il cassetto ne ha 380 e in colonna sola diventerebbero un muro alto 400 px per riga. Qui si mostrano la misura e le tre voci seguenti, e il resto sta dietro un comando «＋N more details». Il cassetto e' un'occhiata; il documento e' /cart. ----------------------------------------------------------------------------- LA CASCATA SU QUESTO SITO ----------------------------------------------------------------------------- Le regole a sole classi PERDONO, perche' la casa scrive con gli ID: scatole-officina-03-negozio.css #header .elementor-menu-cart__product-image img { display: block } vale (1,1,1) e batte qualunque (0,n,n). Il cassetto vive dentro l'intestazione, quindi ogni regola qui comincia con `#header`. NESSUN `!important` in tutto il foglio, e non e' pignoleria: questo foglio viene messo in coda con priorita' 10700, cioe' DOPO quelli della casa e di Elementor, e a parita' di specificita' vince l'ultimo. «Dopo» basta. Un `!important` renderebbe impossibile correggere una pagina sola domani. ============================================================================= */ /* ============================================================================= 0 · I COLORI, DAI GETTONI DELLA CASA ----------------------------------------------------------------------------- Non si inventano: vengono da 00-fondamenta, con un valore di ripiego se un giorno quel foglio non ci fosse. Il petrolio e' --sc-mar-testo #226E78 — lo stesso della pagina /cart. Due petroli diversi nello stesso ordine si notano anche senza saperli nominare. ============================================================================= */ :root { --scc-fondo: var(--sc-fondo, #ffffff); --scc-tela: var(--sc-incasso, #f4f6f7); --scc-linea: var(--sc-linea, #eceef1); --scc-linea2: var(--sc-linea-2, #dde1e6); --scc-testo: var(--sc-ink, #0f1115); --scc-testo2: var(--sc-ink-2, #3f4750); --scc-tenue: var(--sc-ink-3, #616a75); --scc-accento: var(--sc-mar-testo, #226e78); --scc-scuro: var(--sc-mar-scuro, #1a555e); --scc-velo: var(--sc-mar-velo, #e9f3f4); --scc-urg: var(--sc-urg, #c41239); --scc-urg-vel: var(--sc-urg-fondo, #fdf0f3); --scc-ambra: var(--sc-stella, #c8860d); --scc-disp: var(--sc-disp, Lato, "Helvetica Neue", Arial, sans-serif); --scc-mono: var(--sc-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace); --scc-curva: var(--sc-curva, cubic-bezier(.22, 1, .36, 1)); --scc-raggio: 16px; } /* ============================================================================= 1 · IL VELO E IL PANNELLO ----------------------------------------------------------------------------- NIENTE `backdrop-filter`. C'era nel foglio di ieri e costa caro: sfocare un velo grande quanto la finestra e' lavoro per la scheda grafica a ogni fotogramma dell'animazione d'ingresso, su un telefono di fascia media si vede. Un velo un po' piu' fitto ottiene la stessa cosa gratis. ============================================================================= */ #header .elementor-menu-cart__container { background-color: rgb(15 17 21 / .42); } /* ⚠️ IL SELETTORE E' PIU' LUNGO DEL NECESSARIO APPOSTA. 03-negozio scrive `#header .elementor-menu-cart__container .elementor-menu-cart__main { padding: var(--sc-s5) }` che vale (1,2,0), e ne rimette 20 px anche dentro `@media (max-width: 767px)`. Un `#header .elementor-menu-cart__main` vale (1,1,0) e PERDE: misurato, il pannello si ritrovava 20 px di margine suo piu' i 20 della testata, cioe' 40 px di bianco a sinistra di ogni riga in un cassetto largo 375. Qui il padding va a zero e lo rimettono le fasce interne, una per una: cosi' l'elenco che scorre puo' arrivare fino al bordo e il piede resta ancorato. */ #header .elementor-menu-cart__container .elementor-menu-cart__main { width: 380px; max-width: 100%; padding: 0; border: 0; border-radius: var(--scc-raggio) 0 0 var(--scc-raggio); background-color: var(--scc-fondo); box-shadow: -20px 0 52px rgb(15 17 21 / .18); display: flex; flex-direction: column; /* Entra da destra e si ferma con una decelerazione lunga. 260 ms e' il punto in cui si legge come «veloce» senza sembrare uno scatto: sotto i 200 il cassetto compare e basta, sopra i 350 si aspetta. */ animation: scc-entra .26s var(--scc-curva) both; } @keyframes scc-entra { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } } /* ============================================================================= 2 · LA TESTATA — la mette 000953 ----------------------------------------------------------------------------- Di fabbrica in cima al cassetto c'e' una crocetta e nient'altro: un pannello che entra da destra senza dire cosa sia. Il titolo e il conto degli articoli costano due righe e tolgono un attimo di esitazione. ============================================================================= */ #header .scc-testa { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; /* 56 px a destra: lo spazio del pulsante di chiusura, che sta sopra. */ padding: 20px 56px 14px 20px; border-bottom: 1px solid var(--scc-linea); } #header .scc-titolo { font-family: var(--scc-disp); font-size: 17px; font-weight: 800; letter-spacing: -.005em; color: var(--scc-testo); } #header .scc-conta { font-family: var(--scc-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--scc-tenue); } /* IL PULSANTE DI CHIUSURA. Elementor lo mette nel flusso con `align-self: flex-end`; portandolo fuori dal flusso sta all'angolo del pannello — dove si cerca — e la testata puo' prendersi tutta la larghezza. 40 px di bersaglio: sotto i 40 un pollice sbaglia. */ #header .elementor-menu-cart__close-button-custom, #header .elementor-menu-cart__close-button { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; width: 40px; height: 40px; margin: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--scc-tenue); transition: background-color .16s var(--scc-curva), color .16s var(--scc-curva); } #header .elementor-menu-cart__close-button-custom:hover, #header .elementor-menu-cart__close-button:hover { background-color: var(--scc-tela); color: var(--scc-testo); } /* ⚠️ IL PULSANTE DI CHIUSURA PORTAVA UN CARRELLO DELLA SPESA. Misurato sul cassetto aperto: dentro `.elementor-menu-cart__close-button-custom` c'e' `svg.sc-due__icona--carrello`, cioe' l'icona del CARRELLO — qualcuno l'ha scelta nelle impostazioni del widget copiandola dalla levetta che apre il pannello. Su un pulsante che sta all'angolo di un carrello aperto, un cestino o un carrello non si legge «chiudi»: si legge «svuota». Chi ha appena configurato quattrocento scatole quel pulsante non lo tocca. Il segno giusto e' una croce, e la mette 000953 accanto all'altra invece che al suo posto: cosi' non si tocca 000945, che l'icona del carrello la usa ovunque. Qui si nasconde quella che non serve. */ #header .elementor-menu-cart__close-button-custom > svg:not(.scc-chiudi) { display: none; } #header .elementor-menu-cart__close-button-custom svg.scc-chiudi { width: 19px; height: 19px; fill: none; } /* ============================================================================= 3 · IL CORPO CHE SCORRE, E IL PIEDE CHE NON SCORRE ----------------------------------------------------------------------------- Il foglio di ieri teneva il piede in basso con `position: sticky` solo sul telefono. Non serve: se la catena dei contenitori e' una colonna flessibile fino in fondo, l'elenco si prende lo spazio che avanza e il piede sta sotto da solo — su ogni schermo. `min-height: 0` non e' un dettaglio: un elemento flessibile non scende sotto la misura del suo contenuto se non glielo si dice, e senza questa riga l'elenco cresce oltre il pannello e il piede finisce fuori schermo. `max-height: none` cancella il `calc(100vh - 250px)` di Elementor, che e' scritto in `vh` — e su iOS `vh` non tiene conto della barra che si ritrae. ============================================================================= */ #header .elementor-menu-cart__main .widget_shopping_cart_content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #header .elementor-menu-cart__products { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; /* Scorrendo la lista fino in fondo non si trascina anche la pagina sotto. */ overscroll-behavior: contain; padding: 4px 20px 8px; } /* ============================================================================= 4 · LA RIGA ----------------------------------------------------------------------------- PERCHE' UN FLOAT E NON UNA GRIGLIA. La lista delle specifiche non e' sorella della piastrella: sta DENTRO `.elementor-menu-cart__product-name`. Con una griglia sulla riga, le specifiche restano prigioniere della colonna del nome — 248 px invece di 300 — e la fascia della misura viene fuori rientrata e smilza. Facendo galleggiare la piastrella a sinistra, il nome le scorre accanto e la lista, che porta `clear: left`, ricomincia da bordo a bordo. `display: flow-root` invece di `overflow: hidden` per contenere il float: fa la stessa cosa senza tagliare niente, e qui c'e' un pulsante che sporge. ============================================================================= */ #header .elementor-menu-cart__product { display: flow-root; position: relative; /* 44 px a destra: la corsia del pulsante «togli», che sta sopra. */ padding: 16px 44px 16px 0; border-bottom: 1px solid var(--scc-linea); /* Le righe entrano una dopo l'altra: dice quante sono senza contarle. */ animation: scc-riga .3s var(--scc-curva) both; } #header .elementor-menu-cart__product:last-child { border-bottom: 0; } #header .elementor-menu-cart__product:nth-child(2) { animation-delay: .05s; } #header .elementor-menu-cart__product:nth-child(3) { animation-delay: .10s; } #header .elementor-menu-cart__product:nth-child(4) { animation-delay: .15s; } #header .elementor-menu-cart__product:nth-child(n+5) { animation-delay: .20s; } @keyframes scc-riga { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- LA PIASTRELLA -------------------------------------------------- */ #header .elementor-menu-cart__product-image { float: left; width: 42px; height: 42px; margin: 1px 12px 8px 0; border: 1px solid var(--scc-linea2); border-radius: 11px; background-color: var(--scc-tela); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* IL SEGNAPOSTO GRIGIO DI WOOCOMMERCE. Si nasconde SOLO quello: i gusci (8799, 4867, 8811) non hanno figura e non possono averla — ogni scatola e' diversa, e una foto sola sarebbe sbagliata per tutte tranne una. Se un domani un prodotto avra' una figura vera, quella continua a vedersi. */ #header .elementor-menu-cart__product-image img.woocommerce-placeholder { display: none; } #header .elementor-menu-cart__product-image img { width: 100%; height: 100%; object-fit: cover; } /* L'icona disegnata che prende il posto del segnaposto: la scatola vista di tre quarti, la stessa di /cart. La mette 000953 solo dove il segnaposto c'e' davvero. */ #header .scc-icona { width: 23px; height: 23px; color: var(--scc-accento); opacity: .85; } /* ---------- IL NOME -------------------------------------------------------- */ #header .elementor-menu-cart__product-name { margin: 0; padding: 0; font-family: var(--scc-disp); font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: var(--scc-testo); } #header .elementor-menu-cart__product-name a { color: inherit; font-size: inherit; text-decoration: none; transition: color .16s var(--scc-curva); } #header .elementor-menu-cart__product-name a:hover { color: var(--scc-accento); } /* LA PASTIGLIA DELLA MISURA, che mettono gli studi accanto al nome. Si vede solo sui gusci che NON hanno la riga «Inside» fra le specifiche: dove quella riga c'e', 000953 marca la riga con `.scc-ha-misura` e la misura la dice la fascia col velo, due centimetri piu' sotto. Scriverla due volte era rumore; nasconderla sempre sarebbe peggio, perche' su un guscio senza specifiche resterebbe l'unica misura del cassetto. */ #header .elementor-menu-cart__product-name .bl-riga-misura { display: inline-block; margin: 4px 0 0; padding: 3px 10px; border-radius: 999px; background-color: var(--scc-velo); color: var(--scc-accento); font-family: var(--scc-mono); font-size: 11px; font-weight: 600; letter-spacing: .01em; } /* ⚠️ E VA DOPO, non prima: le due regole hanno la stessa specificita' (1,2,1) e a parita' vince l'ultima scritta. Messa sopra, la riga che nasconde perdeva contro la riga che dipinge. Stessa trappola, stessa cura, del foglio di /cart. */ #header .scc-ha-misura .bl-riga-misura { display: none; } /* I CONTENITORI VUOTI DEL PLUGIN «UPLOAD FILES». Dentro la cella del nome lascia il ritagliatore (`.mfp-hide`, con dentro `#wcuf_cropper_popup` e `.wcuf_clearfix`) e un campo per caricare i file. Misurano quasi zero ma partecipano al flusso, portano margini e nel cassetto non hanno niente da fare: il file lo si carica nello studio, non qui. */ #header .elementor-menu-cart__product-name > div.mfp-hide, #header .elementor-menu-cart__product-name > div[class^="wcuf_cart_ajax"] { display: none; } /* ============================================================================= 5 · LE SPECIFICHE ----------------------------------------------------------------------------- Le stampa il plugin WCPA come `ul.wcpa_cart_meta` > `li.wcpa_cart_meta_item`, con dentro `p.wcpa_cart_meta_item-label` e `div.wcpa_cart_meta_item-value` — NON sono le variazioni di WooCommerce, e le regole scritte per `dl.variation` (c'erano, nel foglio di ieri) non mordevano niente. Di fabbrica etichetta e valore stanno su due righe e il valore e' PIU' PICCOLO dell'etichetta: risalta «Outer paper:», che il cliente sa gia', e si rimpicciolisce «Smooth Black», che e' quello per cui sta guardando. Qui la gerarchia si raddrizza: etichetta in maiuscoletto minuto sopra, valore scuro sotto, icona a sinistra che copre le due righe. ============================================================================= */ #header .elementor-menu-cart__product ul.wcpa_cart_meta { clear: left; list-style: none; margin: 12px 0 0; padding: 0; display: grid; row-gap: 10px; } #header .elementor-menu-cart__product li.wcpa_cart_meta_item { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0; padding: 0; border: 0; line-height: 1.35; } /* `flex: 0 0 auto` non basterebbe qui perche' non siamo in un flex, ma la trappola e' la stessa: un SVG con la sola larghezza dichiarata si schiaccia. In griglia la colonna da 18 px lo tiene, e le due misure lo confermano. */ #header .elementor-menu-cart__product .scc-segno { grid-row: 1 / 3; grid-column: 1; width: 18px; height: 18px; margin-top: 1px; color: var(--scc-accento); opacity: .78; } #header .elementor-menu-cart__product p.wcpa_cart_meta_item-label { grid-column: 2; display: block; margin: 0 0 1px; padding: 0; font-family: var(--scc-disp); font-size: 9.5px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--scc-tenue); white-space: normal; } /* Il valore e' un `
` che contiene un `

`: vanno presi tutti e due, o il paragrafo interno si riprende la misura del plugin. */ #header .elementor-menu-cart__product .wcpa_cart_meta_item-value, #header .elementor-menu-cart__product .wcpa_cart_meta_item-value p { grid-column: 2; display: block; margin: 0; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--scc-testo); text-transform: none; } /* ---------- LA RIGA D'APERTURA: LA MISURA INTERNA --------------------------- Larga tutta la riga, su un velo petrolio, col valore in mono e piu' grande. E' la sola voce che identifica la scatola: due clienti possono avere la stessa carta e la stessa lamina, non la stessa misura. Il resto conferma. `order: -1` e non un cambio di markup: nell'ordine con cui il plugin le stampa la misura non e' la prima («Vials» viene prima, sul Discovery), ma spostare i nodi con JavaScript vorrebbe dire rifarlo a ogni frammento e cambiare anche l'ordine di lettura di chi usa uno screen reader. `order` sposta solo il disegno. */ #header .elementor-menu-cart__product li.scc-spec--misura { order: -1; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; background-color: var(--scc-velo); } #header .elementor-menu-cart__product li.scc-spec--misura .scc-segno { width: 21px; height: 21px; margin-top: 0; opacity: 1; } #header .elementor-menu-cart__product li.scc-spec--misura p.wcpa_cart_meta_item-label { color: var(--scc-accento); opacity: .85; } #header .elementor-menu-cart__product li.scc-spec--misura .wcpa_cart_meta_item-value, #header .elementor-menu-cart__product li.scc-spec--misura .wcpa_cart_meta_item-value p { font-family: var(--scc-mono); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- GLI AVVISI ------------------------------------------------------ «Die-line template not published for this size yet» e' un avviso, non una scelta del cliente: ambra invece di petrolio, e senza grassetto, cosi' non si confonde con quello che ha configurato. */ #header .elementor-menu-cart__product li.scc-spec--nota .scc-segno { color: var(--scc-ambra); opacity: 1; } #header .elementor-menu-cart__product li.scc-spec--nota .wcpa_cart_meta_item-value, #header .elementor-menu-cart__product li.scc-spec--nota .wcpa_cart_meta_item-value p { font-weight: 500; color: var(--scc-testo2); } /* ---------- LE VOCI IN PIU', RIPIEGATE -------------------------------------- Il Discovery configurato per intero stampa UNDICI specifiche. In colonna sola dentro 380 px sono 400 px di muro per riga: due articoli in carrello e il pulsante «Checkout» finisce a tre schermate di distanza. Qui restano in vista la misura e le tre voci seguenti; il resto sta dietro un comando. Non e' nascondere: e' dire che il cassetto e' un'occhiata e /cart e' il documento. Le voci ci sono tutte, a un dito di distanza, e chi arriva col tastierino le raggiunge con `Tab` come qualunque altro comando. */ #header .elementor-menu-cart__product li.scc-extra { display: none; } #header .elementor-menu-cart__product.scc-aperta li.scc-extra { display: grid; } #header .scc-altre { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 5px 11px 5px 9px; border: 1px solid var(--scc-linea2); border-radius: 999px; background-color: transparent; color: var(--scc-tenue); font-family: var(--scc-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .16s var(--scc-curva), background-color .16s var(--scc-curva), color .16s var(--scc-curva); } #header .scc-altre:hover { border-color: var(--scc-accento); background-color: var(--scc-velo); color: var(--scc-accento); } #header .scc-altre:focus-visible { outline: 2px solid var(--scc-accento); outline-offset: 2px; } /* Il segno «＋» e' un SVG, non un carattere: una croce disegnata col tratto delle altre icone gira di 180 gradi quando la voce si apre, e il movimento dice cosa e' successo meglio di una parola cambiata. */ #header .scc-altre .scc-segno { width: 13px; height: 13px; color: currentColor; opacity: 1; transition: transform .2s var(--scc-curva); } #header .scc-altre[aria-expanded="true"] .scc-segno { transform: rotate(135deg); } /* ============================================================================= 6 · QUANTITA' E PREZZO — il piede della riga ----------------------------------------------------------------------------- WooCommerce stampa «400 × €1,30»: quantita' e prezzo UNITARIO, non il totale di riga. Non si tocca — qui si dice solo cio' che il negozio ha calcolato — ma si separa dal resto con un filo, perche' una cifra appesa in fondo a undici specifiche si legge come la dodicesima. ============================================================================= */ #header .elementor-menu-cart__product-price { clear: left; margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--scc-linea2); font-family: var(--scc-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--scc-testo2); } #header .elementor-menu-cart__product-price .product-quantity { color: var(--scc-tenue); } #header .elementor-menu-cart__product-price .woocommerce-Price-amount { font-weight: 700; color: var(--scc-testo); } /* ============================================================================= 7 · IL PULSANTE «TOGLI» — qui stava la X ----------------------------------------------------------------------------- ⚠️ `position: absolute` E' LA RIGA PIU' IMPORTANTE DEL FOGLIO. Vedi la nota in cima: le due barrette che formano la crocetta sono larghe il 50% del loro blocco contenitore, e questo contenitore E' il loro blocco contenitore solo finche' resta posizionato. Metterlo `static` — come faceva il foglio di ieri — le manda a misurarsi sulla riga intera, e viene fuori una X da 153 px. La crocetta la disegna Elementor e va bene: due barrette da 1 px ruotate, dentro un cerchio. Qui si cambiano solo il colore e la misura. IL LINK DENTRO E' UNA LASTRA TRASPARENTE (`opacity: 0`) stesa sul cerchio: e' il bersaglio, non il segno. Non e' un difetto e NON va acceso — accenderlo fu l'errore di ieri. Si allarga invece oltre il cerchio con `inset: -5px`, cosi' il segno resta di 34 px e il bersaglio arriva a 44: la misura di un polpastrello, su un comando che si preme quando si e' gia' sbagliato qualcosa. ============================================================================= */ #header .elementor-menu-cart__product-remove { position: absolute; top: 16px; inset-inline-end: 0; bottom: auto; width: 34px; height: 34px; border: 1px solid var(--scc-linea2); border-radius: 50%; overflow: visible; color: var(--scc-tenue); transition: border-color .16s var(--scc-curva), background-color .16s var(--scc-curva); } #header .elementor-menu-cart__product-remove::before, #header .elementor-menu-cart__product-remove::after { background-color: var(--scc-tenue); width: 44%; left: 28%; } #header .elementor-menu-cart__product-remove:hover { border-color: var(--scc-urg); background-color: var(--scc-urg-vel); } #header .elementor-menu-cart__product-remove:hover::before, #header .elementor-menu-cart__product-remove:hover::after { background-color: var(--scc-urg); } /* Il bersaglio. `width`/`height` a 100% non basterebbero: 03-negozio porta questo link a 44x44 con (1,2,1), e un link piu' grande del cerchio ma ancorato in alto a sinistra sporgeva in basso a destra. Con `inset` negativo il rettangolo cresce da tutti e quattro i lati, centrato sul cerchio. */ #header .elementor-menu-cart__product-remove > a { position: absolute; inset: -5px; width: auto; height: auto; display: block; opacity: 0; z-index: 2; } /* LE DUE CROCETTE. Elementor stampa due link di rimozione uno accanto all'altro: il suo (`elementor_remove_from_cart_button`, che aggiorna il cassetto senza ricaricare la pagina) e quello di WooCommerce. Uno solo va tenuto, o si preme una lastra e se ne attiva un'altra. */ #header .elementor-menu-cart__product-remove > a.remove_from_cart_button { display: none; } /* ============================================================================= 8 · IL TOTALE, E LA RIGA CHE DICE COSA NON E' COMPRESO ============================================================================= */ #header .elementor-menu-cart__subtotal { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; padding: 16px 20px 10px; border-top: 1px solid var(--scc-linea2); border-inline: 0; border-bottom: 0; background-color: var(--scc-fondo); } #header .elementor-menu-cart__subtotal strong { font-family: var(--scc-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--scc-tenue); } #header .elementor-menu-cart__subtotal .woocommerce-Price-amount { font-family: var(--scc-disp); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--scc-testo); } /* LA RIGA CHE DICE COSA NON E' COMPRESO — la mette 000953. Un totale senza quella riga fa credere che sia il prezzo finale, e la sorpresa arriva alla cassa: e' il punto in cui si perdono i carrelli gia' pieni. La spedizione costa 10,00 EUR sulla zona EUROPA (Flexible Shipping, verificato il 03/09) ed e' gratis solo per il campionario da solo: qui si dice cio' che si sa, e il calcolo lo mostra /cart. */ #header .scc-nota { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px; margin: 0 20px 12px; padding: 9px 11px; border-radius: 10px; background-color: var(--scc-tela); font-size: 11.5px; line-height: 1.45; color: var(--scc-tenue); } #header .scc-nota .scc-segno { flex: 0 0 auto; /* un SVG con la sola larghezza dichiarata si schiaccia a 0 dentro un flex: `flex-shrink` vale 1 di default */ width: 15px; height: 15px; margin-top: 1px; color: var(--scc-tenue); opacity: 1; } /* ============================================================================= 9 · I DUE PULSANTI ----------------------------------------------------------------------------- Affiancati e non impilati: due pulsanti a tutta larghezza costano 108 px di altezza in un pannello che sul telefono ne ha 812 in tutto, e quei 108 px sono righe di carrello che non si vedono. «Checkout» prende piu' spazio perche' e' l'unico che porta avanti, e sta a destra: e' il lato del pollice per la maggior parte delle persone. ============================================================================= */ #header .elementor-menu-cart__footer-buttons { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin: 0; padding: 0 20px 20px; background-color: var(--scc-fondo); } #header .elementor-menu-cart__footer-buttons .elementor-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 12px 10px; border-radius: 12px; font-family: var(--scc-disp); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .16s var(--scc-curva), box-shadow .22s var(--scc-curva), background-color .22s var(--scc-curva), border-color .22s var(--scc-curva), color .22s var(--scc-curva); } #header .elementor-menu-cart__footer-buttons .elementor-button--view-cart { border: 1px solid var(--scc-linea2); background-color: var(--scc-fondo); color: var(--scc-testo2); } #header .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover { border-color: var(--scc-accento); background-color: var(--scc-velo); color: var(--scc-accento); } #header .elementor-menu-cart__footer-buttons .elementor-button--checkout { border: 1px solid var(--scc-accento); background-color: var(--scc-accento); color: #fff; box-shadow: 0 2px 12px rgb(34 110 120 / .26); } #header .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { border-color: var(--scc-scuro); background-color: var(--scc-scuro); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgb(34 110 120 / .32); } #header .elementor-menu-cart__footer-buttons .elementor-button:active { transform: translateY(0); } #header .elementor-menu-cart__footer-buttons .elementor-button:focus-visible { outline: 2px solid var(--scc-accento); outline-offset: 3px; } /* ============================================================================= 10 · IL CARRELLO VUOTO ----------------------------------------------------------------------------- Il pannello e' alto quanto lo schermo: una riga di testo in cima a 800 px di bianco sembra un errore di caricamento. Centrata, con la stessa scatola disegnata delle righe, sembra quello che e'. ============================================================================= */ #header .woocommerce-mini-cart__empty-message, #header .elementor-menu-cart__empty-message { /* `flex: 1 1 auto` e non solo `min-height`: il messaggio e' l'unico figlio di `.widget_shopping_cart_content`, che e' una colonna flessibile. Senza questa riga si accuccia in cima e sotto restano 600 px di bianco; con questa si prende tutto il pannello e `justify-content` lo mette in mezzo davvero. */ flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 220px; padding: 40px 24px; font-family: var(--scc-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--scc-tenue); } #header .woocommerce-mini-cart__empty-message .scc-icona { width: 44px; height: 44px; color: var(--scc-linea2); opacity: 1; } /* ============================================================================= 11 · IL TELEFONO — provato a 375 px ----------------------------------------------------------------------------- `dvh` e non `vh`: su iOS la barra dell'indirizzo che si ritrae cambia l'altezza della finestra, e con `vh` il piede — cioe' «Checkout» — finisce sotto il bordo dello schermo. ⚠️ Il caso da tavolo NON sta dentro un `@media (min-width: …)`: la finestra del browser di collaudo puo' misurare 0 px fra una chiamata e l'altra, e dentro quella parentesi non scatterebbe mai. Il caso normale si scrive fuori, e qui dentro c'e' solo cio' che cambia sul telefono. ============================================================================= */ @media (max-width: 767px) { /* Stesso selettore lungo del blocco 1, e per lo stesso motivo: qui dentro 03-negozio rimette `padding: var(--sc-s4)` con (1,2,0). */ /* `100% - 26px` E NON `100%`: la striscia di velo che resta a sinistra e' la decisione di 03-negozio — «a tutta larghezza meno un dito, cosi' si vede che e' un pannello e si puo' chiudere toccando fuori» — e vale la pena tenerla. Un cassetto a tutto schermo toglie l'unico gesto con cui si rinuncia senza cercare un pulsante. Ventisei pixel: sono quelli che aveva prima, per via dei 350 di Elementor su uno schermo da 375. */ #header .elementor-menu-cart__container .elementor-menu-cart__main { width: calc(100% - 26px); height: 100dvh; max-height: 100dvh; padding: 0; border-radius: 14px 0 0 14px; } #header .scc-testa { padding: 16px 56px 12px 16px; } #header .elementor-menu-cart__products { padding: 4px 16px 8px; } #header .elementor-menu-cart__product { padding: 14px 42px 14px 0; } #header .elementor-menu-cart__subtotal { padding: 14px 16px 10px; } #header .scc-nota { margin: 0 16px 10px; } #header .elementor-menu-cart__footer-buttons { /* Lo spazio della barra di sistema sui telefoni senza tasto: senza questo, «Checkout» finisce sotto la tacca. */ padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); } } /* ============================================================================= 12 · CHI NON VUOLE ANIMAZIONI ----------------------------------------------------------------------------- Non e' una cortesia: per chi soffre di disturbi vestibolari un pannello che scivola e' un sintomo. Qui il cassetto compare e basta — e tutto il resto funziona identico. ============================================================================= */ @media (prefers-reduced-motion: reduce) { #header .elementor-menu-cart__main, #header .elementor-menu-cart__product { animation: none; } #header .elementor-menu-cart__close-button-custom, #header .elementor-menu-cart__product-remove, #header .scc-altre, #header .scc-altre .scc-segno, #header .elementor-menu-cart__footer-buttons .elementor-button { transition: none; } #header .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { transform: none; } }