/* ==========================================================================
Redess — il negozio
Kreita, 28 agosto 2026
Questo foglio viene accodato da functions.php DOPO default.css e
responsive.css del tema genitore: per questo quasi nessuna regola ha
bisogno di `!important`.
L'ordine dei blocchi nella scheda (fotografia prima, testo dopo) non si
ottiene più con `order`: lo sistema il modello del tema figlio, in
woocommerce/content-product.php.
========================================================================== */
/* --------------------------------------------------------------------------
1. La griglia
Il genitore allinea le schede in BASSO (`align-items: flex-end`): erano
appese a un bordo inferiore comune e, avendo contenuti di altezze diverse,
le cime si sfalsavano fino a 170 px. Sembrava un mosaico rotto.
-------------------------------------------------------------------------- */
.woocommerce .products {
align-items: stretch;
}
.woocommerce .products .ftc-product {
display: flex;
flex-direction: column;
float: none;
height: auto;
position: relative;
background: #fff;
border: 0;
border-radius: 14px;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 2px rgba(60, 40, 25, .06), 0 6px 18px -12px rgba(60, 40, 25, .28);
transition: box-shadow .28s cubic-bezier(.2, .7, .3, 1), transform .28s cubic-bezier(.2, .7, .3, 1);
}
.woocommerce .products .ftc-product:hover {
transform: translateY(-6px);
box-shadow: 0 2px 4px rgba(60, 40, 25, .08), 0 22px 44px -22px rgba(60, 40, 25, .5);
}
/* --------------------------------------------------------------------------
2. La fotografia
Il genitore usa `object-fit: fill`: ogni immagine conservava le proprie
proporzioni e dettava un'altezza diversa alla scheda. È questo che rendeva
impossibile allineare la griglia, non l'estetica. Una cornice quadrata
uguale per tutte, con ritaglio al centro invece che deformazione.
-------------------------------------------------------------------------- */
.woocommerce .products .ftc-product .item-image {
float: none;
width: 100%;
overflow: hidden;
background: #f6f1e8;
}
.woocommerce .products .ftc-product .item-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.woocommerce .products .ftc-product:hover .item-image img {
transform: scale(1.06);
}
/* --------------------------------------------------------------------------
3. Il testo
-------------------------------------------------------------------------- */
.woocommerce .products .ftc-product .item-description {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 18px;
text-align: left;
}
/* Il titolo passa dallo slab tutto maiuscolo al Roboto già caricato dal tema:
«Bacche di Sommacco in grappolo» si legge, «BACCHE DI SOMMACCO IN GRAPPOLO»
si decifra. Due righe esatte, poi i puntini: niente sillabazione, che
spezzava «SOMMACCO» in «SOM-MACCO». */
.woocommerce .products .ftc-product .product_title,
.woocommerce .products .ftc-product .product_title a {
font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.01em;
text-transform: none;
color: #211d1a;
}
.woocommerce .products .ftc-product .product_title {
margin: 0 0 10px;
min-height: 2.7em;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: break-word;
}
.woocommerce .products .ftc-product .product_title a:hover {
color: #be1e2d;
}
/* Il trattino decorativo del genitore (`.item-description::after`) qui non
serve: con un pulsante in fondo diventerebbe un terzo elemento che divide
senza motivo. */
.woocommerce .products .ftc-product .item-description::after {
display: none;
}
/* Il prezzo comanda; l'avvertenza sull'IVA fa da didascalia, non da gemella:
prima avevano lo stesso peso ed erano affiancate alla pari. */
.woocommerce .products .ftc-product .price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 8px;
margin: 0 0 14px;
padding: 0;
font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: #1b1815;
}
/* ⚠️ Misura e colore corretti dopo il controllo di leggibilità: 10,5 px in
#9a9086 su bianco davano 3,13:1, sotto la soglia di 4,5:1, e sotto gli
11 px consigliati. A 12 px e #7a6f66 fanno 4,89:1 e restano discreti. */
.woocommerce .products .ftc-product .price .woocommerce-price-suffix {
white-space: nowrap;
font-size: 12px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: #7a6f66;
}
/* --------------------------------------------------------------------------
4. Il pulsante d'acquisto
Quello del genitore (`.meta_info`) è `opacity: 0` e compare al passaggio
del mouse: su telefono e tablet era irraggiungibile. Il modello del tema
figlio ne stampa uno nuovo dentro `.kta-azioni`, che il JavaScript del
carosello non conosce e quindi non ricostruisce.
-------------------------------------------------------------------------- */
.woocommerce .products .ftc-product .item-description .meta_info {
display: none;
}
.woocommerce .products .ftc-product .kta-azioni {
margin-top: auto;
}
.woocommerce .products .ftc-product .kta-azioni .button,
.woocommerce .products .ftc-product .kta-azioni a.added_to_cart {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: 9px;
background: #be1e2d;
color: #fff;
font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.2;
text-align: center;
text-transform: none;
transition: background .2s ease;
}
.woocommerce .products .ftc-product .kta-azioni .button:hover,
.woocommerce .products .ftc-product .kta-azioni .button:focus-visible {
background: #9b1824;
color: #fff;
}
/* Il collegamento «Visualizza carrello» che WooCommerce aggiunge dopo
l'acquisto: sotto al pulsante, discreto. */
.woocommerce .products .ftc-product .kta-azioni a.added_to_cart {
margin-top: 8px;
background: transparent;
color: #be1e2d;
border: 1px solid rgba(190, 30, 45, .3);
min-height: 38px;
}
/* Lo stato di caricamento del pulsante, mentre aggiunge senza ricaricare. */
.woocommerce .products .ftc-product .kta-azioni .button.loading {
opacity: .75;
pointer-events: none;
}
/* --------------------------------------------------------------------------
5. Telefono: due schede per riga invece di una incolonnata.
Si vedono più prodotti senza scorrere e le fotografie restano leggibili.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.woocommerce .products .ftc-product {
width: calc(50% - 10px);
margin: 10px 5px;
border-radius: 12px;
}
.woocommerce .products .ftc-product .item-description {
padding: 13px;
}
.woocommerce .products .ftc-product .product_title,
.woocommerce .products .ftc-product .product_title a {
font-size: 14px;
}
.woocommerce .products .ftc-product .product_title {
min-height: 2.8em;
}
.woocommerce .products .ftc-product .price {
font-size: 18px;
margin-bottom: 12px;
}
.woocommerce .products .ftc-product .kta-azioni .button {
min-height: 40px;
font-size: 12px;
}
}
/* ==========================================================================
6. LA SCHEDA DEL SINGOLO PRODOTTO
========================================================================== */
/* La barra laterale destra è VUOTA: 300 px di larghezza, 2 di altezza, zero
contenuto. Occupava un terzo della pagina e conteneva solo la freccia
orfana di un carosello mai inizializzato. Si toglie, e il prodotto prende
tutta la larghezza. */
.single-product aside#right-sidebar {
display: none;
}
/* La griglia Bootstrap del tema impone `width: 75%` alla colonna: qui serve
alzare la mano, altrimenti il contenuto resta stretto e il terzo recuperato
rimane vuoto lo stesso. */
.single-product .site-content.col-sm-9 {
width: 100% !important;
}
/* La freccia di navigazione fra prodotti restava orfana nel vuoto a destra,
a 955 px, senza niente attorno: sembrava un carosello rotto. */
.single-product .detail-nav-summary {
display: none;
}
/* Con lo spazio recuperato la fotografia può finalmente essere grande. */
.single-product div.product .woocommerce-product-gallery {
width: 46% !important;
float: left;
}
.single-product div.product .summary,
.single-product div.product .entry-summary {
width: 50% !important;
margin-left: 4%;
}
/* Il testo giustificato senza sillabazione apre buchi fra le parole: allineato
a sinistra si legge meglio ed è come si scrive in italiano sul web. */
.single-product div.product .summary,
.single-product div.product .summary p,
.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-Tabs-panel p {
text-align: left;
hyphens: none;
}
@media (max-width: 991px) {
/* Su telefono la fotografia occupava un quarto di schermo, appoggiata a
sinistra: è l'elemento che vende, e va a tutta larghezza. */
/* 🔴 29/8: questa regola NON HA MAI FUNZIONATO. Qui sopra la larghezza da
computer è scritta `width: 50% !important`, e un `!important` batte una
dichiarazione normale a qualunque ordine e specificità: la descrizione
restava larga **180 px su 360** a 390 px, con la metà destra dello
schermo vuota e il testo a capo ogni trenta caratteri. Serve
l'`!important` anche qui. ⚠️ E il contenitore della galleria del TEMA è
`div.images`, che è un'altra cosa da `.woocommerce-product-gallery`: a
820 px restava largo 600 su 790. */
/* ⚠️ Le larghezze stanno nel blocco a 767 qui sotto: sotto i 768 px si
incolonna, fra 768 e 991 le due colonne ci stanno ancora e restano
affiancate. */
.single-product div.product .woocommerce-product-gallery img {
width: 100%;
height: auto;
}
/* Le briciole di pane si impilavano su quattro righe, mangiando 250 px
prima ancora del prodotto: qui stanno su una riga sola. */
.ftc-breadcrumb .breadcrumb,
.ftc-breadcrumb .breadcrumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 8px;
font-size: 12px;
line-height: 1.4;
}
.ftc-breadcrumb .breadcrumb br,
.ftc-breadcrumb .breadcrumbs br {
display: none;
}
}
/* 🔴 29/8: sotto i 768 px la descrizione restava larga **180 px su 360** —
metà schermo vuota e il testo a capo ogni trenta caratteri. La regola che
doveva portarla al 100% c'era già, ma senza `!important`, e qui sopra la
larghezza da computer è scritta `width: 50% !important`: un `!important`
batte una dichiarazione normale a qualunque ordine e specificità. La regola
c'era e non ha mai funzionato. */
@media (max-width: 767px) {
.single-product div.product div.images,
.single-product div.product .ftc-adzoom.details-img,
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary,
.single-product div.product .entry-summary {
width: 100% !important;
max-width: none !important;
margin-left: 0;
float: none;
}
}
/* 🔴 29/8: fra 768 e 991 px la fotografia del prodotto restava larga 600 px
dentro una colonna da 790, e la descrizione 395 sotto di essa: una striscia
vuota larga 200-400 px lungo tutto il lato destro. Il vincolo non era né
l'immagine né `div.images` — era `max-width: 600px` su `.ftc-adzoom
.details-img`, DUE livelli sopra. Misurare la catena dei genitori, non
l'elemento. Qui le due colonne restano affiancate come sul computer: a 820
px ci stanno (363 + 395), e incolonnarle porterebbe il pulsante d'acquisto
ottocento pixel più in basso. */
@media (min-width: 768px) and (max-width: 991px) {
.single-product div.product .ftc-adzoom.details-img,
.single-product div.product > .details-img {
width: 46% !important;
max-width: none !important;
float: left;
}
.single-product div.product div.images {
width: 100% !important;
max-width: none !important;
}
}
/* ==========================================================================
7. IL CHECKOUT
È la pagina dove si perdono i soldi, ed era la più vecchia del sito: il
riepilogo dell'ordine era una tabella bordata con le intestazioni in
maiuscoletto serif centrate, i campi erano rettangoli nudi diversi da
quelli dell'accesso, il riquadro del pagamento grigio-lilla e il pulsante
d'ordine largo 176 px appeso a destra. Su telefono le due colonne non si
impilavano nemmeno.
========================================================================== */
/* --------------------------------------------------------------------------
7.1 L'IMPAGINAZIONE
Modulo a sinistra, riepilogo a destra dentro una scheda che SEGUE chi
scorre: il modulo è alto 1.100 px e il totale spariva dopo il terzo campo.
-------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 40px;
align-items: start;
}
/* ⚠️ Il clearfix di `.col2-set` diventa una casella nella griglia e sposta
tutto di un posto: stessa trappola del modulo di accesso. */
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after {
display: none;
}
.woocommerce-checkout form.checkout #customer_details {
grid-column: 1;
width: 100%;
float: none;
}
/* ⚠️ Il modulo ha SOLO DUE figli: `#customer_details` e `#order_review`.
Il titolo «Il tuo Ordine» sta DENTRO il riepilogo, non accanto ad esso
come nel checkout standard di WooCommerce. Mettere il riepilogo in
`grid-row: 2` lo faceva scendere sotto tutto il modulo, a 2.063 px
dall'alto: sembrava che la griglia non avesse funzionato. */
.woocommerce-checkout form.checkout #order_review {
grid-column: 2;
grid-row: 1;
width: auto;
float: none;
position: sticky;
top: 20px;
}
}
/* Su telefono le due colonne restavano affiancate a 150 e 180 px dentro 390,
con la tabella che usciva dallo schermo. */
@media only screen and (max-width: 991px) {
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
display: block;
width: 100%;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
width: 100%;
float: none;
padding: 0;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
width: 100%;
float: none;
margin-top: 26px;
}
}
/* --------------------------------------------------------------------------
7.2 I TITOLI E LE ETICHETTE
Il tema mette `text-transform: capitalize` su mezza pagina: «Inserisci Il
Tuo Indirizzo Per Visualizzare Le Opzioni Di Spedizione» sembra un errore
di battitura, non una frase.
-------------------------------------------------------------------------- */
/* ⚠️ Il maiuscoletto del riepilogo veniva da `.woocommerce table.shop_table th`
nel `style.css` del tema: due classi e DUE elementi (0,2,2), mentre la mia
`.woocommerce-checkout .shop_table th` valeva 0,2,1 e perdeva pur essendo
caricata dopo. Basta nominare anche l'elemento `table`, o passare dall'id
del riepilogo come qui sotto. */
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table td *,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td,
.woocommerce-checkout .woocommerce-shipping-destination,
.woocommerce-checkout .woocommerce-shipping-methods,
.woocommerce-checkout .cart_item .product-name,
.woocommerce-checkout label,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
text-transform: none;
}
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
margin: 0 0 18px;
font-size: 22px;
line-height: 1.25;
}
/* ⚠️ I DISALLINEAMENTI FRA LE SCHEDE.
Due cause, entrambe del tema:
- `#customer_details` porta `padding: 15px 30px 0 0`, quindi la colonna di
sinistra si fermava 30 px prima del suo spazio;
- le schede «Spedire ad un indirizzo differente?» e «Note sull'ordine»
stanno in un contenitore con un rientro di 20 px, e partivano da 128
mentre quella della fatturazione partiva da 108: venti pixel di scalino
fra tre schede incolonnate.
Si azzerano riempimenti e rientri: le tre schede devono avere lo stesso
bordo sinistro e lo stesso bordo destro. */
.woocommerce-checkout #customer_details {
padding: 0;
margin: 0;
}
/* ⚠️⚠️ `.col-2` NON sta accanto a `.col-1`: sta DENTRO. Il tema le annida
invece di affiancarle, e le dà `float: right` e `padding-left: 20px`. Un
selettore figlio (`#customer_details > .col-2`) non la raggiunge: sembrava
che la correzione non avesse effetto. Ci vuole il discendente. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
width: 100%;
float: none;
padding: 0;
margin-left: 0;
margin-right: 0;
}
/* Il modulo era su fondo crema, nudo, accanto a un riepilogo che è una scheda
bianca: i due lati della pagina non sembravano parti della stessa cosa. */
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
padding: 26px 26px 12px;
background: #fff;
border: 1px solid #ece7dd;
border-radius: 14px;
box-shadow: 0 2px 14px rgba(60, 45, 30, .06);
}
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
margin-top: 20px;
}
.woocommerce-checkout .woocommerce-billing-fields h3 {
padding-bottom: 14px;
border-bottom: 1px solid #ece7dd;
}
/* Dentro una scheda i campi hanno bisogno di respirare meno: il riquadro fa
già da contenimento. */
.woocommerce-checkout #customer_details .form-row {
margin-bottom: 14px;
}
/* «Spedire ad un indirizzo differente?» è una domanda accanto a una casella,
non un titolo: usciva a 24 px, grande quanto «Dettagli di fatturazione», e
la casella le stava sotto invece che accanto. */
.woocommerce-checkout #ship-to-different-address {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
}
.woocommerce-checkout #ship-to-different-address label {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 15.5px;
font-weight: 600;
cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
width: 17px;
height: 17px;
margin: 0;
flex: 0 0 auto;
}
.woocommerce-checkout #customer_details .woocommerce-shipping-fields {
padding: 20px 26px;
}
/* Quando la casella non è spuntata quella scheda contiene solo la domanda:
non serve che sia alta come le altre. */
.woocommerce-checkout #customer_details .woocommerce-shipping-fields .shipping_address {
margin-top: 18px;
}
/* Il riquadro delle note aveva un bordo più scuro degli altri campi. */
.woocommerce-checkout #order_comments,
.woocommerce-checkout .woocommerce-additional-fields textarea {
border: 1px solid #ddd5c9;
border-radius: 8px;
}
.woocommerce-checkout .woocommerce-additional-fields h3 {
font-size: 15.5px;
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 12px;
}
/* --------------------------------------------------------------------------
7.3 I CAMPI
Uguali a quelli dell'accesso: chi arriva qui li ha già visti.
-------------------------------------------------------------------------- */
.woocommerce-checkout .form-row {
margin: 0 0 16px;
padding: 0;
}
.woocommerce-checkout .form-row label {
display: block;
margin-bottom: 6px;
color: #3f3830;
font-size: 13.5px;
font-weight: 600;
}
/* ⚠️ I marcatori dei campi obbligatori erano DUE: `*` sui campi di
WooCommerce e `**` su quelli aggiunti dal sito. Due segni per la stessa
cosa fanno pensare che vogliano dire cose diverse. */
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr.required {
border: 0;
color: #BE1E2D;
text-decoration: none;
}
/* Il DOPPIO asterisco: su Nome, Cognome e Codice Fiscale il modello stampa
sia `*` sia `*`
— WooCommerce e il modulo aggiunto dal sito ne mettono uno ciascuno. Due
segni per la stessa cosa fanno pensare che vogliano dire cose diverse. */
.woocommerce-checkout .form-row label .required + abbr.required,
.woocommerce-checkout .form-row label abbr.required + .required {
display: none;
}
/* ⚠️ Campi marcati OBBLIGATORI E FACOLTATIVI INSIEME: «Rappresentante Legale
*(optional)», «P. IVA *(optional)». L'asterisco è di WooCommerce, il
«(optional)» del modulo del sito. Se una cosa è facoltativa, l'asterisco è
una bugia: si toglie. */
.woocommerce-checkout .form-row label:has(.optional) .required,
.woocommerce-checkout .form-row label:has(.optional) abbr.required {
display: none;
}
/* ⚠️ «(optional)» su «Rappresentante Legale», «P. IVA» e «Codice SDI» NON
passa da alcuna funzione di traduzione: il modulo che aggiunge quei campi
lo scrive a mano nell'etichetta, quindi né un file di lingua né un filtro
`gettext` lo raggiungono (quello di «Denominazione Sociale», che è di
WooCommerce, si traduce regolarmente). L'unico punto in cui si può ancora
intervenire senza toccare il modulo è la resa: si azzera il corpo del testo
originale e se ne stampa uno nuovo. Il testo inglese resta nel codice per
chi legge con la voce — non è una soluzione, è un cerotto: la cura è
configurare l'etichetta nel pannello del modulo. */
.woocommerce-checkout .form-row label .optional {
margin-left: 5px;
color: #8a8078;
font-weight: 400;
font-size: 0;
}
.woocommerce-checkout .form-row label .optional::after {
content: "(facoltativo)";
font-size: 13px;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
width: 100%;
height: 46px;
padding: 0 14px;
background: #fff;
border: 1px solid #ddd5c9;
border-radius: 8px;
font-size: 15px;
transition: border-color .16s ease, box-shadow .16s ease;
}
.woocommerce-checkout .form-row textarea {
height: auto;
min-height: 96px;
padding: 12px 14px;
line-height: 1.5;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
border-color: #BE1E2D;
box-shadow: 0 0 0 3px rgba(190, 30, 45, .12);
outline: none;
}
/* --------------------------------------------------------------------------
7.3bis IL MODULO A GRIGLIA
Dodici campi uno sotto l'altro, tutti a tutta larghezza, per 1.126 px di
altezza: «C.A.P.» aveva la stessa riga di «Via e numero», e la colonna
sembrava non finire mai. Con una griglia a sei colonne ogni campo prende
la larghezza che gli serve — il C.A.P. un terzo, la via tutta la riga — e
il modulo si accorcia di circa un terzo.
I campi si nominano per id: sono quelli di WooCommerce più quattro aggiunti
dal modulo della fatturazione elettronica. Quelli dell'azienda sono
`display: none` finché non si sceglie «azienda»: essendo tolti dal flusso,
la griglia si richiude da sola.
-------------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0 16px;
}
/* ⚠️ Anche qui il clearfix diventerebbe due caselle vuote. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after {
display: none;
}
/* Di regola un campo occupa la riga intera. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: span 6;
width: auto;
float: none;
margin-left: 0;
margin-right: 0;
}
/* Metà riga: nome e cognome, partita IVA e codice SDI, telefono e email. */
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #billing_Codice_Fiscale_field,
.woocommerce-checkout #billing_Partita_IVA_field,
.woocommerce-checkout #billing_Codice_SDI_field,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #shipping_first_name_field,
.woocommerce-checkout #shipping_last_name_field {
grid-column: span 3;
}
/* Un terzo di riga: città, provincia e C.A.P. stanno su una riga sola,
come si scrivono su una busta. */
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_city_field,
.woocommerce-checkout #shipping_state_field,
.woocommerce-checkout #shipping_postcode_field {
grid-column: span 2;
}
/* Dove comincia l'indirizzo si stacca dai dati anagrafici. Un filo, non
un titolo: i titoli li scrive chi cura i testi, non il foglio di stile. */
.woocommerce-checkout #billing_country_field {
margin-top: 10px;
padding-top: 22px;
border-top: 1px solid #f2ede4;
}
}
/* --------------------------------------------------------------------------
7.4 IL RIEPILOGO DELL'ORDINE
Era una tabella con tutti i bordi disegnati e le intestazioni centrate in
maiuscoletto: un tabulato, non un conto. Diventa una scheda con le righe
separate da un filo e il totale in evidenza.
-------------------------------------------------------------------------- */
.woocommerce-checkout #order_review {
padding: 22px;
background: #fff;
border: 1px solid #ece7dd;
border-radius: 14px;
box-shadow: 0 2px 14px rgba(60, 45, 30, .06);
}
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td,
.woocommerce-checkout #order_review .shop_table tr {
background: transparent;
border: 0;
border-radius: 0;
}
.woocommerce-checkout #order_review .shop_table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
/* L'intestazione «PRODOTTO / SUBTOTALE» non dice niente che le righe sotto
non dicano già. */
.woocommerce-checkout #order_review .shop_table thead {
display: none;
}
.woocommerce-checkout #order_review .shop_table .cart_item td {
padding: 12px 0;
border-bottom: 1px solid #f2ede4;
font-size: 14.5px;
line-height: 1.45;
vertical-align: top;
}
.woocommerce-checkout #order_review .shop_table .cart_item .product-name {
text-align: left;
color: #2c2620;
}
.woocommerce-checkout #order_review .shop_table .cart_item .product-total {
text-align: right;
white-space: nowrap;
font-weight: 600;
}
.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td {
padding: 10px 0;
border-bottom: 1px solid #f2ede4;
font-size: 14.5px;
font-weight: 400;
line-height: 1.45;
}
.woocommerce-checkout #order_review .shop_table tfoot th {
text-align: left;
color: #6f655c;
}
.woocommerce-checkout #order_review .shop_table tfoot td {
text-align: right;
white-space: normal;
color: #2c2620;
}
/* Il totale è l'unica riga che si guarda davvero. */
.woocommerce-checkout #order_review .shop_table tfoot .order-total th,
.woocommerce-checkout #order_review .shop_table tfoot .order-total td {
padding-top: 14px;
border-bottom: 0;
border-top: 2px solid #ece7dd;
color: #1b1815;
font-size: 19px;
font-weight: 700;
}
/* La riga della spedizione, quando l'indirizzo non c'è ancora, è una frase
lunga: va a capo come una frase, non come un numero. */
/* La riga della spedizione, finché l'indirizzo non c'è, contiene una FRASE,
non un importo: incolonnata a destra andava a capo tre volte con il bordo
sinistro a zig-zag. */
.woocommerce-checkout #order_review .shop_table .woocommerce-shipping-destination,
.woocommerce-checkout #order_review table.shop_table .woocommerce-shipping-totals td {
color: #6f655c;
font-size: 13.5px;
font-weight: 400;
line-height: 1.5;
text-align: left;
}
/* --------------------------------------------------------------------------
7.5 IL PAGAMENTO
Il riquadro era grigio-lilla, un colore che non compare in nessun altro
punto del sito.
-------------------------------------------------------------------------- */
.woocommerce-checkout #payment {
margin-top: 18px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
margin: 0 0 14px;
padding: 0;
border: 0;
background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods li {
margin: 0;
padding: 0;
list-style: none;
background: transparent;
}
.woocommerce-checkout #payment div.payment_box {
margin: 12px 0 0;
padding: 16px;
background: #faf6ee;
border: 1px solid #ece7dd;
border-radius: 10px;
color: #4a423a;
font-size: 14px;
line-height: 1.5;
}
/* La punta che il tema disegna sopra il riquadro puntava a un fondo che non
c'è più. */
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: #faf6ee;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
margin: 14px 0 0;
color: #6f655c;
font-size: 13px;
line-height: 1.55;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text a {
color: #BE1E2D;
text-decoration: underline;
text-underline-offset: 2px;
}
/* --------------------------------------------------------------------------
7.6 IL PULSANTE
Era largo 176 px, appeso a destra sotto il riquadro del pagamento. È
l'ultimo gesto dell'acquisto: si prende tutta la scheda.
-------------------------------------------------------------------------- */
.woocommerce-checkout #payment .form-row.place-order {
margin: 18px 0 0;
padding: 0;
}
.woocommerce-checkout #place_order {
display: block;
width: 100%;
min-height: 52px;
margin: 0;
float: none;
background: #BE1E2D;
border: 0;
border-radius: 10px;
color: #fff;
font-size: 15.5px;
font-weight: 600;
letter-spacing: .02em;
text-transform: none;
}
.woocommerce-checkout #place_order:hover {
background: #9b1824;
}
/* --------------------------------------------------------------------------
7.7 GLI AVVISI IN CIMA
Tre riquadri impilati — «prodotto aggiunto», «codice applicato», «hai un
codice?» — prendevano 250 px prima che cominciasse il modulo.
-------------------------------------------------------------------------- */
/* ⚠️ Il tema posiziona l'icona dell'avviso in assoluto a `left: 21px`, larga
14: con un riempimento sinistro di 18 px il testo ci finiva SOPRA e si
leggeva «☑N aL Sommacco». Il riempimento va calcolato sull'icona. */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
margin: 0 0 12px;
padding: 13px 18px 13px 48px;
background: #faf6ee;
border: 1px solid #ece7dd;
border-top: 0;
border-left: 3px solid #BE1E2D;
border-radius: 8px;
color: #4a423a;
font-size: 14px;
line-height: 1.5;
}
.woocommerce-checkout .woocommerce-message .button,
.woocommerce-checkout .woocommerce-info .button {
min-height: 36px;
padding: 0 16px;
border-radius: 8px;
font-size: 13.5px;
line-height: 36px;
}
/* Il modulo del codice promozionale, quando si apre. */
.woocommerce-checkout form.checkout_coupon {
margin: 0 0 20px;
padding: 18px;
background: #fff;
border: 1px solid #ece7dd;
border-radius: 12px;
}
/* ==========================================================================
8. L'AREA CLIENTE
Il modulo era interamente in inglese su un sito italiano: le stringhe le
sistema il modello del tema figlio (woocommerce/myaccount/form-login.php).
Qui resta l'aspetto.
========================================================================== */
/* La scatola era larga 460 px persa in mezzo a 1400 di vuoto. */
.woocommerce-account .woocommerce > .u-column1,
.woocommerce-account #customer_login {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
background: #fff;
border: 1px solid #ece4d6;
border-radius: 14px;
padding: 30px 32px 34px;
box-shadow: 0 1px 2px rgba(60, 40, 25, .05), 0 8px 22px -16px rgba(60, 40, 25, .35);
}
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
font-size: 26px;
font-weight: 600;
letter-spacing: -.01em;
text-transform: none;
margin: 0 0 6px;
color: #211d1a;
}
/* La riga che spiega a cosa serve l'area cliente. */
.woocommerce-account .kta-spiega {
margin: 0 0 22px;
color: #7d746a;
font-size: 14.5px;
line-height: 1.5;
}
.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text {
min-height: 48px;
border-radius: 9px;
border: 1px solid #ddd3c4;
padding: 0 14px;
font-size: 15px;
}
.woocommerce-account .woocommerce-form-login input.input-text:focus,
.woocommerce-account .woocommerce-form-register input.input-text:focus {
border-color: #be1e2d;
outline: 2px solid rgba(190, 30, 45, .18);
outline-offset: 1px;
}
/* Il pulsante era NERO, l'unico del sito che non è rosso. */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
width: 100%;
min-height: 48px;
margin-top: 6px;
border: 0;
border-radius: 9px;
background: #be1e2d;
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
text-transform: none;
transition: background .2s ease;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover {
background: #9b1824;
color: #fff;
}
.woocommerce-account .woocommerce-form-login__rememberme {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #6b635a;
}
.woocommerce-account .woocommerce-LostPassword {
float: right;
font-size: 14px;
}
.woocommerce-account .woocommerce-LostPassword a {
color: #be1e2d;
}
@media (max-width: 767px) {
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
padding: 22px 20px 26px;
}
.woocommerce-account .woocommerce-LostPassword {
float: none;
display: block;
margin-top: 10px;
}
}
/* La galleria è uno slider che si scrive la larghezza IN LINEA via JavaScript
(200 px fissi): allargando solo il contenitore l'immagine restava piccola.
`!important` qui è necessario, ed è l'unico caso in cui il CSS batte uno
stile in linea. */
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* La descrizione compariva DUE VOLTE: prima troncata con i puntini, poi per
intero. È un widget «leggi tutto / leggi meno» del tema il cui JavaScript
non parte, così restano visibili tutti e due i blocchi più i collegamenti
che dovrebbero alternarli. Con descrizioni da 250 caratteri non c'è niente
da troncare: si mostra solo quella intera. */
.single-product .ftc_excerpt .collapsed-content,
.single-product .ftc_excerpt > a {
display: none;
}
.single-product .ftc_excerpt .full-content {
display: block;
}
/* ==========================================================================
9. LE TRE REGOLE OSTINATE
Il tema le difende con `!important` o con selettori più specifici. Qui si
alza la mano, ma solo su queste: altrove la dipendenza dichiarata in
functions.php basta a vincere senza forzature.
========================================================================== */
/* Il pulsante d'accesso era NERO, l'unico del sito che non è rosso. */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account button.woocommerce-button {
background: #be1e2d !important;
border-color: #be1e2d !important;
color: #fff !important;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account button.woocommerce-button:hover {
background: #9b1824 !important;
border-color: #9b1824 !important;
}
/* La fotografia del prodotto restava a 200 px dentro una colonna da 538. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery > div,
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image,
.single-product div.product .woocommerce-product-gallery__image > a,
.single-product div.product .woocommerce-product-gallery img {
max-width: 100% !important;
}
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image,
.single-product div.product .woocommerce-product-gallery__image > a,
.single-product div.product .woocommerce-product-gallery img {
width: 100% !important;
height: auto !important;
}
/* La descrizione compariva due volte: il «leggi tutto» del tema non parte. */
.single-product .ftc_excerpt .collapsed-content {
display: none !important;
}
.single-product .ftc_excerpt .full-content {
display: block !important;
}
/* ⚠️⚠️ LA FOTOGRAFIA CHE RESTAVA A 195 PX.
Non era una guerra di specificità sui contenitori: era che nessuno di loro
imponeva una larghezza. `div.images`, la galleria, il `figure` e il `div`
dell'immagine si adattavano TUTTI al contenuto — e il contenuto era
un'immagine alta e stretta (un'infografica in rapporto 2:5) a cui il tema
dava un'altezza, non una larghezza: 488 px di altezza per quel rapporto
fanno 195 px di larghezza, e ogni contenitore si stringeva su quella misura.
Dentro una colonna da 538 px sembrava una miniatura, e il testo scritto
nell'infografica era illeggibile.
Si dichiara la larghezza sull'IMMAGINE e si lascia libera l'altezza: sono i
contenitori a doversi adattare a lei, non il contrario. */
/* ⚠️ Il 46% va messo sul contenitore ESTERNO. `div.images` sta dentro
`.ftc-adzoom.details-img`, largo 468 px: chiedere il 46% a `div.images`
significava chiedere il 46% di 468, cioè 215 — quasi la misura di prima.
La colonna è `.ftc-adzoom`; `div.images` la riempie e basta. */
.single-product div.product .ftc-adzoom.details-img,
.single-product div.product > .details-img {
width: 46% !important;
max-width: none;
float: left;
padding: 0;
}
.single-product div.product .images {
width: 100% !important;
max-width: none;
float: none;
padding: 0;
}
.single-product div.product .images .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image > a {
width: 100% !important;
max-width: none;
}
.single-product .woocommerce-product-gallery__image img,
.single-product div.images img.wp-post-image {
width: 100% !important;
height: auto !important;
max-width: none !important;
border-radius: 12px;
}
/* ⚠️ 29/8: era `max-width: 991px` e vinceva sul blocco 768-991 scritto più in
alto nel file (stessa specificità, stesso `!important`, ma questo viene
dopo): a 820 px la foto restava larga tutta la riga. Fra 768 e 991 le due
colonne ci stanno, e si incolonna solo sotto i 768. */
@media (max-width: 767px) {
.single-product div.product .ftc-adzoom.details-img,
.single-product div.product > .details-img,
.single-product div.product .images {
width: 100% !important;
float: none;
}
}
/* ==========================================================================
10. VISIBILITÀ
Non è una sezione di gusto: raccoglie ciò che, misurato sulla pagina viva,
non si vede o non si riesce a toccare. I rapporti di contrasto citati sono
calcolati con la soglia di legge: 4,5:1 per il testo normale, 3:1 per
quello grande, 44x44 px per i bersagli del dito.
========================================================================== */
/* --------------------------------------------------------------------------
10.1 I CONTATTI SU TELEFONO
`responsive.css` del genitore contiene
@media (max-width: 991px) { .header-nav { display: none !important } }
e quella barra è l'UNICO posto del sito dove compaiono i due numeri e
l'indirizzo email: nel footer non ci sono (contate le occorrenze: zero).
Risultato misurato a 390 px: zero telefoni visibili, zero email. Su ogni
telefono e su quasi ogni tavoletta il sito non mostrava alcun modo di
essere contattato — proprio sull'apparecchio che basta toccare per
chiamare.
Si riporta la sola parte dei contatti; il modulo di accesso che le sta
accanto (in inglese, con la sua tendina) resta fuori.
-------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
.header-nav {
display: block !important;
padding: 0;
}
.header-nav .nav-right {
display: none !important;
}
.header-nav .container {
width: 100%;
padding: 0 12px;
}
.header-nav .nav-left {
float: none;
width: 100%;
}
.header-nav .custom_content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0 12px;
padding: 3px 0;
float: none;
width: 100%;
text-align: center;
line-height: 1.3;
/* I trattini che separavano le tre voci servivano a una riga sola: su
due righe restavano appesi nel vuoto. Si azzera il corpo dei nodi di
testo sciolti e lo si ridà solo ai figli veri. */
font-size: 0;
}
.header-nav .custom_content > a,
.header-nav .custom_content > i {
font-size: 12.5px;
}
/* Ogni contatto è un bersaglio da toccare. */
.header-nav .custom_content > a {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 2px;
white-space: nowrap;
}
.header-nav .custom_content > i {
margin-right: 3px;
}
}
/* --------------------------------------------------------------------------
10.2 IL CARRELLO SI PUÒ TOCCARE
Misurato su telefono: 32 x 18 px. È il comando più importante di un
negozio e aveva un'area sensibile grande meno di un terzo di quella
consigliata. Non si ingrandisce la scritta: si allarga l'area.
-------------------------------------------------------------------------- */
.ftc-shop-cart .cart-item > a.ftc-cart-tini {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* --------------------------------------------------------------------------
10.3 «IVA esclusa» LEGGIBILE
Era 10,5 px in rgb(154,144,134) su bianco: 3,13:1, sotto la soglia di
4,5:1. Resta discreta ma si legge: 4,89:1.
-------------------------------------------------------------------------- */
.woocommerce .products .price .woocommerce-price-suffix,
.single-product .summary .price .woocommerce-price-suffix,
.woocommerce-price-suffix {
font-size: 12px;
color: #7a6f66;
}
/* --------------------------------------------------------------------------
10.4 LA DISPONIBILITÀ
Il verde acqua del tema, rgb(21,189,156) sul crema della pagina, dava
2,31:1: si intuiva, non si leggeva. Stesso verde, più scuro: 5,10:1.
(La parola era anche in inglese: quello si corregge in functions.php.)
-------------------------------------------------------------------------- */
.single-product .summary p.availability.in-stock,
.single-product .summary p.availability.in-stock span,
p.stock.in-stock {
color: #0e7a63;
font-weight: 600;
}
.single-product .summary p.availability.out-of-stock,
.single-product .summary p.availability.out-of-stock span,
p.stock.out-of-stock {
color: #b3261e;
font-weight: 600;
}
/* --------------------------------------------------------------------------
10.5 I BERSAGLI TROPPO PICCOLI PER UN DITO
Tutti misurati sotto i 44 px consigliati.
-------------------------------------------------------------------------- */
/* i selettori griglia/lista in cima al negozio: 19 x 19 */
.ftc-shop-view a,
.shop-view a,
a#grid, a#columns4, a#columns3, a#columns2, a#list {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
}
/* il più e il meno della quantità: 30 x 30 */
.quantity input.plus,
.quantity input.minus {
min-width: 40px;
min-height: 40px;
}
/* la lente della ricerca: 43 x 43 sul grande, 30 x 15 sul telefono */
.ftc_search_ajax button.search-button {
min-width: 44px;
min-height: 44px;
}
/* la barra fissa in fondo al telefono: le tre voci erano 36 x 36 */
.footer-mobile a {
min-width: 44px;
min-height: 44px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* --------------------------------------------------------------------------
10.6 IL CONTORNO DEL FUOCO DA TASTIERA
Il tema azzera l'`outline` su pulsanti, collegamenti e campi: chi naviga
con il tabulatore non vede più dove si trova. Si ridà un contorno, ma solo
a chi usa davvero la tastiera (`:focus-visible`), così il clic col mouse
non lascia aloni.
-------------------------------------------------------------------------- */
/* ⚠️⚠️ IL BORDO NERO CHE COMPARE A OGNI CLIC.
Dentro `default.css` c'è il reset di Bootstrap 3:
a:focus { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px }
`:focus` — non `:focus-visible` — quindi scatta anche col MOUSE: si clicca
una scheda prodotto e resta un anello scuro attorno. Il tema prova a
spegnerlo con `:focus { outline: none }`, ma quello vale 0,1,0 e `a:focus`
vale 0,1,1: perde comunque, in qualunque ordine.
Si spegne solo per chi NON sta usando la tastiera. Le sei regole restano
SEPARATE: se un browser non conosce `:focus-visible` butta via l'intera
regola in cui compare, e tenendole distinte se ne perde una sola. */
a:focus:not(:focus-visible) { outline: none; }
button:focus:not(:focus-visible) { outline: none; }
input:focus:not(:focus-visible) { outline: none; }
select:focus:not(:focus-visible) { outline: none; }
textarea:focus:not(:focus-visible) { outline: none; }
[tabindex]:focus:not(:focus-visible) { outline: none; }
/* Chi invece arriva col tabulatore deve vedere dov'è. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid #BE1E2D;
outline-offset: 2px;
border-radius: 2px;
}
/* Sul rosso del marchio un contorno rosso sparirebbe: lì si usa il bianco. */
.header-nav a:focus-visible,
.navigation-primary a:focus-visible,
.btn-danger:focus-visible,
.kta-azioni .button:focus-visible {
outline-color: #fff;
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
10.7 LE DUE SOVRAPPOSIZIONI SU TELEFONO
Misurato a 390 x 844: chi arriva sulla home da telefono trova il riquadro
promozionale (Popup Maker) che occupa il 42,5% dello schermo dentro un
oscuramento che ne copre il 100%, e sotto la banda dei cookie alta 281 px,
un altro 33,3%. Insieme: tre quarti dello schermo coperti, e dietro
c'è l'hero, alto 325 px, che non si vede affatto.
Nessuno dei due si tocca nei contenuti — sono decisioni di marketing e di
legge. Si sistema soltanto quanto spazio prendono e quanto sono
raggiungibili i loro comandi.
-------------------------------------------------------------------------- */
/* La banda dei cookie ha z-index 9999, il riquadro promozionale
1.999.999.999: la banda finiva SOTTO l'oscuramento del promo, quindi
«Accetta Tutti» e «Mostra Dettagli» non erano premibili finché non si
chiudeva il promo — il tocco lo intercettava l'oscuramento. La scelta sui
cookie deve stare sopra tutto. */
#cookie-law-info-bar,
.cli-modal,
.cli-modal-backdrop {
z-index: 2000000001 !important;
}
/* La croce per chiudere il promo era 28 x 28. */
.pum-container .pum-close,
.popmake-close {
min-width: 44px;
min-height: 44px;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
}
@media only screen and (max-width: 767px) {
/* Il testo del promo era composto per un riquadro da 840 px e su 293
andava a sei righe. */
.pum-container .pum-content,
.pum-container .pum-content p {
font-size: 20px;
line-height: 1.25;
}
.pum-container .pum-content .wp-block-button__link,
.pum-container .pum-content .button,
.pum-container .pum-content a.button {
font-size: 15px;
}
/* La banda dei cookie prendeva 281 px, un terzo dello schermo. Stesso
testo, composto per un telefono, e con un tetto: se l'informativa è
lunga scorre dentro la banda invece di allungarla. */
#cookie-law-info-bar {
padding: 10px 12px !important;
max-height: 45vh;
overflow-y: auto;
font-size: 12.5px !important;
line-height: 1.45 !important;
}
#cookie-law-info-bar .cli-bar-message {
font-size: 12.5px !important;
line-height: 1.45 !important;
}
/* «Accetta Tutti» era 104 x 31. */
#cookie-law-info-bar a.cli_action_button,
#cookie-law-info-bar a.cli-plugin-button,
#cookie-law-info-bar #wt-cli-accept-all-btn,
#cookie-law-info-bar .cli_settings_button {
min-height: 44px;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0 16px;
}
}
/* ==========================================================================
11. LA PORTA DELL'AREA CLIENTE
La voce la aggiunge functions.php ai due menu; qui le si dà una forma che
la distingua dalle voci di contenuto senza urlare.
========================================================================== */
/* Il TONDINO accanto al carrello ha il suo stile stampato IN LINEA da
functions.php, insieme al codice che lo crea: vedi la nota là. Qui non se ne
duplicano le regole, o si finisce col correggerne una sola delle due. */
/* Nel menu del telefono resta una voce come le altre, ma staccata dal gruppo
delle pagine e con la sua riga di separazione. */
#main-menu li.kta-voce-account {
margin-top: 6px;
border-top: 1px solid rgba(0, 0, 0, .08);
}
#main-menu li.kta-voce-account > a {
font-weight: 600;
color: #BE1E2D;
}
/* ==========================================================================
12. L'AREA CLIENTE — «Il mio account»
Due schermate distinte, che il tema trattava come una sola pagina qualsiasi:
quella di chi deve ancora entrare (accesso + registrazione) e quella di chi
è dentro (menu + contenuto).
========================================================================== */
/* --------------------------------------------------------------------------
12.1 PRIMA DI ENTRARE: accesso e registrazione
Il tema ne mostrava UNA alla volta e affidava il cambio a un collegamento
che non funzionava: la registrazione era irraggiungibile. Ora stanno
affiancate, ciascuna nella sua scheda.
-------------------------------------------------------------------------- */
.woocommerce #customer_login.kta-due-colonne,
.woocommerce #customer_login.kta-una-colonna {
display: grid;
gap: 28px;
/* Le due schede alte uguale: con `start` si fermavano ognuna sul proprio
contenuto e il bordo inferiore usciva sfalsato di una quarantina di
pixel, che a occhio si legge come un errore. */
align-items: stretch;
max-width: 940px;
margin: 0 auto;
}
.woocommerce #customer_login.kta-due-colonne {
grid-template-columns: 1fr 1fr;
}
/* ⚠️⚠️ Il clearfix diventa una casella della griglia.
WooCommerce mette su `.col2-set` il vecchio trucco per contenere i
galleggianti — `::before` e `::after` con `content: " "` e `display: table`.
Dentro un contenitore a griglia quei due pseudo-elementi non sono più
invisibili: diventano due caselle a tutti gli effetti. Il modulo di accesso
finiva nella seconda casella e quello di registrazione andava a capo, in
una riga tutta sua. Sullo schermo sembrava un difetto di allineamento; era
una casella vuota. */
.woocommerce #customer_login.kta-due-colonne::before,
.woocommerce #customer_login.kta-due-colonne::after,
.woocommerce #customer_login.kta-una-colonna::before,
.woocommerce #customer_login.kta-una-colonna::after {
display: none;
}
.woocommerce #customer_login.kta-una-colonna {
grid-template-columns: minmax(0, 460px);
justify-content: center;
}
/* ⚠️⚠️ IL MODULO DI REGISTRAZIONE ERA SPENTO DAL CSS.
Nel foglio `style.css` del tema, sotto un commento «form account»,
qualcuno aveva scritto a mano:
.woocommerce .f_form_register { display: none; }
Con la registrazione ATTIVA nelle impostazioni di WooCommerce. Il risultato
era un negozio che stampa il modulo, mostra l'invito «Non hai ancora un
account? Registrati» e poi lo nasconde: non ci si poteva iscrivere, e il
collegamento dell'invito non faceva nulla perché il JavaScript che avrebbe
dovuto scambiare le due colonne sul sito non c'è.
Non si tocca il foglio del genitore: lo si scavalca da qui. */
.woocommerce .f_form_register,
.woocommerce #customer_login > div.col-2 {
display: block;
}
/* Il tema impone a ogni colonna `max-width: 460px; margin: 0 auto` e un suo
riquadro grigio: con una colonna sola ci stava, con due si accavallava al
riquadro disegnato qui sotto. */
.woocommerce-account .woocommerce #customer_login > div.col-1,
.woocommerce-account .woocommerce #customer_login > div.col-2 {
max-width: none;
}
.woocommerce #customer_login > div.col-1,
.woocommerce #customer_login > div.col-2 {
float: none;
width: auto;
margin: 0;
padding: 30px 28px 26px;
background: #fff;
border: 1px solid #ece7dd;
border-radius: 14px;
box-shadow: 0 2px 14px rgba(60, 45, 30, .06);
}
/* La colonna della registrazione è l'invito, non il ripiego: si distingue
con un filo del colore del marchio in cima. */
.woocommerce #customer_login > div.col-2 {
border-top: 3px solid #BE1E2D;
}
/* ⚠️ La regola del tema è `.woocommerce-account .woocommerce #customer_login h2`
(0,3,1): per scavalcarla serve almeno la stessa specificità. Il tema le mette
`text-transform: capitalize`, che in inglese passa e in italiano no —
«Crea un account» usciva «Crea Un Account». */
.woocommerce-account .woocommerce #customer_login h2,
.woocommerce #customer_login h2 {
margin: 0 0 6px;
font-size: 26px;
line-height: 1.2;
text-transform: none;
}
.woocommerce #customer_login .kta-spiega {
margin: 0 0 22px;
color: #6f655c;
font-size: 14px;
line-height: 1.55;
}
/* Le etichette dei campi erano SOLO segnaposto: spariscono appena si comincia
a scrivere, e chi si ferma a metà modulo non sa più che campo sta
compilando. Ora sono etichette vere, sempre visibili. */
.woocommerce #customer_login .form-row label {
display: block;
margin-bottom: 6px;
font-size: 13.5px;
font-weight: 600;
color: #3f3830;
}
.woocommerce #customer_login .form-row label .required {
color: #BE1E2D;
text-decoration: none;
border: 0;
}
.woocommerce #customer_login .form-row {
margin-bottom: 18px;
}
.woocommerce #customer_login .input-text {
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid #ddd5c9;
border-radius: 8px;
background: #fff;
font-size: 15px;
transition: border-color .16s ease, box-shadow .16s ease;
}
.woocommerce #customer_login .input-text:focus {
border-color: #BE1E2D;
box-shadow: 0 0 0 3px rgba(190, 30, 45, .12);
outline: none;
}
/* La riga in fondo: «Ricordami» e «Password dimenticata?» sulla stessa linea,
il pulsante largo quanto la scheda sotto di loro. */
.woocommerce #customer_login .kta-riga-comandi {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin-bottom: 0;
}
.woocommerce #customer_login .woocommerce-form-login__rememberme {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
font-weight: 400;
font-size: 14px;
color: #4a423a;
cursor: pointer;
}
.woocommerce #customer_login .woocommerce-form-login__rememberme input {
width: 16px;
height: 16px;
margin: 0;
}
.woocommerce #customer_login .lost_password {
margin: 0;
font-size: 14px;
}
.woocommerce #customer_login .lost_password a {
color: #BE1E2D;
}
/* Il rimando all'informativa dentro il testo della privacy usciva grigio
chiaro e senza sottolineatura: sembrava spento, non un collegamento. */
.woocommerce #customer_login .woocommerce-privacy-policy-text a,
.woocommerce #customer_login .kta-spiega a {
color: #BE1E2D;
text-decoration: underline;
text-underline-offset: 2px;
}
.woocommerce #customer_login .woocommerce-privacy-policy-text {
margin: 0 0 20px;
color: #6f655c;
font-size: 13.5px;
line-height: 1.55;
}
.woocommerce #customer_login button.button {
flex: 1 0 100%;
height: 48px;
margin-top: 4px;
border-radius: 8px;
font-size: 15px;
letter-spacing: .02em;
}
/* Il tema stacca le briciole di 100 px (`.woocommerce-account .ftc-breadcrumb
{ margin-bottom: 100px }`): sopra le schede restava una fascia vuota alta
quanto mezzo schermo di telefono. */
.woocommerce-account .ftc-breadcrumb {
margin-bottom: 55px;
}
@media only screen and (max-width: 767px) {
.woocommerce-account .ftc-breadcrumb {
margin-bottom: 32px;
}
}
/* --------------------------------------------------------------------------
12.2 DENTRO: il menu e il contenuto
WooCommerce li fa galleggiare al 30% e al 68%; con la griglia stanno
allineati in cima e su telefono si incolonnano da soli.
-------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 32px;
align-items: start;
}
/* ⚠️⚠️ IL CLEARFIX, PER LA TERZA VOLTA.
WooCommerce mette su `.woocommerce` i vecchi `::before`/`::after` con
`content:" "; display:table` per contenere i galleggianti. Dentro una
griglia diventano due CASELLE VERE: il menu finiva nella seconda colonna
(larga) e il contenuto scivolava nella riga sotto, prima colonna — 250 px.
Sullo schermo sembrava che la pagina si fosse rotta; era una casella vuota.
Già visto sul modulo d'accesso e sul checkout: qui l'avevo dimenticato. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
display: none;
}
/* E per non dipendere dal conteggio delle caselle, i due blocchi veri si
piazzano da soli: qualunque cosa il tema aggiunga in mezzo, il menu resta
a sinistra e il contenuto a destra. */
@media only screen and (min-width: 992px) {
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 1;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
grid-column: 2;
grid-row: 1;
}
}
/* Quando non si è entrati, la pagina ha solo il modulo: niente colonne.
⚠️ Le due regole restano SEPARATE di proposito: in un elenco di selettori
basta che uno sia sconosciuto al browser perché venga buttata via l'intera
regola, e `:has()` sui browser vecchi lo è. Così la prima vale sempre. */
.woocommerce-account:not(.logged-in) .woocommerce {
display: block;
}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
display: block;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: auto;
margin: 0;
}
.kta-menu-account ul {
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1px solid #ece7dd;
border-radius: 12px;
}
.kta-menu-account ul.kta-uscita {
margin-top: 12px;
}
/* ⚠️ Il tema disegna un riquadro attorno a OGNI voce: dentro la scheda del
menu diventavano sei scatole una dentro l'altra. Il riquadro è uno solo,
quello esterno. */
.woocommerce-account .kta-menu-account ul li,
.kta-menu-account li {
margin: 0;
padding: 0;
list-style: none;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.kta-menu-account li a {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
border-radius: 8px;
color: #3f3830;
font-size: 14.5px;
line-height: 1.3;
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.kta-menu-account li a:hover {
background: #faf6ee;
color: #BE1E2D;
}
.kta-menu-account .kta-icona {
flex: 0 0 auto;
color: #a2988c;
transition: color .15s ease;
}
.kta-menu-account li a:hover .kta-icona {
color: #BE1E2D;
}
/* La voce su cui si è: piena, non solo grassetto. Il tema la segnava soltanto
con un colore appena diverso e non si capiva dove si fosse. */
.kta-menu-account li.is-active > a {
background: #BE1E2D;
color: #fff;
font-weight: 600;
}
.kta-menu-account li.is-active > a .kta-icona {
color: #fff;
}
.kta-menu-account .kta-uscita li a {
color: #7a6f66;
}
/* --------------------------------------------------------------------------
12.3 LA BACHECA
Al posto dei due paragrafi di prosa di WooCommerce, tre riquadri.
-------------------------------------------------------------------------- */
.kta-saluto h2 {
margin: 0 0 4px;
font-size: 26px;
line-height: 1.2;
}
.kta-saluto p {
margin: 0 0 26px;
color: #6f655c;
font-size: 15px;
}
.kta-saluto .kta-esci {
margin-left: 6px;
color: #BE1E2D;
text-decoration: underline;
text-underline-offset: 2px;
}
.kta-riquadri {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.kta-riquadro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 20px 18px;
background: #fff;
border: 1px solid #ece7dd;
border-radius: 12px;
color: #3f3830;
text-decoration: none;
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.kta-riquadro:hover {
border-color: #e3c9cc;
box-shadow: 0 6px 20px rgba(60, 45, 30, .09);
transform: translateY(-2px);
color: #3f3830;
}
.kta-riquadro .kta-icona {
width: 24px;
height: 24px;
margin-bottom: 8px;
color: #BE1E2D;
}
.kta-riquadro-titolo {
font-size: 16.5px;
font-weight: 600;
line-height: 1.25;
}
.kta-riquadro-riga {
color: #6f655c;
font-size: 13.5px;
line-height: 1.45;
}
.kta-vuoto {
margin: 22px 0 0;
padding: 16px 18px;
background: #faf6ee;
border: 1px dashed #e0d6c6;
border-radius: 10px;
color: #6f655c;
font-size: 14.5px;
}
.kta-vuoto a {
margin-left: 4px;
color: #BE1E2D;
font-weight: 600;
}
/* --------------------------------------------------------------------------
12.4 SU TELEFONO
-------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
.woocommerce-account .woocommerce {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
/* Il menu diventa una riga che scorre, così non spinge il contenuto
sotto una colonna di sette voci prima ancora di cominciare. */
.kta-menu-account ul {
display: flex;
gap: 4px;
overflow-x: auto;
padding: 6px;
-webkit-overflow-scrolling: touch;
}
.kta-menu-account li a {
white-space: nowrap;
}
.kta-menu-account ul.kta-uscita {
margin-top: 8px;
}
}
@media only screen and (max-width: 767px) {
.woocommerce #customer_login.kta-due-colonne {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.woocommerce #customer_login > div.col-1,
.woocommerce #customer_login > div.col-2 {
padding: 24px 20px 22px;
}
.woocommerce #customer_login h2 {
font-size: 23px;
}
.kta-riquadri {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
13. LA PAGINA DEL NEGOZIO — impianto nuovo
L'impaginazione la decide `woocommerce/archive-product.php` del tema figlio:
niente più colonna di sinistra, categorie in una fila di pastiglie sopra i
prodotti, griglia a quattro per riga su tutta la larghezza.
========================================================================== */
.kta-negozio .kta-negozio-corpo,
.kta-negozio #primary.site-content {
float: none;
width: 100%;
margin: 0;
padding: 0;
}
/* --------------------------------------------------------------------------
13.1 LA PRESENTAZIONE
Quattro paragrafi a 1170 px — oltre 150 caratteri per riga, contro i 65-75
che si leggono comodamente — col grassetto sparso su una dozzina di
frammenti. Non si cambia una parola (i testi stanno nel pannello): si dà
loro una misura leggibile e meno enfasi.
-------------------------------------------------------------------------- */
.kta-negozio .page-description,
.kta-negozio .term-description {
max-width: 680px;
/* `auto` sui lati: il blocco sta al centro della pagina invece che a
filo del bordo sinistro. */
margin: 0 auto 30px;
text-align: center;
}
.kta-negozio .page-description p,
.kta-negozio .term-description p {
margin: 0 0 10px;
color: #5a5148;
font-size: 14.5px;
line-height: 1.65;
}
.kta-negozio .page-description p:first-child {
color: #2c2620;
font-size: 17px;
line-height: 1.5;
}
.kta-negozio .page-description p:last-child,
.kta-negozio .term-description p:last-child {
margin-bottom: 0;
}
/* Quando è evidenziato quasi tutto, non è evidenziato niente. */
.kta-negozio .page-description strong,
.kta-negozio .page-description b {
font-weight: 600;
color: #2c2620;
}
/* --------------------------------------------------------------------------
13.2 LE PASTIGLIE DELLE CATEGORIE
Erano otto voci incolonnate in un riquadro color pesca largo 300 px, sulla
sinistra: si vedevano solo se si guardava di lato, e rubavano un quarto
della pagina alla griglia. Qui stanno tutte insieme sopra i prodotti, e la
griglia si prende i 1200 px pieni.
-------------------------------------------------------------------------- */
.kta-famiglie {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 26px;
}
.kta-famiglia {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 15px;
background: #fff;
border: 1px solid #e8e1d6;
border-radius: 999px;
color: #3f3830;
font-size: 14px;
line-height: 1.2;
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.kta-famiglia:hover {
border-color: #d8b6ba;
background: #fffaf3;
color: #BE1E2D;
}
.kta-famiglia-conto {
min-width: 22px;
padding: 2px 6px;
border-radius: 999px;
background: #f4efe6;
color: #7a6f66;
font-size: 12px;
font-weight: 600;
text-align: center;
transition: background-color .15s ease, color .15s ease;
}
.kta-famiglia.is-attiva {
background: #BE1E2D;
border-color: #BE1E2D;
color: #fff;
font-weight: 600;
}
.kta-famiglia.is-attiva .kta-famiglia-conto {
background: rgba(255, 255, 255, .22);
color: #fff;
}
/* --------------------------------------------------------------------------
13.3 LA BARRA DEGLI STRUMENTI
Era una scheda bianca con bordo, alta 119 px, larga quanto la griglia:
pesava come un prodotto senza esserlo. Diventa una riga chiusa da un filo,
che ospita anche il filtro del prezzo sceso dalla colonna.
⚠️ Ogni selettore porta `.woocommerce` davanti anche dove non servirebbe a
distinguere: le regole da scavalcare sono `.woocommerce .before-loop-wrapper`
(0,2,0) nel `style.css` del tema E nel CSS del personalizzatore. Senza il
prefisso le mie valgono 0,1,0 e perdono — il `display: flex` non entrava
affatto.
⚠️⚠️ Il conteggio dei risultati è `position: absolute`: è per questo che
«Visualizzazione di 1-12 di 36 risultati» finiva SOTTO il menu a tendina.
-------------------------------------------------------------------------- */
.woocommerce .kta-barra,
.woocommerce-page .kta-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
width: 100%;
margin: 0 0 26px;
padding: 0 0 14px;
background: transparent;
border: 0;
border-bottom: 1px solid #ece7dd;
border-radius: 0;
box-shadow: none;
}
.woocommerce .kta-barra .woocommerce-notices-wrapper {
flex: 1 0 100%;
order: 0;
}
/* I tre modi di vedere la griglia: tre icone che nessuno cerca, e che con la
griglia già a quattro colonne non hanno più molto da offrire. */
.woocommerce .kta-barra nav.grid_list_nav {
display: none;
}
.woocommerce .kta-barra .woocommerce-result-count {
position: static;
order: 1;
float: none;
margin: 0;
padding: 0;
color: #6f655c;
font-size: 14px;
line-height: 1.3;
}
.woocommerce .kta-barra .kta-filtri {
order: 2;
margin-left: auto;
}
.woocommerce .kta-barra .woocommerce-ordering {
position: static;
order: 3;
width: auto;
float: none;
margin: 0;
padding: 0;
}
.woocommerce .kta-barra .orderby-title {
color: #6f655c;
font-size: 14px;
}
.woocommerce .kta-barra .prod-cat-show-top-content-button {
display: none;
}
/* --------------------------------------------------------------------------
13.4 IL FILTRO DEL PREZZO, SCESO NELLA BARRA
-------------------------------------------------------------------------- */
.kta-filtri {
display: flex;
align-items: center;
gap: 16px;
}
/* L'elenco delle categorie è già nelle pastiglie: nella barra resterebbe due
volte. */
.kta-filtri .ftc-product-categories-widget,
.kta-filtri .widget_product_categories,
.kta-filtri .widget_text {
display: none;
}
/* Dentro la barra degli strumenti il contenitore del filtro non è una scheda:
è una riga. Dichiarato con peso sufficiente perché nessuna regola pensata
per le colonne laterali possa riprenderselo. */
.woocommerce .kta-barra .kta-filtri .widget-container,
.kta-filtri .widget-container {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.kta-filtri .widget-title-wrapper {
display: none;
}
.kta-filtri .price_slider_wrapper {
display: flex;
align-items: center;
gap: 14px;
}
.kta-filtri .price_slider_wrapper .ui-slider {
width: 130px;
height: 4px;
margin: 0;
background: #ece7dd;
border: 0;
border-radius: 3px;
}
.kta-filtri .price_slider_wrapper .ui-slider .ui-slider-range {
background: #BE1E2D;
border-radius: 3px;
}
.kta-filtri .price_slider_wrapper .ui-slider .ui-slider-handle {
width: 16px;
height: 16px;
top: -6px;
margin-left: -8px;
background: #fff;
border: 2px solid #BE1E2D;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(60, 45, 30, .2);
}
/* WooCommerce stampa due campi di testo per il minimo e il massimo e li
nasconde via JavaScript: con l'impaginazione nuova uno dei due tornava a
galla come un riquadro bianco vuoto accanto al prezzo. */
.kta-filtri .price_slider_amount input[type="text"],
.kta-filtri .price_slider_amount input[type="number"],
.kta-filtri .price_slider_amount .screen-reader-text {
display: none !important;
}
.kta-filtri .price_slider_amount {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.kta-filtri .price_slider_amount .price_label {
order: 1;
margin: 0;
color: #6f655c;
font-size: 13.5px;
white-space: nowrap;
}
/* ⚠️ Il pulsante «Filtra» usciva come un riquadro BIANCO VUOTO: il mio
`color: #fff` passava, lo sfondo rosso no — la regola del tema
(`.woocommerce .widget_price_filter …`, 0,4,0) batteva la mia a 0,3,0 — e
restava testo bianco su fondo bianco. Serve la catena intera. */
.kta-negozio .kta-filtri .widget_price_filter .price_slider_amount .button,
.kta-filtri .price_slider_amount .button {
order: 2;
min-height: 36px;
padding: 0 14px;
background: #BE1E2D;
border: 0;
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: .03em;
line-height: 36px;
}
.kta-negozio .kta-filtri .widget_price_filter .price_slider_amount .button:hover,
.kta-filtri .price_slider_amount .button:hover {
background: #9c1824;
color: #fff;
}
/* --------------------------------------------------------------------------
13.5 LA GRIGLIA A QUATTRO
⚠️ Il contenitore dei prodotti è un ``,
non una lista, e il tema dà a ogni scheda una larghezza in percentuale
calcolata sulla classe `columns-N`. Invece di inseguire quel calcolo si
dichiara una griglia vera e si azzerano larghezza e margini delle schede:
il numero di colonne lo decide una riga sola, qui.
-------------------------------------------------------------------------- */
.kta-negozio .woocommerce .products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
margin: 0;
padding: 0;
}
/* ⚠️⚠️ `!important` qui è voluto, non una resa. `responsive.css` del tema
assegna a ogni scheda una larghezza in percentuale per ognuna delle sue
soglie, con selettori fino a CINQUE classi
(`.woocommerce-page.columns-4 .products.grid .product`, 0,5,0): dentro una
griglia vera quella matematica non significa più niente — la larghezza la
decide la colonna — ma vince comunque, e su telefono strizzava le schede a
65 px dentro celle da 173. Rincorrere la specificità su otto soglie
diverse sarebbe più fragile di dichiarare una volta che qui la larghezza
non si tocca. */
.kta-negozio .woocommerce .products .ftc-product {
width: auto !important;
margin: 0 !important;
float: none !important;
}
@media only screen and (max-width: 1199px) {
.kta-negozio .woocommerce .products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media only screen and (max-width: 900px) {
.kta-negozio .woocommerce .products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
/* --------------------------------------------------------------------------
13.6 SU TELEFONO
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.kta-negozio .page-description {
margin-bottom: 22px;
}
.kta-negozio .page-description p:first-child {
font-size: 16px;
}
/* Le pastiglie scorrono di lato invece di riempire quattro righe. */
.kta-famiglie {
flex-wrap: nowrap;
gap: 7px;
margin: 0 -15px 22px;
padding: 2px 15px 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.kta-famiglie::-webkit-scrollbar {
display: none;
}
.kta-famiglia {
flex: 0 0 auto;
}
.woocommerce .kta-barra {
gap: 10px 12px;
}
.woocommerce .kta-barra .woocommerce-result-count {
display: block;
flex: 1 0 100%;
order: 1;
}
/* Il filtro del prezzo va a capo, con la sua riga tutta per sé. */
.woocommerce .kta-barra .kta-filtri {
flex: 1 0 100%;
order: 3;
margin-left: 0;
}
/* Il cursore si allarga fino a riempire la riga, ma con un minimo: senza
quello collassava a zero e restava una pallina sola sospesa nel vuoto. */
.kta-filtri .price_slider_wrapper .ui-slider {
flex: 1 1 auto;
width: auto;
min-width: 110px;
}
.kta-filtri,
.kta-filtri .widget-container,
.kta-filtri .widget-container form,
.kta-filtri .price_slider_wrapper {
width: 100%;
}
/* L'ordinamento occupa tutta la riga, così «Ordinamento predefinito» non
va a capo dentro un riquadro stretto. */
.woocommerce .kta-barra .woocommerce-ordering ul.orderby,
.woocommerce .kta-barra .woocommerce-ordering ul.orderby > li {
width: 100%;
}
.woocommerce .kta-barra .orderby-title {
display: none;
}
.woocommerce .kta-barra .woocommerce-ordering {
flex: 1 0 100%;
order: 2;
}
}
/* --------------------------------------------------------------------------
13.7 L'IMPAGINAZIONE IN FONDO
Era una barra bianca bordata larga quanto la griglia, coi numeri schiacciati
a destra: la stessa scatola inutile che era la barra in alto, ripetuta in
fondo. Diventa una fila di pastiglie al centro, sorelle di quelle delle
categorie.
-------------------------------------------------------------------------- */
.woocommerce .after-loop-wrapper,
.woocommerce-page .after-loop-wrapper {
margin: 34px 0 0;
padding: 24px 0 0;
background: transparent;
border: 0;
border-top: 1px solid #ece7dd;
border-radius: 0;
box-shadow: none;
text-align: center;
}
/* ⚠️ La scatola bianca non era il contenitore ma la `nav` stessa: il tema le
dà sfondo, bordo e angoli. Spegnerla sul solo `.after-loop-wrapper` lasciava
il riquadro esattamente dov'era. */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
float: none;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
background: #fff;
border: 1px solid #e8e1d6;
border-radius: 999px;
color: #3f3830;
font-size: 14.5px;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
background: #fffaf3;
border-color: #d8b6ba;
color: #BE1E2D;
}
/* La pagina in cui ci si trova, piena come la pastiglia attiva in alto. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers.current {
background: #BE1E2D;
border-color: #BE1E2D;
color: #fff;
font-weight: 600;
}
/* «Indietro» e «Avanti» portano una parola: si allargano invece di stare
compressi in un quadratino. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.next {
padding: 0 18px;
font-weight: 600;
}
/* Il tema attacca una doppia freccia con uno pseudo-elemento; con l'etichetta
già in parole diventa un doppione. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev::after,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.next::after,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev::before,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.next::before {
content: none;
}
/* Lo stato dello scorrimento infinito: tre frasi in inglese («Loading», «No
Products for load») che il tema stampa sempre, anche quando quel modo di
caricare non è in uso. */
.after-loop-wrapper .page-load-status,
.after-loop-wrapper .onewave-products-load-more.hidden {
display: none;
}
@media only screen and (max-width: 767px) {
.woocommerce .after-loop-wrapper {
margin-top: 26px;
padding-top: 20px;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
gap: 6px;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
min-width: 40px;
height: 40px;
padding: 0 12px;
}
}
/* ==========================================================================
14. IL BLOG
Le schede erano alte 505 px con il contenuto che finiva a 300: duecento
pixel di bianco sotto ogni articolo. I titoli erano in Roboto Slab con le
iniziali maiuscole («Il Sommacco: La Nostra Spezia Magica, Ricca Di
Antiossidanti»), centrati come il testo, e la data compariva TRE volte per
scheda. La colonna di destra era lo stesso riquadro color pesca del vecchio
negozio, coi titoli in corsivo serif rosso.
========================================================================== */
/* --------------------------------------------------------------------------
14.1 LA GRIGLIA DEGLI ARTICOLI
-------------------------------------------------------------------------- */
/* ⚠️ `display: grid !important`: il contenitore porta anche la classe
`owl-carousel`, e il foglio della libreria gli impone il proprio `display`.
Qui il carosello non parte (è una griglia, non uno scorrimento), ma la sua
regola resta e vinceva: `grid-template-columns` entrava e `display` no,
così le schede restavano incolonnate a tutta larghezza. */
.blog-newside .blogs,
.ftc-sb-blogs .blogs {
display: grid !important;
/* ⚠️ 3/9: tre colonne su richiesta. Il contenitore è 1170 e con 26 di stacco
ogni scheda vale 372px: la foto resta sopra i 300 e il titolo sta su due
righe. Sotto i 1200 la gabbia scende a 970 e tre schede darebbero 306px:
lì si torna a due (vedi 14.6). */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
align-items: stretch;
}
/* ⚠️⚠️ IL TAG APERTO CHE SI MANGIA GLI ARTICOLI.
Il sunto di «Si cercano nuove strade per il rilancio del sommacco
siciliano» viene tagliato ai 100 caratteri **in mezzo a un ``**, e
quel tag non viene mai chiuso: il browser, cercando di rimediare, avvolge
dentro di esso tutti gli articoli che seguono. Nel DOM diventano
`div.blogs > strong > article` e perfino `> strong > strong > article`,
quindi non sono più figli della griglia: uscivano larghi 218 px invece di
436, incolonnati in un angolo.
`display: contents` rende quei relitti trasparenti e restituisce gli
articoli alla griglia. ⚠️ È un rimedio alla resa: la cura vera è che il
sunto venga tagliato senza spezzare i tag (o che sia testo semplice). */
.blog-newside .blogs > strong,
.ftc-sb-blogs .blogs > strong,
.blog-newside .blogs strong > strong,
.ftc-sb-blogs .blogs strong > strong {
display: contents;
}
.blog-newside .blogs article.post-wrapper,
.ftc-sb-blogs .blogs article.post-wrapper,
.blog-newside .blogs > article.post-wrapper,
.ftc-sb-blogs .blogs > article.post-wrapper {
display: flex;
flex-direction: column;
width: auto !important;
height: auto !important;
min-height: 0;
margin: 0 !important;
padding: 0;
float: none !important;
background: #fff;
border: 0;
border-radius: 14px;
/* ⚠️ niente ritaglio qui: tagliava «Scopri di Più» */
overflow: visible;
box-shadow: 0 1px 2px rgba(60, 40, 25, .06), 0 6px 18px -12px rgba(60, 40, 25, .28);
transition: box-shadow .28s cubic-bezier(.2, .7, .3, 1), transform .28s cubic-bezier(.2, .7, .3, 1);
}
.blog-newside .blogs > article.post-wrapper:hover,
.ftc-sb-blogs .blogs > article.post-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 2px 4px rgba(60, 40, 25, .08), 0 20px 40px -20px rgba(60, 40, 25, .45);
}
/* --------------------------------------------------------------------------
14.2 LA FOTOGRAFIA
Le foto arrivano da originali di proporzioni diverse (1599x899, loghi
quadrati, locandine verticali) e ognuna dettava un'altezza diversa alla
scheda. Un rettangolo fisso le rende confrontabili.
-------------------------------------------------------------------------- */
.blog-newside .blogs article .post-img,
.ftc-sb-blogs .blogs article .post-img {
border-radius: 14px 14px 0 0;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
background: #f4efe6;
}
.blog-newside .blogs article .post-img > a,
.ftc-sb-blogs .blogs article .post-img > a {
display: block;
line-height: 0;
}
.blog-newside .blogs article .post-img img,
.ftc-sb-blogs .blogs article .post-img img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.blog-newside .blogs article:hover .post-img img,
.ftc-sb-blogs .blogs article:hover .post-img img {
transform: scale(1.04);
}
/* --------------------------------------------------------------------------
14.3 LA DATA, UNA VOLTA SOLA
Il modello ne stampa tre copie per scheda: un riquadro a sinistra della
fotografia, un altro sopra la fotografia e la riga «Feb 18, 2025 /»
nell'intestazione. Se ne tiene una: quella nel testo.
-------------------------------------------------------------------------- */
.blog-newside .blogs article .date-time-left,
.blog-newside .blogs article .post-img .date-time,
.ftc-sb-blogs .blogs article .date-time-left,
.ftc-sb-blogs .blogs article .post-img .date-time {
display: none;
}
/* La data di OGGI, in inglese, stampata in cima all'elenco: non è la data di
nessun articolo, è quella del giorno in cui si guarda la pagina. */
.ftc-sb-blogs > .date-timeline,
.blog-newside > .date-timeline {
display: none;
}
.blog-newside .blogs article .entry-header .date-time,
.ftc-sb-blogs .blogs article .entry-header .date-time {
display: block;
margin: 0 0 6px;
color: #8a8078;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Il trattino divisorio serviva a separare la data dall'autore, che qui non
viene stampato: restava appeso in fondo alla riga. */
.blog-newside .blogs article .entry-header .date-time .space,
.ftc-sb-blogs .blogs article .entry-header .date-time .space {
display: none;
}
/* --------------------------------------------------------------------------
14.4 IL TESTO
-------------------------------------------------------------------------- */
/* ⚠️⚠️ I DUECENTO PIXEL DI BIANCO sotto ogni articolo.
Un blocco `