/* ================================================================
   CamiBijoux – Boutique  v2.0
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
.cbj-shop,
.cbj-best {
    --cbj-pink:       #3A2317;
    --cbj-pink-dark:  #24150D;
    --cbj-green-bg:   #e6f4ec;
    --cbj-green-txt:  #2a7d50;
    --cbj-perso-bg:   #F9E8F1;
    --cbj-perso-txt:  #B96685;
    --cbj-sale-bg:    #fde8e8;
    --cbj-sale-txt:   #c0392b;
    --cbj-border:     #E5E5E5;
    --cbj-bg:         #F6F0EA;
    --cbj-card-bg:    #ffffff;
    --cbj-text:       #1a1a1a;
    --cbj-muted:      #777777;
    --cbj-radius:     14px;
    --cbj-gap:        20px;

    font-family: inherit;
    color: var(--cbj-text);
    box-sizing: border-box !important;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
.cbj-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--cbj-border) !important;
    margin-bottom: 14px !important;
    background: none !important;
}

.cbj-topbar__cats {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── BOUTONS CATÉGORIES ───────────────────────────────────────
   Taille alignée sur le reste de la barre : à 20px, ces pastilles
   pesaient plus lourd que le nom des produits qu'elles filtrent, et
   sur tablette la rangée touchait les deux bords. */
.cbj-cat-btn {
    padding: 7px 16px !important;
    border-radius: 50px !important;
    border: 1.5px solid var(--cbj-border) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cbj-muted) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-block !important;
    transition: border-color .18s, color .18s, background .18s;
}
.cbj-cat-btn:hover {
    border-color: var(--cbj-pink) !important;
    color: var(--cbj-pink) !important;
    background: transparent !important;
}
.cbj-cat-btn.is-active {
    border-color: var(--cbj-pink) !important;
    background: var(--cbj-pink) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ── SELECT TRI ─────────────────────────────────────────────── */
.cbj-topbar__sort-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.cbj-topbar__sort-wrap::after {
    content: "" !important;
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid var(--cbj-muted) !important;
    pointer-events: none !important;
}
.cbj-sort-select {
    padding: 7px 36px 7px 14px !important;
    border-radius: 50px !important;
    border: 1.5px solid var(--cbj-border) !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--cbj-text) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 160px !important;
    display: block !important;
    line-height: 1.5 !important;
    height: auto !important;
    transition: border-color .18s;
}
.cbj-sort-select:hover,
.cbj-sort-select:focus {
    border-color: var(--cbj-pink) !important;
    outline: none !important;
}

/* ── BOUTON « FILTRES » (mobile) ──────────────────────────────
   Masqué par défaut : au-dessus de 640px la colonne de filtres est
   visible en permanence et ce bouton n'aurait rien à replier. */
.cbj-filters-toggle { display: none !important; }

/* ── BARRE PERSONNALISABLE ──────────────────────────────────── */
.cbj-perso-bar {
    margin-bottom: 18px !important;
    padding: 0 !important;
    background: none !important;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.cbj-layout {
    display: flex !important;
    gap: 28px !important;
    align-items: flex-start !important;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.cbj-sidebar {
    flex: 0 0 200px !important;
    min-width: 160px !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cbj-filter-block {
    background: var(--cbj-card-bg) !important;
    border: 1px solid var(--cbj-border) !important;
    border-radius: var(--cbj-radius) !important;
    padding: 18px 16px !important;
    margin: 0 !important;
}

.cbj-filter-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--cbj-text) !important;
    margin: 0 0 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--cbj-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    display: block !important;
}

.cbj-filter-option {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 13px !important;
    color: var(--cbj-muted) !important;
    cursor: pointer !important;
    padding: 5px 0 !important;
    user-select: none !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    transition: color .15s;
}
.cbj-filter-option:hover { color: var(--cbj-text) !important; }

/* ── CHECKBOX CUSTOM ────────────────────────────────────────── */
.cbj-checkbox-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    width: 17px !important;
    height: 17px !important;
}
.cbj-checkbox-wrap input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 1 !important;
    padding: 0 !important;
}
.cbj-checkbox-custom {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 4px !important;
    border: 1.5px solid var(--cbj-border) !important;
    background: #fff !important;
    position: relative !important;
    transition: background .15s, border-color .15s;
}
.cbj-checkbox-custom::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 6px !important;
    height: 10px !important;
    border: 2px solid #fff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
    opacity: 0 !important;
    transition: opacity .15s;
}
.cbj-checkbox-wrap input[type="checkbox"]:checked ~ .cbj-checkbox-custom {
    background: var(--cbj-pink) !important;
    border-color: var(--cbj-pink) !important;
}
.cbj-checkbox-wrap input[type="checkbox"]:checked ~ .cbj-checkbox-custom::after {
    opacity: 1 !important;
}

/* ── PERSONNALISABLE LABEL ──────────────────────────────────── */
.cbj-perso-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 13px !important;
    color: var(--cbj-muted) !important;
    cursor: pointer !important;
    user-select: none !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color .15s;
}
.cbj-perso-label:hover { color: var(--cbj-text) !important; }

/* ── ZONE GRILLE ────────────────────────────────────────────── */
.cbj-grid-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    position: relative !important;
}

.cbj-grid {
    display: grid !important;
    gap: var(--cbj-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.cbj-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.cbj-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.cbj-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.cbj-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.cbj-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.cbj-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

/* ── CARTE PRODUIT ──────────────────────────────────────────── */
.cbj-card {
    background: var(--cbj-card-bg) !important;
    border-radius: var(--cbj-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform .22s ease, box-shadow .22s ease;
}
.cbj-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
}

/* ── IMAGE ──────────────────────────────────────────────────── */

/* Boîte de l'image : elle sert de repère au cœur, qui ne peut donc
   jamais déborder sur le nom du bijou, quelle que soit la hauteur du
   texte en dessous. flex-shrink: 0 pour qu'elle garde son carré même
   quand la carte voisine est plus haute. */
.cbj-card__media {
    position: relative !important;
    flex-shrink: 0 !important;
}

.cbj-card__img-link {
    display: block !important;
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f5f4f2 !important;
    flex-shrink: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}
.cbj-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    transition: transform .35s ease;
}
.cbj-card:hover .cbj-card__img {
    transform: scale(1.04);
}

/* ── BADGES ─────────────────────────────────────────────────── */
.cbj-badge {
    position: absolute !important;
    top: 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    pointer-events: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
.cbj-badge--perso {
    left: 10px !important;
    right: auto !important;
    background: var(--cbj-perso-bg) !important;
    color: var(--cbj-perso-txt) !important;
}
.cbj-badge--best {
    right: 10px !important;
    left: auto !important;
    background: var(--cbj-green-bg) !important;
    color: var(--cbj-green-txt) !important;
}
.cbj-badge--sale {
    right: 10px !important;
    left: auto !important;
    background: var(--cbj-sale-bg) !important;
    color: var(--cbj-sale-txt) !important;
}

/* ── WISHLIST ───────────────────────────────────────────────── */
/* Repère : .cbj-card__media, donc le bas de l'image. Auparavant le
   repère était la carte entière et le décalage (70px) devait deviner la
   hauteur du nom et du prix — un nom sur deux lignes le faisait passer
   par-dessus le titre. */
.cbj-wish {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.92) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
    color: #ccc !important;
    z-index: 2 !important;
    padding: 0 !important;
    backdrop-filter: blur(4px);
    transition: color .2s, transform .2s;
}
.cbj-wish:hover          { color: #B96685 !important; transform: scale(1.12); }
.cbj-wish.is-active      { color: #B96685 !important; }
.cbj-wish.is-active svg  { fill: #B96685 !important; stroke: #B96685 !important; }
.cbj-wish svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    fill: none !important;
    transition: fill .2s, stroke .2s;
}

/* ── CORPS CARTE ────────────────────────────────────────────── */
.cbj-card__body {
    padding: 12px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: none !important;
    border: none !important;
}
.cbj-card__name {
    font-family: "DM Sans", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--cbj-text) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color .15s;
}
.cbj-card__name:hover {
    color: var(--cbj-pink) !important;
    text-decoration: none !important;
}

.cbj-card__price {
    font-family: "DM Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: var(--cbj-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.cbj-card__price .woocommerce-Price-amount {
    font-weight: 700 !important;
    color: var(--cbj-text) !important;
}
.cbj-card__price del .woocommerce-Price-amount {
    font-weight: 400 !important;
    color: #aaa !important;
}
.cbj-card__price ins {
    text-decoration: none !important;
    background: none !important;
}

/* ── CHARGEMENT ─────────────────────────────────────────────── */
.cbj-loading {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(249,248,246,.7) !important;
    border-radius: var(--cbj-radius) !important;
    z-index: 10 !important;
}
.cbj-loading[hidden] { display: none !important; }

.cbj-spinner {
    width: 36px !important;
    height: 36px !important;
    border: 3px solid var(--cbj-border) !important;
    border-top-color: var(--cbj-pink) !important;
    border-radius: 50% !important;
    animation: cbj-spin .7s linear infinite !important;
}
@keyframes cbj-spin { to { transform: rotate(360deg); } }

/* ── MESSAGE VIDE ────────────────────────────────────────────── */
.cbj-no-result {
    text-align: center !important;
    color: var(--cbj-muted) !important;
    font-size: 14px !important;
    padding: 40px 20px !important;
}
.cbj-no-result[hidden] { display: none !important; }

.cbj-notice {
    color: var(--cbj-muted) !important;
    font-style: italic !important;
    padding: 20px 0 !important;
}

/* ── GRILLE EN CHARGEMENT ───────────────────────────────────── */
.cbj-grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity .2s;
}

/* ── PAGINATION ─────────────────────────────────────────────── */
.cbj-pagination-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cbj-pagination-wrap::-webkit-scrollbar {
    display: none;
}

.cbj-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 1px 4px !important;
}

.cbj-page-btn,
.cbj-page-dots {
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.cbj-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 1.5px solid var(--cbj-border) !important;
    background: #fff !important;
    color: var(--cbj-text) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: border-color .18s, background .18s, color .18s, transform .18s !important;
}

.cbj-page-btn:hover,
.cbj-page-btn:focus {
    border-color: var(--cbj-pink) !important;
    color: var(--cbj-pink) !important;
    outline: none !important;
}

.cbj-page-btn.is-active {
    background: var(--cbj-pink) !important;
    border-color: var(--cbj-pink) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.cbj-page-btn[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.cbj-page-btn--nav {
    min-width: unset !important;
    white-space: nowrap !important;
}

.cbj-page-dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cbj-muted) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cbj-cols-4,
    .cbj-cols-5,
    .cbj-cols-6 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 1100px) {
    /* Sur tablette, 200px de colonne de filtres sur 800 de large, c'est
       un quart de l'écran pour quatre cases à cocher. */
    .cbj-sidebar        { flex: 0 0 168px !important; min-width: 150px !important; }
    .cbj-layout         { gap: 20px !important; }
    .cbj-cat-btn        { padding: 6px 14px !important; font-size: 13px !important; }
    .cbj-topbar__cats   { gap: 6px !important; }
    .cbj-sort-select    { min-width: 140px !important; }
}

@media (max-width: 900px) {
    .cbj-cols-3,
    .cbj-cols-4,
    .cbj-cols-5,
    .cbj-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
    /* align-items: flex-start est utile en deux colonnes — la barre de
       filtres ne doit pas s'étirer à la hauteur de la grille. Empilé,
       il fait rétrécir la grille produits à la largeur de son contenu,
       qui déborde alors de l'écran sur les petits téléphones. */
    .cbj-layout         { flex-direction: column !important; gap: 16px !important; align-items: stretch !important; }
    .cbj-grid-wrapper   { width: 100% !important; min-width: 0 !important; }
    .cbj-sidebar        { max-width: 100% !important; width: 100% !important; flex: unset !important; }
    .cbj-filter-block   { display: flex !important; flex-wrap: wrap !important; gap: 0 24px !important; }
    .cbj-filter-title   { width: 100% !important; }

    /* ── Filtres repliés derrière un bouton ──────────────────
       Les filtres restent dans le document, simplement masqués :
       une case cochée puis repliée continue donc de filtrer, et le
       compteur du bouton le rappelle. */
    .cbj-filters-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 14px !important;
        padding: 8px 16px !important;
        border: 1.5px solid var(--cbj-border) !important;
        border-radius: 50px !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        color: var(--cbj-text) !important;
        cursor: pointer !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        transition: border-color .18s, color .18s;
    }
    .cbj-filters-toggle[aria-expanded="true"] {
        border-color: var(--cbj-pink) !important;
        color: var(--cbj-pink) !important;
    }
    .cbj-filters-toggle__icon {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 auto !important;
    }
    .cbj-filters-toggle__icon svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    /* Pastille du nombre de filtres actifs */
    .cbj-filters-toggle__count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border-radius: 50px !important;
        background: var(--cbj-pink) !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    .cbj-filters-toggle__count[hidden] { display: none !important; }

    /* ── Les catégories rejoignent le panneau ────────────────
       Elles sont dans la barre du haut, donc AVANT le bouton dans le
       document : les afficher telles quelles les aurait placées
       au-dessus de lui.

       display:contents dissout la barre du haut sans toucher au
       balisage : ses deux enfants — catégories et tri — deviennent des
       éléments de la colonne et se rangent où l'on veut. Le tri reste
       visible en permanence, les catégories descendent dans le panneau.

       Reparenter en JavaScript aurait fait la même chose au prix d'un
       déplacement à surveiller à chaque changement de taille d'écran. */
    /* Une grille de deux colonnes plutôt qu'une simple colonne : tri et
       bouton Filtres partagent la première rangée, tout le reste occupe
       la largeur entière.

       C'est ce qui permet de les aligner sans les envelopper dans un
       conteneur commun — ils n'en ont pas, et n'en auront pas : le tri
       vit dans la barre du haut, le bouton juste après elle. La grille
       range des éléments qui restent voisins dans le document. */
    /* Uniquement les blocs qui ont une barre de filtres. La classe
       cbj-shop sert aussi au carrousel, aux meilleures ventes et à la
       vitrine, qui n'ont ni tri ni bouton : la grille y empilait leur
       entête et leur piste côte à côte. */
    .cbj-shop--filterable {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        row-gap: 12px !important;
        column-gap: 10px !important;
    }
    .cbj-topbar {
        display: contents !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cbj-search-heading    { order: 0 !important; grid-column: 1 / -1 !important; }
    .cbj-topbar__sort-wrap { order: 1 !important; grid-column: 1 !important; }
    .cbj-filters-toggle    { order: 2 !important; grid-column: 2 !important; justify-self: end !important; }
    .cbj-topbar__cats      { order: 3 !important; grid-column: 1 / -1 !important; }
    .cbj-perso-bar         { order: 4 !important; grid-column: 1 / -1 !important; }
    .cbj-layout            { order: 5 !important; grid-column: 1 / -1 !important; }

    /* Les écarts sont désormais ceux de la grille : les marges d'origine
       s'y ajouteraient. */
    .cbj-topbar__sort-wrap,
    .cbj-filters-toggle,
    .cbj-topbar__cats,
    .cbj-perso-bar         { margin-bottom: 0 !important; }

    .cbj-shop--filterable:not(.is-filters-open) .cbj-topbar__cats,
    .cbj-shop--filterable:not(.is-filters-open) .cbj-perso-bar,
    .cbj-shop--filterable:not(.is-filters-open) .cbj-sidebar { display: none !important; }

    /* Ouverts, les blocs du panneau se lisent d'un seul tenant. */
    .cbj-shop--filterable.is-filters-open .cbj-perso-bar { margin-bottom: 12px !important; }
    .cbj-grid           { gap: 12px !important; }
    .cbj-topbar         { gap: 10px !important; }
    .cbj-topbar__cats   { gap: 6px !important; }
    .cbj-cat-btn        { padding: 5px 12px !important; font-size: 12px !important; }
    .cbj-pagination-wrap { margin-top: 18px !important; }
    .cbj-page-btn,
    .cbj-page-dots      { min-width: 38px !important; height: 38px !important; font-size: 13px !important; }
    .cbj-page-btn       { padding: 0 12px !important; }
    .cbj-pagination     { flex-wrap: nowrap !important; }

    .cbj-cols-2,
    .cbj-cols-3,
    .cbj-cols-4,
    .cbj-cols-5,
    .cbj-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 400px) {
    .cbj-cols-2,
    .cbj-cols-3,
    .cbj-cols-4,
    .cbj-cols-5,
    .cbj-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
    .cbj-card__body     { padding: 9px 10px 11px !important; }
}

/* ── RÉSULTATS DE RECHERCHE  [camibijoux_search_results] ────── */
.cbj-search-heading {
    margin-bottom: 22px !important;
}

.cbj-search-title {
    font-family: inherit !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--cbj-text) !important;
    margin: 0 0 6px !important;
}

.cbj-search-count {
    font-size: 14px !important;
    color: var(--cbj-muted) !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .cbj-search-title { font-size: 21px !important; }
}

/* ══════════════════════════════════════════════════════════════
   BOUTON FAVORI AUTONOME  [camibijoux_wishlist]

   Le cœur de la grille est positionné en absolu par-dessus l'image.
   Utilisé seul dans un modèle de boucle, il lui faut ses propres
   variables (il n'hérite plus de .cbj-shop) et un positionnement
   dans le flux.
   ══════════════════════════════════════════════════════════════ */
.cbj-wish--inline,
.cbj-wish--floating {
    --cbj-pink: #3A2317;
    --cbj-text: #1a1a1a;
    width: var(--cbj-wish-size, 34px) !important;
    height: var(--cbj-wish-size, 34px) !important;
}

/* Dans le flux : s'aligne comme un bouton normal */
.cbj-wish--inline {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    vertical-align: middle !important;
}

/* En surimpression : le conteneur parent doit être en position: relative */
.cbj-wish--floating {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
}

/* Le cœur suit la taille demandée */
.cbj-wish--inline svg,
.cbj-wish--floating svg {
    width: calc(var(--cbj-wish-size, 34px) * 0.47) !important;
    height: calc(var(--cbj-wish-size, 34px) * 0.47) !important;
}

/* Version avec texte : pilule au lieu d'un rond */
.cbj-wish--has-label {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 16px 0 13px !important;
    gap: 8px !important;
    border-radius: 999px !important;
}
.cbj-wish__label {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--cbj-text) !important;
    white-space: nowrap !important;
}
.cbj-wish--has-label.is-active .cbj-wish__label { color: #B96685 !important; }


/* ══════════════════════════════════════════════════════════════
   MEILLEURES VENTES  [camibijoux_bestsellers]
   ══════════════════════════════════════════════════════════════ */
.cbj-best {
    width: 100% !important;
}

.cbj-best__title {
    margin: 0 0 20px !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--cbj-text) !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

@media (max-width: 700px) {
    .cbj-best__title { font-size: 20px !important; margin-bottom: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════
   VITRINE  [camibijoux_showcase]
   ══════════════════════════════════════════════════════════════ */
.cbj-showcase { width: 100% !important; }

/* L'attribut hidden doit l'emporter sur les display des règles ci-dessous */
.cbj-showcase [hidden] { display: none !important; }

.cbj-showcase__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--cbj-gap) !important;
    align-items: start !important;
}

/* ── Produit en vedette ───────────────────────────────── */
.cbj-sc-hero {
    position: relative !important;
    display: block !important;
    border-radius: var(--cbj-radius) !important;
    overflow: hidden !important;
    background: var(--cbj-bg) !important;
}

.cbj-sc-hero__media { display: block !important; }

.cbj-sc-hero__img {
    display: block !important;
    width: 100% !important;
    /* Format carré : celui du catalogue, comme les cartes produit */
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    margin: 0 !important;
}

.cbj-sc-hero__overlay {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 22px 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    /* Dégradé plutôt qu'un aplat : le bas de l'image reste lisible */
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.28) 55%, transparent) !important;
}

.cbj-sc-hero__eyebrow {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.85) !important;
    line-height: 1.4 !important;
}

.cbj-sc-hero__name {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}
.cbj-sc-hero__name:hover { color: #fff !important; text-decoration: underline !important; }

.cbj-sc-hero__bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 6px !important;
}

.cbj-sc-hero__price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.cbj-sc-hero__price del { opacity: .6 !important; font-weight: 500 !important; }
.cbj-sc-hero__price ins { text-decoration: none !important; }

.cbj-sc-hero__actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cbj-sc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .18s, color .18s, border-color .18s !important;
}
.cbj-sc-btn--ghost {
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    color: #fff !important;
}
.cbj-sc-btn--ghost:hover { background: #fff !important; color: var(--cbj-text) !important; }

.cbj-sc-btn--solid {
    background: var(--cbj-pink) !important;
    border: 1px solid var(--cbj-pink) !important;
    color: #fff !important;
}
.cbj-sc-btn--solid:hover {
    background: var(--cbj-pink-dark) !important;
    border-color: var(--cbj-pink-dark) !important;
    color: #fff !important;
}
.cbj-sc-btn.loading { opacity: .65 !important; pointer-events: none !important; }
.cbj-sc-btn.added::after { content: '' !important; }

/* ── Liste latérale ───────────────────────────────────── */
.cbj-showcase__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.cbj-sc-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--cbj-border) !important;
}
.cbj-sc-item:last-child { border-bottom: none !important; }

.cbj-sc-item__pick {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.cbj-sc-item__num {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    color: var(--cbj-muted) !important;
    line-height: 1 !important;
}

.cbj-sc-item__thumb {
    flex: 0 0 auto !important;
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--cbj-bg) !important;
}
.cbj-sc-item__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.cbj-sc-item__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.cbj-sc-item__name {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--cbj-text) !important;
    line-height: 1.35 !important;
}
.cbj-sc-item__pick:hover .cbj-sc-item__name { color: var(--cbj-pink) !important; }

.cbj-sc-item__price {
    font-size: 13.5px !important;
    color: var(--cbj-muted) !important;
    line-height: 1.3 !important;
}

.cbj-sc-item__add {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid var(--cbj-border) !important;
    background: var(--cbj-card-bg) !important;
    color: var(--cbj-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background .18s, color .18s, border-color .18s !important;
}
.cbj-sc-item__add svg { width: 16px !important; height: 16px !important; }
.cbj-sc-item__add:hover {
    background: var(--cbj-pink) !important;
    border-color: var(--cbj-pink) !important;
    color: #fff !important;
}
.cbj-sc-item__add.loading { opacity: .55 !important; pointer-events: none !important; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
    .cbj-showcase__inner { grid-template-columns: 1fr !important; }
    .cbj-sc-hero__name   { font-size: 19px !important; }
}

@media (max-width: 520px) {
    .cbj-sc-hero__overlay { padding: 16px 14px 14px !important; }
    .cbj-sc-hero__bottom  { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .cbj-sc-hero__actions { width: 100% !important; }
    .cbj-sc-btn           { flex: 1 1 0 !important; }
    .cbj-sc-item__thumb   { width: 48px !important; height: 48px !important; }
    .cbj-sc-item__name    { font-size: 13.5px !important; }
}

/* ══════════════════════════════════════════════════════════════
   CARROUSEL  [camibijoux_carousel]
   ══════════════════════════════════════════════════════════════ */
.cbj-carousel {
    --cbj-per: 4;          /* surchargé en ligne par le shortcode */
    width: 100% !important;
    position: relative !important;
}

.cbj-carousel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.cbj-carousel__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--cbj-text) !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Sans titre, les flèches restent alignées à droite */
.cbj-carousel__nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

.cbj-carousel__arrow {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--cbj-border) !important;
    background: var(--cbj-card-bg) !important;
    color: var(--cbj-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .18s, color .18s, border-color .18s, opacity .18s !important;
}
.cbj-carousel__arrow svg { width: 18px !important; height: 18px !important; }
.cbj-carousel__arrow:hover:not(:disabled) {
    background: var(--cbj-pink) !important;
    border-color: var(--cbj-pink) !important;
    color: #fff !important;
}
.cbj-carousel__arrow:disabled {
    opacity: .32 !important;
    cursor: default !important;
}

/* ── Piste ────────────────────────────────────────────── */
.cbj-carousel__track {
    display: flex !important;
    gap: var(--cbj-gap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    /* Évite que le navigateur remonte la page pendant un balayage */
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* Un conteneur qui défile horizontalement rogne forcément l'axe
       vertical : les ombres des cartes étaient coupées en haut et en
       bas. On leur laisse de la place par du remplissage interne, que
       les marges négatives compensent pour garder les cartes alignées
       sur les bords de la section. */
    padding: 10px 6px 16px !important;
    margin: -10px -6px 0 !important;
    list-style: none !important;
}
.cbj-carousel__track::-webkit-scrollbar { display: none !important; }
.cbj-carousel__track:focus-visible {
    outline: 2px solid var(--cbj-pink) !important;
    outline-offset: 4px !important;
}

.cbj-carousel__slide {
    /* Largeur déduite du nombre visible, espacements retirés */
    flex: 0 0 calc((100% - (var(--cbj-per) - 1) * var(--cbj-gap)) / var(--cbj-per)) !important;
    max-width: calc((100% - (var(--cbj-per) - 1) * var(--cbj-gap)) / var(--cbj-per)) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
}

/* La carte occupe toute la diapositive */
.cbj-carousel__slide .cbj-card {
    width: 100% !important;
    height: 100% !important;
}

/* ── Responsive : on réduit le nombre visible ─────────── */
@media (max-width: 1100px) {
    .cbj-carousel { --cbj-per: 3 !important; }
}
@media (max-width: 820px) {
    .cbj-carousel { --cbj-per: 2 !important; }
    .cbj-carousel__title { font-size: 20px !important; }
}
@media (max-width: 520px) {
    /* 1,3 : la diapositive suivante dépasse légèrement, ce qui montre
       qu'il y a du contenu à faire défiler */
    .cbj-carousel { --cbj-per: 1.3 !important; }
    .cbj-carousel__arrow { width: 36px !important; height: 36px !important; }
}