/* ===========================
   BB Header CSS
   =========================== */

/* [NEW-362] Il PREHEADER non c'e' piu'. Qui stava un `display: none
   !important` che lo nascondeva mentre il markup continuava a uscire su ogni
   pagina: spento alla vista, vivo nel codice, e le sue due stringhe finivano
   nei giri di traduzione. Tolto il markup (functions.php), tolte le regole. */

/* ===========================
   GLOBAL-E FREE SHIPPING BAR
   =========================== */
.ge-free-shipping-container,
.ge-free-shipping-container-desktop {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Jost', sans-serif !important;
    font-weight: 300 !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ge-free-shipping-container *,
.ge-free-shipping-container-desktop * {
    color: #fff !important;
    font-family: 'Jost', sans-serif !important;
}

/* ===========================
   MAIN HEADER
   =========================== */
header#masthead.site-header {
    /* [NEW-48] Fabio/Roberta 18/09: il bordo sotto l'header «praticamente
       invisibile» (era la linea di sito, grigio all'8%). Resta 1px, cosi'
       l'altezza dell'header non cambia. */
    border-bottom: var(--bb-line-width) solid rgba(17, 17, 17, 0.01);
    background: var(--bb-bg);
    position: sticky;
    top: 0;
    z-index: var(--bb-z-sticky);
}

/* Lightbox aperta: abbassa l'header sotto la galleria. La .pswp è ingabbiata
   nello stacking context di .product-details-wrapper (z-index:5, Shoptimizer),
   quindi non basta alzare la .pswp: va abbassato l'header. Shoptimizer lo fa
   già (body:has(.pswp--open) .site-header{z-index:2}) ma la nostra regola con
   #masthead lo sovrascrive tenendolo a 200 → lo riabbassiamo esplicitamente. */
body:has(.pswp--open) header#masthead.site-header {
    z-index: 0 !important;
}

header#masthead .main-header,
header#masthead .main-header.col-full {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    /* GLB-06/Bottega: header a PIENA LARGHEZZA. Shoptimizer .col-full impone
       box-sizing:content-box + max-width:1170px + margin:auto + padding:2.6em
       (centra l'header e lo inset). Qui si sovrascrive TUTTO: border-box +
       width/max-width 100% + margin 0 + padding ridotto -> i blocchi menu (sx) e
       carrello/funzioni (dx) arrivano a ~10px dal bordo laterale a ogni risoluzione. */
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: var(--bb-header-gutter) !important;
    padding-right: var(--bb-header-gutter) !important;
    overflow: visible;
}

/* Ensure each grid child stays in its lane */
header#masthead .main-header > * {
    min-width: 0;
}

/* ===========================
   LEFT SECTION (Hamburger + Navigation)
   =========================== */
.bb-header__left {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
}

/* Navigation wrapper - hidden on mobile */
.bb-header-nav-wrapper {
    display: none;
}

@media (min-width: 992px) {
    .bb-header-nav-wrapper {
        display: block;
    }
}

.bb-header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-header-nav__item {
    margin: 0;
    padding: 0;
}

.bb-header-nav__link {
    /* [NEW-170, Fabio 25/09] Le voci del menu erano 11px: misurate in pagina,
       non dedotte. Portate a 13px, i "due punti in piu'" chiesti.
       NB: le voci del menu NON sono titoli, quindi qui GLB-03 non c'entra:
       questa regola vinceva gia', era semplicemente piccola. E il menu vero
       e' questo (.bb-header-nav, dentro la testata): la barra di Shoptimizer
       .col-full-nav / .bb-navrow e' spenta con display:none !important per
       non duplicarla, quindi le sue voci a 15px non si vedono. */
    font-size: 13px;
    /* [NEW-174, Fabio 26/09] Peso normale, era 500 (medium). A 13px tutto in
       maiuscolo il 500 legge come un grassetto, ed era l'unico elemento della
       testata a farlo. Jost 400 e' fra i pesi caricati (300;400;500;600 in
       functions.php), quindi e' un 400 vero e non sintetizzato dal browser.
       NB: NON esiste uno stato attivo su queste voci — il template da' a tutte
       le stesse classi (`bb-header-nav__item` / `bb-header-nav__link`, nessuna
       current-menu-item) — quindi non c'e' nessuna voce che possa restare in
       grassetto per conto suo. Verificato in pagina su home, /borse/ e
       /classics/: quattro voci su quattro allo stesso peso. */
    font-weight: 400;
    letter-spacing: var(--bb-ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bb-fg);
    transition: opacity var(--bb-transition-fast);
    white-space: nowrap;
}

.bb-header-nav__link:hover {
    opacity: 0.6;
    color: var(--bb-fg);
}

/* ===========================================================================
   [NEW-175] La sezione in cui ci si trova, detta con l'opacita'

   Decisione di Fabio: niente grassetto, niente sottolineatura, nessun colore
   nuovo. La voce della sezione corrente resta piena, le altre si attenuano.

   Si accende solo quando la lista porta `--in-sezione`, cioe' quando una delle
   quattro voci corrisponde davvero alla pagina aperta. Su home, scheda
   prodotto, carrello e account nessuna corrisponde, la classe non c'e' e non si
   attenua niente: una pagina che non sta nel menu non deve far sembrare spente
   tutte le voci.

   ⚠ IL CONFLITTO CON L'HOVER, e come e' sciolto. La regola qui sopra dice che
   l'hover PORTA A 0.6: era l'unico modo di segnalare l'interazione quando tutte
   le voci stavano a piena opacita'. Ma dove si attenua, 0.6 e' diventato lo
   stato di riposo delle non-attive: portarle a 0.6 al passaggio del mouse non
   si vedrebbe, e passare sull'attiva la spegnerebbe — l'opposto di quanto
   chiesto. Quindi dentro `--in-sezione` l'hover va a PIENA opacita'.
   Non e' un'incoerenza visibile: le due logiche non convivono mai sulla stessa
   pagina, e in entrambe il gesto "muove" l'opacita' verso la voce che si sta
   guardando. Se si preferisse un'unica direzione per tutto il sito e' una
   riga: va deciso, non indovinato.
   =========================================================================== */

.bb-header-nav--in-sezione .bb-header-nav__link {
    opacity: 0.6;
}

.bb-header-nav--in-sezione .bb-header-nav__link.is-sezione-attiva {
    opacity: 1;
}

.bb-header-nav--in-sezione .bb-header-nav__link:hover,
.bb-header-nav--in-sezione .bb-header-nav__link:focus-visible {
    opacity: 1;
}

/* ===========================
   CENTER LOGO
   =========================== */
header#masthead .site-branding {
    justify-self: center;
    text-align: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    grid-column: 2;
    grid-row: 1;
    /* GLB-08: logo centrato verticalmente con testi/icone header.
       Fix Safari (2026-08-23): align-self:center + line-height:0 alzavano il logo
       su WebKit. Ora il branding RIEMPIE la riga (align-self:stretch, height:100%)
       e centra il logo al suo interno con flex → centraggio robusto cross-browser. */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 100%;
    /* [NEW-50] Il tema padre (Shoptimizer, header-2/3) centra il logo con
       `position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)`.
       Qui la posizione diventa relative ma top/left/transform restavano:
       Chromium applica top:50% (12.5px) e il transform (-12.5px) e i due si
       annullano; WebKit/Safari su un elemento di griglia NON applica il top
       e applica solo il transform -> logo 12.5px sopra il centro, su tutti i
       desktop (visto da Fabio sul Mac 27"). La griglia lo centra gia' da
       sola: si spegne il trucco. Misurato: 0.0px in WebKit e Chromium da 390
       a 3840. */
    top: auto;
    left: auto;
    transform: none;
}

/* [NEW-50] `.s-observer` (sentinella vuota di Shoptimizer per l'header
   sticky) finiva in una SECONDA riga della griglia: tra 768 e 991 quella
   riga e' alta 8px e alzava logo e icone di 4px. Si mette nella prima riga,
   larga quanto tutte le colonne e a altezza zero: resta in pagina e al suo
   posto (in fondo alla riga), senza aggiungere spazio. */
header#masthead .main-header > .s-observer {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: end;
}

/* Safari: l'anchor del logo deve a sua volta centrare l'immagine, e l'img è block
   (niente gap baseline) → il logo resta sull'asse verticale dell'header. */
header#masthead .site-branding a,
header#masthead .site-branding .custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 0;
}
header#masthead .site-branding img,
header#masthead .site-branding .custom-logo {
    display: block;
}

/* Ensure Shoptimizer branding doesn't have conflicting styles */
header#masthead .main-header .site-branding {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}

/* ===========================
   RIGHT SIDE ICONS
   =========================== */
.bb-header__right {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-self: end;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    max-width: 100%;
    grid-column: 3;
    grid-row: 1;
}

.bb-header__icon {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    color: var(--bb-fg) !important;
    line-height: 1;
    transition: opacity var(--bb-transition-fast);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

/* SVG Icon Styling — [NEW-21] icone header a 22px uniformi (decisione Fabio 11/09) */
.bb-header__icon .bb-icon,
.bb-header__icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
    flex-shrink: 0;
}

/* [NEW-21] L'icona account/Club (letter-c) è una "C" PIENA: va riempita, non
   tracciata. Deve vincere sul fill:none !important globale qui sopra → doppia
   classe sull'antenato (.bb-header__icon.bb-header__account). Le altre 3 icone
   (search/wishlist/cart) restano tracciate col comportamento di default. */
.bb-header__icon.bb-header__account .bb-icon,
.bb-header__icon.bb-header__account svg {
    fill: currentColor !important;
    stroke: none !important;
}

.bb-header__icon:hover {
    opacity: 0.6;
    text-decoration: none !important;
    color: var(--bb-fg) !important;
}

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

/* Country Switcher (Global-e) — text only, no icon/flag */
.bb-header__country-switcher {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 0;
}

/* GE flag spans: kept in DOM for GE to inject into, hidden visually */
.bb-header__country-flag,
.bb-offcanvas__country-flag {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Suppress any flag images GE injects */
[data-ge-shippingswitcher-flag] img,
[data-ge-mobile-shippingswitcher-flag] img {
    display: none !important;
}

/* BB text label: "IT · EUR" */
.bb-ge-text {
    font-family: 'Jost', sans-serif; /* GLB-01: Jost unico (era Futura PT) */
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bb-fg, #000);
    line-height: 1;
    min-width: 2ch;
}

/* Cart icon with badge */
.bb-header__cart {
    position: relative;
}

.bb-header__cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--bb-fg);
    color: var(--bb-bg);
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 4px;
}

/* Menu toggle (hamburger) */
.bb-header__menu-toggle {
    display: inline-flex !important;
}

.bb-header__menu-toggle .bb-icon,
.bb-header__menu-toggle svg {
    width: 22px !important;
    height: 22px !important;
}

/* ===========================
   BREADCRUMB
   =========================== */
.bb-breadcrumb {
    max-width: var(--bb-max);
    margin: 0 auto;
    padding: 12px var(--bb-gutter);
    font-size: var(--bb-small);
    color: var(--bb-muted);
    letter-spacing: var(--bb-ls-tight);
}

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

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

.bb-breadcrumb__separator {
    margin: 0 8px;
    opacity: 0.5;
}

/* ===========================
   SECONDARY NAVIGATION
   =========================== */
.bb-secondary-nav {
    display: none;
    border-bottom: var(--bb-line-width) solid var(--bb-line);
    background: var(--bb-bg);
}

@media (max-width: 991px) {
    .bb-secondary-nav {
        display: block;
    }

    .bb-secondary-nav__inner {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 var(--bb-gutter);
        display: flex;
        align-items: center;
        gap: 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bb-secondary-nav__inner::-webkit-scrollbar {
        display: none;
    }

    .bb-secondary-nav a {
        font-size: 11px;
        letter-spacing: var(--bb-ls-wide);
        text-transform: uppercase;
        text-decoration: none;
        color: var(--bb-fg);
        white-space: nowrap;
        padding: 12px 0;
        border-bottom: 2px solid transparent;
        transition: border-color var(--bb-transition-fast);
    }

    .bb-secondary-nav a:hover,
    .bb-secondary-nav a.current {
        border-bottom-color: var(--bb-fg);
    }
}

/* ===========================
   SHOPTIMIZER OVERRIDES
   =========================== */
/* Hide the entire Shoptimizer navigation bar to avoid duplication */
.bb-navrow,
.col-full-nav {
    display: none !important;
}

/* Hide Shoptimizer's default cart/search/nav to use ours */
.main-header .secondary-navigation,
.main-header .header-cart,
.main-header .cart-contents,
.main-header .site-header-cart,
.main-header .shoptimizer-primary-navigation {
    display: none !important;
}

/* Override Shoptimizer main-header flex layout with our grid */
header#masthead .main-header,
.site-header .main-header {
    display: grid !important;
    flex-wrap: unset !important;
}

/* Ensure Shoptimizer elements don't break grid */
header#masthead .main-header .site-branding,
header#masthead .main-header .bb-header__left,
header#masthead .main-header .bb-header__right {
    position: relative;
    float: none !important;
}

/* Mobile responsive */
@media (max-width: 991px) {
    /* On mobile, use three-column layout (hamburger left, logo center, icons right) */
    header#masthead .main-header {
        grid-template-columns: auto 1fr auto !important;
        /* MOB-02 «trovare centratura giusta» (slide 13): il logo (immagine
           ~216px fissi) era CENTRATO sulla finestra ma il suo bordo destro
           TOCCAVA il gruppo icone (gap 0px a 360/390/430 → si leggeva
           "BRUZZICHESQ"). La griglia effettiva impacchetta logo+icone a destra
           e — verificato headless — grid-template/justify-self qui vengono
           sovrascritti dal CSS dinamico del Customizer (3 classi > 1 id+classe):
           l'unica leva che vince è column-gap (nessun altro la imposta). Diamo
           quindi 10px d'aria garantita + un cap di larghezza al logo per i
           telefoni stretti, senza overflow (icone entro il viewport a 360/390/430). */
        column-gap: 10px !important;
    }

    /* Left section (hamburger only on mobile) stays in column 1 */
    .bb-header__left {
        grid-column: 1;
    }

    /* Logo goes to the center on mobile (column 2) */
    header#masthead .site-branding {
        justify-self: center;
        grid-column: 2;
    }

    /* MOB-02: cap larghezza logo sui telefoni stretti così resta sempre aria
       verso le icone (a 360px scende a ~210px; a ≥390px resta a piena misura). */
    header#masthead .site-branding img {
        max-width: min(216px, calc(100vw - 150px)) !important;
    }

    /* Icons go to the right on mobile (column 3) */
    .bb-header__right {
        gap: 16px;
        justify-self: end;
        grid-column: 3;
    }

    .bb-header__icon .bb-icon,
    .bb-header__icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Phone: logo left, search+cart+hamburger right */
@media (max-width: 767px) {
    /* [MOB-01] Fino al 18/09 questo flex era codice morto: la regola base
       `header#masthead .main-header.col-full { display:grid !important }` ha
       una classe in piu' e vinceva, quindi sul telefono restava la griglia
       (hamburger a SINISTRA) e a 390px l'icona carrello usciva dallo schermo
       (x381). Stesso selettore della base = stessa specificita': qui, dopo,
       vince. Misure dall'XD HOME 2026 mobile: fascia bianca alta 60px, logo
       e icone a 20px dai bordi. */
    header#masthead .main-header,
    header#masthead .main-header.col-full {
        display: flex !important;
        align-items: center;
        gap: 0;
        column-gap: 0 !important;
        padding: 19px 20px !important;
        /* il Customizer di Shoptimizer fissa `.main-header, .site-branding
           { height:70px }`: e' da li' che veniva l'header da 71 */
        height: auto;
    }
    header#masthead .main-header .site-branding {
        height: auto;
    }
    /* [MOB-01] i 20px laterali dell'XD: 99-overrides.css (caricato dopo, con
       `header#masthead.site-header .main-header.col-full`) impone
       padding-inline = --bb-header-gutter (10px). Il `body` davanti basta a
       vincere, solo qui sul telefono. */
    body header#masthead.site-header .main-header.col-full {
        padding-inline: 20px !important;
    }

    /* Hide Shoptimizer menu overlay and menu-toggle button on mobile */
    header#masthead .menu-overlay,
    header#masthead .site-branding .menu-toggle {
        display: none !important;
    }

    /* Logo — left-aligned, takes available space.
       GLB-08: il branding è flex (regola desktop) → riporto l'allineamento a
       sinistra su mobile, mantenendo il centraggio verticale. */
    header#masthead .site-branding {
        flex: 1 1 0%;
        min-width: 0;
        justify-self: start;
        justify-content: flex-start;
        text-align: left;
        order: 1;
    }

    header#masthead .site-branding a {
        display: block;
        max-width: 100%; /* [MOB-01] cosi' il max-width:100% del logo ha un riferimento */
        /* [MOB-01] logo attaccato a sinistra anche quando avanza spazio (in
           Home, con un'icona in meno, finiva centrato nello spazio libero) */
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    header#masthead .site-branding img {
        width: auto;
        height: 16px;
        max-height: 16px;
        object-fit: contain;
        object-position: left center;
        /* [MOB-01] il logo si stringe nello spazio che resta, invece di
           spingere fuori le icone (il cap in px del blocco ≤991 non bastava
           con quattro icone a 360px) */
        max-width: 100% !important;
    }

    /* [MOB-01] Fabio 18/09: su TUTTO il mobile la testata e' quella dell'XD,
       cerca + borsa + menu. Il Club resta raggiungibile dal menu e, in Home,
       dalla barretta laterale sopra la hero. */
    header#masthead .bb-header__account {
        display: none !important;
    }

    /* Icons — stay together, no grow. Ritmo uniforme a 16px tra le 4 icone. */
    .bb-header__right {
        flex: 0 0 auto;
        order: 2;
        gap: 16px;
    }

    /* Hamburger moves to rightmost position — stessa spaziatura delle icone */
    .bb-header__left {
        flex: 0 0 auto;
        order: 3;
        margin-left: 16px;
    }

    /* Hide desktop nav inside left section */
    .bb-header__left .bb-header__nav {
        display: none !important;
    }

    /* Header mobile stile Bottega Veneta: logo sx, a destra cerca + account +
       carrello + hamburger (compatti). Restano nascosti solo country e wishlist. */
    .bb-header__country-switcher,
    .bb-header__wishlist {
        display: none !important;
    }

    /* [NEW-21] icone header 22px uniformi anche su mobile (decisione Fabio 11/09).
       ID #masthead per vincere sull'override Elementor 20px !important. */
    header#masthead .bb-header__icon svg,
    header#masthead .bb-header__icon .bb-icon,
    header#masthead .bb-header__right svg,
    header#masthead .bb-header__left .bb-header__menu-toggle svg,
    header#masthead .bb-header__menu-toggle svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ===========================
   ELEMENTOR OVERRIDES
   =========================== */
/* Prevent Elementor from overriding our icon styles */
.bb-header__icon,
.bb-header__right .bb-header__icon,
.elementor-widget-container .bb-header__icon,
body .bb-header__icon {
    background-color: transparent !important;
    background-image: none !important;
}

.bb-header__icon svg,
.bb-header__icon .bb-icon,
.bb-header__right svg,
body .bb-header__icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: none !important;
    max-height: none !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
}

/* Ensure buttons don't get Elementor default styles */
button.bb-header__icon,
a.bb-header__icon {
    min-width: auto !important;
    min-height: auto !important;
    font-size: inherit !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}