/* ===========================
BB Cart Page + Sticky ATC + Bottom Sheet
=========================== */
/* ===========================
CART PAGE (full page, mobile-first)
=========================== */
.bb-cart-page {
max-width: 600px;
margin: 0 auto;
padding: 0 var(--bb-gutter) var(--bb-section-padding);
}
/* Header: Back + Title */
/* [NEW-239] QUESTA riga resta: e' la prima della pagina, quella che stacca
"INDIETRO / IL TUO CARRELLO" dalla merce. Le altre quattro sono state
tolte (righe fra gli articoli, sopra il totale, sopra e dentro "Acquista
con serenita'"): cinque righe orizzontali in una pagina che ha un articolo e
un totale la dividevano in fette, invece di dividerla in due. */
.bb-cart-page__header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 0;
border-bottom: var(--bb-line-width) solid var(--bb-line);
margin-bottom: 0;
}
.bb-cart-page__back {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--bb-small);
color: var(--bb-fg);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: opacity var(--bb-transition-fast);
}
.bb-cart-page__back:hover {
opacity: 0.6;
}
.bb-cart-page__title {
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
flex: 1;
}
/* Empty state */
.bb-cart-page__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 60px 0;
text-align: center;
}
.bb-cart-page__empty svg {
opacity: 0.3;
}
.bb-cart-page__empty p {
font-size: var(--bb-body);
color: var(--bb-muted);
margin: 0;
}
/* [NEW-193] Due classi, non una: sulla pagina carrello INGLESE si carica il
kit di Elementor (post-6.css), e `.elementor-kit-6 a` (0,1,1) batteva
`.bb-cart-page__shop-link` (0,1,0) — il bottone veniva nero su nero, cioe'
invisibile. `.bb-cart-page .bb-cart-page__shop-link` fa 0,2,0 e passa
davanti senza !important. Il link sta sempre dentro .bb-cart-page. */
.bb-cart-page .bb-cart-page__shop-link {
display: inline-block;
padding: 14px 32px;
font-size: var(--bb-body);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
color: var(--bb-bg);
background: var(--bb-black);
transition: opacity var(--bb-transition-fast);
}
.bb-cart-page__shop-link:hover {
opacity: 0.85;
}
/* Cart items (page context) */
.bb-cart-page__items {
display: flex;
flex-direction: column;
}
/* [NEW-239] Senza la riga sotto ogni articolo, a separarli restano i 24px sopra
e i 24px sotto: 48px fra una borsa e l'altra, piu' dello spazio che c'era
prima fra il testo e la riga. C'era anche una regola gemella per l'ultimo
articolo (`:last-child`) che la rimetteva, per chiudere l'elenco in basso:
tolta anche quella, se no l'ultimo restava l'unico sottolineato.
⚠ Cancellare la dichiarazione NON bastava, e l'ho visto misurando: la riga
ricompariva sotto il primo articolo. La disegna `.bb-cart-item` in
offcanvas.css, che e' la riga del PANNELLO del carrello e vale anche qui
(con `:last-child` che la toglie all'ultima, ed e' per questo che ne restava
una sola). Quindi si spegne, non si omette. Nel pannello resta: la consegna
parla della pagina. */
.bb-cart-page__items .bb-cart-item--page {
grid-template-columns: 100px 1fr;
gap: 16px;
padding: 24px 0;
border-bottom: 0;
}
.bb-cart-page__items .bb-cart-item__image {
width: 100px;
height: 130px;
}
/* Totals box */
/* ===========================================================================
[NEW-192] IL DISORDINE DEL CARRELLO PIENO NON ERA IL BORDO
Fabio ha chiesto di togliere il bordo attorno al riepilogo. Il bordo va
tolto, ma non era lui a fare il disordine: misurando la pagina, il blocco
dei prodotti era largo 523px mentre i suoi fratelli 844, e coupon e totali
partivano alla STESSA altezza dei prodotti invece che sotto.
La causa e' del tema padre:
.woocommerce-cart-form { float: left; width: 62% }
e' il carrello classico di WooCommerce a due colonne — form a sinistra,
totali a destra. Ma il nostro carrello e' a COLONNA UNICA (i totali stanno
dentro la pagina, non in un `.cart-collaterals` a fianco: quello lo
togliamo in cart.php). Cosi' la form si stringe al 62% e galleggia, e i
fratelli che vengono dopo le si affiancano nello spazio rimasto. Il bordo
nero del riepilogo ci passava sopra, e da li' l'impressione di caos.
Togliere solo il bordo avrebbe nascosto la sovrapposizione, non risolta.
=========================================================================== */
.bb-cart-page .woocommerce-cart-form {
float: none;
width: 100%;
}
.bb-cart-page__totals {
margin-top: 24px;
/* Niente riquadro: il riepilogo non e' una scheda a se', e' la coda della
colonna.
[NEW-239] Qui c'era scritto che lo stacco lo faceva "la righina sottile di
.bb-cart-page__total-row qui sotto". Quella righina non c'e' piu': adesso
lo stacco lo fanno i 24px di margine di questo blocco piu' i 28px sopra il
totale. Il commento e' aggiornato e non lasciato a indicare una regola che
non esiste: e' il tipo di bugia che fa perdere mezz'ora a chi legge. */
padding: 0;
border: none;
}
.bb-cart-page__total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 16px;
margin-top: 12px;
/* [NEW-239] QUI C'ERA la riga sopra "TOTALE": restano i 28px (12+16). */
}
/* Actions */
.bb-cart-page__actions {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.bb-cart-page__checkout {
display: block;
background: var(--bb-black);
color: var(--bb-bg) !important;
text-align: center;
padding: 16px 24px;
font-size: var(--bb-body);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: opacity var(--bb-transition-fast);
}
.bb-cart-page__checkout:hover {
opacity: 0.85;
}
/* Confidence section on cart page */
.bb-cart-page .bb-cart-confidence {
margin-top: 32px;
}
/* [NEW-239] Le ultime due righe della pagina: quella sopra "ACQUISTA CON
SERENITA'" e quelle fra le voci che si aprono.
Sono schermate su .bb-cart-page e non tolte dove il blocco e' definito
(offcanvas.css) perche' lo stesso blocco sta anche nel pannello del carrello
e nella scheda prodotto: la consegna parla della PAGINA, e togliere la riga
in tre posti quando ne e' stato chiesto uno non e' zelo, e' cambiare due
schermate che nessuno ha guardato.
Lo spazio resta: i 20px di padding sopra il titolo restano dov'erano, cosi'
il blocco si stacca come prima senza che niente si sposti. */
.bb-cart-page .bb-cart-confidence {
border-top: 0;
}
.bb-cart-page .bb-cart-confidence__item {
border-bottom: 0;
}
/* Desktop: wider layout */
@media (min-width: 768px) {
.bb-cart-page {
max-width: 900px;
padding-top: 20px;
}
.bb-cart-page__items .bb-cart-item--page {
grid-template-columns: 120px 1fr;
}
.bb-cart-page__items .bb-cart-item__image {
width: 120px;
height: 150px;
}
}
/* ===========================
MOBILE STICKY ADD-TO-CART BAR
Fixed bottom bar on product pages (mobile only)
=========================== */
/* Layout: meta (name+price) left | ATC button right — single row */
.bb-sticky-atc {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 250;
background: var(--bb-bg);
border-top: var(--bb-line-width) solid var(--bb-line);
display: none;
flex-direction: row;
align-items: stretch;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.bb-sticky-atc.is-visible {
transform: translateY(0);
}
.bb-sticky-atc__meta {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px var(--bb-gutter);
}
.bb-sticky-atc__name {
font-size: var(--bb-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bb-sticky-atc__price {
font-size: var(--bb-small);
font-weight: 400;
color: var(--bb-muted);
margin-top: 2px;
}
.bb-sticky-atc__actions {
flex: 0 0 auto;
display: flex;
}
.bb-sticky-atc__btn {
padding: 0 28px;
background: var(--bb-fg) !important;
color: #fff !important;
font-family: "Jost", sans-serif;
font-size: var(--bb-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
cursor: pointer;
white-space: nowrap;
transition: opacity var(--bb-transition-fast);
}
.bb-sticky-atc__btn:hover {
opacity: 0.85;
}
/* Show only on mobile */
@media (max-width: 767px) {
.bb-sticky-atc {
display: flex;
}
}
/* ===========================
MOBILE ADD-TO-CART BOTTOM SHEET
Confirmation after adding to cart (mobile only)
=========================== */
.bb-bottom-sheet {
position: fixed;
inset: 0;
z-index: 500;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.bb-bottom-sheet.is-open {
pointer-events: auto;
opacity: 1;
}
.bb-bottom-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
.bb-bottom-sheet__panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--bb-bg);
border-radius: 16px 16px 0 0;
padding: 12px var(--bb-gutter) 32px;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
max-height: 80vh;
overflow-y: auto;
}
.bb-bottom-sheet.is-open .bb-bottom-sheet__panel {
transform: translateY(0);
}
/* Handle bar */
.bb-bottom-sheet__handle {
display: flex;
justify-content: center;
padding: 8px 0 16px;
}
.bb-bottom-sheet__handle-bar {
width: 36px;
height: 4px;
background: var(--bb-line);
border-radius: 2px;
}
/* Close button */
.bb-bottom-sheet__close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
color: var(--bb-fg);
cursor: pointer;
padding: 4px;
transition: opacity var(--bb-transition-fast);
}
.bb-bottom-sheet__close:hover {
opacity: 0.6;
}
/* Title */
.bb-bottom-sheet__title {
font-size: var(--bb-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 20px;
}
/* Product row */
.bb-bottom-sheet__product {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
margin-bottom: 24px;
}
.bb-bottom-sheet__image {
width: 80px;
height: 100px;
overflow: hidden;
background: #f5f5f5;
}
.bb-bottom-sheet__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bb-bottom-sheet__details {
display: flex;
flex-direction: column;
gap: 4px;
}
.bb-bottom-sheet__name {
font-size: var(--bb-body);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.bb-bottom-sheet__variant {
font-size: var(--bb-small);
color: var(--bb-muted);
}
.bb-bottom-sheet__price {
font-size: var(--bb-body);
font-weight: 500;
margin-top: 4px;
}
/* Actions */
.bb-bottom-sheet__actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.bb-bottom-sheet__btn {
display: block;
text-align: center;
padding: 16px 24px;
font-size: var(--bb-body);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: opacity var(--bb-transition-fast);
cursor: pointer;
border: none;
}
.bb-bottom-sheet__btn--primary {
background: var(--bb-black);
color: var(--bb-bg) !important;
}
.bb-bottom-sheet__btn:hover {
opacity: 0.85;
}
.bb-bottom-sheet__link {
display: block;
text-align: center;
font-size: var(--bb-small);
color: var(--bb-fg);
text-decoration: underline;
text-underline-offset: 3px;
padding: 8px;
transition: opacity var(--bb-transition-fast);
}
.bb-bottom-sheet__link:hover {
opacity: 0.6;
}
/* Only show bottom sheet on mobile/tablet */
@media (min-width: 992px) {
.bb-bottom-sheet {
display: none !important;
}
}
/* ===================================================================
[NEW-156] IL CODICE SCONTO
Nel disegno non c'e'. Ma i codici si usano — 62 attivi, i piu' battuti
con decine di usi a testa — e toglierlo per fedelta' al disegno
vorrebbe dire far perdere sconti a chi ce li ha.
Quindi sta, ma sta zitto: una riga di testo sottolineata, chiusa, come
la riga delle tasse qui accanto. Chi non ha un codice non ci fa caso;
chi ce l'ha la apre e trova il campo. E' il modo di tenere una cosa
utile senza farne una vetrina.
=================================================================== */
.bb-cart-page__coupon {
margin: 0 0 18px;
border: none;
}
.bb-cart-page__coupon-trigger {
display: inline-flex;
align-items: center;
font-size: var(--bb-tiny);
color: var(--bb-muted);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
list-style: none;
}
/* la freccina di sistema non serve: la riga e' gia' un invito */
.bb-cart-page__coupon-trigger::-webkit-details-marker { display: none; }
.bb-cart-page__coupon-trigger::marker { content: ''; }
.bb-cart-page__coupon-trigger:hover {
color: var(--bb-fg);
}
.bb-cart-page__coupon-form {
display: flex;
gap: 8px;
margin-top: 12px;
}
.bb-cart-page__coupon-input {
flex: 1;
min-width: 0;
padding: 10px 12px;
border: var(--bb-line-width) solid var(--bb-line);
border-radius: 0;
background: var(--bb-bg);
font-size: var(--bb-small);
color: var(--bb-fg);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bb-cart-page__coupon-input:focus {
outline: none;
border-color: var(--bb-fg);
}
/* Il bottone: contorno, non pieno. Il nero pieno su questa pagina e' uno
solo — "Procedi al checkout" — e due neri vicini si contendono l'occhio.
La classe raddoppiata serve a passare davanti a .elementor-kit-6 button,
che dipinge di nero ogni bottone del sito. */
.bb-cart-page__coupon-apply,
.bb-cart-page__coupon-apply.bb-cart-page__coupon-apply {
flex: 0 0 auto;
padding: 10px 18px;
background: transparent;
background-color: transparent;
color: var(--bb-fg);
border: var(--bb-line-width) solid var(--bb-fg);
border-radius: 0;
box-shadow: none;
font-size: var(--bb-tiny);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--bb-transition-fast), color var(--bb-transition-fast);
}
.bb-cart-page__coupon-apply:hover,
.bb-cart-page__coupon-apply.bb-cart-page__coupon-apply:hover {
background-color: var(--bb-fg);
color: var(--bb-bg);
}
/* [NEW-158] "Acquista con serenità" sulla PAGINA carrello.
Nel pannello quel titolo e' una scrittina di servizio, e 10px vanno
bene. Sulla pagina no: nel disegno del telefono (CARRELLO.xd, artboard
I-PHONE_CART) "Shop with confidence" e' 15px di peso pieno, ed e' il
titolo di una sezione, non un'etichetta.
Due classi bastano a passare davanti a .elementor-kit-6 h4 , che
altrimenti ci rimette Cormorant Garamond a 24px. */
.bb-cart-page .bb-cart-confidence__title {
font-family: "Jost", sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--bb-fg);
margin: 0 0 18px;
}
/* ===================================================================
[NEW-156] I CORPI DEL CARRELLO TELEFONO, PRESI DALL'ARTBOARD
Dal CARRELLO.xd, artboard I-PHONE_CART (disegnata a 3x: i valori qui
sono gia' riportati alla scala vera). Misurato prima quanto eravamo
lontani, voce per voce, invece di ritoccare a sentimento:
indietro 13 → 10 era piu' grande del titolo del disegno
titolo 20 → 15 un h1, quindi lo gonfiava .elementor-kit-6 h1
nome 13 → 15 la cosa piu' importante era la piu' piccola
spedizione 12 → 15
totale 16 → 17
checkout 13 → 15
Il nome del prodotto era piu' piccolo del prezzo e della scritta del
bottone: in un carrello la prima cosa da riconoscere e' cosa ci hai
messo dentro.
Solo da 767px in giu': l'artboard e' quella del telefono, e sul
desktop questa pagina non e' disegnata da nessuna parte — si arriva
dal pannello, che ha il suo.
=================================================================== */
@media (max-width: 767px) {
/* anche questa raddoppiata: e' un , e nel kit di Elementor gli
hanno un corpo loro che batte la classe singola. */
.bb-cart-page__back,
.bb-cart-page__back.bb-cart-page__back {
font-size: 10px;
}
/* classe raddoppiata: il titolo e' un