/* ============================================================
Intestazione, pannelli e mini carrello.
Struttura e misure vengono dal sito attuale: header_present=prebuild
versione v2, tre fasce; topbar alta 42px su fondo #0c0427; fascia mobile
64px con soglia a 1199px; logo alto 25px. I nomi delle impostazioni sono
citati accanto ai valori, così a un riesame si risale alla fonte.
============================================================ */
/* --- barra alta ------------------------------------------------ */
/* Misure prese dal sito, non dalle impostazioni salvate: alta 42px, fondo
#111 (il viola #0c0427 e' salvato in theme_mod ma qualcosa lo sovrascrive:
vale quello che si vede), filo di 1px #322a4c sotto, testo 13px.
Il contenitore qui NON e' quello del resto del tema: sopra i 1025px il sito
usa 1470px con 30px di respiro ai lati, cioe' 1410 di contenuto; sotto quella
soglia niente larghezza massima e 15px di respiro. */
.of-topbar{
position:relative;
background:#111;
color:#fff;
font-size:var(--wp--preset--font-size--sm);
}
/* Il filo sotto la barra non e' un bordo: e' una riga alta 1px appoggiata al
bordo di sotto. Chi cerca borderBottomWidth legge 0px e conclude che non ci
sia niente — e' l'errore che stava scritto qui prima. */
.of-topbar::after{
content:'';
position:absolute;
inset-inline:0;
inset-block-end:0;
height:1px;
background:#322a4c; /* topbar_border_color */
z-index:1;
}
.of-topbar__interno{
display:flex;align-items:center;justify-content:space-between;gap:20px;
width:100%;max-width:1470px; /* 1410 di contenuto piu 2x30 */
margin-inline:auto;
padding-inline:30px;
min-height:42px;
}
/* --- gli avvisi ---
Un nastro di messaggi larghi quanto la pista che scorre di lato, come la
giostra del sito: 15px di stacco fra uno e l'altro, 400ms di scorrimento.
La riga alta 42px tiene la barra alla sua altezza anche se il testo va a
capo, e il capo a riga e' quello del sito (niente puntini di sospensione). */
.of-topbar__avvisi{
position:relative;
display:flex;align-items:center;
min-width:0;flex:1 1 auto;
}
.of-topbar__pista{
overflow:hidden;
min-width:0;flex:1 1 auto;
padding-inline-start:55px; /* lo spazio che le frecce occupano */
}
.of-topbar__nastro{
display:flex;
gap:15px; /* spaceBetween della giostra */
transition:transform 400ms ease;
}
.of-topbar__avviso{
flex:0 0 100%;
margin:0;
line-height:42px;
white-space:normal;
overflow:hidden;
}
/* Le due frecce stanno appaiate a sinistra del testo e sporgono di 10px oltre
il bordo del contenuto. Il fondo e' opaco: il testo che scorre passa sotto,
non attraverso. */
.of-topbar__frecce{
position:absolute;
inset-inline-start:-10px;
inset-block:0;
z-index:2;
display:flex;align-items:center;
background:#111;
}
.of-topbar__freccia{
flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
width:26px;height:25px;padding:0;
border:0;background:none;
color:rgb(255 255 255 / .5);
cursor:pointer;
transition:color 400ms ease; /* --gz-arrow-transition */
}
.of-topbar__freccia:hover,
.of-topbar__freccia:focus-visible{color:#fff}
.of-topbar__sinistra{
display:flex;align-items:center;gap:20px;
min-width:0;flex:1 1 auto;
}
.of-topbar__destra{
display:flex;align-items:center;gap:20px;
flex-shrink:0;
}
.of-topbar--piena .of-topbar__interno{max-width:none}
.of-topbar__html{display:flex;align-items:center;gap:10px}
.of-topbar__menu{
display:flex;gap:20px;list-style:none;margin:0;padding:0;
}
.of-topbar__menu a{color:#fff;opacity:.8;text-decoration:none}
.of-topbar__menu a:hover{opacity:1} /* topbar_hover_color = #fff */
/* La soglia della barra alta e' 1024px, e NON i 1199px dell'intestazione: sono
due cose diverse e vanno tenute separate. Sotto, il lato destro sparisce, il
respiro passa a 15px, il testo si centra sullo schermo e le frecce vanno una
per lato. */
@media(max-width:1024px){
.of-topbar__interno{
max-width:none;
padding-inline:var(--of-gutter);
justify-content:center;
}
/*
* Mobile → Barra superiore: quale meta' resta sul telefono. Sul sito la
* sinistra (gli avvisi). Con «tutti» la barra scorre di lato; spenta, sparisce.
*/
.of-topbar--telefono-left .of-topbar__destra{display:none}
.of-topbar--telefono-right .of-topbar__sinistra{display:none}
.of-topbar--telefono-all .of-topbar__interno{overflow-x:auto;justify-content:space-between}
.of-topbar--solo-computer{display:none}
/* Le frecce si allargano ai due estremi e il testo passa sopra, centrato. */
.of-topbar__frecce{
position:static;
inset:auto;
width:100%;
justify-content:space-between;
background:none;
}
.of-topbar__pista{
position:absolute;
inset-inline:26px;
inset-block:0;
padding-inline-start:0;
flex:0 0 auto;
}
.of-topbar__avviso{text-align:center}
}
@media(max-width:767px){
/* Su telefono la riga torna all'interlinea del testo, cosi' un messaggio
lungo puo' mostrare due righe dentro i 42px invece di una sola. */
.of-topbar__avviso{
line-height:1.714;
max-height:42px;
}
.of-topbar__pista{display:flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){
.of-topbar__nastro{transition:none}
}
/* --- fascia principale ----------------------------------------- */
.of-header{
position:relative;z-index:40;
background:var(--wp--preset--color--background);
}
.of-header__principale{border-bottom:1px solid var(--wp--preset--color--border)}
.of-header__interno{
display:flex;align-items:center;gap:20px;
min-height:var(--of-header-h);
}
.of-header__logo{flex:0 0 auto;display:flex;align-items:center}
.of-header__logo img{height:var(--of-logo-h);width:auto} /* logo_dimension.height=25 */
.of-header__nome{
font-size:20px;font-weight:600;letter-spacing:-0.034em;
color:var(--wp--preset--color--dark);text-decoration:none;
}
.of-header__azioni{
margin-inline-start:auto;
display:flex;align-items:center;gap:5px;
}
/* Al passaggio del mouse cambia SOLO il colore del disegno, da nero a rosso:
sul sito non compare nessuna pastiglia e gli angoli non sono arrotondati
(background trasparente e border-radius 0, misurati). */
.of-header__azione{
position:relative;
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;
color:var(--wp--preset--color--dark);
background:none;border:0;cursor:pointer;text-decoration:none;
transition:color var(--of-transizione);
}
.of-header__azione:hover,
.of-header__azione:focus-visible{color:var(--wp--preset--color--primary)}
/* Il contatore, misurato sul sito attuale: glozin/style.css riga 251,
`.header-counter`. Ogni valore qui viene da li' e non va arrotondato --
18px di lato, line-height 19px e top 5px sono quelli, e il contenitore e'
in entrambi i casi il quadrato da 40px dell'azione (.gz-button-icon). */
.of-header__badge{
position:absolute;inset-block-start:5px;inset-inline-end:0;z-index:2;
min-width:18px;height:18px;padding:0 3px;
display:block;text-align:center;
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
border-radius:20px;
background:var(--wp--preset--color--primary);
color:var(--of-testo-su-primario,#fff);font-size:10px;font-weight:500;line-height:19px;
}
.of-header__badge[hidden]{display:none}
/* L'hamburger esiste solo sotto la soglia mobile. */
/* Misure del sito: 42 x 24,25 con il respiro a destra, non una scatola
quadrata centrata. Cosi' il disegno comincia esattamente sul filo dei 15px
del contenitore invece che un pixel dentro. */
.of-header__hamburger{
display:none;
align-items:center;justify-content:flex-start;
width:42px;height:24.25px;padding:2px 20px 0 0;
background:none;border:0;cursor:pointer;color:var(--wp--preset--color--dark);
}
/* --- fascia bassa: il menu, centrato ---------------------------- */
/* header_bottom_center = primary-menu · header_bottom_divider = true */
/* --- disposizione della fascia principale ---
Il sito ha due fasce, non tre: logo, menu e icone stanno sulla stessa riga.
La griglia con le due colonne laterali uguali (1fr) è l'unico modo per
centrare il menu rispetto alla finestra e non rispetto allo spazio che
avanza fra logo e icone, che hanno larghezze diverse. */
/*
* Le fasce si compongono dal pannello (inc/intestazione.php): ognuna ha tre
* zone, sinistra centro destra, e in ogni zona gli elementi scelti. Le zone
* laterali sono 1fr: e' l'unico modo per centrare quella di mezzo rispetto
* alla finestra e non allo spazio che avanza fra le altre due.
*
* Due versioni della stessa intestazione: .of-header__computer sopra la
* soglia, .of-header__telefono sotto. La soglia e' `header_mobile_breakpoint`
* (1199 sul sito); se il pannello la cambia, la nuova la scrive
* inc/opzioni/intestazione.php.
*/
.of-header__telefono{display:none}
.of-header__zona{display:flex;align-items:center;gap:20px;min-width:0}
.of-header__zona:empty{min-width:0}
.of-header__zona--centro{justify-content:center}
.of-header__zona--destra{justify-content:flex-end}
@media(min-width:1200px){
/* Il contenitore e' quello del sito, non quello del tema: 1470px con 30px
di respiro, cioe' 1410 di contenuto. Con 1410 e 15px il logo finiva 15px
piu' dentro e la riga era 30px piu' stretta. */
.of-header__computer .of-header__interno{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
/* 69 e non 70: il bordo di sotto sta su .of-header__principale e porta
la fascia a 70 esatti, come .header-main del sito. */
min-height:var(--of-header-principale-h,69px);
max-width:1470px;
padding-inline:30px;
}
.of-header--piena .of-header__computer .of-header__interno{max-width:none}
.of-header__zona--sinistra{justify-self:start}
.of-header__zona--centro{justify-self:center;align-self:stretch}
.of-header__zona--destra{justify-self:end}
.of-header__nav{align-self:stretch}
.of-header__azioni{margin-inline-start:0}
/* La fascia inferiore: 60 di altezza, un filo sopra se richiesto. */
.of-header__computer .of-header__interno--inferiore{min-height:var(--of-header-inferiore-h,60px)}
.of-header__inferiore{border-bottom:1px solid var(--wp--preset--color--border)}
.of-header__inferiore:not(.of-header__inferiore--filo){border-bottom-color:transparent}
}
/* Con piu' elementi in una zona (la v5: logo e menu insieme) il menu non
si stringe a fianco del logo ma prende il suo respiro. */
.of-header__zona--sinistra .of-header__logo + .of-header__nav{margin-inline-start:30px}
/* Icone grandi (v4, o scelte nel pannello) e testo accanto all'icona. */
.of-header__azione--grande{width:48px;height:48px}
.of-header__azione--grande .of-icona{transform:scale(1.25)}
.of-header__azione--testo{
width:auto;gap:8px;padding-inline:6px;
font-size:15px;font-weight:500;
}
.of-header__azione-testo{white-space:nowrap}
.of-header__azione--testo .of-header__badge{inset-inline-end:auto;inset-inline-start:14px}
/* Il campo di ricerca in riga (v1, v4, v5): largo quanto il pannello dice. */
.of-header__cerca-campo{
position:relative;
display:flex;align-items:center;
width:var(--of-cerca-larghezza,330px);max-width:100%;
}
.of-header__cerca-campo input[type="search"]{
width:100%;height:44px;
padding:0 44px 0 20px;
border:1px solid var(--of-campo-bordo,var(--wp--preset--color--border));
border-radius:var(--of-radius-bottone,30px);
background:var(--of-campo-sfondo,#fff);
font:inherit;font-size:14px;
color:var(--of-campo-testo,var(--wp--preset--color--text));
}
.of-header__cerca-campo input[type="search"]:focus{outline:0;border-color:var(--of-campo-bordo-hover,var(--wp--preset--color--dark))}
.of-header__cerca-invia{
position:absolute;inset-inline-end:6px;
display:grid;place-items:center;
width:34px;height:34px;padding:0;border:0;background:none;
color:var(--wp--preset--color--dark);cursor:pointer;
}
.of-header__html{font-size:14px}
.of-header__lingua,.of-header__valuta{display:flex;align-items:center}
/* Sotto la soglia il menu non si mostra in riga: vive nel pannello a
scomparsa, aperto dall'hamburger. */
@media(max-width:1199px){
.of-header__nav{display:none}
}
/* Lo spazio fra le voci non e' un gap fra i
: e' respiro DENTRO ogni
voce, 17px per lato, che si annulla ai due estremi. Fra due testi restano
quindi 34px. E ogni
e' alto tutta la fascia, non quanto il suo testo:
e' quello che impedisce al mega menu di chiudersi mentre il mouse scende
dalla voce al pannello — fra i due non resta un buco scoperto. */
.of-menu{
display:flex;align-items:stretch;
list-style:none;margin:0;padding:0;
height:100%;
}
.of-menu>li{
display:flex;align-items:center;
height:100%;
padding-inline:17px;
}
.of-menu>li:first-child{padding-inline-start:0}
.of-menu>li:last-child{padding-inline-end:0}
/* 15px scritto, non il preset `base`: quel preset ora vale 16px, cioe' il
corpo del testo del sito. Queste misure invece sono 15 e sono state
verificate una per una sul sito; agganciarle al preset le ha mosse a 16
quando ho corretto il corpo base. */
.of-menu a{
display:inline-flex;align-items:center;
color:var(--wp--preset--color--dark);
font-size:15px;
font-weight:600;line-height:25px; /* come nel sito: 15px, peso 600 */
text-decoration:none;
/* Sul sito il colore cambia di colpo: la transizione dichiarata li' e'
solo su una sottolineatura che non compare mai. */
transition:none;
}
.of-menu a:hover{color:var(--wp--preset--color--primary)}
/* L'etichetta sta sopra la voce, non di fianco: serve un riferimento sul
link, e il sottomenu continua a posizionarsi sul
che lo contiene. */
.of-menu a{position:relative}
/* La freccia di "Shop" e delle altre voci con tendina. Sul sito non e' un
carattere ne' un'immagine: e' un rettangolo 10x6 del colore del testo con
la sagoma della freccia ritagliata sopra, appoggiato al bordo destro del
link. Cosi' segue il colore al passaggio del mouse senza una seconda
regola. Il riferimento e' il link, che ha gia' position:relative qui
sopra; i 17px di respiro a destra sono la differenza fra il link del sito
(54px) e il suo testo (37px). */
.of-menu .menu-item-has-children > a{padding-inline-end:17px}
.of-menu .menu-item-has-children > a::before{
content:'';position:absolute;
inset-inline-end:0;inset-block-start:50%;
width:10px;height:6px;
background-color:currentColor;
transform:translateY(-3px);
-webkit-mask:var(--of-freccia-giu) no-repeat 50% 50%/cover;
mask:var(--of-freccia-giu) no-repeat 50% 50%/cover;
}
/* Il carrello e' il glifo `icon-cart`, con il riquadro stretto sul disegno e
proporzione 1,3911: e' piu' largo che alto, quindi la larghezza va scritta
a mano come per il cuore.
Nell'intestazione: 17px di altezza come le altre tre, 23,65 = 17 x 1,3911.
Nella barra in fondo: le misure del sito, dove il glifo e' reso a 20px di
corpo — il disegno viene 26,32 x 18,92. */
.of-header__carrello .of-icona--carrello-testata{width:20px;height:20px}
.of-barra-mobile .of-icona--carrello{width:26.32px;height:18.92px}
/* "Novità" sopra Nuovi arrivi. Misure del sito attuale: 9px, peso 600,
3px/5px di respiro, angoli da 2px, 13px sopra e 18px a destra.
Due classi, non una. .of-menu__badge e' quella del tema; .menu-item-badge
e' quella che stampa glozin-addons, che e' un plugin e quindi lavora anche
con questo tema — ma il suo foglio di stile no, e senza queste righe il
badge finisce in pagina come testo nudo attaccato al nome della voce. */
.of-menu__badge,
.of-menu .menu-item-badge,
.of-menu-mobile__lista .of-menu__badge,
.of-menu-mobile__lista .menu-item-badge{
position:absolute;
top:-13px;
inset-inline-end:-18px;
min-width:30px;
padding:3px 5px;
border-radius:2px;
background:var(--of-badge-sfondo,var(--gz-menu-item-badge-bg,var(--wp--preset--color--primary)));
color:var(--of-badge-colore,var(--gz-menu-item-badge-color,#fff));
font-size:9px;
font-weight:600;
line-height:1;
letter-spacing:normal;
text-transform:uppercase;
text-align:center;
white-space:nowrap;
}
/* La punta. Non e' un rettangolo: e' un fumetto, con un triangolino sotto
che indica la voce a cui l'etichetta si riferisce. Otto pixel di lato,
fatti con i bordi di una scatola vuota: il bordo superiore colorato e gli
altri tre trasparenti danno un triangolo che punta in basso. Sta al 30%
della larghezza, non al centro, ed e' cosi' anche sul sito. */
.of-menu__badge::after,
.of-menu .menu-item-badge::after,
.of-menu-mobile__lista .of-menu__badge::after,
.of-menu-mobile__lista .menu-item-badge::after{
content:'';
position:absolute;
inset-block-start:100%;
inset-inline-start:30%;
width:0;
height:0;
border:4px solid transparent;
border-block-start-color:var(--of-badge-sfondo,var(--gz-menu-item-badge-bg,var(--wp--preset--color--primary)));
transform:translateX(-4px);
}
/* Nel pannello mobile le voci stanno in colonna e non c'e' spazio sopra:
l'etichetta torna in linea, dopo il testo, e la punta si gira verso
sinistra a indicare il nome. */
/* Nel pannello l'etichetta sta in linea, dopo il nome, e ha una punta a
sinistra — una bandierina. Il testo e' scuro sul rosso, non bianco: e'
cosi' sul sito, e sul rosso #d0473e il nero si legge meglio del bianco. */
.of-menu-mobile__lista .of-menu__badge,
.of-menu-mobile__lista .menu-item-badge{
position:relative;
display:inline-block;
/* Gli scostamenti della variante desktop vanno azzerati: restando in
vigore su un elemento `relative` spostavano il badge 13px piu' su e
18px a destra, fuori asse rispetto al nome della voce. */
inset-block-start:auto;
inset-inline-end:auto;
/* Lo spazio prima del badge lo da' il `gap` del link: un margine qui lo
sommerebbe due volte. */
margin:0;
padding:5px;
color:var(--wp--preset--color--dark);
}
/* Qui la punta guarda a sinistra — bordo destro colorato — e sta in alto,
non a mezza altezza: sono i valori del sito. */
.of-menu-mobile__lista .of-menu__badge::after,
.of-menu-mobile__lista .menu-item-badge::after{
inset-block-start:0;
inset-inline-start:0;
border-block-start-color:transparent;
border-inline-end-color:var(--of-badge-sfondo,var(--gz-menu-item-badge-bg,var(--wp--preset--color--primary)));
transform:translateX(-8px);
}
/* Sottomenu: si apre al passaggio, e con la tastiera al focus. */
.of-menu li{position:relative}
.of-menu .sub-menu{
position:absolute;inset-block-start:100%;inset-inline-start:0;
min-width:220px;margin:0;padding:10px 0;
list-style:none;
background:var(--wp--preset--color--background);
border:1px solid var(--wp--preset--color--border);
border-radius:var(--of-radius-sm);
box-shadow:var(--wp--preset--shadow--md);
opacity:0;visibility:hidden;transform:translateY(4px);
transition:opacity var(--of-transizione),transform var(--of-transizione),visibility var(--of-transizione);
}
.of-menu li:hover>.sub-menu,
.of-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.of-menu .sub-menu a{display:block;padding:8px 20px;font-weight:400}
/* --- mega menu ---
La voce scelta nel Customizer (di norma "Shop") non apre una tendina stretta
ma un pannello largo quanto la finestra, come nel sito attuale.
Perché possa allargarsi, quella voce rinuncia al proprio contesto di
posizionamento: il riferimento torna a essere .of-header, che è relative. */
/* Serve battere `.of-menu li{position:relative}`, che è più specifica: senza
questo il pannello si ancora alla voce e resta largo quanto lei. */
.of-menu li.of-menu__mega{position:static}
/* Il pannello del mega menu. Misure del sito: fondo bianco, angoli di sotto
da 10px, tre pixel bianchi in cima che fanno da distacco (non una riga
grigia: quella si sommava al bordo della fascia e si vedeva doppia), ombra
larga e tenue, 25px di respiro sopra e sotto piu' 15px del contenitore, e
una discesa di 20px in 300ms. */
.of-megamenu{
position:absolute;inset-block-start:100%;inset-inline:0;
z-index:30;
min-width:260px;
padding-block:25px;
background:var(--wp--preset--color--background);
border-block-start:3px solid var(--wp--preset--color--background);
border-end-start-radius:var(--of-radius-md);
border-end-end-radius:var(--of-radius-md);
box-shadow:0 5px 30px rgb(0 0 0 / .05);
opacity:0;visibility:hidden;transform:translateY(20px);
transition:opacity .3s,transform .3s,visibility .3s;
}
.of-menu__mega:hover>.of-megamenu,
.of-menu__mega:focus-within>.of-megamenu{opacity:1;visibility:visible;transform:none}
/* Il contenitore del pannello e' quello della fascia piu' 40px di respiro,
e la riga delle colonne li riguadagna con un margine negativo di 10px per
lato: cosi' i link cadono a filo del logo e fra i contenuti di due colonne
restano 20px. Prima il pannello usava il contenitore stretto da 1200 e le
voci finivano 105px piu' dentro del logo. */
.of-megamenu__interno{
width:100%;
max-width:1470px;
margin-inline:auto;
padding:15px 40px;
}
.of-megamenu__elenco{
display:flex;
flex-wrap:nowrap;
margin:0 -10px;padding:0;list-style:none;
}
.of-megamenu__colonna{
flex:0 0 auto;
padding-inline:10px;
}
/* Il titolo di colonna: solo la prima ne ha uno sul sito, le altre hanno lo
stesso elemento vuoto — e i suoi 10px di respiro sotto servono, perche'
allineano l'inizio dei link di tutte le colonne. */
.of-megamenu__titolo{
display:inline-block;
padding-block-end:10px;
font-size:16px;font-weight:600;line-height:16px;
color:var(--wp--preset--color--dark);
}
.of-megamenu__voci{margin:0;padding:0;list-style:none}
/* 27,42px e non l'interlinea del testo (25,71): sul sito il
sta in un
contesto a 16px, e il link, essendo inline-block, non alza la riga ma ci
sta dentro. Il passo fra due voci viene cosi' 5 + 27,42 + 5 = 37,42 come
sul sito, invece di 35,7. */
.of-megamenu__voci>li{padding-block:5px;line-height:27.42px}
/* Al passaggio non cambia colore: cresce una sottolineatura da destra a
sinistra. E' un gradiente alto un pixel che passa da larghezza zero a
tutta la larghezza in 400ms. */
.of-megamenu__elenco a{
display:inline-block;
font-size:15px;
font-weight:400;
color:var(--wp--preset--color--text);
text-decoration:none;
background-image:linear-gradient(to right,currentColor,currentColor);
background-position:100% 100%;
background-repeat:no-repeat;
background-size:0 1px;
transition:background-size .4s;
}
.of-megamenu__elenco a:hover,
.of-megamenu__elenco a:focus-visible{
background-position:0 100%;
background-size:100% 1px;
}
.of-megamenu__immagine{
display:block;width:100%;height:auto;
aspect-ratio:1;object-fit:cover;
border-radius:var(--of-radius-md);
}
/* Il pannello vive solo nella fascia desktop, che sotto i 1200px non c'e':
la soglia e' quella, non 1024 — sotto i 1200 non esiste piu' nemmeno la
voce che lo aprirebbe. */
@media (max-width:1199px){
.of-megamenu{display:none}
}
/* --- sticky ------------------------------------------------------ */
/* header_sticky=true. L'intestazione resta in vista e NON si ritrae mai
scendendo: provato sul sito a 900, 1200 e 1800 di scorrimento, e' sempre
la'. Prima si ritraeva, e quello era uno scostamento.
L'ombra e' quella del sito: larga e spostata di lato, non una riga. */
.of-header[data-of-fissa]{
position:sticky;inset-block-start:0;
box-shadow:5px 0 30px rgb(0 0 0 / .08);
transition:transform .3s ease;
}
/* «Risalendo» (Intestazione fissa → Resta fissa): scendendo si ritrae. */
.of-header[data-of-fissa][data-of-nascosta]{transform:translateY(-100%)}
/* Quale fascia resta quando l'intestazione e' fissa: l'altra si toglie. */
@media(min-width:1200px){
.of-header[data-of-fissa][data-of-fissa-cosa="header_main"] .of-header__inferiore{display:none}
.of-header[data-of-fissa][data-of-fissa-cosa="header_bottom"] .of-header__principale.of-header__computer{display:none}
}
@media(max-width:1199px){
.of-header[data-of-fissa][data-of-fissa-mobile="header_main"] .of-header__inferiore{display:none}
.of-header[data-of-fissa][data-of-fissa-mobile="header_bottom"] .of-header__principale.of-header__telefono{display:none}
}
@media(prefers-reduced-motion:reduce){
.of-header[data-of-fissa]{transition:none}
}
/* --- barra promozionale ------------------------------------------ */
/* Sul sito spenta. I colori li scrive il pannello (inc/opzioni/css-intestazione.php). */
.of-campagna{
background:var(--of-campagna-sfondo,#1d2f2f);
color:var(--of-campagna-testo,#fff);
font-size:var(--wp--preset--font-size--sm);
}
.of-campagna__interno{
display:flex;align-items:center;justify-content:center;gap:12px;
min-height:42px;
max-width:1470px;margin-inline:auto;padding-inline:30px;
text-align:center;
}
.of-campagna--messaggi .of-campagna__interno{max-width:calc(var(--of-campagna-larghezza,550px) + 60px)}
.of-campagna .of-topbar__frecce{background:var(--of-campagna-sfondo,#1d2f2f)}
.of-campagna .of-topbar__freccia{color:var(--of-campagna-testo,rgb(255 255 255 / .5))}
.of-campagna .of-topbar__freccia:hover{color:var(--of-campagna-passaggio,#fff)}
.of-campagna a{color:inherit;text-decoration:underline}
.of-campagna a:hover{color:var(--of-campagna-passaggio,inherit)}
.of-campagna__immagine{width:24px;height:24px;object-fit:contain}
.of-campagna__conto{display:inline-flex;gap:10px;font-weight:600}
.of-campagna__cifra small{font-weight:400;opacity:.8}
@media(max-width:1024px){
.of-campagna__interno{padding-inline:var(--of-gutter)}
}
/* --- ricerca: ricerche frequenti, e la versione nel pannello laterale --- */
.of-ricerca__frequenti{margin-top:25px}
.of-ricerca__frequenti-elenco{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:10px 0 0;padding:0}
.of-ricerca__frequenti-elenco a{
display:inline-block;padding:6px 15px;
border:1px solid var(--wp--preset--color--border);border-radius:var(--of-radius-pill);
color:var(--wp--preset--color--dark);font-size:14px;text-decoration:none;
}
.of-ricerca__frequenti-elenco a:hover{border-color:var(--wp--preset--color--dark)}
.of-ricerca--laterale{width:420px;max-width:100%;overflow-y:auto}
.of-ricerca--laterale .of-contenitore{padding-inline:25px;padding-block:60px 30px}
.of-ricerca--laterale .of-ricerca__prodotti,
.of-ricerca--laterale .of-ricerca__carica-card{grid-template-columns:repeat(2,minmax(0,1fr))}
/* --- pannello di accesso (Profilo → «Apre la finestra di accesso») --- */
.of-accesso-pannello__corpo{padding:25px}
.of-accesso-pannello .woocommerce-form-login{margin:0;padding:0;border:0}
.of-accesso-pannello .form-row{margin:0 0 15px;padding:0}
.of-accesso-pannello label{display:block;margin:0 0 6px;font-size:14px;font-weight:500;color:var(--wp--preset--color--dark)}
.of-accesso-pannello input.input-text{
width:100%;height:50px;padding:0 20px;box-sizing:border-box;
border:1px solid var(--of-campo-bordo,#ebebeb);border-radius:var(--of-radius-campo,5px);
background:var(--of-campo-sfondo,#fff);font:inherit;font-size:14px;
}
.of-accesso-pannello .woocommerce-form-login__submit{
width:100%;min-height:50px;
border:0;border-radius:var(--of-radius-bottone,30px);
background:var(--wp--custom--bottone--sfondo,#111);color:var(--wp--custom--bottone--testo,#fff);
font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.of-accesso-pannello__registrati{margin-top:20px;font-size:14px}
/* --- sotto la soglia mobile (header_mobile_breakpoint = 1199) ----- */
@media(max-width:1199px){
.of-header__computer{display:none}
.of-header__telefono{display:block}
.of-header__telefono .of-header__hamburger{display:inline-flex}
/* Hamburger, logo e icone su tre colonne: le laterali uguali tengono il
logo al centro della finestra, come quando stava in posizione assoluta. */
.of-header__interno--telefono{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:8px;
/* Il filo di 1px sotto sta su .of-header__principale: 63 + 1 = 64,
l'altezza della fascia del sito. */
min-height:calc(var(--of-header-h) - 1px);
}
.of-header__interno--telefono.of-header__interno--inferiore{min-height:var(--of-header-mobile-inferiore-h,60px)}
/* Le distanze delle zone di glozin: 15 a sinistra e al centro, 5 a destra. */
.of-header__telefono .of-header__zona{gap:15px}
.of-header__telefono .of-header__zona--destra,
.of-header__telefono .of-header__zona--destra .of-header__azioni{gap:5px}
.of-header__telefono .of-header__zona--sinistra{justify-self:start}
.of-header__telefono .of-header__zona--centro{justify-self:center}
.of-header__telefono .of-header__zona--destra{justify-self:end}
.of-header__telefono .of-header__logo{justify-content:center}
.of-header__inferiore.of-header__telefono{border-top:1px solid var(--wp--preset--color--border)}
/* «Larghezza automatica delle icone» (sul sito accesa): come in glozin
vale solo per ricerca e profilo, che occupano il loro disegno invece
del quadrato da 40. Preferiti e carrello restano 40. */
.of-header--icone-strette .of-header__telefono .of-header__cerca,
.of-header--icone-strette .of-header__telefono .of-header__account{width:auto;min-width:24px}
/*
* header_mobile_main_right = wishlist: nell'intestazione del sito, a
* schermo stretto, resta UNA sola icona, il cuore. Profilo e carrello sono
* nella barra in fondo.
*
* La lente non e' raggiungibile da nessun'altra parte — nel pannello del
* menu non c'e' un campo di ricerca e nella barra in fondo non c'e' la
* ricerca — ed e' cosi' anche sul sito. Resta nascosta per non discostarsi,
* ma e' un buco: da telefono non si puo' cercare.
*/
}
/* Il testo accanto all'hamburger (Mobile → Elementi → «Testo accanto al menu»). */
.of-header__hamburger--testo{width:auto;gap:8px;padding-inline-end:0}
.of-header__hamburger-testo{font-size:15px;font-weight:500;color:var(--wp--preset--color--dark)}
/* --- pannelli a scomparsa ---------------------------------------- */
/* Sul sito il velo compare di colpo — transition-duration 0s — ed e' al 50%. */
/* 90 e 100 e non 50 e 60: la barra di acquisto della scheda prodotto sta a 60
e restava accesa sopra al velo, cliccabile, mentre il carrello era aperto. */
/* Sul velo il puntatore diventa una croce: dice che quello scuro non e' una
parte spenta della pagina ma il modo per chiudere. E' quello che fa il sito.
Il disegno e' una PNG da 32 disegnata qui dentro — in SVG non si puo': i
cursori SVG su Safari non esistono. Il ripiego `pointer` vale per chi non
la carica. */
.of-velo{
position:fixed;inset:0;z-index:90;
background:rgb(0 0 0 / .5);
opacity:0;
cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAhklEQVR42u2W0QnAMAhE3Sjzdr/sYRvwo5RSTlO4plxA8qPeI1ETc3djmglAAAJYAaAdtsWOJoZjkGQj0VgdhGjh6xH7ygl0ECLjm6oBJHFaPFuETwIl8UoX3AmVxatteBUsi8/MgTNEWXxZAOoVUIuQ2obUQUQfxZ94jKjPsX5EAhDAvwF2qIVJrZPBzqkAAAAASUVORK5CYII=") 16 16, pointer;
}
/* Pagina ferma mentre un pannello e' aperto.
Il padding non e' un vezzo: sparendo la barra di scorrimento la pagina si
allarga di quei 15px e tutto scatta a destra proprio mentre il pannello
entra. Lo spazio glielo rende header.js, che la barra la misura. */
html[data-of-bloccata]{
overflow:hidden;
padding-inline-end:var(--of-barra-scorrimento,0px);
}
.of-velo[data-of-visibile]{opacity:1}
.of-velo[hidden]{display:none}
/* La pagina sotto un pannello non deve scorrere: `data-of-bloccata` lo mette
lo script sulla radice, insieme alla misura della barra di scorrimento.
Il padding va sul body, non sulla radice: sparendo la barra la pagina si
allargherebbe di quei 15px e l'intestazione — che sta nel flusso — le
scatterebbe a destra nell'istante in cui il pannello entra. */
html[data-of-bloccata]{overflow:hidden}
html[data-of-bloccata] body{padding-inline-end:var(--of-barra-scorrimento,0px)}
/* Tempi e curva del sito. La larghezza NON sta qui: i pannelli che entrano di
lato sono larghi 375, quello che scende dall'alto e' largo quanto la
finestra, e mettere una larghezza qui la fa ereditare a tutti. */
.of-pannello{
position:fixed;inset-block:0;inset-inline-start:0;z-index:100;
width:375px;max-width:430px;
display:flex;flex-direction:column;
background:var(--wp--preset--color--background);
transform:translateX(-100%);
transition:transform .6s cubic-bezier(.7,0,.2,1);
}
@media(max-width:374px){
.of-pannello:not(.of-pannello--alto){width:100%}
}
.of-pannello[hidden]{display:none}
.of-pannello[data-of-aperto]{transform:none}
/* Il carrello arriva da destra, il menu da sinistra: è la convenzione
che il sito attuale già usa e che i clienti hanno in mano. */
.of-pannello--destra{inset-inline-start:auto;inset-inline-end:0;transform:translateX(100%)}
/* La ricerca scende dall'alto e occupa tutta la larghezza. */
/* Un pannello che scende dall'alto e' largo quanto la finestra. Il tetto di
430px serve al pannello del menu, che entra di lato: qui va azzerato, o la
ricerca resta una colonna da 430px in mezzo allo schermo. */
.of-pannello--alto{
inset:0 0 auto 0;
width:100%;max-width:none;
transform:translateY(-100%);
max-height:100vh;overflow:auto;
}
.of-pannello__testata{
display:flex;align-items:center;justify-content:space-between;
padding:16px 20px;
border-bottom:1px solid var(--wp--preset--color--border);
}
.of-pannello__titolo{font-weight:600;color:var(--wp--preset--color--dark)}
.of-pannello__chiudi{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;
background:none;border:0;cursor:pointer;color:var(--wp--preset--color--dark);
border-radius:var(--of-radius-pill);
}
/* Niente pastiglia grigia al passaggio: su un disegno sottile quel cerchio
pesa piu' dell'icona. Cambia il colore, e basta. */
.of-pannello__chiudi{transition:color var(--of-transizione)}
.of-pannello__chiudi:hover{color:var(--wp--preset--color--primary)}
.of-pannello__corpo{flex:1;overflow:auto;overscroll-behavior:contain;padding:12px 0}
.of-pannello__corpo:focus{outline:none}
/* --- il pannello del menu su telefono ---
Misure del sito: pannello a tutta larghezza, fascia rossa alta 56px con le
due schede e la X, corpo con 30px di respiro ai lati, voci alte 55px
separate da una riga da un pixel. */
.of-menu-mobile{width:100%}
.of-menu-mobile__testata{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
min-height:56px;
padding:15px 30px;
background:var(--wp--preset--color--primary);
color:var(--of-testo-su-primario,#fff);
}
.of-menu-mobile__titolo{font-size:15px;font-weight:600}
.of-menu-mobile__schede{display:flex;align-items:center;gap:30px}
.of-menu-mobile__scheda{
padding:0;
border:0;
background:none;
color:#fff;
font-size:15px;
font-weight:600;
line-height:1.27;
cursor:pointer;
transition:opacity var(--of-transizione);
}
/* La scheda che non e' aperta non spegne il colore, lo attenua: resta
evidente che si puo' toccare. */
.of-menu-mobile__scheda[aria-selected="false"]{opacity:.6}
.of-menu-mobile__scheda[aria-selected="false"]:hover{opacity:.85}
/* Il disegno della X va a filo dei 30px di respiro, come sul sito. Il bottone
e' 24 con il disegno da 13 centrato, quindi resterebbero 5,5px di rientro:
il margine negativo li recupera senza rimpicciolire l'area di tocco. */
.of-menu-mobile__chiudi{
margin-inline-end:-5.5px;
flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;padding:0;
border:0;background:none;cursor:pointer;color:#fff;
}
.of-menu-mobile .of-pannello__corpo{padding:0 30px 30px}
.of-menu-mobile__gruppo[hidden]{display:none}
.of-menu-mobile__lista{list-style:none;margin:0;padding:0}
.of-menu-mobile__lista > li{
padding:18px 0 17px;
border-block-end:1px solid var(--wp--preset--color--border);
}
.of-menu-mobile__lista a{
display:flex;
align-items:center;
gap:10px;
color:var(--wp--preset--color--dark);
font-size:16px;
font-weight:600;
line-height:1.2;
text-decoration:none;
}
/* La pagina in cui si e' NON e' colorata: sul sito tutte le voci sono nere
e il rosso compare solo al passaggio, con una transizione di 0,4s. Prima
qui il rosso era fisso sulla voce corrente e non c'era al passaggio: era
rosso dove non serviva e mancava dove serve. */
.of-menu-mobile__lista a{transition:color .4s}
.of-menu-mobile__lista a:hover,
.of-menu-mobile__lista a:focus-visible{color:var(--wp--preset--color--primary)}
/* Il secondo elenco — profilo, preferiti — pesa meno: sono scorciatoie
personali, non le sezioni del sito. */
.of-menu-mobile__lista--minore a{font-weight:400}
/* Sottomenu: rientrato e piu' piccolo, senza righe fra le voci. */
.of-menu-mobile__lista .sub-menu{list-style:none;margin:10px 0 0;padding:0}
.of-menu-mobile__lista .sub-menu li{padding:8px 0}
.of-menu-mobile__lista .sub-menu a{
padding-inline-start:16px;
font-size:15px;
font-weight:400;
color:var(--wp--preset--color--text);
}
/* --- i sottomenu che scorrono ---
Tutto quello che segue vale solo quando lo script ha messo
.of-menu-mobile--scorre sul pannello: senza JavaScript i sottomenu restano
gli elenchi annidati qui sopra, visibili e navigabili.
Misure del sito: il sottomenu e' un foglio bianco che copre il pannello
(fascia rossa compresa) ed entra da destra in 0,6s con la stessa curva del
pannello; in cima una fascia grigia alta 56px con freccia, nome e X; sotto,
voci alte 55px separate da un filo, in 16px leggero. */
.of-menu-mobile__apri-sotto,
.of-menu-mobile__sotto-testata{display:none}
.of-menu-mobile--scorre .of-menu-mobile__lista > .menu-item-has-children{
display:flex;align-items:stretch;
}
.of-menu-mobile--scorre .of-menu-mobile__lista > .menu-item-has-children > a{
position:relative;
flex:1 1 auto;min-width:0;
}
/* La freccina a destra: 6x11 nel colore del testo, ritagliata da una sagoma,
appoggiata al bordo destro del link — che resta largo quanto la riga. */
.of-menu-mobile--scorre .of-menu-mobile__lista > .menu-item-has-children > a::after{
content:'';
position:absolute;inset-inline-end:0;inset-block-start:50%;
width:6px;height:11px;
background-color:currentColor;
transform:translateY(-50%);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11' viewBox='0 0 6 11'%3E%3Cpath d='M.5.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11' viewBox='0 0 6 11'%3E%3Cpath d='M.5.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover no-repeat;
}
/* Il pulsante che apre il sottomenu e' un'area di tocco trasparente sopra la
freccina: 32px, di cui 11 oltre il bordo destro della riga, come sul sito.
I margini negativi fanno si' che non rubi larghezza al link. La voce NON e'
position:relative di proposito: il sottomenu deve agganciarsi al pannello,
non alla sua voce. */
.of-menu-mobile--scorre .of-menu-mobile__apri-sotto{
display:block;
position:relative;z-index:1;
flex:0 0 32px;
margin-inline:-21px -11px;
padding:0;border:0;background:none;cursor:pointer;
}
.of-menu-mobile--scorre .of-menu-mobile__sotto{
position:absolute;inset:0;z-index:9;
margin:0;
/* In fondo c'e' la striscia della lingua, che resta in vista sopra il
sottomenu: i 90px lasciano scorrere l'ultima voce fin sopra di lei. */
padding:0 30px 90px;
list-style:none;
background:var(--wp--preset--color--background);
overflow-y:auto;
transform:translateX(100%);
visibility:hidden; /* chiuso, non deve prendere il fuoco */
transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s;
}
.of-menu-mobile--scorre .of-sotto-aperto > .of-menu-mobile__sotto{
transform:none;
visibility:visible;
transition-delay:0s;
}
.of-menu-mobile--scorre .of-menu-mobile__lingua{
position:relative;z-index:10;
background:var(--wp--preset--color--background);
}
/* Il selettore e' lungo apposta: deve battere la vecchia regola degli elenchi
annidati (.of-menu-mobile__lista .sub-menu li, due classi e un elemento),
che altrimenti le schiaccia il respiro a 8px e la fascia viene alta 36
invece di 56. */
.of-menu-mobile--scorre .of-menu-mobile__lista .of-menu-mobile__sotto > .of-menu-mobile__sotto-testata{
position:sticky;inset-block-start:0;z-index:9;
display:flex;align-items:center;gap:12px;
margin-inline:-30px;
padding:18px 30px;
background:var(--wp--preset--color--surface);
border-block-end:1px solid var(--wp--preset--color--border);
}
.of-menu-mobile__indietro,
.of-menu-mobile__sotto-chiudi{
flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;
padding:0;border:0;background:none;cursor:pointer;
color:var(--wp--preset--color--dark);
}
.of-menu-mobile__indietro{width:11px;height:19px}
.of-menu-mobile__sotto-chiudi{width:13px;height:19px;margin-inline-start:auto}
.of-menu-mobile__sotto-titolo{
font-size:16px;font-weight:600;line-height:1.2;
color:var(--wp--preset--color--dark);
}
.of-menu-mobile--scorre .of-menu-mobile__sotto > li:not(.of-menu-mobile__sotto-testata){
padding:18px 0 17px;
border-block-end:1px solid var(--wp--preset--color--border);
}
.of-menu-mobile--scorre .of-menu-mobile__sotto a{
padding-inline-start:0;
font-size:16px;font-weight:400;
color:var(--wp--preset--color--text);
}
@media(prefers-reduced-motion:reduce){
.of-menu-mobile--scorre .of-menu-mobile__sotto{transition:none}
}
/* La lingua, staccata in fondo. */
.of-menu-mobile__lingua{
padding:15px 30px;
border-block-start:1px solid var(--wp--preset--color--border);
}
/* I 42px di altezza servono nella barra alta, dove l'area sensibile e' tutta
la fascia. Qui la striscia e' alta 58,42 come sul sito: 15px di respiro
sopra e sotto piu' la riga di testo. */
.of-menu-mobile__lingua .of-lingue__attuale{
height:auto;
color:var(--wp--preset--color--text);
opacity:1;
}
.of-menu-mobile__lingua .of-lingue__lista{top:auto;bottom:calc(100% + 8px)}
/* --- ricerca ------------------------------------------------------ */
/* Misure prese dal sito: il pannello copre lo schermo di bianco con 60px di
respiro sopra e sotto e 15px ai lati, dentro il contenitore da 1410.
Titolo centrato da 24px, campo da 700px al centro con la lente dentro,
25px di stacco, etichetta da 18px e una riga di cinque card da 266px.
header_search_layout=form · header_search_form_width=700 */
.of-ricerca{
inset:0;
width:100%;max-width:none;height:100%;
display:block; /* batte il flex-column di .of-pannello */
padding:60px var(--of-gutter);
background:var(--wp--preset--color--background);
overflow-y:auto;
}
/* La X del pannello sta nell'angolo, non accanto al campo. */
.of-ricerca__chiudi{
position:absolute;
inset-block-start:15px;inset-inline-end:30px;
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:44px;
background:none;border:0;padding:0;cursor:pointer;
color:var(--wp--preset--color--dark);
}
/* Il respiro ai lati lo da' gia' il pannello: se lo mettesse anche il
contenitore, le cinque card starebbero in 1380 invece di 1410 e sarebbero
larghe 260 al posto di 266. */
.of-ricerca .of-contenitore{padding-inline:0}
/* I titoli del tema sono serrati di -0,034em, questi no: nel pannello di
ricerca il sito li lascia a spaziatura normale. */
.of-ricerca__titolo,
.of-ricerca__etichetta,
.of-ricerca__scheda-nome{letter-spacing:normal}
.of-ricerca__titolo{
margin:0 0 15px;
font-size:24px;font-weight:600;line-height:1.21; /* 29,04 / 24 */
text-align:center;
color:var(--wp--preset--color--dark);
}
/* --- il campo --- */
/* I due pulsanti stanno dentro il campo, non di fianco: il riferimento e' il
form, largo quanto il campo. */
.of-ricerca__form{
position:relative;
width:100%;max-width:700px;
margin-inline:auto;
}
.of-ricerca__campo{
width:100%;height:47px;
padding:14px 40px 14px 20px;
font-size:14px;
color:var(--wp--preset--color--text);
background:var(--wp--preset--color--background);
border:1px solid var(--wp--preset--color--border);
border-radius:var(--of-radius-sm);
}
/* La crocetta che i browser mettono da soli nei campi type=search: qui c'e'
gia' quella del sito, e due crocette vicine sono un errore. */
.of-ricerca__campo::-webkit-search-cancel-button{display:none}
.of-ricerca__invia,
.of-ricerca__pulisci{
position:absolute;inset-block-start:0;
display:inline-flex;align-items:center;justify-content:center;
height:47px;padding:0;
background:none;border:0;cursor:pointer;
color:var(--wp--preset--color--dark);
border-radius:var(--of-radius-bottone);
}
.of-ricerca__invia{inset-inline-end:5px;width:44px}
.of-ricerca__pulisci{inset-inline-end:45px;width:30px}
.of-ricerca__pulisci[hidden]{display:none}
/* --- l'esito --- */
/* Lo stacco dal campo non e' uguale per tutti: 25px per i suggeriti e i
risultati, 15 per le sagome di caricamento. Sta sui singoli blocchi. */
.of-ricerca__riposo,
.of-ricerca__risultati{margin-block-start:25px}
.of-ricerca__riposo[hidden],
.of-ricerca__risultati[hidden],
.of-ricerca__carica[hidden]{display:none}
.of-ricerca__etichetta{
margin:0 0 15px;
font-size:18px;font-weight:600;line-height:1.21; /* 21,78 / 18 */
color:var(--wp--preset--color--dark);
}
/* Il cuore misura come l'emoji di WordPress sul sito: 1em, con 0,07em ai
lati e abbassato di 0,1em sulla riga. */
.of-ricerca__cuore{display:inline-block;width:1em;height:1em;margin:0 .07em;vertical-align:-.1em}
.of-ricerca__cuore svg{display:block;width:100%;height:100%}
.of-ricerca__etichetta[hidden],
.of-ricerca__vuoto[hidden]{display:none}
.of-ricerca__vuoto{
margin:0;
color:var(--wp--preset--color--text-muted);
}
/* Cinque card in riga che riempiono esattamente i 1410 del contenitore:
5 x 266 + 4 x 20 di stacco. Sotto la soglia si scorre di lato invece di
stringerle, come fa la giostra del sito — tre per volta su tablet, una su
telefono. */
.of-ricerca__prodotti{
display:flex;flex-wrap:nowrap;
list-style:none;margin:0;padding:0;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.of-ricerca__prodotti::-webkit-scrollbar{display:none}
.of-ricerca__prodotti>li{
flex:0 0 calc((100% - 4 * 20px) / 5);
margin-inline-end:20px;
scroll-snap-align:start;
}
.of-ricerca__prodotti>li:last-child{margin-inline-end:0}
@media(max-width:1199px){
.of-ricerca__prodotti>li{flex-basis:calc((100% - 2 * 20px) / 3)}
}
@media(max-width:767px){
/* Su telefono il titolo non c'e' (d-none d-block-md) e le card vanno una
per volta, con 15px di stacco invece di 20. */
.of-ricerca__titolo{display:none}
.of-ricerca__prodotti>li{flex-basis:100%;margin-inline-end:15px}
}
.of-ricerca__scheda-media{
display:block;
border-radius:var(--of-radius-card);
overflow:hidden;
}
.of-ricerca__scheda-media img{
width:100%;aspect-ratio:1;
object-fit:cover;
border-radius:var(--of-radius-card);
transition:transform var(--of-transizione);
}
.of-ricerca__scheda-media:hover img{transform:var(--of-zoom)}
.of-ricerca__scheda-nome{
margin:15px 0 0;
font-size:15px;
font-weight:600;line-height:1.21; /* 18,15 / 15 */
color:var(--wp--preset--color--dark);
}
/* Il nome sta su UNA riga e si tronca con i puntini, come sul sito
(-webkit-line-clamp:1 sul link): senza, un nome lungo andava a capo e
allungava tutte le card della fila, da 327 a 345px. */
.of-ricerca__scheda-nome a{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
overflow:hidden;
color:inherit;text-decoration:none;
}
.of-ricerca__scheda-nome a:hover{color:var(--wp--preset--color--primary)}
.of-ricerca__scheda-prezzo{
display:flex;gap:5px;
margin:11px 0 0;
font-size:16px;font-weight:600;line-height:1.05; /* 16,8 / 16 */
color:var(--wp--preset--color--dark);
}
.of-ricerca__scheda-prezzo del{opacity:.5;font-weight:400}
/* --- mentre si scrive: i risultati ------------------------------- */
/* «Sto cercando "begonia"»: riga di testo, non titolo — 18px, serrata come i
titoli, con la parola cercata piu' scura e a peso 500. */
.of-ricerca__titolo-esito{
margin:0 0 20px;
font-size:18px;line-height:normal;
letter-spacing:-0.034em;
color:var(--wp--preset--color--text);
}
.of-ricerca__titolo-esito span{
color:var(--wp--preset--color--dark);
font-weight:500;
}
.of-ricerca__sugg-titolo{
margin:0 0 10px;
/* Niente carattere dei titoli: sul sito questa riga e' in Instrument Sans,
misurato sulla risposta vera. Con Bricolage veniva mezzo pixel piu' bassa
e spostava card e bottone. */
font-size:18px;font-weight:600;line-height:normal;
letter-spacing:-0.034em;
color:var(--wp--preset--color--dark);
}
.of-ricerca__sugg{
display:flex;flex-wrap:wrap;gap:20px;
margin:0 0 22px;
}
.of-ricerca__sugg a{
font-size:16px;
color:var(--wp--preset--color--text);
text-decoration:none;
}
.of-ricerca__sugg a:hover,
.of-ricerca__sugg a:focus-visible{color:var(--wp--preset--color--dark)}
/* La parte cercata, evidenziata: il giallo e' quello del sito. */
.of-ricerca__risultati mark{
background:#ffff3d;
color:var(--wp--preset--color--dark);
font-weight:600;
}
/* --- le frecce della giostra dei risultati ---
Fino a dieci prodotti, cinque per volta: il resto si raggiunge scorrendo.
Le frecce sono quelle del sito: cerchi bianchi da 50px col bordo grigio,
a 10px dai bordi, centrati sulla FOTO (non sulla card), invisibili finche'
il puntatore non entra nella fila. La meta' della foto la passa lo script
in --of-foto, perche' la foto e' larga quanto la card e la card cambia
con la finestra. Su tablet e telefono si scorre col dito e non servono. */
.of-ricerca__giostra{position:relative}
.of-ricerca__freccia{
position:absolute;
inset-block-start:calc(var(--of-foto,266px) / 2 - 25px);
z-index:2;
display:flex;align-items:center;justify-content:center;
width:50px;height:50px;padding:0;
border:1px solid var(--wp--preset--color--border);
border-radius:50%;
background:var(--wp--preset--color--background);
color:var(--wp--preset--color--dark);
cursor:pointer;
opacity:0;
transition:opacity .4s;
}
.of-ricerca__freccia--prec{inset-inline-start:10px}
.of-ricerca__freccia--succ{inset-inline-end:10px}
.of-ricerca__giostra:hover .of-ricerca__freccia,
.of-ricerca__giostra:focus-within .of-ricerca__freccia{opacity:1}
/* In fondo alla corsa la freccia di quel lato non porta da nessuna parte. */
.of-ricerca__freccia:disabled{opacity:0;pointer-events:none}
.of-ricerca__giostra--ferma .of-ricerca__freccia{display:none}
@media(max-width:1199px){
.of-ricerca__freccia{display:none}
}
/* «Visualizza tutti i Risultati»: il bottone scuro del tema, piu' largo —
55px di respiro ai lati e non meno di 243px, come sul sito. */
.of-ricerca__tutti{margin-block-start:30px;text-align:center}
.of-ricerca__tutti .of-bottone{
min-width:243px;
padding-inline:55px;
letter-spacing:-0.024em;
}
/* Quando la parola trova anche categorie (o pagine, o articoli, se accesi)
compare una colonna a sinistra larga un quinto, e le card scendono a
quattro per volta. */
.of-ricerca__due{display:flex;gap:30px}
.of-ricerca__lato{flex:0 0 20%;display:flex;flex-direction:column;gap:30px}
.of-ricerca__centro{flex:1 1 auto;min-width:0}
.of-ricerca__lato h5{
margin:0;
font-size:18px;letter-spacing:-0.034em;
}
.of-ricerca__lato ul{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:8px}
.of-ricerca__lato a{
font-size:16px;
color:var(--wp--preset--color--text);
text-decoration:none;
}
.of-ricerca__lato a:hover,
.of-ricerca__lato a:focus-visible{color:var(--wp--preset--color--dark)}
@media(min-width:1200px){
.of-ricerca__due .of-ricerca__prodotti>li{flex-basis:calc((100% - 3 * 20px) / 4)}
}
@media(max-width:767px){
.of-ricerca__due{flex-direction:column}
.of-ricerca__lato{
order:2;flex-basis:auto;
padding-block-start:30px;
border-block-start:1px solid var(--wp--preset--color--border);
}
}
/* Nessun risultato: l'icona, la frase, e sotto tornano gli ultimi arrivati. */
.of-ricerca__niente{text-align:center}
.of-ricerca__niente-icona{display:block;margin-inline:auto;width:60px;height:60px}
.of-ricerca__niente p{max-width:40%;margin:15px auto 0}
@media(max-width:767px){
.of-ricerca__niente p{max-width:none}
}
/* --- le sagome di caricamento ---
Quelle del sito: una pillola da 100x20, tre pillole uguali, e cinque card
alte (3 a 4) con tre righe centrate sotto. Grigio al 15%, angoli da 10px,
un respiro lento di due secondi e mezzo. */
.of-ricerca__carica{
display:flex;flex-direction:column;gap:15px;
margin-block-start:15px;
}
.of-ricerca__carica-gruppo{display:flex;flex-direction:column;gap:15px}
.of-ricerca__carica-pillole{display:flex;gap:10px}
.of-ricerca__osso{
display:block;
background:rgb(39 39 39 / .15);
border-radius:var(--of-radius-md);
animation:of-ricerca-pulsa 2.5s cubic-bezier(.4,0,.6,1) infinite;
}
.of-ricerca__osso--pillola{width:100px;height:20px}
.of-ricerca__osso--foto{width:100%;aspect-ratio:3/4}
.of-ricerca__osso--riga{width:80%;height:12px}
.of-ricerca__carica-card{
display:flex;flex-wrap:nowrap;overflow:hidden;
list-style:none;margin:0 -7.5px;padding:0;
}
.of-ricerca__carica-card>li{
flex:0 0 20%;
padding-inline:7.5px;
display:flex;flex-direction:column;gap:10px;
}
.of-ricerca__carica-righe{display:flex;flex-direction:column;align-items:center;gap:10px}
@media(max-width:1199px){
.of-ricerca__carica-card>li{flex-basis:33.3333%}
}
@media(max-width:767px){
.of-ricerca__carica-card>li{flex-basis:100%}
}
@keyframes of-ricerca-pulsa{
50%{opacity:.5}
}
/* --- la crocetta e la rotella nel campo ---
A riposo la crocetta non c'e'. Mentre la ricerca e' in corso al suo posto
gira la rotella del sito (14px, otto punti); a risposta arrivata compare la
crocetta, che azzera tutto. */
.of-ricerca[data-of-stato="cerca"] .of-ricerca__pulisci{
pointer-events:none;
}
.of-ricerca[data-of-stato="cerca"] .of-ricerca__pulisci svg{visibility:hidden}
.of-ricerca[data-of-stato="cerca"] .of-ricerca__pulisci::before{
content:'';
position:absolute;inset:0;margin:auto;
width:14px;height:14px;
background-color:var(--wp--preset--color--dark);
-webkit-mask:url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyBpZD0iaWNvbi1sb2FkIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgogICAgICA8cGF0aCBkPSJNNy4zNDM5NSAzLjI3NTA0QzguMjkyNzcgMy4yNzUwNCA5LjA2MTkzIDIuNTQxOSA5LjA2MTkzIDEuNjM3NTJDOS4wNjE5MyAwLjczMzE0MyA4LjI5Mjc3IDAgNy4zNDM5NSAwQzYuMzk1MTQgMCA1LjYyNTk4IDAuNzMzMTQzIDUuNjI1OTggMS42Mzc1MkM1LjYyNTk4IDIuNTQxOSA2LjM5NTE0IDMuMjc1MDQgNy4zNDM5NSAzLjI3NTA0WiIgPjwvcGF0aD48cGF0aCBkPSJNNy4zNDQxNSAxNC4wMDAyQzcuOTEzMzggMTQuMDAwMiA4LjM3NDgyIDEzLjU2MDQgOC4zNzQ4MiAxMy4wMTc4QzguMzc0ODIgMTIuNDc1MiA3LjkxMzM4IDEyLjAzNTQgNy4zNDQxNSAxMi4wMzU0QzYuNzc0OTIgMTIuMDM1NCA2LjMxMzQ4IDEyLjQ3NTIgNi4zMTM0OCAxMy4wMTc4QzYuMzEzNDggMTMuNTYwNCA2Ljc3NDkyIDE0LjAwMDIgNy4zNDQxNSAxNC4wMDAyWiIgPjwvcGF0aD48cGF0aCBkPSJNMy4xMjI0NiA0Ljc3NzcxQzMuOTc2NDUgNC43Nzc3MSA0LjY2ODc1IDQuMTE3ODMgNC42Njg3NSAzLjMwMzgzQzQuNjY4NzUgMi40ODk4MyAzLjk3NjQ1IDEuODI5OTYgMy4xMjI0NiAxLjgyOTk2QzIuMjY4NDcgMS44Mjk5NiAxLjU3NjE3IDIuNDg5ODMgMS41NzYxNyAzLjMwMzgzQzEuNTc2MTcgNC4xMTc4MyAyLjI2ODQ3IDQuNzc3NzEgMy4xMjI0NiA0Ljc3NzcxWiIgPjwvcGF0aD48cGF0aCBkPSJNMTEuNTY1IDEyLjE2OTJDMTIuMDM5NCAxMi4xNjkyIDEyLjQyNCAxMS44MDI3IDEyLjQyNCAxMS4zNTA1QzEyLjQyNCAxMC44OTgzIDEyLjAzOTQgMTAuNTMxNyAxMS41NjUgMTAuNTMxN0MxMS4wOTA2IDEwLjUzMTcgMTAuNzA2MSAxMC44OTgzIDEwLjcwNjEgMTEuMzUwNUMxMC43MDYxIDExLjgwMjcgMTEuMDkwNiAxMi4xNjkyIDExLjU2NSAxMi4xNjkyWiIgPjwvcGF0aD48cGF0aCBkPSJNMS4zNzQwNSA4LjYzNzc0QzIuMTMyOTEgOC42Mzc3NCAyLjc0ODA5IDguMDUxMzcgMi43NDgwOSA3LjMyODA0QzIuNzQ4MDkgNi42MDQ3MSAyLjEzMjkxIDYuMDE4MzQgMS4zNzQwNSA2LjAxODM0QzAuNjE1MTgyIDYuMDE4MzQgMCA2LjYwNDcxIDAgNy4zMjgwNEMwIDguMDUxMzcgMC42MTUxODIgOC42Mzc3NCAxLjM3NDA1IDguNjM3NzRaIiA+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4zMTM3IDcuOTgxOTNDMTMuNjkzIDcuOTgxOTMgMTQuMDAwNCA3LjY4ODg2IDE0LjAwMDQgNy4zMjczNEMxNC4wMDA0IDYuOTY1ODMgMTMuNjkzIDYuNjcyNzYgMTMuMzEzNyA2LjY3Mjc2QzEyLjkzNDQgNi42NzI3NiAxMi42MjcgNi45NjU4MyAxMi42MjcgNy4zMjczNEMxMi42MjcgNy42ODg4NiAxMi45MzQ0IDcuOTgxOTMgMTMuMzEzNyA3Ljk4MTkzWiIgPjwvcGF0aD48cGF0aCBkPSJNMi4yNzEzOCAxMC41NDEzQzEuODAxNDcgMTAuOTg5MiAxLjgwMTQ3IDExLjcxMzkgMi4yNzEzOCAxMi4xNjE4QzIuNzQwNzMgMTIuNjA5NyAzLjUwMjE2IDEyLjYwOTcgMy45NzE1MSAxMi4xNjE4QzQuNDQxNDIgMTEuNzEzOSA0LjQ0MTQyIDEwLjk4OTIgMy45NzE1MSAxMC41NDEzQzMuNTAyMTYgMTAuMDkyOCAyLjc0MTI4IDEwLjA4ODYgMi4yNzEzOCAxMC41NDEzWiIgPjwvcGF0aD48cGF0aCBkPSJNMTEuNTY0OSAzLjc5NDY1QzExLjg0OTMgMy43OTQ2NSAxMi4wNzk5IDMuNTc0ODUgMTIuMDc5OSAzLjMwMzcxQzEyLjA3OTkgMy4wMzI1NyAxMS44NDkzIDIuODEyNzcgMTEuNTY0OSAyLjgxMjc3QzExLjI4MDQgMi44MTI3NyAxMS4wNDk4IDMuMDMyNTcgMTEuMDQ5OCAzLjMwMzcxQzExLjA0OTggMy41NzQ4NSAxMS4yODA0IDMuNzk0NjUgMTEuNTY0OSAzLjc5NDY1WiIgPjwvcGF0aD4KICA8L3N2Zz4=") center/100% no-repeat;
mask:url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyBpZD0iaWNvbi1sb2FkIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgogICAgICA8cGF0aCBkPSJNNy4zNDM5NSAzLjI3NTA0QzguMjkyNzcgMy4yNzUwNCA5LjA2MTkzIDIuNTQxOSA5LjA2MTkzIDEuNjM3NTJDOS4wNjE5MyAwLjczMzE0MyA4LjI5Mjc3IDAgNy4zNDM5NSAwQzYuMzk1MTQgMCA1LjYyNTk4IDAuNzMzMTQzIDUuNjI1OTggMS42Mzc1MkM1LjYyNTk4IDIuNTQxOSA2LjM5NTE0IDMuMjc1MDQgNy4zNDM5NSAzLjI3NTA0WiIgPjwvcGF0aD48cGF0aCBkPSJNNy4zNDQxNSAxNC4wMDAyQzcuOTEzMzggMTQuMDAwMiA4LjM3NDgyIDEzLjU2MDQgOC4zNzQ4MiAxMy4wMTc4QzguMzc0ODIgMTIuNDc1MiA3LjkxMzM4IDEyLjAzNTQgNy4zNDQxNSAxMi4wMzU0QzYuNzc0OTIgMTIuMDM1NCA2LjMxMzQ4IDEyLjQ3NTIgNi4zMTM0OCAxMy4wMTc4QzYuMzEzNDggMTMuNTYwNCA2Ljc3NDkyIDE0LjAwMDIgNy4zNDQxNSAxNC4wMDAyWiIgPjwvcGF0aD48cGF0aCBkPSJNMy4xMjI0NiA0Ljc3NzcxQzMuOTc2NDUgNC43Nzc3MSA0LjY2ODc1IDQuMTE3ODMgNC42Njg3NSAzLjMwMzgzQzQuNjY4NzUgMi40ODk4MyAzLjk3NjQ1IDEuODI5OTYgMy4xMjI0NiAxLjgyOTk2QzIuMjY4NDcgMS44Mjk5NiAxLjU3NjE3IDIuNDg5ODMgMS41NzYxNyAzLjMwMzgzQzEuNTc2MTcgNC4xMTc4MyAyLjI2ODQ3IDQuNzc3NzEgMy4xMjI0NiA0Ljc3NzcxWiIgPjwvcGF0aD48cGF0aCBkPSJNMTEuNTY1IDEyLjE2OTJDMTIuMDM5NCAxMi4xNjkyIDEyLjQyNCAxMS44MDI3IDEyLjQyNCAxMS4zNTA1QzEyLjQyNCAxMC44OTgzIDEyLjAzOTQgMTAuNTMxNyAxMS41NjUgMTAuNTMxN0MxMS4wOTA2IDEwLjUzMTcgMTAuNzA2MSAxMC44OTgzIDEwLjcwNjEgMTEuMzUwNUMxMC43MDYxIDExLjgwMjcgMTEuMDkwNiAxMi4xNjkyIDExLjU2NSAxMi4xNjkyWiIgPjwvcGF0aD48cGF0aCBkPSJNMS4zNzQwNSA4LjYzNzc0QzIuMTMyOTEgOC42Mzc3NCAyLjc0ODA5IDguMDUxMzcgMi43NDgwOSA3LjMyODA0QzIuNzQ4MDkgNi42MDQ3MSAyLjEzMjkxIDYuMDE4MzQgMS4zNzQwNSA2LjAxODM0QzAuNjE1MTgyIDYuMDE4MzQgMCA2LjYwNDcxIDAgNy4zMjgwNEMwIDguMDUxMzcgMC42MTUxODIgOC42Mzc3NCAxLjM3NDA1IDguNjM3NzRaIiA+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4zMTM3IDcuOTgxOTNDMTMuNjkzIDcuOTgxOTMgMTQuMDAwNCA3LjY4ODg2IDE0LjAwMDQgNy4zMjczNEMxNC4wMDA0IDYuOTY1ODMgMTMuNjkzIDYuNjcyNzYgMTMuMzEzNyA2LjY3Mjc2QzEyLjkzNDQgNi42NzI3NiAxMi42MjcgNi45NjU4MyAxMi42MjcgNy4zMjczNEMxMi42MjcgNy42ODg4NiAxMi45MzQ0IDcuOTgxOTMgMTMuMzEzNyA3Ljk4MTkzWiIgPjwvcGF0aD48cGF0aCBkPSJNMi4yNzEzOCAxMC41NDEzQzEuODAxNDcgMTAuOTg5MiAxLjgwMTQ3IDExLjcxMzkgMi4yNzEzOCAxMi4xNjE4QzIuNzQwNzMgMTIuNjA5NyAzLjUwMjE2IDEyLjYwOTcgMy45NzE1MSAxMi4xNjE4QzQuNDQxNDIgMTEuNzEzOSA0LjQ0MTQyIDEwLjk4OTIgMy45NzE1MSAxMC41NDEzQzMuNTAyMTYgMTAuMDkyOCAyLjc0MTI4IDEwLjA4ODYgMi4yNzEzOCAxMC41NDEzWiIgPjwvcGF0aD48cGF0aCBkPSJNMTEuNTY0OSAzLjc5NDY1QzExLjg0OTMgMy43OTQ2NSAxMi4wNzk5IDMuNTc0ODUgMTIuMDc5OSAzLjMwMzcxQzEyLjA3OTkgMy4wMzI1NyAxMS44NDkzIDIuODEyNzcgMTEuNTY0OSAyLjgxMjc3QzExLjI4MDQgMi44MTI3NyAxMS4wNDk4IDMuMDMyNTcgMTEuMDQ5OCAzLjMwMzcxQzExLjA0OTggMy41NzQ4NSAxMS4yODA0IDMuNzk0NjUgMTEuNTY0OSAzLjc5NDY1WiIgPjwvcGF0aD4KICA8L3N2Zz4=") center/100% no-repeat;
animation:of-gira .8s linear infinite;
}
@keyframes of-gira{
to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
.of-ricerca__osso,
.of-minicarrello__rotella,
.of-ricerca[data-of-stato="cerca"] .of-ricerca__pulisci::before{animation:none}
}
/* --- mini carrello ------------------------------------------------ */
/* mini_cart_products_layout = sidebar.
Misure prese dal pannello del sito: largo 480, respiro di 30 ai lati, foto
90x120 arrotondate di 5, piede su fondo grigio con i due bottoni a pillola.
Una premessa sulla specificita' di quello che segue. Nelle pagine di
negozio il ha la classe `woocommerce`, e woocommerce.css da li'
arriva fino a dentro questo pannello: `.woocommerce ul.cart_list li img`
fa le foto larghe 32 e flottanti a destra, `li::before` e `li::after`
aggiungono due caselle vuote alla griglia della riga, `a.remove` diventa
un pallino rosso con l'!important. Quelle classi — cart_list,
product_list_widget, remove — restano nella marcatura perche' ci si
agganciano il JavaScript di WooCommerce e i plugin: si tengono, e si
battono qui, selettore per selettore. */
.of-minicarrello{width:480px;max-width:100%}
/* La testata ha le misure del pannello del sito: 30px di respiro ai lati —
gli stessi delle righe, se no il titolo resta dieci pixel piu' a sinistra
delle foto e si vede — titolo da 18 e fascia alta 52. Il bottone di
chiusura resta 36 per il dito e rientra con i margini negativi, cosi' non
alza la fascia a 69. */
.of-minicarrello .of-pannello__testata{padding:15px 30px}
.of-minicarrello .of-pannello__titolo{font-size:18px;line-height:1.21}
.of-minicarrello .of-pannello__chiudi{margin-block:-7px;margin-inline-end:-8px}
/* Il corpo non scorre: dentro ci sono due pezzi, la lista che scorre e il
piede che resta fermo. Se scorresse tutto, totale e bottoni uscirebbero
dallo schermo appena il carrello ha tre righe — ed e' il momento in cui
quei bottoni servono. */
.of-minicarrello .of-pannello__corpo{display:flex;padding:0;overflow:hidden}
.of-minicarrello .widget_shopping_cart_content{
flex:1;min-width:0;min-height:0;
display:flex;flex-direction:column;
}
/* Mentre una modifica e' in volo il contenuto resta leggibile ma spento, e
non si puo' cliccare due volte lo stesso piu'. */
.of-minicarrello[data-of-caricamento] .widget_shopping_cart_content{
opacity:.5;pointer-events:none;
transition:opacity var(--of-transizione);
}
/* La rotella nella testata: lo stesso disegno del campo di ricerca. */
.of-minicarrello__rotella{
display:none;
width:16px;height:16px;margin-inline-start:auto;margin-inline-end:10px;
border:2px solid var(--wp--preset--color--border);
border-top-color:var(--wp--preset--color--dark);
border-radius:var(--of-radius-pill);
animation:of-gira .8s linear infinite;
}
.of-minicarrello[data-of-caricamento] .of-minicarrello__rotella{display:block}
/* La riga sotto la testata: quantita' arrivata al massimo, riga sparita,
rete che non risponde. Sta fuori dal frammento, quindi sopravvive al
ridisegno che l'ha provocata. */
.of-minicarrello__avviso{
margin:0;padding:10px 30px;
background:var(--wp--preset--color--surface);
border-block-end:1px solid var(--wp--preset--color--border);
color:var(--wp--preset--color--text);
font-size:var(--wp--preset--font-size--sm);
}
.of-minicarrello__avviso[hidden]{display:none}
/* --- le righe --- */
/* Tre classi anche qui, e non per vezzo: `.woocommerce ul.cart_list` azzera
padding e margine, e senza contrasto le righe finiscono incollate ai bordi
del pannello. */
.of-minicarrello .of-pannello__corpo .of-minicarrello__voci{
flex:1;min-height:0;
overflow:auto;overscroll-behavior:contain;
list-style:none;margin:0;padding:30px 30px 20px;
display:flex;flex-direction:column;gap:20px;
}
/* Due colonne, non tre: il cestino non ha una colonna sua, sta nella riga
della quantita' spinto a destra — e' li' che sta sul sito, in fondo alla
riga e non in cima. */
.of-minicarrello .of-minicarrello__voci .of-minicarrello__voce{
display:grid;grid-template-columns:90px 1fr;
gap:15px;align-items:stretch;
margin:0;padding:0;
float:none;
}
/* Il tratteggio fra un prodotto e l'altro: 1px dashed, 20px di respiro da una
parte e dall'altra. Sul sito e' cosi' e non e' un dettaglio da poco — senza,
due piante con il nome lungo sembrano una sola voce. */
.of-minicarrello .of-minicarrello__voci .of-minicarrello__voce + .of-minicarrello__voce{
padding-block-start:20px;
border-block-start:1px dashed var(--wp--preset--color--border);
}
/* Le due caselle fantasma di woocommerce-layout.css: in una griglia non
sparecchiano niente, diventano due celle vuote che spostano tutto. */
.of-minicarrello .of-minicarrello__voci .of-minicarrello__voce::before,
.of-minicarrello .of-minicarrello__voci .of-minicarrello__voce::after{display:none}
.of-minicarrello .of-minicarrello__voci .of-minicarrello__foto{
display:block;width:90px;
}
.of-minicarrello .of-minicarrello__voci .of-minicarrello__foto img{
display:block;float:none;
width:90px;height:120px;margin:0;
object-fit:cover;
border-radius:var(--of-radius-sm);
background:var(--wp--preset--color--surface);
}
/* min-height come l'altezza della foto: e' quello che tiene la riga della
quantita' incollata in fondo anche quando il nome sta su una riga sola. */
.of-minicarrello__dati{
display:flex;flex-direction:column;justify-content:space-between;
gap:6px;min-width:0;min-height:120px;
}
.of-minicarrello__testo{display:flex;flex-direction:column;min-width:0}
.of-minicarrello .of-minicarrello__voci .of-minicarrello__nome{
display:block;
font-size:16px;font-weight:600;line-height:1.25;
color:var(--wp--preset--color--dark);text-decoration:none;
}
.of-minicarrello .of-minicarrello__voci .of-minicarrello__nome:hover{color:var(--wp--preset--color--primary)}
/* Le varianti le stampa WooCommerce come
: qui e' una riga di testo
minuto, non una tabella con il filetto a sinistra. */
.of-minicarrello__varianti{
font-size:var(--wp--preset--font-size--sm);
color:var(--wp--preset--color--text-muted);
}
.of-minicarrello .of-minicarrello__voci .of-minicarrello__varianti dl,
.of-minicarrello .of-minicarrello__voci .of-minicarrello__varianti dd,
.of-minicarrello .of-minicarrello__voci .of-minicarrello__varianti dt{
display:inline;float:none;
margin:0;padding:0;border:0;
font-weight:400;
}
.of-minicarrello .of-minicarrello__voci .of-minicarrello__varianti p{margin:0}
/* Stessa misura e stesso peso del nome, come sul sito: il prezzo e' la seconda
cosa che si cerca in un carrello, non una didascalia. */
.of-minicarrello__prezzo{
font-size:16px;line-height:20px;font-weight:600;
color:var(--wp--preset--color--dark);
}
/* La riga in fondo: pulsante quantita' a sinistra, cestino a destra. */
.of-minicarrello__qta{
display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
margin-block-start:6px;
}
/* La quantita' scritta e' il ripiego senza JavaScript: la accende la regola
in