/*
Theme Name: Cibico
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/* =========================================================================
CIBICO — Foglio di stile personalizzato
wp-content/themes/flatsome-child/style.css
-------------------------------------------------------------------------
0. Token di design
1. Base tipografica
2. Accessibilità globale
3. Bottoni e link con freccia
4. Header — ricerca, account, carrello
5. Navigazione principale
6. Dropdown (Dispensa / Cantina / Account)
6b. Mini carrello
7. Home
8. Card prodotto
9. Pagina prodotto
10. Archivio categoria
11. Slider
12. Newsletter (Klaviyo)
13. Footer
14. Wishlist (YITH)
14b.Wishlist mobile
15. Waitlist (YITH)
16. Carrello
========================================================================= */
/* =========================================================================
0. TOKEN DI DESIGN
========================================================================= */
:root{
/* --- Palette ---------------------------------------------------------
Il sito usava #77acab, #78adac e #79adac in punti diversi: differenze
impercettibili, ora un solo valore. */
--cbc-teal: #78adac; /* accento primario */
--cbc-teal-deep: #6c9686; /* hover bottoni */
--cbc-teal-ink: #2f5f5e; /* testo su fondo chiaro */
--cbc-teal-soft: #d4dcd7; /* pill footer */
--cbc-teal-wash: #eef5f4; /* fondo voce attiva */
--cbc-cocoa: #70544f; /* prezzi, badge sconto */
--cbc-marker: #fdf17b; /* evidenziatore giallo */
--cbc-ink: #111111; /* titoli */
--cbc-body: #333333; /* testo corrente */
--cbc-muted: #5a5a5a;
--cbc-faint: #8a8a8a;
--cbc-ghost: #9a938a;
--cbc-cream: #faf6ef; /* hover righe dropdown */
--cbc-sand: #edeae3; /* barra nav */
--cbc-line: #dad5cb; /* divisori */
--cbc-line-soft: #cbc9c5; /* frecce slider */
--cbc-stock-ok: #4b8b6b;
--cbc-alert: #b80c0c; /* esaurito */
--cbc-saffron: #c97d1f; /* backorder, aggiorna carrello */
--cbc-heart: #da1a1a; /* wishlist attiva */
/* --- Tipografia ------------------------------------------------------ */
--cbc-font-display: 'Fraunces', Georgia, serif;
--cbc-font-body: 'Noto Sans', system-ui, sans-serif;
/* Era `-5%`: valore non valido, quindi inattivo. Metti 0 per tornare
esattamente all'aspetto precedente. */
--cbc-tracking-display: -0.02em;
/* --- Raggi ----------------------------------------------------------- */
--cbc-r-sm: 6px;
--cbc-r-md: 10px;
--cbc-r-lg: 16px;
--cbc-r-pill: 999px;
/* --- Ombre ----------------------------------------------------------- */
--cbc-shadow-card: 0 2px 14px rgba(40,24,12,.08);
--cbc-shadow-card-hover: 0 10px 26px rgba(40,24,12,.14);
--cbc-shadow-pop: 0 18px 40px -12px rgba(61,55,51,.28),
0 2px 8px rgba(61,55,51,.06);
/* --- Movimento ------------------------------------------------------- */
--cbc-ease: cubic-bezier(.2,.7,.3,1);
--cbc-fast: .15s;
--cbc-med: .3s;
/* --- Icone (SVG inline, zero richieste HTTP) ------------------------- */
--cbc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
--cbc-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
--cbc-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
--cbc-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
--cbc-arrow-right: url("data:image/svg+xml,%3Csvg width='30' height='18' viewBox='0 0 30 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.9027 15.0691C20.3696 15.6022 20.3696 16.4663 20.9027 16.9994C21.4357 17.5324 22.2999 17.5324 22.8328 16.9994L29.2006 10.6317C30.2665 9.56563 30.2665 7.83735 29.2006 6.77129L22.8289 0.399742C22.2959 -0.13325 21.4318 -0.13325 20.8987 0.399755C20.3658 0.932747 20.3658 1.79691 20.8987 2.3299L25.9023 7.33346H1.36482C0.611059 7.33346 0 7.94449 0 8.69828C0 9.45194 0.611059 10.0631 1.36482 10.0631H25.9087L20.9027 15.0691Z' fill='%23ffffff'/%3E%3C/svg%3E");
--cbc-marker-swoosh: url('data:image/svg+xml,');
--cbc-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10.5v9.5H2.5z'/%3E%3Cpath d='M13 10h3.6l3 3.2V16H13z'/%3E%3Ccircle cx='6.6' cy='18' r='1.7'/%3E%3Ccircle cx='16.8' cy='18' r='1.7'/%3E%3C/svg%3E");
--cbc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.6 2.6L16 9.5'/%3E%3C/svg%3E");
}
/* =========================================================================
1. BASE TIPOGRAFICA
Sostituisce gli slot Flatsome: Headlines, Base, Navigation.
Le misure erano in pt: convertite in px (1pt = 1.333px), arrotondate
al pixel. Scarto massimo 0,33px.
========================================================================= */
h1, h2, h3, h4, h5, h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a{
font-family: var(--cbc-font-display);
font-weight: 600;
letter-spacing: var(--cbc-tracking-display);
}
body, p, .text-body, .woocommerce{
font-family: var(--cbc-font-body);
font-weight: 400;
}
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a{
font-family: var(--cbc-font-body);
font-weight: 500;
}
/* clamp() al posto di 40px fissi: su mobile i titoli non sfondano più */
body h2{
font-size: clamp(28px, 4.2vw, 40px);
line-height: 1;
position: relative;
margin-bottom: 10px;
color: var(--cbc-cocoa);
}
/* =========================================================================
3. BOTTONI E LINK CON FRECCIA
========================================================================= */
.button.custom-arrow-right{
display: inline-flex;
align-items: center;
gap: 10px;
}
.button.custom-arrow-right::after{
content: "";
display: inline-block;
flex-shrink: 0;
width: 26px;
height: 15px;
background: var(--cbc-arrow-right) no-repeat center / contain;
transition: transform var(--cbc-med) var(--cbc-ease);
}
.button.custom-arrow-right:hover::after{
transform: translateX(4px);
}
.button.scegli-la-tua-box{
margin: 0;
padding: 10px 20px !important;
gap: 40px;
}
.button.scegli-la-tua-box span{
display: inline-block;
line-height: 1.6;
font-size: 19px;
letter-spacing: -.2px;
}
/* =========================================================================
4. HEADER — ricerca, account, carrello
========================================================================= */
#masthead .header-search-form{ width: 90%; }
#masthead input.search-field{
height: 42px;
font-size: 15px;
border-radius: var(--cbc-r-sm);
padding: 15px;
}
.searchform .button.icon{
background: var(--cbc-teal) !important;
right: 2px;
border-radius: var(--cbc-r-sm);
}
.searchform .button.icon i{ color: #fff; }
.custom-menu-icon,
.custom-account-icon{ display: flex; }
#masthead .account-item,
#masthead .cart-item,
#masthead .nav-icon{
margin-left: 20px;
margin-right: 0;
}
#masthead .nav-icon{ margin-left: 30px; }
#masthead .account-link{
display: flex;
flex-direction: row-reverse;
gap: 10px;
}
#masthead .header-account-title{
font-size: 12px;
font-weight: 600;
letter-spacing: -.1px;
}
#masthead .cart-item .header-cart-link{
background: var(--cbc-ink);
padding: 2px 6px;
}
#masthead .cart-item .header-cart-title{ margin-right: 0; }
#masthead .cart-img-icon{
padding: 3px;
overflow: visible;
}
.header-cart-icon{ margin-left: 0 !important; }
.header-cart-icon[data-icon-label]::after{
background: var(--cbc-teal) !important;
box-shadow: none;
top: -7px;
right: -7px;
opacity: 1;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
/* I dropdown a destra si ancorano al bordo destro, non escono dal viewport */
#header .nav-right > li.current-dropdown > .nav-dropdown,
#header .nav-right > li.has-dropdown:hover > .nav-dropdown,
#header .nav-right > li.has-dropdown:focus-within > .nav-dropdown{
left: auto !important;
right: 0 !important;
margin-left: 0 !important;
max-width: calc(100vw - 30px);
}
/* =========================================================================
5. NAVIGAZIONE PRINCIPALE
========================================================================= */
.header-bottom-nav > li > a{
color: var(--cbc-body) !important;
font-weight: 600 !important;
}
#wide-nav .menu-item{ margin: 0 !important; }
#wide-nav .header-nav > .menu-item > a{
padding: 18px !important;
padding-bottom: 14px !important;
border-bottom: 4px solid var(--cbc-sand) !important;
transition: border-color var(--cbc-med) var(--cbc-ease);
}
#wide-nav .header-nav > .menu-item.active > a,
#wide-nav .header-nav > .menu-item > a:hover{
border-bottom-color: var(--cbc-teal) !important;
}
#wide-nav .produttori-selezionati{
display: flex;
gap: 6px;
align-items: center;
}
#wide-nav .produttori-selezionati svg{
width: 24px;
height: 24px;
}
#wide-nav .produttori-selezionati svg path{ stroke: var(--cbc-teal); }
#wide-nav .produttori-selezionati .text{
letter-spacing: -.1px;
opacity: .5;
font-size: 13px;
}
#wide-nav .produttori-selezionati .text strong{
font-weight: 600;
letter-spacing: .3px;
}
/* =========================================================================
6. DROPDOWN — Dispensa / Cantina / Account
Stesso linguaggio dell'overlay di ricerca: card bianca, raggio 16px,
ombra ampia, nessun bordo, nessuna riga divisoria.
Il segno distintivo: la barra teal che sottolinea la voce attiva nella
nav principale, ruotata di 90° come indicatore laterale sulla riga.
========================================================================= */
/* --- Il pannello ------------------------------------------------------- */
#header .nav-dropdown.nav-dropdown-default{
padding: 8px;
min-width: 300px;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-lg);
background: #fff;
box-shadow: var(--cbc-shadow-pop);
transform: translateY(-8px);
transition: opacity .2s var(--cbc-ease),
transform .2s var(--cbc-ease),
visibility .2s;
}
#header li.current-dropdown > .nav-dropdown.nav-dropdown-default,
#header li.has-dropdown:hover > .nav-dropdown.nav-dropdown-default,
#header li.has-dropdown:focus-within > .nav-dropdown.nav-dropdown-default{
transform: translateY(0);
}
/* Via il triangolino a spigoli vivi: con l'ombra non serve più */
.nav-dropdown-has-arrow li.has-dropdown::before,
.nav-dropdown-has-arrow li.has-dropdown::after{
display: none;
}
/* --- Le voci ----------------------------------------------------------- */
#header .nav-dropdown.nav-dropdown-default > li{ margin: 0; }
#header .nav-dropdown.nav-dropdown-default > li > a{
position: relative;
display: block;
padding: 11px 38px 11px 18px;
border: 0;
border-radius: var(--cbc-r-md);
margin: 0;
font-size: 15px;
line-height: 1.25;
color: var(--cbc-body);
transition: background-color var(--cbc-fast) var(--cbc-ease),
color var(--cbc-fast) var(--cbc-ease);
}
/* Indicatore laterale: la barra teal della nav, in verticale */
#header .nav-dropdown.nav-dropdown-default > li > a::before{
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 3px;
height: 56%;
border-radius: 2px;
background: var(--cbc-teal);
transform: translateY(-50%) scaleY(0);
transform-origin: center;
transition: transform .22s var(--cbc-ease);
}
/* Chevron in mask: il colore resta gestito da CSS */
#header .nav-dropdown.nav-dropdown-default > li > a::after{
content: "";
position: absolute;
right: 15px;
top: 50%;
width: 16px;
height: 16px;
background-color: var(--cbc-teal);
-webkit-mask: var(--cbc-chevron) center / 16px 16px no-repeat;
mask: var(--cbc-chevron) center / 16px 16px no-repeat;
opacity: 0;
transform: translate(-4px,-50%);
transition: opacity var(--cbc-fast) var(--cbc-ease),
transform var(--cbc-fast) var(--cbc-ease);
}
#header .nav-dropdown.nav-dropdown-default > li > a:hover,
#header .nav-dropdown.nav-dropdown-default > li > a:focus-visible{
background: var(--cbc-cream);
color: var(--cbc-ink);
}
#header .nav-dropdown.nav-dropdown-default > li > a:hover::before,
#header .nav-dropdown.nav-dropdown-default > li > a:focus-visible::before{
transform: translateY(-50%) scaleY(1);
}
#header .nav-dropdown.nav-dropdown-default > li > a:hover::after,
#header .nav-dropdown.nav-dropdown-default > li > a:focus-visible::after{
opacity: 1;
transform: translate(0,-50%);
}
#header .nav-dropdown.nav-dropdown-default > li > a:focus-visible{
outline: 2px solid var(--cbc-teal);
outline-offset: -2px;
}
/* Voce corrispondente alla pagina aperta */
#header .nav-dropdown.nav-dropdown-default > li.current-menu-item > a,
#header .nav-dropdown.nav-dropdown-default > li.is-active > a{
background: var(--cbc-teal-wash);
color: var(--cbc-teal-ink);
font-weight: 600;
}
#header .nav-dropdown.nav-dropdown-default > li.current-menu-item > a::before,
#header .nav-dropdown.nav-dropdown-default > li.is-active > a::before{
transform: translateY(-50%) scaleY(1);
}
/* --- Entrata scaglionata ----------------------------------------------- */
@keyframes cbc-drop-item{
from{ opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
#header li.current-dropdown > .nav-dropdown > li,
#header li.has-dropdown:hover > .nav-dropdown > li,
#header li.has-dropdown:focus-within > .nav-dropdown > li{
animation: cbc-drop-item .26s var(--cbc-ease) both;
}
#header .nav-dropdown > li:nth-child(1){ animation-delay: .02s; }
#header .nav-dropdown > li:nth-child(2){ animation-delay: .045s; }
#header .nav-dropdown > li:nth-child(3){ animation-delay: .07s; }
#header .nav-dropdown > li:nth-child(4){ animation-delay: .095s; }
#header .nav-dropdown > li:nth-child(5){ animation-delay: .12s; }
#header .nav-dropdown > li:nth-child(6){ animation-delay: .145s; }
#header .nav-dropdown > li:nth-child(7){ animation-delay: .17s; }
#header .nav-dropdown > li:nth-child(8){ animation-delay: .195s; }
#header .nav-dropdown > li:nth-child(n+9){ animation-delay: .22s; }
/* --- Due colonne automatiche da 7 voci in su (solo nav principale) ------
:has() evita di dover assegnare classi CSS alle voci di menu.
Dispensa passa da ~330px a ~180px di altezza. */
#wide-nav .nav-dropdown.nav-dropdown-default:has(> li:nth-child(7)){
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 4px;
min-width: 460px;
}
/* --- Menu account: Logout è un'azione terminale, va staccata ----------- */
#header .nav-dropdown.nav-dropdown-default
> li.woocommerce-MyAccount-navigation-link--customer-logout{
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--cbc-line);
}
#header .nav-dropdown.nav-dropdown-default
> li.woocommerce-MyAccount-navigation-link--customer-logout > a{
color: var(--cbc-faint);
font-size: 14px;
}
#header .nav-dropdown.nav-dropdown-default
> li.woocommerce-MyAccount-navigation-link--customer-logout > a::after,
#header .nav-dropdown.nav-dropdown-default
> li.woocommerce-MyAccount-navigation-link--customer-logout > a::before{
content: none;
}
/* --- Riga CTA opzionale: voce di menu con classe "dropdown-cta" -------- */
#header .nav-dropdown.nav-dropdown-default > li.dropdown-cta{
grid-column: 1 / -1;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--cbc-line);
}
#header .nav-dropdown.nav-dropdown-default > li.dropdown-cta > a{
background: var(--cbc-cream);
color: var(--cbc-teal-ink);
font-weight: 600;
}
/* =========================================================================
6b. MINI CARRELLO — stile card, allineato a product card / wishlist
Markup Flatsome/WooCommerce invariato.
========================================================================= */
/* --- Il pannello ------------------------------------------------------- */
#header .cart-item .nav-dropdown.nav-dropdown-default{
display: block;
min-width: 400px;
padding: 0;
overflow: hidden;
background: var(--cbc-calce, #EDEBE1);
box-shadow: 0 0 9999px 99999px rgb(0 0 0 / 75%);
}
#header .cart-item .nav-dropdown > li.widget_shopping_cart{
width: 100%;
margin: 0;
padding: 0;
}
#header .widget_shopping_cart_content{ padding: 0; }
#header .widget_shopping_cart_content::before{
content: "Il tuo carrello";
display: block;
padding: 20px 18px 4px;
font-family: var(--font-heading, 'Fraunces', serif);
font-size: 20px;
font-weight: 600;
color: var(--cbc-inchiostro, #17323D);
}
/* --- Lista scorrevole --------------------------------------------------- */
#header ul.woocommerce-mini-cart{
display: flex;
flex-direction: column;
gap: 10px;
max-height: min(46vh, 360px);
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 14px 14px 4px;
list-style: none;
scrollbar-width: thin;
scrollbar-color: var(--cbc-sand, #E5DFC8) transparent;
}
#header ul.woocommerce-mini-cart::-webkit-scrollbar{ width: 6px; }
#header ul.woocommerce-mini-cart::-webkit-scrollbar-thumb{
background: var(--cbc-sand, #E5DFC8);
border-radius: 3px;
}
/* --- La riga prodotto: card bianca, nessun bordo, ombra come hover ---- */
#header li.woocommerce-mini-cart-item{
position: relative;
margin: 0;
padding: 12px 40px 12px 12px;
border: 0 !important;
border-radius: 16px;
background: #fff;
list-style: none;
box-shadow: 0 2px 8px rgba(23, 50, 61, 0.06);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
#header li.woocommerce-mini-cart-item:hover,
#header li.woocommerce-mini-cart-item:focus-within{
box-shadow: 0 8px 20px rgba(23, 50, 61, 0.12);
transform: translateY(-1px);
}
#header li.woocommerce-mini-cart-item::after{ content: none; }
/* Grid sull'anchor: img in colonna 1, nodo di testo in colonna 2 */
#header li.woocommerce-mini-cart-item > a:not(.remove){
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: center;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var(--cbc-inchiostro, #17323D);
text-decoration: none;
}
#header li.woocommerce-mini-cart-item > a:not(.remove):hover{
color: var(--cbc-cobalto, #235267);
}
#header li.woocommerce-mini-cart-item > a:not(.remove) img{
position: static;
inset: auto;
float: none;
width: 56px;
height: 56px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
object-fit: contain;
}
ul.product_list_widget li {
min-height: 100px;
}
/* Quantità e prezzo: pill discreta invece del testo "1 ×" nudo */
#header .ux-mini-cart-qty{
padding-left: 70px;
margin: 0 !important;
margin-top: -6px !important;
}
#header .ux-mini-cart-qty .quantity{
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--cbc-inchiostro, #17323D);
opacity: 0.55;
}
#header .ux-mini-cart-qty .quantity .amount{
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
font-weight: 700;
opacity: 1;
color: var(--cbc-montepulciano, #6B2032);
}
/* --- Rimuovi: cerchietto flottante, stesso linguaggio di wishlist ------ */
#header li.woocommerce-mini-cart-item > a.remove{
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin: 0;
border: 0;
border-radius: 50%;
background: var(--cbc-calce, #EDEBE1);
color: var(--cbc-inchiostro, #17323D) !important;
font-size: 15px;
line-height: 1;
opacity: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
#header li.woocommerce-mini-cart-item > a.remove:hover,
#header li.woocommerce-mini-cart-item > a.remove:focus-visible{
background: var(--cbc-montepulciano, #6B2032);
color: #fff !important;
}
/* --- Footer: totale + azioni, sganciato dalla lista con la sua card --- */
#header .ux-mini-cart-footer{
margin: 4px 14px 14px;
padding: 16px;
border: 0;
border-radius: 16px;
background: #fff;
box-shadow: 0 2px 8px rgba(23, 50, 61, 0.06);
}
#header .woocommerce-mini-cart__total{
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 0 14px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
color: var(--cbc-inchiostro, #17323D);
border: none!important;
}
#header .woocommerce-mini-cart__total strong{
font-weight: 600;
}
#header .woocommerce-mini-cart__total .amount{
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 20px;
font-weight: 700;
color: var(--cbc-montepulciano, #6B2032);
}
#header .woocommerce-mini-cart__buttons{
display: flex;
flex-direction: column-reverse;
gap: 8px;
margin: 0;
}
#header .woocommerce-mini-cart__buttons .button{
width: 100%;
margin: 0;
min-height: unset;
padding: 13px 16px;
border: 0;
border-radius: 24px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
text-align: center;
text-decoration: none !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
#header .woocommerce-mini-cart__buttons .button.checkout{
background: #78adac;
color: #fff;
}
#header .woocommerce-mini-cart__buttons .button.checkout:hover{
background: #679392;
}
#header .woocommerce-mini-cart__buttons .button:not(.checkout){
background: var(--cbc-calce, #EDEBE1);
color: var(--cbc-inchiostro, #17323D);
}
#header .woocommerce-mini-cart__buttons .button:not(.checkout):hover{
background: var(--cbc-sand, #E5DFC8);
}
/* --- Carrello vuoto ------------------------------------------------------ */
#header .woocommerce-mini-cart__empty-message{
margin: 14px;
padding: 30px 18px;
border-radius: 16px;
background: #fff;
text-align: center;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
color: var(--cbc-inchiostro, #17323D);
opacity: 0.6;
}
@media (max-width: 479px){
#header .cart-item .nav-dropdown.nav-dropdown-default{
min-width: 0;
width: calc(100vw - 24px);
}
}
/* =========================================================================
MINI CART MOBILE — CIBICO
========================================================================= */
@media (max-width: 849px) {
/* ---------------------------------------------------------
PANNELLO
--------------------------------------------------------- */
#cart-popup {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background: var(--cbc-calce, #EDEBE1);
}
#cart-popup .cart-popup-inner {
display: flex;
flex-direction: column;
width: 100%;
height: 100dvh;
max-height: 100dvh;
padding: 0 !important;
overflow: hidden;
background: var(--cbc-calce, #EDEBE1);
}
/* ---------------------------------------------------------
HEADER DEL CARRELLO
--------------------------------------------------------- */
#cart-popup .cart-popup-title {
position: relative;
flex: 0 0 auto;
margin: 0;
padding: 22px 56px 15px;
background: var(--cbc-calce, #EDEBE1);
text-align: left;
z-index: 5;
}
#cart-popup .cart-popup-title .heading-font {
display: block;
font-family: var(--font-heading, 'Fraunces', serif);
font-size: 26px;
line-height: 1.15;
font-weight: 600;
text-transform: none !important;
color: var(--cbc-inchiostro, #17323D);
}
#cart-popup .cart-popup-title .is-divider {
display: none;
}
/* ---------------------------------------------------------
CONTENUTO WIDGET
--------------------------------------------------------- */
#cart-popup .widget_shopping_cart,
#cart-popup .widget_shopping_cart_content {
min-height: 0;
width: 100%;
margin: 0;
padding: 0;
}
#cart-popup .widget_shopping_cart {
display: flex;
flex: 1 1 auto;
overflow: hidden;
}
#cart-popup .widget_shopping_cart_content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* ---------------------------------------------------------
LISTA PRODOTTI SCROLLABILE
--------------------------------------------------------- */
#cart-popup ul.woocommerce-mini-cart {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding: 8px 14px 16px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
list-style: none;
scrollbar-width: thin;
scrollbar-color: var(--cbc-sand, #E5DFC8) transparent;
}
#cart-popup ul.woocommerce-mini-cart::-webkit-scrollbar {
width: 5px;
}
#cart-popup ul.woocommerce-mini-cart::-webkit-scrollbar-thumb {
background: var(--cbc-sand, #E5DFC8);
border-radius: 10px;
}
/* ---------------------------------------------------------
CARD PRODOTTO
--------------------------------------------------------- */
#cart-popup li.woocommerce-mini-cart-item {
position: relative;
min-height: 0 !important;
margin: 0;
padding: 12px 42px 12px 12px;
border: 0 !important;
border-radius: 14px;
background: #fff;
box-shadow: 0 2px 8px rgba(23, 50, 61, .055);
list-style: none;
}
#cart-popup li.woocommerce-mini-cart-item::after {
display: none;
}
/* ---------------------------------------------------------
IMMAGINE + TITOLO
--------------------------------------------------------- */
#cart-popup li.woocommerce-mini-cart-item > a:not(.remove) {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 12px;
align-items: center;
width: 100%;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
font-weight: 650;
line-height: 1.3;
color: var(--cbc-inchiostro, #17323D);
text-decoration: none;
}
#cart-popup li.woocommerce-mini-cart-item > a:not(.remove) img {
position: static !important;
float: none !important;
width: 58px;
height: 58px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
object-fit: contain;
background: #fff;
}
/* ---------------------------------------------------------
QUANTITÀ + PREZZO
--------------------------------------------------------- */
#cart-popup .ux-mini-cart-qty {
margin: -5px 0 0 !important;
padding-left: 70px;
}
#cart-popup .ux-mini-cart-qty .quantity {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 12px;
font-weight: 500;
color: var(--cbc-inchiostro, #17323D);
opacity: .55;
}
#cart-popup .ux-mini-cart-qty .amount {
font-size: 14px;
font-weight: 700;
color: var(--cbc-montepulciano, #6B2032);
opacity: 1;
}
/* ---------------------------------------------------------
RIMUOVI PRODOTTO
--------------------------------------------------------- */
#cart-popup li.woocommerce-mini-cart-item > a.remove {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0;
border: 0;
border-radius: 50%;
background: var(--cbc-calce, #EDEBE1);
color: var(--cbc-inchiostro, #17323D) !important;
font-size: 16px;
font-weight: 500;
line-height: 1;
opacity: 1;
}
#cart-popup li.woocommerce-mini-cart-item > a.remove:active {
background: var(--cbc-montepulciano, #6B2032);
color: #fff !important;
}
/* ---------------------------------------------------------
FOOTER FISSO IN BASSO
--------------------------------------------------------- */
#cart-popup .ux-mini-cart-footer {
flex: 0 0 auto;
margin: 0;
padding:
14px
14px
max(16px, env(safe-area-inset-bottom));
border: 0;
background: var(--cbc-calce, #EDEBE1);
box-shadow:
0 -12px 28px rgba(23, 50, 61, .06);
z-index: 10;
}
#cart-popup .ux-mini-cart-footer::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(23, 50, 61, .06);
}
/* Card bianca del footer */
#cart-popup .ux-mini-cart-footer {
position: relative;
}
#cart-popup .woocommerce-mini-cart__total,
#cart-popup .woocommerce-mini-cart__buttons {
position: relative;
}
#cart-popup .woocommerce-mini-cart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0;
padding: 17px 16px 15px;
border: 0 !important;
border-radius: 14px 14px 0 0;
background: #fff;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
color: var(--cbc-inchiostro, #17323D);
}
#cart-popup .woocommerce-mini-cart__total strong {
font-weight: 600;
}
#cart-popup .woocommerce-mini-cart__total .amount {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 21px;
font-weight: 700;
color: var(--cbc-montepulciano, #6B2032);
}
/* ---------------------------------------------------------
BOTTONI
--------------------------------------------------------- */
#cart-popup .woocommerce-mini-cart__buttons {
display: flex;
flex-direction: column-reverse;
gap: 8px;
margin: 0;
padding: 0 16px 16px;
border-radius: 0 0 14px 14px;
background: #fff;
}
#cart-popup .woocommerce-mini-cart__buttons .button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin: 0;
padding: 13px 16px;
border: 0 !important;
border-radius: 10px !important;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: .035em;
line-height: 1;
text-align: center;
text-transform: uppercase;
box-shadow: none !important;
}
/* Pagamento: CTA primaria */
#cart-popup .woocommerce-mini-cart__buttons .checkout {
background: #78adac;
color: #fff;
}
#cart-popup .woocommerce-mini-cart__buttons .checkout:active {
background: #679392;
}
/* Visualizza carrello: secondaria */
#cart-popup .woocommerce-mini-cart__buttons .button:not(.checkout) {
background: var(--cbc-calce, #EDEBE1);
color: var(--cbc-inchiostro, #17323D);
}
/* ---------------------------------------------------------
CARRELLO VUOTO
--------------------------------------------------------- */
#cart-popup .woocommerce-mini-cart__empty-message {
margin: 14px;
padding: 32px 20px;
border-radius: 14px;
background: #fff;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 14px;
text-align: center;
color: var(--cbc-inchiostro, #17323D);
}
}
/* =========================================================================
7. HOME
========================================================================= */
/* --- Sezione 1 --------------------------------------------------------- */
body.home .section1 p{
font-size: 19px;
line-height: normal;
max-width: 600px;
margin: 0 auto 30px;
font-weight: 500;
}
/* --- Sezione 2 --------------------------------------------------------- */
body.home .section2{ padding: 0 !important; }
body.home .section2 .col{ padding-bottom: 0 !important; }
body.home .section2 .right{ padding-right: 0; }
body.home .section2 .right .col-inner{
width: fit-content;
margin-left: auto;
margin-right: 0;
}
body.home .section2 .left{
display: flex;
align-items: center;
}
body.home .section2 .left h3{ margin: 0; }
body.home .section2 .left .icon-box-img{
margin-left: 0;
margin-right: auto;
}
body.home .section2 .left .icon-box-text{
max-width: fit-content;
margin-left: 0;
}
body.home .section2 .trusted-stars-service-widget .wrapper{
justify-content: flex-end !important;
}
/* --- Sezione 3 --------------------------------------------------------- */
body.home .section3 h2{
margin-bottom: 40px;
color: #70544f;
}
body.home .section3 h2::after{
content: "";
position: absolute;
left: 0;
right: -67px;
bottom: -8px;
margin: auto;
z-index: -1;
width: 350px;
height: 67px;
background: var(--cbc-marker-swoosh) no-repeat center / contain;
}
body.home .section3 .custom-link-with-arrow,
body.home .section3 .custom-link-with-arrow .text{ width: fit-content; }
body.home .section3 .custom-link a{
position: relative;
display: flex;
justify-content: center;
text-align: center;
}
body.home .section3 .custom-link a h3{
margin: 0;
font-size: 21px;
}
body.home .custom-link .icon-box{
position: relative;
display: inline-flex;
align-items: center;
transition: opacity var(--cbc-med) var(--cbc-ease),
transform var(--cbc-med) var(--cbc-ease);
}
body.home .custom-link .icon-box-text h3{
position: relative;
display: inline-block;
margin: 0;
}
/* Evidenziatore giallo: compositing GPU, niente z-index negativo */
body.home .custom-link .icon-box-text h3::after{
content: "";
position: absolute;
left: -3%;
right: -3%;
bottom: .1em;
height: .9em;
background-color: var(--cbc-marker);
opacity: 0;
z-index: -1;
transform: scaleX(.92) translateZ(0);
transform-origin: left center;
transition: opacity var(--cbc-med) ease-out,
transform var(--cbc-med) ease-out;
will-change: opacity, transform;
}
body.home .custom-link a.plain:hover .icon-box-text h3::after{
opacity: .7;
transform: scaleX(1) translateZ(0);
}
/* =========================================================================
8. CARD PRODOTTO
========================================================================= */
.product-small.box{
background: #fff;
border-radius: var(--cbc-r-lg);
box-shadow: none;
overflow: hidden;
transition: box-shadow var(--cbc-med) var(--cbc-ease),
transform var(--cbc-med) var(--cbc-ease);
border: 1px solid #edeae3;
}
/* --- Immagine ---------------------------------------------------------- */
.product-small .box-image{ aspect-ratio: 1 / 1; }
.product-small .box-image img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Badge sconto ------------------------------------------------------ */
.badge-container.absolute{
margin: 0;
top: 8px;
left: 8px;
}
.badge-container .badge-circle{
margin-left: 0;
width: 50px;
height: 30px;
}
.badge-container .badge-inner{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--cbc-cocoa) !important;
border-radius: var(--cbc-r-sm);
font-size: 16px;
font-weight: 700;
}
/* --- Wishlist ---------------------------------------------------------- */
.product-small .image-tools.show-on-hover{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.product-small .wishlist-button{
width: 44px;
height: 44px;
margin: 0;
border: none;
background: #fff;
box-shadow: unset !important;
}
.product-small .custom-wishlist-heart{
display: flex !important;
align-items: center;
justify-content: center;
}
.product-small .custom-wishlist-heart svg{
width: 36px;
height: 36px;
}
.product-small .wishlist-button svg path{
transition: fill var(--cbc-med) ease;
}
.product-small .wishlist-button:hover svg path,
.product-small .wishlist-button.wishlist-added path{
fill: #fff;
}
.product-small .wishlist-button.wishlist-added{
background: #e1306b;
}
/* --- Testo ------------------------------------------------------------- */
.box-text-products{ padding: 14px 16px 16px; }
.box-text-products .category{
font-size: 11px;
letter-spacing: .06em;
color: var(--cbc-ghost);
margin-bottom: 4px;
}
.product-small .product-title{
margin-bottom: 4px;
}
.product-small .product-title a{
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
font-size: 15px;
font-weight: 600;
line-height: normal;
}
/* --- Prezzo + formato -------------------------------------------------- */
.price-wrapper{
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.price-wrapper .price .amount{
color: var(--cbc-cocoa);
font-size: 17px;
font-weight: 700;
line-height: 1;
}
.price-wrapper .price del{
color: var(--cbc-ghost);
font-weight: 400;
opacity: 1;
margin-right: 4px;
}
.price-wrapper .price ins{ text-decoration: none; }
.price-wrapper .cibico-formato{
font-size: 16px;
font-weight: normal;
white-space: nowrap;
color: #000;
opacity: .4;
line-height: 1;
}
/* --- Bottone "Scegli" -------------------------------------------------- */
.add-to-cart-button{ margin-top: 4px; }
.add-to-cart-button .button{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding: 12px;
min-height: unset;
background: var(--cbc-teal);
border-color: var(--cbc-teal);
border-radius: 8px;
font-size: 16px;
font-weight: 600;
line-height: normal;
transition: background-color .2s ease, border-color .2s ease;
}
.add-to-cart-button .button:hover{
background: var(--cbc-teal-deep);
border-color: var(--cbc-teal-deep);
}
.add-to-cart-button .button::after{
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background: var(--cbc-cart) center / contain no-repeat;
}
/* --- Disponibilità ----------------------------------------------------- */
.box-image .out-of-stock-label{ display: none !important; }
.cibico-out-of-stock{
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
padding: 12px;
min-height: unset;
font-size: 16px;
font-weight: 600;
line-height: normal;
color: var(--cbc-alert);
}
.product-small .box-text .title-wrapper .category{
--cibico-stock-color: var(--cbc-stock-ok);
--cibico-stock-halo: rgba(75,139,107,.45);
overflow: visible;
padding-left: 8px;
margin-left: -8px;
}
.product-small.outofstock .box-text .title-wrapper .category,
.product-small.out-of-stock .box-text .title-wrapper .category{
--cibico-stock-color: var(--cbc-alert);
--cibico-stock-halo: rgba(184,11,11,.45);
}
.product-small .box-text .title-wrapper .category::before{
content: "";
position: relative;
top: -1px;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin-right: 7px;
border-radius: 50%;
background-color: var(--cibico-stock-color);
animation: cibico-stock-pulse 2.6s cubic-bezier(.25,.8,.35,1) infinite;
}
@keyframes cibico-stock-pulse{
0% { box-shadow: 0 0 0 0 var(--cibico-stock-halo); }
65%, 100% { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
}
/* =========================================================================
9. PAGINA PRODOTTO
========================================================================= */
.product-gallery-slider img{
background: #fff;
border-radius: 12px;
}
body.single-product .image-tools{ opacity: 1 !important; }
body.single-product .wishlist-button{ border: none; }
body.single-product .custom-wishlist-heart{
display: flex;
align-items: center;
justify-content: center;
}
body.single-product .custom-wishlist-heart svg{
width: 28px;
height: 28px;
}
/* =========================================================================
10. ARCHIVIO CATEGORIA
========================================================================= */
body.archive .category-page-title .page-title-inner{ min-height: 200px; }
body.archive .category-filtering{ display: none !important; }
body.archive .category-page-row{ padding-top: 0; }
body.archive .custom-category-header{
max-width: 1370px;
margin: 20px auto 0;
padding: 0 15px;
}
body.archive .custom-category-header h1{
font-size: clamp(28px, 4.2vw, 40px);
color: var(--cbc-cocoa);
}
/* =========================================================================
11. SLIDER
========================================================================= */
.row-slider .flickity-page-dots{
bottom: -10px !important;
}
.slider .flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button,
.slider:hover .flickity-prev-next-button {
opacity: 1!important;
}
.slider .flickity-prev-next-button svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.slider-nav-circle .flickity-prev-next-button:hover svg {
background: #000!important;
border-color: #000!important;
border-radius: 50px;
}
.slider .flickity-prev-next-button svg path,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.slider-nav-circle .flickity-prev-next-button:hover svg {
fill: #fff!important;
}
.flickity-prev-next-button .arrow,
.flickity-prev-next-button svg{
border-color: var(--cbc-line-soft) !important;
transition: border-color var(--cbc-med) ease, fill var(--cbc-med) ease;
}
.flickity-prev-next-button svg path{
fill: var(--cbc-line-soft) !important;
}
.flickity-prev-next-button:hover .arrow,
.flickity-prev-next-button:hover svg{
border-color: var(--cbc-teal) !important;
background: transparent !important;
}
.single-product .flickity-prev-next-button:hover .arrow,
.single-product .flickity-prev-next-button:hover svg {
background: #000!important;
}
/* =========================================================================
12. NEWSLETTER (Klaviyo)
========================================================================= */
#footer .newsletter{
padding-top: 60px;
padding-bottom: 60px;
}
#footer .newsletter .col{ padding-bottom: 0; }
#footer .newsletter h3{
font-size: clamp(28px, 4.2vw, 40px);
line-height: 1;
color: #fff;
margin-bottom: 10px;
}
#footer .newsletter p{
font-size: 19px;
line-height: normal;
color: #fff;
margin: 0;
}
.section.newsletter .klaviyo-form{
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.section.newsletter .klaviyo-form > div{ min-height: auto !important; }
.section.newsletter .klaviyo-form div[data-testid="form-component"]{
padding: 0 !important;
}
.section.newsletter .klaviyo-form div[data-testid="form-row"]{ gap: 10px; }
.section.newsletter .klaviyo-form input[name="email"]{
font-family: var(--cbc-font-body) !important;
height: 52px;
border: none;
border-radius: var(--cbc-r-sm);
}
.section.newsletter .klaviyo-form button{
padding: 0 20px !important;
font-family: var(--cbc-font-body);
transition: background var(--cbc-med) ease, color var(--cbc-med) ease;
}
.section.newsletter .klaviyo-form button:hover{
color: #fff !important;
background: #000 !important;
}
.section.newsletter .klaviyo-form .klaviyo-disclosure a{ color: var(--cbc-body); }
.section.newsletter .klaviyo-form .klaviyo-disclosure span,
.section.newsletter .klaviyo-form .klaviyo-disclosure a{
font-size: 13px !important;
}
/* =========================================================================
13. FOOTER
========================================================================= */
.custom_footer{ padding-bottom: 20px !important; }
.custom_footer .row{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
gap: 5%;
width: 100%;
}
.custom_footer .col1{ flex: 1.3 1 0; min-width: 0; }
.custom_footer .col2{ flex: 1.4 1 0; min-width: 0; }
.custom_footer .col3{ flex: 1 1 0; min-width: 0; }
.custom_footer .col4{ flex: 1 1 0; min-width: 0; }
.custom_footer .col1 .logo img{
max-width: 180px;
height: auto;
}
.custom_footer .col1 p{
color: var(--cbc-muted);
font-size: 15px;
line-height: 1.5;
margin-top: 30px;
}
.custom_footer .col1 .trusted-stars-service-widget .wrapper{
margin: 0 auto 0 0 !important;
}
.custom_footer .footer-col-title p{
color: var(--cbc-ink);
font-family: var(--cbc-font-display);
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
/* --- Menu footer ------------------------------------------------------- */
.cibico-footer-menu{
columns: 1;
column-gap: 40px;
list-style: none;
margin: 0;
padding: 0;
}
.cibico-footer-menu__item{
break-inside: avoid;
margin-bottom: 10px;
margin-left: 0 !important;
font-size: 15px;
color: var(--cbc-body);
line-height: 1.5;
}
.cibico-footer-menu__link{
text-decoration: none;
color: inherit;
transition: color var(--cbc-med) ease;
}
.cibico-footer-menu__link:hover{ color: var(--cbc-teal); }
.cibico-footer-menu__item.box-selezioni,
.cibico-footer-menu__item.offerte{
width: fit-content;
padding: 8px 16px;
border-radius: var(--cbc-r-pill);
background: var(--cbc-teal-soft);
color: var(--cbc-teal-ink);
font-weight: bold;
}
/* --- Contatti ---------------------------------------------------------- */
.cibico-footer-contatti__title{
font-family: var(--cbc-font-display);
font-weight: 700;
font-size: 22px;
margin: 0 0 24px;
color: #1a1a1a;
}
.cibico-footer-contatti__list{
list-style: none;
margin: 0;
padding: 0;
}
.cibico-footer-contatti__item{
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 20px;
margin-left: 0 !important;
font-size: 15px;
color: var(--cbc-body);
line-height: 1.4;
}
.cibico-footer-contatti__item:last-child{ margin-bottom: 0; }
.cibico-footer-contatti__icon{
flex-shrink: 0;
color: #8fb4b8;
margin-top: 2px;
}
.cibico-footer-contatti__item a{
color: inherit;
text-decoration: none;
transition: color var(--cbc-med) ease;
}
.cibico-footer-contatti__item a:hover{ color: var(--cbc-teal); }
/* --- Sub-footer -------------------------------------------------------- */
.sub-footer{
border-top: 1px solid var(--cbc-line);
border-bottom: 1px solid var(--cbc-line);
padding: 20px 0;
}
.sub-footer .col{ padding-bottom: 0 !important; }
.sub-footer p{
font-size: 15px;
line-height: 1.4;
color: var(--cbc-faint);
}
.sub-footer p strong{ color: var(--cbc-ink); }
.copyright-footer,
.footer-text{
color: var(--cbc-faint);
font-size: 12px;
max-width: 600px;
line-height: normal;
}
.absolute-footer{ padding-bottom: 30px !important; }
/* =========================================================================
Responsive — il footer a 4 colonne collassa invece di schiacciarsi
========================================================================= */
@media (max-width: 849px){
.custom_footer .row{ gap: 30px; }
.custom_footer .col1,
.custom_footer .col2,
.custom_footer .col3,
.custom_footer .col4{ flex: 1 1 100%; }
}
body.single-product #product-sidebar {
display: none!important;
}
body.single-product .product-summary .variations_button {
display: flex;
flex-wrap: nowrap;
}
body.single-product .product-summary .single_add_to_cart_button {
width: 100%;
background: #78adac;
color: #fff;
}
body.single-product .product-summary .yith-wcwl-add-to-wishlist {
display: none!important;
}
body.single-product .image-tools .wishlist-button.wishlist-added {
background-color: #e1306b;
border-color: #e1306b;
}
body.single-product .image-tools .wishlist-button.wishlist-added svg path {
fill: #fff;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex: 1 1 auto;
width: auto;
}
#yith-wcwl-popup-message {
border-radius: 12px;
padding: 30px;
box-shadow: 0 0 99999px 9999px rgb(0 0 0 / 40%);
border: none;
margin-left: -300px!important;
}
#yith-wcwl-message {
line-height: normal;
}
/* ==========================================================================
14. WISHLIST — YITH Wishlist card grid override
========================================================================== */
.wishlist_table {
border: none;
background: transparent;
box-shadow: none;
}
.wishlist_table thead {
display: none;
}
.wishlist_table tbody.wishlist-items-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
width: 100%;
}
/* Ogni riga diventa una card, stile allineato alle product card dello shop */
.wishlist_table tbody.wishlist-items-wrapper tr {
display: grid;
grid-template-columns: 1fr;
background: #fff;
border: 1px solid var(--cbc-sand, #E5DFC8);
border-radius: 14px;
padding: 0 0 16px;
overflow: hidden;
position: relative;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.wishlist_table tbody.wishlist-items-wrapper tr:hover {
box-shadow: 0 10px 26px rgba(23, 50, 61, 0.10);
transform: translateY(-2px);
}
.wishlist_table td {
display: block;
width: 100%;
padding: 0;
border: none;
text-align: left;
vertical-align: initial;
}
/* Ordine visivo: immagine → nome → prezzo → stock → CTA (rimuovi flottante sopra) */
.wishlist_table td.product-thumbnail { order: 1; }
.wishlist_table td.product-name { order: 2; }
.wishlist_table td.product-price { order: 3; }
.wishlist_table td.product-stock-status { order: 4; }
.wishlist_table td.product-add-to-cart { order: 5; }
.wishlist_table td.product-remove { order: 0; }
/* --- Immagine --- */
.wishlist_table td.product-thumbnail {
background: #fff;
aspect-ratio: 1 / 1;
overflow: hidden;
padding: 12px;
}
.wishlist_table td.product-thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* --- Rimuovi dalla wishlist: × semplice, flottante in alto a destra --- */
.wishlist_table td.product-remove {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: auto;
}
.wishlist_table td.product-remove div {
display: block;
}
.wishlist_table .remove_from_wishlist {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--cbc-inchiostro, #17323D);
font-size: 16px;
line-height: 1;
text-decoration: none;
box-shadow: 0 1px 4px rgba(23, 50, 61, 0.15);
transition: background 0.2s ease, color 0.2s ease;
}
.wishlist_table .remove_from_wishlist:hover {
background: var(--cbc-montepulciano, #6B2032);
color: #fff;
}
/* --- Nome prodotto --- */
.wishlist_table td.product-name {
padding: 4px 14px 0;
}
.wishlist_table td.product-name a {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--cbc-inchiostro, #17323D);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wishlist_table td.product-name a:hover {
color: var(--cbc-cobalto, #235267);
}
/* --- Prezzo --- */
.wishlist_table td.product-price {
padding: 8px 14px 0;
}
.wishlist_table td.product-price .woocommerce-Price-amount {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 15px;
color: var(--cbc-montepulciano, #6B2032);
}
.wishlist_table td.product-price .screen-reader-text {
display: none;
}
/* --- Disponibilità: badge discreto --- */
.wishlist_table td.product-stock-status {
padding: 6px 14px 0;
}
.wishlist_table .wishlist-in-stock {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #2F6B4F;
}
.wishlist_table .wishlist-in-stock::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #2F6B4F;
animation: cbc-stock-pulse 1.8s ease-in-out infinite;
}
@keyframes cbc-stock-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* --- CTA aggiungi/scegli: colore #78adac allineato alle product card --- */
.wishlist_table td.product-add-to-cart {
padding: 12px 14px 0;
}
.wishlist_table .add_to_cart_button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
text-align: center;
padding: 11px 16px;
border-radius: 24px;
background: #78adac;
color: #fff;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease;
}
.wishlist_table .add_to_cart_button:hover {
background: #679392;
}
.wishlist_table .add_to_cart_button.loading {
opacity: 0.6;
pointer-events: none;
}
/* --- Responsive --- */
@media (max-width: 600px) {
.wishlist_table tbody.wishlist-items-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.wishlist_table td.product-name a { font-size: 14px; }
}
@media (max-width: 380px) {
.wishlist_table tbody.wishlist-items-wrapper {
grid-template-columns: 1fr;
}
}
@media (max-width: 849px) {
.shop_table .product-remove a {
right: 10px!important;
left: unset!important;
}
}
/* ==========================================================================
14b. WISHLIST MOBILE — YITH Wishlist
========================================================================== */
.wishlist_table.wishlist_view.mobile {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.wishlist_table.wishlist_view.mobile > li {
background: #fff;
border: 1px solid var(--cbc-sand, #E5DFC8);
border-radius: 14px;
overflow: hidden;
position: relative;
padding: 0 0 14px;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.wishlist_table.wishlist_view.mobile > li:hover {
box-shadow: 0 10px 26px rgba(23, 50, 61, 0.10);
}
/* --- item-wrapper: immagine + nome + prezzo --- */
.wishlist_table.wishlist_view.mobile .item-wrapper {
display: flex;
flex-direction: column;
}
.wishlist_table.wishlist_view.mobile .product-thumbnail {
background: #fff;
aspect-ratio: 1 / 1;
overflow: hidden;
padding: 12px;
}
.wishlist_table.wishlist_view.mobile .product-thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.wishlist_table.wishlist_view.mobile .product-name {
padding: 4px 12px 0;
}
.wishlist_table.wishlist_view.mobile .product-name h3 {
margin: 0;
font-size: 14px;
line-height: 1.3;
}
.wishlist_table.wishlist_view.mobile .product-name a {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
color: var(--cbc-inchiostro, #17323D);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Prezzo: nasconde la label "Prezzo:" e la mini-tabella, mostra solo il valore */
.wishlist_table.wishlist_view.mobile .item-details-table {
width: 100%;
border: none;
}
.wishlist_table.wishlist_view.mobile .item-details-table tr {
display: flex;
padding: 6px 12px 0;
}
.wishlist_table.wishlist_view.mobile .item-details-table td.label {
display: none;
}
.wishlist_table.wishlist_view.mobile .item-details-table td.value {
padding: 0;
}
.wishlist_table.wishlist_view.mobile .item-details-table .woocommerce-Price-amount {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 14px;
color: var(--cbc-montepulciano, #6B2032);
}
.wishlist_table.wishlist_view.mobile .item-details-table .screen-reader-text {
display: none;
}
/* --- additional-info-wrapper: stock + CTA + rimuovi --- */
.wishlist_table.wishlist_view.mobile .additional-info-wrapper {
display: flex;
flex-direction: column;
}
/* Nasconde tabella stock di default, mostra solo il badge come nel resto del sito */
.wishlist_table.wishlist_view.mobile .additional-info {
width: 100%;
border: none;
}
.wishlist_table.wishlist_view.mobile .additional-info tr {
display: flex;
padding: 6px 12px 0;
}
.wishlist_table.wishlist_view.mobile .additional-info td.label {
display: none;
}
.wishlist_table.wishlist_view.mobile .additional-info td.value {
padding: 0;
}
.wishlist_table.wishlist_view.mobile .wishlist-in-stock {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #2F6B4F;
}
.wishlist_table.wishlist_view.mobile .wishlist-in-stock::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #2F6B4F;
animation: cbc-stock-pulse 1.8s ease-in-out infinite;
}
/* --- CTA aggiungi/scegli --- */
.wishlist_table.wishlist_view.mobile .product-add-to-cart {
padding: 10px 12px 0;
}
.wishlist_table.wishlist_view.mobile .add_to_cart_button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
padding: 10px 14px;
border-radius: 24px;
background: #78adac;
color: #fff;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease;
}
.wishlist_table.wishlist_view.mobile .add_to_cart_button:hover {
background: #679392;
}
/* --- Rimuovi: cestino flottante in alto a destra, sopra l'immagine --- */
.wishlist_table.wishlist_view.mobile .product-remove {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
}
.wishlist_table.wishlist_view.mobile .remove_from_wishlist {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--cbc-inchiostro, #17323D);
font-size: 12px;
text-decoration: none;
box-shadow: 0 1px 4px rgba(23, 50, 61, 0.15);
transition: background 0.2s ease, color 0.2s ease;
}
.wishlist_table.wishlist_view.mobile .remove_from_wishlist:hover {
background: var(--cbc-montepulciano, #6B2032);
color: #fff;
}
/* --- Una colonna sui viewport molto stretti --- */
@media (max-width: 380px) {
.wishlist_table.wishlist_view.mobile {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
15. WAITLIST — YITH Waiting List (account page)
========================================================================== */
.shop_table.my_account_waitlist {
border: none;
border-collapse: separate;
border-spacing: 0;
background: transparent;
box-shadow: none;
width: 100%;
}
.shop_table.my_account_waitlist thead {
display: none;
}
.shop_table.my_account_waitlist tbody {
display: flex;
flex-direction: column;
gap: 12px;
}
.shop_table.my_account_waitlist tr.waitlist {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
background: #fff;
border: 1px solid var(--cbc-sand, #E5DFC8);
border-radius: 14px;
padding: 14px 18px;
}
.shop_table.my_account_waitlist td {
display: block;
padding: 0;
border: none;
vertical-align: middle;
}
/* --- Prodotto: immagine + titolo --- */
.shop_table.my_account_waitlist td.waitlist-product {
flex: 1 1 320px;
min-width: 220px;
}
.shop_table.my_account_waitlist .product-info {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
padding-top: 0;
}
.shop_table.my_account_waitlist .product-image {
flex: none;
width: 56px;
height: 56px;
border-radius: 10px;
overflow: hidden;
background: transparent;
}
.shop_table.my_account_waitlist .product-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.shop_table.my_account_waitlist .product-title {
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 14px;
line-height: 1.35;
color: var(--cbc-inchiostro, #17323D);
}
.shop_table.my_account_waitlist .product-info:hover .product-title {
color: var(--cbc-cobalto, #235267);
}
/* --- Variazione --- */
.shop_table.my_account_waitlist td.waitlist-product-variation {
flex: 0 1 160px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 13px;
color: var(--cbc-inchiostro, #17323D);
opacity: 0.75;
}
.shop_table.my_account_waitlist td.waitlist-product-variation ul {
list-style: none;
margin: 0;
padding: 0;
}
/* --- Stato della giacenza: badge --- */
.shop_table.my_account_waitlist td.waitlist-product-status {
flex: 0 0 auto;
}
.shop_table.my_account_waitlist .out-of-stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--cbc-montepulciano, #6B2032);
background: #F7E9EC;
border-radius: 20px;
padding: 4px 12px;
}
.shop_table.my_account_waitlist .out-of-stock::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cbc-montepulciano, #6B2032);
}
/* Se torna disponibile, YITH usa in genere una classe diversa (es. .in-stock) */
.shop_table.my_account_waitlist .in-stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #2F6B4F;
background: #E7F3EC;
border-radius: 20px;
padding: 4px 12px;
}
.shop_table.my_account_waitlist .in-stock::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #2F6B4F;
animation: cbc-stock-pulse 1.8s ease-in-out infinite;
}
/* --- Azioni: abbandona lista — stesso stile pieno di AGGIUNGI/SCEGLI --- */
.shop_table.my_account_waitlist td.waitlist-actions {
flex: 0 0 auto;
margin-left: auto;
}
.shop_table.my_account_waitlist .leave-waitlist {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 20px;
border-radius: 24px;
border: none;
background: #78adac;
color: #fff;
font-family: var(--font-body, 'Work Sans', sans-serif);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease;
margin: 0;
}
.shop_table.my_account_waitlist .leave-waitlist:hover {
background: #679392;
}
/* --- Responsive: da riga a colonna sotto una certa larghezza --- */
@media (max-width: 640px) {
.shop_table.my_account_waitlist tr.waitlist {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.shop_table.my_account_waitlist td.waitlist-product,
.shop_table.my_account_waitlist td.waitlist-product-variation,
.shop_table.my_account_waitlist td.waitlist-product-status,
.shop_table.my_account_waitlist td.waitlist-actions {
width: 100%;
flex: none;
}
.shop_table.my_account_waitlist td.waitlist-actions {
margin-left: 0;
}
.shop_table.my_account_waitlist .leave-waitlist {
width: 100%;
}
}
@media (max-width: 849px) {
.touch-scroll-table {
box-shadow: none!important;
}
}
/* =========================================================================
16. CARRELLO
Solo CSS, markup WooCommerce/Flatsome invariato.
16.1 Barra spedizione gratuita
16.2 Tabella prodotti
16.3 Selettore quantità
16.4 Riga azioni
16.5 Cross-sell
16.6 Riepilogo totali
16.7 CTA checkout
16.8 Coupon — biglietto fustellato
16.9 Mobile
========================================================================= */
.woocommerce-cart .row-divided > .col + .col{ border-left: 0; }
.woocommerce-cart .cart-auto-refresh{ padding-top: 4px; }
.woocommerce-cart .cart-sidebar{ padding: 0; background: none; }
/* --- 16.1 Barra spedizione gratuita ------------------------------------ */
.woocommerce-cart .ux-free-shipping{
margin: 0 0 30px;
padding: 16px 20px 18px;
background: #fff;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-lg);
}
/* Niente flex: il nodo contiene testo libero + */
.woocommerce-cart .ux-free-shipping__notice{
position: relative;
margin: 0 0 12px;
padding-left: 34px;
font-size: 15px;
line-height: 1.4;
color: var(--cbc-body);
}
.woocommerce-cart .ux-free-shipping__notice::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background-color: var(--cbc-teal);
-webkit-mask: var(--cbc-truck) center / 24px no-repeat;
mask: var(--cbc-truck) center / 24px no-repeat;
}
/* Soglia raggiunta: Flatsome toglie il modificatore --threshold */
.woocommerce-cart .ux-free-shipping__notice:not(.ux-free-shipping__notice--threshold)::before{
-webkit-mask-image: var(--cbc-check);
mask-image: var(--cbc-check);
}
.woocommerce-cart .ux-free-shipping__notice .amount{
font-weight: 600;
color: var(--cbc-teal-ink);
}
.woocommerce-cart .ux-free-shipping__bar{
position: relative;
height: 8px;
background: var(--cbc-sand);
border-radius: var(--cbc-r-pill);
overflow: hidden;
}
.woocommerce-cart .ux-free-shipping__bar-progress{
position: relative;
display: block;
height: 100%;
background: var(--cbc-teal);
border-radius: var(--cbc-r-pill);
overflow: hidden;
transition: width .6s var(--cbc-ease);
}
.woocommerce-cart .ux-free-shipping__bar--striped .ux-free-shipping__bar-progress::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200%;
background-image: repeating-linear-gradient(45deg,
rgba(255,255,255,.26) 0 6px, transparent 6px 12px);
animation: cbc-cart-stripes 1.2s linear infinite;
}
/* 16.97px = passo esatto del pattern a 45°, il loop non scatta */
@keyframes cbc-cart-stripes{ to{ transform: translateX(-16.97px); } }
/* Soglia raggiunta: modificatore --success al posto di --threshold */
.woocommerce-cart .ux-free-shipping:has(.ux-free-shipping__notice--success){
background: var(--cbc-teal-wash);
border-color: var(--cbc-teal);
}
.woocommerce-cart .ux-free-shipping__notice--success{
color: var(--cbc-teal-ink);
font-weight: 500;
}
.woocommerce-cart .ux-free-shipping__notice--success ~ .ux-free-shipping__bar{
background: rgba(120,173,172,.22);
}
.woocommerce-cart .ux-free-shipping__notice--success ~ .ux-free-shipping__bar
.ux-free-shipping__bar-progress{
background: var(--cbc-teal);
}
/* Barra piena: niente righe, niente animazione */
.woocommerce-cart .ux-free-shipping__notice--success ~ .ux-free-shipping__bar
.ux-free-shipping__bar-progress::after{
content: none;
}
/* --- 16.2 Tabella prodotti ---------------------------------------------- */
.woocommerce-cart table.cart{
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
.woocommerce-cart table.cart thead th{
padding: 0 10px 14px;
border: 0;
border-bottom: 1px solid var(--cbc-sand);
background: none;
font-size: 11px;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--cbc-faint);
}
.woocommerce-cart table.cart th.product-remove{ width: 46px; }
.woocommerce-cart table.cart th.product-thumbnail{ width: 96px; }
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{ width: 112px; text-align: right; }
.woocommerce-cart table.cart th.product-quantity{ width: 138px; text-align: center; }
.woocommerce-cart table.cart td{
padding: 20px 10px;
border: 0;
background: none;
vertical-align: middle;
}
/* Il bordo sta sulla riga, non sulle celle: una riga = una linea sola */
.woocommerce-cart tr.cart_item{
border-bottom: 1px solid var(--cbc-sand);
transition: background-color var(--cbc-med) var(--cbc-ease);
}
.woocommerce-cart tr.cart_item:hover{ background: var(--cbc-cream); }
/* Miniatura */
.woocommerce-cart td.product-thumbnail{ padding-left: 0; padding-right: 0; }
.woocommerce-cart td.product-thumbnail a{ display: block; }
.woocommerce-cart td.product-thumbnail img{
width: 74px;
height: 74px;
padding: 6px;
object-fit: contain;
background: #fff;
border: 1px solid var(--cbc-sand);
border-radius: 12px;
transition: transform var(--cbc-med) var(--cbc-ease),
border-color var(--cbc-med) var(--cbc-ease);
}
.woocommerce-cart tr.cart_item:hover td.product-thumbnail img{
transform: translateY(-2px);
border-color: var(--cbc-teal);
}
/* Nome prodotto — niente display:flex sul td, o smette di stirarsi
all'altezza della riga e il suo bordo si sfalsa */
.woocommerce-cart td.product-name > a{
display: block;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--cbc-ink);
text-decoration: none;
transition: color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-cart td.product-name > a:hover{
color: var(--cbc-teal-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
/* "Disponibile su ordinazione": pill, non paragrafo nudo */
.woocommerce-cart p.backorder_notification{
display: inline-block;
margin: 9px 0 0;
padding: 3px 10px 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.3;
color: var(--cbc-saffron);
background: rgba(201,125,31,.12);
border-radius: var(--cbc-r-pill);
}
/* Prezzi: stessa scala cromatica delle card prodotto */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal{
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.woocommerce-cart td.product-price{
font-size: 14.5px;
color: var(--cbc-faint);
}
.woocommerce-cart td.product-subtotal{
font-size: 16px;
font-weight: 700;
color: var(--cbc-cocoa);
}
.woocommerce-cart .woocommerce-Price-currencySymbol{
margin-right: 1px;
font-size: .88em;
opacity: .75;
}
/* Rimuovi */
.woocommerce-cart td.product-remove{ padding-left: 0; padding-right: 0; }
.woocommerce-cart td.product-remove a.remove{
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-size: 17px;
line-height: 1;
color: var(--cbc-faint) !important;
background: transparent !important;
border: 1px solid var(--cbc-sand);
border-radius: 50%;
opacity: .55;
transition: color var(--cbc-fast) var(--cbc-ease),
background-color var(--cbc-fast) var(--cbc-ease),
border-color var(--cbc-fast) var(--cbc-ease),
opacity var(--cbc-fast) var(--cbc-ease),
transform var(--cbc-med) var(--cbc-ease);
}
.woocommerce-cart tr.cart_item:hover a.remove{ opacity: 1; }
.woocommerce-cart td.product-remove a.remove:hover{
color: #fff !important;
background: var(--cbc-alert) !important;
border-color: var(--cbc-alert);
transform: rotate(90deg);
}
/* --- 16.3 Selettore quantità -------------------------------------------- */
.woocommerce-cart td.product-quantity{ text-align: center; }
.woocommerce-cart .ux-quantity{
display: inline-flex;
align-items: center;
height: 42px;
background: #fff;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-pill);
overflow: hidden;
transition: border-color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-cart .ux-quantity:focus-within{ border-color: var(--cbc-teal); }
.woocommerce-cart .ux-quantity__button{
width: 38px;
height: 40px;
padding: 0;
margin: 0;
min-height: unset;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: var(--cbc-muted) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;
transition: background-color var(--cbc-fast) var(--cbc-ease),
color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-cart .ux-quantity__button:hover{
background: var(--cbc-teal-wash) !important;
color: var(--cbc-teal-ink) !important;
}
.woocommerce-cart .ux-quantity__button:disabled{
opacity: .3;
cursor: not-allowed;
}
.woocommerce-cart .ux-quantity input.qty{
width: 42px;
height: 40px;
padding: 0;
margin: 0;
text-align: center;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--cbc-ink);
background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;
-moz-appearance: textfield;
}
.woocommerce-cart .ux-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .ux-quantity input.qty::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* --- 16.4 Riga azioni ---------------------------------------------------- */
.woocommerce-cart td.actions{
padding: 26px 0 0 !important;
border-bottom: 0 !important;
}
.woocommerce-cart td.actions::after{ content: ""; display: table; clear: both; }
.woocommerce-cart .continue-shopping{ float: left; margin: 0; }
.woocommerce-cart a.button-continue-shopping{
display: inline-flex;
align-items: center;
height: 46px;
margin: 0;
padding: 0 22px;
min-height: unset;
font-size: 12px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--cbc-body) !important;
background: transparent !important;
border: 1px solid var(--cbc-sand) !important;
border-radius: var(--cbc-r-pill);
transition: background-color var(--cbc-fast) var(--cbc-ease),
border-color var(--cbc-fast) var(--cbc-ease),
color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-cart a.button-continue-shopping:hover{
background: var(--cbc-teal-wash) !important;
border-color: var(--cbc-teal) !important;
color: var(--cbc-teal-ink) !important;
}
/* Compare solo quando c'è davvero qualcosa da salvare */
.woocommerce-cart button[name="update_cart"]:disabled{ display: none !important; }
.woocommerce-cart button[name="update_cart"]{
float: right !important;
height: 46px;
margin: 0 !important;
padding: 0 22px;
min-height: unset;
font-size: 12px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: #fff !important;
background: var(--cbc-saffron) !important;
border: 0 !important;
border-radius: var(--cbc-r-pill);
}
/* --- 16.5 Cross-sell ----------------------------------------------------- */
/* Le card ereditano la sezione 8: qui solo spaziatura e titolo. */
.woocommerce-cart .cross-sells{
margin-top: 52px;
padding-top: 38px;
border-top: 1px solid var(--cbc-sand);
}
.woocommerce-cart .cross-sells > h2{
margin: 0 0 26px;
font-size: 24px;
line-height: 1.2;
color: var(--cbc-ink);
}
/* --- 16.6 Riepilogo totali ----------------------------------------------- */
/* --- 16.6 Riepilogo totali ----------------------------------------------- */
.woocommerce-cart .cart_totals{
padding: 22px 24px 26px;
background: #fff;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-lg);
}
/* Flatsome nasconde l'h2 e stampa una tabella di solo al suo posto:
invertiamo, così il titolo torna a essere un heading vero. */
.woocommerce-cart .cart_totals > table:not(.shop_table){ display: none !important; }
.woocommerce-cart .cart_totals > h2{
display: block !important;
margin: 0 0 6px;
margin-bottom: 0;
padding-bottom: 14px;
border-bottom: 1px solid var(--cbc-sand);
font-family: var(--cbc-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cbc-faint);
}
/* Un solo font in tutto il riepilogo: la gerarchia la fanno corpo e colore */
.woocommerce-cart .cart_totals table.shop_table{
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{
padding: 14px 0;
border: 0;
background: none;
font-family: var(--cbc-font-body);
font-size: 15px;
font-weight: 400;
vertical-align: middle;
}
.woocommerce-cart .cart_totals table.shop_table tr{
border-bottom: 1px solid var(--cbc-sand);
}
.woocommerce-cart .cart_totals table.shop_table tr:last-child{ border-bottom: 0; }
/* Subtotale */
.woocommerce-cart .cart-subtotal th{
text-align: left;
color: var(--cbc-muted);
}
.woocommerce-cart .cart-subtotal td{
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--cbc-body);
}
/* Spedizione: la tabella annidata torna in asse con le altre righe */
.woocommerce-cart .cart_totals td.shipping__inner{ padding: 14px 0; }
.woocommerce-cart .shipping__table,
.woocommerce-cart .shipping__table tbody{
display: block;
width: 100%;
margin: 0;
border: 0;
}
.woocommerce-cart .shipping__table tr{
display: flex;
align-items: baseline;
gap: 18px;
border: 0;
}
.woocommerce-cart .shipping__table th{
flex: 0 0 auto;
padding: 0;
text-align: left;
font-weight: 400;
color: var(--cbc-muted);
}
.woocommerce-cart .shipping__table td{
flex: 1 1 auto;
min-width: 0;
padding: 0;
text-align: right;
}
.woocommerce-cart ul#shipping_method{
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-cart .shipping__list_item{ margin: 0; }
/* flex-end, non space-between: con un metodo solo il valore restava a sinistra */
.woocommerce-cart .shipping__list_label{
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 8px;
margin: 0;
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--cbc-body);
padding: 0;
}
/* Spedizione gratuita = etichetta senza importo */
.woocommerce-cart .shipping__list_label:not(:has(.amount)){
color: var(--cbc-teal-ink);
}
/* Con più metodi attivi le righe diventano selezionabili */
.woocommerce-cart .shipping__list_item:has(input[type="radio"]){
margin-bottom: 6px;
padding: 11px 13px;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-md);
transition: border-color var(--cbc-fast) var(--cbc-ease),
background-color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-cart .shipping__list_item:has(input[type="radio"]:checked){
border-color: var(--cbc-teal);
background: var(--cbc-teal-wash);
}
.woocommerce-cart .shipping__list_item:has(input[type="radio"]) .shipping__list_label{
justify-content: space-between;
}
.woocommerce-cart .woocommerce-shipping-destination{
margin: 7px 0 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--cbc-faint);
margin-top: 0;
}
.woocommerce-cart .woocommerce-shipping-destination strong{
font-weight: 600;
color: var(--cbc-muted);
}
/* Totale: etichetta piccola in maiuscoletto, numero grande sulla stessa baseline */
.woocommerce-cart tr.order-total th,
.woocommerce-cart tr.order-total td{
padding-top: 20px!important;
padding-bottom: 0;
vertical-align: baseline;
}
.woocommerce-cart .order-total th{
text-align: left;
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cbc-muted);
}
.woocommerce-cart .order-total td{ text-align: right; }
.woocommerce-cart .order-total td strong{ font-weight: 400; }
.woocommerce-cart .order-total td strong .amount{
font-family: var(--cbc-font-body);
font-size: clamp(26px, 3.2vw, 32px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--cbc-cocoa);
}
/* --- 16.7 CTA checkout ---------------------------------------------------- */
.woocommerce-cart .wc-proceed-to-checkout{
margin: 0;
padding: 6px 0 0;
}
.woocommerce-cart a.checkout-button{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 56px;
margin: 0;
padding: 0 20px;
min-height: unset;
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
color: #fff !important;
background: var(--cbc-teal) !important;
border: 0 !important;
border-radius: 12px;
transition: background-color var(--cbc-med) var(--cbc-ease);
}
.woocommerce-cart a.checkout-button::after{
content: "";
width: 22px;
height: 13px;
flex-shrink: 0;
background: var(--cbc-arrow-right) no-repeat center / contain;
transition: transform var(--cbc-med) var(--cbc-ease);
}
.woocommerce-cart a.checkout-button:hover{
background: var(--cbc-teal-deep) !important;
}
.woocommerce-cart a.checkout-button:hover::after{ transform: translateX(5px); }
/* --- 16.8 Coupon — biglietto fustellato ----------------------------------- */
/* Le tacche sono una fustellatura vera (intersezione di due maschere), non
due cerchi colorati: non dipendono dal fondo pagina. Se il browser non
supporta mask-composite le maschere si sommano e il ticket resta una
card piena — degrado pulito, nessun artefatto. */
.woocommerce-cart .ux-cart-coupon{
margin: 22px 0 0;
max-width: 100%;
}
.woocommerce-cart .ux-cart-coupon .coupon{
--stub: 52px; /* altezza tallone = quota delle tacche */
--notch: 15px; /* raggio fustellatura */
--pad: 18px;
display: grid;
grid-template-columns: minmax(0, 1fr); /* argina il min-content del bottone */
gap: 12px;
width: 100%;
padding: 0 0 var(--pad);
background: #fff;
border: 1px solid var(--cbc-sand);
border-radius: 14px;
overflow: hidden;
-webkit-mask-image:
radial-gradient(circle var(--notch) at 0 var(--stub), transparent 96%, #000 100%),
radial-gradient(circle var(--notch) at 100% var(--stub), transparent 96%, #000 100%);
-webkit-mask-composite: source-in;
mask-image:
radial-gradient(circle var(--notch) at 0 var(--stub), transparent 96%, #000 100%),
radial-gradient(circle var(--notch) at 100% var(--stub), transparent 96%, #000 100%);
mask-composite: intersect;
}
/* Tallone a tutta larghezza: padding interno, nessun margine negativo */
.woocommerce-cart .ux-cart-coupon .widget-title{
height: var(--stub);
margin: 0;
padding: 0 var(--pad);
line-height: calc(var(--stub) - 2px);
font-family: var(--cbc-font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: #000;
background: linear-gradient(45deg, #d5cfc1, #edeae3);
border-bottom: 2px dashed rgba(255, 255, 255, .55);
}
.woocommerce-cart .ux-cart-coupon .widget-title i{
margin-right: 9px;
font-size: 14px;
vertical-align: -1px;
opacity: .9;
}
.woocommerce-cart .ux-cart-coupon input#coupon_code{
width: auto;
min-width: 0;
height: 48px;
margin: 0 var(--pad);
padding: 0 16px;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase; /* WooCommerce normalizza il case lato server */
color: var(--cbc-ink);
background: var(--cbc-cream) !important;
border: 1px dashed var(--cbc-line) !important;
border-radius: var(--cbc-r-md);
box-shadow: none !important;
transition: border-color var(--cbc-fast) var(--cbc-ease),
background-color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-cart .ux-cart-coupon input#coupon_code:focus{
border-style: solid !important;
border-color: var(--cbc-teal) !important;
background: #fff !important;
}
.woocommerce-cart .ux-cart-coupon input#coupon_code::placeholder{
font-weight: 400;
letter-spacing: .06em;
color: var(--cbc-faint);
opacity: .8;
}
.woocommerce-cart .ux-cart-coupon button[name="apply_coupon"]{
width: auto!important;
min-width: 0;
height: 48px;
margin: 0 var(--pad);
padding: 0 18px;
min-height: unset;
white-space: normal;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cbc-ink) !important;
background: transparent !important;
border: 1px solid var(--cbc-ink) !important;
border-radius: var(--cbc-r-md);
box-shadow: none !important;
transition: background-color var(--cbc-fast) var(--cbc-ease),
color var(--cbc-fast) var(--cbc-ease);
text-shadow: none!important;
}
.woocommerce-cart .ux-cart-coupon button[name="apply_coupon"]:hover{
color: #fff !important;
background: var(--cbc-ink) !important;
}
/* Barcode decorativo: eliminabile senza effetti collaterali */
.woocommerce-cart .ux-cart-coupon .coupon::after{
content: "";
height: 20px;
margin: -4px var(--pad) 0;
opacity: .16;
background-image: repeating-linear-gradient(90deg,
var(--cbc-ink) 0 2px, transparent 2px 5px,
var(--cbc-ink) 5px 6px, transparent 6px 11px,
var(--cbc-ink) 11px 14px, transparent 14px 17px);
}
/* --- 16.9 Mobile ---------------------------------------------------------- */
/* Sotto i 550px Flatsome attiva shop_table_responsive e stampa i data-title
via ::before: qui la riga diventa una griglia e le etichette spariscono. */
/* Sidebar stretta ma ancora affiancata */
@media (max-width: 1099px){
.woocommerce-cart table.cart th.product-thumbnail{ width: 84px; }
.woocommerce-cart td.product-thumbnail img{ width: 64px; height: 64px; }
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{ width: 96px; }
.woocommerce-cart table.cart th.product-quantity{ width: 126px; }
.woocommerce-cart table.cart td{ padding: 16px 8px; }
.woocommerce-cart .cart_totals{ padding: 20px 20px 24px; }
}
/* Le colonne Flatsome si impilano: la sidebar diventa un blocco a sé */
@media (max-width: 849px){
.woocommerce-cart .cart-collaterals{ margin-top: 36px; }
/* Sticky inutile a colonna singola e causa salti allo scroll */
.woocommerce-cart .is-sticky-column,
.woocommerce-cart .is-sticky-column__inner{
position: static !important;
top: auto !important;
transform: none !important;
}
.woocommerce-cart .ux-free-shipping{ margin-bottom: 24px; }
.woocommerce-cart .cross-sells{ margin-top: 42px; padding-top: 30px; }
.woocommerce-cart .cross-sells > h2{ font-size: 21px; }
.woocommerce-cart .order-total td strong .amount{ font-size: 30px; }
}
.woocommerce-cart .order-total th,
.woocommerce-cart .order-total td {
padding-top: 20px;
}
/* Sotto i 550px Flatsome attiva shop_table_responsive e stampa i data-title
via ::before: qui la riga diventa una griglia e le etichette spariscono. */
@media (max-width: 549px){
.woocommerce-cart table.cart thead{ display: none; }
.woocommerce-cart table.cart,
.woocommerce-cart table.cart tbody,
.woocommerce-cart table.cart tr{ display: block; width: 100%; }
.woocommerce-cart tr.cart_item{
display: grid;
grid-template-columns: 76px 1fr auto;
grid-template-areas:
"thumb name remove"
"thumb qty sub";
gap: 12px 14px;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--cbc-sand);
}
.woocommerce-cart tr.cart_item:hover{ background: none; }
.woocommerce-cart tr.cart_item td{
display: block !important;
padding: 0 !important;
border: 0 !important;
text-align: left !important;
}
.woocommerce-cart tr.cart_item td::before{
content: none !important;
display: none !important;
}
.woocommerce-cart td.product-thumbnail{ grid-area: thumb; }
.woocommerce-cart td.product-thumbnail img{ width: 76px; height: 76px; }
.woocommerce-cart td.product-name{ grid-area: name; align-self: end; }
.woocommerce-cart td.product-name > a{ font-size: 14px; }
.woocommerce-cart td.product-quantity{ grid-area: qty; align-self: start; }
.woocommerce-cart td.product-subtotal{
grid-area: sub;
align-self: start;
text-align: right !important;
font-size: 16px;
}
.woocommerce-cart td.product-price{ display: none !important; }
.woocommerce-cart .ux-quantity{ height: 38px; }
.woocommerce-cart .ux-quantity__button{ width: 34px; height: 36px; }
.woocommerce-cart .ux-quantity input.qty{ width: 36px; height: 36px; }
/* Annulla il right/left !important della regola globale a 849px */
.woocommerce-cart td.product-remove{
grid-area: remove;
align-self: start;
position: static !important;
}
.woocommerce-cart td.product-remove a.remove{
position: static !important;
right: auto !important;
left: auto !important;
top: auto !important;
opacity: 1;
}
.woocommerce-cart .mobile-product-price{
margin-top: 6px;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--cbc-faint);
}
.woocommerce-cart .ux-free-shipping{ padding: 14px 16px 16px; }
.woocommerce-cart .ux-free-shipping__notice{ font-size: 14px; padding-left: 32px; }
.woocommerce-cart td.actions{ padding-top: 22px !important; }
.woocommerce-cart .continue-shopping,
.woocommerce-cart a.button-continue-shopping{
float: none;
width: 100%;
justify-content: center;
}
.woocommerce-cart button[name="update_cart"]{
float: none !important;
width: 100%;
margin-top: 10px !important;
}
.woocommerce-cart .cart_totals{ padding: 20px 18px 22px; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{ padding: 12px 0; }
.woocommerce-cart a.checkout-button{ height: 54px; font-size: 15px; }
.woocommerce-cart .ux-cart-coupon .coupon{ --pad: 14px; }
}
/* Telefoni stretti: la miniatura lascia spazio al titolo */
@media (max-width: 399px){
.woocommerce-cart tr.cart_item{
grid-template-columns: 62px 1fr auto;
gap: 10px;
}
.woocommerce-cart td.product-thumbnail img{ width: 62px; height: 62px; }
.woocommerce-cart td.product-name > a{ font-size: 13.5px; }
.woocommerce-cart td.product-subtotal{ font-size: 15px; }
.woocommerce-cart .order-total td strong .amount{ font-size: 26px; }
.woocommerce-cart .cross-sells > h2{ font-size: 19px; }
}
/* Accessibilità */
.woocommerce-cart :is(a, button, input):focus-visible{
outline: 2px solid var(--cbc-teal);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
.woocommerce-cart *,
.woocommerce-cart *::before,
.woocommerce-cart *::after{
animation: none !important;
transition: none !important;
}
}
/* =========================================================================
17. CHECKOUT
Solo CSS, markup WooCommerce/Flatsome invariato.
17.1 Impianto e colonne
17.2 Griglia dei campi
17.3 Etichetta flottante
17.4 Select e select2
17.5 Checkbox e intestazioni di sezione
17.6 Riepilogo ordine
17.7 Metodi di pagamento
17.8 Campi carta Nexi
17.9 CTA e privacy
17.10 Responsive
========================================================================= */
/* --- 17.1 Impianto e colonne --------------------------------------------- */
/* La barra spedizione gratuita è uno strumento del carrello: al checkout
la decisione è presa e il totale dice già "Spedizione gratuita". */
.woocommerce-checkout .ux-free-shipping{ display: none !important; }
.woocommerce-checkout .checkout .large-7{ padding-right: 40px; }
/* Via il bordo Flatsome: la sidebar diventa la stessa card del carrello */
.woocommerce-checkout .checkout .large-5 > .col-inner.has-border{
border: 0;
padding: 0;
border-radius: 0;
}
.woocommerce-checkout .checkout-sidebar{
padding: 24px 24px 26px;
background: #fff;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-lg);
}
.woocommerce-checkout .checkout-sidebar.sm-touch-scroll{ overflow: visible; }
/* --- 17.2 Griglia dei campi ----------------------------------------------
12 colonne: immune al rimescolamento di classi di address-i18n.js,
che agisce su class ma non sugli id. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}
.woocommerce-checkout .form-row{
grid-column: span 12;
float: none !important;
width: auto !important;
margin: 0;
padding: 0;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{ grid-column: span 6; }
/* CAP / Città / Provincia su una riga sola */
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field{ grid-column: span 3; }
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field{ grid-column: span 5; }
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #shipping_state_field{ grid-column: span 4; }
/* Il campo nascosto da JS non deve lasciare il buco nella griglia */
.woocommerce-checkout .form-row[style*="display: none"],
.woocommerce-checkout .form-row[style*="display:none"]{ display: none !important; }
/* --- 17.3 Etichetta flottante --------------------------------------------
L'etichetta precede l'input nel DOM, quindi niente selettore fratello:
la condizione sta su .form-row con :has(). */
.woocommerce-checkout .form-row{ position: relative; }
.woocommerce-checkout .woocommerce-input-wrapper{ display: block; width: 100%; }
.woocommerce-checkout .form-row > label{
position: absolute;
left: 15px;
right: 15px;
top: 18px;
z-index: 1;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 15px;
font-weight: 400;
line-height: 1.2;
color: var(--cbc-faint);
pointer-events: none;
transition: top var(--cbc-fast) var(--cbc-ease),
font-size var(--cbc-fast) var(--cbc-ease),
color var(--cbc-fast) var(--cbc-ease);
}
/* Woo segna già i facoltativi: l'asterisco sui required è ridondante */
.woocommerce-checkout .form-row > label .required{ display: none; }
.woocommerce-checkout .form-row > label .optional{ font-size: .9em; opacity: .8; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select{
width: 100%;
margin: 0;
font-family: var(--cbc-font-body);
font-size: 15px;
color: var(--cbc-ink);
background: #fff;
border: 1px solid var(--cbc-line);
border-radius: var(--cbc-r-md);
box-shadow: none;
transition: border-color var(--cbc-fast) var(--cbc-ease),
box-shadow var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-checkout .form-row input.input-text{
height: 58px;
padding: 22px 15px 6px;
}
.woocommerce-checkout .form-row textarea{
min-height: 110px;
padding: 26px 15px 10px;
line-height: 1.5;
resize: vertical;
}
/* Il placeholder resta invisibile finché il campo non è a fuoco: su via e
appartamento address-i18n.js ripristina il placeholder da data-placeholder
e si sovrapporrebbe all'etichetta a riposo. */
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder{
color: transparent;
transition: color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-checkout .form-row input.input-text:focus::placeholder,
.woocommerce-checkout .form-row textarea:focus::placeholder{
color: var(--cbc-faint);
opacity: .75;
}
/* Etichetta in alto: campo a fuoco, campo compilato, oppure select */
.woocommerce-checkout .form-row:has(input.input-text:focus) > label,
.woocommerce-checkout .form-row:has(input.input-text:not(:placeholder-shown)) > label,
.woocommerce-checkout .form-row:has(textarea:focus) > label,
.woocommerce-checkout .form-row:has(textarea:not(:placeholder-shown)) > label,
.woocommerce-checkout .form-row:has(select) > label{
top: 8px;
font-size: 11px;
letter-spacing: .04em;
color: var(--cbc-muted);
}
.woocommerce-checkout .form-row:has(:focus) > label{ color: var(--cbc-teal-ink); }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus{
outline: 0;
border-color: var(--cbc-teal);
box-shadow: 0 0 0 3px var(--cbc-teal-wash);
}
/* Stati di validazione (classi aggiunte da checkout.js) */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection{
border-color: var(--cbc-alert) !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid > label{ color: var(--cbc-alert); }
.woocommerce-checkout .form-row.woocommerce-validated input.input-text{
border-color: var(--cbc-stock-ok);
}
/* --- 17.4 Select e select2 ------------------------------------------------ */
.woocommerce-checkout .form-row select{
height: 58px;
padding: 24px 40px 6px 14px;
-webkit-appearance: none;
appearance: none;
background-image: var(--cbc-chevron-down);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
}
.woocommerce-checkout .select2-container{ width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single{
height: 58px;
background: #fff;
border: 1px solid var(--cbc-line);
border-radius: var(--cbc-r-md);
}
.woocommerce-checkout .select2-container .select2-selection__rendered{
padding: 26px 40px 0 0;
font-size: 15px;
line-height: 1.4;
color: var(--cbc-ink);
}
.woocommerce-checkout .select2-container .select2-selection__arrow{
height: 56px;
right: 8px;
}
.woocommerce-checkout .select2-container--open .select2-selection--single{
border-color: var(--cbc-teal);
box-shadow: 0 0 0 3px var(--cbc-teal-wash);
}
.select2-dropdown{
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-md);
box-shadow: var(--cbc-shadow-pop);
overflow: hidden;
}
.select2-results__option--highlighted[aria-selected]{
background: var(--cbc-teal) !important;
}
/* --- 17.5 Checkbox e intestazioni di sezione ------------------------------ */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading{
margin: 0 0 20px;
font-family: var(--cbc-font-display);
font-size: 21px;
line-height: 1.2;
color: var(--cbc-ink);
}
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{ margin-top: 34px; }
.woocommerce-checkout #order_review_heading{ font-size: 19px; }
/* Riga a checkbox: fattura, spedizione a indirizzo diverso */
.woocommerce-checkout #billing_checkbox_field,
.woocommerce-checkout h3#ship-to-different-address{
margin: 0;
padding: 15px 16px;
background: var(--cbc-cream);
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-md);
font-family: var(--cbc-font-body);
font-size: 15px;
font-weight: 500;
color: var(--cbc-body);
}
.woocommerce-checkout h3#ship-to-different-address{ margin: 30px 0 0; }
.woocommerce-checkout #billing_checkbox_field label.checkbox,
.woocommerce-checkout h3#ship-to-different-address label{
display: flex;
align-items: center;
gap: 11px;
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
}
/* --- Checkbox e radio ridisegnati -----------------------------------------
La spunta è un background-image, non un ::after: gli pseudo-elementi sugli
non sono affidabili tra browser. */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"]{
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
background: #fff;
border: 1.5px solid var(--cbc-line);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-position: center;
transition: background-color var(--cbc-fast) var(--cbc-ease),
border-color var(--cbc-fast) var(--cbc-ease),
box-shadow var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-checkout input[type="checkbox"]{ border-radius: 6px; }
.woocommerce-checkout input[type="radio"]{ border-radius: 50%; }
.woocommerce-checkout input[type="checkbox"]:hover,
.woocommerce-checkout input[type="radio"]:hover{
border-color: var(--cbc-teal);
}
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout input[type="radio"]:checked{
background-color: var(--cbc-teal);
border-color: var(--cbc-teal);
}
.woocommerce-checkout input[type="checkbox"]:checked{
background-image: var(--cbc-tick);
background-size: 15px;
}
/* Pallino interno: un gradiente radiale, non un pseudo-elemento */
.woocommerce-checkout input[type="radio"]:checked{
background-image: radial-gradient(circle, #fff 0 3.5px, transparent 3.6px);
}
.woocommerce-checkout input[type="checkbox"]:focus-visible,
.woocommerce-checkout input[type="radio"]:focus-visible{
outline: 0;
box-shadow: 0 0 0 3px var(--cbc-teal-wash);
}
/* La riga fattura è marcata .tablecell da Fattura24: annulla il display */
.woocommerce-checkout #billing_checkbox_field.tablecell{ display: block; }
.woocommerce-checkout .shipping_address{ margin-top: 18px; }
/* --- 17.6 Riepilogo ordine ------------------------------------------------ */
.woocommerce-checkout table.woocommerce-checkout-review-order-table{
width: 100%;
margin: 0 0 4px;
border: 0;
border-collapse: collapse;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{
padding: 13px 0;
border: 0;
background: none;
font-family: var(--cbc-font-body);
font-size: 14.5px;
font-weight: 400;
vertical-align: middle;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{
padding: 0 0 10px;
border-bottom: 1px solid var(--cbc-sand);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cbc-faint);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total{
text-align: right;
}
.woocommerce-checkout tr.cart_item{
border-bottom: 1px solid var(--cbc-sand);
}
.woocommerce-checkout td.product-name{
padding-right: 14px !important;
line-height: 1.4;
color: var(--cbc-body);
}
.woocommerce-checkout strong.product-quantity{
display: inline-block;
margin-left: 4px;
padding: 1px 8px 2px;
font-size: 12px;
font-weight: 600;
color: var(--cbc-muted);
background: var(--cbc-sand);
border-radius: var(--cbc-r-pill);
white-space: nowrap;
}
.woocommerce-checkout td.product-total{
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--cbc-body);
}
/* Totali: stessa gerarchia della sidebar carrello */
.woocommerce-checkout tfoot tr{ border-bottom: 1px solid var(--cbc-sand); }
.woocommerce-checkout tfoot tr:last-child{ border-bottom: 0; }
.woocommerce-checkout tfoot .cart-subtotal th{
text-align: left;
font-weight: 400;
color: var(--cbc-muted);
}
.woocommerce-checkout tfoot .cart-subtotal td{
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.woocommerce-checkout .shipping__table,
.woocommerce-checkout .shipping__table tbody{
display: block;
width: 100%;
margin: 0;
border: 0;
}
.woocommerce-checkout .shipping__table tr{
display: flex;
align-items: baseline;
gap: 18px;
border: 0;
}
.woocommerce-checkout .shipping__table th{
flex: 0 0 auto;
padding: 0;
text-align: left;
font-weight: 400;
color: var(--cbc-muted);
}
.woocommerce-checkout .shipping__table td{
flex: 1 1 auto;
min-width: 0;
padding: 0;
text-align: right;
}
.woocommerce-checkout ul#shipping_method{ margin: 0; padding: 0; list-style: none; }
.woocommerce-checkout .shipping__list_item{ margin: 0; }
.woocommerce-checkout .shipping__list_label{
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 8px;
margin: 0;
font-size: 14.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--cbc-body);
}
.woocommerce-checkout .shipping__list_label:not(:has(.amount)){
color: var(--cbc-teal-ink);
}
.woocommerce-checkout .shipping__list_item:has(input[type="radio"]){
margin-bottom: 6px;
padding: 11px 13px;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-md);
}
.woocommerce-checkout .shipping__list_item:has(input[type="radio"]:checked){
border-color: var(--cbc-teal);
background: var(--cbc-teal-wash);
}
.woocommerce-checkout .shipping__list_item:has(input[type="radio"]) .shipping__list_label{
justify-content: space-between;
}
.woocommerce-checkout tfoot tr.order-total th,
.woocommerce-checkout tfoot tr.order-total td{
padding-top: 18px;
padding-bottom: 0;
vertical-align: baseline;
}
.woocommerce-checkout tfoot .order-total th{
text-align: left;
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cbc-muted);
}
.woocommerce-checkout tfoot .order-total td{ text-align: right; }
.woocommerce-checkout tfoot .order-total td strong{ font-weight: 400; }
.woocommerce-checkout tfoot .order-total td strong .amount{
font-family: var(--cbc-font-body);
font-size: clamp(24px, 3vw, 30px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--cbc-cocoa);
}
.woocommerce-checkout .woocommerce-Price-currencySymbol{
margin-right: 1px;
font-size: .88em;
opacity: .75;
}
/* --- 17.7 Metodi di pagamento -------------------------------------------- */
.woocommerce-checkout #payment{
margin-top: 26px;
padding: 0;
background: none;
border-radius: 0;
}
.woocommerce-checkout ul.wc_payment_methods{
margin: 0 0 20px;
padding: 0;
border: 0;
list-style: none;
}
.woocommerce-checkout li.wc_payment_method{
margin: 0 0 8px;
padding: 0;
border: 1px solid var(--cbc-sand);
border-radius: var(--cbc-r-md);
background: #fff;
overflow: hidden;
transition: border-color var(--cbc-fast) var(--cbc-ease),
background-color var(--cbc-fast) var(--cbc-ease);
}
.woocommerce-checkout li.wc_payment_method:has(input:checked){
border-color: var(--cbc-teal);
background: var(--cbc-teal-wash);
}
.woocommerce-checkout li.wc_payment_method > label{
display: flex !important;
align-items: center;
gap: 11px;
margin: 0;
padding: 15px 16px;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
color: var(--cbc-body);
cursor: pointer;
}
/* Dimensioni e aspetto arrivano dal blocco generale in 17.5 */
.woocommerce-checkout li.wc_payment_method > input[type="radio"]{
position: absolute;
margin: 15px 0 0 16px;
}
.woocommerce-checkout li.wc_payment_method > label{ padding-left: 48px; }
.woocommerce-checkout li.wc_payment_method > label img{
max-height: 22px;
width: auto;
margin: 0 0 0 2px;
}
.woocommerce-checkout .payment_box{
margin: 0;
padding: 0 16px 16px 48px;
background: none !important;
border-radius: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--cbc-muted);
}
.woocommerce-checkout .payment_box::before{ display: none !important; }
.woocommerce-checkout .payment_box p{ margin: 0; font-size: 13.5px; }
.woocommerce-checkout .nexixpay-loghi-container{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.woocommerce-checkout .nexixpay-loghi-container .img-container img{
height: 24px;
width: auto;
display: block;
}
/* --- 17.8 Campi carta Nexi (iframe: si può stilare solo il contenitore) --- */
.woocommerce-checkout #wc-xpay_build-cc-form{
margin: 14px 0 0;
padding: 0;
border: 0;
}
.woocommerce-checkout .build-field-row{
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.woocommerce-checkout .build-field-row > div{ flex: 1 1 0; min-width: 0; }
.woocommerce-checkout .build-field-row > div:empty{ display: none; }
.woocommerce-checkout .iframe-field{
width: 100%;
height: 52px;
border: 1px solid var(--cbc-line);
border-radius: var(--cbc-r-md);
background: #fff;
}
.woocommerce-checkout .npg-build-error-msg-container:not(:empty){
margin-top: 8px;
padding: 10px 12px;
font-size: 13px;
color: var(--cbc-alert);
background: rgba(184,11,11,.07);
border-radius: var(--cbc-r-sm);
}
/* --- 17.9 CTA e privacy --------------------------------------------------- */
.woocommerce-checkout .form-row.place-order{
margin: 0;
padding: 0;
}
.woocommerce-checkout #place_order{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 58px;
margin: 0;
padding: 0 20px;
min-height: unset;
font-family: var(--cbc-font-body);
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
color: #fff !important;
background: var(--cbc-teal) !important;
border: 0 !important;
border-radius: 12px;
text-shadow: none !important;
transition: background-color var(--cbc-med) var(--cbc-ease);
}
.woocommerce-checkout #place_order:hover:not(:disabled){
background: var(--cbc-teal-deep) !important;
}
/* Nexi lo disabilita finché la carta non è valida: dev'essere leggibile
e riconoscibile come "non ancora", non come bottone rotto. */
.woocommerce-checkout #place_order:disabled{
color: var(--cbc-faint) !important;
background: var(--cbc-sand) !important;
cursor: not-allowed;
}
.woocommerce-checkout .woocommerce-privacy-policy-text{
margin-top: 16px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p{
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--cbc-faint);
}
.woocommerce-checkout .woocommerce-privacy-policy-text a{
color: var(--cbc-teal-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.woocommerce-checkout .blockUI.blockOverlay{ background: #fff !important; }
/* --- 17.10 Responsive ----------------------------------------------------- */
@media (max-width: 1099px){
.woocommerce-checkout .checkout .large-7{ padding-right: 24px; }
.woocommerce-checkout .checkout-sidebar{ padding: 20px; }
}
@media (max-width: 849px){
.woocommerce-checkout .checkout .large-7{ padding-right: 15px; }
.woocommerce-checkout .checkout .large-5{ margin-top: 34px; }
.woocommerce-checkout .is-sticky-column,
.woocommerce-checkout .is-sticky-column__inner{
position: static !important;
top: auto !important;
transform: none !important;
}
}
@media (max-width: 549px){
/* Una colonna: Nome/Cognome e CAP/Città/Provincia si impilano */
.woocommerce-checkout .form-row,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #shipping_state_field{ grid-column: span 12; }
.woocommerce-checkout .checkout-sidebar{ padding: 18px 16px 20px; }
.woocommerce-checkout #customer_details h3{ font-size: 19px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{
font-size: 14px;
padding: 11px 0;
}
.woocommerce-checkout .build-field-row{ flex-wrap: wrap; }
.woocommerce-checkout .build-field-row > div{ flex: 1 1 100%; }
.woocommerce-checkout #place_order{ height: 56px; font-size: 15px; }
}
.mobile-sidebar,
.mobile-sidebar .sidebar-menu,
.mobile-sidebar .sidebar-menu .nav-sidebar {
height: 100%!important;
}
.mobile-sidebar .sidebar-menu .nav-sidebar {
justify-content: space-between;
background: #f8f5f1;
}
.mobile-sidebar .sidebar-menu {
padding: 0;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .header-search-form,
.mobile-sidebar .sidebar-menu .nav-sidebar .menu-item,
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right {
margin-bottom: 0;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_nav_position_text_top {
margin-top: auto;
padding: 0;
border: 0;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_nav_position_text_top img {
min-width: 350px;
}
.mobile-sidebar .sidebar-menu .header-search-form {
border: none;
}
.mobile-sidebar .sidebar-menu .header-search-form .search-field {
background: #ededec;
border-color: #dcdddd;
border-radius: 6px !important;
}
.mobile-sidebar .sidebar-menu .header-search-form .ux-search-submit {
border-radius: 4px;
width: 32px;
height: 32px;
min-width: unset;
min-height: unset;
display: flex;
justify-content: center;
align-items: center;
right: -6px;
}
.mobile-sidebar .sidebar-menu .header-search-form .icon-search {
font-size: 11pt;
margin: 0;
margin-top: 3px;
}
.mobile-sidebar .sidebar-menu .menu-item a {
color: #1c2537;
font-weight: 600;
font-size: 11pt;
letter-spacing: 0;
padding-left: 10px !important;
}
.mobile-sidebar .sidebar-menu ul:not(.sub-menu) > .menu-item {
max-width: calc(100% - 40px);
margin-right: auto;
margin-left: auto;
border-color: #e3e1e0;
border-width: 1.5px;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right {
border: none;
background: #e7edea;
max-width: calc(100% - 40px);
border-radius: 10px;
margin-top: 10px;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right .produttori-selezionati {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right svg {
width: 36px;
height: 36px;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right svg path {
stroke: #77acab;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right .produttori-selezionati .text {
color: #636b6f;
line-height: 1.3;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .html_topbar_right .produttori-selezionati .text strong {
color: #000;
}
.nav-sidebar.nav-vertical>li.menu-item.active,
.nav-sidebar.nav-vertical>li.menu-item:hover {
background: #ededec;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .menu-item a:hover {
color: #77acab;
transform: translateX(2px)
}
.mobile-sidebar .sidebar-menu .nav-sidebar .menu-item button {
opacity: 1;
}
.mobile-sidebar .sidebar-menu .nav-sidebar .menu-item .icon-angle-down {
color: #000;
}
/* Contatti */
body.page-id-651 .pre-title h4 {
font-family: 'Noto Sans';
letter-spacing: 2px;
font-size: 12pt;
color: #70544f;
text-align: center;
font-weight: 700;
}
body.page-id-651 h1 {
text-align: center;
font-size: 30pt;
margin-bottom: 0px;
}
body.page-id-651 .section1 p {
text-align: center;
margin: 0;
}
body.page-id-651 .section1 .row.contacts::after {
display: none!important;
}
body.page-id-651 .section1 .row.contacts {
display: flex;
max-width: 800px;
gap: 20px;
justify-content: space-between;
margin: auto;
padding: 0 20px;
}
body.page-id-651 .section1 .row.contacts > .col {
max-width: calc(50% - 10px);
flex-basis: calc(50% - 10px);
border: 1px solid #efeae6;
background: #fff;
border-radius: 12px;
padding: 20px;
}
body.page-id-651 .section1 .icon-box h5 {
margin: 0;
font-weight: 400;
}
body.page-id-651 .section1 .icon-box-img .icon-inner {
background: #e5eae4;
padding: 16px;
border-radius: 50px;
}
body.page-id-651 .section1 .icon-box-text {
text-align: left;
}
body.page-id-651 .section1 .icon-box h5,
body.page-id-651 .section1 .icon-box h3,
body.page-id-651 .section1 .icon-box p {
text-align: left;
}
body.page-id-651 .section1 .icon-box h3,
body.page-id-651 .section1 .icon-box p {
margin-bottom: 0;
}
body.page-id-651 .section1 .icon-box p {
color: #403e3d;
font-size: 11pt;
letter-spacing: -.2px;
}
body.page-id-651 .section1 .icon-box a {
font-weight: 600;
margin-top: 15px;
display: flex;
margin-bottom: 5px;
}
body.page-id-651 .section2 form {
max-width: 400px;
margin: auto;
background: #fff;
border: 1px solid #efeae6;
border-radius: 12px;
padding: 30px 30px;
}
body.page-id-651 .section2 form input,
body.page-id-651 .section2 form textarea {
background: #faf5f1;
box-shadow: none;
border-radius: 4px;
border-color: #ece7e2;
font-weight: normal;
padding: 20px;
line-height: normal;
}
body.page-id-651 .section2 form .wpcf7-submit {
background: #6ba09d;
padding: 15px 30px;
min-height: unset;
line-height: 1;
border: none;
margin-top: 10px;
margin-bottom: 0;
width: 230px;
font-weight: 600;
letter-spacing: 0;
}
.arrow-link {
display: inline-flex;
align-items: center;
gap: 10px;
}
.arrow-link::after {
content: "";
width: 22px;
height: 12px;
flex: 0 0 22px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7h20M15 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7h20M15 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s ease;
}
.arrow-link:hover::after {
transform: translateX(3px);
}
body.home .section5 .scopri-i-prodotti {
color: #000;
}
body.home .section5 .scopri-i-prodotti span {
font-family: 'Fraunces';
font-size: 14pt;
color: #000;
letter-spacing: -.5px;
}
.woocommerce-checkout .woocommerce-table--order-details .woocommerce-table__product-name a {
color: #333;
transition: color 0.3s ease;
}
.woocommerce-checkout .woocommerce-table--order-details .woocommerce-table__product-name a:hover {
color: #111;
transition: color 0.3s ease;
}
.required {
color: #cc0e0e;
font-weight: normal;
margin-left: 2px;
}
.font-homemade-apple h1,
.font-homemade-apple h2,
.font-homemade-apple h3,
.font-homemade-apple h4,
.font-homemade-apple h5 {
font-family: 'Homemade Apple', cursive!important;
}
.page-id-659 .section2,
.page-id-659 .section3,
.page-id-659 .section4 {
max-width: 980px;
margin: auto;
}
.page-id-659 .section3 h2 {
color: #000;
}
.page-id-659 .font-homemade-apple h3 {
font-size: 30pt;
margin-bottom: 0;
line-height: 1;
}
.page-id-659 .section3 h2 {
color: #70544f;
margin-top: 20px;
}
@media (max-width: 1085px) {
.home-sub-products .col {
flex-basis: 34%!important;
max-width: 34%!important;
}
}
@media (max-width: 800px) {
.home-sub-products .col {
flex-basis: 100%!important;
max-width: 100%!important;
}
}
@media (max-width: 785px) {
body.page-id-651 .section1 .row.contacts > .col {
max-width: 360px;
flex-basis: 100%;
margin: auto;
}
}
/* Mobile */
@media (max-width: 768px) {
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select{ font-size: 16px; }
body.home .section1 .text-box {
width: 80%!important;
}
body h1 {
font-size: 26pt!important;
}
.button.scegli-la-tua-box span {
font-size: 16px;
}
body.home .section2 .left .icon-box-img {
margin: 0;
}
body.home .custom-link .icon-box {
text-align: center;
margin: auto;
display: flex;
justify-content: center;
}
body.home .section2 .right .col-inner {
margin: auto;
}
body.home .section2 .left {
margin-top: 15px;
margin-bottom: -16px;
}
body.home .section3 h2::after {
right: -47px;
bottom: -16px;
width: 250px;
height: 67px;
}
body.home .section3 .come-funziona {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
justify-content: flex-start !important;
padding: 0 20px;
-ms-overflow-style: none;
scrollbar-width: none;
}
body.home .section3 .come-funziona h3 {
line-height: 1;
}
body.home .section3 .come-funziona::-webkit-scrollbar {
display: none;
}
body.home .flickity-slider > .product-small {
max-width: 300px!important;
}
body.home .flickity-viewport {
margin: 0 40px;
}
.slider-nav-outside.slider-nav-circle .previous,
.slider-nav-outside.slider-nav-circle .next {
display: none!important;
}
.product-small .box-image img {
padding: 10px;
}
#footer .newsletter .col {
padding-right: 30px;
padding-left: 30px;
}
.klaviyo-form > div > div {
flex-direction: column!important;
}
.section.newsletter .klaviyo-form div[data-testid="form-component"] {
margin: 0!important;
}
.section.newsletter .klaviyo-form button {
width: 100%!important;
}
#footer .newsletter p {
line-height: 1!important;
}
#footer .newsletter {
padding-bottom: 100px!important;
}
.custom_footer .col1,
.custom_footer .col2,
.custom_footer .col3,
.custom_footer .col4 {
max-width: 100%;
padding: 0 30px;
}
.sub-footer .col {
padding-right: 30px !important;
padding-left: 30px !important;
}
.trusted-stars-service-widget .wrapper {
margin-right: auto!important;
}
#cart-popup .return-to-shop {
display: none!important;
}
.row-slider .flickity-prev-next-button {
display: none!important;
}
}
@media (max-width: 549px){
.woocommerce-cart table.cart tr.cart_item > td.product-price {
display: none !important;
}
.woocommerce-cart table.cart,
.woocommerce-cart table.cart tbody{
display:block;
width:100%;
}
.woocommerce-cart table.cart thead{
display:none;
}
.woocommerce-cart table.shop_table_responsive tr td::before{
content:none !important;
display:none !important;
}
/* CARD PRODOTTO */
.woocommerce-cart table.cart tr.cart_item{
position:relative;
display:grid !important;
grid-template-columns: 78px minmax(0,1fr) auto;
grid-template-areas:
"thumb name remove"
"thumb qty subtotal";
column-gap:12px;
row-gap:10px;
width:100%;
margin:0 0 12px;
padding:12px 12px;
background:#fff;
border:1px solid var(--cbc-sand);
border-radius:16px;
box-sizing:border-box;
}
.woocommerce-cart table.cart tr.cart_item:hover{
background:#fff;
}
.woocommerce-cart table.cart tr.cart_item > td{
display:block !important;
width:auto !important;
min-width:0;
margin:0;
padding:0 !important;
border:0 !important;
background:transparent;
text-align:left;
}
/* IMMAGINE */
.woocommerce-cart table.cart td.product-thumbnail{
grid-area:thumb;
align-self:start;
}
.woocommerce-cart table.cart td.product-thumbnail a{
display:block;
}
.woocommerce-cart table.cart td.product-thumbnail img{
display:block;
width:78px;
height:78px;
margin:0;
padding:6px;
object-fit:contain;
background:#fff;
border:1px solid var(--cbc-sand);
border-radius:12px;
}
/* NOME */
.woocommerce-cart table.cart td.product-name{
grid-area:name;
align-self:start;
padding:2px 0 0 !important;
}
.woocommerce-cart table.cart td.product-name > a{
display:block;
padding-right:6px;
font-size:14px;
font-weight:600;
line-height:1.3;
color:var(--cbc-ink);
}
/* PREZZO MOBILE FLATSOME */
.woocommerce-cart .mobile-product-price{
display:block !important;
margin-top:5px;
font-size:12px;
line-height:1.25;
color:var(--cbc-faint);
}
.woocommerce-cart .mobile-product-price .amount{
font-size:13px;
font-weight:600;
color:var(--cbc-cocoa);
}
.woocommerce-cart table.cart td.product-price{
display:none !important;
}
/* DISPONIBILE SU ORDINAZIONE */
.woocommerce-cart p.backorder_notification{
display:inline-block;
margin:6px 0 0;
padding:3px 8px 4px;
font-size:9px;
letter-spacing:.05em;
line-height:1.2;
}
/* QUANTITÀ */
.woocommerce-cart table.cart td.product-quantity{
grid-area:qty;
align-self:end;
justify-self:start;
}
.woocommerce-cart .ux-quantity{
height:34px;
}
.woocommerce-cart .ux-quantity__button{
width:32px;
height:32px;
font-size:14px;
}
.woocommerce-cart .ux-quantity input.qty{
width:34px;
height:32px;
font-size:14px;
}
/* SUBTOTALE */
.woocommerce-cart table.cart td.product-subtotal{
grid-area:subtotal;
align-self:center;
justify-self:end;
text-align:right;
font-size:15px;
font-weight:700;
line-height:1;
color:var(--cbc-cocoa);
white-space:nowrap;
}
.woocommerce-cart table.cart td.product-subtotal::before{
content:none !important;
}
/* REMOVE */
.woocommerce-cart table.cart td.product-remove{
grid-area:remove;
position:static !important;
align-self:start;
justify-self:end;
width:auto !important;
}
.woocommerce-cart table.cart td.product-remove a.remove{
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
margin:0;
border:0;
border-radius:50%;
background:var(--cbc-calce, #EDEBE1) !important;
color:var(--cbc-faint) !important;
font-size:16px;
line-height:1;
opacity:.85;
}
/* AZIONI SOTTO TABELLA */
.woocommerce-cart table.cart tr:last-child:not(.cart_item){
display:block;
}
}