/* ── BB Homepage ─────────────────────────────────── */

/* ===========================================================================
   [HOME-03 + NEW-03] Una sola misura per il titolo hero e per i testi che
   compaiono sulle immagini.

   Cosa non andava. Il titolo hero dichiarava clamp(26px, 4.2vw, 52px), ma in
   pagina rendeva 32px a QUALSIASI larghezza: lo sovrascriveva
   `.elementar-kit-6 h1 { font-size:32px }` del kit Elementor, che con
   `.classe + elemento` batte la nostra `.classe` sola. La nostra riga era
   codice morto, e il 32px approvato dalla grafica il 27/08 era arrivato per
   caso, non per scelta. Chi avesse ritoccato quel clamp non avrebbe visto
   cambiare nulla.

   NEW-03 chiede che i testi al passaggio del mouse abbiano la stessa
   dimensione del titolo MORE THAN BAGS. Erano 28px contro 32px resi: tre
   numeri scritti a mano in tre punti, destinati a divergere di nuovo al primo
   ritocco. Qui la misura e' UNA SOLA e la usano tutti: se cambia il titolo,
   cambiano da soli anche i testi sulle immagini.

   Il valore viene dalla scala centralizzata `--bb-h1-hero`; il clamp qui e'
   solo la rete di sicurezza finche' quel token non esiste (vive in
   00-tokens.css, che non e' mio: chiesto a chi lo tiene).
   Il limite inferiore 22px e' lo stesso valore che il mobile aveva scritto a
   mano, quindi la regola dedicata per il telefono non serve piu'.
   =========================================================================== */
.bb-home-wrapper {
    --bb-home-title: var(--bb-h1-hero, clamp(22px, 2.2vw, 32px));
}

/* Nascondi titolo di pagina e breadcrumb */
.bb-home-tpl .page-header,
.bb-home-tpl .entry-header,
.bb-home-tpl .entry-title,
.bb-home-tpl h1.page-title,
.bb-home-tpl .woocommerce-breadcrumb,
.bb-home-tpl nav.woocommerce-breadcrumb {
    display: none !important;
}

/* Rimuovi padding/gutter/max-width dal contenitore Shoptimizer */
.bb-home-tpl #content.site-content {
    padding-inline: 0 !important;
    padding: 0 !important;
}
.bb-home-tpl #content.site-content > *,
.bb-home-tpl #content.site-content .col-full,
.bb-home-tpl .content-area,
.bb-home-tpl #primary,
.bb-home-tpl .site-main,
.bb-home-tpl article,
.bb-home-tpl .entry-content {
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.bb-home-wrapper {
    width: 100%;
    overflow-x: hidden;
}

/* ── SECTION 1: VIDEO HERO ── */
.bb-home-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 500px;
    overflow: hidden;
    background: var(--bb-bg-dark);
}
/* [MOB-01] Barretta laterale Club/wishlist: esiste solo sul telefono (XD). */
.bb-home-rail {
    display: none;
}

.bb-home-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.bb-home-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    background: rgba(0,0,0,0.18);
}
/* GLB-07: velo scuro impercettibile in fondo alla hero → il link "esplora la
   collezione" resta leggibile anche sui frame video più chiari. Copre solo il 24%
   inferiore, non tocca la headline centrata. z-index 1 (sopra video/overlay, sotto CTA z6). */
.bb-home-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 24%;
    background: linear-gradient(to top, rgba(0,0,0,0.30), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
}
/* GLB-07: CTA "esplora la collezione" nella hero.
   Comportamento stile Bottega Veneta: fixed a 40px dal fondo viewport finché la
   hero riempie lo schermo, poi (via home.js) cavalca verso l'alto insieme al fondo
   della hero e scompare. position:fixed sfugge a overflow:hidden della hero (nessun
   ancestor ha transform → containing block = viewport). translateX(-50%) va SEMPRE
   preservato dal JS quando aggiorna il transform.
   [NEW-49] Selettore con la "a" davanti: il kit Elementor (.elementor-kit-6 a,
   stesso peso di .bb-home-products__cta a) imponeva di nascosto 13px/400 e i
   12px/500 scritti qui non arrivavano mai. Ora il valore vero e' scritto qui,
   uguale per le due "ESPLORA LE COLLEZIONI" della home. */
a.bb-home-hero__cta {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 0);
    z-index: 6;
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-text-light) !important;
    text-decoration: none;
    line-height: 24px; /* [NEW-49] quella che il kit dava davvero: sottolineatura alla stessa distanza di prima */
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: opacity .3s ease;
    will-change: transform;
}
.bb-home-hero__cta:hover { opacity: .7; }
@media (max-width: 767px) {
    a.bb-home-hero__cta {
        bottom: 28px;
        letter-spacing: 0.14em;
        /* [NEW-129] Su Android andava a capo. Qui la misuro a 184px su 412,
           quindi ci sta larga; ma il telefono di chi legge puo' avere un
           font sostituito e allargarla. Su una riga sola per definizione:
           spazio ce n'e' d'avanzo, e una CTA a capo non e' mai voluta. */
        white-space: nowrap;
    }
}

.bb-home-hero__headline {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 300;
    /* [HOME-03] la misura sta in .bb-home-wrapper; qui serve solo il selettore
       a due classi (vedi sotto) per superare il kit Elementor */
    letter-spacing: var(--bb-ls-title); /* GLB-02: tracking ridotto (era 0.08em) */
    text-transform: uppercase;
    color: var(--bb-text-light) !important;
    margin: 0;
    line-height: 1.1;
    max-width: 800px;
}

/* ── SECTION 2: BRAND MANIFESTO ── */
.bb-home-manifesto {
    padding: clamp(60px, 8vw, 120px) clamp(24px, 8vw, 160px);
    background: var(--bb-bg-primary);
}
.bb-home-manifesto__inner {
    max-width: 900px;
    margin: 0 auto;
}
.bb-home-manifesto__heading {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 300; /* HOME-04: stesso TRATTAMENTO della hero "MORE THAN BAGS" (peso 300); font-size NON toccato (non si ingrandisce) */
    /* [GLB-03] la misura la da' il token --bb-h2 (clamp 16..21) applicato in
       01-base.css. Qui c'era clamp(16px,2vw,22px): stesso limite inferiore e
       1px di differenza in alto, cioe' un doppione che diceva quasi la stessa
       cosa e che comunque perdeva contro il kit Elementor. Una scala sola. */
    letter-spacing: var(--bb-ls-title); /* GLB-02: tracking ridotto (era 0.12em) */
    text-transform: uppercase;
    color: var(--bb-text-primary);
    margin: 0 0 32px;
}
.bb-home-manifesto__body {
    font-family: var(--bb-font-editorial); /* GLB-15: paragrafo editoriale = Playfair Display */
    font-weight: 400;
    font-size: var(--bb-text-editorial); /* GLB-15: narrativo leggermente piu piccolo (Fabio 2026-08-25) */
    line-height: 1.75;
    color: var(--bb-text-primary);
    margin: 0;
}

/* ── SECTION 3: CATEGORY BOXES (2×2 desktop, 1-col mobile) ── */
.bb-home-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    background: var(--bb-bg-light);
}
/* [NEW-121/122] Come lo strip: senza mouse foto pulita e nome sotto, col
   mouse foto pulita a riposo e velo+nome al passaggio. La misura 4:5 vale
   per la FOTO; il riquadro si allunga quanto serve al nome che sta sotto. */
.bb-home-cat-box {
    display: block;
    position: relative;
    text-decoration: none;
}
.bb-home-cat-box img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    display: block;
}
.bb-home-cat-box__overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px 0;
    text-align: center;
}
.bb-home-cat-box__overlay-text {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bb-fg, #111);
    text-align: center;
}
/* [HOME-03 + NEW-03] Le tre applicazioni della stessa misura.
   Due classi, non una: e' il minimo per superare `.elementor-kit-6 h1`
   (titolo) e la regola generica di sopra (testi sulle immagini).
   La vecchia eccezione mobile a 22px e' sparita: il clamp arriva li' da solo. */
.bb-home-hero .bb-home-hero__headline {
    font-size: var(--bb-home-title);
}
/* [NEW-99] I nomi sui box categoria si staccano dal titolone della hero:
   avevano la sua stessa misura (31,7px su uno schermo da 1440) e Fabio li
   vede troppo grandi accanto a quelli delle landing. Ora stanno sulla scala
   dei nomi sulle foto (--bb-overlay-name), condivisa con le landing.
   Le due classi servono ancora: senza, vince la regola generica di sopra. */
/* [NEW-121] Col mouse: foto pulita a riposo, velo + nome al passaggio.
   La misura grande (--bb-overlay-name, NEW-99) vale solo qui, dove il nome
   sta SULLA foto: sotto la foto sarebbe un titolo, non una didascalia. */
@media (hover: hover) and (min-width: 768px) {
    .bb-home-cat-box {
        overflow: hidden;
        aspect-ratio: 4 / 5;
    }
    .bb-home-cat-box img {
        height: 100%;
        aspect-ratio: auto;
    }
    .bb-home-cat-box__overlay {
        position: absolute;
        inset: 0;
        padding: 0 20px;
        background: rgba(0, 0, 0, 0.42);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }
    .bb-home-cat-box:hover .bb-home-cat-box__overlay,
    .bb-home-cat-box:focus-visible .bb-home-cat-box__overlay {
        opacity: 1;
    }
    .bb-home-categories .bb-home-cat-box__overlay-text,
    .bb-home-duo .bb-home-cat-box__overlay-text {
        font-size: var(--bb-overlay-name);
        font-weight: 300; /* HOME-10 */
        letter-spacing: var(--bb-ls-title);
        color: var(--bb-text-light);
    }
}

/* [NEW-54] «MORE THAN BAGS e Classics hanno uno spacing diverso e troppo
   stretto: uniforma a tutto».
   1. Sul telefono Shoptimizer mette `.site h1, .site h2 {letter-spacing:
      -0.01em}` (classe + tag, pesa piu' della nostra classe sola): i titoli
      della home finivano a -0.01em, lettere quasi attaccate. Qui due classi.
   2. Fabio 18/09: un valore UNICO per tutti i titoli, lo stesso delle hero
      categoria (landing.css): il token --bb-ls-heading (00-tokens.css). */
.bb-home-hero .bb-home-hero__headline,
.bb-home-products-intro .bb-home-products-intro__heading,
.bb-home-manifesto .bb-home-manifesto__heading {
    letter-spacing: var(--bb-ls-heading);
}

/* ── Classics label + CTA: SOPRA la fascia prodotti su desktop, SOTTO sul
   telefono (Fabio 18/09; il riordino mobile e' nel blocco ≤767) ── */
.bb-home-products-intro {
    background: var(--bb-bg-primary);
    text-align: center;
    padding: clamp(40px, 5vw, 72px) 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.bb-home-products-intro__heading {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 400;
    font-size: 13px !important;
    letter-spacing: var(--bb-ls-title); /* GLB-02: tracking ridotto (era 0.14em) */
    text-transform: uppercase;
    color: var(--bb-text-primary);
    /* [NEW-05] «piu' spazio tra righe». La grafica lo dava per fatto, ma la
       storia del file dice il contrario: il padding del blocco e' rimasto
       clamp(40px,5vw,72px) per otto commit di fila e questi due margini erano
       a zero, quindi fra "Classics" e "ESPLORA LA COLLEZIONE" restavano i 14px
       delle sole gabbie di riga. Ora sono ~22px: le due righe si leggono come
       due cose distinte, non come un blocco unico. */
    margin: 0 0 8px;
}
/* Il .bb-home-products__cta dentro questa zona non ha padding proprio */
.bb-home-products-intro .bb-home-products__cta {
    padding: 0;
    margin: 0;
}

/* ── SECTION 4: PRODUCT GRID ── */
.bb-home-products {
    background: var(--bb-bg-primary);
    /* [MOB-05] Lo stacco dai riquadri Scarpe/Accessori lo dava il blocco "Ogni
       borsa racconta…", tolto: se ne tiene una sola misura, la stessa. */
    padding-bottom: clamp(52px, 6vw, 84px);
}
.bb-home-products__track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}
/* [NEW-04] Il nome del prodotto sta SOTTO la foto, non sopra.
   Prima era un cartiglio scuro che compariva passando col mouse: si vedeva
   solo a chi ha un mouse, e mai su tablet. La foto tiene il suo formato in un
   contenitore dedicato (.bb-home-products__media) e la didascalia vive sotto,
   nel flusso. */
.bb-home-products__item {
    display: flex;
    flex-direction: column;
    /* [NEW-44] ora e' un link al modello: niente sottolineatura/colore link */
    color: inherit;
    text-decoration: none;
}
.bb-home-products__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bb-color-light-gray);
}
.bb-home-products__label {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}
.bb-home-products__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.bb-home-products__item:hover img {
    transform: scale(var(--bb-img-hover-scale)); /* GLB-09: utility condivisa --bb-img-hover-scale (default 1 = no zoom) */
}
/* [NEW-121/122] Due stati, non tre.
   BASE (telefono, e ogni schermo senza mouse): foto PULITA e nome SOTTO,
   nero su bianco. Niente velo: l'immagine si guarda per quello che e'.
   COL MOUSE (blocco piu' sotto): la foto resta pulita a riposo e al
   passaggio compaiono insieme velo e nome, bianchi al centro.
   E' il contrario della NEW-109, che li teneva accesi sempre e ovunque:
   Fabio (23/09) ha scelto la foto pulita e il nome che si fa avanti solo
   quando lo cerchi. */
.bb-home-products__label {
    padding: 14px 12px 0;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--bb-fg, #111);
}

@media (hover: hover) and (min-width: 768px) {
    .bb-home-products__item {
        position: relative;
    }
    .bb-home-products__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.36);
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
    }
    .bb-home-products__label {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 12px;
        color: #fff;
        /* [NEW-99] stessa scala dei nomi sui box piccoli delle landing. */
        font-size: var(--bb-overlay-name-sm);
        letter-spacing: 0.1em;
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
        z-index: 1;
    }
    .bb-home-products__item:hover .bb-home-products__media::after,
    .bb-home-products__item:focus-visible .bb-home-products__media::after,
    .bb-home-products__item:hover .bb-home-products__label,
    .bb-home-products__item:focus-visible .bb-home-products__label {
        opacity: 1;
    }
}

.bb-home-products__cta {
    text-align: center;
    padding: 52px 24px 8px; /* HOME-11: piu spazio sopra/sotto */
    margin: 0;
}
.bb-home-products__cta a {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    /* [NEW-49] Stessa misura della CTA nella hero (era 14px/500 da HOME-11):
       Fabio le vuole identiche. */
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--bb-text-primary); /* HOME-11: underline piu marcata */
    padding-bottom: 5px;
    transition: opacity 0.2s;
}
.bb-home-products__cta a:hover {
    opacity: 0.5;
}


/* ── SECTION 6: SCARPE + ACCESSORI ── */
.bb-home-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--bb-bg-light);
}

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

/* ── MOBILE (≤767px) ── */
@media (max-width: 767px) {
    .bb-home-manifesto {
        padding: 48px 20px;
    }

    .bb-home-categories {
        grid-template-columns: 1fr;
        gap: 0;
        background: var(--bb-bg-primary);
    }
    /* [NEW-128] Nel modo "no velo - nome sotto" il nome stava appiccicato al
       box successivo: ci vuole aria sotto. 28px, lo stesso numero su home e
       landing — se cambia di la', cambia anche qui. */
    .bb-home-cat-box,
    .bb-home-products__item {
        padding-bottom: 28px;
    }
    /* [NEW-135] CAROSELLO: qui non c'e' il nome sotto la foto, perche' non
       c'e' nessun nome fermo da leggere — si scorre. Il nome compare SULLA
       scheda che si sta guardando, col velo, e le altre restano pulite.
       La classe la mette assets/js/carosello-focus.js. */
    .bb-home-products__item {
        /* senza questo il nome qui sotto si ancora al primo antenato
           posizionato — che qui e' il contenuto della pagina — e finisce
           fuori dalla scheda: il velo si vedeva, il nome no. */
        position: relative;
    }
    .bb-home-products__label {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 12px;
        color: #fff;
        font-size: var(--bb-overlay-name-sm);
        letter-spacing: 0.1em;
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
        z-index: 1;
    }
    .bb-home-products__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.36);
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
    }
    .bb-home-products__item.is-active .bb-home-products__media::after,
    .bb-home-products__item.is-active .bb-home-products__label {
        opacity: 1;
    }
    /* [NEW-129] Qui c'era `aspect-ratio: 4/5; width: 100%` sul BOX. Aveva
       senso quando il box ERA la foto; da NEW-121/122 il box contiene la
       foto (che ha lei la proporzione) piu' il nome sotto piu' 28px d'aria.
       La proporzione imposta al contenitore chiedeva quindi una larghezza
       pari all'altezza x 4/5: su uno schermo da 412 i box venivano larghi
       465, sbordavano di 53px e si portavano dietro tre difetti diversi —
       il nome sembrava spostato a destra (era centrato nel box, ma il box
       usciva dallo schermo), l'ultimo box copriva la hero del Club, e il
       fondo pagina risultava tagliato. Tolta la riga, tolti i tre. */
    .bb-home-products__cta a {
        letter-spacing: 0.14em; /* [NEW-49] come la CTA della hero su mobile */
    }
    /* Product grid → horizontal scroll carousel */
    .bb-home-products__track {
        grid-template-columns: unset;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1px;
        padding: 0;
    }
    .bb-home-products__track::-webkit-scrollbar {
        display: none;
    }
    /* [MOB-07] Misure dell'XD HOME 2026 mobile: scheda 306 x 382 su 390, cioe'
       il 78% della larghezza, cosi' si intravede la successiva. */
    .bb-home-products__item {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
    .bb-home-products__media {
        aspect-ratio: 306 / 382;
    }

    /* [MOB-07] «lasciare mouseover ma sistemare perche' non funziona bene».
       Sul telefono il mouseover non esiste: dopo NEW-04 il nome stava sotto la
       foto e nessun "passaggio sopra" era possibile. Come nell'XD, il nome
       torna SULLA foto, bianco al centro con un velo grigio, sulla scheda che
       si ha davanti mentre si scorre (classe is-active, messa da home.js con un
       IntersectionObserver). Da NEW-44 le schede sono link al modello: il
       velo dipende dallo scorrimento, non da :hover, quindi il primo tocco
       apre subito la pagina (niente doppio tocco come in MOB-03). */
    /* [MOB-07] Sul telefono "Classics" + CTA stanno SOTTO il carosello (XD;
       Fabio 18/09: su desktop invece sopra, come nel markup). Il contenitore
       diventa una colonna, l'intro passa dopo i prodotti e tutto quello che
       segue i prodotti viene dopo l'intro. */
    .bb-home-wrapper {
        display: flex;
        flex-direction: column;
    }
    .bb-home-products-intro {
        order: 1;
        padding: 32px 24px 48px;
    }
    .bb-home-products ~ * {
        order: 2;
    }
    .bb-home-products {
        padding-bottom: 0;
    }

    /* [MOB-01] Barretta laterale sopra la hero, a destra (XD: 56px di
       larghezza, bianco al 30%, icone nere una sotto l'altra). */
    .bb-home-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        width: 56px;
        padding: 22px 0;
        background: rgba(255, 255, 255, 0.3);
    }
    .bb-home-rail__btn {
        display: flex;
        color: var(--bb-black);
        text-decoration: none;
    }
    .bb-home-rail__btn svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
    }
    /* Fumetto chat spento finche' il chatbot nuovo non e' attivo (Fabio 18/09).
       Markup e link restano: per riaccenderlo si toglie solo questa regola. */
    .bb-home-rail__btn--chat {
        display: none;
    }
    /* la "C" del Club e' un'icona piena, come in testata (NEW-21) */
    .bb-home-rail__btn[data-action="toggle-club"] svg {
        fill: currentColor;
        stroke: none;
    }

    .bb-home-duo {
        grid-template-columns: 1fr;
    }
}

/* ── SECTION 7: CLUB HERO ── */
.bb-home-club-hero {
    position: relative;
    width: 100%;
    background: var(--bb-bg-dark);
}
/* Immagine scorre in altezza naturale — nessun ritaglio */
.bb-home-club-hero__bg {
    display: block;
    width: 100%;
    height: auto;
}
/* Overlay centrato in posizione assoluta sull'intera sezione */
.bb-home-club-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: rgba(0,0,0,0.22);
}
.bb-home-club-hero__logo {
    width: 540px; /* HOME-12: logo Club piu grande (era 400px) */
    max-width: 72%;
    height: auto;
    filter: invert(1);
    margin-bottom: 40px;
}
@media (max-width: 767px) {
    .bb-home-club-hero__logo {
        width: clamp(240px, 60vw, 340px); /* HOME-12: piu grande su mobile */
        margin-bottom: 26px;
    }
}
.bb-home-club-hero__cta {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bb-text-light) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding-bottom: 3px;
    transition: border-color 0.2s, opacity 0.2s;
    cursor: pointer;
}
.bb-home-club-hero__cta:hover {
    border-color: var(--bb-text-light);
    opacity: 0.75;
}