/* =============================================================================
DUBBLEUP — SISTEMA
Foglio autorevole. Caricato dopo style.css, quindi vince a parità di peso.
style.css è cresciuto per strati: trentaquattro sezioni di correzioni
successive che in più punti si contraddicono. È quella stratificazione, non
un singolo errore, a rendere le pagine diverse fra loro. Da qui in avanti il
sistema sta in un posto solo: un valore, un componente, una regola.
Regola di manutenzione: un colore o una misura che non sia un token qui
dentro è un errore, non una scelta.
========================================================================== */
/* -----------------------------------------------------------------------------
1. TOKEN
Tutto ciò che si ripete ha un nome. Cambiare il sito significa cambiare
questi valori, non cercare i numeri sparsi in mille regole.
-------------------------------------------------------------------------- */
:root{
/* Superfici e inchiostri — una sola famiglia di tinta.
Il problema non erano i valori presi uno per uno ma il fatto che le due
grigie fossero le uniche fredde: --du-soft stava a 210 gradi di tinta e
--du-ink a 214, sopra una carta a 43. Due grigi azzurrini su carta calda
danno la sensazione di sporco anche quando ogni singolo colore e corretto.
Ora tutta la scala sta fra 40 e 42 gradi.
I passi di chiarezza erano 8,8 / 4,6 / 7,3: quello centrale valeva la meta
degli altri, ed e per questo che carta-2 e scuro sembravano lo stesso
colore sbagliato. Ora sono 10,3 / 8,9 / 9,1 — regolari. */
--du-carta:#F5F2EC; /* fondo pagina */
--du-carta-2:#EAE5DB; /* fascia alternata, testate di pagina */
--du-scuro:#DFD9CD; /* footer: un gradino sotto la carta */
--du-white:#FFFFFF; /* solo dove serve davvero: campi a fuoco */
--du-ink:#23211D; /* testo, bordi forti, pulsanti pieni — 14,4:1 su carta */
--du-soft:#6B675E; /* testo secondario — 5,0:1 su carta, sopra la soglia AA */
--du-rule:#D2CCBE; /* filetti e bordi leggeri */
--du-rule-2:#B5AE9F; /* bordo al passaggio del mouse — decorativo, 2,0:1:
dove serve un confine leggibile si usa --du-soft */
/* Segnale — l'unico rosso del sito, per gli errori e nient'altro */
--du-errore:#B3261E;
/* Colore di fragranza: impostato dal PHP sulla scheda prodotto */
--du-accent:#14161A;
--du-accent-on:#FFFFFF;
/* Caratteri — tre, con ruoli fissi e nessuna sovrapposizione
Outfit titoli, pulsanti, nomi di prodotto
Inter testo corrente
DM Mono occhielli, etichette, prezzi, dati */
--du-display:"Outfit",-apple-system,"Segoe UI",sans-serif;
--du-text:"Inter",-apple-system,"Segoe UI",sans-serif;
--du-mono:"DM Mono","SFMono-Regular",Menlo,monospace;
/* Scala tipografica — registro basso.
Misurata su aesop.it: H1 30px, H2 18-31, nome prodotto 16, corpo 14-16,
peso 400 ovunque, nessun maiuscolo, spaziatura lettere neutra. Il salto
fra titolo e corpo era 4:1 e ora e 2,3:1: la pagina si legge come un
testo composto, non come un manifesto. */
--du-t-page:clamp(28px,3vw,34px); /* titolo di pagina, uno solo per pagina */
--du-t-sez:clamp(22px,2.2vw,28px); /* titolo di sezione */
--du-t-sub:clamp(16px,1.4vw,18px); /* sottotitolo */
--du-t-card:16px; /* nome prodotto, titolo widget, voce fisarmonica */
--du-t-body:15px; /* testo corrente */
--du-t-small:13px; /* metadati, prezzo in lista, briciole */
--du-t-micro:12px; /* occhielli ed etichette */
--du-t-btn:14px; /* pulsanti e navigazione */
/* Ritmo */
--du-max:1440px;
--du-pad:40px; /* filo sinistro, uno per tutto il sito */
--du-gap:24px; /* spazio fra le tessere */
--du-sez:clamp(64px,7vw,112px); /* respiro delle fasce */
--du-sez-s:clamp(40px,4.5vw,72px);
--du-titolo-mb:clamp(24px,3vw,40px); /* sotto ogni titolo di sezione */
/* Controlli — una misura sola per pulsanti, campi, selettori */
--du-h:52px;
--du-raggio:0px; /* spigoli vivi: è una scelta, non una dimenticanza */
--du-tempo:.24s;
--du-curva:cubic-bezier(.2,.7,.3,1);
}
@media(max-width:900px){
:root{ --du-pad:20px; --du-h:48px; --du-t-body:15px; }
}
/* -----------------------------------------------------------------------------
2. BASE
-------------------------------------------------------------------------- */
/* Niente grassetti e corsivi finti: il browser li sintetizza deformando la
lettera quando il peso richiesto non è stato caricato. */
html body,html body *{ font-synthesis:none; }
html body::selection,html body *::selection{ background:var(--du-ink); color:var(--du-carta); }
html body,
html body .website-wrapper,
html body .main-page-wrapper{ background-color:var(--du-carta); color:var(--du-ink); }
html body,html body p,html body li,html body td,html body dd,html body dt,
html body span,html body input,html body textarea,html body select,html body label{
font-family:var(--du-text);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html body p,html body li,html body td{
font-size:var(--du-t-body); line-height:1.7; color:var(--du-ink);
}
/* Angoli: un valore solo, ovunque. */
html body .button,html body .btn,html body button,
html body input,html body select,html body textarea,
html body .wd-product,html body .wd-product img,
html body img,html body .du-tile,html body .woocommerce-product-gallery img{
border-radius:var(--du-raggio);
}
/* -----------------------------------------------------------------------------
3. TIPOGRAFIA — registro basso
Da aesop.it, misurato: peso 400 su ogni titolo, nessun maiuscolo, nessuna
spaziatura fra le lettere, H1 a 30 px. La pagina non alza mai la voce, e
quello che sembra eleganza e in gran parte questo.
Qui la lezione e presa, non la forma: restano Outfit, Inter e DM Mono, resta
il fondo carta, restano i dieci colori. Cambia il volume.
Il maiuscolo sparisce ovunque. Sui titoli italiani era anche un problema di
leggibilita: PERCHE, PIU, E accentate in maiuscolo obbligano a interlinee
larghe per non tagliare l accento.
-------------------------------------------------------------------------- */
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .product_title,html body .wd-entities-title,
html body .woocommerce-loop-product__title,html body .wd-el-title,
html body .widget-title,html body .widgettitle,html body .page-title,
html body .wd-cart-subtotal,html body .du-h,html body .du-l,html body .du-xl{
font-family:var(--du-display); color:var(--du-ink);
font-weight:400; letter-spacing:normal; text-transform:none; font-style:normal;
}
/* Un titolo di pagina per pagina. */
html body h1,
html body .page-title,
html body.single-product .product_title,
html body .du-pagehead .du-l,
html body .du-xl{
font-weight:400; font-size:var(--du-t-page); line-height:1.3;
letter-spacing:normal; text-transform:none; margin:0 0 20px;
}
/* Titoli di sezione. */
html body h2,
html body .du-l,
html body .du-pyr .du-pyr-h,
html body .du-story h2,
html body .du-nl .du-h,
html body .related-products > .wd-el-title,
html body .wd-carousel-container > .wd-el-title,
html body .related-and-upsells .wd-el-title,
html body .cart-collaterals h2,
html body #order_review_heading,
html body .woocommerce-billing-fields > h3,
html body .woocommerce-shipping-fields > h3,
html body .woocommerce-additional-fields > h3{
font-weight:400; font-size:var(--du-t-sez); line-height:1.32;
letter-spacing:normal; text-transform:none; margin:0 0 var(--du-titolo-mb);
}
/* Nome prodotto, titolo widget, voce di fisarmonica.
Peso 500 e non 400: e l elemento su cui si clicca, e deve staccare dalle
note che gli stanno sotto. Aesop fa lo stesso, con SuisseIntl-Medium. */
html body h3,html body h4,
html body .wd-product .wd-entities-title,
html body .wd-product .woocommerce-loop-product__title,
html body .widget-title,html body .widgettitle,
html body .du-acc summary,
html body .du-tile-name,
html body .wd-cart-item .wd-entities-title{
font-weight:500; font-size:var(--du-t-card); line-height:1.4;
letter-spacing:normal; text-transform:none; margin:0 0 4px;
}
/* Testo corrente. */
html body p,html body li,html body td{
font-size:var(--du-t-body); line-height:1.6; color:var(--du-ink);
}
/* Monospaziato: resta solo dove ci sono cifre — prezzi e numerazione delle
fragranze. Era occhielli, etichette, briciole, intestazioni di tabella, e
ovunque portava maiuscolo e spaziatura larga, cioe il registro alto. */
html body .du-mood-badge,html body .du-tile-n,
html body .du-pdp-meta,html body .du-pyr-lbl,
html body .woocommerce-breadcrumb,html body .wd-breadcrumbs,
html body .shop_table th,html body .du-f-row label,
html body .woocommerce-result-count,html body .du-ft-h,
html body .form-row label,html body .woocommerce-form-row label,
html body .wpcf7 label{
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-small);
letter-spacing:normal; text-transform:none; color:var(--du-soft); line-height:1.5;
}
/* Prezzi: monospaziati, cosi le cifre si incolonnano fra tessere vicine. */
html body .price,html body .amount,html body .woocommerce-Price-amount,
html body .du-pdp-price,html body .du-tile-price,html body .order-total .amount{
font-family:var(--du-mono); font-weight:400; font-style:normal;
letter-spacing:normal; text-transform:none; color:var(--du-ink);
}
html body .wd-product .price,html body .du-tile-price,
html body .shop_table .product-price .amount,
html body .wd-cart-item .amount{ font-size:var(--du-t-body); color:var(--du-ink); }
html body.single-product .summary .price,html body .du-pdp-price{ font-size:22px; }
html body .order-total .amount,html body .cart_totals .order-total .amount{ font-size:18px; }
html body del,html body del .amount{ color:var(--du-soft); opacity:.65; font-size:var(--du-t-small); }
html body ins{ text-decoration:none; }
/* La numerazione delle fragranze resta in monospaziato: sono cifre. */
html body .du-tile-n,html body .du-mood-badge{ font-family:var(--du-mono); }
/* Navigazione. */
html body .wd-nav > li > a,
html body .wd-header-nav .wd-nav > li > a{
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-btn);
letter-spacing:normal; text-transform:none; color:var(--du-ink);
}
/* Collegamenti nel testo: il colore da solo non basta a distinguerli. */
html body .du-prose a,html body .entry-content p a,html body .du-acc-body a{
color:var(--du-ink); text-decoration:underline; text-underline-offset:3px;
text-decoration-thickness:1px; text-decoration-color:var(--du-rule-2);
transition:text-decoration-color var(--du-tempo) ease;
}
html body .du-prose a:hover,html body .entry-content p a:hover{ text-decoration-color:var(--du-ink); }
/* -----------------------------------------------------------------------------
4. COLORI — riporto WooCommerce e Woodmart dentro la tavolozza
Il blu #0073aa di WordPress, il verde delle conferme e il rosso degli sconti
arrivano dai fogli dei plugin. Qui vengono spenti uno per uno: il sito ha
inchiostro, carta e il colore della fragranza. Nient'altro.
-------------------------------------------------------------------------- */
html body a{ color:var(--du-ink); }
html body a:hover{ color:var(--du-ink); }
/* Stelle delle recensioni, barra del prezzo, evidenziazioni */
html body .star-rating,html body .star-rating span,
html body .wd-star-rating,html body p.stars a{ color:var(--du-ink)!important; }
html body .ui-slider .ui-slider-range,
html body .price_slider .ui-slider-range{ background:var(--du-ink)!important; }
html body .ui-slider .ui-slider-handle{ background:var(--du-ink)!important; border-color:var(--du-ink)!important; }
/* Woodmart colora molti stati con il proprio primario. */
html body .wd-nav > li.current-menu-item > a,
html body .wd-nav > li > a:hover,
html body .wd-active,html body .chosen,
html body .woocommerce-tabs li.active a{ color:var(--du-ink)!important; }
/* Spinner e caricatori: grigi quasi invisibili. Diventano inchiostro. */
html body .wd-loader::after,html body .blockUI.blockOverlay::after,
html body .wd-loader-overlay::after{
border-color:var(--du-rule)!important; border-top-color:var(--du-ink)!important;
}
html body .blockUI.blockOverlay{ background:rgba(244,242,237,.72)!important; }
/* -----------------------------------------------------------------------------
5. PULSANTI — uno primario, uno secondario, una misura
Prima convivevano cinque altezze (40, 44, 46, 50, 54) e quattro corpi di
testo. Ora l'altezza è una sola e sta in --du-h.
-------------------------------------------------------------------------- */
html body .button,html body .btn,html body button,
html body input[type=submit],html body button[type=submit],
html body .single_add_to_cart_button,html body .wd-buy-now-btn,
html body .checkout-button,html body .wc-block-components-button,
html body .wpcf7-submit,
.du-btn,.du-hero-cta,.du-ft-btn{
display:inline-flex; align-items:center; justify-content:center;
min-height:var(--du-h); padding:0 32px; box-sizing:border-box;
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-btn);
letter-spacing:normal; text-transform:none; line-height:1;
border:1px solid var(--du-ink); border-radius:var(--du-raggio);
background:transparent; color:var(--du-ink); box-shadow:none;
cursor:pointer; text-decoration:none;
transition:background var(--du-tempo) ease,color var(--du-tempo) ease,border-color var(--du-tempo) ease;
}
html body .button:hover,html body .btn:hover,html body button:hover,
html body input[type=submit]:hover,html body button[type=submit]:hover,
html body .single_add_to_cart_button:hover,html body .checkout-button:hover,
html body .wpcf7-submit:hover,
.du-btn:hover,.du-hero-cta:hover,.du-ft-btn:hover{
background:var(--du-ink); color:var(--du-carta); border-color:var(--du-ink);
}
/* Primario pieno: le due azioni che concludono un acquisto, e basta. */
html body .single_add_to_cart_button,
html body .checkout-button,
html body .wc-proceed-to-checkout .button{
background:var(--du-ink); color:var(--du-carta);
}
html body .single_add_to_cart_button:hover,
html body .checkout-button:hover,
html body .wc-proceed-to-checkout .button:hover{
background:transparent; color:var(--du-ink);
}
/* Terziario: azione di servizio, senza cornice. */
html body .return-to-shop .button,
html body .wc-backward,
html body .button.wc-forward.wd-continue-shopping{
min-height:auto; padding:0; border:0; background:transparent;
text-decoration:underline; text-underline-offset:5px;
text-decoration-color:var(--du-rule-2);
}
html body .return-to-shop .button:hover,html body .wc-backward:hover{
background:transparent; color:var(--du-ink); text-decoration-color:var(--du-ink);
}
/* Woodmart impone min-height:42px a ogni bottone: qui non deve vincere. */
html body button,html body .button{ min-height:var(--du-h); }
/* …tranne dove il bottone è un comando dentro un altro controllo. */
html body .quantity .wd-btn-number,
html body .du-gal-thumb,
html body .wd-tools-element button,
html body .mfp-close,
html body .wd-close-side{ min-height:0; padding:0; border:0; background:transparent; }
/* -----------------------------------------------------------------------------
6. CAMPI — una altezza, un bordo, un fuoco
-------------------------------------------------------------------------- */
html body input[type=text],html body input[type=email],html body input[type=tel],
html body input[type=url],html body input[type=password],html body input[type=search],
html body input[type=number],html body select,html body textarea,
html body .wc-block-components-text-input input{
height:var(--du-h); box-sizing:border-box;
padding:0 16px; width:100%;
font-family:var(--du-text); font-size:var(--du-t-body); color:var(--du-ink);
background:transparent;
border:1px solid var(--du-rule); border-radius:var(--du-raggio);
box-shadow:none; outline:0;
transition:border-color var(--du-tempo) ease,background var(--du-tempo) ease;
}
html body textarea{ height:auto; min-height:150px; padding:16px; line-height:1.7; }
html body input::placeholder,html body textarea::placeholder{ color:var(--du-soft); opacity:1; }
html body input:focus,html body select:focus,html body textarea:focus{
border-color:var(--du-ink); background:var(--du-white); box-shadow:none;
}
/* Etichette: sempre sopra il campo, mai dentro. */
html body .form-row label,html body .woocommerce-form-row label,
html body .du-f-row label,html body .wpcf7 label{
display:block; margin:0 0 6px;
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-small);
letter-spacing:normal; text-transform:none; color:var(--du-soft);
}
html body .form-row{ margin:0 0 22px; padding:0; }
html body .required{ color:var(--du-errore); text-decoration:none; }
/* Errori: un rosso solo, e solo qui. */
html body .woocommerce-invalid input,
html body .wpcf7-not-valid{ border-color:var(--du-errore); }
html body .wpcf7-not-valid-tip,html body .woocommerce-error li{
font-family:var(--du-mono); font-size:var(--du-t-micro); letter-spacing:.1em;
text-transform:none; color:var(--du-errore); margin-top:6px;
}
/* Caselle e scelte: quadrate, inchiostro, niente accento di sistema. */
html body input[type=checkbox],html body input[type=radio]{
width:18px; height:18px; min-height:0; padding:0; accent-color:var(--du-ink);
vertical-align:-3px; margin-right:8px;
}
/* Selettore quantità: un blocco solo, senza frecce del browser. */
html body .quantity{
display:inline-flex; align-items:stretch; height:var(--du-h);
border:1px solid var(--du-ink); border-radius:var(--du-raggio); overflow:hidden;
}
html body .quantity input.qty,html body .quantity input[type=number]{
width:60px!important; min-width:60px; height:100%; padding:0!important;
border:0!important; background:transparent!important; text-align:center;
font-family:var(--du-mono); font-weight:400; font-size:15px; color:var(--du-ink);
-moz-appearance:textfield; appearance:textfield;
}
html body .quantity input::-webkit-outer-spin-button,
html body .quantity input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
html body .quantity .wd-btn-number{
width:46px!important; min-width:46px; display:flex; align-items:center; justify-content:center;
font-family:var(--du-text); font-weight:400; font-size:16px; color:var(--du-ink);
cursor:pointer; transition:background var(--du-tempo) ease;
}
html body .quantity .wd-btn-number:hover{ background:var(--du-carta-2); }
/* -----------------------------------------------------------------------------
7. TESSERA PRODOTTO — una sola, in ogni contesto
Home, catalogo e correlati mostravano tre schede diverse dello stesso
prodotto: proporzioni 1:1 e 3:4 mescolate, bordi in un posto e ombre in un
altro, prezzo a destra qui e sotto lì. Qui è una.
-------------------------------------------------------------------------- */
html body .wd-product,html body .du-tile{
text-align:left; background:transparent;
border:0!important; box-shadow:none; overflow:visible;
}
html body .wd-products{
column-gap:var(--du-gap); row-gap:clamp(48px,5vw,80px);
border:0!important;
}
html body .wd-products .wd-product{ border:0!important; }
/* Proporzione unica: 3:4 verticale, il flacone sempre alla stessa scala. */
html body .wd-product .product-image-link,
html body .wd-product .product-element-top,
html body .du-tile-img{
position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
background:var(--du-carta);
}
html body .wd-product .product-image-link img,
html body .du-tile-img img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .9s var(--du-curva);
}
html body .wd-product:hover .product-image-link img:first-child,
html body .du-tile:hover .du-tile-img img:first-child{ transform:scale(1.03); }
/* Seconda immagine sul colore della fragranza, in dissolvenza. */
html body .du-hover-img,html body .du-tile-hover{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; pointer-events:none;
transition:opacity .55s var(--du-curva);
}
html body .wd-product:hover .du-hover-img,
html body .du-tile:hover .du-tile-hover{ opacity:1; }
/* Testo della tessera: occhiello, nome, prezzo. Tre righe, sempre in quest'ordine. */
html body .wd-product .product-wrapper > .wrapp-product-price,
html body .wd-product .wrapp-product-price{ display:block; text-align:left; margin:0; }
html body .wd-product .wd-entities-title,
html body .du-tile-name{ display:block; margin:0 0 6px; }
html body .du-mood-badge,html body .du-tile-n{ display:block; margin:14px 0 6px; }
html body .du-tile-body{ display:block; padding:14px 0 0; }
html body .du-tile-price,html body .wd-product .price{ display:block; }
/* Fuori dalla tessera: bottoni rapidi, valutazioni, categorie. Non servono. */
html body .wd-product .wd-add-btn,html body .wd-product .wd-buttons,
html body .wd-product .product-rating,html body .wd-product .wd-product-cats,
html body .wd-product .wd-compare-btn,html body .wd-product .wd-quick-view-btn{ display:none; }
/* -----------------------------------------------------------------------------
8. ETICHETTE — una forma, una posizione
Sconto a sinistra in home e a destra in catalogo, "Esaurito" rosso fuori
tavolozza. Ora sono tutte in alto a sinistra, in inchiostro.
-------------------------------------------------------------------------- */
html body .product-labels,html body .wd-product-labels{
top:12px!important; left:12px!important; right:auto!important;
display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
html body .product-label,html body .wd-product-label,
html body .onsale,html body .out-of-stock{
min-width:0; width:auto; height:auto; border-radius:var(--du-raggio);
padding:5px 10px; background:var(--du-ink); color:var(--du-carta);
font-family:var(--du-text); font-weight:400; font-size:12px;
letter-spacing:normal; text-transform:none; line-height:1;
}
html body .out-of-stock,html body .product-label.out-of-stock{
background:transparent; color:var(--du-soft); border:1px solid var(--du-rule-2);
}
/* -----------------------------------------------------------------------------
9. FASCE, TESTATE, RITMO VERTICALE
-------------------------------------------------------------------------- */
html body .container,
html body .wd-content-layout > .container,
html body .woocommerce-notices-wrapper{
max-width:var(--du-max)!important; padding-inline:var(--du-pad); margin-inline:auto;
}
html body .du-wrap{ max-width:var(--du-max); margin-inline:auto; padding-inline:var(--du-pad); }
html body .du-band{ padding-block:var(--du-sez); }
html body .du-band-s{ padding-block:var(--du-sez-s); }
html body .du-pagehead{ padding-block:var(--du-sez-s); background:var(--du-carta-2); }
html body .wd-sidebar,html body .sidebar-container,
html body .wd-sidebar-opener,html body .wd-show-sidebar-btn{ display:none!important; }
html body .wd-content-area{ width:100%!important; max-width:100%!important; }
/* Colonna di lettura: oltre una certa misura la riga stanca. */
html body .du-prose,html body .du-acc,html body .du-pyr-head{ max-width:min(100%,72ch); }
/* -----------------------------------------------------------------------------
10. FISARMONICA E SCHEDE
-------------------------------------------------------------------------- */
html body .du-acc{ border-top:1px solid var(--du-rule); }
html body .du-acc details{ border-bottom:1px solid var(--du-rule); }
html body .du-acc summary{
cursor:pointer; list-style:none; padding:24px 48px 24px 0; position:relative; margin:0;
}
html body .du-acc summary::-webkit-details-marker{ display:none; }
html body .du-acc summary::after{
content:""; position:absolute; right:4px; top:50%; width:13px; height:1px;
background:var(--du-ink); transition:transform var(--du-tempo) ease;
}
html body .du-acc summary::before{
content:""; position:absolute; right:10px; top:50%; width:1px; height:13px;
margin-top:-6px; background:var(--du-ink); transition:transform var(--du-tempo) ease;
}
html body .du-acc details[open] summary::before{ transform:scaleY(0); }
html body .du-acc .du-acc-body{ padding:0 0 26px; }
html body .woocommerce-tabs ul.tabs{ border-bottom:1px solid var(--du-rule); padding:0; margin:0 0 28px; }
html body .woocommerce-tabs ul.tabs li{ background:transparent; border:0; margin:0 28px 0 0; }
html body .woocommerce-tabs ul.tabs li a{
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-btn);
letter-spacing:normal; text-transform:none; color:var(--du-soft);
padding:0 0 14px; display:block; border-bottom:2px solid transparent;
}
html body .woocommerce-tabs ul.tabs li.active a{ color:var(--du-ink); border-bottom-color:var(--du-ink); }
html body .woocommerce-Tabs-panel p{ margin:0 0 18px; }
/* -----------------------------------------------------------------------------
11. PAGINAZIONE
-------------------------------------------------------------------------- */
html body .woocommerce-pagination ul,html body .wd-pagination ul{ border:0; gap:6px; display:flex; }
html body .woocommerce-pagination li a,html body .woocommerce-pagination li span,
html body .page-numbers{
min-width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
border:1px solid var(--du-rule); border-radius:var(--du-raggio); background:transparent;
font-family:var(--du-mono); font-weight:400; font-size:13px; color:var(--du-ink);
transition:background var(--du-tempo) ease,color var(--du-tempo) ease;
}
html body .page-numbers.current,html body .woocommerce-pagination li span.current{
background:var(--du-ink); color:var(--du-carta); border-color:var(--du-ink);
}
html body .page-numbers:hover{ background:var(--du-carta-2); }
/* -----------------------------------------------------------------------------
12. AVVISI — nero morbido, filetto a sinistra. Mai verde, mai rosso di sistema.
-------------------------------------------------------------------------- */
html body .woocommerce-message,html body .woocommerce-info,
html body .woocommerce-error,html body .wd-notice,
html body .wpcf7-response-output{
background:var(--du-ink)!important; color:var(--du-carta)!important;
border:0!important; border-left:4px solid var(--du-accent)!important;
border-radius:var(--du-raggio)!important;
padding:18px 22px!important; margin:0 0 24px!important;
font-family:var(--du-text); font-size:var(--du-t-small); line-height:1.6;
display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
html body .woocommerce-message::before,html body .woocommerce-info::before,
html body .woocommerce-error::before{ display:none; }
html body .woocommerce-message a,html body .woocommerce-info a{
color:var(--du-carta); border-color:var(--du-carta); margin-left:auto;
}
html body .woocommerce-message .button,html body .woocommerce-info .button{
min-height:40px; padding:0 20px; border-color:var(--du-carta); color:var(--du-carta);
}
html body .woocommerce-message .button:hover{ background:var(--du-carta); color:var(--du-ink); }
html body .woocommerce-error{ border-left-color:var(--du-errore)!important; }
/* -----------------------------------------------------------------------------
13. CARRELLO E CHECKOUT
-------------------------------------------------------------------------- */
html body .shop_table{ border:0; border-collapse:collapse; width:100%; }
html body .shop_table th{ border-bottom:1px solid var(--du-rule); padding:0 0 16px; text-align:left; }
html body .shop_table td{ border:0; border-bottom:1px solid var(--du-rule); padding:22px 0; vertical-align:middle; }
html body .shop_table .product-thumbnail img{
width:88px; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
}
html body .shop_table .product-name a{ font-family:var(--du-display); font-weight:500;
font-size:var(--du-t-card); text-transform:none; text-decoration:none; }
html body .shop_table .product-remove a{
color:var(--du-soft); font-size:20px; line-height:1; text-decoration:none;
transition:color var(--du-tempo) ease;
}
html body .shop_table .product-remove a:hover{ color:var(--du-ink); }
/* Il riepilogo non galleggia: sta su una superficie, con un filetto. */
html body .cart_totals,html body .cart-collaterals .cart_totals,
html body #order_review,html body .wd-order-review{
background:var(--du-carta-2); border:1px solid var(--du-rule);
border-radius:var(--du-raggio); padding:clamp(24px,3vw,36px);
}
html body .cart_totals table th,html body .cart_totals table td,
html body #order_review th,html body #order_review td{
border:0; border-bottom:1px solid var(--du-rule); padding:14px 0;
}
html body .cart_totals .order-total th,html body #order_review .order-total th{ border-bottom:0; }
html body .cart_totals .checkout-button,html body .wc-proceed-to-checkout .button{ width:100%; margin-top:20px; }
/* Coupon: campo e pulsante della stessa altezza, appaiati. */
html body .coupon{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
html body .coupon input#coupon_code{ flex:1 1 220px; }
html body .coupon .button{ flex:0 0 auto; }
/* Metodi di pagamento e spedizione */
html body .woocommerce-checkout #payment{ background:transparent; border-radius:var(--du-raggio); }
html body .woocommerce-checkout #payment ul.payment_methods{
border:0; border-top:1px solid var(--du-rule); padding:20px 0 0; margin:0;
}
html body .woocommerce-checkout #payment div.payment_box{
background:var(--du-carta); border:1px solid var(--du-rule); border-radius:var(--du-raggio);
font-size:var(--du-t-small); color:var(--du-soft); margin:12px 0 0; padding:16px;
}
html body .woocommerce-checkout #payment div.payment_box::before{ display:none; }
html body #ship-to-different-address label{
font-family:var(--du-display); font-weight:500; font-size:var(--du-t-card); text-transform:none;
letter-spacing:-.01em; color:var(--du-ink);
}
/* -----------------------------------------------------------------------------
14. HEADER
-------------------------------------------------------------------------- */
html body .whb-main-header{ background:transparent; border-bottom:1px solid var(--du-rule); box-shadow:none; }
html body.du-scrolled .whb-main-header{
background:rgba(244,242,237,.96); backdrop-filter:blur(8px);
border-bottom-color:var(--du-rule);
}
html body .wd-tools-element .wd-tools-icon,
html body .wd-tools-element > a{ color:var(--du-ink); }
html body .wd-cart-number,html body .wd-tools-count{
background:var(--du-ink); color:var(--du-carta);
font-family:var(--du-mono); font-size:11px; font-weight:400; letter-spacing:0;
min-width:18px; height:18px; line-height:18px; border-radius:50%; text-align:center;
}
/* -----------------------------------------------------------------------------
15. FOOTER
-------------------------------------------------------------------------- */
html body .wd-footer,html body .main-footer,html body .wd-copyrights,
html body .footer-container{ background:var(--du-scuro)!important; color:var(--du-ink); }
html body .wd-footer a,html body .main-footer a{ color:var(--du-ink); text-decoration:none; }
html body .wd-footer a:hover{ text-decoration:underline; text-underline-offset:4px; }
html body .du-ft-h,html body .wd-footer .widget-title{
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-small);
letter-spacing:normal; text-transform:none; color:var(--du-soft); margin:0 0 18px;
}
html body .wd-footer p,html body .wd-footer li,html body .du-ft a{ font-size:15px; line-height:1.9; }
/* Icone social: una sola forma, un solo colore. Niente blu Facebook, niente rosa. */
html body .wd-social-icons a,html body .du-ft-social a{
width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
border:1px solid var(--du-rule-2); border-radius:50%;
background:transparent!important; color:var(--du-ink)!important;
transition:background var(--du-tempo) ease,color var(--du-tempo) ease;
}
html body .wd-social-icons a:hover,html body .du-ft-social a:hover{
background:var(--du-ink)!important; color:var(--du-carta)!important; border-color:var(--du-ink);
}
html body .du-ft-bottom{ border-top:1px solid var(--du-rule); padding-top:24px; margin-top:40px; }
html body .du-ft-bottom p,html body .du-ft-legal a{ font-size:13px; color:var(--du-soft); }
/* -----------------------------------------------------------------------------
16. TORNA SU E BARRA D'ACQUISTO FISSA
Il tasto era 36 px — sotto la soglia di 44 px in cui un pollice colpisce
senza sbagliare — e finiva sopra il pulsante d'acquisto su mobile.
-------------------------------------------------------------------------- */
html body .scrollToTop,html body .wd-scroll-top{
width:48px!important; height:48px!important; right:20px!important; bottom:20px!important;
border:1px solid var(--du-ink)!important; border-radius:50%!important;
background:var(--du-carta)!important; color:var(--du-ink)!important;
box-shadow:none!important; opacity:1;
transition:background var(--du-tempo) ease,color var(--du-tempo) ease,transform var(--du-tempo) ease;
}
html body .scrollToTop:hover,html body .wd-scroll-top:hover{
background:var(--du-ink)!important; color:var(--du-carta)!important;
}
/* Quando la barra d'acquisto è in vista, il tasto sale: la classe la mette theme.js */
html body.du-atc-visibile .scrollToTop,
html body.du-atc-visibile .wd-scroll-top{ bottom:96px!important; }
html body .wd-sticky-btn,html body .wd-sticky-add-to-cart{
background:var(--du-carta)!important; border-top:1px solid var(--du-rule);
box-shadow:none!important; padding:10px var(--du-pad);
}
html body .wd-sticky-btn .single_add_to_cart_button{ min-height:var(--du-h); width:auto; }
/* -----------------------------------------------------------------------------
17. ACCESSIBILITÀ
-------------------------------------------------------------------------- */
html body a:focus-visible,html body button:focus-visible,
html body input:focus-visible,html body select:focus-visible,
html body textarea:focus-visible,html body summary:focus-visible{
outline:2px solid var(--du-ink); outline-offset:3px;
}
.du-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){
html body *,html body *::before,html body *::after{
animation-duration:.01ms!important; animation-iteration-count:1!important;
transition-duration:.01ms!important; scroll-behavior:auto!important;
}
}
/* -----------------------------------------------------------------------------
18. MOBILE E TABLET
Scritto e ragionato. NON verificato a schermo: l'estensione del browser non
ridimensiona la finestra. Servono screenshot dal telefono.
-------------------------------------------------------------------------- */
@media(max-width:1200px){
html body .wd-products{ grid-template-columns:repeat(3,minmax(0,1fr))!important; }
}
@media(max-width:900px){
html body .du-band{ padding-block:clamp(48px,7vw,72px); }
html body .du-story,html body .du-nl,html body .du-cols2{ grid-template-columns:1fr!important; }
html body .du-gal{ grid-template-columns:1fr!important; }
html body .du-gal-thumbs{ display:flex; gap:8px; margin-top:12px; }
html body .du-gal-thumb{ width:56px; flex:0 0 56px; }
html body .woocommerce-tabs ul.tabs li{ margin-right:20px; }
}
@media(max-width:768px){
html body .wd-products{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
html body .wd-product .wd-entities-title,html body .du-tile-name{ font-size:17px; }
/* Carrello: la tabella diventa un elenco leggibile. */
html body .shop_table,html body .shop_table tbody,
html body .shop_table tr,html body .shop_table td{ display:block; width:100%; }
html body .shop_table thead{ display:none; }
html body .shop_table tr.cart_item{
display:grid; grid-template-columns:72px 1fr auto; gap:14px 16px;
align-items:center; padding:20px 0; border-bottom:1px solid var(--du-rule);
}
html body .shop_table tr.cart_item td{ border:0; padding:0; }
html body .shop_table .product-thumbnail{ grid-row:1/3; }
html body .shop_table .product-thumbnail img{ width:72px; }
html body .shop_table .product-name{ grid-column:2/4; }
html body .shop_table .product-price{ display:none; }
html body .shop_table .product-subtotal{ grid-column:3; text-align:right; }
html body .shop_table .product-remove{ position:absolute; right:0; }
/* Carrello laterale: bersagli comodi per il pollice. */
html body .wd-side-hidden,html body .wd-cart-drawer{ padding:20px!important; }
html body .wd-cart-item{ padding-block:16px; }
html body .wd-close-side{ width:44px; height:44px; }
/* Il menu a panino allineato al logo, non due pixel più in alto. */
html body .wd-header-mobile-nav,html body .wd-tools-element{
display:flex; align-items:center; height:100%;
}
html body .wd-header-mobile-nav > a{ display:flex; align-items:center; min-height:44px; }
}
@media(max-width:480px){
/* Su schermi da 375 px due colonne rendono i nomi illeggibili: una sola. */
html body .wd-products{ grid-template-columns:1fr!important; }
html body .du-griglia-10{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
html body .page-numbers{ min-width:42px; height:42px; font-size:12px; }
html body .woocommerce-pagination ul{ flex-wrap:wrap; justify-content:center; }
}
/* -----------------------------------------------------------------------------
19. GLI ULTIMI DUE ELEMENTI IN SATOSHI
Cercati nel browser invece che indovinati: su tutta la home restavano due
soli nodi con il carattere di Woodmart — la scritta "Carrello" nell'header e
il messaggio del carrello vuoto. Bastavano quei due a far scaricare il file
del carattere su ogni pagina.
-------------------------------------------------------------------------- */
html body .wd-tools-element .title,
html body .wd-tools-text,
html body .wd-cart-subtotal,
html body .woocommerce-mini-cart__empty-message,
html body .wd-side-hidden,
html body .wd-side-hidden *:not([class*="icon"]):not(i),
html body .wd-dropdown *:not([class*="icon"]):not(i){
font-family:var(--du-text);
}
html body .wd-tools-element .title,
html body .wd-cart-subtotal,
html body .wd-side-hidden .widget-title,
html body .wd-side-hidden .wd-entities-title{
font-family:var(--du-display);
}
/* Carrello laterale: stesso linguaggio del resto del sito. */
html body .wd-side-hidden{ background:var(--du-carta); }
html body .wd-cart-item{ border-bottom:1px solid var(--du-rule); }
html body .wd-side-hidden .widget-title{
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-small);
letter-spacing:normal; text-transform:none; color:var(--du-soft);
}
/* -----------------------------------------------------------------------------
20. QUATTRO COSE MISURATE DOPO LA 4.7
-------------------------------------------------------------------------- */
/* 20.1 — Lo spazio fra le tessere.
`column-gap` non vinceva perché Woodmart non lo scrive: usa una variabile
propria, --wd-gap, e la teneva a 0. Cinque colonne da 272 px attaccate.
Si imposta la sua variabile invece di combattere la sua regola. */
html body .wd-products,
html body .wd-products.wd-grid-g{
--wd-gap:var(--du-gap);
column-gap:var(--du-gap); row-gap:clamp(48px,5vw,80px);
}
/* 20.2 — Il prezzo centrato sotto un nome allineato a sinistra.
Non era `justify-content`, come sembrava: `.wrapp-product-price` è un flex
in colonna con `align-items:center`. Misurato: nome a x=202, prezzo a x=297,
esattamente al centro del suo contenitore. */
html body .wd-product .wrapp-product-price{
align-items:flex-start; justify-content:flex-start; text-align:left; width:100%;
}
/* 20.3 — Prezzi allineati fra tessere vicine.
L'obiettivo è che i prezzi stiano sulla stessa riga anche quando un nome va
a capo. La strada dell'altezza minima fissa (2,8em) risolve quel caso ma ne
crea un altro: qui i nomi sono di una parola sola e resterebbe un vuoto
sotto ognuno. Il prezzo spinto in fondo dalla colonna allinea in entrambi
i casi e non lascia buchi quando il nome è corto. */
html body .wd-product .product-wrapper{
display:flex; flex-direction:column; height:100%;
}
html body .wd-product .wrapp-product-price{ margin-top:auto; padding-top:6px; }
/* 20.4 — Menu a tendina con la freccia del sistema operativo.
Restava l'unico controllo con l'aspetto del browser. */
html body select,
html body .woocommerce-ordering select{
appearance:none; -webkit-appearance:none;
padding-right:38px; cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--du-ink) 50%),
linear-gradient(135deg,var(--du-ink) 50%,transparent 50%);
background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}
/* -----------------------------------------------------------------------------
21. DUE COLONNE SU TELEFONO
Nella revisione precedente ero sceso a una colonna sotto i 480 px. La tua
specifica dice due, e ha ragione: su dieci prodotti una colonna sola diventa
un rotolo lunghissimo, e a 375 px una tessera da 167 px regge un nome come
BENJAMINS a 15 px. Due colonne fino in fondo.
-------------------------------------------------------------------------- */
@media(max-width:768px){
html body .wd-products{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media(max-width:480px){
html body .wd-products{ grid-template-columns:repeat(2,minmax(0,1fr))!important; --wd-gap:14px; column-gap:14px; }
html body .wd-product .wd-entities-title,html body .du-tile-name{ font-size:15px; letter-spacing:0; }
html body .du-mood-badge,html body .du-tile-n{ font-size:10px; letter-spacing:.12em; margin-top:10px; }
html body .wd-product .price{ font-size:13px; }
}
/* Menu mobile: voci comode, separatore sottile. */
@media(max-width:1024px){
html body .wd-nav-mobile > li > a,
html body .wd-nav-mob-tab a{
padding:16px var(--du-pad); min-height:52px; display:flex; align-items:center;
border-bottom:1px solid var(--du-rule);
font-family:var(--du-text); font-weight:400; font-size:15px;
letter-spacing:normal; text-transform:none;
}
html body .wd-search-form input[type=search],
html body .wd-header-search input{ height:48px; }
}
/* -----------------------------------------------------------------------------
22. GALLERIA — avvicinamento al passaggio del mouse
La scheda prodotto non aveva alcun ingrandimento: la specifica lo chiede e
su un packshot è il gesto che fa guardare il flacone da vicino.
-------------------------------------------------------------------------- */
html body .du-gal-main{ overflow:hidden; }
html body .du-gal-slide img{ transition:transform 1.1s var(--du-curva); }
html body .du-gal-main:hover .du-gal-slide.is-on img{ transform:scale(1.06); }
@media(hover:none){
html body .du-gal-main:hover .du-gal-slide.is-on img{ transform:none; }
}
/* -----------------------------------------------------------------------------
23. LE NOTE SULLA TESSERA (v4.8)
Da aesop.it, dove sotto ogni nome stanno tre note e non una descrizione.
Il nome di un profumo non dice niente: POWER, SWAG, OMG sono suoni. Le note
sono l'unica informazione che permette di scegliere senza annusare.
Presa la domanda, non la forma: qui restano i nostri caratteri, la nostra
griglia e il nostro filo sinistro.
-------------------------------------------------------------------------- */
html body .du-note-card{
display:block; margin:0 0 10px;
font-family:var(--du-text); font-weight:400; font-size:13px; line-height:1.5;
color:var(--du-soft); letter-spacing:0; text-transform:none;
/* Due righe al massimo: la terza sfalserebbe i prezzi fra tessere vicine. */
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
html body .wd-product .du-note-card{ margin-top:2px; }
/* -----------------------------------------------------------------------------
24. QUATTRO COLONNE, NON CINQUE
Aesop ne usa tre e le immagini respirano. Su dieci prodotti cinque colonne
da 272 px facevano tessere da francobollo: quattro da 342 px danno al
flacone lo spazio che merita e mantengono due righe piene.
-------------------------------------------------------------------------- */
@media(min-width:1201px){
html body .wd-products,
html body .wd-products.grid-columns-5{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
html body .du-grid10{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
/* La griglia della home condivide la tessera del catalogo. */
html body .du-grid10{
display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
column-gap:var(--du-gap); row-gap:clamp(48px,5vw,80px);
}
@media(max-width:1200px){ html body .du-grid10{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:768px){ html body .du-grid10{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ html body .du-grid10{ column-gap:14px; } }
/* -----------------------------------------------------------------------------
25. IL REGISTRO ALTO SI SPEGNE OVUNQUE
In style.css il maiuscolo compare in 38 punti e i pesi 800 e 900 in decine.
Toglierli uno per uno significherebbe rileggere 1.100 righe stratificate e
sbagliarne qualcuna. Qui la regola e generale, e puo esserlo perche nel
registro scelto NON ESISTE piu un elemento che debba essere maiuscolo o
grassetto: non e una scorciatoia, e la conseguenza della decisione.
Le uniche eccezioni sono dichiarate subito sotto, in chiaro.
-------------------------------------------------------------------------- */
html body [class^="du-"],html body [class*=" du-"],
html body [class^="wd-"],html body [class*=" wd-"],
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body p,html body li,html body td,html body th,html body span,
html body a,html body label,html body summary,html body button,
html body .button,html body .btn,html body input,html body select{
text-transform:none;
letter-spacing:normal;
font-weight:400;
}
/* Eccezione unica: peso 500 su cio che si clicca o che apre un blocco.
Serve a staccarlo da quello che gli sta intorno, non a gridare. */
html body .wd-product .wd-entities-title,
html body .woocommerce-loop-product__title,
html body .du-tile-name,
html body .shop_table .product-name a,
html body .du-acc summary,
html body .widget-title,html body .widgettitle,
html body .woocommerce-tabs ul.tabs li.active a,
html body .wd-nav > li.current-menu-item > a,
html body strong,html body b{ font-weight:500; }
/* Il titolo di pagina resta 400 ma cresce di corpo: e la misura a dargli peso,
non lo spessore. E la stessa scelta di aesop.it. */
html body h1,html body .du-xl,html body .page-title,
html body.single-product .product_title{ font-weight:400; }
/* Interlinea: nel registro basso i titoli non stanno piu a 1,04.
Aesop usa 1,33 su H1 e 1,3 su H2. */
html body h1,html body .du-xl,html body .du-l,
html body.single-product .product_title{ line-height:1.3; }
html body h2,html body .du-h{ line-height:1.32; }
/* -----------------------------------------------------------------------------
26. LO SPAZIO FRA TESTATA E CONTENUTO (v4.9.1)
Il carrello mostrava il contenuto sotto la testata, coperto.
Misurato: body ha .wd-header-overlap, .whb-main-header e in position:absolute
alta 91 px con z-index 390, e Woodmart azzera il rientro con la sua regola
.wd-header-overlap:where(:not(.single-product)) .wd-content-layout:first-child
{ padding-top: 0 }
Il :where() vale zero di specificita, quindi la regola pesa pochissimo ed e
facile da correggere. L eccezione per .single-product spiega perche la scheda
prodotto era l unica pagina a posto.
La sovrapposizione serve solo in home, dove la testata sta sopra la fotografia
a tutta pagina. Ovunque altrove il contenuto riprende il suo spazio, usando
l altezza vera della testata — la variabile e di Woodmart e segue il mobile.
-------------------------------------------------------------------------- */
html body.wd-header-overlap:not(.home):not(.single-product) .wd-content-layout:first-child{
padding-top:calc(var(--wd-header-h,90px) + 40px);
}
@media(max-width:900px){
html body.wd-header-overlap:not(.home):not(.single-product) .wd-content-layout:first-child{
padding-top:calc(var(--wd-header-h,90px) + 24px);
}
}
/* -----------------------------------------------------------------------------
27. IL MAIUSCOLO CHE RESTAVA
Dopo la 4.9 restavano sei elementi: «Cerca», «Lista dei desideri»,
«Totale carrello» e tre pulsanti in Maiuscolo Iniziale. Le regole che li
producono stanno in fogli di Woodmart che non riesco a interrogare dal
browser, ma la prova diretta e conclusiva: con questa dichiarazione la
pagina non ha piu un solo elemento trasformato.
L eccezione e giustificata — nel registro scelto non esiste piu un elemento
che debba essere maiuscolo.
-------------------------------------------------------------------------- */
html body [class^="du-"],html body [class*=" du-"],
html body [class^="wd-"],html body [class*=" wd-"],
html body [class^="whb-"],html body [class*=" whb-"],
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body p,html body li,html body td,html body th,html body span,html body a,
html body label,html body summary,html body button,html body input,html body select,
html body .button,html body .btn,html body .checkout-button,
html body .cart_totals h2,html body .cart-collaterals h2,
html body .woocommerce h2,html body .woocommerce .button{
text-transform:none!important;
letter-spacing:normal!important;
}
/* -----------------------------------------------------------------------------
28. VELO SULLA FOTOGRAFIA DELLA HOME
Conseguenza diretta del registro basso: il titolo bianco a peso 900 reggeva
sopra il flat-lay chiaro, a peso 400 no. Un velo che scurisce solo la meta
sinistra, dove sta il testo, senza spegnere i colori dei flaconi a destra.
-------------------------------------------------------------------------- */
html body .du-hero{ position:relative; }
html body .du-hero::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:linear-gradient(100deg,
rgba(20,22,26,.62) 0%,
rgba(20,22,26,.34) 34%,
rgba(20,22,26,0) 62%);
}
html body .du-hero-in,html body .du-hero .du-wrap{ position:relative; z-index:2; }
@media(max-width:760px){
html body .du-hero::after{
background:linear-gradient(180deg,
rgba(20,22,26,.30) 0%,
rgba(20,22,26,.62) 62%,
rgba(20,22,26,.72) 100%);
}
}
/* -----------------------------------------------------------------------------
29. PREZZI ALLINEATI ANCHE IN HOME
SWAG ha tre note che vanno a capo: il suo prezzo scendeva di 16 px rispetto
agli altri quattro della riga. In catalogo era gia risolto, nelle tessere
della home no.
-------------------------------------------------------------------------- */
html body .du-tile{ display:flex; flex-direction:column; }
html body .du-tile-body{ display:flex; flex-direction:column; flex:1 1 auto; }
html body .du-tile-price{ margin-top:auto; padding-top:6px; }
/* La seconda croce sulla riga del carrello e uno pseudo-elemento del tema. */
html body .product-remove a.remove::before,
html body .product-remove a.remove::after{ display:none; }
/* -----------------------------------------------------------------------------
30. IL PASSAGGIO DEL MOUSE SULLE TESSERE (v5.0)
Non funzionava, e la causa erano due meccanismi sovrapposti.
Woodmart mette la seconda immagine in un DIV fratello del collegamento:
![]()
![]()
![]()
con una classe mia, quindi la regola scritta per .du-hover-img
non lo toccava mai. Il div restava nel flusso, si accodava sotto la prima
immagine e finiva tagliato da overflow:hidden. Misurato: due ![]()
, entrambe
position:static e opacity:1, la seconda spinta fuori dal riquadro.
Qui il div viene sovrapposto alla prima immagine e portato in dissolvenza.
-------------------------------------------------------------------------- */
html body .wd-product .product-element-top{ position:relative; }
html body .wd-product .wd-product-img-hover,
html body .wd-product .hover-img{
position:absolute!important; inset:0!important; margin:0!important;
opacity:0; pointer-events:none;
background-size:cover; background-position:center;
transition:opacity .55s var(--du-curva);
}
html body .wd-product .wd-product-img-hover img{
width:100%!important; height:100%!important; object-fit:cover; display:block;
}
html body .wd-product:hover .wd-product-img-hover,
html body .wd-product:hover .hover-img{ opacity:1; }
/* La seconda immagine giusta.
Woodmart usa la seconda della galleria: per FREE e un flat-lay con passaporto
e mascherina su fondo blu, cioe un registro visivo che non c entra con gli
altri nove. Il PHP stampa per ogni prodotto lo scatto sul colore della
fragranza, scelto uno per uno nell anagrafica, e qui l ![]()
del tema si
spegne per lasciare vedere il fondo. */
html body .wd-product .wd-product-img-hover img{ opacity:0!important; }
html body .wd-product .wd-product-img-hover{ background-color:transparent!important; }
/* Il riquadro bianco col bordo che appariva al passaggio non e la tessera:
e un elemento a parte, .wd-product-card-bg, che Woodmart inserisce apposta
per fare da sfondo alla scheda in evidenza. Cercarlo sul contenitore
sbagliato e il motivo per cui la prima correzione non l aveva tolto. */
html body .wd-product .wd-product-card-bg{ display:none!important; }
html body .wd-product .wrapp-swatches{ background:transparent!important; }
/* -----------------------------------------------------------------------------
31. LA TESSERA NON SI GONFIA PIU AL PASSAGGIO
Woodmart apre un pannello bianco con bordo, ci infila la descrizione completa
e un cuore, e la tessera cresce uscendo dalla griglia e coprendo le vicine.
Sulla tessera editoriale — senza bordo, senza ombra — e un corpo estraneo:
le note che servono stanno gia sotto il nome.
-------------------------------------------------------------------------- */
html body .wd-product .hover-content,
html body .wd-product .wd-more-desc,
html body .wd-product .hover-content-inner,
html body .wd-product .wd-wishlist-btn,
html body .wd-product .wd-action-btn{ display:none!important; }
html body .wd-product .wd-product-wrapper,
html body .wd-product:hover .wd-product-wrapper{
background:transparent!important; border:0!important;
box-shadow:none!important; padding:0!important;
transform:none!important;
}
html body .wd-product.wd-hover-base:hover{ z-index:auto; }
/* -----------------------------------------------------------------------------
32. TESTO DELLA TESSERA SULLO STESSO FILO
Misurato: occhiello e nome a x=143, note a x=202, prezzo a x=251.
`.wrapp-product-price` e un flex in colonna con align-items:center, e note e
prezzo ci stanno dentro tutti e due. La dichiarazione precedente perdeva
contro quella del tema: qui vince.
-------------------------------------------------------------------------- */
html body .wd-product .wrapp-product-price,
html body .wd-product .product-rating-price,
html body .wd-product .product-element-bottom{
align-items:flex-start!important; text-align:left!important; width:100%;
}
/* -----------------------------------------------------------------------------
33. CONVIVENZA CON ELEMENTOR (v5.1)
Elementor avvolge ogni cosa in contenitori con padding, larghezze e stili in
linea propri. Se non li si neutralizza, il filo sinistro cambia a ogni
sezione e il ritmo verticale si perde — cioe esattamente il difetto che
abbiamo passato giorni a togliere.
Qui i suoi contenitori diventano trasparenti al sistema: portano il
contenuto, non la geometria. La geometria resta dei token.
-------------------------------------------------------------------------- */
html body .elementor-section,
html body .elementor-container,
html body .e-con,
html body .e-con-inner,
html body .elementor-widget-wrap,
html body .elementor-column-wrap{
padding:0!important; margin-inline:auto;
}
html body .elementor-section.elementor-section-boxed > .elementor-container,
html body .e-con{
max-width:var(--du-max)!important; width:100%;
}
/* Le sezioni DUBBLEUP portano gia il proprio respiro: dentro Elementor non
devono riceverne un secondo. */
html body .elementor-widget-shortcode .du-band,
html body .elementor-widget-shortcode .du-band-s{ margin:0; }
html body .elementor-widget-shortcode > .elementor-widget-container{ margin:0!important; }
/* Elementor stampa la tipografia dal suo kit: qui vale la nostra. */
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor p{
font-family:inherit; color:inherit; letter-spacing:normal;
}
html body .elementor-widget-heading .elementor-heading-title{
font-family:var(--du-display); font-weight:400; color:var(--du-ink);
}
html body .elementor-widget-text-editor p{
font-family:var(--du-text); font-size:var(--du-t-body); line-height:1.6;
}
html body .elementor-button{
min-height:var(--du-h); padding:0 32px; border-radius:var(--du-raggio)!important;
font-family:var(--du-text); font-weight:400; font-size:var(--du-t-btn);
letter-spacing:normal; text-transform:none;
background:transparent!important; color:var(--du-ink)!important;
border:1px solid var(--du-ink)!important;
}
html body .elementor-button:hover{
background:var(--du-ink)!important; color:var(--du-carta)!important;
}
/* -----------------------------------------------------------------------------
34. I TRE PASSI E IL FOOTER DAL TEMA
-------------------------------------------------------------------------- */
html body .du-passi{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--du-gap) clamp(24px,4vw,64px); margin-top:var(--du-titolo-mb);
}
@media(max-width:760px){ html body .du-passi{ grid-template-columns:1fr; gap:32px; } }
html body .du-passo-n{
display:block; margin:0 0 8px;
font-family:var(--du-mono); font-size:var(--du-t-small); color:var(--du-soft);
}
html body .du-passo h3{ margin:0 0 6px; }
html body .du-passo p{ color:var(--du-soft); margin:0; }
html body .du-ft-wrap{ background:var(--du-scuro); }
html body .du-ft-in{ max-width:var(--du-max); margin-inline:auto; padding:clamp(48px,6vw,80px) var(--du-pad); }
html body .du-ft-top{
display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
gap:clamp(24px,4vw,56px);
}
@media(max-width:900px){ html body .du-ft-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ html body .du-ft-top{ grid-template-columns:1fr; } }
html body .du-ft-logo{ width:136px; height:auto; display:block; margin:0 0 16px; }
html body .du-ft ul{ list-style:none; margin:0; padding:0; }
html body .du-ft li{ margin:0 0 8px; }
html body .du-ft-bottom{
display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
border-top:1px solid var(--du-rule); margin-top:clamp(32px,4vw,56px); padding-top:24px;
}
html body .du-ft-legal{ display:flex; gap:20px; flex-wrap:wrap; }
/* Il footer stampato da wp_footer sta in fondo al body, fuori dal contenitore
del tema: la larghezza piena gliela diamo qui. Quello vuoto di Woodmart
resta a zero pixel e non da fastidio. */
html body .du-ft-wrap{ width:100%; background:var(--du-scuro); }
html body .wd-footer:not(:has(.du-ft)){ min-height:0; padding:0; }
html body .du-ft-logo-testo{
display:block; margin:0 0 16px;
font-family:var(--du-display); font-weight:500; font-size:22px;
letter-spacing:.02em; color:var(--du-ink);
}
/* -----------------------------------------------------------------------------
35. DUE DIFETTI TROVATI GUARDANDO CARRELLO E CHECKOUT (v5.2)
-------------------------------------------------------------------------- */
/* 35.1 — Il riquadro nero attorno a «1 × 29,00 €» nel carrello laterale.
L ho introdotto io. La regola del selettore quantita — bordo, altezza 52 px —
e scritta per il controllo +/- della scheda prodotto, ma WooCommerce usa la
stessa classe .quantity per un semplice testo nel mini carrello. Misurato:
un contenente «1 × 29,00 €» con bordo 1px e altezza
52. La regola vale solo dove c e davvero un campo da compilare. */
html body .wd-cart-item .quantity,
html body .mini_cart_item .quantity,
html body .woocommerce-mini-cart-item .quantity,
html body .wd-cart-drawer .quantity{
display:inline; border:0!important; height:auto!important; overflow:visible;
font-family:var(--du-mono); font-size:var(--du-t-small); color:var(--du-soft);
}
html body .wd-cart-item .quantity .amount,
html body .mini_cart_item .quantity .amount{ font-size:var(--du-t-small); color:var(--du-soft); }
/* Miniatura del carrello laterale: c era ma il riquadro le stava addosso. */
html body .wd-cart-item img,
html body .mini_cart_item img{
width:64px; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
}
/* 35.2 — Il doppio riquadro nel riepilogo dell ordine.
Misurato: .checkout-order-review porta un fondo #F7F7F7 — un bianco freddo,
fuori dalla scala calda — con un bordo dentellato da scontrino, e dentro ci
sta il nostro riquadro su carta-2. Due cornici annidate di due temperature
diverse. Fuori resta solo il contenuto; la cornice e una sola. */
html body .checkout-order-review{
background:transparent!important; padding:0!important;
border:0!important; box-shadow:none!important;
}
html body .checkout-order-review::before,
html body .checkout-order-review::after{ display:none!important; }
/* Il selettore quantita dentro il riepilogo non serve: la quantita si cambia
nel carrello, non mentre si paga. */
html body .woocommerce-checkout-review-order .quantity .wd-btn-number{ display:none; }
html body .woocommerce-checkout-review-order .quantity{
display:inline; border:0!important; height:auto!important;
}