/* ==========================================================================
   BB — Zona ACCOUNT (my-account)
   Ricostruzione dagli artboard XD/ACCOUNT NUOVE FUNZIONI.xd
   · desktop: "WISHLIST STEP 2_UTENTE_PAGINA DESKTOP" (riferimento 2560px)
   · mobile:  "PAGINA UTENTE_MOBILE" (riferimento 390px)

   Le misure XD sono espresse in vw sul riferimento 2560/390 e clampate, cosi'
   le proporzioni restano quelle del disegno a qualunque larghezza.

   [ACC-02] shell + nav · [ACC-03] tab ACCOUNT · [ACC-04] responsive
   Owner: sessione "implementazione pagine da XD". Non aggiungere qui stili
   di offcanvas/landing/home (file di proprieta' dell'altra sessione).
   ========================================================================== */

:root {
  /* gutter di pagina dell'account: 95.5/2560 = 3.73vw */
  --bb-account-gutter: clamp(20px, 3.73vw, 96px);
  /* passo verticale delle righe contenuto: 47.5/2560 = 1.86vw */
  --bb-account-row-step: clamp(26px, 1.86vw, 48px);
  /* passo verticale della nav: 71/2560 = 2.77vw */
  --bb-account-nav-step: clamp(30px, 2.77vw, 71px);
  --bb-account-label-col: 32.8%;
}

/* --------------------------------------------------------------------------
   0. Contenitore a tutta larghezza (template page-account.php)

   Shoptimizer incapsula il contenuto in `.col-full` (content-box, max 1170px,
   margin auto). L'XD usa quasi tutta la viewport, quindi lo sganciamo — stesso
   trattamento delle landing, ma replicato qui per non dipendere da landing.css
   (file di proprieta' dell'altra sessione).
   -------------------------------------------------------------------------- */

.bb-account-tpl .col-full {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Shoptimizer mette 14-28px di padding su #content.site-content. Qui il gutter
   deve appartenere a `.bb-account` (che lo calcola sulle proporzioni XD),
   altrimenti i due si sommano: desktop troppo rientrato e hero mobile non
   edge-to-edge. Lo azzeriamo solo su questo template. */
.bb-account-tpl #content.site-content {
  padding-inline: 0;
}

/* la pagina account non ha sidebar ne' header d'archivio */
.bb-account-tpl .archive-header,
.bb-account-tpl .woocommerce-breadcrumb {
  display: none;
}

/* --------------------------------------------------------------------------
   1. Reset del layout a float di Shoptimizer (assets/css/main/my-account.css)
   -------------------------------------------------------------------------- */

.woocommerce-account .bb-account .woocommerce-MyAccount-navigation,
.woocommerce-account .bb-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin-right: 0;
  padding-top: 0;
}

/* niente icone mask davanti alle voci (Shoptimizer) */
.bb-account .bb-account-nav__link::before {
  content: none !important;
  display: none !important;
}

/* Divisori e padding delle voci: Shoptimizer li applica con
   `.woocommerce-MyAccount-navigation ul li` (0,2,1) e `... ul li a` (0,3,1),
   che battono le nostre classi. Ripetiamo la sua stessa struttura per vincere
   di specificita' invece che con !important. */
.bb-account .woocommerce-MyAccount-navigation ul li,
.bb-account .bb-account-nav ul li.bb-account-nav__item {
  border-bottom: 0;
  list-style: none;
  font-size: var(--bb-body);
}

.bb-account .woocommerce-MyAccount-navigation ul li a,
.bb-account .bb-account-nav ul li a.bb-account-nav__link {
  padding: 0;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   2. Shell
   -------------------------------------------------------------------------- */

.bb-account {
  padding-inline: var(--bb-account-gutter);
  padding-block: clamp(28px, 5.3vw, 136px) clamp(48px, 6vw, 120px);
  color: var(--bb-fg);
}

/* Titolo di pagina = lockup "THE Club" (stesso asset di footer/home) */
.bb-account__title {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* [NEW-205] La riga in cima: lockup a sinistra, "Private Lounge" a destra,
   alla STESSA ALTEZZA del lockup (Fabio, 01/10). La riga sta sopra la griglia,
   quindi la scritta e' nell'area superiore all'immagine della bocca: "sopra"
   vuol dire piu' in alto, non addosso alla foto.
   `align-items: center` e non `baseline`: "alla stessa altezza" e' il centro
   del lockup, mentre la linea di base lo avrebbe appoggiato al suo fondo. */
.bb-account__intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
  flex-wrap: wrap;
  /* Lo spazio verso la griglia sotto appartiene alla RIGA, non al titolo.
     Stava sul margine inferiore dell'<h1>, e li' faceva danno: con
     `align-items: center` si centra la scatola COL margine, quindi il lockup
     finiva 9px piu' in alto del centro e la scritta non era davvero alla sua
     stessa altezza (misurato). Stesso valore di prima, spostato di una
     riga: il ritmo verticale della pagina non cambia. */
  margin-bottom: clamp(16px, 1.3vw, 33px);
}

/* 14px (due punti piu' della misura di servizio da cui era partita) e
   maiuscolo con la spaziatura dei titoli. */
.bb-account__lounge {
  margin: 0;
  font-size: var(--bb-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-title);
  color: var(--bb-fg);
  white-space: nowrap;
}

/* "Lounge" piu' marcata: 600, che e' uno dei pesi che il sito carica davvero
   per Jost (300/400/500/600). Chiederne uno non caricato avrebbe prodotto un
   finto-grassetto disegnato dal browser, piu' sporco e diverso a ogni
   sistema. */
.bb-account__lounge-forte {
  font-weight: 600;
}

.bb-account__title-logo {
  display: block;
  /* [NEW-202] Il lockup nuovo e' 1590x638 (2,5:1) contro 1791x240 (7,5:1) del
     precedente: a parita' di LARGHEZZA sarebbe venuto tre volte piu' alto e
     avrebbe sfondato l'impaginato. Qui si comanda l'ALTEZZA, scegliendo
     esattamente quella che rendeva prima, cosi' il ritmo verticale della
     pagina non cambia — ed e' la scelta prudente, visto che questa schermata
     si vede solo da dentro e io non posso aprirla.
        prima: larghezza clamp(200, 46.2vw, 1183) con rapporto 7,4625
             = altezza clamp(27px, 6.19vw, 158px), cioe' la riga qui sotto. */
  height: clamp(27px, 6.19vw, 158px);
  width: auto;
}

/* Griglia a 3 colonne + colonna-vuota che riproduce lo stacco dell'XD:
   editoriale 32.7% | vuoto 4.81% | nav 16.9% | contenuto 45.6% */
.bb-account__grid {
  display: grid;
  grid-template-columns: 32.7% 4.81% 16.9% 45.6%;
  align-items: start;
}

.bb-account__editorial { grid-column: 1; }
.bb-account .bb-account-nav { grid-column: 3; }
.bb-account .bb-account__content { grid-column: 4; }

/* [NEW-205 seguito] Il <picture> che avvolge la foto (lo swap per il telefono)
   e' un elemento IN LINEA: senza questo si porta dietro lo spazio della riga di
   testo e lascia una striscia chiara sotto l'immagine. */
.bb-account__editorial picture {
  display: block;
}

.bb-account__editorial-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 791.5 / 989.5;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Navigazione (colonna verticale)
   -------------------------------------------------------------------------- */

.bb-account-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-account-nav__item + .bb-account-nav__item {
  margin-top: calc(var(--bb-account-nav-step) - 1.2em);
}

.bb-account .bb-account-nav__link {
  display: inline-block;
  padding: 0;
  font-size: var(--bb-body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bb-muted);
  transition: color var(--bb-transition-fast);
}

/* [NEW-246 / ACC-01] Col mouse sopra, la voce si sottolinea. Prima cambiava
   solo colore (grigio -> nero): un segnale che chi ha poco contrasto a schermo
   o guarda di sfuggita puo' non cogliere. La sottolineatura e' lo stesso segno
   che usano gli altri link del sito, con lo stesso stacco di 3px.
   Sul telefono sono sottolineate sempre — vedi il blocco in fondo: li' il
   passaggio del mouse non esiste, e una riga di schede senza segno non dice
   che si toccano. */
.bb-account .bb-account-nav__link:hover,
.bb-account .bb-account-nav__link:focus-visible {
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* stato attivo: l'XD non lo disegna, restiamo sul minimo leggibile
   (nero pieno contro il muted delle altre voci) */
.bb-account .bb-account-nav__item.is-active .bb-account-nav__link {
  color: var(--bb-fg);
  font-weight: 400;
}

/* "Esci" e' un'aggiunta funzionale finche' l'offcanvas Club loggato non e'
   online: staccato dal resto in modo che non sembri una voce di pari livello */
.bb-account .bb-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: calc(var(--bb-account-nav-step) * 1.4);
}

/* --------------------------------------------------------------------------
   4. Contenuto — sezioni, righe
   -------------------------------------------------------------------------- */

.bb-account-section + .bb-account-section {
  margin-top: clamp(40px, 3.5vw, 90px);
}

.bb-account-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(10px, 0.98vw, 25px);
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-account .bb-account-section__title {
  margin: 0;
  padding: 0;
  font-size: var(--bb-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

.bb-account .bb-account-section__edit {
  flex: none;
  font-size: var(--bb-body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

.bb-account-rows {
  margin-top: clamp(22px, 2.2vw, 57px);
}

.bb-account-row {
  display: grid;
  grid-template-columns: var(--bb-account-label-col) 1fr;
  align-items: baseline;
  gap: 16px;
  min-height: var(--bb-account-row-step);
}

.bb-account-row__label {
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

.bb-account-row__value {
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
  overflow-wrap: anywhere;
}

.bb-account-row__placeholder { color: var(--bb-muted); }

/* spunte delle preferenze di contatto */
.bb-account-check { display: block; color: var(--bb-fg); }
.bb-account-check--off { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   3bis. Notice WooCommerce dentro l'account
   Woo/Shoptimizer li serve azzurri con bottoni a pillola: fuori palette in una
   pagina bianco/nero senza raggi. Li riportiamo alla palette del brand SENZA
   nasconderli (es. "Conferma il tuo indirizzo e-mail per vedere gli ordini
   precedenti" e' funzionale e deve restare leggibile).
   -------------------------------------------------------------------------- */

.bb-account-tpl .woocommerce-info,
.bb-account-tpl .woocommerce-message,
.bb-account-tpl .woocommerce-error,
.bb-account-tpl .woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 0 0 clamp(20px, 2vw, 40px);
  padding: 16px 20px;
  background: var(--bb-light-gray);
  border: 0;
  border-top: 2px solid var(--bb-black);
  border-radius: 0;
  font-size: var(--bb-body);
  line-height: 1.5;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

/* l'errore si distingue solo per il filetto, non per un fondo colorato */
.bb-account-tpl .woocommerce-error {
  border-top-color: #9b1c1c;
  color: #9b1c1c;
}

/* Woo inserisce un ::before con icona/pallino colorato */
.bb-account-tpl .woocommerce-info::before,
.bb-account-tpl .woocommerce-message::before,
.bb-account-tpl .woocommerce-error::before,
.bb-account-tpl .woocommerce-notice::before {
  content: none;
}

/* Woo stampa il bottone PRIMA del testo: con order lo rimandiamo in fondo.
   Il testo e' un nodo anonimo di flex, quindi resta a order 0. */
.bb-account-tpl .woocommerce-info .button,
.bb-account-tpl .woocommerce-message .button,
.bb-account-tpl .woocommerce-error .button,
.bb-account-tpl .woocommerce-notice .button {
  order: 1;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 12px 24px;
  background: var(--bb-black) !important;
  color: #fff !important;
  border: 0;
  border-radius: 0 !important;
  font-size: var(--bb-small);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

.bb-account-tpl .woocommerce-error li { list-style: none; }
.bb-account-tpl .woocommerce-error ul { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   4quater. Tab WISHLIST dentro l'account — XD "…PAGINA DESKTOP – 5"
   Riga: miniatura (284/354.5) a sinistra, a destra nome, colore, prezzo,
   "Aggiungi al carrello", "Rimuovi". Passo verticale 414.5/2560 = 16.2vw/2.
   -------------------------------------------------------------------------- */

.bb-wishlist-account .commercekit-wishlist-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.2vw, 82px);
  margin: clamp(22px, 2.2vw, 57px) 0 0;
  padding: 0;
  list-style: none;
}

/* la lista arriva con le classi WooCommerce products/columns-4: le neutralizziamo */
.bb-wishlist-account .commercekit-wishlist-list::before,
.bb-wishlist-account .commercekit-wishlist-list::after {
  content: none;
}

/* shop.css impone `ul.products.columns-4 li.product { display:flex !important;
   flex-direction:column !important }` per la griglia della vetrina (0,3,2).
   Qui la riga e' un'altra cosa: a parita' di !important vince la specificita',
   quindi il selettore ne deve avere di piu' (0,4,2). */
.bb-account ul.products li.product.bb-wl-item--row {
  display: grid !important;
  flex-direction: row !important;
  grid-template-columns: 25.7% 1fr;
  gap: clamp(16px, 1.7vw, 43px);
  align-items: start;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  list-style: none;
}

.bb-wl-item--row .bb-wl-item__media { display: block; }

.bb-account .bb-wl-item--row .bb-wl-item__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 284 / 354.5;
  object-fit: cover;
  background: var(--bb-light-gray);
}

.bb-wl-item--row .bb-wl-item__body > * { margin: 0; }

.bb-account .bb-wl-item--row .bb-wl-item__name-link {
  display: block;
  text-decoration: none;
  color: var(--bb-fg);
}

.bb-wl-item--row .bb-wl-item__name {
  font-size: var(--bb-body);
  line-height: 1.45;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

.bb-wl-item--row .bb-wl-item__colour {
  margin-top: 6px !important;
  font-size: var(--bb-body);
  line-height: 1.45;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

.bb-wl-item--row .bb-wl-item__price {
  margin-top: clamp(14px, 1.4vw, 34px) !important;
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-tight);
}

.bb-wl-item--row .bb-wl-item__price del { opacity: 0.5; margin-right: 6px; }
.bb-wl-item--row .bb-wl-item__price ins { text-decoration: none; }

/* "Aggiungi al carrello" e "Rimuovi" sono link di testo, non bottoni:
   serve resettare il `button/.button` nero globale di 99-overrides. */
.bb-account .bb-wl-item--row .bb-wl-item__atc-btn,
.bb-account .bb-wl-item--row .bb-wl-item__remove-link {
  display: block;
  width: auto;
  margin-top: clamp(10px, 1vw, 22px);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  font-family: inherit;
  font-size: var(--bb-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--bb-ls-tight);
  text-transform: none;
  color: var(--bb-fg) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

.bb-account .bb-wl-item--row .bb-wl-item__atc-btn.added,
.bb-account .bb-wl-item--row .bb-wl-item__atc-btn.loading {
  opacity: 0.55;
}

/* Il "Rimuovi" e' lo stesso elemento che CommerceKit stila come cestino
   (.commercekit-remove-wishlist2): il suo pseudo-elemento disegnava una
   seconda icona accanto al prezzo. Qui vogliamo solo il link di testo. */
.bb-account .bb-wl-item--row .bb-wl-item__remove-link {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  text-indent: 0;
  overflow: visible;
}

.bb-account .bb-wl-item--row .bb-wl-item__remove-link::before,
.bb-account .bb-wl-item--row .bb-wl-item__remove-link::after {
  content: none !important;
  display: none !important;
}

/* contatore "3 items" del plugin: non previsto dall'XD e non tradotto */
.bb-wishlist-account .commercekit-wishlist-pages { display: none; }

/* CommerceKit appende un "added_to_cart" dopo il pulsante: fuori layout */
.bb-account .bb-wl-item--row .added_to_cart {
  display: block;
  margin-top: 6px;
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

/* wishlist vuota */
.bb-wishlist-account .commercekit-wishlist-empty,
.bb-wishlist-account .cgkit-wishlist-empty {
  margin: clamp(22px, 2.2vw, 57px) 0 0;
  font-size: var(--bb-body);
  color: var(--bb-muted);
}

/* --------------------------------------------------------------------------
   4ter. Tab ORDINI — XD "…PAGINA DESKTOP – 6"
   Griglia 2-up; dentro la card: miniatura 284/552 = 51.4%, poi il blocco testo.
   -------------------------------------------------------------------------- */

.bb-order-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3vw, 64px) 0;
  margin-top: clamp(22px, 2.2vw, 57px);
}

.bb-order-card {
  display: grid;
  grid-template-columns: 51.4% 1fr;
  gap: clamp(14px, 1.7vw, 43px);
  align-items: start;
  padding-right: clamp(12px, 1.2vw, 28px);
}

.bb-order-card__media { display: block; }

.bb-order-card .bb-order-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 284 / 354.5;
  object-fit: cover;
  background: var(--bb-light-gray);
}

.bb-order-card__body > * {
  margin: 0;
  font-size: var(--bb-body);
  line-height: 1.5;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

.bb-order-card__date {
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-title);
}

.bb-order-card__total { margin-top: clamp(14px, 1.4vw, 30px) !important; }

.bb-order-card__link {
  display: inline-block;
  margin-top: clamp(10px, 1vw, 22px) !important;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

.bb-order-pagination {
  display: flex;
  gap: 24px;
  margin-top: clamp(28px, 3vw, 56px);
}

.bb-order-pagination__link {
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* stato vuoto (nessun ordine) */
.bb-account-empty {
  margin: clamp(22px, 2.2vw, 57px) 0 16px;
  font-size: var(--bb-body);
  color: var(--bb-muted);
}

.bb-account-empty__cta {
  display: inline-block;
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   4quinquies. Tab di servizio (Fatturazione, Appuntamenti, Client Advisor,
   Repair Service). L'XD non li disegna: si riusa il ritmo tipografico delle
   altre sezioni account, senza inventare un linguaggio nuovo.
   -------------------------------------------------------------------------- */

.bb-account-service {
  margin-top: clamp(22px, 2.2vw, 57px);
  max-width: 52em;
}

.bb-account-service > * { margin: 0; }
.bb-account-service > * + * { margin-top: clamp(12px, 1.1vw, 22px); }

.bb-account-service__lead,
.bb-account-service__body,
.bb-account-service__note,
.bb-account-service p {
  font-size: var(--bb-body);
  line-height: 1.6;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

.bb-account-service__body,
.bb-account-service__note { color: var(--bb-muted); }

.bb-account .bb-account-service__subtitle {
  margin-top: clamp(26px, 2.4vw, 50px) !important;
  font-size: var(--bb-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* elenchi */
.bb-account-service__list {
  padding-left: 1.1em;
  list-style: disc;
}

.bb-account-service__list li {
  margin-bottom: 6px;
  font-size: var(--bb-body);
  line-height: 1.6;
}

/* i 5 passi della riparazione */
.bb-account-service__steps {
  margin-top: clamp(14px, 1.3vw, 26px) !important;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.bb-account-service__step {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 4px 12px;
  padding: clamp(12px, 1.1vw, 20px) 0;
  border-top: var(--bb-line-width) solid var(--bb-line);
}

.bb-account-service__step:last-child {
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-account-service__step-num {
  font-size: var(--bb-body);
  line-height: 1.5;
  color: var(--bb-muted);
  font-variant-numeric: tabular-nums;
}

.bb-account-service__step-title {
  display: block;
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

.bb-account-service__step-text {
  display: block;
  margin-top: 4px;
  font-size: var(--bb-body);
  line-height: 1.6;
  color: var(--bb-muted);
}

/* due modalita' di appuntamento */
.bb-account-service__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 44px);
  margin-top: clamp(20px, 1.9vw, 40px) !important;
}

.bb-account-service__option > * { margin: 0; }
.bb-account-service__option > * + * { margin-top: 10px; }

.bb-account .bb-account-service__option-title {
  font-size: var(--bb-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* link di contatto e CTA: testo sottolineato, non bottoni neri */
.bb-account-service__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: clamp(12px, 1.1vw, 22px) !important;
}

.bb-account .bb-account-service__contact,
.bb-account .bb-account-service__cta,
.bb-account .bb-account-service__inline-link {
  display: inline-block;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: var(--bb-ls-tight);
  text-transform: none;
  color: var(--bb-fg) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

.bb-account .bb-account-service__cta {
  margin-top: clamp(12px, 1.1vw, 22px);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .bb-account-service__options { grid-template-columns: 1fr; }

  .bb-account-service__lead,
  .bb-account-service__body,
  .bb-account-service__note,
  .bb-account-service p,
  .bb-account-service__list li,
  .bb-account-service__step-text,
  .bb-account .bb-account-service__contact,
  .bb-account .bb-account-service__cta {
    font-size: var(--bb-small);
  }
}

/* --------------------------------------------------------------------------
   4bis. Pannelli di modifica (offcanvas da destra)
   XD "…PAGINA DESKTOP – 2/3/4": foglio bianco 911/2560 = 35.6% desktop,
   344/390 = 88% mobile. Etichetta incassata sul bordo, bottone nero pieno.
   La base .bb-offcanvas (transizioni, X, overlay) arriva da offcanvas.css.
   -------------------------------------------------------------------------- */

.bb-account-panel {
  width: min(456px, 35.6vw);
  max-width: 100%;
}

.bb-account-panel__body {
  padding: clamp(20px, 2vw, 40px) clamp(20px, 2.2vw, 44px) clamp(40px, 4vw, 72px);
}

/* [NEW-204] Il lockup e' salito nell'INTESTAZIONE, sulla linea della X: ora si
   misura sull'ALTEZZA della riga, non sulla larghezza del pannello. Niente
   margine sotto — non separa piu' niente, sta in fila. */
.bb-account-panel__logo {
  display: block;
  height: clamp(22px, 2vw, 28px);
  width: auto;
  margin: 0;
}

/* Due elementi in fila (il titolo e' fuori flusso per GLB-16): logo a
   sinistra, X a destra. */
.bb-account-panel__header {
  justify-content: space-between;
}

/* ── campi ─────────────────────────────────────────────────────────────── */

.bb-account-field {
  position: relative;
  margin-bottom: clamp(18px, 1.7vw, 30px);
}

/* etichetta appoggiata sul bordo superiore, con il fondo che "taglia" la linea */
.bb-account-field__label {
  position: absolute;
  top: 0;
  left: 12px;
  transform: translateY(-50%);
  z-index: 1;
  padding: 0 6px;
  background: var(--bb-bg);
  font-size: var(--bb-tiny); /* [NEW-201] era --bb-small, che dentro l'account
                                vale quanto il corpo: cosi' torna un gradino */
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

.bb-account-panel .bb-account-field__input,
.bb-repair-quote .bb-account-field__input {
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  background: var(--bb-bg);
  border: var(--bb-line-width) solid var(--bb-black);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--bb-body);
  line-height: 1.3;
  color: var(--bb-fg);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;

  /* Shoptimizer impone height:40px fisso su input e select: con padding
     13+13 e bordo restano 12px per una riga da 18px, e il testo viene
     tagliato (overflow:clip). L'altezza la deve decidere il contenuto. */
  height: auto;
  min-height: 0;
}

.bb-account-panel select.bb-account-field__input,
.bb-repair-quote select.bb-account-field__input {
  /* freccia disegnata, niente asset */
  background-image: linear-gradient(45deg, transparent 50%, var(--bb-fg) 50%),
                    linear-gradient(135deg, var(--bb-fg) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* [NEW-255 / ACC-14] QUI C'ERA la regola che teneva nera la data di nascita,
   scritta solo per i campi dell'account. Fabio ha poi chiesto che valga per
   OGNI campo data, quindi e' passata in 99-overrides.css, dove sta anche la
   spiegazione lunga (i pezzi ::-webkit-datetime-edit che Safari schiarisce di
   suo). Lasciarne qui una copia avrebbe voluto dire due regole che dicono la
   stessa cosa: prima o poi se ne cambia una sola. */
.bb-account-panel .bb-account-field__input:focus,
.bb-repair-quote .bb-account-field__input:focus {
  outline: none;
  border-color: var(--bb-black);
  box-shadow: 0 0 0 1px var(--bb-black) inset;
}

.bb-account-field__hint {
  margin: 6px 0 0;
  font-size: var(--bb-tiny);
  line-height: 1.4;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
}

/* occhio mostra/nascondi password */
.bb-account-panel button.bb-account-field__eye {
  position: absolute;
  top: 0;
  right: 0;
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background: transparent !important;
  color: var(--bb-fg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 0.55;
  cursor: pointer;
}

.bb-account-panel button.bb-account-field__eye:hover,
.bb-account-panel button.bb-account-field__eye.is-on {
  opacity: 1;
}

/* ── checkbox ──────────────────────────────────────────────────────────── */

.bb-account-checks {
  margin: 0 0 clamp(18px, 1.7vw, 30px);
  padding: 0;
  border: 0;
}

.bb-account-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-tight);
  cursor: pointer;
}

.bb-account-check-row input[type="checkbox"] {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 3px 0 0;
  accent-color: var(--bb-black);
}

.bb-account-check-row--consent {
  margin-top: clamp(16px, 1.5vw, 26px);
}

.bb-account-consent-text {
  font-size: var(--bb-tiny);
  line-height: 1.5;
  color: var(--bb-muted);
}

.bb-account-consent-text a {
  color: inherit;
  text-decoration: underline;
}

/* ── esito + bottone ───────────────────────────────────────────────────── */

.bb-account-form__feedback {
  margin-bottom: 16px;
  font-size: var(--bb-tiny); /* [NEW-201] vedi sopra */
  line-height: 1.4;
}

.bb-account-form__feedback:empty { margin-bottom: 0; }
.bb-account-form__feedback.is-error { color: #9b1c1c; }
.bb-account-form__feedback.is-success { color: var(--bb-fg); }

.bb-account-panel button.bb-account-form__submit,
.bb-repair-quote button.bb-account-form__submit {
  width: 100%;
  margin-top: clamp(16px, 1.6vw, 28px);
  padding: 17px 24px;
  background: var(--bb-black) !important;
  color: #fff !important;
  border: 0;
  border-radius: 0 !important;
  font-family: inherit;
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: none;
  cursor: pointer;
}

.bb-account-panel button.bb-account-form__submit.is-busy,
.bb-account-panel button.bb-account-form__submit:disabled {
  opacity: 0.55;
  cursor: default;
}

/* --------------------------------------------------------------------------
   5. Mobile — XD "PAGINA UTENTE_MOBILE" (riferimento 390px)
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .bb-account__grid {
    grid-template-columns: 1fr;
  }

  .bb-account__editorial,
  .bb-account .bb-account-nav,
  .bb-account .bb-account__content {
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  .bb-account {
    /* la hero e' a tutta larghezza: i gutter passano ai figli */
    padding-inline: 0;
    padding-block: 0 clamp(40px, 12vw, 64px);
  }

  /* [NEW-249 / ACC-05] Sul telefono il lockup in cima non si vede: la stessa
     scritta sta gia' nella hero subito sotto, e due volte di fila e' una volta
     di troppo su uno schermo dove lo spazio e' tutto.
     NON si usa display:none sull'<h1>: quella e' l'unica intestazione di
     livello uno della pagina, e toglierla dal documento vuol dire lasciare
     senza titolo chi naviga con un lettore di schermo. Si nasconde alla vista
     e si lascia al lettore — e' lo stesso modo in cui il tema tratta i titoli
     dei pannelli offcanvas. */
  .bb-account__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* [NEW-205] Sul telefono il lockup e' nascosto (NEW-249/ACC-05) ma la
     scritta resta: Fabio l'ha voluta anche qui. Senza il suo compagno di riga
     non ha piu' niente a cui allinearsi a destra, quindi si comporta come gli
     altri titoli della pagina — a sinistra, dentro i margini, con l'aria
     sopra e sotto. Resta comunque nell'area SOPRA l'immagine, perche' la riga
     del titolo viene prima della griglia.
     I margini laterali deve mettercelo lei: qui .bb-account ha i gutter a zero
     (l'immagine e' a tutta larghezza), quindi senza margine finirebbe
     appiccicata al bordo dello schermo. */
  .bb-account__intestazione {
    display: block;
  }

  .bb-account__lounge {
    margin: clamp(16px, 5vw, 24px) var(--bb-account-gutter-m, 20px) clamp(10px, 3vw, 14px);
  }

  /* [NEW-246 / ACC-01] Sul telefono le voci sono sottolineate sempre: qui il
     mouse non c'e', e la striscia di schede senza segno non dice che si
     toccano. */
  .bb-account .bb-account-nav__link {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* [NEW-202] Qui c'era `width: min(72vw, 280px)`. Col lockup nuovo
     schiacciava l'immagine (misurato: 280x27, rapporto 10.4 invece di
     2,5): ora la misura e' un'altezza, gia' clampata sulla regola base,
     e il telefono non ha bisogno di una sua. */

  /* Hero editoriale edge-to-edge (XD: 390x540 → 0.722).
     Niente 100vw: includerebbe la scrollbar e creerebbe scroll orizzontale.
     Il gutter e' gia' a zero (padding di #content azzerato + padding-inline 0
     su .bb-account), quindi basta la larghezza piena del contenitore. */
  .bb-account__editorial-img {
    aspect-ratio: 390 / 540;
  }

  /* striscia tab orizzontale scrollabile */
  .bb-account .bb-account-nav {
    margin-top: clamp(20px, 7vw, 28px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bb-account .bb-account-nav::-webkit-scrollbar { display: none; }

  .bb-account-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(18px, 6vw, 28px);
    padding-inline: 20px;
    width: max-content;
  }

  .bb-account-nav__item + .bb-account-nav__item { margin-top: 0; }

  .bb-account .bb-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
  }

  .bb-account .bb-account-nav__link {
    font-size: 13px;
    white-space: nowrap;
  }

  .bb-account .bb-account__content {
    padding-inline: 20px;
    margin-top: clamp(24px, 9vw, 36px);
  }

  /* [NEW-201] Qui erano tutte insieme a --bb-small. Le prime due scendono di
     un gradino; le RIGHE DATI no: sono il "corpo" contro cui il gradino si
     misura, e non erano nell'elenco. */
  .bb-account .bb-account-section__title,
  .bb-account .bb-account-section__edit {
    font-size: var(--bb-tiny);
  }

  .bb-account-row__label,
  .bb-account-row__value {
    font-size: var(--bb-small);
  }

  .bb-account-section__head { padding-bottom: 10px; }
  .bb-account-rows { margin-top: 16px; }

  /* righe su una riga sola: "LABEL: valore" (XD mobile) */
  .bb-account-row {
    display: block;
    min-height: 0;
    margin-bottom: 12px;
  }

  .bb-account-row__label::after { content: ':'; }

  .bb-account-row__value {
    display: inline;
    margin-left: 0.35em;
  }

  .bb-account-row--check .bb-account-row__value {
    display: inline-block;
    vertical-align: -0.25em;
  }

  .bb-account-check { display: inline-block; width: 14px; height: 14px; }

  /* wishlist: miniatura piu' larga in proporzione, testo piu' piccolo */
  .bb-account ul.products li.product.bb-wl-item--row {
    display: grid !important;
    grid-template-columns: 38% 1fr;
    gap: 16px;
  }

  /* [NEW-201] Nella riga wishlist scendono di un gradino solo COLORE e
     PREZZO, che sono metadati. Il NOME del prodotto resta a 12 insieme ai
     comandi: portandolo a 10 diventava piu' piccolo di "aggiungi" e
     "rimuovi", cioe' la cosa che conta scritta piu' in piccolo di quelle
     che la accompagnano. Decisione di Fabio dopo averlo visto misurato. */
  .bb-wl-item--row .bb-wl-item__colour,
  .bb-wl-item--row .bb-wl-item__price {
    font-size: var(--bb-tiny);
  }

  .bb-wl-item--row .bb-wl-item__name,
  .bb-account .bb-wl-item--row .bb-wl-item__atc-btn,
  .bb-account .bb-wl-item--row .bb-wl-item__remove-link {
    font-size: var(--bb-small);
  }

  .bb-wishlist-account .commercekit-wishlist-list { gap: 28px; }

  /* notice: bottone a capo invece che spinto a destra */
  .bb-account-tpl .woocommerce-info .button,
  .bb-account-tpl .woocommerce-message .button,
  .bb-account-tpl .woocommerce-error .button,
  .bb-account-tpl .woocommerce-notice .button {
    margin-left: 0;
  }

  /* ordini: una colonna sola sotto i 767 */
  .bb-order-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bb-order-card {
    grid-template-columns: 40% 1fr;
    padding-right: 0;
  }

  /* [NEW-201] Il testo della scheda ordine scende a `--bb-tiny` (10px).
     Dopo il passo precedente `--bb-body` vale 12 qui dentro, cioe' quanto
     `--bb-small`: il "piccolo" e il "corpo" erano diventati la stessa cosa e
     la scheda aveva perso un gradino. Cosi' tornano distinti: corpo 12,
     piccolo 10.
     ⚠ NON si ottiene riassegnando `--bb-small` sul contenitore: li' c'e'
     gia' `--bb-body: var(--bb-small)`, e i token si risolvono sull'elemento
     stesso — scenderebbe a 10 anche il corpo, e con lui le etichette di
     accesso. Si cambia il punto d'uso, non il token. */
  .bb-order-card__body > * { font-size: var(--bb-tiny); }

  /* pannelli: 344/390 = 88% della viewport (XD mobile) */
  .bb-account-panel {
    width: 88vw;
    max-width: 88vw;
  }

  /* [NEW-204] la misura del logo ora e' un'altezza, ed e' gia' clampata. */
}

/* =========================================================================
   [ACC-15] Tab SPEDIZIONI — rubrica indirizzi
   Artboard desktop -11/-12/-13, mobile -11/-12/-13.
   Riusa i campi dei pannelli (.bb-account-field__label/__input): qui si
   aggiunge solo cio' che la rubrica ha in piu'.
   ====================================================================== */

.bb-addresses {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.bb-address {
  padding: 20px 0;
  border-bottom: 1px solid var(--bb-hairline, #e5e0dc);
}

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

.bb-address__label {
  margin: 0 0 6px;
  font-family: var(--bb-font-ui, 'Jost', sans-serif);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bb-address__lines {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bb-text-soft, #5b5450);
}

/* [NEW-214] "Indirizzo predefinito" e' una casella con la spunta: una sola
   cosa che dice lo stato e permette di cambiarlo. Vale sia per lo <span>
   (quando lo e' gia') sia per il <button> (quando lo si puo' diventare):
   stesso aspetto, comportamento diverso. */
.bb-address__default {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--bb-font-ui, 'Jost', sans-serif);
  font-size: var(--bb-tiny);
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--bb-text-soft, #5b5450);
}

button.bb-address__default { cursor: pointer; }
button.bb-address__default:hover { opacity: .6; }

.bb-address__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: var(--bb-line-width) solid var(--bb-line);
  color: var(--bb-text, #1a1a1a);
}

/* Spuntata: il bordo si scurisce, cosi' la differenza si vede anche se la
   spunta e' piccola. */
.bb-address__default.is-on .bb-address__box {
  border-color: var(--bb-text, #1a1a1a);
}

/* [NEW-214] Spunta a sinistra, comandi a destra: space-between, e i comandi
   raggruppati in un figlio solo perche' restino insieme quando si va a capo. */
.bb-address__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 0;
}

.bb-address__links {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* I bottoni "predefinito" ed "elimina" sono form POST: vanno resi come i link
   accanto, altrimenti si vedrebbero tre stili diversi sulla stessa riga. */
.bb-address__inline { display: inline; margin: 0; }

/* ⚠️ "Rendi predefinito" ed "Elimina" sono <button> dentro una form POST, e il
   tema li vestiva da bottone nero pieno: accanto a "Modifica indirizzo", che e'
   un link, si vedevano tre stili diversi sulla stessa riga. Si vince di
   SPECIFICITA' (0,4,2) invece che con !important, come da regola del progetto. */
.bb-account .bb-address__actions form.bb-address__inline button.bb-address__link,
.bb-account .bb-address__actions a.bb-address__edit,
.bb-address__edit,
.bb-address__link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--bb-font-ui, 'Jost', sans-serif);
  /* [NEW-214] minuscoli, come chiesto. La misura passa da 11px a --bb-tiny:
     11 non e' un valore della scala (10/12/14). */
  font-size: var(--bb-tiny);
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--bb-text, #1a1a1a);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bb-address__link--danger { color: var(--bb-text-soft, #5b5450); }

.bb-address__edit:hover,
.bb-address__link:hover { opacity: .6; }

/* Form: due colonne su desktop, una su mobile. Etichetta e riga 2 stanno su
   tutta la larghezza perche' sono piu' lunghe degli altri campi. */
.bb-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.bb-account-field--wide { grid-column: 1 / -1; }

.bb-account-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
}

.bb-account-cancel {
  font-family: var(--bb-font-ui, 'Jost', sans-serif);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bb-text-soft, #5b5450);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bb-account-field--check label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .bb-account-fields { grid-template-columns: 1fr; }
  /* [NEW-214] Sul telefono i comandi vanno SOTTO la casella e a sinistra
     (Fabio, 01/10), con "elimina" accanto a "modifica".
     ⚠ Misurato prima: a 390 non andavano a capo da soli. La riga ci stava —
     casella fino a x=149, comandi da x=210 a 355 — quindi restavano appesi a
     destra, lontanissimi dal testo che li riguarda. `flex-wrap` non bastava:
     serviva dire di incolonnarli. */
  .bb-address__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Stessa ragione: azzerare cio' che il bottone globale aggiunge (fondo, bordo,
   altezza minima), altrimenti resterebbe un rettangolo attorno al testo. */
.bb-account .bb-address__actions form.bb-address__inline button.bb-address__link {
  min-height: 0;
  height: auto;
  border-radius: 0;
  /* ⚠️ Qui l'!important ci vuole, e non e' pigrizia: 99-overrides.css riga 16
     veste OGNI <button> del sito di nero con `!important`, e contro un
     !important la specificita' da sola non basta. Fra due !important vince
     pero' la specificita', e questo selettore (0,4,2) e' piu' specifico del
     `button` nudo: e' il modo pulito di fare l'eccezione. */
  background: none !important;
  color: var(--bb-text, #1a1a1a) !important;
}

.bb-account .bb-address__actions form.bb-address__inline button.bb-address__link--danger {
  color: var(--bb-text-soft, #5b5450) !important;
}

/* =========================================================================
   [ACC-16 / NEW-256] Dettaglio ordine — artboard desktop -8/-9/-10,
   mobile -4/-9/-10.

   ⚠ [NEW-206] Qui prima si misurava in px propri (11/12/13) e con token
   suoi (--bb-text, --bb-hairline, --bb-font-ui): era l'unico blocco
   dell'account fuori dal sistema del file, ed e' per questo che "stonava".
   Ora le misure sono quelle dell'account. Le proporzioni vengono
   dall'artboard -8, sulla colonna contenuto 2827..5034 (2207 unita'):
   foto 568 = 25.7%, stacco 119 = 5.4%, colonna etichetta 491/1520 = 32.3%,
   cioe' la stessa --bb-account-label-col di tutto il resto.
   ====================================================================== */

.bb-order-detail {
  /* passo verticale delle righe del riepilogo: 77/2560 = 1.5vw */
  --bb-order-row-step: clamp(22px, 1.5vw, 39px);
  /* larghezza della foto e stacco verso le righe */
  --bb-order-media: 25.7%;
  --bb-order-media-gap: 5.4%;
}

/* ⚠ [NEW-262] L'azione di stato non ha piu' un blocco suo sopra il
   contenuto: sta nell'intestazione della sezione, a destra del numero
   d'ordine (vedi bb_account_section_open). Resta qui solo la frase che si
   stampa QUANDO un'azione non c'e'. */
.bb-order-detail__locked {
  margin: 0;
  font-size: var(--bb-body);
  line-height: 1.7;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
}

.bb-order-detail__locked a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

/* ── righe di stato (data, stato, consegna, pacco) ───────────── */

.bb-order-detail__meta {
  list-style: none;
  margin: clamp(22px, 2.2vw, 57px) 0 0;
  padding: 0;
}

.bb-order-detail__riga {
  display: grid;
  grid-template-columns: var(--bb-account-label-col) 1fr;
  align-items: baseline;
  gap: 16px;
  min-height: var(--bb-order-row-step);
}

.bb-order-detail__label,
.bb-order-detail__value {
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

/* Nell'XD il valore dello stato e' l'unica cosa in Medium di tutta la riga:
   e' il dato che si cerca entrando. */
.bb-order-detail__value--status {
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

/* ── titoletti dei blocchi ──────────────────────────── */

.bb-order-detail__title {
  margin: clamp(26px, 2.9vw, 74px) 0 0;
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* ── riepilogo: foto a sinistra, righe a destra ────────────── */

.bb-order-summary {
  margin-top: clamp(18px, 1.8vw, 46px);
}

/* {AV} Due disposizioni, non una.
   L'XD disegna un ordine di UN articolo: foto a sinistra, e accanto articolo
   E totali. Presa alla lettera per piu' articoli, quella struttura impila le
   foto in una colonna sola: con due borse (2:3, alte) le foto scendono per
   mille pixel mentre le righe ne occupano quattrocento, e sotto resta un buco
   bianco. Visto montando il caso a due articoli, non leggendo il codice.
   Percio': con PIU' articoli ognuno si porta la sua foto accanto alla sua
   riga e i totali vengono dopo; con UN articolo i totali risalgono accanto
   alla foto, com'e' disegnato. La marcatura e' la stessa, cambia la classe. */

/* piu' articoli: ogni articolo e' una griglia foto/riga, i totali pure */
.bb-order-summary--molti .bb-order-summary__item,
.bb-order-summary--molti .bb-order-summary__totali {
  display: grid;
  grid-template-columns: var(--bb-order-media) 1fr;
  column-gap: var(--bb-order-media-gap);
  align-items: start;
}

.bb-order-summary--molti .bb-order-summary__item + .bb-order-summary__item {
  margin-top: clamp(16px, 1.6vw, 41px);
}

/* ⚠ Con piu' articoli la foto si misura sull'ALTEZZA, non sulla larghezza.
   A larghezza d'artboard (25.7% = 339px a 1440) una foto 2:3 viene alta 508px
   mentre la riga che le sta accanto ne occupa 75: ogni articolo si porterebbe
   dietro quattrocento pixel di bianco. Nell'XD quella misura regge perche' la
   foto accompagna ANCHE i totali; qui no. La colonna resta larga uguale, cosi'
   etichette e valori restano incolonnati con i totali: a rimpicciolire e'
   l'immagine dentro la cella. Nessun ritaglio: cambia l'altezza, la forma
   resta quella vera. */
.bb-order-summary--molti .bb-order-summary__img {
  max-height: clamp(110px, 8.5vw, 218px);
  width: auto;
}

/* I totali si staccano dall'ultimo articolo: senza, l'importo dell'ultima riga
   e il subtotale finiscono uno sotto l'altro e si confondono. */
.bb-order-summary--molti .bb-order-summary__totali {
  margin-top: clamp(16px, 1.6vw, 41px);
}

/* un articolo solo: la foto tiene la colonna sinistra per tutte e due le
   righe della griglia (articolo e totali), cioe' il disegno dell'XD.
   `display: contents` serve a far salire i figli nella griglia del
   riepilogo: i due involucri non hanno un riquadro proprio. */
.bb-order-summary--uno {
  display: grid;
  grid-template-columns: var(--bb-order-media) 1fr;
  /* ⚠ `auto 1fr` non e' decorativo. La foto occupa tutte e due le righe, e
     con due righe `auto` il browser le spartisce la propria altezza: la riga
     dell'articolo si gonfiava di 150px e i totali scendevano a meta' foto,
     lontanissimi dal disegno. Cosi' la prima riga si misura sul suo contenuto
     e l'avanzo dell'immagine finisce tutto nella seconda. */
  grid-template-rows: auto 1fr;
  column-gap: var(--bb-order-media-gap);
  align-items: start;
}

.bb-order-summary--uno .bb-order-summary__item,
.bb-order-summary--uno .bb-order-summary__totali { display: contents; }

.bb-order-summary--uno .bb-order-summary__media { grid-column: 1; grid-row: 1 / span 2; }
.bb-order-summary--uno .bb-order-summary__row--item { grid-column: 2; grid-row: 1; }
.bb-order-summary--uno .bb-order-summary__righe {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  /* lo stacco fra la riga dell'articolo e i totali: 146/2560 = 2.85vw
     (nell'XD, dalla riga della variante a "Subtotale") */
  margin-top: clamp(18px, 2.85vw, 73px);
}
.bb-order-summary--uno .bb-order-summary__media--vuota { display: none; }

/* ⚠ Nessun rapporto imposto. Su questo sito `woocommerce_thumbnail` e'
   300x450, cioe' 2:3 ritagliato: percio' la foto viene PIU' ALTA di come
   l'XD la disegna (568x709, 4:5) e sotto le righe resta dello spazio
   quando l'ordine ha un articolo solo. E' la scelta meno rischiosa:
   riportarla a 4:5 con `object-fit: cover` vorrebbe dire ritagliare il
   17% dell'altezza di OGNI foto del catalogo, e dove la borsa e'
   inquadrata stretta si perderebbero i manici. La larghezza, che e' cio'
   che si legge come "disegno", resta quella dell'artboard. */
.bb-order-summary__img {
  display: block;
  width: 100%;
  height: auto;
}

/* La foto parte piu' in alto delle righe: 1566-1480 = 86/2560 = 3.4vw. */
.bb-order-summary__row--item {
  padding-top: clamp(10px, 3.4vw, 86px);
}

.bb-order-summary__row {
  display: grid;
  grid-template-columns: var(--bb-account-label-col) 1fr;
  align-items: baseline;
  gap: 16px;
  min-height: var(--bb-order-row-step);
}

.bb-order-summary__label,
.bb-order-summary__value {
  font-size: var(--bb-body);
  font-weight: 400;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

.bb-order-summary__name a {
  color: inherit;
  text-decoration: none;
}

.bb-order-summary__name a:hover,
.bb-order-summary__name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

.bb-order-summary__qty { color: var(--bb-muted); }

/* variante e personalizzazioni: vanno a capo, staccate dal nome come nell'XD
   (il nome a y=1566, la riga della variante a y=1670) */
.bb-order-summary__meta,
.bb-order-summary__price {
  display: block;
  margin-top: clamp(8px, 0.8vw, 20px);
}

.bb-order-summary__meta p { margin: 0; }

/* lo stacco prima del totale: 114 contro 78 delle righe correnti */
.bb-order-summary__row--order_total {
  margin-top: clamp(10px, 1.4vw, 36px);
}

.bb-order-summary__row--order_total .bb-order-summary__label {
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

.bb-order-summary__receipt {
  margin: clamp(16px, 2.4vw, 61px) 0 0;
}

.bb-order-summary__receipt a,
.bb-order-detail__back a {
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

/* ── indirizzi e pagamento ───────────────────────────── */

/* Due colonne, non "quante ce ne stanno": l'XD ne vuole due (fatturazione a
   sinistra, spedizione a destra) e la seconda parte dove parte la colonna
   valore delle righe sopra — 3420 su 2827..5034, cioe' il 26.9%. */
.bb-order-detail__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.3vw, 59px);
  margin-top: clamp(26px, 2.9vw, 74px);
}

.bb-order-detail__columns .bb-order-detail__title,
.bb-order-detail__payment .bb-order-detail__title {
  margin-top: 0;
}

.bb-order-detail__column address,
.bb-order-detail__payment p {
  margin: clamp(10px, 2.3vw, 59px) 0 0;
  font-size: var(--bb-body);
  font-style: normal;
  line-height: 1.8;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

.bb-order-detail__payment {
  margin-top: clamp(26px, 2.9vw, 74px);
}

.bb-order-detail__back {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 1.6vw, 41px);
  margin: clamp(26px, 2.9vw, 74px) 0 0;
}

/* ── schermata "modifica ordine" ──────────────────────── */

.bb-order-edit__lead {
  margin: clamp(22px, 2.2vw, 57px) 0 clamp(20px, 2.4vw, 61px);
  font-size: var(--bb-body);
  line-height: 1.8;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
}

.bb-order-edit__cancel a {
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

/* ── telefono ────────────────────────────────────── */

@media (max-width: 767px) {
  /* Artboard "PAGINA UTENTE_MOBILE - 4" (1170 = 3x di 390):
     la foto sta SOPRA le righe e occupa 568/1170 = 48.5%; la colonna valore
     parte a 551, cioe' il 46.8% della colonna contenuto. */
  /* Una colonna sola, foto sopra le righe (artboard mobile -4). Le due
     disposizioni desktop collassano qui nella stessa.
     ⚠ Vanno azzerati anche gli involucri di --uno: lasciati a
     `display: contents` il risultato era giusto per caso (i nipoti cadono in
     colonna nell'ordine del documento) ma restavano appese grid-column e
     grid-row inerti. */
  .bb-order-summary--uno,
  .bb-order-summary--uno .bb-order-summary__item,
  .bb-order-summary--uno .bb-order-summary__totali,
  .bb-order-summary--molti .bb-order-summary__item,
  .bb-order-summary--molti .bb-order-summary__totali {
    display: block;
  }

  /* ⚠ E va spento il tetto d'altezza di --molti: 8.5vw a 390 fa 33px, il
     clamp lo tira al minimo di 110px e la foto usciva al 23.9% invece del
     48.5% dell'artboard — con due articoli le foto erano meta' di quelle con
     uno. Quel tetto cura il vuoto LATERALE del desktop, e su telefono le
     righe stanno gia' sotto la foto: non c'e' niente da curare. */
  .bb-order-summary--molti .bb-order-summary__img {
    max-height: none;
    width: 100%;
  }

  .bb-order-summary__media {
    max-width: 48.5%;
    margin-bottom: clamp(16px, 4.1vw, 24px);
  }

  .bb-order-summary__row--item { padding-top: 0; }

  .bb-order-detail__riga,
  .bb-order-summary__row {
    grid-template-columns: 46.8% 1fr;
    gap: 8px;
  }

  .bb-order-detail__columns {
    grid-template-columns: 1fr;
    gap: clamp(22px, 7.7vw, 30px);
  }
}

/* ==========================================================================
   [NEW-32] Vista da OSPITE della pagina account (accesso + registrazione).

   Questo foglio nasce per la pagina del cliente LOGGATO: del form da ospite non
   si era mai occupato nessuno, e infatti l'unico stile che gli arrivava era
   quello del vecchio widget Elementor (rimosso in functions.php). Tolto quello,
   restava il form senza margini laterali: titolo e campi attaccati al bordo.

   ⚠️ Il margine si da' SOLO all'ospite, ed e' voluto. Misurato prima di
   scrivere: da loggato i margini ci sono gia' (il titolo parte da x54 su 1440
   e da x20 su 390, se li danno i componenti interni). Mettere il padding sul
   wrapper — la strada ovvia — li avrebbe RADDOPPIATI. `body:not(.logged-in)`
   e' il gancio piu' stretto possibile: la pagina del cliente non la sfiora.
   ========================================================================== */
body:not(.logged-in) .bb-account-wrapper {
  padding-inline: var(--bb-gutter);
}

/* --------------------------------------------------------------------------
   [NEW-35] Il form da ospite: raccolto e centrato, non a piena pagina.

   Com'era: il due-colonne di serie di WooCommerce occupava tutta la larghezza
   (1369px su 1440), con le due colonne pure sbilanciate — 564px "Accedi" e
   725px "Registrati". Per una pagina di accesso e' una distesa.
   Fabio (12/09): restringere e centrare.

   Il limite sta sul contenitore del form e NON sul wrapper, cosi' il padding
   laterale di NEW-32 resta quello che e': i due interventi non si pestano.
   Sotto i 900px il max-width non morde, quindi il mobile e' esattamente come
   prima. Le colonne le pareggiamo, se no restringendo la sproporzione si nota
   di piu'. */
body:not(.logged-in) .bb-account-wrapper > .woocommerce {
  max-width: 900px;
  margin-inline: auto;
}

/* Le due colonne a meta' esatta, ma SOLO da 768px in su: sotto, WooCommerce le
   impila da solo e non va disturbato. Erano 41% e 53% della riga, sbilanciate
   gia' prima; a larghezza ridotta la sproporzione si sarebbe notata di piu'. */
@media (min-width: 768px) {
  body:not(.logged-in) .bb-account-wrapper .u-columns.col2-set {
    display: flex;
    gap: 48px;
  }
  body:not(.logged-in) .bb-account-wrapper .u-columns.col2-set > .u-column1,
  body:not(.logged-in) .bb-account-wrapper .u-columns.col2-set > .u-column2 {
    float: none;
    width: auto;
    flex: 1 1 0;
  }
}

/* --------------------------------------------------------------------------
   [NEW-34] L'occhiello "mostra password": icona, non bottone nero.

   Era un quadrato nero 46x36 sporgente a destra del campo. Il nero, il padding
   10px/15px e il resto NON venivano da noi ma da `.elementor-kit-6 button`
   (0,1,1): la nostra classe singola non bastava, e alzare la specificita' per
   toccare solo il `background` avrebbe riacceso ANCHE le altre dichiarazioni
   della stessa regola del kit — la trappola gia' vista con OPT-1.

   Quindi reset COMPLETO, come si e' fatto per le frecce degli swatch
   (`button.bb-pdp-swatches__nav`): si spegne tutto quello che il kit mette, e
   resta solo l'icona. Due classi (0,2,1) battono il kit senza !important.
   L'occhio vero e' il ::after del bottone, disegnato con una maschera: non lo
   si tocca se non per centrarlo nel campo. */
.bb-account-wrapper button.show-password-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  min-width: 0;
  width: 40px;
  height: 100%;
  top: 0;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-fg);
  cursor: pointer;
}

.bb-account-wrapper button.show-password-input:hover,
.bb-account-wrapper button.show-password-input:focus {
  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
   [NEW-201] LA MISURA DEL TESTO DELLA PAGINA ACCOUNT
   Fabio 30/09: portarla a quella dell'offcanvas.

   Misurato prima di scegliere: l'offcanvas NON ha una misura sola —
   le voci del menu stanno a 12px (33 elementi, `--bb-small`), mentre il
   pannello carrello ha un paragrafo a 14. La misura che si legge come
   "quella dell'offcanvas" e' quella del MENU: 12px. E' quella presa.

   Un token ridefinito, non 27 dichiarazioni riscritte: la pagina era gia'
   tutta su `var(--bb-body)`, quindi basta riassegnarlo qui e scende tutto
   insieme — comprese le viste che si vedono solo da dentro (ordini,
   indirizzi, dati), che io non posso aprire (SEC-01: niente utenti finti).
   Se fosse stato fatto a mano, quelle sarebbero rimaste indietro.

   ⚠ La radice e' il CONTENITORE, non il `<body>`: gli offcanvas e il piede
   stanno dentro `<body>` su ogni pagina, e riassegnare li' avrebbe
   rimpicciolito anche loro, ma solo sull'account.

   ⚠ Conseguenza da sapere: dentro l'account `--bb-body` e `--bb-small`
   valgono ora lo stesso (12px), quindi dove il disegno distingueva "corpo"
   da "piccolo" — le schede ordine — resta un gradino solo. `--bb-tiny`
   (10px) continua a distinguersi.
   ========================================================================== */
.bb-account-wrapper {
  --bb-body: var(--bb-small);
}

/* [NEW-201] La meta' della pagina che si vede DA SCONNESSO (accesso e
   registrazione) non passa dal token qui sopra: e' marcatura di WooCommerce,
   e a dimensionarla sono Shoptimizer e il Customizer, non noi. Misurato con
   CSS.getMatchedStylesForNode:

       label   ->  `.form-row label {font-size:14px}`        Shoptimizer  0,2,0
       h2      ->  `.woocommerce-account h2 {clamp(...)}`    Shoptimizer  0,2,0
       button  ->  `body, button, input, …{font-size:16px}`  Customizer   0,1,0

   Quindi il token da solo non bastava, e la pagina restava com'era: sono
   DUE meta' con due proprietari. Qui si scende alla misura del menu anche
   in questa, con selettori che passano davanti a Shoptimizer (0,3,1 contro
   0,2,0) e senza `!important`.

   Lasciati fuori di proposito:
   · i DUE TITOLI (h2 "Accedi"/"Registrati"): la consegna dice di non
     toccare la gerarchia;
   · i BOTTONI e i CAMPI: sono comandi e testo che si digita, non testo che
     si legge. Il campo in particolare non va rimpicciolito — sotto una certa
     misura il telefono ingrandisce da solo la pagina quando ci si entra. */
body.bb-account-tpl .bb-account-wrapper .form-row label,
body.bb-account-tpl .bb-account-wrapper label,
body.bb-account-tpl .bb-account-wrapper .woocommerce-LostPassword a,
body.bb-account-tpl .bb-account-wrapper .woocommerce-privacy-policy-text,
body.bb-account-tpl .bb-account-wrapper .woocommerce-form-login__rememberme {
  font-size: var(--bb-small);
}

/* ==========================================================================
   [NEW-247 / ACC-02] LA PAGINA DI ACCESSO PRENDE IL VESTITO DELLE VISTE
   INTERNE DELL'ACCOUNT.

   MISURATO PRIMA, i due lati a confronto (1440, e fra parentesi 390):

     elemento        viste interne (il modello)      accesso, com'era
     titolo          12px (10) 500 MAIUSCOLO         26px (22) 600, tondo
                     + filetto 1px sotto             nessun filetto
     etichette       500                             600
     campi           bordo nero, spigoli vivi        bordo #d2d6dc, raggio 4.8
     bottone         nero, spigoli vivi, 500         raggio 4.8, 600

   Il modello e' `bb_account_section_open()`: titolo piccolo maiuscolo
   spaziato, filetto a tutta larghezza sotto, azione a destra. L'XD account
   disegna cosi' TUTTE le viste interne, e l'accesso era l'unica che parlava
   un'altra lingua: e' marcatura cruda di WooCommerce.

   ⚠ I 12px non sono una svista: dentro `.bb-account-wrapper` il token
   `--bb-body` vale `--bb-small`, quindi il titolo di sezione dell'account
   MISURA 12px, non 14. Scriverne 14 qui avrebbe fatto un titolo piu' grande
   di quelli veri — cioe' mancato il bersaglio proprio mentre lo si rincorre.
   Per questo si usa il token e non un numero.

   ⚠ DUE COSE LASCIATE APPOSTA COM'ERANO:
   1. Il CORPO dei campi resta 16px. NEW-201 l'aveva gia' deciso e la ragione
      regge: sotto i 16px il telefono INGRANDISCE la pagina da solo quando si
      entra nel campo, e la pagina salta. Qui si cambiano bordo e spigoli, che
      e' quello che si vede, non la misura.
   2. Il MAIUSCOLO sul bottone resta. I pannelli dell'account hanno
      `text-transform: none`, ma "tutti i bottoni in maiuscolo" e' una
      decisione di sito piu' recente (sta in 99-overrides.css). Fra le due ho
      tenuto quella di sito: cambiarla qui avrebbe fatto dell'accesso
      l'eccezione al posto della regola.

   ⚠ NEW-201 aveva lasciato fuori i titoli apposta («la consegna dice di
   non toccare la gerarchia»). Quella consegna e' cambiata: ACC-02 chiede
   esattamente di allineare l'accesso alle viste interne. Non e' un
   ripensamento mio, e' una richiesta nuova.

   Tutto e' agganciato a `#customer_login`, che esiste SOLO in questa pagina:
   il resto del sito non lo sfiora.
   ========================================================================== */

/* I due titoli "Accedi" e "Registrati" diventano titoli di sezione. */
body .bb-account-wrapper #customer_login > div > h2 {
  margin: 0 0 clamp(18px, 1.7vw, 30px);
  padding: 0 0 clamp(10px, 0.98vw, 25px);
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  font-size: var(--bb-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* Le etichette perdono il grassetto: nelle viste interne il peso e' 500. */
body .bb-account-wrapper #customer_login label {
  font-weight: 500;
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

/* I campi prendono il bordo nero a spigolo vivo dei pannelli account.
   La misura del testo NON si tocca: vedi sopra. */
body .bb-account-wrapper #customer_login input[type="text"],
body .bb-account-wrapper #customer_login input[type="email"],
body .bb-account-wrapper #customer_login input[type="password"] {
  padding: 13px 16px;
  background: var(--bb-bg);
  border: var(--bb-line-width) solid var(--bb-black);
  border-radius: 0;
  box-shadow: none;
  color: var(--bb-fg);
}

/* Il bottone come quello dei pannelli: nero pieno, spigoli vivi, peso 500.
   ⚠ `button[name]` e non `button` e basta: dentro #customer_login c'e'
   anche l'occhiello "mostra password" (NEW-34), che e' un bottone senza nome e
   deve restare un'icona. Vestire tutti i bottoni avrebbe rimesso il quadrato
   nero che NEW-34 aveva tolto. */
body .bb-account-wrapper #customer_login button[name="login"],
body .bb-account-wrapper #customer_login button[name="register"] {
  padding: 17px 24px;
  background: var(--bb-black);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  box-shadow: none;
}

/* Sul telefono i titoli di sezione dell'account scendono di un gradino
   (NEW-201: `--bb-tiny`). Senza questa riga l'accesso sarebbe rimasto a 12px
   mentre le viste interne stanno a 10, cioe' allineato sul desktop e
   disallineato sul telefono: il mezzo lavoro che non si vede finche' non si
   misurano tutte e due le larghezze. */
@media (max-width: 767px) {
  body .bb-account-wrapper #customer_login > div > h2 {
    font-size: var(--bb-tiny);
  }
}

/* La pagina "Password dimenticata?" e' l'altra meta' dello stesso percorso: ci
   si arriva con un clic dal modulo qui sopra, e non ha un `#customer_login`
   suo ma `form.woocommerce-ResetPassword`. Vestita com'era, si passava da una
   pagina a spigoli vivi a una con gli angoli arrotondati e il bordo grigio:
   mezzo lavoro visibile in due clic. Non ha un titolo e non gliene invento
   uno: qui si allineano solo campo e bottone. */
body .bb-account-wrapper .woocommerce-ResetPassword input[type="text"],
body .bb-account-wrapper .woocommerce-ResetPassword input[type="email"] {
  padding: 13px 16px;
  background: var(--bb-bg);
  border: var(--bb-line-width) solid var(--bb-black);
  border-radius: 0;
  box-shadow: none;
  color: var(--bb-fg);
}

body .bb-account-wrapper .woocommerce-ResetPassword button {
  padding: 17px 24px;
  background: var(--bb-black);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  box-shadow: none;
}

/* ==========================================================================
   [NEW-247 / ACC-02] L'IMPAGINATO DELLA PAGINA DI ACCESSO.

   La foto editoriale a sinistra (la stessa bocca dell'area account), a destra
   il lockup, "PRIVATE LOUNGE" e i due moduli INCOLONNATI: accesso sopra,
   registrazione sotto.

   ⚠ QUESTO SUPERA NEW-35. Il 12/09 Fabio aveva chiesto di restringere e
   centrare il modulo (max-width 900px): era la cura giusta per una pagina che
   non aveva un disegno — una distesa vuota si stringe. Ora un disegno c'e', e
   la larghezza la decide la griglia. La regola di NEW-35 non e' sbagliata, e'
   superata: la si scavalca qui invece di cancellarla li', cosi' resta leggibile
   da dove veniva.

   ⚠ E supera anche meta' di NEW-32: il riempimento laterale per l'ospite
   serviva a staccare il modulo dai bordi. Qui la foto DEVE toccare il bordo,
   quindi da 992px in su il riempimento va a zero — e sotto resta, perche' li'
   il modulo e' ancora un modulo su fondo bianco.

   ⚠ I DUE MODULI RESTANO DUE (soluzione B, Fabio 01/10): non si tocca il
   template di WooCommerce, si cambia solo come sono disposti.
   ========================================================================== */

/* [NEW-250] Quando si cambia voce del menu si atterra qui, e questa misura
   evita che il contenuto finisca sotto la testata fissa. Stesso valore
   dell'ancora della pagina di accesso qui sotto: e' lo stesso problema. */
.bb-account .bb-account__content {
  scroll-margin-top: 120px;
}

.bb-accesso__ancora {
  display: block;
  height: 0;
  /* scroll-margin: se no l'ancora finisce sotto la testata fissa */
  scroll-margin-top: 120px;
}

/* ── le etichette appoggiate sul bordo del campo ──────────────────────────
   E' la firma dei pannelli account (.bb-account-field__label). Qui si ottiene
   lo stesso effetto SENZA toccare il markup di WooCommerce: l'etichetta c'e'
   gia', sta prima del campo, e basta sollevarla sul bordo con un fondo bianco
   che taglia la linea.

   Perche' non un segnaposto dentro il campo: il segnaposto sparisce appena si
   scrive, e chi torna sul modulo non sa piu' cosa stava compilando.

   ⚠ `:not(...-for-checkbox)`: l'etichetta di "Ricordami" e' una form-row
   anche lei, ma e' una casella con il testo accanto — sollevarla la staccherebbe
   dalla sua casella. */
body .bb-account-wrapper #customer_login .form-row,
body .bb-account-wrapper .woocommerce-ResetPassword .form-row {
  position: relative;
  margin-bottom: clamp(18px, 1.7vw, 30px);
}

body .bb-account-wrapper #customer_login .form-row > label:not(.woocommerce-form__label-for-checkbox),
body .bb-account-wrapper .woocommerce-ResetPassword .form-row > label {
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 1;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 6px;
  background: var(--bb-bg);
  font-size: var(--bb-tiny);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--bb-ls-tight);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* la riga della casella "Ricordami" non ha un campo: niente spazio in fondo */
body .bb-account-wrapper #customer_login .form-row:has(> .woocommerce-form__label-for-checkbox) {
  margin-bottom: clamp(10px, 1vw, 16px);
}

.bb-accesso__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-accesso__lockup {
  display: block;
  width: 196px;
  height: auto;
  margin: 0 0 14px;
}

.bb-accesso__lounge {
  margin: 0;
  font-size: var(--bb-small);
  font-weight: 400;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-accesso__lounge-forte { font-weight: 600; color: var(--bb-fg); }

/* il passaggio "oppure / crea un account", in fondo al modulo di accesso */
.bb-accesso__passaggio { margin-top: clamp(28px, 2.8vw, 44px); }

.bb-accesso__oppure {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  font-size: var(--bb-tiny);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-accesso__oppure::before,
.bb-accesso__oppure::after {
  content: "";
  flex: 1 1 0;
  border-top: var(--bb-line-width) solid var(--bb-line);
}

.bb-accesso__invito {
  margin: 0 0 12px;
  font-size: var(--bb-small);
  line-height: 1.6;
  color: var(--bb-muted);
}

/* il bottone vuoto: e' un <a>, quindi il vestito se lo prende tutto da qui */
body .bb-account-wrapper .bb-accesso__crea {
  display: block;
  padding: 17px 24px;
  background: transparent;
  color: var(--bb-fg);
  border: var(--bb-line-width) solid var(--bb-black);
  border-radius: 0;
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .25s, color .25s;
}
body .bb-account-wrapper .bb-accesso__crea:hover,
body .bb-account-wrapper .bb-accesso__crea:focus {
  background: var(--bb-black);
  color: #fff;
}

/* ── da 992px: la foto a sinistra, tutto il resto a destra ───────────────── */
@media (min-width: 992px) {
  body:not(.logged-in) .bb-account-wrapper {
    padding-inline: 0;
  }

  body:not(.logged-in) .bb-account-wrapper > .woocommerce {
    display: grid;
    grid-template-columns: 42fr 58fr;
    align-items: start;
    max-width: none;
    margin-inline: 0;
  }

  /* la foto prende la colonna di sinistra per tutta l'altezza */
  body:not(.logged-in) .bb-account-wrapper .bb-accesso__media {
    grid-column: 1;
    /* ⚠ `1 / span 99` e NON `1 / -1`. In una griglia con righe IMPLICITE
       (qui le righe non sono dichiarate) il `-1` non punta alla fine: punta
       all'ultima riga ESPLICITA, che non esiste, e si riduce a una riga sola.
       Misurato: la foto restava alta 749px e il modulo finiva SOTTO invece che
       accanto. Con uno `span` grande le righe in piu' si creano vuote e alte
       zero, e la foto arriva in fondo davvero. */
    grid-row: 1 / span 99;
    align-self: stretch;
    min-height: 100%;
    overflow: hidden;

    /* ⚠ [NEW-301] La riga qui sopra fa arrivare in fondo il CONTENITORE, non
       la FOTOGRAFIA. Misurato a 1440: il contenitore e' alto 1169 e
       l'immagine dentro 749 — proprio il numero che il commento qui sopra
       dice di aver risolto — con 420px di bianco sotto (439 a 1200, 479 a
       992: stringendo peggiora). Il motivo e' che `height: 100%`
       sull'immagine si risolve contro l'altezza DICHIARATA del genitore, che
       e' `auto`: un'altezza in percentuale su un genitore indefinito ricade
       sull'altezza intrinseca, e nessuno se ne accorge perche' la regola
       c'e' ed e' giusta. Con `display: grid` l'immagine diventa un elemento
       di griglia, viene stirata all'area e la sua altezza e' DEFINITA: solo
       allora `object-fit: cover` ha un riquadro vero su cui ritagliare.

       ⚠ Si cura SOLO da 992 in su. Sotto, la foto e' una fascia con
       `aspect-ratio` e l'immagine deborda apposta, ritagliata dall'alto:
       li' il taglio e' quello disegnato e stirare l'immagine lo
       sposterebbe al centro, cioe' si aggiusterebbe una cosa che non e'
       rotta. */
    display: grid;
  }

  body:not(.logged-in) .bb-account-wrapper .bb-accesso__media img {
    min-height: 100%;
  }

  /* tutto il resto sta nella colonna di destra, uno sotto l'altro */
  body:not(.logged-in) .bb-account-wrapper > .woocommerce > .woocommerce-notices-wrapper,
  body:not(.logged-in) .bb-account-wrapper .bb-accesso__intestazione,
  body:not(.logged-in) .bb-account-wrapper #customer_login {
    grid-column: 2;
    width: 100%;
    max-width: 440px;
    padding-inline: clamp(32px, 4vw, 80px);
  }

  body:not(.logged-in) .bb-account-wrapper .bb-accesso__intestazione {
    padding-top: clamp(48px, 5vw, 96px);
    margin-bottom: clamp(32px, 3.4vw, 56px);
  }

  body:not(.logged-in) .bb-account-wrapper #customer_login {
    padding-bottom: clamp(48px, 5vw, 96px);
  }
}

/* ⚠ I due moduli si incolonnano a OGNI larghezza: NEW-35 li metteva
   affiancati da 768px in su. Stessa forma di selettore della regola che
   scavalca, cosi' il confronto e' leggibile; vince per posizione, essendo piu'
   in basso nel file. */
@media (min-width: 768px) {
  body:not(.logged-in) .bb-account-wrapper .col2-set#customer_login {
    display: block;
  }

  /* ⚠ L'ID NEL SELETTORE E' OBBLIGATORIO. A tenere affiancate le due colonne
     e' `my-account.min.css` di WooCommerce con
     `.col2-set#customer_login .col-1 { float: left; width: 41.1765% }`: ha un
     ID, e un ID batte QUALUNQUE numero di classi. La mia regola con quattro
     classi perdeva lo stesso, e il modulo restava largo 134px.
     Non e' una gara a chi ne mette di piu': e' che la specificita' conta gli
     ID per primi, e se dall'altra parte c'e' un ID bisogna averne uno. */
  body:not(.logged-in) .bb-account-wrapper .col2-set#customer_login > .u-column1,
  body:not(.logged-in) .bb-account-wrapper .col2-set#customer_login > .u-column2 {
    float: none;
    width: auto;

    /* ⚠ [NEW-301] La regola di WooCommerce da' TRE proprieta', non due:
       `float: left`, `width: 41.1765%` e `margin-right: 5.88235%`. Qui se ne
       neutralizzavano due e la terza restava. Misurato a 1440: il modulo di
       accesso largo 306 e quello di registrazione 325, bordi destri a 962
       contro 981 — e 5,88% di 325 fa esattamente i 19px di scarto. I due
       moduli stanno UNO SOTTO L'ALTRO: due larghezze diverse incolonnate si
       vedono, perche' non coincidono ne' i campi ne' i filetti dei titoli.
       Si azzera solo qui (il selettore di WooCommerce copre anche
       `.col2-set.addresses`, cioe' la rubrica, che non si tocca). */
    margin-right: 0;
  }
  body:not(.logged-in) .bb-account-wrapper .col2-set#customer_login > .u-column2 {
    margin-top: clamp(40px, 4vw, 72px);
  }
}

/* ── sotto i 992: la foto diventa una fascia, il resto sotto ─────────────── */
@media (max-width: 991px) {
  body:not(.logged-in) .bb-account-wrapper .bb-accesso__media {
    /* a tutta larghezza anche se il wrapper ha i suoi margini */
    margin-inline: calc(var(--bb-gutter) * -1);
    aspect-ratio: 390 / 300;
    overflow: hidden;
  }

  body:not(.logged-in) .bb-account-wrapper .bb-accesso__intestazione {
    margin: clamp(24px, 6vw, 36px) 0 clamp(24px, 6vw, 36px);
  }

  /* sul telefono il lockup e' GIA' dentro la foto: non si ripete */
  body:not(.logged-in) .bb-account-wrapper .bb-accesso__lockup {
    display: none;
  }

  body:not(.logged-in) .bb-account-wrapper .col2-set#customer_login > .u-column2 {
    margin-top: clamp(40px, 10vw, 64px);
  }
}

/* ===========================================================================
   [NEW-299] Richiesta di preventivo: il modulo nell'account e il pannello
   =========================================================================== */

.bb-repair-quote {
  margin-top: clamp(28px, 4vw, 44px);
}

/* L'area di testo eredita il campo e aggiunge solo cio' che la distingue. */
.bb-repair-quote .bb-account-field__input--area {
  resize: vertical;
  min-height: 7em;
  line-height: 1.5;
  font-family: inherit;
}

/* ⚠ Il selettore di file NON si traveste da campo di testo: deve sembrare
   un bottone, se no non si capisce che va cliccato. Si tiene il bordo della
   famiglia e si toglie l'altezza fissa, che su input[type=file] taglia il
   testo del pulsante nativo. */
.bb-repair-quote .bb-account-field__input--file {
  height: auto;
  padding: 12px;
  cursor: pointer;
}

.bb-repair-quote__submit {
  margin-top: clamp(20px, 3vw, 32px);
}

/* L'avviso dopo l'invio, sopra il modulo. */
/* ⚠ Fascia PIENA con testo bianco, non piu' un riquadro col bordo: dopo
   l'invio l'occhio deve trovarla da solo in fondo a una pagina lunga.
   I due colori sono scelti misurando il contrasto col bianco, non a occhio:
   verde 6,64:1 e rosso 8,15:1, tutti e due sopra il 4,5 che serve al testo
   normale. Il rosso e' quello che il tema usa gia' per gli errori, cosi' il
   colore nuovo e' uno solo. */
.bb-repair-quote__esito {
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding: 14px 18px;
  font-size: var(--bb-small, 12px);
  letter-spacing: var(--bb-ls-title, .06em);
  color: #fff;
}

.bb-repair-quote__esito--ok { background-color: #186a3b; }
.bb-repair-quote__esito--no { background-color: #9b1c1c; }

/* La riga che spiega il limite delle foto non deve sembrare un errore. */
.bb-repair-quote .bb-account-field__hint {
  opacity: .72;
}

/* ── il pannello informativo ─────────────────────────────────────────────── */

.bb-preventivo {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}

.bb-preventivo__saluto {
  margin: 0;
  font-size: var(--bb-h2, 16px);
  letter-spacing: var(--bb-ls-title, .06em);
  text-transform: uppercase;
}

.bb-preventivo__nome { text-transform: none; }

.bb-preventivo__intro,
.bb-preventivo__testo {
  margin: 0;
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
  font-size: var(--bb-body, 14px);
  line-height: 1.6;
}

/* ⚠ [NEW-322] Qui c'era lo stile del pulsante del pannello. Non c'e'
   piu': i due richiami usano ora `bb-club-btn`, la stessa classe del
   pannello di login, cosi' restano uguali per costruzione invece che
   per manutenzione. Lo stile vive in offcanvas.css. */



/* ===========================================================================
   [NEW-377] Le note dell'ordine (aggiornamenti scritti al cliente)

   Non c'erano: la riscrittura del riepilogo le aveva perse per strada. Il
   vestito e' quello delle altre sezioni della scheda — nessun colore nuovo,
   la riga sottile come separatore.
   =========================================================================== */

.bb-order-detail__note {
  margin-top: clamp(26px, 3vw, 44px);
}

.bb-order-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-order-note {
  padding: clamp(12px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--bb-line, #e3e3e3);
}

.bb-order-note:last-child {
  border-bottom: 1px solid var(--bb-line, #e3e3e3);
}

.bb-order-note__data {
  margin: 0 0 4px;
  font-size: var(--bb-tiny, 10px);
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  color: var(--bb-muted, #6b6b6b);
}

.bb-order-note__testo p {
  margin: 0 0 .6em;
  font-size: var(--bb-small, 12px);
  line-height: 1.65;
}

.bb-order-note__testo p:last-child {
  margin-bottom: 0;
}