/* ============================================================================= scatole.com — RIPARAZIONI TELEFONO ----------------------------------------------------------------------------- Caricato per ULTIMO (000943, priorita' 100000). Tutto quello che sta qui dentro vive in una media query: sopra i 767 px il sito e' quello di prima, pixel per pixel. Via di fuga: qualsiasi indirizzo + ?mob=0 NESSUN COLORE E NESSUNA MISURA INVENTATA: solo i gettoni di scatole-officina-00-fondamenta.css. PERCHE' UN FOGLIO NUOVO INVECE DI RITOCCARE I DODICI ESISTENTI Perche' cosi' la marcia indietro e' un file solo, e perche' tre pagine Studio sono in rifacimento da altri: sovrascrivere dall'esterno non entra in conflitto con chi ci sta lavorando dentro. LE MISURE CHE HANNO DETERMINATO OGNI REGOLA sono nel resoconto e nei JSON in /root/mobile/json/ (prima-*.json, dopo-*.json). ========================================================================== */ /* ============================================================================= 0 · LA BARRA "PRICES & ORDER" (scheda prodotto, telefono) ----------------------------------------------------------------------------- Misura del 2/9/2026 su /product/drawer-box a 360 px: ADD TO CART a y = 7.823 px su una pagina alta 12.008 px. Nove schermate. La barra non compra e non calcola: porta lo schermo sul pulsante vero. Sta SOTTO il banner iubenda (z 99999998), che deve restare il primo. ========================================================================== */ .sc-mob-barra { display: none; } @media (max-width: 767px) { .sc-mob-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: block; padding: var(--sc-s2) var(--sc-s3); padding-bottom: calc(var(--sc-s2) + env(safe-area-inset-bottom, 0px)); background-color: var(--sc-pannello); border-top: 1px solid var(--sc-linea-2); box-shadow: var(--sc-ombra-2); } .sc-mob-barra[hidden] { display: none; } .sc-mob-barra__vai { display: flex; align-items: center; justify-content: center; gap: var(--sc-s2); width: 100%; min-height: 48px; border: 0; border-radius: var(--sc-r); background-color: var(--sc-mar); color: var(--sc-mar-ombra); font-family: var(--sc-mono); font-size: 14px; /* sopra il pieno petrolio serve testo grande */ font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .sc-mob-barra__freccia { font-size: 15px; line-height: 1; } } /* ============================================================================= 1 · BERSAGLI DA TOCCARE — la soglia e' 44 x 44 ----------------------------------------------------------------------------- Il metodo: quando allargare il riquadro sposterebbe l'impaginato, si allarga solo la ZONA SENSIBILE con `padding` e la si ricompensa con un `margin` negativo pari. Il disegno resta identico, il dito trova il bersaglio. ========================================================================== */ @media (max-width: 767px) { /* --- il richiamo al campione, in cima a ogni pagina --------------------- Misurato 237,7 x 13 px: e' il primo collegamento che un cliente vede e era il piu' piccolo del sito. La striscia e' alta 36 px (gettone `--sc-barra-h` di 13-striscia): la porto a 44 SOLO sul telefono, dove la striscia ha una voce sola e lo spazio c'e'. 13-striscia non si tocca: si sovrascrive il suo gettone da qui, com'e' previsto. */ #header .e-con.e-parent:has(.gtranslate_wrapper) { --sc-barra-h: 44px; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] { display: inline-flex; align-items: center; min-height: 44px; } /* --- collegamenti di testo che sono in realta' comandi ----------------- Recapito nel piede, "Login" e "Enter your code" alla cassa, il richiamo alla privacy: tutti fra 16 e 22 px di altezza. Zona sensibile a 44 senza muovere il testo. */ #footer a[href^="mailto:"], #footer a[href^="tel:"], .woocommerce-checkout a.showlogin, .woocommerce-checkout a.showcoupon, .woocommerce a.showlogin, .woocommerce a.showcoupon, .woocommerce a.woocommerce-privacy-policy-link, .woocommerce-cart .product-name > a { display: inline-block; padding-block: 12px; margin-block: -12px; } /* "Login" alla cassa misurava 34,3 px di LARGHEZZA e stava a 1 px da "Enter your code": due bersagli stretti e attaccati, sulla pagina dove si paga. L'imbottitura laterale li porta oltre i 44 e li separa. */ .woocommerce a.showlogin, .woocommerce a.showcoupon { padding-inline: var(--sc-s3); margin-inline: calc(var(--sc-s3) * -1) var(--sc-s2); min-width: 44px; text-align: center; } /* --- le caselle di spunta --------------------------------------------- 18 e 22 px misurati. A 24 px con l'etichetta cliccabile il bersaglio complessivo supera i 44. Le due regole da battere hanno un `id` dentro: 01-base `#main input[type="checkbox"]` 18 px 03-negozio `body.woocommerce-checkout #main #newsletter_opt_in_checkout_field input[...]` 22 px Perche' il selettore qui sotto e' cosi' lungo: per superarle senza riscriverle e senza `!important`. */ body.woocommerce-checkout #main #newsletter_opt_in_checkout_field input[type="checkbox"], body #main input#newsletter_opt_in, body #main input#newsletter_opt_in_checkout, #main .woocommerce-checkout input[type="checkbox"], #main .woocommerce input[type="checkbox"], .woocommerce-checkout input[type="checkbox"], .woocommerce input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; } .woocommerce-checkout .woocommerce-form__label-for-checkbox, .woocommerce .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: var(--sc-s2); min-height: 44px; } } /* ============================================================================= 2 · TESTO LEGGIBILE — quello che c'era gia', e il solo punto che mancava ----------------------------------------------------------------------------- PRIMA DI SCRIVERE QUI HO GUARDATO COSA C'ERA. `scatole-officina-11- tipografia.css` ha gia' un pavimento tipografico dichiarato e ragionato: --sc11-et 13px etichetta di comando, navigazione, cartellino --sc11-mini 12.5px "il pavimento: sotto questo non si scende" e alla riga 81 fa `#header, #main, #footer { --sc-t-mono: var(--sc11-et) }`, cioe' porta TUTTE le micro-etichette da 10,5-11,5 px a 13 px. Il mio primo tentativo qui era `#main { --sc-t-mono: 12px }`. Misurando prima/dopo con `?mob=0` ho visto che quel valore ABBASSAVA da 13 a 12: non stavo riparando niente, stavo disfando il lavoro del foglio 11. Tolto. Resta un punto solo, che il foglio 11 non copre perche' e' scritto a mano altrove: il bottone delle schede in vetrina, a 10 px — sotto il pavimento dichiarato dal sito stesso. Lo riporto sul gettone, non su un numero mio. La regola sta nel paragrafo 3, insieme agli altri difetti della vetrina. Gli altri testi sotto i 14 px sono misurati e ELENCATI NEL RESOCONTO senza essere toccati, perche' o stanno dentro il sistema del foglio 11 (13 px per le etichette di comando) o li mette di proposito un altro foglio: · pannello "PROJECT RECAP" della scheda prodotto, 11 px, messo da scatole-officina-07-preventivo.css con selettore lungo e commentato · voci del menu a scomparsa, 13 px, e "Coming soon" a 9 px: stanno in 000941-scatole-menu-sei-sezioni.php, che non e' mio ========================================================================== */ /* ============================================================================= 3 · /shop — la vetrina ----------------------------------------------------------------------------- Tre difetti misurati a 360 px: a) la scritta DISCOVER MORE esce dal suo bottone: larghezza utile 102 px, larghezza del testo 106 px, con `white-space: nowrap`. Si vedeva "DISCOVER MOR". b) quel testo e' a 10 px. c) il titolo prodotto e' un bersaglio da 108 x 19 px, a 8 px dal collegamento di categoria sopra: due bersagli piccoli e appiccicati. La causa comune di (a) e (b) e' che la scheda e' larga 152 px mentre lo schermo ne ha 360: 72 px se ne vanno in imbottiture annidate. ========================================================================== */ @media (max-width: 767px) { /* Le schede si riprendono i 40 px di imbottitura del contenitore Elementor. Il margine negativo arriva esattamente al bordo del contenitore padre: non sborda, si limita ad annullare la sua imbottitura. */ #main .woocommerce ul.products.grid { margin-inline: -20px; } /* Il bottone della scheda: il testo torna dentro e sale da 10 px a `--sc11-et`, cioe' i 13 px che il foglio 11 dichiara per le etichette di comando. Non un numero mio: il pavimento che il sito si e' gia' dato. La specificita' e' alta di proposito: la regola da battere e' `body.post-type-archive-product #main li.product .add-links .button` (01-base, riga 1666 circa), che dichiara 10 px sotto i 767. Invece di riscrivere 01-base la si supera da qui, con un selettore piu' preciso. `white-space: normal` e' la valvola: se in una lingua l'etichetta non ci sta, va a capo dentro il bottone invece di uscirne. */ body.post-type-archive-product #main ul.products li.product .add-links .button, body.tax-product_cat #main ul.products li.product .add-links .button, body.post-type-archive-product #main ul.products li.product span.viewcart-style-1, body.tax-product_cat #main ul.products li.product span.viewcart-style-1, #main ul.products .add-links .button, #main ul.products span.viewcart-style-1 { font-size: var(--sc11-et, 13px); letter-spacing: 0; white-space: normal; line-height: 1.25; padding-inline: 6px; } /* Il titolo prodotto e la sua categoria: erano 108 x 19 e 105 x 28, a 8 px l'uno dall'altro. Due bersagli piccoli e appiccicati, uno sopra l'altro. Diventano due righe da 44: non serve piu' separarli, perche' il dito che sbaglia di 10 px finisce comunque dentro il bersaglio giusto. NB: nella scheda il marcatore di categoria e' uno `span.category-list` AVVOLTO dall'`a` (non il contrario): la misura va data allo span, ed e' l'`a` che si adegua. */ #main ul.products a.product-loop-title { display: flex; align-items: center; min-height: 44px; padding-block: var(--sc-s1); margin-block: 0; } #main ul.products .category-list { display: flex; align-items: stretch; /* cosi' il collegamento dentro si allunga da solo */ min-height: 44px; margin-bottom: 0; } /* Il collegamento e' figlio dello span e ha un `min-height: 24px` proprio: serve un selettore piu' preciso per portarlo a 44. */ #main ul.products li.product .category-list > a { display: flex; align-items: center; min-height: 44px; } /* Nella colonna dei filtri il collegamento e' invece figlio del `li`. */ #main ul.product-categories li.cat-item > a { display: flex; align-items: center; min-height: 44px; } /* Il richiamo "SHOP NOW" dell'insegna: 102,7 x 20 px. */ #banner-wrapper .porto-ibanner a.btn, #banner-wrapper .porto-ibanner-layer a { display: inline-flex; align-items: center; min-height: 44px; } /* L'insegna promozionale in cima: 74,7 px di corpo (5,75em scritti INLINE nel widget Porto) dentro un riquadro alto ~200 px. Il testo usciva sopra e sotto: si leggeva "UP TO 50% OF" con le lettere tagliate a meta'. Sta in `#banner-wrapper`, FUORI da `#main`, e ha lo stile in linea: qui `!important` non e' pigrizia, e' l'unico peso che batte un attributo. */ #banner-wrapper .coupon-sale-text, .porto-ibanner .coupon-sale-text, .porto-ibanner-layer .coupon-sale-text { font-size: clamp(24px, 8.5vw, 34px) !important; line-height: 1.06 !important; } } /* ============================================================================= 4 · /cart e /checkout — i due punti dove si perdono i soldi ----------------------------------------------------------------------------- La fascia dei passi (SHOPPING CART > CHECKOUT > ORDER COMPLETE) misurava 145 px di altezza per tre collegamenti alti 16-22 px: molto ingombro, poco bersaglio. L'interlinea era 61 px su un testo di 13. ========================================================================== */ @media (max-width: 767px) { .woo-page-header ul.breadcrumb, .woo-page-header ul.breadcrumb li { line-height: 1.3; } .woo-page-header ul.breadcrumb li { height: auto; display: inline-flex; align-items: center; } .woo-page-header ul.breadcrumb li > a, .woo-page-header ul.breadcrumb li > a.nolink { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sc-s1); } .woo-page-header ul.breadcrumb i.delimiter { height: auto; line-height: 1; } /* I due pulsanti secondari del carrello ("Apply coupon", "Update cart"): il corpo lo lascio al foglio 11, qui serve solo il bersaglio da dito. */ .woocommerce-cart #main button.wc-action-btn, .woocommerce-cart #main .actions .button { min-height: 44px; } } /* ============================================================================= 5 · SCHEDA PRODOTTO — accorciare la strada fino al pulsante ----------------------------------------------------------------------------- Il configuratore e' fatto di tre griglie di campioni: 1.007 + 1.252 + 757 = 3.016 px su 6.431 px di modulo, tutte a DUE colonne da 117 px in un contenitore largo 244, dentro uno schermo da 360. Settantadue pixel — un quinto dello schermo — se ne andavano in imbottiture annidate: il modulo comincia a 36 px dal bordo e il `fieldset` si prende altri 20 px per lato. COSA HO FATTO E COSA HO PROVATO E TOLTO Fatto: il modulo si riprende i margini laterali. Il contenitore passa da 244 a 284 px e i campioni da 117 a 137: piu' grandi da toccare e da vedere, stesso numero di righe, nessun rischio. Provato e RIMOSSO: tre colonne al posto di due. Sulla carta era il pezzo grosso — 3.016 px di griglie diventavano 1.880 e ADD TO CART saliva da 7.823 a 6.545. Nella prova a 360 px pero' si rompeva: il plugin da' a ogni opzione una larghezza propria di 116 px che nessuna regola di questo foglio riesce a stringere, e in colonne da 89 px le voci si accavallavano ("SMOOTH ABYSSE" scritto sopra "SMOOTH KRAFT", "LID AND BOTTOM" sopra "4 SIDES" — misurate 19 px di sovrapposizione). Su una pagina che vende, una lista di carte illeggibile costa piu' di due schermate di scorrimento. La lunghezza si e' risolta altrove: con la barra "PRICES & ORDER" (§0), che porta al pulsante senza toccare l'impaginato del configuratore. ========================================================================== */ @media (max-width: 767px) { body.single-product #main fieldset.wcpa_field_wrap { padding-inline: var(--sc-s3); } /* Nomi lunghi ("SMOOTH BOUGANVILLE") in una colonna stretta: si spezzano invece di allargare la colonna. */ body.single-product #main .wcpa_image_label { overflow-wrap: anywhere; line-height: 1.25; } /* --- LA MATRICE PREZZI ------------------------------------------------ Le tre intestazioni di data misuravano 68 px di cella contro 71 px di testo: "SETTEMBRE" usciva dalla cella e andava a toccare la colonna accanto e la testatina QUANTITY. Tolgo la spaziatura fra le lettere e impedisco alla cella di allargarsi: il testo torna dentro. */ body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col { min-width: 0; overflow: hidden; } body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col span:last-child { letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.single-product #main .dd_quantity_table thead th.dd_quantity_title div.dd_col { min-width: 0; letter-spacing: .04em; overflow: hidden; } /* Il modulo si riprende meta' dei 36 px di margine laterale: sulla pagina che vende, un quinto dello schermo era vuoto a destra e a sinistra. */ body.single-product #main form.cart { margin-inline: calc(var(--sc-s4) * -1); } } /* ============================================================================= 6 · IL BANNER DEI COOKIE (iubenda) e la finestrella newsletter ----------------------------------------------------------------------------- Misurato su profilo pulito a 360 x 844: il riquadro e' alto 394 px, il 46,7% dello schermo, e copre il titolo dell'eroe. I quattro comandi (Accept, Reject, Learn more, cookie policy) erano alti 35,6 px. Non si tocca la logica del consenso: solo l'altezza dei comandi. La chiusura della finestrella newsletter misurava 24 x 25 px. ========================================================================== */ @media (max-width: 767px) { /* I tre comandi del banner: 35,6 px misurati. iubenda inietta a runtime un `min-height: 0 !important` che azzera qualunque minimo dichiarato da fuori: qui `!important` e' l'unico peso che regge. Il collegamento "cookie policy" NON e' in elenco di proposito — e' un collegamento in mezzo a una frase, non un pulsante, e ingrandirlo spezza il paragrafo (provato: passava da 325 x 35,6 a 91 x 19,6, cioe' peggio). LE DUE REGOLE DA BATTERE, ENTRAMBE IN UNO STILE INIETTATO A RUNTIME: `#iubenda-cs-banner [class^="iub"]` min-height: 0 !important; padding: 0 !important; (1,1,0) `#iubenda-cs-banner .iubenda-cs-opt-group button` padding: 8px 24px !important; (1,1,1) Arrivano DOPO questo foglio, quindi a parita' di peso vincono loro. La classe ripetuta porta il selettore a (1,2,1) e chiude la partita senza dover indovinare la struttura interna del banner, che iubenda cambia. */ #iubenda-cs-banner button.iubenda-cs-accept-btn.iubenda-cs-accept-btn, #iubenda-cs-banner button.iubenda-cs-reject-btn.iubenda-cs-reject-btn, #iubenda-cs-banner button.iubenda-cs-customize-btn.iubenda-cs-customize-btn { min-height: 44px !important; padding-block: 12px !important; } /* Il bollino del consenso, in basso: 38 x 38. iubenda inietta un foglio in linea con `height: 38px !important; min-width: 38px !important`: contro un `!important` di terze parti l'unico peso disponibile e' un altro `!important`. Non cambia niente del consenso: solo la misura del bollino.*/ html body button.iubenda-tp-btn.iubenda-tp-btn.iubenda-cs-preferences-link { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } /* La finestrella newsletter di iubenda. */ #iub-email-pref-close-btn.iub-newsletter-widget-close-btn { min-width: 44px; min-height: 44px; } #iub-email-pref-step1-btn.iub-newsletter-widget-base-btn, .iub-newsletter-widget-footer-policy-privacy { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* La chiusura della finestrella del tema (32,6 x 34) stava a 2 px dalla lente di ingrandimento: due bersagli piccoli attaccati, si sbaglia. */ button.newsletter-close-popup { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ============================================================================= 7 · /sample-pack — il pacco campione ----------------------------------------------------------------------------- Il richiamo "Get your free sample!" stava a 12,5 px: e' il pulsante della pagina, non una didascalia. E "Follow on Instagram" era alto 21 px e a 1 px dal collegamento sopra. ========================================================================== */ @media (max-width: 767px) { /* "Get your free sample!" e "Get your free sample pack" stavano a 12,5 px: sono i due pulsanti della pagina. Vanno sul gettone delle etichette di comando (13 px), come tutti gli altri comandi del sito. */ a.custom-add-to-cart-button, a.custom-add-to-cart-button .custom-add-to-cart-button-content, a.custom-add-to-cart-button .custom-add-to-cart-button-text, .sc-cmp__azione { font-size: var(--sc11-et, 13px); } a.sc-pi__cta, a.sbi_header_link { display: inline-flex; align-items: center; min-height: 44px; } a.sc-pi__cta { margin-top: var(--sc-s2); } } /* ============================================================================= 8 · GLI OSTACOLI SUL PERCORSO D'ACQUISTO — misurati a 375 e 414 px ----------------------------------------------------------------------------- Questa sezione non abbellisce niente. Toglie tre cose che stanno FRA il pollice e il pulsante. Le misure sono del 5/9/2026, browser in emulazione telefono con tocco, profilo pulito, "Accept" premuto come lo preme un cliente vero. I numeri vengono da `document.elementFromPoint()` sul centro di ogni comando: non da un'occhiata allo scatto. Via di fuga di tutta la sezione: ?mob=0 Via di fuga della sola § 8.1: ?ostacoli=0 ========================================================================== */ /* ----------------------------------------------------------------------------- 8.1 · LA FINESTRELLA NEWSLETTER NON STA IN PIEDI SUL PULSANTE ----------------------------------------------------------------------------- IL FATTO. `div.iub-newsletter-widget-bottom-right` e' `position: fixed`, z-index 99, e a 375 x 812 misura [x 0, y 318, larga 375, alta 422]: prende il 47% dello schermo e si ferma esattamente in mezzo. Compare qualche decina di secondi dopo l'arrivo e SEGUE il cliente di pagina in pagina. CHI COPRE, E DI QUANTO (elementFromPoint sul centro del comando): Studio `button.bl__cta` 317 x 56 -> h2 della finestrella 83% Cassa `button#place_order` 335 x 61 -> h2 della finestrella 54% Cassa `input#billing_first_name` -> h2 della finestrella 55% Un cliente che tocca "Add to cart" iscrive la propria mail a una newsletter. Non compra. PERCHE' SI SPEGNE INVECE DI SPOSTARLA. Spostarla in basso non risolve: alta 422 px su uno schermo da 812 coprirebbe la meta' inferiore, e il pulsante d'acquisto sta li' altrettanto spesso. Renderla trasparente al tocco (`pointer-events: none`) sarebbe peggio: resterebbe un cartone morto davanti al pulsante. Sulle pagine dove si compra non ci sta, punto. Su tutte le altre — home, blog, pagine di racconto — la newsletter lavora come prima: la classe `sc-vende` la mette 000943 solo su carrello, cassa, scheda prodotto e i cinque Studio. PERCHE' BASTA LA CASCATA, SENZA `!important`. Verificato in pagina il 5/9/2026: iubenda inietta un `