/* ===========================
   BB Offcanvas CSS
   Elegant slide-in transitions from right to left
   =========================== */

/* ===========================
   OVERLAY
   =========================== */
.bb-offcanvas-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0.5s !important; /* delay visibility:hidden until after opacity fades */
  z-index: 9998 !important; /* just below offcanvas panels */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bb-offcanvas-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0s !important; /* visibility:visible immediately */
}

/* ===========================
   OFFCANVAS PANEL
   =========================== */
.bb-offcanvas {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 480px; /* fallback for older browsers */
  width: min(480px, 85vw);
  max-width: 85vw;
  height: 100% !important;
  background: #fff !important;
  background: var(--bb-bg, #fff) !important;
  transform: translateX(100%) !important;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0.5s !important; /* delay visibility:hidden until after transform completes */
  z-index: 9999 !important; /* high z-index to ensure visibility */
  display: flex !important;
  flex-direction: column;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
  will-change: transform;
  overflow: hidden;
}

.bb-offcanvas.is-active {
  transform: translateX(0) !important;
  visibility: visible !important;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0s !important; /* visibility:visible immediately */
}

/* Content fade-in animation when panel opens */
.bb-offcanvas__header,
.bb-offcanvas__body {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease 0s, transform 0.4s ease 0s;
}

.bb-offcanvas.is-active .bb-offcanvas__header {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.bb-offcanvas.is-active .bb-offcanvas__body {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

/* ===========================
   OFFCANVAS HEADER
   =========================== */
.bb-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* GLB-16: titoli nascosti → la X resta in alto a destra */
  padding: 20px var(--bb-gutter);
  /* [NEW-203] Niente filo sotto l'intestazione, su TUTTI i pannelli.
     Era gia' stato tolto due volte un pannello alla volta — MENU-01 sul menu,
     PDP-16 sui dettagli prodotto, dove il commento spiegava di essersi
     limitato a quel pannello perche' questa regola e' condivisa e stava in un
     file di un'altra sessione. Fabio l'ha ora chiesto ovunque, quindi si
     toglie QUI e le due deroghe spariscono: una regola sola invece di una per
     pannello, e chi ne aggiunge uno nuovo non se la ritrova addosso.
     Il padding resta: cambia 1px di altezza, non l'impaginato. */
}

/* GLB-16: via i titoli grandi dagli offcanvas destri (search, carrello, filtri,
   personalizzazione, guida taglie, waitlist...). Nascosti VISIVAMENTE ma lasciati
   nel DOM per gli screen reader e per il JS del carrello (che ne aggiorna il testo). */
.bb-offcanvas__title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* B3 (2026-08-25): ECCEZIONE — il carrello ri-mostra il suo titolo perche veicola il
   feedback dinamico "Aggiunto al carrello". Piccolo e pulito; header torna space-between. */
#bb-cart-offcanvas .bb-offcanvas__header {
  justify-content: space-between;
}
#bb-cart-offcanvas .bb-offcanvas__title {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  /* [NEW-157] La prima delle due intestazioni del pannello ("Aggiunto al
     carrello" / "Il tuo carrello"), messa allo stesso rango della seconda
     — nel disegno sono uguali, 17,5px di peso medio. Era 13px, cioe' piu'
     piccola della scritta che le sta sotto. */
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* [PRD-15/16] SECONDA ECCEZIONE a GLB-16 — i pannelli di "Acquista con
   serenita" mostrano il loro titolo (Fabio, 01/10). Motivo: a differenza degli
   altri pannelli destri, questi si aprono da quattro link diversi che portano a
   quattro contenuti diversi, e due di loro (pagamenti, Repair Service) iniziano
   direttamente con del testo — senza titolo non si sa dove si e' finiti.
   Nell'XD il titolo c'e'.

   ⚠ PICCOLO, non come il carrello. Li' il titolo e' 17px perche' veicola un
   messaggio che cambia ("Aggiunto al carrello"); qui e' un'etichetta, e prende
   la stessa misura dei sottotitoli dentro al pannello: cosi' la testa e il
   corpo parlano con una voce sola invece di litigare.

   ⚠ NON si scrive questa eccezione altrove. Sta attaccata a GLB-16 come
   quella del carrello perche' chi legge la regola deve vedere subito quante
   deroghe ha: una regola con le eccezioni sparse in altri file sembra assoluta
   e non lo e'. */
.bb-serenita-offcanvas .bb-offcanvas__header {
  justify-content: space-between;
}

.bb-serenita-offcanvas .bb-offcanvas__title {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  font-size: var(--bb-small);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

.bb-offcanvas__close,
body .bb-offcanvas__close,
.elementor-widget-container .bb-offcanvas__close {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #000 !important;
  transition: opacity var(--bb-transition-fast);
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Mobile: area tap del close più comoda (da 32 a 40px, icona invariata) */
@media (max-width: 991px) {
  .bb-offcanvas__close,
  body .bb-offcanvas__close {
    width: 40px !important;
    height: 40px !important;
  }
}

.bb-offcanvas__close:hover {
  opacity: 0.6;
  background: none !important;
  color: #000 !important;
}

.bb-offcanvas__close:focus {
  outline: none;
  box-shadow: none !important;
}

/* Mobile Country Switcher (Global-e) */
.bb-offcanvas__country-switcher {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 4px;
  color: #000 !important;
  transition: opacity var(--bb-transition-fast);
  margin-right: auto;
  margin-left: 16px;
}

.bb-offcanvas__country-switcher:hover {
  opacity: 0.6;
}

.bb-offcanvas__country-switcher .bb-icon {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
}

.bb-offcanvas__country-flag {
  display: inline-flex;
  align-items: center;
}

/* When Global-e injects a flag, hide the world icon */
.bb-offcanvas__country-switcher:has(.bb-offcanvas__country-flag:not(:empty)) .bb-icon {
  display: none !important;
}

.bb-offcanvas__country-flag img {
  width: 20px !important;
  height: 14px !important;
  object-fit: cover;
  border-radius: 2px;
}

.bb-offcanvas__close svg,
.bb-offcanvas__close .bb-icon,
body .bb-offcanvas__close svg,
body .bb-offcanvas__close .bb-icon {
  width: 24px !important;
  height: 24px !important;
  stroke: #000 !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  color: #000 !important;
  display: block !important;
}

/* ===========================
   OFFCANVAS BODY
   =========================== */
.bb-offcanvas__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--bb-gutter);
}

/* ===========================
   MENU OFFCANVAS — da che lato entra
   =========================== */

/* [NEW-200] Fabio 30/09: sul TELEFONO il menu deve entrare da DESTRA come
   tutti gli altri pannelli. Sul desktop resta da sinistra.

   Non e' un capriccio delle due misure: **il pannello segue il dito**. Il
   bottone che lo apre cambia lato con la larghezza — misurato sulla home:

       1440px   hamburger a x=12  su 1440   -> SINISTRA
        390px   hamburger a x=333 su  390   -> DESTRA   (MOB-01)

   Sul telefono il pannello partiva quindi dal lato OPPOSTO a quello che si
   e' appena toccato. Sul desktop invece il lato era ed e' quello giusto.

   Come e' fatto: la regola base `.bb-offcanvas` porta gia' il pannello a
   destra (right:0, translateX(100%), ombra a sinistra, deriva del contenuto
   +20px) — il menu era l'UNICO a ribaltarla. Quindi non si aggiunge una
   contro-regola per il telefono: si CHIUDE il ribaltamento dentro il
   desktop, e sotto i 768 riemerge la base. Una regola in meno, non una in
   piu', e il pannello torna identico agli altri per costruzione.

   Dentro non cambia niente: contenuto, misure e animazioni sono altrove. */
@media (min-width: 768px) {
  #bb-menu-offcanvas {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-100%) !important;
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.15);
  }

  #bb-menu-offcanvas.is-active {
    transform: translateX(0) !important;
  }

  /* La deriva del contenuto segue il pannello: da sinistra se entra da
     sinistra. Sul telefono resta quella della base, da destra. */
  #bb-menu-offcanvas .bb-offcanvas__header,
  #bb-menu-offcanvas .bb-offcanvas__body {
    transform: translateX(-20px);
  }

  #bb-menu-offcanvas.is-active .bb-offcanvas__header,
  #bb-menu-offcanvas.is-active .bb-offcanvas__body {
    transform: translateX(0);
  }
}

.bb-menu-offcanvas .bb-offcanvas-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* [NEW-150] I QUATTRO BLOCCHI DEL MENU
   Dall'XD "HOME 2026", artboard MENU 1. Le voci non sono un elenco unico:
   sono quattro gruppi staccati. Misurato sulle artboard (mobile a 3x,
   desktop a 5120=2x), non stimato a occhio:

       passo fra due voci     mobile  37px   desktop  42,5px
       stacco fra due gruppi  mobile  72,3px desktop 102px

   cioe' lo stacco e' il passo normale PIU' i valori qui sotto. Lo spazio lo
   da' il margine fra una lista e l'altra: i gruppi sono liste vere nel
   markup, non righe vuote, cosi' non c'e' niente da leggere per chi usa un
   lettore di schermo dove non c'e' niente da dire. */
.bb-menu-offcanvas {
  /* Il numero non e' a occhio: e' la PROPORZIONE dell'XD fra stacco e passo,
     applicata al passo vero. Nell'XD lo stacco in piu' vale 0,95 volte il
     passo su mobile e 1,4 volte su desktop. Col passo a 45px sul telefono
     viene 43px; su desktop, col passo a 27, viene 38 (piu' sotto). Cosi' i
     blocchi restano staccati nella misura in cui li ha pensati chi ha
     disegnato, invece di cambiare rapporto ogni volta che si tocca il
     passo. */
  --bb-menu-stacco: 43px;
}

.bb-menu-offcanvas .bb-offcanvas-menu--gruppo + .bb-offcanvas-menu--gruppo {
  margin-top: var(--bb-menu-stacco);
}

/* [NEW-150] La scelta della lingua, in fondo al menu.
   Non e' la voce IT/EUR: quella e' il paese (valuta, spedizione, dazi) e la
   mette Global-e. Qui si scrive in che lingua si legge il sito. Stessa
   grafica delle voci del menu, ma in fila: sono due parole, non un elenco. */
.bb-menu-langs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--bb-menu-stacco);
}

.bb-menu-langs__item {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bb-fg);
  opacity: 0.55;
  transition: opacity var(--bb-transition-fast);
}

.bb-menu-langs__item:hover,
.bb-menu-langs__item:focus-visible {
  opacity: 1;
}

/* La lingua in cui stai leggendo non e' un collegamento: e' scritta in nero
   e non si clicca. E' il modo del footer (NEW-134), tenuto uguale. */
.bb-menu-langs__item.is-active {
  opacity: 1;
  cursor: default;
}

/* Entra col resto, dopo le voci. */
.bb-menu-langs {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: 0.6s;
}

#bb-menu-offcanvas.is-active .bb-menu-langs {
  opacity: 1;
  transform: translateX(0);
}

/* MENU-01 (stile allegato): header pulito — niente rettangolo/linea, niente
   residuo language switcher. Resta solo la X (close), che con gli altri figli
   rimossi/nascosti finisce a sinistra. */
#bb-menu-offcanvas .bb-offcanvas__header {
  /* [NEW-203] qui c'era `border-bottom: none` di MENU-01: ora e' la base a non
     averlo piu', per tutti i pannelli. */
  /* MENU-01: X di chiusura ordinata in alto a DESTRA (title rimosso + switcher
     nascosto -> la X resta unico figlio e va a destra). */
  justify-content: flex-end;
  padding-top: 24px;
  padding-bottom: 8px;
}
#bb-menu-offcanvas .bb-offcanvas__country-switcher {
  display: none !important; /* GE hook resta nel DOM; switcher lingua non mostrato in alto */
}
/* MENU-01: testi voci più piccoli — forzato con ID per vincere l'ereditarietà.
   [NEW-150] E qui ci sta anche l'interlinea, per lo stesso motivo. Scritta
   sulla regola di sotto (una classe sola) NON prendeva: restava 24px, che
   e' il valore ereditato, e il passo scendeva a 36px invece di 27. Chi
   vince non e' chi scrive per ultimo, e' chi ha il selettore piu' forte:
   servono l'ID e la stessa forma dell'altra riga. */
#bb-menu-offcanvas .bb-offcanvas-menu__link,
#bb-menu-offcanvas .bb-offcanvas-menu__link > span {
  font-size: 12px !important;
  line-height: 15px !important;
}

.bb-offcanvas-menu__item {
  /* MENU-01: niente linee di separazione tra le voci (stile allegato). */
  border-bottom: none;
  /* Base per l'entrata scaglionata (attivata da #bb-menu-offcanvas.is-active) */
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.bb-offcanvas-menu__item:last-child {
  border-bottom: none;
}

#bb-menu-offcanvas.is-active .bb-offcanvas-menu__item {
  opacity: 1;
  transform: translateX(0);
}

/* [NEW-150] Stagger: le voci entrano una dopo l'altra.
   Il ritardo lo porta la voce stessa (--bb-ordine, scritto dal PHP) e NON
   :nth-child(). Con i quattro blocchi il menu e' fatto di quattro liste
   separate, e nth-child ricomincerebbe a contare da uno in ognuna: i
   quattro blocchi entrerebbero tutti insieme, a scatti, invece di scorrere.
   Il conto si ferma a 7 (min()), se no le ultime voci di un menu lungo
   arriverebbero quando la mano e' gia' altrove. */
#bb-menu-offcanvas.is-active .bb-offcanvas-menu__item {
  transition-delay: calc(0.17s + min(var(--bb-ordine, 1), 7) * 0.05s);
}

.bb-offcanvas-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* [NEW-150] Il passo fra una voce e l'altra.
     Misurato in pagina, non dedotto: era 52px — 14 di padding sopra, 24 di
     riga, 14 sotto. L'interlinea la ereditava dal tema padre, ed e' lei che
     teneva alta la riga: col solo padding a zero non si sarebbe scesi sotto
     i 24px. Per questo l'interlinea e' scritta (nella regola con l'ID, dove
     vince).

     QUI vale il telefono: 15 di riga + 15+15 di padding = 45px, cioe' il
     bersaglio comodo da toccare col dito (WCAG 2.5.8 dice 44). Su desktop
     scende a 27, piu' sotto.

     ── PERCHE' 45 E NON UN COMPROMESSO
     Il passo era stato dimezzato a 27 perche' il menu era troppo lungo, e
     al tocco e' risultato scomodo. La domanda era: qual e' il massimo che
     sta ancora in schermo? Provato col browser, con le voci nuove dentro,
     su tre telefoni: NON STA NESSUN VALORE. Nemmeno 30px, nemmeno i 27 di
     prima. Diciotto voci in un telefono non ci stanno, e basta.
     Quindi non c'e' nessun compromesso da trovare: scendere darebbe un
     bersaglio scomodo E lo scorrimento lo stesso. Il pannello scorre
     (overflow-y: auto, verificato: l'ultima voce e la riga della lingua si
     raggiungono), e scorrere un menu lungo e' normale. Un bersaglio troppo
     piccolo no. */
  padding: 15px 0;
  /* l'interlinea sta nella regola con l'ID, qui sopra: da qui non vincerebbe */
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bb-fg);
  transition: opacity var(--bb-transition-fast);
}

.bb-offcanvas-menu__link:hover {
  opacity: 0.6;
}

/* ===========================================================================
   [NEW-180] L'ULTIMO BLOCCO DEL MENU: sono servizi, non collezioni

   Le cinque voci del quarto gruppo — Private Lounge, Client Advisor,
   Spedizioni e Resi, Trova il negozio, Contatti — non sono posti dove si
   guarda, sono cose che si fanno. Fabio le vuole staccate dal resto: un filo
   piu' piccole, grigie invece che nere, e senza il maiuscolo.

   IL TESTO RESTA COM'E' SCRITTO (`text-transform: none`, non `lowercase`).
   La prima richiesta era minuscolo con la sola iniziale maiuscola: provato in
   pagina, dava "Private lounge" e "Client advisor", che sono nomi di servizi
   e letti cosi' sembrano un refuso. Fabio ha confermato il Title Case.
   (Per memoria, se un domani servisse davvero quell'effetto: `::first-letter`
   sul link NON funziona, perche' il link e' `display: flex` e quella
   pseudo-classe vale solo sui contenitori di blocco. Va messa sullo `<span>`
   interno reso `inline-block`. Verificato in pagina, non dedotto.)

   LA MISURA RESTA QUELLA DEL MENU (12px). Era stata rimpicciolita a 10, poi
   Fabio ha deciso di lasciarla com'e': fra il grigio e il minuscolo il blocco
   si distingue gia', e una terza differenza lo avrebbe allontanato piu' del
   necessario da un menu che deve restare una cosa sola.
   (Se un domani si volesse rimpicciolirlo davvero: NON basta una regola a
   classe. La misura e' imposta a 12px da `#bb-menu-offcanvas
   .bb-offcanvas-menu__link` CON `!important` poco sopra, e la stessa regola
   la ripete sullo `> span` — servono ID, !important e anche lo span, se no
   resta a 12 in silenzio o si rimpicciolisce solo a meta'.)

   SPECIFICITA' MINIMA: due classi (0,2,0) bastano a superare la regola base
   `.bb-offcanvas-menu__link` (0,1,0) per colore e maiuscolo. Non serve l'ID,
   che qui servirebbe solo per la misura — e la misura non la tocchiamo.
   =========================================================================== */

.bb-offcanvas-menu--gruppo[data-gruppo="4"] .bb-offcanvas-menu__link {
  text-transform: none;
  color: #6d7882;
}

/* Submenu — rivelazione morbida (accordion) con guida verticale a sinistra */
.bb-offcanvas-submenu {
  list-style: none;
  /* MENU-01: niente linea verticale a sinistra; submenu più indentati. */
  margin: 0;
  padding: 0 0 0 28px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.3s ease,
              padding 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.bb-offcanvas-menu__item.has-children.is-open .bb-offcanvas-submenu {
  max-height: 600px;
  opacity: 1;
  padding: 2px 0 18px 28px;
}

.bb-offcanvas-submenu__item {
  margin-top: 2px;
}

.bb-offcanvas-submenu__link {
  display: block;
  padding: 6px 0;
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-tight);
  text-transform: none;
  text-decoration: none;
  color: var(--bb-muted);
  transition: color var(--bb-transition-fast);
}

/* [NEW-226] Col mouse sopra, le voci del sottomenu si comportano come quelle
   del menu: sbiadiscono. Prima facevano l'OPPOSTO — partivano attenuate e al
   passaggio diventavano nere piene, cioe' si accendevano mentre le principali
   si spengono: due segnali contrari nello stesso pannello. */
.bb-offcanvas-submenu__link:hover {
  opacity: 0.6;
}

/* Submenu toggle icon */
.bb-offcanvas-menu__toggle,
body .bb-offcanvas-menu__toggle,
.elementor-widget-container .bb-offcanvas-menu__toggle {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 8px 2px 8px 16px !important;
  margin: 0 !important;
  cursor: pointer;
  color: #000 !important;
  transition: transform var(--bb-transition-fast);
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.bb-offcanvas-menu__toggle:hover {
  background: none !important;
  color: #000 !important;
}

.bb-offcanvas-menu__toggle:focus {
  outline: none;
  box-shadow: none !important;
}

.bb-offcanvas-menu__toggle svg,
.bb-offcanvas-menu__toggle .bb-icon,
body .bb-offcanvas-menu__toggle svg,
body .bb-offcanvas-menu__toggle .bb-icon {
  width: 20px !important;
  height: 20px !important;
  stroke: #000 !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  color: #000 !important;
  display: block !important;
}

/* [NEW-150] La freccia non deve piu' gonfiare la riga.
   Misurato dopo aver dimezzato il passo: le voci con sottomenu erano alte
   48px contro 27 delle altre — la freccia porta 8px di padding sopra, 20 di
   disegno e 8 sotto, cioe' 36, piu' del doppio della riga. Con il passo
   largo la differenza non si notava; ora si', ed e' proprio sulle voci piu'
   importanti (Borse, Bottega Bruzziches).
   Si rimpicciolisce senza rimorsi: dal NEW-41 la freccia non e' un bottone
   da centrare col dito, e' solo un segno — ad aprire il sottomenu e' tutta
   la riga. Lo spazio a sinistra resta, quello sopra e sotto no.
   Stessa forma di selettore delle regole qui sopra (con  body ), se no non
   vince: sono loro che mettono !important. */
body .bb-offcanvas-menu__toggle {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body .bb-offcanvas-menu__toggle svg,
body .bb-offcanvas-menu__toggle .bb-icon {
  width: 14px !important;
  height: 14px !important;
}

.bb-offcanvas-menu__item.has-children.is-open .bb-offcanvas-menu__toggle {
  transform: rotate(180deg);
}

/* [NEW-41] Fabio 18/09: le frecce dei sottomenu si vedono solo su mobile.
   Da 768px in su spariscono: la riga intera apre comunque il sottomenu.
   ID + !important perche' la regola base mette display:flex !important. */
@media (min-width: 768px) {
  #bb-menu-offcanvas .bb-offcanvas-menu__toggle {
    display: none !important;
  }
}

/* [NEW-150] Su desktop lo stacco fra i blocchi e' piu' ampio, nella stessa
   proporzione che ha l'XD rispetto al passo. */
@media (min-width: 768px) {
  .bb-menu-offcanvas {
    --bb-menu-stacco: 38px;
  }

  /* [NEW-150] Il passo fitto vale SOLO da qui in su. Col mouse un bersaglio
     di 27px si prende senza pensarci; col dito no, e sul telefono restano
     i 45px di sopra. Due classi, cosi' vince su quella base a prescindere
     da chi e' scritto prima.
         15 di riga + 6+6 di padding = 27px. */
  .bb-menu-offcanvas .bb-offcanvas-menu__link {
    padding: 6px 0;
  }

  /* ── QUI C'ERA L'ULTIMO BLOCCO SPINTO IN FONDO AL PANNELLO
     Veniva dall'XD, dove l'ultimo blocco sta in basso (229px dal
     precedente invece di 102). Era scritto come  margin-top: auto  dentro
     un body flex, con l'idea che se lo spazio fosse finito il margine si
     sarebbe annullato da solo lasciando lo stacco normale.
     Misurato in pagina: non e' andata cosi'. Gli stacchi erano 60, 60 e
     ZERO — il quarto blocco attaccato al terzo, che e' il contrario di
     quello che l'XD voleva. Il margine automatico non "si annulla
     lasciando il minimo": si annulla e basta, e quello che c'era prima
     (il margine fra le liste) non torna, perche' e' lo stesso margine.
     Tolto. Meglio uno stacco uguale e prevedibile su tutti e tre i
     confini che un quarto blocco senza stacco per niente. E con il menu
     piu' lungo — cinque voci nuove in arrivo — in fondo al pannello non
     ci sarebbe comunque piu' spazio da distribuire. */

  /* La riga della lingua resta attaccata sotto l'ultimo blocco, non si stacca
     un'altra volta. */
  .bb-menu-offcanvas .bb-menu-langs {
    margin-top: 24px;
  }
}

/* Accessibilità: niente entrata scaglionata se l'utente riduce le animazioni */
@media (prefers-reduced-motion: reduce) {
  #bb-menu-offcanvas .bb-offcanvas-menu__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #bb-menu-offcanvas.is-active .bb-offcanvas-menu__item {
    transition-delay: 0s !important;
  }
  /* [NEW-150] vale anche per la riga della lingua, che entra con le voci */
  #bb-menu-offcanvas .bb-menu-langs {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s !important;
  }
}

/* [NEW-108] Qui stava il vestito del cassetto di ricerca. Il cassetto non
   esiste piu': la lente apre una finestra a tutto schermo, che ha il suo
   foglio (assets/css/search.css). */

/* Custom BB Search Form (fallback) */
.bb-search-form {
  display: flex;
  gap: 12px;
}

.bb-search-form__input {
  flex: 1;
  padding: 12px 16px;
  border: var(--bb-line-width) solid var(--bb-line);
  background: var(--bb-bg);
  font-size: var(--bb-body);
  color: var(--bb-fg);
  border-radius: var(--bb-radius-small);
  transition: border-color var(--bb-transition-fast);
}

.bb-search-form__input:focus {
  outline: none;
  border-color: var(--bb-fg);
}

.bb-search-form__submit {
  padding: 12px 24px;
  background: var(--bb-black);
  color: var(--bb-bg);
  border: none;
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--bb-radius-small);
  transition: opacity var(--bb-transition-fast);
}

.bb-search-form__submit:hover {
  opacity: 0.8;
}

/* Search results */
.bb-search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-search-result {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  text-decoration: none;
  color: var(--bb-fg);
  transition: opacity var(--bb-transition-fast);
}

.bb-search-result:hover {
  opacity: 0.6;
}

.bb-search-result__image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.bb-search-result__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bb-search-result__title {
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-tight);
  text-transform: uppercase;
  font-weight: 500;
}

.bb-search-result__price {
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

/* ===========================
   FILTERS OFFCANVAS
   =========================== */
/* [NEW-133] Il pannello dei filtri si veste come il menu: niente linee di
   separazione, ne' fra le sezioni ne' fra le voci. A dividere bastano lo
   spazio bianco e i titoletti grigi, che e' il modo del menu (MENU-01).
   Lo spazio resta quello di prima, cosi' le sezioni non si accavallano. */
.bb-filter-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
}

.bb-filter-section--last,
.bb-filters-offcanvas .bb-offcanvas__body .bb-filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* [NEW-133] Il titoletto con l'ID del pannello, non con la sola classe.
   Era scritto 10px ma ne usciva 16 su schermo grande e 13 sul telefono:
   e' un <h3>, e la nostra regola generale ":root body h3" pesava di piu'
   della classe. Cosi' i titoletti tornano piccoli e grigi come previsto, e
   la gerarchia si legge: titolo piccolo, voci piu' grandi. */
#bb-filters-offcanvas .bb-filter-section__title {
  font-size: 10px;
  letter-spacing: var(--bb-ls-wide);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 20px;
  color: var(--bb-muted);
}

/* Sort Options */
.bb-sort-options {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bb-sort-option {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  padding: 14px 0; /* [NEW-133] niente linee, solo aria */
}

.bb-sort-radio {
  display: none;
}

.bb-sort-option__label {
  font-size: 12px; /* [NEW-133] come le voci del menu */
  letter-spacing: var(--bb-ls-tight);
  text-transform: uppercase;
  color: var(--bb-muted);
  transition: color var(--bb-transition-fast);
  flex: 1;
}

.bb-sort-option:hover .bb-sort-option__label {
  color: var(--bb-fg);
}

.bb-sort-radio:checked + .bb-sort-option__label {
  color: var(--bb-fg);
  font-weight: 500;
}

/* Checkmark for selected sort option */
.bb-sort-option::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background var(--bb-transition-fast);
}

.bb-sort-option:has(.bb-sort-radio:checked)::after {
  background: var(--bb-fg);
}

/* Taxonomy filter — COLORE (swatch dots) */
.bb-color-filter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 8px;
}

.bb-color-filter__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.bb-color-filter__item .bb-tax-filter-checkbox {
  display: none;
}

/* [NEW-100] Fabio: i colori del filtro sono troppo accesi. Si smorzano tutti
   insieme qui, senza toccare i colori scritti nei termini: meno saturazione e
   un filo di luce in piu', come tinte stampate su carta invece che accese su
   uno schermo. Il dato resta quello vero (serve altrove, per esempio sulle
   schede prodotto): cambia solo come si vede in questo pannello. */
.bb-color-filter__dot {
  /* [NEW-107] Fabio li vuole ancora piu' tenui: saturazione da 0.55 a 0.35. */
  filter: saturate(0.35) brightness(1.1);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--bb-transition-fast);
}

.bb-color-filter__dot--transparent {
  background:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%),
    linear-gradient(45deg, #e8e8e8 25%, #ffffff 25%, #ffffff 75%, #e8e8e8 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  border: 1px solid #d0d0d0;
}

.bb-color-filter__item:has(.bb-tax-filter-checkbox:checked) .bb-color-filter__dot {
  outline-color: var(--bb-fg);
}

.bb-color-filter__name {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-muted);
  text-align: center;
}

.bb-color-filter__item:has(.bb-tax-filter-checkbox:checked) .bb-color-filter__name {
  color: var(--bb-fg);
  font-weight: 500;
}

/* Taxonomy filter — checkbox terms (collezione, ...) */
.bb-term-filter {
  display: flex;
  flex-direction: column;
}

.bb-term-filter__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 14px 0; /* [NEW-133] niente linee, solo aria */
  position: relative;
}

.bb-term-filter__item .bb-tax-filter-checkbox {
  display: none;
}

.bb-term-filter__name {
  font-size: 12px; /* [NEW-133] come le voci del menu */
  letter-spacing: var(--bb-ls-wide);
  text-transform: uppercase;
  color: var(--bb-muted);
}

.bb-term-filter__item::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: var(--bb-line-width) solid var(--bb-line);
  background: transparent;
  transition: background var(--bb-transition-fast);
}

.bb-term-filter__item:has(.bb-tax-filter-checkbox:checked)::after {
  background: var(--bb-fg);
}

.bb-term-filter__item:has(.bb-tax-filter-checkbox:checked) .bb-term-filter__name {
  color: var(--bb-fg);
  font-weight: 500;
}

/* Category Icons in Filters */
.bb-category-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bb-category-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bb-category-checkbox {
  display: none;
}

.bb-category-icon__wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--bb-transition-fast);
}

.bb-category-checkbox:checked + .bb-category-icon__wrapper {
  border-color: var(--bb-fg);
}

.bb-category-icon__wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-category-icon__name {
  font-size: var(--bb-tiny);
  letter-spacing: var(--bb-ls-tight);
  text-transform: uppercase;
  text-align: center;
}

/* Price Filter */
.bb-price-filter {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bb-price-filter__slider {
  position: relative;
  height: 2px;
  background: var(--bb-line);
  margin: 16px 0 8px;
}

.bb-price-range {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  height: 2px;
  margin: 0;
}

.bb-price-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bb-bg);
  border: 2px solid var(--bb-fg);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.bb-price-range::-webkit-slider-thumb:hover {
  background: var(--bb-fg);
}

.bb-price-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bb-bg);
  border: 2px solid var(--bb-fg);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Price scale labels */
.bb-price-range__scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bb-price-range__scale span {
  font-size: 10px;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
}

/* Filter Footer — sticky at bottom, outside scrollable body */
.bb-filter-footer {
  display: flex;
  gap: 12px;
  padding: 20px var(--bb-gutter);
  border-top: var(--bb-line-width) solid var(--bb-line);
  flex-shrink: 0;
}

.bb-filter-apply,
.bb-filter-reset {
  flex: 1;
  padding: 14px 20px;
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #000;
  font-weight: 400;
  transition: background var(--bb-transition-fast), color var(--bb-transition-fast);
  text-align: center;
}

.bb-filter-apply {
  background: #000;
  color: #fff;
}

.bb-filter-apply:hover {
  background: #333;
  border-color: #333;
}

.bb-filter-reset {
  background: #fff;
  color: #000;
}

.bb-filter-reset:hover {
  background: #000;
  color: #fff;
}

/* Legacy: keep .bb-filter-actions for back-compat if referenced anywhere */
.bb-filter-actions {
  display: none;
}

/* ===========================
   MOBILE ADJUSTMENTS
   =========================== */
@media (max-width: 991px) {
  .bb-offcanvas {
    width: min(420px, 90vw);
  }

  .bb-offcanvas__header {
    padding: 16px var(--bb-gutter);
  }

  .bb-offcanvas__body {
    padding: 16px var(--bb-gutter);
  }

  .bb-category-icons {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .bb-category-icon__wrapper {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 992px) {
  .bb-offcanvas {
    width: min(520px, 40vw);
  }
}

/* ===========================
   CART OFFCANVAS
   =========================== */
.bb-cart-offcanvas .bb-offcanvas__body {
  padding: 0;
  overflow-y: auto;
}

.bb-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px var(--bb-gutter);
}

/* Cart Empty State */
.bb-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  color: var(--bb-muted);
  font-size: var(--bb-body);
}

.bb-cart-empty svg {
  opacity: 0.4;
}

/* ---- Cart Items ---- */
.bb-cart-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* [CART-01] L'aria ai fianchi la mette LA RIGA, non il contenitore.
   Il corpo del carrello ha padding 0 — glielo impone
   .bb-cart-offcanvas .bb-offcanvas__body, che con due classi batte il
   padding scritto su .bb-cart-body. Non e' un errore: serve perche' la
   riga appena aggiunta possa disegnare la sua righetta da bordo a bordo.
   Ma cosi' TUTTE le righe restavano senza margine: misurato nel pannello
   da 520px, le foto appoggiate al bordo sinistro e i prezzi tagliati
   contro il destro.
   Quindi il margine sta qui, sulla riga. La riga evidenziata non ha piu'
   bisogno di uscire dai fianchi con margini negativi: occupa gia' tutta
   la larghezza, e la sua righetta sta sul bordo per conto suo. */
.bb-cart-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 22px var(--bb-gutter);
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  position: relative;
}

.bb-cart-item:first-child {
  padding-top: 0;
}

.bb-cart-item:last-child {
  border-bottom: none;
}

/* [NEW-157] La riga appena aggiunta non ha piu' bisogno di segni.
   Aveva una righetta nera sul bordo sinistro, che serviva a dire "questa
   e' quella che hai appena messo" quando il pannello non lo diceva a
   parole. Ora lo dice: l'intestazione "AGGIUNTO AL CARRELLO" sta sopra la
   sua sezione, grande quanto quella che le sta sotto, come nel disegno —
   dove infatti nessuna riga e' segnata.
   Restava una stanghetta staccata dal contenuto di un gutter, che a
   guardarla sembrava un pezzo avanzato. */
.bb-cart-item--highlighted {
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

/* Image */
.bb-cart-item__image {
  width: 104px;
  height: 130px;
  overflow: hidden;
  background: #f5f5f5;
}

.bb-cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-cart-item__image a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Details column — grid layout: name/price on row 1, variant row 2, qty row 3, actions row 4 */
.bb-cart-item__details {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  row-gap: 3px;
  column-gap: 10px;
}

.bb-cart-item__name {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--bb-body);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bb-cart-item__name a {
  color: var(--bb-fg);
  text-decoration: none;
}

.bb-cart-item__variant {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--bb-small);
  color: var(--bb-muted);
  letter-spacing: 0.01em;
}

.bb-cart-item__materials {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

.bb-cart-item__price {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-top: 0;
  align-self: center;
}

/* Quantity Controls */
.bb-cart-item__quantity {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: none;
  /* [NEW-238] via la riga sotto la quantita': era l'unica riga DENTRO la
     scheda articolo, e separava la quantita' dal nulla. */
  padding: 2px 0 4px;
  margin-top: 10px;
  align-self: flex-start;
  grid-column: 1 / -1;
  grid-row: 4;
}

.bb-cart-qty-btn {
  background: none !important;
  border: none;
  color: var(--bb-fg) !important;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--bb-transition-fast);
}

.bb-cart-qty-btn:hover {
  opacity: 0.6;
}

/* Mobile: area tap più comoda per +/- (da 20px, sotto soglia touch) senza
   gonfiare troppo la riga (gap ridotto per compensare) */
@media (max-width: 767px) {
  .bb-cart-qty-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .bb-cart-item__quantity {
    gap: 4px;
  }
}

.bb-cart-qty-value {
  font-size: var(--bb-small);
  min-width: 16px;
  text-align: center;
}

/* Actions row (Remove · Add to wishlist) */
.bb-cart-item__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  grid-column: 1 / -1;
  grid-row: 5;
}

/* [CART-01] "Rimuovi · Sposta nei preferiti · Modifica": sono parole, non
   bottoni.

   Nel markup due di loro SONO <button> (fanno un'azione, non portano da
   nessuna parte: giusto cosi'), e questa regola diceva gia' sfondo
   trasparente e niente bordo. Non prendeva: in pagina uscivano due
   rettangoli NERI col testo bianco, alti 44px, mentre il terzo — che e'
   un <a> — era l'unico a venire come si deve. Misurato, non dedotto:
   sfondo rgb(0,0,0), testo bianco, padding 10px 15px.
   Vince  .elementor-kit-6 button , che ha una classe e un elemento; qui
   c'era una classe sola. La classe raddoppiata basta a passare avanti, e
   non serve !important: a forzare si vince una volta e si perde la volta
   dopo, quando qualcun altro forza piu' forte.

   Nel disegno (CARRELLO.xd, artboard CART) sono scritte in tondo, non in
   maiuscoletto, e larghe come il resto del testo minuto. */
.bb-cart-item__action-link,
.bb-cart-item__action-link.bb-cart-item__action-link {
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  line-height: 1.4;
  font-size: 13px;
  font-weight: 400;
  color: var(--bb-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--bb-transition-fast), opacity var(--bb-transition-fast);
  text-transform: none;
  letter-spacing: 0.01em;
  opacity: 0.75;
}

.bb-cart-item__action-link:hover,
.bb-cart-item__action-link.bb-cart-item__action-link:hover {
  background: none;
  background-color: transparent;
  color: var(--bb-fg);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bb-cart-item__action-sep {
  font-size: 13px;
  color: var(--bb-line);
  opacity: 0.6;
}

/* "Already in your cart" divider */
/* [NEW-157] "GIA' NEL TUO CARRELLO" e' la seconda intestazione del
   pannello, non una didascalia.

   Nel disegno (CARRELLO.xd, artboard FAST ADD TO CART_2) il pannello ha
   DUE sezioni con la stessa dignita': "ADDED TO YOUR CART" sopra la cosa
   appena messa e "ALREADY IN YOUR CART" sopra il resto — scritte uguali,
   17,5px di peso medio tutt'e due. Qui la prima era il titolo del
   pannello a 13px e la seconda una scrittina a 10px slavata: si leggevano
   come due cose di rango diverso, mentre dicono la stessa cosa a un
   secondo di distanza.

   Il margine ai fianchi serve anche a lei. Il corpo del carrello ha
   padding 0 — lo impone .bb-cart-offcanvas .bb-offcanvas__body — e senza
   questo la scritta partiva dal bordo: in pagina si leggeva "IÀ NEL TUO
   CARRELLO", con la G mangiata. Sistemando le righe avevo dato il margine
   a loro e non a lei. */
.bb-cart-divider {
  padding: 26px var(--bb-gutter) 12px;
  text-align: left;
}

.bb-cart-divider span {
  /* 17,5 nel disegno: il mezzo pixel non si vede e i corpi interi si
     gestiscono meglio */
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bb-fg);
  font-weight: 500;
}

/* ---- Cart Footer ---- */
/* [NEW-240] Via le righe della parte bassa: il piede si stacca gia' per
   posizione e per spaziatura, non serve disegnarlo. */
.bb-cart-footer {
  padding: 20px var(--bb-gutter);
  background: var(--bb-bg);
}

/* Shipping row */
.bb-cart-shipping {
  margin-bottom: 16px;
}

.bb-cart-shipping__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--bb-small);
  color: var(--bb-fg);
}

.bb-cart-shipping__label strong {
  font-weight: 600;
}

.bb-cart-shipping__cost {
  font-weight: 500;
}

/* Taxes expandable */
.bb-cart-taxes {
  margin-bottom: 16px;
  border: none;
}

.bb-cart-taxes__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bb-tiny);
  color: var(--bb-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  list-style: none;
}

.bb-cart-taxes__trigger::-webkit-details-marker {
  display: none;
}

.bb-cart-taxes__trigger::marker {
  display: none;
  content: '';
}

.bb-cart-taxes__icon {
  transition: transform var(--bb-transition-fast);
  flex-shrink: 0;
}

.bb-cart-taxes[open] .bb-cart-taxes__icon {
  transform: rotate(180deg);
}

.bb-cart-taxes__content {
  padding-top: 8px;
  font-size: var(--bb-tiny);
  color: var(--bb-muted);
  line-height: 1.5;
}

.bb-cart-taxes__content p {
  margin: 0;
}

/* Cart Totals */
.bb-cart-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding-top: 16px;
  /* [NEW-240] via anche questa: era la riga sopra "Procedi al checkout". */
}

.bb-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--bb-body);
  color: var(--bb-fg);
}

.bb-cart-total-row--subtotal {
  font-weight: 600;
  /* [NEW-242] subtotale piu' piccolo: da 16px a --bb-body (14). I 16 non
     sono un valore della scala (10/12/14), ed erano la misura piu' grande
     del pannello — piu' del nome del prodotto, che e' 14. */
  font-size: var(--bb-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cart Actions */
.bb-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.bb-cart-checkout {
  display: block;
  background: var(--bb-black);
  color: var(--bb-bg) !important;
  text-align: center;
  padding: 18px 24px;
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: letter-spacing var(--bb-transition-fast), opacity var(--bb-transition-fast);
  border: none;
  cursor: pointer;
}

.bb-cart-checkout:hover {
  opacity: 1;
  letter-spacing: 0.14em;
}

/* [NEW-244] Era un secondo bottone col bordo, accanto a "Procedi al
   checkout": due riquadri uno sotto l'altro con lo stesso peso, e la scelta
   principale non si distingueva piu'. Ora e' un link di testo — resta
   raggiungibile, ma smette di competere col checkout. */
.bb-cart-view-link {
  display: block;
  text-align: center;
  padding: 4px 0 0;
  font-size: var(--bb-small);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--bb-fg);
  transition: opacity var(--bb-transition-fast);
}

.bb-cart-view-link:hover {
  opacity: 0.6;
}

/* ---- "Shop with Confidence" section ---- */
.bb-cart-confidence {
  padding-top: 20px;
  border-top: var(--bb-line-width) solid var(--bb-line);
}

/* [NEW-158] "Acquista con serenità" col carattere del sito.
   E' un <h4>, e  .elementor-kit-6 h4  gli mette "Cormorant Garamond" a
   24px: sul carrello usciva con le grazie e grande il doppio del resto
   della pagina, come se fosse il titolo di un'altra cosa. Questa regola
   il carattere non lo diceva, e quindi lo perdeva.

   Qualcuno ci si era gia' imbattuto e l'aveva risolto SOLO per la scheda
   prodotto (.bb-pdp-confidence .bb-cart-confidence__title, in
   product.css, che avendo due classi passa davanti). Il blocco pero' e'
   condiviso: lo usano anche il pannello carrello e la pagina carrello,
   che restavano indietro. La correzione va dove il blocco e' definito.

   Classe raddoppiata e non !important: due classi bastano a passare
   davanti a "una classe + un elemento", e non si toglie a nessun altro
   la possibilita' di dire la sua piu' avanti. */
.bb-cart-confidence__title,
.bb-cart-confidence__title.bb-cart-confidence__title {
  font-family: "Jost", sans-serif;
  font-size: var(--bb-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-muted);
  margin: 0 0 12px;
  font-weight: 500;
}

.bb-cart-confidence__items {
  display: flex;
  flex-direction: column;
}

.bb-cart-confidence__item {
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-cart-confidence__item:last-child {
  border-bottom: none;
}

.bb-cart-confidence__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.bb-cart-confidence__header::-webkit-details-marker {
  display: none;
}

.bb-cart-confidence__header::marker {
  display: none;
  content: '';
}

.bb-cart-confidence__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-cart-confidence__label {
  font-size: var(--bb-small);
  font-weight: 500;
  flex: 1;
  letter-spacing: 0.02em;
}

.bb-cart-confidence__chevron {
  flex-shrink: 0;
  transition: transform var(--bb-transition-fast);
}

.bb-cart-confidence__item[open] .bb-cart-confidence__chevron {
  transform: rotate(180deg);
}

.bb-cart-confidence__content {
  padding: 0 0 12px 24px;
  font-size: var(--bb-small);
  line-height: 1.5;
  color: var(--bb-muted);
}

.bb-cart-confidence__content p {
  margin: 0;
}

/* ---- Cart offcanvas mini confidence strip (flat, non-expandable) ---- */
/* [NEW-238] Via la riga sopra la striscia e quelle fra le voci: restano le
   sole spaziature. */
.bb-cart-confidence-strip {
  margin-top: 8px;
}

.bb-cart-confidence-strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: var(--bb-tiny);
  /* [NEW-240] niente grassetto: erano le uniche parole a 700 del pannello. */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-fg);
}

/* [NEW-240] QUI C'ERA IL TRATTINO: `content: '—'` davanti a ogni voce.
   E' quello che la consegna chiama "niente trattini". */

.bb-cart-confidence-strip__item:last-child {
  border-bottom: none;
}

/* Mobile Adjustments for Cart */
@media (max-width: 991px) {
  .bb-cart-item__image {
    width: 75px;
    height: 95px;
  }

  .bb-cart-item {
    grid-template-columns: 75px 1fr;
    gap: 12px;
  }
}

/* ===========================
   ELEMENTOR OVERRIDES
   =========================== */
/* Force all offcanvas buttons to have transparent backgrounds and black icons */
.bb-offcanvas button,
.bb-offcanvas a.bb-header__icon,
body .bb-offcanvas button,
.elementor .bb-offcanvas button {
  /*background-color: transparent !important;*/
  background-image: none !important;
  box-shadow: none !important;
}

/* Force black color on all offcanvas SVG icons */
.bb-offcanvas svg,
.bb-offcanvas .bb-icon,
body .bb-offcanvas svg,
.elementor .bb-offcanvas svg {
  stroke: #000 !important;
  fill: none !important;
  color: #000 !important;
}

/* Ensure buttons don't get Elementor button styles */
button.bb-offcanvas__close,
button.bb-offcanvas-menu__toggle {
  min-width: auto !important;
  min-height: auto !important;
  font-size: inherit !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ===========================
   SHOPTIMIZER OVERRIDES
   Elegant slide-in transitions for all Shoptimizer offcanvas elements
   =========================== */

/* ----------------------
   [NEW-155] QUI C'ERA IL VESTITO DEL CASSETTO CARRELLO DI SHOPTIMIZER
   Entrata morbida, ombra, comparsa scaglionata del contenuto: tutto
   lavoro fatto quando il carrello era il suo. Ora il carrello e'
   #bb-cart-offcanvas, e quel cassetto non viene piu' nemmeno stampato
   (inc/helpers/cart-helpers.php: era lui il secondo pannello che si
   vedeva entrare premendo Acquista).
   Tolto anche il vestito: vestire una cosa che non c'e' piu' e' solo
   un modo di far credere a chi legge che esista ancora.
   ---------------------- */

/* Mobile overlay */
.mobile-overlay {
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* ----------------------
   MOBILE NAVIGATION (Left side)
   Shoptimizer uses left: -300px positioning
   ---------------------- */
.col-full-nav {
  transition: left 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.15) !important;
  will-change: left !important;
}

/* Content animation inside mobile nav */
.col-full-nav .menu,
.col-full-nav .primary-navigation,
.col-full-nav .menu-item {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.mobile-toggled .col-full-nav .menu,
.mobile-toggled .col-full-nav .primary-navigation {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.15s;
}

.mobile-toggled .col-full-nav .menu-item {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger animation for menu items */
.mobile-toggled .col-full-nav .menu-item:nth-child(1) { transition-delay: 0.1s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(2) { transition-delay: 0.13s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(3) { transition-delay: 0.16s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(4) { transition-delay: 0.19s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(5) { transition-delay: 0.22s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(6) { transition-delay: 0.25s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(7) { transition-delay: 0.28s; }
.mobile-toggled .col-full-nav .menu-item:nth-child(8) { transition-delay: 0.31s; }

/* ----------------------
   SEARCH MODAL/OVERLAY
   ---------------------- */
dialog.shoptimizer-modal {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

dialog.shoptimizer-modal[open] {
  opacity: 1;
  transform: translateY(0);
}

/* Modal backdrop */
dialog.shoptimizer-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

dialog.shoptimizer-modal[open]::backdrop {
  opacity: 1;
}

/* Search form animation inside modal */
.shoptimizer-modal .search-form,
.shoptimizer-modal .shoptimizer-search-wrap {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  transition-delay: 0s;
}

dialog.shoptimizer-modal[open] .search-form,
dialog.shoptimizer-modal[open] .shoptimizer-search-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

/* ----------------------
   FILTER SIDEBAR (Left side)
   Shoptimizer uses left: -300px positioning
   ---------------------- */
@media (max-width: 992px) {
  .woocommerce.archive #secondary,
  .wc-active.search-results #secondary,
  .page-template-template-woocommerce-archives #secondary {
    transition: left 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.15) !important;
    will-change: left, opacity !important;
  }

  /* Content animation inside filter sidebar */
  .woocommerce.archive #secondary .widget,
  .wc-active.search-results #secondary .widget,
  .page-template-template-woocommerce-archives #secondary .widget {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease !important;
  }

  .filter-open #secondary .widget {
    opacity: 1;
    transform: translateX(0);
  }

  /* Stagger animation for filter widgets */
  .filter-open #secondary .widget:nth-child(1) { transition-delay: 0.1s; }
  .filter-open #secondary .widget:nth-child(2) { transition-delay: 0.15s; }
  .filter-open #secondary .widget:nth-child(3) { transition-delay: 0.2s; }
  .filter-open #secondary .widget:nth-child(4) { transition-delay: 0.25s; }
  .filter-open #secondary .widget:nth-child(5) { transition-delay: 0.3s; }
}

/* ----------------------
   MOBILE SEARCH TOGGLE
   ---------------------- */
.shoptimizer-search-wrap {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.m-search-toggled .shoptimizer-search-wrap {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------
   GENERIC SHOPTIMIZER TRANSITIONS
   Any element that might use .is-active or similar
   ---------------------- */

/* Overlay backgrounds */
body.drawer-open::before,
body.mobile-toggled::before,
body.filter-open::before {
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Mobile overlay for all drawer types */
.mobile-overlay {
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Ensure smooth body scroll lock transition */
body.drawer-open,
body.mobile-toggled,
body.filter-open {
  transition: none !important;
}

/* ===========================
   CLUB OFFCANVAS
   =========================== */

/* Header row: just the close button, right-aligned */
.bb-club-offcanvas .bb-club-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 24px 0;
  min-height: 0;
}

/* Scrollable body */
/* ⚠ [NEW-322] Anche il corpo del pannello preventivo: senza, il margine
   laterale era 28px invece di 32 e il pulsante usciva 8px piu' largo di
   quello del Club. Pochi pixel, ma i due pannelli devono sembrare lo stesso
   pannello, e la differenza si vede mettendoli uno accanto all'altro. */
.bb-club-offcanvas .bb-club-body,
.bb-preventivo-offcanvas .bb-preventivo-body,
.bb-appuntamenti-offcanvas .bb-appuntamenti-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 40px;
  display: flex;
  flex-direction: column;
}

/* View switching */
.bb-club-view { display: flex; flex-direction: column; flex: 1; }
.bb-club-view[hidden] { display: none; }

/* Title: "THE BENEDETTA BRUZZICHES Club" */
.bb-club-title {
  font-family: var(--bb-font-body, sans-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 32px;
  color: var(--bb-fg, #000);
}

/* CLUB-07: logo reale al posto del titolo testuale nel club offcanvas.
   Pannello chiaro + logo gia nero → nessun invert. */
.bb-club-title--logo {
  margin: 0 0 28px;
}
.bb-club-offcanvas__logo {
  display: block;
  width: 220px;
  max-width: 66%;
  height: auto;
}

.bb-club-title em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px; /* CLUB-04: scala ridotta (era 22px); testi 11-13px lasciati per usabilità (criterio) */
  text-transform: none;
  letter-spacing: 0;
  display: inline;
  margin-left: 4px;
  vertical-align: baseline;
}

/* Accordion items — CLUB-03: "No righe". Divisori rimossi alla fonte (erano
   border 1px): la separazione è affidata alle sole spaziature. */
.bb-club-accordion {
  border-bottom: none;
}

.bb-club-accordion:first-of-type {
  border-top: none;
}

.bb-club-accordion summary {
  list-style: none;
}

.bb-club-accordion summary::-webkit-details-marker {
  display: none;
}

.bb-club-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  font-size: var(--bb-small); /* [NEW-218] era 11px, che nella scala non esiste */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-fg, #000);
  user-select: none;
}

.bb-club-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.bb-club-accordion[open] .bb-club-accordion__chevron {
  transform: rotate(180deg);
}

.bb-club-accordion__body {
  padding: 0 0 20px;
  /* [NEW-218] Fabio 30/09: via il serif dal pannello. Qui stava sia il
     Playfair (NEW-22, "paragrafo narrativo") sia la misura: il pannello
     leggeva 14px in serif mentre il menu accanto legge 12px in Jost, e
     affiancati sembravano due siti diversi. Ora e' la misura del menu.
     Il serif resta la voce degli EDITORIALI, non dei pannelli. */
  font-family: var(--bb-font-family, 'Jost'), sans-serif;
  font-size: var(--bb-small);
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.7);
}

.bb-club-accordion__body p { margin: 0 0 12px; }

/* [NEW-219] Il nome del marchio resta in carattere editoriale dentro un
   paragrafo che per il resto e' Jost 12px (NEW-218). Solo la famiglia:
   misura e colore li eredita, cosi' il nome non "salta" nella riga. */
.bb-club-nome {
  font-family: var(--bb-font-editorial);
}
.bb-club-accordion__body p:last-of-type { margin-bottom: 0; }

.bb-club-accordion__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-club-accordion__body li {
  padding: 4px 0;
}

.bb-club-more {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--bb-small); /* [NEW-218] era 11px */
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-fg, #000);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Action buttons */
.bb-club-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

.bb-club-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: #000;
  color: #fff!important;
  font-family: var(--bb-font-body, sans-serif);
  font-size: var(--bb-small); /* [NEW-218] era 11px */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #000;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-align: center;
}

.bb-club-btn:hover,
.bb-club-btn:focus {
  background: #3d3d3d !important;
  color: #fff !important;
  border-color: #3d3d3d !important;
  text-decoration: none !important;
}

/* Google button inherits .bb-club-btn — black bg, white text, same hover */

/* ── Blocco Club, slide 40 del Canva (annotazioni del 26/08) ────────────────
   NEW-26 "TOGLIERE RIGA" · NEW-24 "LOGO PIU' GRANDE"
   NEW-23 "DIMENSIONE COME IL CLUB" · NEW-25 "NO GRASSETTO"

   Bersagli ricavati dalla geometria della slide: ricostruito lo stato del 26/08
   (fisarmoniche aperte, form di registrazione non ancora esistente), le tre
   quote annotate cadono su paragrafo (0.306), elenco privilegi (0.600) e la
   coppia di CTA (0.945, fra ACCEDI a 0.900 e CREA UN ACCOUNT a 0.951).

   ⚠️ TRAPPOLA DI SPECIFICITA'. Il kit Elementor pubblica
   `.elementor-kit-6 button` (0,2,1) e `.elementor-kit-6 a` (0,1,1), che battono
   le classi singole: .bb-club-btn dichiara 11px/0.12em da sempre, ma in pagina
   i bottoni sono sempre stati 13px/400. Per questo qui si passa dall'ID del
   pannello (1,1,0) — e' l'unico modo perche' le dichiarazioni valgano davvero.
   Conseguenza: alzando la specificita' tornerebbe a valere anche il 500 di
   .bb-club-btn, quindi il peso 400 va scritto qui in chiaro (NEW-25).
   -------------------------------------------------------------------------- */

/* NEW-26: via la riga sotto la testata. Solo nel Club: gli altri offcanvas la
   tengono (come per il pannello Dettagli con PDP-16). */
#bb-club-offcanvas .bb-offcanvas__header,
#bb-preventivo-offcanvas .bb-offcanvas__header,
#bb-appuntamenti-offcanvas .bb-offcanvas__header {
  border-bottom: 0;
}

/* NEW-24: logo piu' grande. Istruzione viva del 26/08, supera CLUB-02 che
   chiedeva il contrario. */
#bb-club-offcanvas .bb-club-offcanvas__logo,
#bb-preventivo-offcanvas .bb-club-offcanvas__logo,
#bb-appuntamenti-offcanvas .bb-club-offcanvas__logo {
  width: 280px;
  max-width: 78%;
}

/* {AV} [NEW-322] Il pannello del preventivo e' aggiunto ai selettori qui
   sopra invece di avere i suoi: le regole che contano sono agganciate
   all'ID (servivano a battere il kit Elementor), quindi la sola classe
   `bb-club-btn` avrebbe dato un pulsante SIMILE e non uguale. Cosi' il
   giorno che si ritocca quello del Club si ritocca anche questo. */

/* NEW-23: le CTA "come il Club", cioe' come le righe IL CLUB / PRIVILEGI:
   stesso corpo e stessa spaziatura. NEW-25: nessun 500 nel pannello. */
#bb-club-offcanvas .bb-club-btn,
#bb-preventivo-offcanvas .bb-club-btn,
#bb-appuntamenti-offcanvas .bb-club-btn {
  /* [NEW-218] era 11px. E' QUESTA la regola che vince (l'ID serviva a battere
     il kit Elementor, vedi il commento qui sopra): cambiare solo la classe
     non avrebbe spostato niente in pagina. */
  font-size: var(--bb-small);
  font-weight: 400;
  letter-spacing: 0.12em;
}

#bb-club-offcanvas .bb-club-accordion__summary {
  font-weight: 400;
}

/* ── Login form ── */
.bb-club-login-form {
  margin-bottom: 20px;
}

/* WP login form inside the club panel */
.bb-club-offcanvas #bb-club-loginform {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.bb-club-offcanvas #bb-club-loginform p {
  margin: 0 0 24px;
  padding: 0;
}

.bb-club-offcanvas #bb-club-loginform label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
}

.bb-club-offcanvas #bb-club-loginform input[type="text"],
.bb-club-offcanvas #bb-club-loginform input[type="email"],
.bb-club-offcanvas #bb-club-loginform input[type="password"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  padding: 6px 0 10px;
  font-size: 14px;
  color: var(--bb-fg, #000);
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s;
}

.bb-club-offcanvas #bb-club-loginform input[type="text"]:focus,
.bb-club-offcanvas #bb-club-loginform input[type="email"]:focus,
.bb-club-offcanvas #bb-club-loginform input[type="password"]:focus {
  border-bottom-color: #000;
}

.bb-club-offcanvas #bb-club-loginform input[type="submit"],
.bb-club-offcanvas #bb-club-loginform .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  background: #000;
  color: #fff;
  font-family: var(--bb-font-body, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid #000;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 8px;
}

.bb-club-offcanvas #bb-club-loginform input[type="submit"]:hover,
.bb-club-offcanvas #bb-club-loginform input[type="submit"]:focus {
  background: #3d3d3d;
  color: #fff;
  text-decoration: none;
}

/* Login extras: forgot / google / register */
.bb-club-login-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-club-forgot {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bb-club-register-link {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
}

/* ===========================
   JOIN THE CLUB OFFCANVAS
   =========================== */

.bb-joinclub-offcanvas .bb-joinclub-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 24px 0;
  min-height: 0;
}

.bb-joinclub-offcanvas .bb-joinclub-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 40px;
  display: flex;
  flex-direction: column;
}

.bb-joinclub-view { display: flex; flex-direction: column; flex: 1; }
.bb-joinclub-view[hidden] { display: none; }

/* Title */
.bb-joinclub-title {
  font-family: var(--bb-font-body, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-fg, #000);
  margin: 0 0 20px;
}

/* Description */
.bb-joinclub-description {
  font-size: 12px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 28px;
}

.bb-joinclub-description p {
  margin: 0 0 10px;
}

.bb-joinclub-description p:last-child {
  margin-bottom: 0;
}

/* Form fields */
.bb-joinclub-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bb-joinclub-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}

.bb-joinclub-field label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 6px;
}

.bb-joinclub-field input[type="text"],
.bb-joinclub-field input[type="email"],
.bb-joinclub-field input[type="tel"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  padding: 6px 0 10px;
  font-size: 14px;
  color: var(--bb-fg, #000);
  outline: none;
  box-shadow: none;
  width: 100%;
  transition: border-color 0.2s;
}

.bb-joinclub-field input:focus {
  border-bottom-color: #000;
}

/* Country select */
.bb-joinclub-select-wrap {
  position: relative;
}

.bb-joinclub-field select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  padding: 6px 24px 10px 0;
  font-size: 14px;
  color: var(--bb-fg, #000);
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s;
}

.bb-joinclub-field select:focus {
  border-bottom-color: #000;
}

.bb-joinclub-select-chevron {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(0, 0, 0, 0.5);
}

/* Privacy text */
.bb-joinclub-privacy {
  font-size: 10px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.5);
  margin: 4px 0 20px;
}

.bb-joinclub-privacy a {
  color: inherit;
  text-decoration: underline;
}

/* Error message */
.bb-joinclub-error {
  font-size: 12px;
  color: #b91c1c;
  margin-bottom: 12px;
  padding: 8px 0;
}

/* Submit — link-style, uppercase, underlined */
.bb-joinclub-submit {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--bb-font-body, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--bb-fg, #000);
  cursor: pointer;
  align-self: flex-start;
  transition: color 0.2s;
}

.bb-joinclub-submit:hover {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
}

.bb-joinclub-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Thank you view */
.bb-joinclub-thanks-title {
  font-family: var(--bb-font-body, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-fg, #000);
  margin: 0 0 16px;
  line-height: 1.5;
}

.bb-joinclub-thanks-text {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* ===========================
   FOOTER CLUB WIDGET
   [bb_club_subscribe] shortcode
   =========================== */

.bb-footer-club {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #fff; /* explicit — footer has dark background */
}
.bb-footer-club__logo {
  display: block;
  width: 320px;
  height: auto;
  margin-bottom: 28px;
  filter: invert(1); /* logo nero → bianco su footer scuro */
}

.bb-footer-club__tagline {
  font-size: 12px;
  line-height: 1.75;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.75);
}

.bb-footer-club__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.bb-footer-club__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.6);
}

.bb-footer-club__input {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important; /* FOOT-02: via le curvette laterali (residuo border-radius) */
  padding: 4px 0 8px;
  font-size: 13px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  outline: none;
  width: 100%;
  box-shadow: none !important;
}

.bb-footer-club__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.35);
}

.bb-footer-club__input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Autofill: override browser yellow/blue background on dark footer */
.bb-footer-club__input:-webkit-autofill,
.bb-footer-club__input:-webkit-autofill:hover,
.bb-footer-club__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-text-fill-color: #fff !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  caret-color: #fff;
}

.bb-footer-club__btn {
  display: inline-block;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 14px;
  font-family: var(--bb-font-body, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #fff !important;
  cursor: pointer;
  align-self: flex-start;
}

.bb-footer-club__btn:hover {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: underline;
}