/* ================================================================
   CamiBijoux – Fiche Produit  v1.1
   ================================================================ */

.cbjs-layout {
    --cbjs-pink:    #3A2317;
    --cbjs-pink-dk: #24150D;
    --cbjs-text:    #1a1a1a;
    --cbjs-muted:   #666;
    --cbjs-light:   #F6F0EA;
    --cbjs-border:  #E5E5E5;
    --cbjs-radius:  14px;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: start !important;
    font-family: inherit !important;
    color: var(--cbjs-text) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════
   COLONNE GAUCHE — Galerie WooCommerce
   ═══════════════════════════════════════════════════════ */

.cbjs-gallery-col {
    position: sticky !important;
    top: 24px !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════
   GALERIE — deux états à distinguer

   FlexSlider crée un conteneur .flex-viewport et y déplace le
   wrapper des images (jquery.flexslider.js, ligne 834). C'est
   notre seul témoin fiable d'initialisation : le script n'ajoute
   aucune classe « slides », s'y fier masquait définitivement les
   diapositives.

   AVANT init  : les images sont dans le flux, on n'affiche que la
                 première, en pleine largeur — pas d'empilement.
   APRÈS init  : FlexSlider calcule lui-même la largeur de chaque
                 diapositive et les fait flotter côte à côte. On ne
                 doit alors surtout PAS imposer width: 100%, sinon
                 chaque diapositive occupe toute la piste et elles
                 retombent les unes sous les autres.

   D'où le sélecteur enfant direct « .woocommerce-product-gallery >
   .woocommerce-product-gallery__wrapper » : il cesse de s'appliquer
   dès que le wrapper passe dans .flex-viewport.
   ══════════════════════════════════════════════════════ */

/* ── AVANT initialisation ──────────────────────────────── */
.cbjs-gallery-col .woocommerce-product-gallery
    > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.cbjs-gallery-col .woocommerce-product-gallery
    > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
    display: none !important;
}

/* ── APRÈS initialisation ──────────────────────────────── */
/* Aucune largeur déclarée : les styles en ligne de FlexSlider
   pilotent la piste. On se contente du rendu visuel. */
.cbjs-gallery-col .flex-viewport .woocommerce-product-gallery__image {
    display: block !important;
    margin: 0 !important;
}

/* Conteneur de galerie */
.cbjs-gallery-col .woocommerce-product-gallery {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Certains thèmes masquent la galerie en attendant le script */
    opacity: 1 !important;
}
.cbjs-gallery-col .woocommerce-product-gallery.is-pending,
.cbjs-gallery-col .woocommerce-product-gallery.is-pending img {
    opacity: 1 !important;
}

/* Wrapper des images.
   Avant init il porte l'arrondi et le fond ; après init c'est
   .flex-viewport qui s'en charge, et sa largeur appartient à
   FlexSlider — on ne la contraint donc plus. */
.cbjs-gallery-col .woocommerce-product-gallery
    > .woocommerce-product-gallery__wrapper {
    display: block !important;
    width: 100% !important;
    border-radius: var(--cbjs-radius) !important;
    overflow: hidden !important;
    background: var(--cbjs-light) !important;
    margin: 0 !important;
}
.cbjs-gallery-col .flex-viewport .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Fenêtre du carrousel.
   height: auto neutralise la hauteur en pixels que le script fixe
   100 ms après le chargement de la première image — c'était le saut
   de mise en page du « deuxième temps ». Le ratio 1/1 des images
   réserve déjà la place. */
.cbjs-gallery-col .flex-viewport {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: var(--cbjs-radius) !important;
    background: var(--cbjs-light) !important;
    transition: none !important;
}

/* Lien enveloppant l'image d'une diapositive */
.cbjs-gallery-col .woocommerce-product-gallery__image a {
    display: block !important;
    width: 100% !important;
}

/* Image d'une diapositive */
.cbjs-gallery-col .woocommerce-product-gallery__image img,
.cbjs-gallery-col img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: var(--cbjs-radius) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* ── Réservation de la rangée de miniatures ────────────
   FlexSlider fabrique .flex-control-thumbs à l'exécution : elle
   n'existe pas dans le HTML servi. Son apparition pousse donc le
   contenu vers le bas, ce qui se voit comme un « second temps »
   de chargement.

   On réserve sa hauteur exacte tant qu'elle est absente. Le calcul
   reproduit la grille : 4 colonnes carrées séparées de 3 gouttières
   de 10px, soit une hauteur de (largeur − 30px) / 4. Un padding en
   pourcentage se calcule sur la LARGEUR du bloc parent, ce qui rend
   la réservation juste à toutes les tailles d'écran.

   :has() n'est pas compris par les navigateurs anciens : la règle
   est alors ignorée et on retrouve simplement le comportement
   actuel, sans rien casser. */
.cbjs-gallery-col[data-cbjs-thumbs]:not(:has(.flex-control-thumbs))::after {
    content: '' !important;
    display: block !important;
    margin-top: 12px !important;
    padding-top: calc(25% - 7.5px) !important;
}

/* Icône zoom */
.cbjs-gallery-col .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Miniatures */
.cbjs-gallery-col .flex-control-nav.flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    /* FlexSlider positionne parfois cette liste en absolu sous le
       carrousel : on la remet dans le flux, collée aux images. */
    position: static !important;
    bottom: auto !important;
    width: auto !important;
    overflow: visible !important;
}
.cbjs-gallery-col .flex-control-thumbs li {
    margin: 0 !important;
    padding: 0 !important;
    /* WooCommerce impose « width: 25% » et « float: left » à chaque
       miniature. Dans une grille, cette largeur s'applique À L'INTÉRIEUR
       de la colonne : les vignettes devenaient minuscules et largement
       espacées. On rend la largeur à la grille. */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    list-style: none !important;
}
.cbjs-gallery-col .flex-control-thumbs li img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
    cursor: pointer !important;
    border: 2.5px solid transparent !important;
    background: var(--cbjs-light) !important;
    transition: border-color .18s !important;
    opacity: .75 !important;
}
.cbjs-gallery-col .flex-control-thumbs li img:hover,
.cbjs-gallery-col .flex-control-thumbs li img.flex-active {
    border-color: var(--cbjs-pink) !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   COLONNE DROITE — Infos produit
   ═══════════════════════════════════════════════════════ */

.cbjs-info-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* ── Badges ──────────────────────────────────────────── */
.cbjs-badges {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.cbjs-badge {
    display: inline-block !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}
.cbjs-badge--new   { background: #E9B3D3 !important; color: #3A2317 !important; text-transform: none !important; font-size: 13px !important; }
.cbjs-badge--best  { background: #fef3c7 !important; color: #92400e !important; }
.cbjs-badge--perso { background: #f3f4f6 !important; color: #374151 !important; text-transform: none !important; font-size: 13px !important; }

/* ── Titre ───────────────────────────────────────────── */
.cbjs-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--cbjs-text) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ── Note ────────────────────────────────────────────── */
.cbjs-rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cbjs-rating .star-rating {
    font-size: 15px !important;
    overflow: hidden !important;
    position: relative !important;
    height: 1em !important;
    line-height: 1 !important;
    width: 5.4em !important;
    display: block !important;
}
.cbjs-rating .star-rating::before,
.cbjs-rating .star-rating span::before {
    color: #f59e0b !important;
    letter-spacing: .1em !important;
}
.cbjs-rating__count {
    font-size: 13px !important;
    color: var(--cbjs-muted) !important;
}

/* ── Prix ────────────────────────────────────────────── */
.cbjs-price {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--cbjs-text) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.cbjs-price .woocommerce-Price-amount { font-weight: 700 !important; color: var(--cbjs-text) !important; }
.cbjs-price del   { color: #aaa !important; font-size: 18px !important; margin-right: 6px !important; }
.cbjs-price ins   { text-decoration: none !important; }

/* ── Stock animé ─────────────────────────────────────── */

/* Une seule keyframe, la couleur de l'onde est portée par
   la custom property --cbjs-pulse définie sur chaque variante */
@keyframes cbjs-pulse {
    0%   { transform: scale(.95); box-shadow: 0 0 0 0    var(--cbjs-pulse); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 10px transparent; }
    100% { transform: scale(.95); box-shadow: 0 0 0 0    transparent; }
}

/* Deux variables pilotent toute la taille du bloc : la police et la
   pastille. Les paliers plus bas n'ont ainsi qu'à les redéfinir, au lieu
   de recopier six déclarations qui finiraient par diverger. */
.cbjs-stock {
    --cbjs-stock-fs:  15px;
    --cbjs-stock-dot: 10px;
    --cbjs-stock-gap: 10px;

    display: flex !important;
    align-items: center !important;
    gap: var(--cbjs-stock-gap) !important;
    font-size: var(--cbjs-stock-fs) !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #333 !important;
    margin: 0 !important;
}

.cbjs-stock__dot {
    width: var(--cbjs-stock-dot) !important;
    height: var(--cbjs-stock-dot) !important;
    border-radius: 50% !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.cbjs-stock__dot::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    animation: cbjs-pulse 2s infinite ease-in-out !important;
    z-index: -1 !important;
}

/* Vert — en stock */
.cbjs-stock__dot--green {
    --cbjs-pulse: rgba(11, 156, 49, .7) !important;
    background: #0b9c31 !important;
}
.cbjs-stock__dot--green::after { background: #0b9c31 !important; }

/* Jaune — réapprovisionnement */
.cbjs-stock__dot--yellow {
    --cbjs-pulse: rgba(220, 170, 0, .7) !important;
    background: #dcaa00 !important;
}
.cbjs-stock__dot--yellow::after { background: #dcaa00 !important; opacity: .4 !important; }

/* Rouge — rupture */
.cbjs-stock__dot--red {
    --cbjs-pulse: rgba(220, 38, 38, .7) !important;
    background: #dc2626 !important;
}
.cbjs-stock__dot--red::after { background: #dc2626 !important; opacity: .35 !important; }

/* ═══════════════════════════════════════════════════════
   FORMULAIRE — WooCommerce + WAPF
   ═══════════════════════════════════════════════════════ */

.cbjs-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: relative !important;
}

/* Stock WC natif masqué (remplacé par .cbjs-stock) */
.cbjs-form-wrap p.stock { display: none !important; }

/* ── Labels WAPF ─────────────────────────────────────── */
.cbjs-form-wrap .wapf-field-group,
.cbjs-form-wrap .wapf-field-container {
    margin-bottom: 4px !important;
}
.cbjs-form-wrap .wapf-field-label {
    margin-bottom: 8px !important;
}
.cbjs-form-wrap .wapf-field-label label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cbjs-text) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: default !important;
    background: none !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.cbjs-form-wrap .wapf-field-label abbr.required { display: none !important; }

/* "Choisir" / valeur sélectionnée — injecté par JS */
.cbjs-choice-indicator {
    color: #B96685 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* ── Swatches image WAPF (couleurs circulaires) ──────── */
.cbjs-form-wrap .wapf-swatch-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cbjs-form-wrap .wapf-swatch--image {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 0 transparent !important;
    /* zoom au hover, ring rose à la sélection */
    transition: transform .18s ease, box-shadow .18s ease !important;
    flex-shrink: 0 !important;
}
.cbjs-form-wrap .wapf-swatch--image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    margin: 0 !important;
}
/* Hover : léger zoom, pas de bordure */
.cbjs-form-wrap .wapf-swatch--image:hover {
    transform: scale(1.12) !important;
}
/* Sélectionné : ring rose collé au cercle, pas de zoom */
.cbjs-form-wrap .wapf-swatch--image.wapf-swatch--active,
.cbjs-form-wrap .wapf-swatch--image.selected,
.cbjs-form-wrap .wapf-swatch--image:has(input:checked) {
    box-shadow: 0 0 0 2.5px var(--cbjs-pink) !important;
    transform: none !important;
}
.cbjs-form-wrap .wapf-swatch--image input[type="radio"],
.cbjs-form-wrap .wapf-swatch--image input[type="hidden"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* Masquer le contenu tooltip WAPF.
   IMPORTANT : NE PAS cibler .wapf-tt-wrap — c'est aussi la classe
   portée par chaque swatch (class="wapf-swatch--image wapf-tt-wrap").
   WAPF cache déjà .wapf-tt-content en inline style="display:none" ;
   on le force en !important pour bloquer le show au hover. */
.cbjs-form-wrap .wapf-tt-content,
.cbjs-form-wrap .wapf-tt-tip,
.cbjs-form-wrap .wapf-tt-arrow {
    display:    none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Select WAPF ─────────────────────────────────────── */
.cbjs-form-wrap select.wapf-input,
.cbjs-form-wrap .wapf-field-select select {
    width: 100% !important;
    padding: 11px 36px 11px 14px !important;
    border: 1.5px solid var(--cbjs-border) !important;
    border-radius: var(--cbjs-radius) !important;
    background: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--cbjs-text) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color .2s !important;
}
.cbjs-form-wrap select.wapf-input:focus,
.cbjs-form-wrap .wapf-field-select select:focus {
    border-color: var(--cbjs-pink) !important;
}

/* ── Variations WC natives → pills ──────────────────── */
.cbjs-form-wrap .variations {
    width: 100% !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
}
.cbjs-form-wrap .variations tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}
.cbjs-form-wrap .variations td,
.cbjs-form-wrap .variations th {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    background: none !important;
}
.cbjs-form-wrap .variations .label label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cbjs-text) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}
.cbjs-form-wrap .variations select.cbjs-hidden-select { display: none !important; }
.cbjs-form-wrap .reset_variations               { display: none !important; }

/* Pills générées par JS */
.cbjs-var-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.cbjs-var-pill {
    padding: 11px 24px !important;
    min-width: 52px !important;
    text-align: center !important;
    border: 1.5px solid var(--cbjs-border) !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--cbjs-text) !important;
    cursor: pointer !important;
    background: #fff !important;
    transition: border-color .15s, background .15s, color .15s !important;
    user-select: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.cbjs-var-pill:hover {
    border-color: var(--cbjs-pink) !important;
    color: var(--cbjs-pink) !important;
}
.cbjs-var-pill.is-active {
    background: var(--cbjs-pink) !important;
    border-color: var(--cbjs-pink) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.cbjs-var-pill.is-disabled {
    opacity: .35 !important;
    pointer-events: none !important;
}

/* ── Formulaire cart : empilage vertical ─────────────── */
/* CRITIQUE : sans flex-direction:column, les champs WAPF,
   la quantité et le bouton se retrouvent tous sur une ligne */
.cbjs-form-wrap .cart,
.cbjs-form-wrap form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* ── Ligne ATC : quantité + bouton + wishlist ─────────── */
/* Produit SIMPLE : injectée par JS via setupAtcRow()     */
.cbjs-atc-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Produit VARIABLE : WC gère display via jQuery show()/hide() →
   on n'utilise PAS !important sur display pour le laisser fonctionner.
   align-items/gap en !important pour résister au thème. */
.cbjs-layout .cbjs-form-wrap .woocommerce-variation-add-to-cart,
.cbjs-layout .cbjs-form-wrap .variations_button {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Quantité */
.cbjs-form-wrap .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid var(--cbjs-border) !important;
    border-radius: 50px !important;
    height: 52px !important;
    background: #fff !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}
.cbjs-form-wrap .cbjs-qty-btn {
    width: 42px !important;
    height: 52px !important;
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: var(--cbjs-text) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color .15s !important;
}
.cbjs-form-wrap .cbjs-qty-btn:hover { color: var(--cbjs-pink) !important; }
.cbjs-form-wrap .cbjs-qty-btn:disabled {
    opacity: .3 !important;
    cursor: default !important;
    color: var(--cbjs-text) !important;
}

/* Valeur affichée quand la quantité est figée à 1 (input WC caché) */
.cbjs-form-wrap .cbjs-qty-static {
    width: 38px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--cbjs-text) !important;
    line-height: 1 !important;
}
.cbjs-form-wrap input.qty {
    width: 38px !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--cbjs-text) !important;
    background: transparent !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}
.cbjs-form-wrap input.qty::-webkit-outer-spin-button,
.cbjs-form-wrap input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Bouton Ajouter au panier */
.cbjs-form-wrap .single_add_to_cart_button {
    flex: 1 1 auto !important;
    height: 52px !important;
    min-width: 0 !important;
    padding: 0 24px !important;
    background: var(--cbjs-pink) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    transition: background .2s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.cbjs-form-wrap .single_add_to_cart_button:hover {
    background: var(--cbjs-pink-dk) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.cbjs-form-wrap .single_add_to_cart_button .cbjs-cart-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Wishlist — positionnée dans .cbjs-atc-row par JS */
.cbjs-wishlist {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--cbjs-border) !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #bbb !important;
    flex-shrink: 0 !important;
    transition: color .2s, border-color .2s !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.cbjs-wishlist svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    pointer-events: none !important;
}
.cbjs-wishlist:hover         { color: #B96685 !important; border-color: #B96685 !important; }
.cbjs-wishlist.is-active     { color: #B96685 !important; border-color: #B96685 !important; }
.cbjs-wishlist.is-active svg { fill: #B96685 !important; stroke: #B96685 !important; }

/* ── Fin du bloc d'options ────────────────────────────
   L'écart entre le dernier choix et l'encart de personnalisation
   valait 53px, alors que le formulaire respire par pas de 14px. Il
   venait de trois sources cumulées, mesurées sur la fiche produit :
   15px de rembourrage sous le champ, 20px de marge en fin de bloc
   WAPF, puis les 14px de la grille du formulaire.

   On retire les deux premières, qui ne séparent rien — la marge de fin
   de bloc fait doublon avec l'écart de la grille, et le rembourrage du
   dernier champ n'a plus de champ à suivre. Le rembourrage des champs
   PRÉCÉDENTS est conservé : c'est lui qui les distingue entre eux
   quand un produit propose plusieurs options. */
.cbjs-form-wrap .wapf-wrapper { margin-bottom: 0 !important; }

/* :last-of-type et non :last-child — WAPF glisse un <input> caché après
   le dernier groupe, qui n'est donc jamais le dernier enfant. Écrit
   avec :last-child, la règle ne s'appliquait pas du tout. */
.cbjs-form-wrap .wapf-wrapper > .wapf-field-group:last-of-type {
    margin-bottom: 0 !important;
}
.cbjs-form-wrap .wapf-wrapper > .wapf-field-group:last-of-type > .wapf-field-container:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
}

/* ── Box récapitulatif personnalisation ──────────────── */
.cbjs-perso-box {
    background: #F7EFE7 !important;
    border: 1px solid #E3D5C6 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.cbjs-perso-placeholder {
    color: #A8927D !important;
    font-style: italic !important;
}
.cbjs-perso-box__title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--cbjs-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.cbjs-perso-box__values {
    font-size: 13px !important;
    color: var(--cbjs-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* ── Trust badges — sans bordures ni séparateurs ─────── */
.cbjs-trust {
    display: flex !important;
    gap: 6px 20px !important;
    flex-wrap: wrap !important;
    padding: 4px 0 !important;
    border: none !important;
    margin: 0 !important;
}
.cbjs-trust__item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12.5px !important;
    color: var(--cbjs-muted) !important;
    white-space: nowrap !important;
    padding: 2px 0 !important;
    border: none !important;
}
.cbjs-trust__item svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    stroke: var(--cbjs-muted) !important;
    fill: none !important;
}

/* ── Accordéons ──────────────────────────────────────── */
.cbjs-accordions {
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid var(--cbjs-border) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cbjs-accordion {
    border-bottom: 1px solid var(--cbjs-border) !important;
}
.cbjs-accordion__btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    background: none !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--cbjs-text) !important;
    cursor: pointer !important;
    text-align: left !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.cbjs-accordion__chevron {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    stroke: var(--cbjs-muted) !important;
    transition: transform .25s ease !important;
}
.cbjs-accordion.is-open .cbjs-accordion__chevron {
    transform: rotate(180deg) !important;
}
.cbjs-accordion__body {
    padding: 0 0 18px !important;
    font-size: 14px !important;
    color: var(--cbjs-muted) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}
.cbjs-accordion.is-open .cbjs-accordion__body {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
}
.cbjs-accordion__body[hidden] { display: none !important; }
.cbjs-accordion__body p { margin: 0 0 8px !important; }
.cbjs-accordion__body p:last-child { margin-bottom: 0 !important; }

/* Espace les lignes emoji des listes internes */
.cbjs-accordion__body .cbjs-emoji-list { line-height: 2.1 !important; }

/* Lien vers le guide d'entretien */
.cbjs-care-link { margin-top: 10px !important; }
.cbjs-care-link a {
    color: var(--cbjs-pink) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color .15s !important;
}
.cbjs-care-link a:hover { color: var(--cbjs-pink-dk) !important; }

/* ═══════════════════════════════════════════════════════
   NOTIFICATION PANIER
   ═══════════════════════════════════════════════════════ */

.cbjs-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 310px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
    z-index: 999999;
    overflow: hidden;
    transform: translateX(calc(100% + 40px));
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.cbjs-toast.is-visible {
    transform: translateX(0);
    pointer-events: auto;
}

.cbjs-toast__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 13px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color .15s;
    z-index: 1;
}
.cbjs-toast__close:hover { color: var(--cbjs-text); }

.cbjs-toast__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 40px 16px 16px;
}

.cbjs-toast__img {
    width: 66px;
    height: 66px;
    border-radius: 10px;
    background: var(--cbjs-light) center/cover no-repeat;
    flex-shrink: 0;
}

.cbjs-toast__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cbjs-toast__ok {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e9e62;
    letter-spacing: .01em;
}

.cbjs-toast__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cbjs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.cbjs-toast__btn {
    display: inline-block;
    margin-top: 6px;
    background: var(--cbjs-pink);
    color: #fff !important;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s;
    align-self: flex-start;
}
.cbjs-toast__btn:hover { background: var(--cbjs-pink-dk) !important; }

/* Barre de progression auto-dismiss */
.cbjs-toast__bar {
    height: 3px;
    background: linear-gradient(90deg, #E9B3D3, #B96685);
    width: 100%;
    transform-origin: left;
    transform: scaleX(1);
}
.cbjs-toast__bar.is-run {
    animation: cbjs-bar-shrink 4.5s linear forwards;
}
@keyframes cbjs-bar-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .cbjs-layout {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .cbjs-gallery-col {
        position: static !important;
    }
}

@media (max-width: 600px) {
    .cbjs-title  { font-size: 24px !important; }
    .cbjs-price  { font-size: 22px !important; }
    .cbjs-trust  { gap: 6px 14px !important; }
}

/* ── Livraison estimée, à côté de la pastille de stock ─────────── */
.cbjs-stock {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}

.cbjs-stock__sep {
    width: 1px !important;
    height: calc(var(--cbjs-stock-fs) - 1px) !important;
    /* Même couleur que le texte qui l'entoure */
    background: currentColor !important;
    opacity: .45 !important;
    flex-shrink: 0 !important;
}

/* Même couleur et même taille que « En stock » : seule la date ressort */
.cbjs-stock__eta {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
.cbjs-stock__eta strong {
    font-weight: 800 !important;
    color: inherit !important;
}

/* Une seule ligne sur téléphone.
   
   Ce n'est pas la mise en page qui empêchait la ligne unique, c'est la
   longueur du texte : « En stock · Livraison estimée le mercredi 24
   septembre » dépasse la largeur utile d'un écran de 390 points, quel
   que soit l'agencement. Aucune propriété CSS ne raccourcit une phrase.

   On change donc la phrase — « Livraison le 24 sept. » — et le retour à
   la ligne devient inutile. Le jour de la semaine est ce qu'on sacrifie
   en premier : la date chiffrée situe le délai à elle seule.

   Les deux formulations sont dans la page, une seule est affichée. Le
   choix est ainsi fait par le palier, sans JavaScript et sans mesure au
   moment du rendu. */
.cbjs-eta-court { display: none !important; }

@media (max-width: 520px) {
    .cbjs-stock       { flex-wrap: nowrap !important; }
    .cbjs-eta-long    { display: none !important; }
    .cbjs-eta-court   { display: inline !important; }

    /* nowrap sur les deux morceaux : sans cela, le texte se coupe à
       l'intérieur de son propre bloc et on retrouve deux lignes. */
    .cbjs-stock__label { white-space: nowrap !important; }
    .cbjs-stock__eta   { white-space: nowrap !important; }
}

/* Les plus petits écrans encore en circulation — iPhone SE, 320 points.
   La police cède un point plutôt que la ligne. */
@media (max-width: 360px) {
    .cbjs-stock {
        --cbjs-stock-fs:  12px !important;
        --cbjs-stock-gap: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   GUIDE D'ENTRETIEN  [camibijoux_guide_entretien]
   ═══════════════════════════════════════════════════════ */
.cbjs-guide {
    --cbjs-pink:    #3A2317;
    --cbjs-pink-dk: #24150D;
    --cbjs-text:    #1a1a1a;
    --cbjs-muted:   #666;
    --cbjs-light:   #F6F0EA;
    --cbjs-border:  #E5E5E5;
    --cbjs-radius:  14px;

    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    font-family: inherit !important;
    color: var(--cbjs-text) !important;
}

/* Bons gestes / À éviter côte à côte */
.cbjs-guide__cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.cbjs-guide__card {
    background: #fff !important;
    border: 1.5px solid var(--cbjs-border) !important;
    border-radius: var(--cbjs-radius) !important;
    padding: 24px 26px !important;
    margin: 0 !important;
}
.cbjs-guide__card--do   { background: #f4faf6 !important; border-color: #cde7d6 !important; }
.cbjs-guide__card--dont { background: #fdf6f5 !important; border-color: #f0d5d1 !important; }

.cbjs-guide__card-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--cbjs-text) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.cbjs-guide__emoji { font-size: 20px !important; line-height: 1 !important; }

.cbjs-guide__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.cbjs-guide__list li {
    font-size: 14.5px !important;
    color: var(--cbjs-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cbjs-guide__text p {
    font-size: 14.5px !important;
    color: var(--cbjs-muted) !important;
    line-height: 1.75 !important;
    margin: 0 0 10px !important;
}
.cbjs-guide__text p:last-child { margin-bottom: 0 !important; }
.cbjs-guide__text strong { color: var(--cbjs-text) !important; }

.cbjs-guide__note {
    font-size: 15px !important;
    color: var(--cbjs-muted) !important;
    line-height: 1.75 !important;
    background: var(--cbjs-light) !important;
    border-radius: var(--cbjs-radius) !important;
    padding: 20px 24px !important;
    margin: 0 !important;
}
.cbjs-guide__note strong { color: var(--cbjs-text) !important; }

/* Décharge de responsabilité */
.cbjs-guide__disclaimer {
    font-size: 13px !important;
    color: #8a8a8a !important;
    line-height: 1.7 !important;
    border: 1px dashed #d9d9d9 !important;
    border-radius: var(--cbjs-radius) !important;
    padding: 14px 20px !important;
    margin: 0 !important;
}

@media (max-width: 700px) {
    .cbjs-guide__cols { grid-template-columns: 1fr !important; }
    .cbjs-guide__card { padding: 20px !important; }
}

/* ── Guide : interactions légères ────────────────────── */

/* Apparition douce au scroll (classe posée par JS ;
   sans JS, tout reste visible) */
.cbjs-guide .cbjs-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
}
.cbjs-guide .cbjs-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Léger soulèvement des cartes au survol */
@media (hover: hover) {
    .cbjs-guide__card {
        transition: transform .25s ease, box-shadow .25s ease, opacity .55s ease !important;
    }
    .cbjs-guide__card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .07) !important;
    }
}

/* Cartes matériaux repliables */
.cbjs-guide__card-title--toggle {
    cursor: pointer !important;
    user-select: none !important;
}
.cbjs-guide__chevron {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    stroke: var(--cbjs-muted) !important;
    transition: transform .25s ease !important;
}
.cbjs-guide__card--mat.is-closed .cbjs-guide__chevron {
    transform: rotate(-90deg) !important;
}
.cbjs-guide__collapse {
    display: grid !important;
    grid-template-rows: 1fr !important;
    transition: grid-template-rows .35s ease !important;
}
.cbjs-guide__collapse > .cbjs-guide__text {
    overflow: hidden !important;
    min-height: 0 !important;
}
.cbjs-guide__card--mat.is-closed .cbjs-guide__collapse {
    grid-template-rows: 0fr !important;
}
.cbjs-guide__card--mat.is-closed .cbjs-guide__card-title {
    margin-bottom: 0 !important;
}
.cbjs-guide__card-title--toggle { transition: margin-bottom .35s ease !important; }


/* ══════════════════════════════════════════════════════════════
   BLOC « EN STOCK » — échelle par taille d'écran

   Placé en fin de feuille : les règles de base et le palier 520px
   ci-dessus déclarent les mêmes variables, et à poids égal c'est la
   dernière déclaration qui l'emporte.

   Trois paliers plutôt qu'un seul saut : la ligne « En stock ·
   Livraison estimée » perd de la place à mesure que la colonne produit
   se resserre, et 15px la faisaient passer sur deux lignes bien avant
   le mobile.
   ══════════════════════════════════════════════════════════════ */

/* Portables. Le seuil est à 1536 et non à 1440 : un MacBook Pro 14
   pouces fait 1512 points de large en plein écran, et serait passé au
   travers d'un palier calé sur 1440. Un 16 pouces (1728) et les écrans
   externes gardent la taille de base. */
@media (max-width: 1536px) {
    .cbjs-stock {
        --cbjs-stock-fs:  14px;
        --cbjs-stock-dot: 9px;
        --cbjs-stock-gap: 9px;
    }
}

/* Tablettes. */
@media (max-width: 900px) {
    .cbjs-stock {
        --cbjs-stock-fs:  13.5px;
        --cbjs-stock-dot: 9px;
        --cbjs-stock-gap: 8px;
    }
}

/* Téléphones : la mention de livraison passe sur une seconde ligne,
   le bloc gagne donc en hauteur — d'où le resserrement des interlignes. */
@media (max-width: 520px) {
    .cbjs-stock {
        --cbjs-stock-fs:  13px;
        --cbjs-stock-dot: 8px;
        --cbjs-stock-gap: 7px;
        row-gap: 2px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   QUANTITÉ + AJOUTER AU PANIER SUR UNE SEULE LIGNE

   Le bouton passait en width: 100% sous 600px, ce qui le renvoyait
   forcément à la ligne suivante — quantité, bouton, puis cœur, trois
   rangées pour trois éléments.

   Mesuré sur la fiche produit à 390px : la ligne dispose de 371px, la
   quantité en occupait 124 et le bouton réclamait 218px de contenu
   incompressible, soit 342 sans les écarts. En resserrant les deux, la
   somme retombe à 311 et tout tient.

   Le cœur, lui, reste dans la même rangée mais garde le droit de
   passer dessous quand la place manque : c'est le seul des trois qu'on
   peut déplacer sans gêner l'achat.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .cbjs-atc-row,
    .cbjs-layout .cbjs-form-wrap .woocommerce-variation-add-to-cart,
    .cbjs-layout .cbjs-form-wrap .variations_button {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Largeur laissée au contenu : sans width: 100%, le bouton occupe
       la place restante de la rangée au lieu de la réclamer entière. */
    .cbjs-form-wrap .single_add_to_cart_button {
        width: auto !important;
        height: 48px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        gap: 8px !important;
    }

    /* Quantité resserrée : 124px pour afficher « 1 » entre deux
       boutons, c'était le tiers de la largeur utile. */
    .cbjs-form-wrap .quantity { height: 48px !important; }
    .cbjs-form-wrap .cbjs-qty-btn { width: 34px !important; height: 48px !important; font-size: 20px !important; }
    .cbjs-form-wrap .cbjs-qty-static,
    .cbjs-form-wrap input.qty { width: 30px !important; font-size: 15px !important; }

    .cbjs-wishlist {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    .cbjs-form-wrap .single_add_to_cart_button .cbjs-cart-icon {
        width: 18px !important;
        height: 18px !important;
    }
}