/* ═══ BB — La ricerca a tutto schermo ═══════════════════════════════════
   [NEW-108] Da "PAGINA SEARCH.xd" (21/09).

   La lente in testata non apre piu' un cassetto laterale ma questa finestra,
   che prende tutto lo schermo. La TESTATA resta sopra e resta viva: nella
   tavola si vedono logo e menu anche mentre si cerca, e chi cerca deve poter
   cambiare idea senza chiudere niente. Per questo la finestra sta sotto la
   testata (z-index piu' basso di quello che search.js da' alla testata) e si
   apre gia' scostata dall'alto della sua altezza.

   Misure prese dalla tavola: desktop 2560 (5120 a densita' doppia), telefono
   390 (1170 a densita' tripla).
   ═══════════════════════════════════════════════════════════════════════ */

.bb-search-modal {
    position: fixed;
    inset: 0;
    /* [NEW-110] Davanti a tutto, testata compresa (Fabio, 21/09): prima la
       testata le restava sopra, come nella tavola. Sopra anche i cassetti
       (9998), che comunque si chiudono quando questa si apre. */
    z-index: 10000;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bb-bg-primary, #fff);
    padding-top: clamp(20px, 3vw, 40px);
}
.bb-search-modal.is-active {
    display: block;
}

.bb-search-modal__inner {
    padding: clamp(28px, 4vw, 64px) 0 clamp(64px, 8vw, 120px);
}

/* La X: in alto a destra, appena sotto la testata, come nella tavola. */
/* Tre bottoni, una trappola sola: `.elementor-kit-6 button` dipinge di NERO
   ogni bottone del sito, con una classe e un tag (batte una classe sola). Qui
   si scrive `body .bb-search-modal` davanti: pesa di piu' e non serve
   !important. Vale per la X, per la crocetta del campo e per "mostra altri". */
body .bb-search-modal .bb-search-modal__close,
body .bb-search-modal .bb-search-modal__clear,
body .bb-search-modal .bb-search-modal__more-btn {
    border: 0;
    border-radius: 0;
    background: none;
    background-color: transparent;
    color: var(--bb-fg, #1f1f1f);
    box-shadow: none;
}

.bb-search-modal__close {
    position: absolute;
    top: clamp(16px, 2vw, 30px);
    right: clamp(16px, 2vw, 34px);
    z-index: 2;
    padding: 6px;
    border: 0;
    background: none;
    color: var(--bb-fg, #1f1f1f);
    cursor: pointer;
    line-height: 0;
    transition: opacity var(--bb-transition-fast, .2s ease);
}
.bb-search-modal__close:hover { opacity: .6; }

/* ── L'invito e il campo ─────────────────────────────────────────────── */

.bb-search-modal__intro {
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 34px);
    max-width: 760px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em; /* tracking 100 della tavola */
    line-height: 1.6;
    color: #1f1f1f;
    text-align: center;
}
.bb-search-modal__intro-1,
.bb-search-modal__intro-2 {
    display: block;
}
/* [NEW-110] La prima riga in maiuscolo, la seconda come e' scritta. */
.bb-search-modal__intro-1 {
    text-transform: uppercase;
}

.bb-search-modal__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 24px);
    /* Larghezza dalla tavola: il filo sotto il campo misura 628 su 2560,
       cioe' circa un quarto dello schermo. Il clamp tiene la proporzione
       senza farlo diventare un francobollo sui portatili. */
    width: clamp(280px, 34vw, 620px);
    margin: clamp(36px, 5vw, 86px) auto 0;
}
.bb-search-modal__icon {
    flex: 0 0 auto;
    color: #1f1f1f;
}
/* Il campo lo vestono `input[type="search"], input[type="text"]...` di
   Shoptimizer: riquadro grigio, angoli tondi e ombra. Pesano come la nostra
   classe ma arrivano dopo, quindi vincevano. Il tag piu' `body` bastano. */
/* [NEW-237] iOS ingrandisce la pagina quando si entra in un campo col testo
   sotto i 16px, e poi non la rimpicciolisce piu': resta sbilanciata per tutta
   la visita. L'unico rimedio che NON toglie lo zoom all'utente e' dare al
   campo almeno 16px — bloccarlo con maximum-scale lo risolverebbe togliendo
   una funzione di accessibilita', e non si fa.
   I 16px valgono SOLO per il campo in cui si scrive: il resto della ricerca
   resta alla sua misura. */
body .bb-search-modal input[type="search"].bb-search-modal__field {
    font-size: 16px;
    border: 0;
    border-bottom: 1px solid #1f1f1f;
    border-radius: 0;
    box-shadow: none;
    background: none;
    background-color: transparent;
    padding: 6px 24px 8px 0;
    color: #1f1f1f;
}

.bb-search-modal__field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 24px 8px 0;
    border: 0;
    border-bottom: 1px solid #1f1f1f;
    border-radius: 0;
    background: none;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1f1f1f;
    text-align: center;
}
.bb-search-modal__field:focus {
    outline: none;
    border-bottom-color: #1f1f1f;
}
.bb-search-modal__field::placeholder {
    color: #1f1f1f;
    opacity: .75;
    text-transform: none;
    letter-spacing: 0.08em;
}
/* Chrome mette una sua X dentro i campi di ricerca: ne basta una, la nostra. */
.bb-search-modal__field::-webkit-search-cancel-button { display: none; }

.bb-search-modal__clear {
    position: absolute;
    right: 0;
    bottom: 8px;
    padding: 2px;
    border: 0;
    background: none;
    color: #1f1f1f;
    line-height: 0;
    cursor: pointer;
    opacity: .6;
}
.bb-search-modal__clear:hover { opacity: 1; }

/* ── I nove riquadri ─────────────────────────────────────────────────── */

.bb-search-modal__explore-title {
    margin: clamp(40px, 5vw, 96px) auto clamp(20px, 2.5vw, 40px);
    padding: 0 clamp(20px, 3vw, 34px);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: #1f1f1f;
    text-align: center;
}

/* [NEW-112/NEW-113] Il guscio sta fermo mentre la fila scorre: e' l'appoggio
   delle frecce, che sono un pezzo comune del sito (99-overrides.css +
   scroll-frecce.js). Qui si dice solo quanto stanno discoste dal bordo. */
.bb-search-boxes-wrap {
    position: relative;
    --bb-freccia-lato: clamp(2px, 0.6vw, 12px);
}

/* Dove ci sono le frecce, la fila lascia libera una fascia per parte: cosi'
   la freccia non finisce mai sopra una foto (e sopra il nome di quella foto,
   come succedeva prima) e resta un segno scuro su bianco, come il resto
   della pagina. Senza mouse la fascia non serve e la fila torna larga. */
@media (hover: hover) and (min-width: 768px) {
    .bb-search-boxes {
        padding-inline: 0;
        margin-inline: clamp(56px, 4.5vw, 84px);
        scroll-padding-inline: 0;
    }
}

/* [NEW-111] I riquadri sono nove. Metterli tutti in fila, come fa la tavola
   su uno schermo da 2560, li riduce a francobolli su un portatile: a 1440
   restavano 145px l'uno, col nome sopra che andava a capo due volte.
   Quindi: riquadri di una misura DECENTE, quanti ne stanno in orizzontale, e
   gli altri si raggiungono scorrendo di lato. La misura e' fluida (16vw fra
   180 e 280px), cosi' ne restano sempre fra i quattro e i sei visibili e il
   successivo si intravede: e' quello che dice "di qua ce n'e' ancora", senza
   bisogno di frecce.
   Sul telefono NON si scorre: resta la griglia a due colonne del disegno. */
.bb-search-boxes {
    display: flex;
    gap: 10px;
    padding: 0 clamp(16px, 1.3vw, 32px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Senza questo lo scorrimento aggancia il riquadro al bordo del
       contenitore ignorando il suo margine, e il primo resta tagliato a
       sinistra gia' da fermo. */
    scroll-padding-inline: clamp(16px, 1.3vw, 32px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bb-search-boxes::-webkit-scrollbar {
    display: none;
}
.bb-search-box {
    flex: 0 0 clamp(180px, 16vw, 280px);
    scroll-snap-align: start;
}

.bb-search-box {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--bb-fg, #1f1f1f);
    /* [NEW-123] Il nome non sta piu' dentro la foto: col mouse ci torna
       sopra ancorandosi QUI, non alla finestra. */
    position: relative;
    /* [NEW-109] Il riquadro fa da metro al proprio nome (vedi sotto): nove in
       fila su desktop sono larghi ~145px, tre sul tablet ~330, due sul
       telefono ~195. Una misura fissa sarebbe enorme nei primi e piccola
       negli altri. */
    container-type: inline-size;
}
.bb-search-box__img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1; /* i riquadri della tavola sono quadrati, non 4:5 */
    background-color: var(--bb-bg-light, #f4f4f4);
    background-size: cover;
    background-position: center;
    transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
/* [NEW-121] Il velo c'e' solo al passaggio del mouse (blocco piu' sotto):
   a riposo, e su ogni schermo senza mouse, la foto resta pulita. */
.bb-search-box__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.36);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* [NEW-123] BASE (telefono e ogni schermo senza mouse): il nome sta SOTTO
   la foto, nero su bianco. Col mouse torna sulla foto, bianco al centro, e
   compare solo al passaggio (blocco piu' sotto). */
.bb-search-box__cta {
    position: relative; /* si porta dietro il suo trattino (NEW-103) */
    padding: 12px 6px 5px;
    color: var(--bb-fg, #1f1f1f);
    font-family: 'Jost', sans-serif;
    /* 8% della larghezza del riquadro, fra 9 e 14px: il nome sta dentro al
       suo riquadro invece di riempirlo. Il tetto e' la scala condivisa dei
       nomi sulle foto (--bb-overlay-name-sm, NEW-99). */
    font-size: clamp(9px, 8cqw, var(--bb-overlay-name-sm, 14px));
    font-weight: 400;
    letter-spacing: var(--bb-ls-wide, 0.08em);
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
}
.bb-search-box__cta::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22px;
    height: 1px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (min-width: 768px) {
    .bb-search-box {
        overflow: hidden;
    }
    .bb-search-box:hover .bb-search-box__img,
    .bb-search-box:focus-visible .bb-search-box__img {
        transform: scale(var(--bb-img-hover-scale, 1.04));
    }
    /* [NEW-121] Il nome torna SULLA foto e compare col velo, solo al
       passaggio: a riposo si vede la foto e basta. */
    .bb-search-box__cta {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: 90%;
        padding: 0 0 5px;
        color: #fff;
        opacity: 0;
        transition: opacity 0.35s ease;
    }
    .bb-search-box:hover .bb-search-box__img::after,
    .bb-search-box:focus-visible .bb-search-box__img::after,
    .bb-search-box:hover .bb-search-box__cta,
    .bb-search-box:focus-visible .bb-search-box__cta {
        opacity: 1;
    }
    /* [NEW-103] il trattino cresce al passaggio, non sta li' fermo. */
    .bb-search-box__cta::after { width: 0; }
    .bb-search-box:hover .bb-search-box__cta::after,
    .bb-search-box:focus-visible .bb-search-box__cta::after { width: 22px; }
}

/* ── I prodotti trovati ──────────────────────────────────────────────── */

.bb-search-modal__results {
    margin-top: clamp(24px, 3vw, 48px);
    padding: 0 clamp(16px, 1.3vw, 32px);
}
.bb-search-modal__results[hidden] { display: none; }

.bb-search-modal__count {
    margin: 0 0 clamp(16px, 2vw, 28px);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1f1f1f;
    text-align: center;
}
.bb-search-modal__count:empty { display: none; }

/* La griglia e' quella della pagina categoria (shop.css): due colonne sul
   telefono, quattro sul computer. Qui cambia solo il contorno, perche' la
   finestra e' a tutta larghezza e non dentro la gabbia del contenuto. */
.bb-search-modal__grid {
    margin: 0;
}
.bb-search-modal.is-loading .bb-search-modal__grid {
    opacity: .45;
    transition: opacity .2s ease;
}

.bb-search-modal__more {
    margin: clamp(28px, 4vw, 56px) 0 0;
    text-align: center;
}

/* [NEW-137] Dove il caricamento e' automatico il bottone non serve: la
   riga resta pero' nel documento, perche' e' lei la vedetta che dice al
   JavaScript "sei arrivato in fondo". Le si lascia un'altezza, altrimenti
   sarebbe una striscia alta zero e il browser farebbe fatica a dire quando
   e' in vista. La classe la mette il JavaScript solo se il browser sa
   osservare: dove non sa, ricompare il bottone di prima. */
.bb-search-modal--auto .bb-search-modal__more-btn {
    display: none;
}
.bb-search-modal--auto .bb-search-modal__more {
    min-height: 48px;
}

/* Un punto che respira, mentre le schede nuove arrivano. Nessuna parola:
   non c'e' niente da tradurre e non c'e' niente da leggere. */
.bb-search-modal__more.is-caricando::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bb-fg, #1f1f1f);
    animation: bb-respiro 1.1s ease-in-out infinite;
}

@keyframes bb-respiro {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-search-modal__more.is-caricando::after {
        animation: none;
        opacity: 0.5;
    }
}
.bb-search-modal__more[hidden] { display: none; }
.bb-search-modal__more-btn {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-fg, #1f1f1f);
}

/* Mentre si cerca i riquadri si tolgono di mezzo (Fabio, 21/09). */
.bb-search-modal.is-searching .bb-search-modal__explore { display: none; }

/* ── Telefono ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .bb-search-modal__inner {
        padding-top: clamp(20px, 6vw, 34px);
    }
    /* Sul telefono la tavola allinea tutto a sinistra, non al centro. */
    .bb-search-modal__intro,
    .bb-search-modal__explore-title {
        max-width: none;
        padding: 0 20px;
        text-align: left;
    }
    /* La X sta in alto a destra, alla stessa altezza della prima riga: le si
       lascia il posto, se no una traduzione piu' lunga ci finisce sotto. */
    .bb-search-modal__intro {
        padding-right: 56px;
    }
    .bb-search-modal__form {
        width: auto;
        margin: 26px 20px 0;
    }
    .bb-search-modal__field {
        text-align: left;
    }
    .bb-search-modal__explore-title {
        margin: 34px 0 18px;
    }
    /* Due per riga, appoggiati ai bordi, con la fessura di 2px della tavola:
       qui non si scorre di lato, si scorre la pagina (NEW-111). */
    .bb-search-boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        padding: 0;
        overflow-x: visible;
    }
    .bb-search-box {
        flex: none;
        /* [NEW-131] la stessa aria che home e landing hanno sotto i box nel
           modo "no velo - nome sotto" (NEW-128): 28px, stesso numero. */
        padding-bottom: 28px;
    }
    .bb-search-modal__results {
        padding: 0 20px;
    }
}