/* ===========================
   BB Product Page CSS
   =========================== */

/* ===========================
   LIGHTBOX (PhotoSwipe) sopra tutto
   Shoptimizer abbassa l'header su .pswp--open, ma la nostra regola header con
   l'ID (#masthead) ha specificità maggiore e lo tiene a z-index 200, coprendo
   la lightbox. Forziamo la .pswp in cima a qualsiasi z-index (header, offcanvas).
   =========================== */
.pswp {
    z-index: 999999 !important;
}

/* ===========================
   PRODUCT DETAILS WRAPPER
   Full width layout override
   =========================== */
.product-details-wrapper {
    max-width: 100% !important;
    width: 100%;
    padding-left: var(--bb-gutter);
    padding-right: var(--bb-gutter);
    margin: 0;
}

/* ===========================
   GALLERIA A FILO DEL BORDO SINISTRO (desktop)
   La galleria (.images, float left) è rientrata dai gutter simmetrici di
   #content.site-content + .product-details-wrapper, quindi il suo containing
   block è centrato: margin-left:calc(50% - 50vw) porta il bordo sinistro
   esattamente sul bordo viewport. Allarghiamo la galleria così il bordo DESTRO
   resta dov'era (gap con la summary invariato, nessun overlap). La summary e i
   margini del lato destro restano intatti.
   flow-root sul wrapper contiene i float senza clippare il full-bleed
   (sostituisce l'overflow:hidden di Shoptimizer, mantenendo lo stacking context
   che serve al fix z-index della lightbox).
   =========================== */
/* flow-root a tutte le larghezze: contiene i float (desktop) e consente il
   full-bleed della galleria senza clipping (desktop e mobile) */
.single-product .product > .product-details-wrapper {
    overflow: visible;
    display: flow-root;
}
@media (min-width: 993px) {
    .single-product .product .images {
        margin-left: calc(50% - 50vw) !important;
        /* galleria 60% (default "Wide"): bordo destro = 0.5vw + 0.1·CB */
        width: calc(50vw + 10%) !important;
    }
}
@media (min-width: 993px) and (max-width: 1199px) {
    .single-product .product .images {
        /* galleria 50% in questa fascia: bordo destro = metà viewport */
        width: 50vw !important;
    }
}
/* Mobile: galleria edge-to-edge su entrambi i lati; la summary sotto (nello
   stesso wrapper) mantiene i gutter perché non tocchiamo il suo padding */
@media (max-width: 992px) {
    .single-product .product .images {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-bottom: 20px; /* respiro tra galleria edge-to-edge e summary */
    }
}

/* ===========================
   HIDE ORIGINAL BREADCRUMB BAR
   (on single product pages)
   =========================== */
.single-product .woocommerce-breadcrumb:not(.bb-product-breadcrumb .woocommerce-breadcrumb) {
    display: none !important;
}

/* Also hide Shoptimizer's breadcrumb wrapper if present */
.single-product .shoptimizer-breadcrumbs,
.single-product .content-top .woocommerce-breadcrumb {
    display: none !important;
}

/* ===========================
   MEMBERS EXCLUSIVE BADGE — PDP
   Small label above breadcrumb
   =========================== */
.bb-pdp-members-badge {
  display: inline-flex;
  margin-bottom: 10px;
}

.bb-pdp-members-badge__text {
  display: inline-block;
  background: var(--bb-bg-dark);
  color: var(--bb-text-light);
  font-size: var(--bb-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
}

@media (max-width: 767px) {
  .summary.entry-summary .bb-pdp-members-badge { order: 5; }
}

/* ===========================
   PRODUCT BREADCRUMB
   (in summary, above title)
   =========================== */
.bb-product-breadcrumb {
    margin-bottom: 12px;
}

.bb-product-breadcrumb .woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: .65rem;
    letter-spacing: 0.01em;
    color: var(--bb-muted);
    margin: 0;
    padding: 0;
}

.bb-product-breadcrumb .woocommerce-breadcrumb a {
    color: var(--bb-text-primary);
    text-decoration: none;
    transition: color var(--bb-transition-fast);
}

.bb-product-breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--bb-fg);
}

/* Separator styling */
.bb-product-breadcrumb .woocommerce-breadcrumb .breadcrumb-separator,
.bb-product-breadcrumb .woocommerce-breadcrumb > span:not(:last-child)::after {
    color: var(--bb-muted);
    opacity: 0.5;
}

.single-product .site-content .col-full {
  background-color: var(--bb-bg-primary)!important;
}

/* ===========================
   PRODUCT SUMMARY
    (Title, Price, Add to Cart)
   =========================== */
/* Il titolo del prodotto e' governato piu' sotto, nel blocco [PDP-01].
 * Qui c'era una regola `.summary h1` che funzionava a meta': forzava il corpo
 * con !important ma perdeva sul peso (una classe contro le tre del CSS
 * dinamico), per cui il titolo restava a 600 pur chiedendo 400. Accorpata li',
 * con la specificita' giusta e senza !important. */

/* Prezzo discreto (governato dal brand, non dal default Shoptimizer): stesso
   peso del corpo, nero pieno, leggero tracking — mai grassetto urlato */
.summary > .price,
.summary > .price .woocommerce-Price-amount,
.summary > .price .woocommerce-Price-amount bdi {
  font-size: var(--bb-body);
  font-weight: 400;
  color: var(--bb-fg);
  letter-spacing: 0.03em;
}

/* [PDP-03] «MAIUSCOLO» sul bottone del carrello.
 *
 * La regola c'era gia' ma non arrivava a destinazione: il CSS dinamico del
 * tema (quello generato dal Customizer, che comincia con
 * `.site-header .custom-logo-link img{...}`) dichiara
 *
 *     .product .cart .single_add_to_cart_button { text-transform:none; font-size:16px; font-weight:600 }
 *
 * cioe' TRE classi contro le nostre due: vinceva lui, e il bottone restava
 * "Aggiungi al carrello" a 16px/600. Si sale a quattro classi invece di usare
 * !important, cosi' la regola resta scavalcabile da chi verra' dopo.
 * Rimette in riga anche il corpo e il peso, che e' meta' di PDP-01.
 */
.product .summary .cart .single_add_to_cart_button {
  border-radius: 0px!important;
  padding: 16px 24px;
  /* [GLB-01] Questa CTA era l'unico bottone del sito scritto in INTER, e
     nessuno se n'era accorto: il font arrivava dal CSS dinamico del
     Customizer (`body .woocommerce ... input#submit.alt, ...`), dove i
     prodotti sono impostati su Inter. Il peso e il corpo li governavamo gia'
     da qui, la famiglia no. */
  font-family: var(--bb-font-body, 'Jost'), sans-serif;
  font-size: var(--bb-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* ===========================
   PDP MODELLO SWATCHES
   Horizontal scrollable product variants
   =========================== */
.bb-pdp-swatches {
    position: relative; /* ancora del tooltip variante */
    margin-top: 32px;
    /* [PDP-07] «Togliere questa linea»: era la riga fra il bottone carrello e
       gli swatches. Tolta la riga resta solo la spaziatura a separare i due
       blocchi — il padding scende da 24 a 8 perche' serviva a staccare il
       testo dal filo, che ora non c'e' piu'. */
    padding-top: 8px;
}

/* Tooltip luxury 2026 sul nome variante (posizione via product.js) */
.bb-pdp-swatches__tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    padding: 6px 11px;
    background: var(--bb-fg);
    color: var(--bb-bg);
    font-family: "Jost", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 2px));
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.bb-pdp-swatches__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--bb-fg);
}

.bb-pdp-swatches__tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px));
}

.bb-pdp-swatches__label {
    display: block;
    font-size: var(--bb-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-fg);
    margin-bottom: 12px;
}

/* Viewport = riga flex: [freccia] [swatch scroll] [freccia] — frecce FUORI dalla
   riga, mai sovrapposte alle immagini */
.bb-pdp-swatches__viewport {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bb-pdp-swatches__scroll {
    flex: 1 1 auto;
    min-width: 0; /* consente lo shrink nel flex -> abilita l'overflow */
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}

.bb-pdp-swatches__scroll::-webkit-scrollbar {
    display: none;
}

/* Frecce di scorrimento — chevron nudo (niente cerchietto), altezza dello
   swatch per allineamento; visibilità dinamica via JS (has-nav / is-hidden) */
.bb-pdp-swatches__nav {
    flex: 0 0 auto;
    display: none; /* mostrata via .has-nav quando la riga overflowa */
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 75px;
    padding: 0;
    color: var(--bb-fg);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.bb-pdp-swatches__viewport.has-nav .bb-pdp-swatches__nav {
    display: inline-flex;
}

/* Direzione non disponibile: sparisce (spazio riservato -> niente salti) */
.bb-pdp-swatches__nav.is-hidden {
    visibility: hidden;
}

.bb-pdp-swatches__nav:hover {
    opacity: 1;
}

.bb-pdp-swatches__nav svg {
    display: block;
    width: 18px;
    height: 18px;
}

.bb-pdp-swatches__item {
    display: block;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    overflow: hidden;
    /* nessun contorno pieno: solo bordo inferiore (riservato, trasparente) */
    border: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--bb-transition-fast);
}

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

/* On hover: bordo solo inferiore 1px */
.bb-pdp-swatches__item:hover {
    border-bottom-color: var(--bb-fg);
}

/* Variante corrente: bordo inferiore fisso */
.bb-pdp-swatches__item.is-current {
    border-bottom-color: var(--bb-fg);
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .bb-pdp-swatches {
        margin-top: 24px;
        padding-top: 20px;
    }

    .bb-pdp-swatches__scroll {
        gap: 8px;
    }

    .bb-pdp-swatches__item {
        width: 65px;
        height: 65px;
    }

    /* Su mobile lo swipe touch è il gesto naturale: nascondiamo le frecce
       (erano 28px, sotto la soglia di tap) e lasciamo scorrere col dito. */
    .bb-pdp-swatches__viewport { gap: 0; }
    .bb-pdp-swatches__viewport .bb-pdp-swatches__nav { display: none !important; }
}

/* ===========================
   STOCK STATUS
   Availability indicator below swatches
   =========================== */
.bb-pdp-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: var(--bb-small);
    color: var(--bb-fg);
}

.bb-pdp-stock__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bb-pdp-stock__value {
    font-weight: 400;
}

.bb-pdp-stock--low .bb-pdp-stock__value {
    color: #b54a32;
}

/* [NEW-63] Nota *Stocks (PDP-06) dentro un tooltip sull'icona "i" (Canva
   p52), al posto dell'asterisco e del paragrafo sotto la riga. Il riquadro si
   aggancia alla riga intera (.bb-pdp-stock e' il riferimento), non all'icona:
   cosi' non esce dalla colonna ne' dallo schermo del telefono. Si apre:
   - al passaggio del mouse, dove c'e' un mouse;
   - al click/tocco e con Invio da tastiera (classe is-open, product.js);
     con la tastiera si entra poi nei link col Tab, e uscendo si chiude.
   Il padding-top trasparente fa da ponte: il mouse passa dall'icona al
   riquadro senza chiuderlo. */
.bb-pdp-stock {
    position: relative;
}
.bb-pdp-stock__info-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none !important;
    color: var(--bb-fg) !important; /* contro button{color:#fff} del kit */
    cursor: pointer;
    min-width: 0;
    line-height: 1;
}
.bb-pdp-stock__info-btn:focus-visible {
    outline: 1px solid var(--bb-fg);
    outline-offset: 2px;
}
.bb-pdp-stock__tip {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 30;
    width: min(360px, 100%);
    padding-top: 8px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.bb-pdp-stock__tip-box {
    display: block;
    padding: 16px 18px;
    background: var(--bb-bg-primary, #fff);
    border: var(--bb-line-width) solid var(--bb-line);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
    font-size: var(--bb-small);
    font-weight: 400;
    line-height: var(--bb-lh-relaxed);
    letter-spacing: 0;
    text-transform: none;
    color: var(--bb-fg);
}
.bb-pdp-stock__info.is-open .bb-pdp-stock__tip {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
@media (hover: hover) {
    .bb-pdp-stock__info:hover .bb-pdp-stock__tip {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }
}

.bb-pdp-stock__note-link {
    /* ⚠️ `color` DEVE essere !important come gli altri reset qui sotto.
       Il bottone nero globale di 99-overrides dichiara `button{color:#fff
       !important}`, e un `color:inherit` normale non lo batte: il testo "lista
       d'attesa" restava BIANCO SU BIANCO. C'era, era largo 67px, il browser lo
       dava per visibile — e in pagina si vedeva un buco in mezzo alla frase.
       Sfondo, bordo, padding e ombra erano gia' stati neutralizzati con
       !important: mancava solo questa riga. Vale per ogni <button> che facciamo
       passare per testo. */
    color: inherit !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* reset del <button> lista d'attesa contro il button nero globale (99-overrides) */
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.bb-pdp-stock__note-link:hover {
    color: var(--bb-fg) !important; /* stessa ragione: il globale e' !important */
    text-decoration: underline;
    background: transparent !important;
}

/* ===========================
   "PIÙ DETTAGLI" LINK
   Single trigger to open details offcanvas
   =========================== */
.bb-pdp__details-link {
  margin-top: 8px;
  margin-bottom: 16px;
}

.bb-details-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bb-body);
  font-weight: 500;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity var(--bb-transition-fast);
  cursor: pointer;
}

.bb-details-trigger:hover {
  opacity: 0.6;
}

.bb-details-trigger svg {
  transition: transform var(--bb-transition-fast);
}

.bb-details-trigger:hover svg {
  transform: translateX(3px);
}

/* ===========================
   PDP EXCERPT CLAMP (360 chars)
   Truncated text + chevron toggle
   =========================== */
.bb-pdp-excerpt__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 4px;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.bb-pdp-excerpt__toggle svg {
  transition: transform var(--bb-transition-fast);
}

.bb-pdp-excerpt.is-expanded .bb-pdp-excerpt__toggle svg {
  transform: rotate(180deg);
}

/* ===========================
   PRODUCT DETAILS OFFCANVAS
   Description + accordion sections
   =========================== */

/* Description at top of offcanvas */
.bb-details-description {
  padding-bottom: 24px;
  font-size: var(--bb-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
}

.bb-details-description ul,
.bb-details-description ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-details-description li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: var(--bb-body);
  line-height: var(--bb-lh-normal);
}

.bb-details-description li::before {
  content: '-';
  position: absolute;
  left: 0;
}

.bb-details-description li:last-child {
  margin-bottom: 0;
}

.bb-details-description p {
  margin: 0 0 8px;
}

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

/* ===========================
   ACCORDION SECTIONS
   Native <details> elements
   =========================== */
.bb-details-accordions {
  /* PDP-15: divisori più sottili — spessore centralizzato (--bb-line-width) e
     colore linea leggero (--bb-line) invece del nero pieno (era 1px var(--bb-fg)). */
  border-top: var(--bb-line-width) solid var(--bb-line);
}

.bb-details-accordion {
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-details-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0; /* PDP-13: più aria (era 18px) */
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Remove default marker */
.bb-details-accordion__header::-webkit-details-marker {
  display: none;
}

.bb-details-accordion__header::marker {
  display: none;
  content: '';
}

.bb-details-accordion__title {
  font-size: var(--bb-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-fg);
  margin: 0;
}

.bb-details-accordion__icon {
  flex-shrink: 0;
  transition: transform var(--bb-transition-fast);
  color: var(--bb-fg);
}

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

/* Accordion content */
.bb-details-accordion__content {
  padding: 0 0 26px; /* PDP-13/PDP-01: più aria nei blocchi dettaglio (era 20px) */
  font-size: var(--bb-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
}

.bb-details-accordion__content p {
  margin: 0 0 12px;
}

.bb-details-accordion__content p:last-child {
  margin-bottom: 0;
}

/* Details list (materials, dimensions, colors) */
.bb-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-details-list li {
  padding: 8px 0; /* PDP-13: più aria tra le righe (era 6px) */
  font-size: var(--bb-body);
  line-height: var(--bb-lh-normal);
}

.bb-details-list li strong {
  font-weight: 600;
}

/* Benedetta Consiglia — DA FARE / DA GUARDARE / DA LEGGERE con icona */
.bb-consiglia {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bb-consiglia__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bb-consiglia__icon {
  flex-shrink: 0;
  color: var(--bb-fg);
}

.bb-consiglia__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-fg);
}

.bb-consiglia__text {
  margin: 0;
  line-height: var(--bb-lh-normal);
  color: var(--bb-fg);
}

/* [PDP-16 → NEW-203] Il filo sotto l'intestazione di questo pannello e' stato
 * il primo a cadere: la geometria della slide 53 lo collocava al 6,84%
 * dell'altezza del pannello, cioe' y=73px, misurato — non la riga sopra gli
 * accordion, che sta al 16,6%. Allora la deroga era limitata a QUESTO pannello
 * perche' `.bb-offcanvas__header` e' condiviso e vive in offcanvas.css.
 * Con NEW-203 Fabio l'ha chiesto su tutti, e la regola sta li': qui non serve
 * piu' niente.
 */

/* More Details offcanvas: all text 20% smaller than base sizes */
#bb-product-details-offcanvas .bb-details-description,
#bb-product-details-offcanvas .bb-details-description li,
#bb-product-details-offcanvas .bb-details-accordion__title,
#bb-product-details-offcanvas .bb-details-accordion__content,
#bb-product-details-offcanvas .bb-details-accordion__content p,
#bb-product-details-offcanvas .bb-details-list li,
#bb-product-details-offcanvas .bb-consiglia__text {
  font-size: calc(var(--bb-body) * 0.8);
}

/* [NEW-59] Pannello Dettagli prodotto: niente righe fra le sezioni e niente
   grassetto (Fabio 18/09). Via i fili sopra e sotto gli accordion (PDP-15 li
   aveva assottigliati, ora si tolgono) e quello sopra "Benedetta consiglia"
   dentro Chi e'; titoli di sezione, etichette in grassetto delle liste
   (Esterno:, Altezza:...) e titoletti di DA FARE/DA LEGGERE a peso normale.
   Lo stacco fra le sezioni resta: lo danno i 20px sopra e sotto ogni titolo.
   Solo in questo pannello: le stesse classi non si toccano altrove. */
#bb-product-details-offcanvas .bb-details-accordions,
#bb-product-details-offcanvas .bb-details-accordion {
  border: 0;
}
#bb-product-details-offcanvas .bb-details-accordion__title,
#bb-product-details-offcanvas .bb-details-list li strong,
#bb-product-details-offcanvas .bb-consiglia__label,
#bb-product-details-offcanvas .bb-details-accordion__content strong,
#bb-product-details-offcanvas .bb-details-accordion__content b {
  font-weight: 400;
}

/* Qui vestiva i due blocchi "Benedetta consiglia 1/2" con testo e link.
   Quei due campi erano vuoti su tutti i modelli e sono stati tolti dal
   tema: nessuno stampa piu' queste classi, quindi via anche il vestito.
   La sezione "Benedetta consiglia" che si vede nel pannello Dettagli e'
   un'altra cosa e usa .bb-consiglia__label, qui sopra. */

/* ===========================
   WISHLIST BUTTON (CommerceKit)
   Bookmark icon, top right aligned with h1
   =========================== */

/* ===========================
   [PDP-01] «Testi piu' piccoli e piu' spazio in generale, piu' arioso»
   ===========================

   Misurato prima di toccare (colonna 447px): titolo 22.4px/600, prezzo 18px,
   e stacchi fra i blocchi di 8px quasi ovunque. Fitto e pesante.

   Il titolo e il prezzo non avevano NESSUNA regola nostra su desktop: li
   vestiva il tema. Non si era visto perche' il titolo era nascosto da un'altra
   parte (vedi il fix in account-wishlist-panel.php), quindi la sua tipografia
   non l'aveva mai guardata nessuno.

   Qui si rimette la scala gia' decisa per la PDP a luglio — titolo leggero,
   prezzo discreto — e si apre il ritmo verticale sulla scala 8/16/24.
   Serve il prefisso .single-product .product per superare il CSS dinamico del
   Customizer, che interviene con tre classi. */

.single-product .product .summary.entry-summary .product_title {
  font-family: "Jost", sans-serif;
  font-size: 20px;
  font-weight: 400;               /* luxury: titolo leggero, non bold */
  line-height: 1.3;
  letter-spacing: 0.015em;
  color: var(--bb-fg);
  margin: 0 0 8px;
}
/* [NEW-67] Il nome del modello porta alla pagina del modello. Fabio: niente
   sottolineatura ne' trattino NEW-47, solo un leggero passaggio al grigio.
   `font: inherit` perche' il kit Elementor (.elementor-kit-6 a) darebbe al
   link 13px/24px: il titolo deve restare identico a prima. */
.single-product .product .summary.entry-summary .product_title .bb-pdp-title__link {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.single-product .product .summary.entry-summary .product_title .bb-pdp-title__link:hover,
.single-product .product .summary.entry-summary .product_title .bb-pdp-title__link:focus-visible {
  color: var(--bb-muted);
  text-decoration: none;
}

.single-product .product .summary.entry-summary > .price {
  font-size: var(--bb-body);
  font-weight: 400;
  color: var(--bb-fg);
  line-height: 1.4;
  margin: 0 0 20px;
}

/* Ritmo verticale: il respiro fra i blocchi informativi */
.single-product .product .summary.entry-summary > .bb-product-breadcrumb { margin-bottom: 20px; }
.single-product .product .summary.entry-summary > .bb-pdp-variant-label  { margin-bottom: 12px; }
.single-product .product .summary.entry-summary > .woocommerce-product-details__short-description { margin-bottom: 20px; }
/* [NEW-58] Piu' stacco fra il prezzo e il paragrafo: era solo il margine del
   prezzo (22px), ora 42px. Solo da 768px: sul telefono il paragrafo non sta
   sotto il prezzo (riordino ≤767, order 70, dopo la disponibilita'). */
@media (min-width: 768px) {
  .single-product .product .summary.entry-summary > .woocommerce-product-details__short-description { margin-top: 20px; }
}

/* E' qui che il disegno chiede "Piu' spazi": intorno a DETTAGLI PRODOTTO,
   fra la descrizione e il bottone del carrello. */
.single-product .product .summary.entry-summary > .bb-pdp__details-link {
  margin-top: 4px;
  margin-bottom: 24px;
}

/* Position the summary as relative anchor */
.single-product .summary.entry-summary {
  position: relative;
}

/* Position wishlist button at top right */
.summary .commercekit-wishlist {
  position: absolute !important;
  top: 30px;
  right: 0;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10;
}

.summary .commercekit-wishlist a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: opacity var(--bb-transition-fast);
  position: relative;
}

.summary .commercekit-wishlist a:hover {
  opacity: 0.6;
}

/* Hide ALL original content (icon, text, everything) */
.summary .commercekit-wishlist a > * {
  display: none !important;
  visibility: hidden !important;
}

/* [PDP-09] «Cambiare logo come quello dell'header».
 *
 * Il segnalibro qui c'era gia', ma era un ALTRO segnalibro: un'icona
 * Heroicons con gli angoli arrotondati e il tratto a 1.5, mentre l'header usa
 * la nostra `assets/icons/bookmark.svg` con gli angoli vivi e il tratto a 1.4.
 * Due segnalibri diversi a pochi centimetri l'uno dall'altro.
 *
 * Invece di ricopiare il disegno in un data-URI (che sarebbe tornato a
 * divergere alla prima modifica dell'icona), si punta al FILE che usa
 * l'header: mask-image + background-color, cosi' l'icona eredita anche il
 * colore del testo. E' la stessa tecnica di CommerceKit, quindi non si
 * combatte con lui.
 */
.summary .commercekit-wishlist a::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url("../icons/bookmark.svg");
  mask-image: url("../icons/bookmark.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity var(--bb-transition-fast);
}

/* Stato "gia' salvato": stesso segnalibro, pieno.
   CommerceKit aggiunge .cg-wishlist-t all'elemento interno. */
.summary .commercekit-wishlist.added a::after,
.summary .commercekit-wishlist a.added::after,
.summary .commercekit-wishlist a:has(i.cg-wishlist-t)::after,
.summary .commercekit-wishlist a:has(.cg-wishlist-t)::after {
  -webkit-mask-image: url("../icons/bookmark-filled.svg");
  mask-image: url("../icons/bookmark-filled.svg");
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .summary .commercekit-wishlist a {
    width: 36px;
    height: 36px;
  }

  .summary .commercekit-wishlist a::after {
    width: 18px;
    height: 18px;
  }
}

/* ===========================
   VARIANT LABEL
   Color variant name below title
   =========================== */
.bb-pdp-variant-label {
  display: block;
  font-size: var(--bb-small);        /* da 14 → 12: maiuscoletto raffinato */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-muted);
  margin-bottom: 8px;
}

/* ===========================
   RIGA COLORE  [PDP-04 / PDP-11]
   "NERO/ARGENTO" — colore principale / metalleria, sopra lo stock
   =========================== */
.bb-pdp-color-line {
  font-size: var(--bb-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--bb-fg);
  margin-top: 16px;
}

/* Armonizzazione micro-label uppercase di sezione: nel luxury sono leggere
   (500) e ariose (tracking ampio), non tecniche (700/600 con tracking stretto) */
.bb-pdp-swatches__label,
.bb-pdp-stock__label,
.bb-pdp-shoe-sizes__label,
.bb-pdp-size-explorer__title,
.bb-pdp-confidence .bb-cart-confidence__title {
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
}

/* ===========================
   SIZE EXPLORER
   "Explore the different sizes" grid
   =========================== */
.bb-pdp-size-explorer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--bb-line-width) solid var(--bb-line);
}

.bb-pdp-size-explorer__title {
  font-size: var(--bb-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  color: var(--bb-fg);
}

.bb-pdp-size-explorer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.bb-pdp-size-explorer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--bb-fg);
  transition: opacity var(--bb-transition-fast);
}

.bb-pdp-size-explorer__item:hover {
  opacity: 0.75;
}

/* [NEW-69] riquadri 4:5 come la Canva p52 (erano 3:4) */
/* [NEW-101] Fabio: via il bordo attorno alle foto. La misura che stai
   guardando resta riconoscibile dal trattino sotto il suo nome (sotto), che
   era gia' li': il riquadro non serviva a dirlo. */
.bb-pdp-size-explorer__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bb-bg-light);
}

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

.bb-pdp-size-explorer__label {
  position: relative;
  font-size: var(--bb-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding-bottom: 5px;
}

/* [NEW-101] La sottolineatura: un trattino corto sotto il nome della misura,
   come tutte le CTA del sito (NEW-47). Fisso sulla misura che stai guardando
   (e' cosi' che si riconosce, ora che il riquadro non ha piu' il bordo), e al
   passaggio del mouse sulle altre. Dove il mouse non c'e' resta solo quello
   della misura corrente: le altre sono foto cliccabili, non righe di testo da
   sottolineare tutte insieme. */
.bb-pdp-size-explorer__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.bb-pdp-size-explorer__item.is-current .bb-pdp-size-explorer__label::after {
  width: 22px;
}
@media (hover: hover) {
  a.bb-pdp-size-explorer__item:hover .bb-pdp-size-explorer__label::after,
  a.bb-pdp-size-explorer__item:focus-visible .bb-pdp-size-explorer__label::after {
    width: 22px;
  }
}

/* ===========================
   CLIENT ADVISOR
   Contact section on PDP
   =========================== */
.bb-pdp-client-advisor {
  margin-top: 24px;
  /* nessun box: solo testo nero su bianco */
}

/* [NEW-115] Fabio: piu' piccolo e piu' grigio. E' un invito di servizio, non
   una cosa da leggere prima del prodotto: adesso sta sulla misura delle note
   (12px) e sul grigio di sistema. Il LINK dentro resta nero: e' l'unica cosa
   qui su cui si clicca, e deve vedersi. */
.bb-pdp-client-advisor__text {
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-muted);
  margin: 0;
}

/* [NEW-115] La misura va chiesta con `body` davanti: `.elementor-kit-6 a`
   (classe + tag) batteva la classe sola e teneva il link a 13px mentre la
   frase scendeva a 12, cosi' la riga si leggeva a due misure. */
body .bb-pdp-client-advisor .bb-pdp-client-advisor__link {
  font-size: inherit;
}
.bb-pdp-client-advisor__link {
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400; /* [NEW-62] peso normale, era 500 */
  transition: opacity var(--bb-transition-fast);
}

.bb-pdp-client-advisor__link:hover {
  opacity: 0.6;
}

/* ===========================
   MOBILE PDP LAYOUT
   Reorder summary sections for mobile mockup
   =========================== */
@media (max-width: 767px) {

  /* Column stack — use order to resequence sections */
  .single-product .summary.entry-summary {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* All direct children: full width, default to bottom of stack */
  .summary.entry-summary > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
    align-self: stretch !important;
    order: 200;
    box-sizing: border-box;
  }

  /* --- Section ordering --- */
  .summary.entry-summary .bb-product-breadcrumb         { order: 10; }
  .summary.entry-summary .product_title                 { order: 20; margin-bottom: 8px; padding-right: 0 !important; text-align: left !important; }
  .summary.entry-summary > .price                       { order: 21; margin-bottom: 8px; }
  /* [NEW-37] Il prezzo non arriva come `.price`: il plugin prezzi lo avvolge in
     un <div data-gem-ignore> senza classe, quindi la regola sopra non lo
     prendeva e il prezzo cadeva a order 200, sotto "Hai bisogno di un
     consiglio?". Lo si aggancia dal contenuto, senza toccare il markup del
     plugin (prezzo Global-e: non si tocca). */
  .summary.entry-summary > div:has(> .wcpbc-price, > .woocommerce-Price-amount) { order: 21; margin-bottom: 8px; }
  /* [NEW-37] Stessa sorte per la nota "*Ogni borsa e' fatta a mano…": su
     desktop segue lo stock, su mobile finiva in fondo dopo il consiglio. */
  /* [NEW-63] la nota *Stocks ora sta nel tooltip della riga stock: niente order 61 */
  .summary.entry-summary .bb-pdp-variant-label          { order: 30; margin-bottom: 0; }

  /* Shoe size header (scarpa) — before ATC form */
  .summary.entry-summary .bb-pdp-shoe-sizes             { order: 35; }

  /* ATC form — ritmo verticale coerente (scala 8/8/24) */
  .summary.entry-summary > .cart {
    order: 40;
    margin-top: 24px;
  }

  /* Waitlist button (OOS) */
  .summary.entry-summary .bb-pdp-waitlist               { order: 40; }

  /* Modello swatches */
  .summary.entry-summary .bb-pdp-swatches               { order: 50; }

  /* Riga colore [PDP-04/PDP-11] — subito sopra lo stock, come nell'artboard */
  .summary.entry-summary .bb-pdp-color-line             { order: 55; }

  /* Stock status */
  .summary.entry-summary .bb-pdp-stock                  { order: 60; }

  /* Short description */
  .summary.entry-summary .woocommerce-product-details__short-description { order: 70; }

  /* "Product Details" / More Details link */
  .summary.entry-summary .bb-pdp__details-link {
    order: 80;
    margin-top: 24px;
    padding-top: 20px;
    border-top: var(--bb-line-width) solid var(--bb-line);
  }

  .summary.entry-summary .bb-details-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 500;              /* da 700 — azione discreta, non intestazione */
    letter-spacing: 0.12em;
    font-size: var(--bb-body);
    text-decoration: none;
  }

  /* Meno linee divisorie: swatches e size-explorer respirano con spazio bianco
     invece di essere recintati da un border-top (estetica luxury). La cesura
     forte resta su "Dettagli prodotto" (order 80). */
  .summary.entry-summary .bb-pdp-swatches,
  .summary.entry-summary .bb-pdp-size-explorer {
    border-top: none;
    padding-top: 0;
    margin-top: 40px;
  }

  .summary.entry-summary .bb-details-trigger svg       { transform: rotate(0deg); }
  .summary.entry-summary .bb-details-trigger:hover svg { transform: translateX(3px); }

  /* Size explorer (borse) */
  .summary.entry-summary .bb-pdp-size-explorer          { order: 90; }

  /* Client advisor */
  .summary.entry-summary .bb-pdp-client-advisor         { order: 100; }

  /* Shop with Confidence */
  .summary.entry-summary .bb-pdp-confidence             { order: 110; }

  /* Hide rating, wishlist in summary column (handled in gallery area) */
  .summary .woocommerce-product-rating                  { display: none !important; }

  /* ATC button full-width */
  .summary .cart .single_add_to_cart_button             { width: 100%; }

  /* Hide WooCommerce tabs */
  .single-product .woocommerce-tabs                     { display: none !important; }
}

/* Hide WooCommerce product data tabs on all viewports (tabs removed via hook; CSS guard for plugins) */
.single-product .woocommerce-tabs {
  display: none !important;
}

/* SKU/COD + Categorie + Tag: rimossi via hook (Shoptimizer li sposta after-summary);
   guardia CSS per eventuali plugin che li ristampano */
.single-product .product_meta {
  display: none !important;
}

/* ===========================
   PDP CONFIDENCE SECTION
   "Shop with Confidence" — inside summary column, after client advisor
   =========================== */
.bb-pdp-confidence {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--bb-line-width) solid var(--bb-line);
}
/* [NEW-65] Il componente interno e' quello del carrello (offcanvas.css) e
   porta un suo filo + 20px sopra: dentro la PDP faceva DUE righe a 25px
   l'una dall'altra. Resta solo quella del blocco qui sopra. */
.bb-pdp-confidence .bb-cart-confidence {
  border-top: 0;
  padding-top: 0;
}

/* Override offcanvas tiny/muted style for PDP context */
.bb-pdp-confidence .bb-cart-confidence__title {
  font-family: "Jost", sans-serif;
  font-size: var(--bb-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bb-fg);
  margin: 0 0 20px;
}

.bb-pdp-confidence .bb-cart-confidence__label {
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Shop with Confidence — 4 link semplici impilati (no toggle, no elenco) */
.bb-pdp-confidence .bb-cart-confidence__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-pdp-confidence .bb-cart-confidence__link {
  width: fit-content;
  font-size: var(--bb-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--bb-transition-fast);
}
.bb-pdp-confidence .bb-cart-confidence__link:hover {
  opacity: 0.6;
}

.bb-confidence-more-link {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--bb-small);
  color: var(--bb-fg);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--bb-transition-fast);
}
.bb-confidence-more-link:hover { opacity: 0.6; }

/* ===========================
   HOW TO WEAR — images grid
   =========================== */
.bb-htw-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.bb-htw-images__item {
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--bb-light-gray);
}

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

.bb-htw-images--placeholder .bb-htw-images__item {
  opacity: 0.3;
}

.bb-htw-text {
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-muted);
  margin: 0;
}

/* ===========================
   COSA CONTIENE — icon grid
   =========================== */
.bb-cc-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 16px 12px;
  margin-bottom: 16px;
}

.bb-cc-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bb-cc-icon {
  width: 32px;
  height: 32px;
  color: var(--bb-fg);
  flex-shrink: 0;
}

.bb-cc-icons__label {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-muted);
  text-align: center;
  line-height: 1.2;
}

.bb-cc-icons__spec {
  font-size: 7px;
  letter-spacing: 0.04em;
  color: var(--bb-muted);
  text-align: center;
  line-height: 1.1;
  opacity: 0.65;
}

.bb-cc-text {
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-muted);
  margin: 8px 0 0;
}

/* B1: 2-column grid on desktop */
@media (min-width: 768px) {
  .bb-pdp-confidence .bb-cart-confidence__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .bb-pdp-confidence .bb-cart-confidence__item:nth-child(odd) {
    border-right: var(--bb-line-width) solid var(--bb-line);
  }
}

/* ===========================
   B5: CONFIDENCE — SHIPPING & RETURNS (Club content)
   =========================== */
.bb-confidence-club-content {
  padding: 0;
}

.bb-confidence-club-acc {
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-confidence-club-acc__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  color: var(--bb-fg);
}

.bb-confidence-club-acc__heading::-webkit-details-marker { display: none; }

.bb-confidence-club-acc__heading::after {
  content: '+';
  font-size: 1rem;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform var(--bb-transition-fast);
}

.bb-confidence-club-acc[open] .bb-confidence-club-acc__heading::after {
  content: '−';
}

.bb-confidence-club-acc__body {
  padding-bottom: 16px;
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-muted);
}

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

.bb-confidence-club-acc__body p:last-child {
  margin-bottom: 0;
}

.bb-confidence-club-acc__list {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-confidence-club-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.bb-confidence-club-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  text-align: center;
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: var(--bb-fg);
  color: var(--bb-text-light) !important;
  transition: opacity var(--bb-transition-fast);
}

.bb-confidence-club-btn:hover {
  opacity: 0.8;
  color: var(--bb-text-light) !important;
}

.bb-confidence-club-btn--outline {
  background: transparent;
  color: var(--bb-fg) !important;
  border: 1px solid var(--bb-fg);
}

.bb-confidence-club-btn--outline:hover {
  background: var(--bb-fg);
  color: var(--bb-text-light) !important;
  opacity: 1;
}

.bb-confidence-shipping-back {
  display: block;
  margin-top: 14px;
  font-size: var(--bb-small);
  color: var(--bb-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0.02em;
  transition: color var(--bb-transition-fast);
}

.bb-confidence-shipping-back:hover {
  color: var(--bb-fg);
}

/* ===========================
   B5: CONFIDENCE — CLIENT REVIEWS
   =========================== */
.bb-confidence-reviews {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-confidence-review {
  padding-bottom: 16px;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-confidence-review:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bb-confidence-review__text {
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
  margin: 0 0 8px;
  font-style: italic;
}

.bb-confidence-review__author {
  display: block;
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-muted);
}

/* PDP: no icon in accordion header — label takes full flex width */
.bb-pdp-confidence .bb-cart-confidence__icon {
  display: none !important;
}

/* ===========================
   B5: CONFIDENCE — SECURE CHECKOUT
   =========================== */
.bb-confidence-checkout__sub {
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  color: var(--bb-fg);
}

.bb-confidence-checkout__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.bb-confidence-checkout__logos svg {
  width: 48px;
  height: 30px;
  border-radius: 3px;
}

/* ===========================
   B5: CONFIDENCE — REPAIR SERVICE
   =========================== */
.bb-confidence-repair__list {
  margin: 12px 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-muted);
}

.bb-confidence-repair__note {
  font-size: var(--bb-small);
  color: var(--bb-muted);
  font-style: italic;
  margin: 0;
  border-top: var(--bb-line-width) solid var(--bb-line);
  padding-top: 12px;
}

/* ===========================
   OOS — WAITLIST BUTTON
   Replaces ATC for out-of-stock products
   =========================== */
.bb-pdp-waitlist {
  margin-top: 8px;
}

.bb-pdp-waitlist__btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: transparent !important;
  color: var(--bb-fg) !important;
  border: 1px solid var(--bb-fg) !important;
  font-family: "Jost", sans-serif;
  font-size: var(--bb-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--bb-transition-fast), color var(--bb-transition-fast);
}

.bb-pdp-waitlist__btn:hover {
  background: var(--bb-fg) !important;
  color: var(--bb-text-light) !important;
}

/* ===========================
   SHOE SIZE HEADER
   "Seleziona la taglia" + "Guida alle taglie" link
   =========================== */
.bb-pdp-shoe-sizes {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--bb-line-width) solid var(--bb-line);
}

.bb-pdp-shoe-sizes__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bb-pdp-shoe-sizes__label {
  font-size: var(--bb-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-fg);
}

.bb-pdp-shoe-sizes__guide {
  font-size: var(--bb-small);
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity var(--bb-transition-fast);
}

.bb-pdp-shoe-sizes__guide:hover {
  opacity: 0.6;
}

/* (shoe-sizes/waitlist order già definiti nel blocco mobile principale sopra) */

/* Bottom padding on mobile so sticky ATC bar doesn't cover last element */
@media (max-width: 767px) {
  .single-product .product-details-wrapper {
    padding-bottom: 72px;
  }
}

/* ===========================
   WAITLIST OFFCANVAS
   OOS form + thank you state
   =========================== */
.bb-waitlist__title {
  font-size: var(--bb-small) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.4;
}

.bb-waitlist__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-waitlist__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-waitlist__field label {
  font-size: var(--bb-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-fg);
}

.bb-waitlist__field span[aria-hidden] {
  color: var(--bb-muted);
}

.bb-waitlist__field input,
.bb-waitlist__field select {
  width: 100%;
  padding: 12px 14px;
  border: var(--bb-line-width) solid var(--bb-line);
  border-radius: 0;
  font-family: "Jost", sans-serif;
  font-size: var(--bb-body);
  color: var(--bb-fg);
  background: var(--bb-bg-primary);
  transition: border-color var(--bb-transition-fast);
  appearance: auto;
}

.bb-waitlist__field input:focus,
.bb-waitlist__field select:focus {
  outline: none;
  border-color: var(--bb-fg);
}

.bb-waitlist__privacy {
  margin-top: 4px;
}

.bb-waitlist__privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--bb-small);
  color: var(--bb-muted);
  cursor: pointer;
  line-height: 1.5;
}

.bb-waitlist__privacy-label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: auto;
}

.bb-waitlist__privacy-label a {
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bb-waitlist__error {
  padding: 10px 14px;
  background: #fef0ee;
  border: 1px solid #e55;
  color: #c33;
  font-size: var(--bb-small);
}

.bb-waitlist__submit {
  width: 100%;
  padding: 16px 24px;
  background: var(--bb-fg) !important;
  color: var(--bb-text-light) !important;
  border: none !important;
  font-family: "Jost", sans-serif;
  font-size: var(--bb-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity var(--bb-transition-fast);
}

.bb-waitlist__submit:hover {
  opacity: 0.8;
}

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

.bb-waitlist__thankyou-text {
  font-size: var(--bb-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
  margin: 0 0 24px;
}

.bb-waitlist__thankyou-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-waitlist__action-link {
  font-size: var(--bb-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--bb-transition-fast);
}

.bb-waitlist__action-link:hover {
  opacity: 0.6;
}

/* ===========================
   SIZE GUIDE OFFCANVAS
   Shoe size table + contact section
   =========================== */
.bb-size-guide__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}

.bb-size-guide__table th,
.bb-size-guide__table td {
  padding: 12px 0;
  text-align: left;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  font-size: var(--bb-body);
}

.bb-size-guide__table th {
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-size-guide__table td:first-child,
.bb-size-guide__table th:first-child {
  font-weight: 600;
}

/* [NEW-232] Le classi passano da .bb-size-guide__* a .bb-advisor__*: lo stesso
   blocco ora sta anche nel pannello "Contatta Caterina" della scheda prodotto,
   e un nome che dice "guida alle taglie" in un pannello che non c'entra manda
   fuori strada chi legge il codice piu' tardi. */
.bb-advisor {
  border-top: 0;
  padding-top: 0;
}

/* La riga in cima serve SOLO quando il blocco segue la tabella delle taglie:
   nel pannello dei recapiti e' il primo elemento, e una riga sopra il primo
   elemento sembrerebbe il taglio di qualcosa che manca. */
.bb-size-guide__table + .bb-advisor {
  border-top: var(--bb-line-width) solid var(--bb-line);
  padding-top: 24px;
}

.bb-advisor__text {
  font-size: var(--bb-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
  margin: 0 0 20px;
}

.bb-advisor__contacts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bb-advisor__group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bb-advisor__heading {
  display: block;
  font-size: var(--bb-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bb-fg);
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-advisor__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--bb-body);
  color: var(--bb-fg);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  transition: opacity var(--bb-transition-fast);
}

.bb-advisor__link:hover {
  opacity: 0.6;
}

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


/* ===========================
   RELATED PRODUCTS
   Horizontal scroll on mobile
   =========================== */
@media (max-width: 767px) {
  .single-product .related.products {
    padding: 0 var(--bb-gutter);
  }

  .single-product .related.products > h2 {
    font-size: var(--bb-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    /* [NEW-37] Su desktop lo stacco (3rem) viene da Shoptimizer
       `.related-wrapper > section > h2`, che su mobile non c'e': il titolo
       restava attaccato all'ultimo link "Il Servizio di Riparazione". */
    padding-top: 3rem;
  }

  .single-product .related.products ul.products {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 8px;
  }

  .single-product .related.products ul.products::-webkit-scrollbar {
    display: none;
  }

  .single-product .related.products ul.products li.product {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

/* ===========================
   A1 — PERSONALIZZAZIONE BUTTON + CONFIRMED STATE
   =========================== */
.bb-pdp-personalizzazione {
  margin-top: 12px;
  margin-bottom: 4px;
}

.bb-pdp-personalizzazione__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none !important;
  border: none;
  padding: 0;
  font-family: "Jost", sans-serif;
  font-size: var(--bb-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bb-fg) !important;
  cursor: pointer;
  transition: opacity var(--bb-transition-fast);
}

.bb-pdp-personalizzazione__trigger:hover {
  opacity: 0.6;
}

.bb-pdp-personalizzazione__state {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-pdp-personalizzazione__preview {
  font-size: var(--bb-h3);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-fg);
  min-width: 48px;
}

.bb-pdp-personalizzazione__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bb-pdp-personalizzazione__action {
  background: none !important;
  border: none;
  padding: 0;
  font-size: var(--bb-tiny);
  color: var(--bb-muted) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--bb-transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: "Jost", sans-serif;
}

.bb-pdp-personalizzazione__action:hover {
  color: var(--bb-fg) !important;
}

.bb-pdp-personalizzazione__sep {
  font-size: var(--bb-tiny);
  color: var(--bb-muted);
}

/* ===========================
   A3 — PERSONALIZZAZIONE OFFCANVAS BODY
   =========================== */
.bb-pers-pricing {
  font-size: var(--bb-small);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-muted);
  margin: 0 0 24px;
}

.bb-pers-pricing--free {
  color: var(--bb-fg);
}

.bb-pers-auth {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.bb-pers-auth__btn {
  display: block;
  text-align: center;
  padding: 14px 24px;
  font-family: "Jost", sans-serif;
  font-size: var(--bb-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: opacity var(--bb-transition-fast);
  background: var(--bb-fg);
  color: var(--bb-bg) !important;
}

.bb-pers-auth__btn--outline {
  background: transparent !important;
  color: var(--bb-fg) !important;
  border: 1px solid var(--bb-fg);
}

.bb-pers-auth__btn:hover {
  opacity: 0.75;
}

.bb-pers-hint {
  font-size: var(--bb-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  color: var(--bb-fg);
}

.bb-pers-input-wrap {
  margin-bottom: 16px;
}

.bb-pers-input {
  display: block;
  width: 120px;
  padding: 12px 16px;
  font-family: "Jost", sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  border: 1px solid var(--bb-fg);
  background: transparent;
  color: var(--bb-fg);
  outline: none;
  transition: border-color var(--bb-transition-fast);
}

.bb-pers-input::placeholder {
  color: var(--bb-line);
  letter-spacing: 0.2em;
}

.bb-pers-error {
  display: block;
  margin-top: 6px;
  font-size: var(--bb-tiny);
  color: #b45353;
}

.bb-pers-no-returns {
  font-size: var(--bb-tiny);
  color: var(--bb-muted);
  margin: 0 0 24px;
  font-style: italic;
  line-height: var(--bb-lh-relaxed);
}

.bb-pers-confirm {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-family: "Jost", sans-serif;
  font-size: var(--bb-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bb-fg) !important;
  color: var(--bb-bg) !important;
  border: none;
  cursor: pointer;
  transition: opacity var(--bb-transition-fast);
}

.bb-pers-confirm:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bb-pers-confirm:not(:disabled):hover {
  opacity: 0.8;
}

/* ===========================
   A2 — ACCESSORIES MOBILE LAYOUT
   Body class .bb-macro-accessori scopes these rules.
   XD order: breadcrumb → title → price → variant → stock → ATC
            → personalizzazione → more details → description → confidence → client advisor
   =========================== */
@media (max-width: 767px) {
  /* Qui lo stock risale a 32: la riga colore lo segue per restargli sopra */
  .bb-macro-accessori .summary.entry-summary .bb-pdp-color-line         { order: 31; margin-top: 8px; }

  /* Stock before ATC (was 60, now 32 — after variant at 30) */
  .bb-macro-accessori .summary.entry-summary .bb-pdp-stock              { order: 32; margin-top: 8px; }

  /* Personalizzazione button right after ATC */
  .bb-macro-accessori .summary.entry-summary .bb-pdp-personalizzazione  { order: 41; }

  /* More Details right after personalizzazione, no decorative top border */
  .bb-macro-accessori .summary.entry-summary .bb-pdp__details-link {
    order: 45;
    margin-top: 16px;
    padding-top: 0;
    border-top: none;
  }

  /* Short description after More Details */
  .bb-macro-accessori .summary.entry-summary
    .woocommerce-product-details__short-description                      { order: 46; }

  /* Swatches not shown in XD accessories mobile — push to end */
  .bb-macro-accessori .summary.entry-summary .bb-pdp-swatches           { order: 200; display: none; }
}

/* ===========================
   [NEW-235 / PRD-17] RECENSIONI DEI CLIENTI (Google)
   Sezione pronta e SPENTA: finche' l'interruttore e' giu' questo foglio non
   incontra niente, e pesa quanto pesa un commento.
   Vestito volutamente semplice, con i caratteri e i colori del tema: quando
   arrivera' il disegno (XD) si cambia questo, non l'impianto.
   =========================== */
.bb-recensioni {
  max-width: 900px;
  margin: clamp(32px, 5vw, 64px) auto;
  padding: 0 var(--bb-gutter);
}

.bb-recensioni__titolo {
  font-size: var(--bb-h3);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.bb-recensioni__media {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

.bb-recensioni__stelle {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

/* La stella vuota resta disegnata ma chiara: il confronto fra piene e vuote
   e' quello che fa leggere il voto a colpo d'occhio. */
.bb-recensioni__stella {
  width: 14px;
  height: 14px;
  fill: var(--bb-line);
}

.bb-recensioni__stella.is-piena {
  fill: var(--bb-fg);
}

.bb-recensioni__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bb-recensioni__elenco {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bb-recensioni__voce {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bb-recensioni__testo {
  margin: 0;
  font-size: var(--bb-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
}

.bb-recensioni__firma {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--bb-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bb-muted);
}

.bb-recensioni__tutte {
  display: inline-block;
  margin-top: 24px;
  font-size: var(--bb-small);
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--bb-transition-fast);
}

.bb-recensioni__tutte:hover {
  opacity: 0.6;
}

/* La misura del link va chiesta con `body` davanti: `.elementor-kit-6 a`
   (una classe + un elemento) batte la classe sola. Stessa trappola di
   NEW-115. */
body .bb-recensioni .bb-recensioni__tutte {
  font-size: var(--bb-small);
}

/* =========================================================================
   [PRD-15 / PRD-16] I pannelli di "Acquista con serenità"

   Il guscio (larghezza, scorrimento, intestazione, X) arriva da .bb-offcanvas:
   qui c'e' solo il contenuto. Le misure sono i token dell'account, perche' e'
   la stessa voce del sito — titoletto piccolo maiuscolo spaziato, corpo
   normale, un filetto a separare.
   ====================================================================== */

.bb-serenita__body > * + * {
  margin-top: clamp(14px, 1.4vw, 22px);
}

.bb-serenita__sottotitolo {
  margin: clamp(24px, 2.4vw, 36px) 0 0;
  padding-bottom: clamp(8px, 0.8vw, 12px);
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  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-serenita__testo {
  margin: 0;
  font-size: var(--bb-body);
  line-height: 1.7;
  color: var(--bb-muted);
}

.bb-serenita__testo--rilievo {
  color: var(--bb-fg);
}

/* ── le zone di spedizione: nome a sinistra, condizioni a destra ───────── */
/* ⚠ `margin-inline` e non `margin`: azzerare tutto il margine spegneva
   anche il `margin-top` che `.bb-serenita__body > * + *` da' a ogni blocco, e
   gli elenchi finivano incollati al paragrafo sopra. Si vedeva solo a schermo:
   nei numeri erano due elementi uno sotto l'altro, come dovevano essere. */
.bb-serenita__zone,
.bb-serenita__paesi,
.bb-serenita__servizi,
.bb-serenita__marchi {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.bb-serenita__zona {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: clamp(12px, 1.2vw, 18px) 0;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-serenita__zona-nome {
  grid-column: 1;
  font-size: var(--bb-small);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

.bb-serenita__zona-costo {
  grid-column: 2;
  text-align: right;
  font-size: var(--bb-small);
  font-weight: 500;
}

.bb-serenita__zona-tempi,
.bb-serenita__zona-corriere {
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

.bb-serenita__zona-corriere { text-align: right; }

/* ── elenchi brevi: paesi, servizi, marchi ─────────────────────────────── */
.bb-serenita__paesi {
  /* ⚠ Diciannove nomi in colonna sono una lista lunga in un pannello
     stretto: a due colonne si leggono in un colpo d'occhio. `columns` e non
     grid, cosi' il numero di righe lo decide il contenuto e non una regola. */
  columns: 2;
  column-gap: 18px;
  font-size: var(--bb-small);
  line-height: 1.9;
  color: var(--bb-muted);
}

/* I quattro servizi: senza foto sono un elenco, con le foto diventano
   tessere due per riga. La regola base vale per tutti e due i casi. */
.bb-serenita__servizio {
  padding: clamp(10px, 1vw, 14px) 0;
  border-bottom: var(--bb-line-width) solid var(--bb-line);
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

/* ⚠ La griglia si accende solo se le tessere hanno la foto: `:has()`. Se le
   immagini non ci sono (sono fuori dal repository, vedi il PHP) l'elenco resta
   un elenco e non una griglia di caselle vuote. */
.bb-serenita__servizi:has(.bb-serenita__servizio--foto) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}

.bb-serenita__servizio--foto {
  padding: 0;
  border-bottom: 0;
}

.bb-serenita__servizio-img {
  display: block;
  width: 100%;
  height: auto;
  /* Le quattro foto non hanno esattamente le stesse proporzioni (da 0,782 a
     0,801): senza questo le tessere verrebbero alte in modo leggermente
     diverso, e in una griglia si nota. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bb-light-gray, #ebebeb);
}

.bb-serenita__servizio--foto .bb-serenita__servizio-nome {
  display: block;
  margin-top: 8px;
  font-size: var(--bb-tiny);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* ⚠ I metodi di pagamento stanno in FILA, non incolonnati. Oggi sono nomi
   perche' i loghi non ci sono ancora, ma la fila e' la forma che avranno: sei
   righe con un filetto ciascuna occupavano mezzo pannello per dire "Visa,
   Mastercard...". Quando arrivano i loghi cambiano i figli, non la forma. */
.bb-serenita__marchi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.bb-serenita__marchio {
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
}

/* I loghi di pagamento: altezza uguale per tutti, larghezza libera. I marchi
   hanno proporzioni molto diverse (PayPal e' lungo il quadruplo della sua
   altezza, American Express e' quasi quadrato): incolonnarli nella stessa
   scatola li deformerebbe o lascerebbe buchi d'aria. Allineandoli per
   altezza la fila si legge come una riga sola.
   ⚠ `max-width` e' la rete contro un SVG con la tela piu' larga del
   disegno: senza, un solo logo manderebbe la riga a capo da solo. */
.bb-serenita__marchio--logo {
  display: flex;
  align-items: center;
}

.bb-serenita__marchio--logo img {
  display: block;
  height: 20px;
  width: auto;
  max-width: 64px;
  object-fit: contain;
}

/* I badge di sicurezza stanno insieme, non uno sotto l'altro: sono marchi,
   non voci di elenco. */
.bb-serenita__marchi--badge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.bb-serenita__marchi--badge .bb-serenita__marchio {
  padding: 0;
  border: 0;
  font-size: var(--bb-tiny);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-muted);
}

/* ── i due comandi ─────────────────────────────────────────────────────── */
.bb-serenita__cta {
  display: inline-block;
  margin-top: clamp(10px, 1vw, 14px);
  padding: 14px 28px;
  background: var(--bb-black);
  color: #fff;
  border: var(--bb-line-width) solid var(--bb-black);
  font-size: var(--bb-small);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s;
}

.bb-serenita__cta:hover,
.bb-serenita__cta:focus {
  background: transparent;
  color: var(--bb-fg);
}

.bb-serenita__link {
  display: inline-block;
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-tight);
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: .5px;
}

/* ⚠ Il link "Recensioni dei clienti" non ha una pagina dietro, quindi e' un
   <button>: va spento tutto quello che il tema mette sui bottoni, se no in
   mezzo a tre link compare un rettangolo. */
button.bb-cart-confidence__link {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}