/* ===========================
   BB Shop Page CSS
   =========================== */

/* ===========================
   SHOP PAGE LAYOUT (BV-style - large products)
   =========================== */
.bb-shop {
    padding: 40px 0;
    background: var(--bb-bg-primary);
    width: 100%;
}

.bb-shop__container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(10px, 2.5vw, 40px);
}

/* Override any theme constraints */
.woocommerce-page .bb-shop__container,
.post-type-archive-product .bb-shop__container,
.tax-product_cat .bb-shop__container {
    max-width: 1920px !important;
    width: 100% !important;
}

/* ===========================
   CATEGORY FILTER ICONS
   =========================== */
.bb-category-filter {
    margin-bottom: 40px;
    border-bottom: var(--bb-line-width) solid var(--bb-line);
}

.bb-category-filter__scroll {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 20px;
    cursor: grab;
    user-select: none;
}

.bb-category-filter__scroll::-webkit-scrollbar {
    display: none;
}

.bb-category-filter__scroll.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
}

.bb-category-filter__scroll.is-grabbing .bb-category-filter__item {
    pointer-events: none;
}

.bb-category-filter__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--bb-fg);
    min-width: 90px;
    transition: opacity var(--bb-transition-base);
}

.bb-category-filter__item:hover {
    opacity: 0.7;
}

.bb-category-filter__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: var(--bb-line-width) solid var(--bb-line);
    background: var(--bb-light-gray);
    transition: border-color var(--bb-transition-fast);
}

.bb-category-filter__item:hover .bb-category-filter__icon {
    border-color: var(--bb-fg);
}

.bb-category-filter__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bb-transition-slow);
}

.bb-category-filter__item:hover .bb-category-filter__icon img {
    transform: scale(var(--bb-img-hover-scale)); /* GLB-09: utility condivisa --bb-img-hover-scale (default 1 = no zoom) */
}

.bb-category-filter__name {
    font-size: 11px;
    letter-spacing: var(--bb-ls-wide);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    font-weight: 400;
}

/* ===========================
   MODELS FILTER (modello attribute)
   =========================== */
/* [NEW-57] Archivio filtrato per modello: il testo "Chi e'" del modello al
   posto della fascia dei modelli, in Playfair come gli altri paragrafi
   editoriali; misure e allineamento da NEW-61, qui sotto. */
/* Fabio: il nome del modello come titolo va in MAIUSCOLO (MAME WEEKEND). */
/* [NEW-231] Il titolo di categoria non in grassetto. Il 600 non era nostro:
   arriva dal Customizer di Shoptimizer con un `h1 {font-weight:600}` (0,0,1),
   quindi basta la classe (0,1,0) per passargli davanti senza !important.
   400 e non 300: "non in grassetto" vuol dire normale, e il 300 e' la voce
   delle hero, che sono un'altra cosa. */
.woocommerce-products-header__title {
  font-weight: 400;
}

body.bb-modello-filtrato .woocommerce-products-header__title {
    text-transform: uppercase;
}
.bb-modello-intro {
    padding: clamp(4px, 1vw, 12px) 0 clamp(24px, 3vw, 40px);
}
/* [NEW-61] Fabio: corpo piu' piccolo, blocco e testo a SINISTRA (a bandiera,
   ne' centrato ne' giustificato), un po' piu' largo e piu' arioso. Il blocco
   parte dallo stesso filo del titolo (stesso contenitore); ~760px = circa 95
   caratteri a riga a 14px, una misura comoda per la Playfair. */
.bb-modello-intro__text {
    max-width: 760px;
    font-family: var(--bb-font-editorial);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--bb-fg);
    text-align: left;
    hyphens: manual;
}
.bb-modello-intro__text p {
    font: inherit;
    color: var(--bb-fg); /* come .bb-landing__manifesto p: vince sul grigio 78% di :where(p) */
    margin: 0 0 0.9em;
}
.bb-modello-intro__text p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    /* [NEW-141] Il SELETTORE MODELLI non porta il velo.
       Qui il nome non e' un'etichetta da guardare: e' il filtro su cui
       clicchi, e serve leggerlo TUTTO in fila, senza passare il mouse e
       senza aspettare che una scheda arrivi al centro. Per questo resta
       sotto la foto, uguale su schermo grande e piccolo. Annulla la
       modifica di ieri (velo+nome col mouse) ed esclude questa striscia
       dalla regola dei caroselli in focus: quelle valgono per il carosello
       della home e per quelli delle landing, dove il nome e' didascalia. */

    .bb-modello-intro__text {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* [NEW-228] Le altre misure della famiglia, sotto il "Chi e'".
   Sta allo stesso filo del titolo e del racconto (stesso contenitore, nessun
   rientro), e i link stanno in fila con l'etichetta: sono due o tre nomi, non
   un elenco. A capo da soli quando non ci stanno. */
.bb-modello-misure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    max-width: 760px;
    margin-top: clamp(12px, 1.5vw, 20px);
}

.bb-modello-misure__label {
    font-size: var(--bb-tiny);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-muted);
}

.bb-modello-misure__link {
    font-size: var(--bb-small);
    color: var(--bb-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--bb-transition-fast);
}

.bb-modello-misure__link: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 e lo terrebbe a 13px
   mentre l'etichetta accanto sta a 10. E' la stessa trappola di NEW-115. */
body .bb-modello-misure .bb-modello-misure__link {
    font-size: var(--bb-small);
}

/* [NEW-66] Sul telefono il "Chi e'" e' tagliato a 6 righe (circa un terzo
   del testo) con "Leggi di piu'" per aprirlo; su desktop resta intero e il
   bottone non esiste. Il taglio e' un'altezza massima, non line-clamp:
   il testo e' fatto di piu' paragrafi e line-clamp li tratta male.
   Il velo in fondo dice che il testo continua. */
.bb-modello-intro__toggle {
    display: none;
}
@media (max-width: 767px) {
    .bb-modello-intro__text {
        position: relative;
        max-height: calc(1.7em * 6);
        overflow: hidden;
    }
    .bb-modello-intro__text::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1.7em;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bb-bg-primary, #fff));
        pointer-events: none;
    }
    .bb-modello-intro.is-expanded .bb-modello-intro__text {
        max-height: none;
    }
    .bb-modello-intro.is-expanded .bb-modello-intro__text::after,
    .bb-modello-intro:not(.is-clamped) .bb-modello-intro__text::after {
        display: none;
    }
    .bb-modello-intro.is-clamped .bb-modello-intro__toggle {
        display: inline-block;
        margin-top: 12px;
        padding: 0 0 4px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        min-width: 0;
        color: var(--bb-fg) !important; /* contro button{color:#fff} */
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        line-height: 1.4;
        cursor: pointer;
    }
}

.bb-models-filter {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: var(--bb-line-width) solid var(--bb-line);
    /* [NEW-113] fa da appoggio alle frecce, che non devono scorrere con la
       fila (il vestito sta in 99-overrides.css, la meccanica in
       scroll-frecce.js) */
    position: relative;
    /* [NEW-142] La freccia sta TUTTA fuori dall'area del selettore: lo
       scostamento e' pari alla sua larghezza, cosi' il suo bordo interno
       tocca il bordo del selettore e nemmeno un pixel finisce sopra le
       foto. Serve pero' che la freccia sia piu' stretta del margine di
       pagina: a 768px (la larghezza piu' stretta in cui esistono le
       frecce) di aria ce n'e' 36px, quindi qui la stringiamo a 30. */
    --bb-freccia-lato: -30px;
}

/* [NEW-142] Freccia piu' stretta SOLO qui: il chevron resta quello, si
   accorcia l'imbottitura ai lati. Col mouse non serve un bersaglio largo
   come col dito, e sul telefono le frecce non ci sono proprio. */
.bb-models-filter .bb-scroll-freccia {
    padding-inline: 4px;
}

/* [NEW-113] Dove ci sono le frecce la fila lascia libera una fascia per
   parte, cosi' la freccia non finisce mai sopra la foto di un modello.
   Col dito la fascia non serve e la fila resta larga quanto la pagina. */
@media (hover: hover) and (min-width: 768px) {
    /* [NEW-142] Il SELETTORE MODELLI non lascia piu' la fascia: il primo
       modello parte a filo con il bordo del contenuto, perche' ora la
       freccia sta fuori (vedi --bb-freccia-lato qui sopra). La striscia
       delle categorie, che usa ancora la freccia larga appoggiata dentro,
       la fascia se la tiene. */
    .bb-category-filter__scroll {
        margin-inline: 34px;
    }
}

.bb-models-filter__scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
    cursor: grab;
    user-select: none;
}

.bb-models-filter__scroll::-webkit-scrollbar {
    display: none;
}

.bb-models-filter__scroll.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
}

.bb-models-filter__scroll.is-grabbing .bb-models-filter__item {
    pointer-events: none;
}

.bb-models-filter__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: var(--bb-fg);
    min-width: 160px;
    max-width: 180px;
    flex-shrink: 0;
}

.bb-models-filter__image {
    width: 160px;
    height: 190px;
    overflow: hidden;
    background: var(--bb-light-gray);
}

.bb-models-filter__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bb-models-filter__name {
    font-size: 9px; /* [NEW-143] */
    letter-spacing: var(--bb-ls-wide);
    text-transform: uppercase;
    text-align: left;
    font-weight: 400;
    color: var(--bb-fg);
    max-width: 160px;
}

/* Mobile adjustments for models filter */
@media (max-width: 767px) {
    .bb-models-filter {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .bb-models-filter__scroll {
        gap: 12px;
    }

    .bb-models-filter__item {
        min-width: 100px;
        max-width: 120px;
        gap: 8px;
    }

    .bb-models-filter__image {
        width: 100px;
        height: 118px;
    }

    .bb-models-filter__name {
        font-size: 9px;
    }
}

/* ===========================
   TEXT FILTERS
   =========================== */
.bb-text-filters {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bb-text-filters::-webkit-scrollbar {
    display: none;
}

.bb-text-filter {
    font-size: 11px;
    letter-spacing: var(--bb-ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bb-muted);
    white-space: nowrap;
    padding: 10px 0;
    border-bottom: 1px solid transparent;
    transition: all var(--bb-transition-base);
    font-weight: 400;
}

.bb-text-filter:hover,
.bb-text-filter.is-active {
    color: var(--bb-fg);
    border-bottom-color: var(--bb-fg);
}

/* ===========================
   SUBCATEGORY MENU + TOOLBAR ROW
   =========================== */
.bb-shop-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: var(--bb-line-width) solid var(--bb-line);
    gap: 24px;
    width: 100%;
}

.bb-subcategory-menu {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.bb-subcategory-menu__spacer {
    flex: 1;
}

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

.bb-subcategory-menu__item {
    margin: 0;
    padding: 0;
}

.bb-subcategory-menu__link {
    font-size: .875rem;
    letter-spacing: var(--bb-ls-tight);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bb-muted);
    padding: 8px 0;
    transition: color var(--bb-transition-base);
    font-weight: 400;
    white-space: nowrap;
}

.bb-subcategory-menu__link:hover {
    color: var(--bb-fg);
}

/* [NEW-114] La voce attiva non e' piu' in grassetto (Fabio, 21/09): a dire
   quale sei ci pensa gia' il trattino sotto (NEW-86), e il peso diverso
   faceva ballare la riga. Resta solo il nero pieno, contro il grigio delle
   altre. La sottolineatura piena l'aveva gia' tolta NEW-47. */
.bb-subcategory-menu__link.is-active {
    color: var(--bb-fg);
    font-weight: 400;
    text-decoration: underline;
}

/* [NEW-74] Sottocategorie sul telefono: al posto della riga di link (che
   andava su 4-5 righe) un bottone con la voce attiva, che apre le stesse voci
   nel pannello laterale #bb-subcategories-offcanvas. Su desktop il bottone
   non c'e' e la riga resta com'era. */
.bb-subcategory-trigger {
    display: none;
}

/* Mobile adjustments for toolbar row */
@media (max-width: 767px) {
    /* Una riga sola: [voce attiva v]  ...  N prodotti  FILTRA E ORDINA */
    .bb-shop-toolbar-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        /* [NEW-132] Tutta la larghezza del contenuto.
           Sul telefono Shoptimizer trasforma il contenitore che ci sta
           intorno (.shoptimizer-sorting) in una griglia a due colonne, e la
           barra finiva nella prima: 280px invece di 342, cioe' 62px in meno
           della griglia dei prodotti, con FILTRA E ORDINA che si fermava
           prima del bordo. "width: 100%" non bastava, perche' per un
           elemento di griglia quel 100% e' la sua colonna, non la riga.
           Prendendo tutte le colonne (come fa gia' il blocco degli avvisi
           di WooCommerce) ESPLORA resta a sinistra e FILTRA E ORDINA va a
           filo a destra, allineato alle schede. */
        grid-column: 1 / -1;
    }

    .bb-shop-toolbar-row .bb-subcategory-menu {
        display: none;
    }
    /* La toolbar sul telefono e' width:100% (piu' sotto): accanto al bottone
       deve prendere solo il suo spazio, altrimenti lo schiaccia a 0px. */
    .bb-shop-toolbar-row .bb-shop-toolbar {
        width: auto;
        flex: 0 0 auto;
    }
    /* [NEW-145] Il conteggio torna anche dove c'e' il bottone delle
       categorie. Era stato tolto perche' in 280px non ci stava nulla: ora
       la barra e' larga 342 (NEW-132) e avanza spazio. Se la voce attiva
       e' lunga, a stringersi e' lei — ha i puntini di sospensione — e non
       il conteggio, che resta intero. */

    /* Sui telefoni piu' stretti (360px, che sono ancora tanti) i tre pezzi
       non ci stavano per 9px e la voce attiva ci rimetteva una lettera.
       Invece di togliere di nuovo il conteggio si stringono gli spazi FRA
       i pezzi, che a quelle larghezze possono permetterselo: si recuperano
       12px e tutto sta dentro. Da 375px in su non cambia niente. */
    @media (max-width: 374px) {
        .bb-shop-toolbar-row {
            gap: 8px;
        }
        /* La classe ripetuta: il gap di 16px lo mette una regola che sta
           PIU' IN BASSO in questo stesso foglio e pesa uguale, quindi
           vinceva lei per posizione. */
        .bb-shop-toolbar-row .bb-shop-toolbar.bb-shop-toolbar {
            gap: 8px;
        }
    }

    /* [NEW-74] Il chevron non diceva "apre un pannello": c'e' un'icona
       elenco a sinistra. [NEW-87] Fabio: niente bordo, per distinguerlo da
       FILTRA E ORDINA; restano icona e testo, con la sottolineatura corta
       delle CTA (NEW-85). */
    .bb-subcategory-trigger {
        -webkit-appearance: none;
        appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 162px); /* lascia il posto a FILTRA E ORDINA */
        padding: 6px 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        color: var(--bb-text-primary) !important; /* contro button{color:#fff} del kit */
        font-family: 'Jost', sans-serif;
        font-size: .75rem !important;
        font-weight: 400;
        letter-spacing: var(--bb-ls-wide);
        text-transform: uppercase;
        line-height: 1.2;
        cursor: pointer;
    }
    .bb-subcategory-trigger__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bb-subcategory-trigger__icon {
        flex-shrink: 0;
    }
}

/* Il pannello: le voci in colonna, la voce attiva col trattino (NEW-47). */
.bb-subcategories-offcanvas__list {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
}
.bb-subcategories-offcanvas__list li {
    margin: 0;
    padding: 0;
}
.bb-subcategories-offcanvas__list .bb-subcategory-menu__link {
    display: inline-block;
    padding: 12px 0;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--bb-fg);
    font-weight: 400;
}

/* [NEW-86] Nel pannello la voce attiva ha il trattino in basso e allineato a
   SINISTRA, sotto l'inizio della parola (il trattino delle CTA e' centrato:
   qui l'elenco e' a bandiera e il centro cadeva a meta' parola). */
body .bb-subcategories-offcanvas__list .bb-subcategory-menu__link::after {
    left: 0;
    right: auto;
    bottom: 6px;
    transform: none;
}
body .bb-subcategories-offcanvas__list .bb-subcategory-menu__link.is-active::after,
body .bb-subcategories-offcanvas__list .bb-subcategory-menu__link:hover::after,
body .bb-subcategories-offcanvas__list .bb-subcategory-menu__link:focus-visible::after {
    width: 22px;
    transform: none;
}

/* ===========================
   SHOP TOOLBAR
   =========================== */

/* Hide WooCommerce default ordering and result count from top */
.woocommerce-page .woocommerce-ordering,
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.bb-shop .woocommerce-ordering,
.bb-shop .woocommerce-result-count {
    display: none !important;
}

.bb-shop-toolbar,
.bb-shop__container .bb-shop-toolbar,
.woocommerce .bb-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

.bb-shop-toolbar__results {
    font-size: 10px;
    color: var(--bb-muted);
    letter-spacing: var(--bb-ls-tight);
    text-transform: uppercase;
}

.bb-shop-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bb-shop-toolbar__filter-btn {
    background: var(--bb-bg-primary)!important;
    border: 1px solid var(--bb-text-primary);
    padding: 6px 12px!important;
    font-size: .75rem!important;
    letter-spacing: var(--bb-ls-wide);
    /*text-transform: uppercase;*/
    cursor: pointer;
    transition: all var(--bb-transition-base);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bb-text-primary)!important;
    font-weight: 400;
}

.bb-shop-toolbar__filter-btn:hover {
    background: var(--bb-text-primary);
    color: var(--bb-bg-primary);
    border-color: var(--bb-text-primary);
}

.bb-shop-toolbar__filter-btn svg {
    width: 12px;
    height: 12px;
}

.bb-shop-toolbar__sort {
    font-size: 11px;
    letter-spacing: var(--bb-ls-tight);
    border: var(--bb-line-width) solid var(--bb-line);
    padding: 10px 16px;
    background: var(--bb-bg);
    color: var(--bb-fg);
    cursor: pointer;
    transition: all var(--bb-transition-base);
    text-transform: uppercase;
}

.bb-shop-toolbar__sort:hover {
    border-color: var(--bb-fg);
}

/* ===========================
   PRODUCT GRID (BV Style - Force 4 Columns, Large Products)
   =========================== */
.bb-product-grid,
.products.bb-product-grid,
ul.products.bb-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px;
    margin-bottom: 48px;
    width: 100%;
    list-style: none;
    padding: 0;
}

@media (min-width: 768px) {
    .bb-product-grid,
    .products.bb-product-grid,
    ul.products.bb-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px 14px;
    }
}

@media (min-width: 1024px) {
    .bb-product-grid,
    .products.bb-product-grid,
    ul.products.bb-product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 32px 24px;
    }
}

@media (min-width: 1440px) {
    .bb-product-grid,
    .products.bb-product-grid,
    ul.products.bb-product-grid {
        gap: 40px 28px;
    }
}

/* Override Shoptimizer float-based layout - Force CSS Grid */
.columns-4 ul.products li.product,
.columns-4 .bb-product-grid li.product,
ul.products.columns-4 li.product,
.bb-product-grid li.product,
.bb-product-grid .bb-product-card {
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

/* Ensure grid works properly */
.columns-4 .bb-product-grid,
ul.products.columns-4.bb-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Remove all padding from Shoptimizer product items */
ul.products li.product,
.bb-product-grid li.product {
    padding: 0 !important;
}

/* Remove Shoptimizer's hover frame/box-shadow effect */
ul.products li.product:not(.product-category):before,
.bb-product-grid li.product:not(.product-category):before,
ul.products li.product:not(.product-category):after,
.bb-product-grid li.product:not(.product-category):after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    content: none !important;
}

/* Disable any box-shadow on product cards */
.bb-product-card,
.bb-product-card:hover,
ul.products li.product,
ul.products li.product:hover {
    box-shadow: none !important;
}

/* Hide product category from cards (show only name + price) */
ul.products li.product .posted_in,
ul.products li.product .product-category-title,
ul.products li.product .woocommerce-loop-product__category,
.bb-product-card .posted_in,
.bb-product-card .product-category-title,
.bb-product-card__flag {
    display: none !important;
}

/* ===========================
   PRODUCT CARD
   =========================== */
.bb-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.bb-product-card__image-wrapper {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bb-light-gray);
    margin-bottom: 12px;
}

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

/* Product card icons */
.bb-product-card__icons {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* [NEW-154] Sopra la foto, se no il cuore non si puo' cliccare.
       Misurato: la foto della scheda sta a z-index 2 (le serve per
       sparire in dissolvenza a hover e lasciar vedere la seconda), e
       questo contenitore stava a 1. Il cuore si vedeva — sta in alto a
       destra, fuori dalla foto — ma il clic arrivava all'immagine, cioe'
       al link del prodotto: chi ci provava finiva sulla scheda prodotto
       invece di salvare. Un bottone che sembra un bottone e si comporta
       da link e' peggio che non averlo. */
    z-index: 3;
}

.bb-product-card__icon {
    width: 32px;
    height: 32px;
    background: var(--bb-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--bb-transition-fast);
    border: none;
    padding: 0;
    color: var(--bb-fg);
}

.bb-product-card__icon:hover {
    background: var(--bb-fg);
    color: var(--bb-bg);
}

.bb-product-card__icon svg {
    width: 16px;
    height: 16px;
}

/* Members Exclusive Badge — card */
.bb-product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--bb-bg-dark);
    padding: 4px 10px;
    pointer-events: none;
}

.bb-product-card__badge-text {
    color: var(--bb-text-light);
    font-size: var(--bb-tiny);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Product Info */
.bb-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bb-product-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* [NEW-170] Classe raddoppiata, non un numero piu' grosso.
   Il titolo della scheda e' un <h2>, e dall'11/09 `:root body h2` (GLB-03,
   0,1,2) batteva questa regola scritta con una classe sola (0,1,0): la
   misura saliva a clamp(16px,1.4vw,21px), cioe' 20,16px a 1440. Raddoppiando
   la classe si fa 0,2,0 e si torna a comandare, senza !important e senza
   toccare la base. E' la convenzione scritta nel blocco GLB-03 di
   01-base.css: "un componente che vuole una misura sua la dichiara con DUE
   classi". Vale per TUTTE le proprieta' che GLB-03 riassegna (misura e, da
   NEW-167, carattere): se un domani si aggiunge il peso, va aggiunto qui. */
.bb-product-card__title,
.bb-product-card__title.bb-product-card__title {
    font-size: 13px;
    letter-spacing: var(--bb-ls-tight);
    /*text-transform: uppercase;*/
    text-decoration: none;
    color: var(--bb-fg);
    transition: opacity var(--bb-transition-base);
    flex: 1;
    margin: 0;
    font-weight: 500;
    line-height: var(--bb-lh-tight);
}

.bb-product-card__title:hover {
    opacity: 0.7;
}

.bb-product-card__flag {
    width: 20px;
    height: 14px;
    flex-shrink: 0;
}

.bb-product-card__subtitle {
    font-size: 11px;
    color: var(--bb-muted);
    text-transform: capitalize;
    letter-spacing: var(--bb-ls-tight);
    line-height: var(--bb-lh-normal);
}

.bb-product-card__price {
    font-size: 13px;
    color: var(--bb-fg);
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-top: -10px;
}

/* [NEW-75] Desktop: la variante stava a 9px dal nome del modello e il prezzo
   le si sovrapponeva (-3.5px, per il margin-top -10px qui sopra). Ora la
   variante sta attaccata al modello (~3px) e il prezzo si stacca (~10px):
   modello + variante fanno un blocco, il prezzo un altro. Il telefono ha il
   suo ordine in colonna (NEW-71) e non cambia. */
@media (min-width: 768px) {
    .bb-product-card__subtitle {
        margin-top: -6px;
    }
    .bb-product-card__price {
        margin-top: 4px;
    }
}

/* Modello Swatches - inline with title */
.bb-product-card__swatches {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.bb-product-card__swatch {
    display: block;
    width: 16px;
    height: 16px;
    border: var(--bb-line-width) solid var(--bb-line);
    overflow: hidden;
    transition: border-color var(--bb-transition-fast);
    background: var(--bb-bg);
}

.bb-product-card__swatch:hover {
    border-color: var(--bb-fg);
}

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

/* Quadratino colore (nuovo sistema: colore_visivo/colore effettivo variante) */
.bb-product-card__swatch--dot {
    border-radius: 2px;
}

.bb-product-card__swatch--transparent {
    background:
        linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%),
        linear-gradient(45deg, #e8e8e8 25%, #ffffff 25%, #ffffff 75%, #e8e8e8 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    border-color: #d0d0d0;
}

.bb-product-card__swatch-count {
    font-size: 9px;
    color: var(--bb-fg);
    letter-spacing: var(--bb-ls-tight);
    font-weight: 500;
}

/* Mobile adjustments for swatches */
@media (max-width: 767px) {
    .bb-product-card__swatch {
        width: 14px;
        height: 14px;
    }

    .bb-product-card__swatch-count {
        font-size: 8px;
    }
}

/* ===========================
   PAGINATION
   =========================== */
.bb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 0;
}

.bb-pagination__item {
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--bb-line-width) solid var(--bb-line);
    background: var(--bb-bg);
    color: var(--bb-fg);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: var(--bb-ls-tight);
    transition: all var(--bb-transition-base);
    font-weight: 400;
}

.bb-pagination__item:hover,
.bb-pagination__item.is-current {
    background: var(--bb-fg);
    color: var(--bb-bg);
    border-color: var(--bb-fg);
}

.bb-pagination__item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===========================
   MOBILE RESPONSIVE
   =========================== */
@media (max-width: 767px) {
    .bb-shop {
        padding: 24px 0;
    }

    .bb-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .bb-category-filter {
        margin-bottom: 32px;
    }

    .bb-category-filter__scroll {
        gap: 24px;
        padding-bottom: 16px;
    }

    .bb-category-filter__icon {
        width: 60px;
        height: 60px;
    }

    .bb-category-filter__item {
        min-width: 70px;
        gap: 8px;
    }

    .bb-category-filter__name {
        font-size: 10px;
    }

    .bb-text-filters {
        gap: 24px;
        margin-bottom: 32px;
    }

    .bb-text-filter {
        font-size: 10px;
        padding: 8px 0;
    }

    .bb-shop-toolbar {
        width: 100%;
        justify-content: flex-end;
    }

    .bb-shop-toolbar__results {
        font-size: 10px;
    }

    .bb-shop-toolbar__filter-btn,
    .bb-shop-toolbar__sort {
        font-size: 10px;
        padding: 8px 14px;
    }

    .bb-product-card__image-wrapper {
        margin-bottom: 10px;
    }

    .bb-product-card__info {
        gap: 4px;
    }

    /* [NEW-170] anche qui due classi: la base :root body h2 vale a ogni
       larghezza, quindi anche la misura del telefono va difesa. */
    .bb-product-card__title,
    .bb-product-card__title.bb-product-card__title {
        font-size: clamp(12px, 3.2vw, 13px);
    }

    .bb-product-card__subtitle {
        font-size: 10px;
    }

    .bb-product-card__price {
        font-size: 12px;
    }

    /* [NEW-71] Sul telefono i pallini colore stavano sulla riga del titolo e
       gli rubavano meta' card: "AMALIA LA GRANDE" andava a capo. Qui la testata
       si "scioglie" (display: contents) e i pezzi si mettono in colonna:
       titolo a tutta larghezza, variante, pallini, prezzo. */
    .bb-product-card__header {
        display: contents;
    }
    .bb-product-card__title,
    .bb-product-card__flag {
        order: 1;
        flex: none;
    }
    .bb-product-card__subtitle {
        order: 2;
    }
    .bb-product-card__swatches {
        order: 3;
        margin-left: 0;
    }
    .bb-product-card__price {
        order: 4;
        margin-top: 0;
    }

    .bb-product-card__icons {
        top: 8px;
        right: 8px;
    }

    .bb-product-card__icon {
        width: 28px;
        height: 28px;
    }

    .bb-product-card__icon svg {
        width: 14px;
        height: 14px;
    }

    .bb-pagination {
        padding: 32px 0;
        gap: 8px;
    }

    .bb-pagination__item {
        min-width: 36px;
        height: 36px;
        font-size: 10px;
    }
}

/* ===========================
   IMAGE HOVER EFFECT (BV style - swap images only)
   =========================== */

/* [NEW-230] LE FOTO DELLA SCHEDA
   Due strade, e non si incrociano mai:
   - scheda SENZA JavaScript (`:not([data-foto])`): come da sempre, la
     principale e al passaggio del mouse la seconda;
   - scheda presa in mano dal JavaScript (`[data-foto]`): comanda l'indice,
     cioe' la foto con .is-current, e le frecce.
   Il `:not()` sulle vecchie regole non e' un vezzo: senza, al passaggio del
   mouse su una scheda alla terza foto il foglio avrebbe riportato su anche la
   seconda, e si sarebbero viste due foto sovrapposte. */

/* Tutte le foto occupano lo stesso spazio. La prima resta nel flusso (e' lei a
   dare l'altezza se un domani sparisse l'aspect-ratio), le altre le stanno
   sopra. */
.bb-product-card__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--bb-transition-base);
}

.bb-product-card__foto + .bb-product-card__foto {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

/* Dalla terza in poi non esistono finche' il mouse non arriva: un'immagine a
   display:none il browser non la scarica, e una lista da dodici schede non
   deve chiedere cento foto per farne vedere dodici. */
.bb-product-card:not([data-foto]) .bb-product-card__foto:nth-child(n+3) {
    display: none;
}

/* --- strada 1: nessun JavaScript --- */
.bb-product-card__image-wrapper .bb-product-card__image {
    position: relative;
    z-index: 2;
}

.bb-product-card:not([data-foto]):hover .bb-product-card__image-wrapper .bb-product-card__image {
    opacity: 0;
}

/* La SECONDA, non "tutte quelle dopo la prima": con `__foto + __foto` la regola
   accendeva anche la terza e la quarta. Oggi non si vedrebbero comunque
   (display:none), ma una regola che si appoggia su un'altra per non sbagliare
   prima o poi sbaglia. */
.bb-product-card:not([data-foto]):hover .bb-product-card__image-wrapper .bb-product-card__foto:nth-child(2) {
    opacity: 1;
}

/* --- strada 2: comanda l'indice --- */
.bb-product-card[data-foto] .bb-product-card__foto {
    opacity: 0;
}

.bb-product-card[data-foto] .bb-product-card__foto.is-current {
    opacity: 1;
    z-index: 2;
}

/* [NEW-230] LE FRECCE DELLA SCHEDA
   Il disegno e la posizione vengono da .bb-scroll-freccia (99-overrides.css),
   la stessa freccia della ricerca e dello slider modelli. Qui solo le tre cose
   che nella scheda cambiano: dove si appoggia, che colore ha, quando si vede. */
.bb-product-card__image-wrapper {
    --bb-freccia-lato: 4px;
}

/* Sopra la foto e sopra il link, se no il clic finisce sulla scheda prodotto
   (e' la stessa trappola del cuore della wishlist, NEW-154: quel contenitore
   sta a z-index 3, e le frecce non gli si sovrappongono mai perche' stanno a
   mezza altezza). */
.bb-product-card .bb-scroll-freccia {
    z-index: 4;
}

/* Il grigio e' quello del segnalibro (NEW-229): sono due comandi dello stesso
   tipo sulla stessa foto, e il nero pieno qui competerebbe col prodotto.
   La classe ripetuta serve a battere `body .bb-scroll-freccia...:hover`, che
   rimette il nero e pesa 0,3,1: ripetendola si arriva a 0,4,0 senza
   !important. */
.bb-product-card .bb-scroll-freccia.bb-scroll-freccia,
.bb-product-card .bb-scroll-freccia.bb-scroll-freccia:hover,
.bb-product-card .bb-scroll-freccia.bb-scroll-freccia:focus,
.bb-product-card .bb-scroll-freccia.bb-scroll-freccia:focus-visible,
.bb-product-card .bb-scroll-freccia.bb-scroll-freccia:active {
    color: var(--bb-grigio-chiaro, #888);
}

/* Si vedono solo col mouse sulla scheda (o quando il tasto Tab arriva sulla
   freccia): `is-on` dice "porta da qualche parte", il resto lo dice la scheda.
   Le due regole battono `body .bb-scroll-freccia.is-on{display:block}` (0,2,1)
   con 0,3,0 e 0,4,0: prima si nasconde, poi si riapre al passaggio. */
.bb-product-card .bb-scroll-freccia.is-on {
    display: none;
}

.bb-product-card:hover .bb-scroll-freccia.is-on,
.bb-product-card:focus-within .bb-scroll-freccia.is-on {
    display: block;
}

/* Hover elegante: SOLO il flip immagine, niente "bordino" grigio.
   CAUSA REALE: Shoptimizer main.css `li.product:not(.product-category):hover img
   { transform: scale(0.98) }` rimpicciolisce l'immagine in hover, scoprendo lo
   sfondo grigio del wrapper (bordino ~3px). Qui azzero lo scale sulle immagini
   della card in hover -> nessun bordino, resta il flip (opacity). */
.bb-product-card:not(.product-category):hover .bb-product-card__image-wrapper img,
.bb-product-card:not(.product-category):hover .bb-product-card__image-wrapper .attachment-woocommerce_thumbnail {
    transform: none !important;
}
/* Safeguard: nessuna cornice/box-shadow/outline (hover); focus tastiera preservato. */
.bb-product-card,
.bb-product-card:hover,
.bb-product-card__image-wrapper,
.bb-product-card:hover .bb-product-card__image-wrapper,
.bb-product-card__image-wrapper > a:hover,
.bb-product-card:hover .bb-product-card__image-wrapper img {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.bb-product-card__image-wrapper::before,
.bb-product-card__image-wrapper::after,
.bb-product-card:hover .bb-product-card__image-wrapper::before,
.bb-product-card:hover .bb-product-card__image-wrapper::after {
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure product info is always visible and not affected by hover */
.bb-product-card__info {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.bb-product-card:hover .bb-product-card__info {
    opacity: 1;
}

/* Override Shoptimizer's gallery image hover behavior */
li.product:hover .woocommerce-image__wrapper .gallery-image,
li.product:hover .woocommerce-image__wrapper .gallery-image img,
.bb-product-card:hover .woocommerce-image__wrapper .gallery-image,
.bb-product-card:hover .woocommerce-image__wrapper .gallery-image img {
    z-index: auto !important;
    opacity: 1 !important;
}

li.product:not(.product-category):hover .woocommerce-image__wrapper:has(.gallery-image) img:not(.gallery-image),
.bb-product-card:not(.product-category):hover .woocommerce-image__wrapper:has(.gallery-image) img:not(.gallery-image) {
    opacity: 1 !important;
}

/* ===========================
   OVERRIDE THEME CONSTRAINTS (Selective overrides)
   =========================== */

/* Override Shoptimizer content wrappers only on shop pages */
.woocommerce-page.archive .col-full,
.post-type-archive-product .col-full,
.tax-product_cat .col-full {
    max-width: none;
    padding: 0;
}

/* Ensure shop content is not constrained */
.woocommerce.archive #content,
.post-type-archive-product #content,
.tax-product_cat #content {
    max-width: none;
}

.woocommerce.archive .site-main,
.post-type-archive-product .site-main,
.tax-product_cat .site-main {
    max-width: none;
    padding: 0;
}


/* ===========================
   INFINITE SCROLL LOADER
   =========================== */
.bb-infinite-loader {
    text-align: center;
    padding: 48px 0;
    width: 100%;
}

.bb-loader-spinner {
    display: block;
    width: 120px;
    height: 1px;
    background: var(--bb-line);
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
}

.bb-loader-spinner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--bb-fg);
    animation: bb-slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes bb-slide {
    0%   { left: -100%; }
    100% { left: 100%; }
}

.bb-loader-text {
    font-size: var(--bb-small);
    letter-spacing: var(--bb-ls-tight);
    text-transform: uppercase;
    color: var(--bb-muted);
    margin: 0;
}

.bb-no-more-products {
    font-size: var(--bb-small);
    letter-spacing: var(--bb-ls-tight);
    text-transform: uppercase;
    color: var(--bb-muted);
    margin: 0;
    padding: 24px 0;
}

/* Hide pagination when infinite scroll is active */
body.infinite-scroll-enabled .woocommerce-pagination,
body.infinite-scroll-enabled .bb-pagination {
    display: none;
}

/* MOD-01 (2026-08-25): pagina Modello (archivio pa_modello) — rimuovere il blocco
   "N prodotti / Filtra e ordina" subito sotto il NOME MODELLO. E una pagina curata
   (poche varianti dello stesso modello): nome → prodotti, senza barra ordina/filtra. */
body.tax-pa_modello .shoptimizer-sorting {
    display: none !important;
}

/* ===================================================================
   [NEW-154] IL SEGNALIBRO AL POSTO DEL CUORE
   Decisione di Fabio: sulla scheda l'icona della wishlist e' il NOSTRO
   segnalibro, lo stesso che sta in testata (in icons.php il ruolo
   'wishlist' e' gia' mappato su 'bookmark'). Non il cuore e non la
   spunta che CommerceKit usa di suo.

   Si cambia SOLO il disegno, non il meccanismo: le classi che contano
   per il plugin — commercekit-save-wishlist e
   commercekit-browse-wishlist — restano intatte, e con loro il suo
   JavaScript. Qui si sostituisce la maschera CSS, cioe' la sagoma
   ritagliata: vuoto = non salvato, pieno = salvato.

   Le due sagome sono generate DAI FILE in assets/icons/ (bookmark.svg e
   bookmark-filled.svg), non ricopiate a mano: se un domani arriva un
   segnalibro diverso si rigenerano insieme, invece di accorgersi mesi
   dopo che il pieno e il vuoto non sono piu' la stessa forma.

   Tutto scoped a .bb-product-card__icons: la testata e la scheda
   prodotto non si toccano.
   =================================================================== */

/* [NEW-229] CLASSE RADDOPPIATA, e non e' pignoleria. Una regola raggruppata
   di Shoptimizer contiene `li.product .commercekit-wishlist a
   em.cg-wishlist::before` con `background-color:#000`: fa 0,3,4, cioe'
   ESATTAMENTE quanto faceva la nostra — e a parita' vince chi arriva dopo,
   che e' lei. Aggiungere `body` non serviva a niente (restava 0,3,4):
   l'ho provato e il segnalibro era ancora nero.
   Raddoppiando la classe si va a 0,4,3: quattro classi battono tre,
   qualunque sia l'ordine. Trovato con CSS.getMatchedStylesForNode sullo
   pseudo-elemento, che e' l'unico modo per vedere un selettore raggruppato
   lungo 240 caratteri in cui il pezzo che ti colpisce e' il nono. */
.bb-product-card__icons.bb-product-card__icons .commercekit-wishlist a em.cg-wishlist:before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.4%22%20stroke-linecap=%22butt%22%20stroke-linejoin=%22miter%22><path%20d=%22M5.6%203.5%20H18.4%20V20.5%20L12%2015.6%20L5.6%2020.5%20Z%22></path></svg>");
    mask-image: url("data:image/svg+xml;charset=utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.4%22%20stroke-linecap=%22butt%22%20stroke-linejoin=%22miter%22><path%20d=%22M5.6%203.5%20H18.4%20V20.5%20L12%2015.6%20L5.6%2020.5%20Z%22></path></svg>");
    /* [NEW-229] Grigio chiaro invece del nero: il segnalibro e' un comando
       secondario e non deve competere con la foto. L'hex viene dalla
       Bottega, dov'e' il grigio dei segnaposto. Gli altri grigi di quella
       pagina non andavano: #555 e #333 sono testo, #ebebeb e' un fondo e su
       bianco sparirebbe.
       ⚠ Solo il segnalibro VUOTO. Quello salvato (cg-wishlist-t) resta
       scuro: se diventassero uguali si perderebbe la differenza fra
       "salvato" e "no", che e' l'unica cosa che quell'icona comunica. */
    background: var(--bb-grigio-chiaro, #888);
}

.bb-product-card__icons .commercekit-wishlist a em.cg-wishlist-t:before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22%23000%22><path%20d=%22M5.6%203.5%20H18.4%20V20.5%20L12%2015.6%20L5.6%2020.5%20Z%22></path></svg>");
    mask-image: url("data:image/svg+xml;charset=utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22%23000%22><path%20d=%22M5.6%203.5%20H18.4%20V20.5%20L12%2015.6%20L5.6%2020.5%20Z%22></path></svg>");
    background: var(--bb-fg);
}

/* [NEW-154] Solo il segnalibro, appoggiato all'angolo.
   Fabio: via il tondo bianco, e l'icona piu' su a destra.

   Il tondo non e' nostro: lo disegna il plugin con
   .commercekit-wishlist.mini { background:#fff; border-radius:50% }.
   Due classi, quindi per passare davanti senza !important ne servono
   tre — la classe del contenitore piu' quella del wrapper raddoppiata.
   Cosi' non dipende da quale foglio si carica per ultimo.

   Restano intatte le classi che contano per il plugin
   (commercekit-save-wishlist / commercekit-browse-wishlist) e lo
   z-index 3 del contenitore, senza il quale il clic torna a finire
   sull'immagine. */
.bb-product-card__icons .commercekit-wishlist.commercekit-wishlist {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.bb-product-card__icons .commercekit-wishlist.commercekit-wishlist a {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Piu' vicino all'angolo. Non basta spostare il contenitore: il wrapper
   del plugin e' posizionato per conto suo (.commercekit-wishlist.mini e'
   absolute con right:15px top:15px) e quei 15px si sommano. Si azzerano
   qui, cosi' l'icona si appoggia davvero all'angolo del contenitore. */
.bb-product-card__icons {
    top: 6px;
    right: 6px;
}

.bb-product-card__icons .commercekit-wishlist.commercekit-wishlist {
    position: absolute;
    top: 0;
    right: 0;
}

/* ── E SUL TELEFONO IL SEGNALIBRO DEVE ESSERCI SEMPRE
   Il plugin tiene l'icona a opacity:0 e la mostra al passaggio del
   mouse (ul.products li.product:hover .commercekit-wishlist.mini).
   Su desktop va bene, ed e' anche coerente con la regola dei box —
   riposo pulito, le cose compaiono col mouse. Ma dove il mouse non
   esiste quell'icona non compare MAI: sul telefono il segnalibro
   semplicemente non c'e'.
   Quindi dove non si puo' passare sopra, si vede e basta. Non e' un
   capriccio: e' la differenza fra un comando che esiste e uno che no. */
@media (hover: none) {
    .bb-product-card__icons .commercekit-wishlist.commercekit-wishlist {
        opacity: 1;
    }
}