/* ═══════════════════════════════════════════════════════
   CamiBijoux – Personnalisation
   !important systématique pour résister à Hello Elementor
   ═══════════════════════════════════════════════════════ */

/* ── Reset ciblé ─────────────────────────────────────── */
.cbcz-wrap *,
.cbcz-wrap *::before,
.cbcz-wrap *::after {
    box-sizing: border-box !important;
}

/* ── Variables ───────────────────────────────────────── */
.cbcz-wrap {
    --cbcz-blue:      #3A2317;
    --cbcz-blue-dark: #24150D;
    --cbcz-blue-bg:   #F7EFE7;
    --cbcz-blue-brd:  #D9C8BC;
    --cbcz-text:      #1a1a1a;
    --cbcz-muted:     #8a8480;
    --cbcz-border:    #e5e0db;
    --cbcz-bg:        #ffffff;
    --cbcz-radius:    14px;
    --cbcz-shadow:    0 4px 28px rgba(0,0,0,.08);
}

/* ── Layout principal ────────────────────────────────── */
.cbcz-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important;
    gap: 48px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    color: var(--cbcz-text) !important;
    line-height: 1.5 !important;
}

@media (max-width: 820px) {
    .cbcz-wrap {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .cbcz-preview-col {
        order: -1 !important;
    }
}

/* ── En-tête ─────────────────────────────────────────── */
.cbcz-header {
    margin: 0 0 28px !important;
}
.cbcz-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: var(--cbcz-text) !important;
    line-height: 1.2 !important;
}
.cbcz-subtitle {
    margin: 0 !important;
    color: var(--cbcz-muted) !important;
    font-size: 16px !important;
}

/* ── Progression ─────────────────────────────────────── */
.cbcz-progress {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 32px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
}
.cbcz-dot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    cursor: default !important;
}
.cbcz-dot.is-done { cursor: pointer !important; }
.cbcz-dot-index {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: var(--cbcz-blue-bg) !important;
    color: var(--cbcz-blue-dark) !important;
    border: 2px solid var(--cbcz-blue-brd) !important;
    transition: all .2s ease !important;
}
.cbcz-dot.is-current .cbcz-dot-index {
    background: var(--cbcz-blue) !important;
    border-color: var(--cbcz-blue) !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}
.cbcz-dot.is-done .cbcz-dot-index {
    background: var(--cbcz-blue-dark) !important;
    border-color: var(--cbcz-blue-dark) !important;
    color: #fff !important;
}
.cbcz-dot-label {
    font-size: 11px !important;
    color: var(--cbcz-muted) !important;
    white-space: nowrap !important;
}
.cbcz-dot.is-current .cbcz-dot-label {
    color: var(--cbcz-blue-dark) !important;
    font-weight: 700 !important;
}
.cbcz-dot-line {
    flex: 1 1 20px !important;
    height: 2px !important;
    min-width: 12px !important;
    background: var(--cbcz-border) !important;
    margin-bottom: 18px !important;
}
.cbcz-dot-line.is-done { background: var(--cbcz-blue) !important; }

/* ── Corps d'étape ───────────────────────────────────── */
.cbcz-step-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
    color: var(--cbcz-text) !important;
}
.cbcz-loading,
.cbcz-empty {
    color: var(--cbcz-muted) !important;
    font-style: italic !important;
}

/* ── Grille d'options ────────────────────────────────── */
.cbcz-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 8px !important;
}
.cbcz-options-colors {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
}
.cbcz-options-charms {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
}

.cbcz-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 18px 12px !important;
    background: var(--cbcz-bg) !important;
    border: 2px solid var(--cbcz-border) !important;
    border-radius: var(--cbcz-radius) !important;
    cursor: pointer !important;
    text-align: center !important;
    font-family: inherit !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    color: var(--cbcz-text) !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.cbcz-option:hover {
    border-color: var(--cbcz-blue) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--cbcz-shadow) !important;
    background: var(--cbcz-bg) !important;
}
.cbcz-option.is-selected {
    border-color: var(--cbcz-blue) !important;
    background: var(--cbcz-blue-bg) !important;
    box-shadow: 0 0 0 3px rgba(110,170,200,.25) !important;
}
.cbcz-option-name {
    font-weight: 700 !important;
    font-size: 15px !important;
}
.cbcz-option-desc {
    font-size: 12.5px !important;
    color: var(--cbcz-muted) !important;
}
.cbcz-option-price {
    font-size: 13px !important;
    color: var(--cbcz-blue-dark) !important;
    font-weight: 600 !important;
}

/* Pastille couleur */
.cbcz-swatch {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 1px var(--cbcz-border), 0 2px 8px rgba(0,0,0,.15) !important;
    display: block !important;
}
.cbcz-option.is-selected .cbcz-swatch {
    box-shadow: 0 0 0 2px var(--cbcz-blue), 0 2px 8px rgba(0,0,0,.15) !important;
}

/* Badge taille */
.cbcz-size-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 56px !important;
    height: 46px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: var(--cbcz-blue-bg) !important;
    color: var(--cbcz-blue-dark) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

/* Images breloques / attaches */
.cbcz-charm-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f6f3ef !important;
    border: 1px solid var(--cbcz-border) !important;
}
.cbcz-charm-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.cbcz-charm-placeholder {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--cbcz-blue) !important;
}
.cbcz-style-icon {
    font-size: 34px !important;
    line-height: 1 !important;
}

/* ── Navigation ──────────────────────────────────────── */
.cbcz-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 28px !important;
}
.cbcz-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    border-radius: 999px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all .15s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.cbcz-btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}
.cbcz-btn-primary {
    background: var(--cbcz-blue) !important;
    color: #fff !important;
    margin-left: auto !important;
}
.cbcz-btn-primary:hover:not(:disabled) {
    background: var(--cbcz-blue-dark) !important;
    color: #fff !important;
}
.cbcz-btn-ghost {
    background: transparent !important;
    color: var(--cbcz-blue-dark) !important;
    border-color: var(--cbcz-blue-brd) !important;
}
.cbcz-btn-ghost:hover {
    border-color: var(--cbcz-blue) !important;
    background: var(--cbcz-blue-bg) !important;
    color: var(--cbcz-blue-dark) !important;
}
.cbcz-btn-cart {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 16px 26px !important;
    font-size: 17px !important;
}

/* ── Récapitulatif (étape 6) ─────────────────────────── */
.cbcz-recap {
    background: var(--cbcz-bg) !important;
    border: 1px solid var(--cbcz-border) !important;
    border-radius: var(--cbcz-radius) !important;
    padding: 8px 20px !important;
}
.cbcz-recap-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--cbcz-border) !important;
    font-size: 15px !important;
}
.cbcz-recap-row:last-child { border-bottom: none !important; }
.cbcz-recap-row > span { color: var(--cbcz-muted) !important; }
.cbcz-recap-total {
    font-size: 18px !important;
}
.cbcz-recap-total strong { color: var(--cbcz-blue-dark) !important; }

.cbcz-cart-feedback {
    margin-top: 14px !important;
    text-align: center !important;
    font-weight: 600 !important;
}
.cbcz-cart-feedback.is-error { color: #B0413E !important; }
.cbcz-cart-feedback.is-success a { margin-top: 6px !important; }

/* ── Colonne aperçu ──────────────────────────────────── */
.cbcz-preview-col {
    position: sticky !important;
    top: 24px !important;
}
@media (max-width: 820px) {
    .cbcz-preview-col { position: static !important; }
}
.cbcz-preview-card {
    background: var(--cbcz-bg) !important;
    border: 1px solid var(--cbcz-border) !important;
    border-radius: var(--cbcz-radius) !important;
    box-shadow: var(--cbcz-shadow) !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
/* ── Aperçu : un fond, des calques ────────────────────
   La proportion est posée en padding-top par le PHP, d'après le réglage
   du visuel : la place est donc réservée avant que la moindre image
   arrive, et la page ne saute pas au chargement.

   Position et taille des calques sont en pourcentage, exactement les
   valeurs réglées en back-office : le rendu est le même ici que dans
   l'éditeur, sur tous les écrans. */
.cbcz-preview-canvas {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #F6F0EA !important;
}
.cbcz-preview-inner { position: absolute !important; inset: 0 !important; }

.cbcz-preview-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}
.cbcz-preview-bg[hidden] { display: none !important; }

.cbcz-preview-layers { position: absolute !important; inset: 0 !important; }

.cbcz-preview-layer {
    position: absolute !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    pointer-events: none !important;
}

.cbcz-preview-empty {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center !important;
    color: var(--cbcz-muted, #8a8480) !important;
    font-size: 15px !important;
}

/* ── Vignette d'une option ─────────────────────────── */
.cbcz-option-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f6f3ef !important;
    border: 1px solid var(--cbcz-border) !important;
}
.cbcz-option-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Étape facultative : sortie discrète, sous les options. */
.cbcz-skip {
    display: block !important;
    margin: 14px auto 0 !important;
    padding: 6px 14px !important;
    border: 0 !important;
    background: none !important;
    color: var(--cbcz-muted, #8a8480) !important;
    font-size: 14px !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* ── Miniature du panier : la création recomposée ──── */
.cbcz-cart-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding-top: 100% !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}
.cbcz-cart-thumb__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.cbcz-cart-thumb__layer {
    position: absolute !important;
    height: auto !important;
    max-width: none !important;
}

.cbcz-preview-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.cbcz-summary-empty {
    margin: 0 !important;
    color: var(--cbcz-muted) !important;
    text-align: center !important;
    font-size: 14px !important;
}
.cbcz-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 7px 0 !important;
    font-size: 14px !important;
    border-bottom: 1px dashed var(--cbcz-border) !important;
}
.cbcz-summary-row:last-child { border-bottom: none !important; }
.cbcz-summary-row > span { color: var(--cbcz-muted) !important; }

.cbcz-preview-price {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 12px !important;
    border-top: 2px solid var(--cbcz-blue-bg) !important;
    font-size: 15px !important;
    color: var(--cbcz-muted) !important;
}
.cbcz-preview-price strong {
    font-size: 24px !important;
    color: var(--cbcz-blue-dark) !important;
    font-weight: 800 !important;
}

/* ── Divers ──────────────────────────────────────────── */
.cbcz-notice {
    padding: 14px 18px !important;
    background: #FBEAEA !important;
    border-radius: 10px !important;
    color: #B0413E !important;
}
.cbcz-cart-thumb {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ── Intertitre de groupe d'options ──────────────────
   Sert quand une étape propose beaucoup de choix — des breloques
   rangées par famille, par exemple. Sans groupe, rien ne s'affiche. */
.cbcz-group {
    margin: 18px 0 8px !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--cbcz-muted, #8a8480) !important;
    border: 0 !important;
    background: none !important;
}
.cbcz-group:first-child { margin-top: 0 !important; }


/* ══════════════════════════════════════════════════════════════
   TENUE AUX PETITES LARGEURS

   En fin de feuille : plusieurs des règles ci-dessous corrigent des
   déclarations écrites plus haut, et à poids égal c'est la dernière
   qui l'emporte.
   ══════════════════════════════════════════════════════════════ */

/* ── Les colonnes doivent pouvoir se réduire ───────────
   Une piste de grille a pour minimum automatique la largeur minimale
   de son contenu. La colonne des étapes se calait donc sur la barre de
   progression — mesuré à 353px dans un bloc de 350 — et tout le
   contenu débordait de trois pixels vers la droite. */
.cbcz-wrap > * { min-width: 0 !important; }

/* ── Grille d'options ──────────────────────────────────
   minmax(150px, …) impose une piste d'au moins 150px, y compris dans
   un conteneur plus étroit : la grille sortait alors de sa colonne.
   min(150px, 100%) garde la largeur voulue tant qu'il y a la place, et
   cède quand il n'y en a plus. */
.cbcz-options {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)) !important;
}
.cbcz-options-colors {
    grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)) !important;
}
.cbcz-options-charms {
    grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)) !important;
}

/* ── Le texte casse au lieu de sortir ──────────────────
   Les libellés viennent du back-office : « Boucles d'oreilles
   pendantes » ou une référence sans espace n'ont aucune raison de
   tenir dans 150px. */
.cbcz-option { min-width: 0 !important; max-width: 100% !important; }

/* white-space: normal EN PREMIER — c'est la règle décisive.
   Le thème pose « white-space: nowrap » sur tous les <button>, et nos
   cartes d'option en sont. La propriété s'hérite : le libellé et la
   description ne pouvaient donc pas revenir à la ligne, et le texte
   sortait de la carte en glissant sous la suivante. Plafonner la
   largeur ne servait à rien — la boîte était bien limitée, ce sont les
   lettres qui débordaient. */
.cbcz-option,
.cbcz-option-name,
.cbcz-option-desc,
.cbcz-option-price,
.cbcz-summary-row,
.cbcz-recap-row {
    white-space: normal !important;
}

.cbcz-option-name,
.cbcz-option-desc,
.cbcz-option-price,
.cbcz-summary-row span,
.cbcz-summary-row strong,
.cbcz-recap-row span,
.cbcz-recap-row strong,
.cbcz-group {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Récapitulatif : deux colonnes qui ne se marchent pas dessus. */
.cbcz-summary-row,
.cbcz-recap-row { gap: 12px !important; }
.cbcz-summary-row strong,
.cbcz-recap-row strong { text-align: right !important; }

/* ══════════════════════════════════════════════════════
   BARRE DE PROGRESSION

   Une seule variable donne le diamètre des pastilles ; le trait s'y
   aligne par le calcul. Les valeurs en dur qu'il y avait avant —
   « margin-bottom: 18px » pour tenter de centrer le trait — étaient
   fausses d'environ deux pixels sur ordinateur et de treize sur
   mobile, où la hauteur des libellés change.
   ══════════════════════════════════════════════════════ */
.cbcz-progress {
    --cbcz-dot: 34px;

    align-items: flex-start !important;

    /* Le rond de l'étape en cours est agrandi de 10 % : il dépassait
       de deux pixels vers le haut et se faisait ROGNER, parce qu'un
       conteneur qui défile horizontalement rogne aussi la verticale
       (overflow-x: auto force overflow-y: auto). D'où cette marge
       intérieure, qui lui laisse la place de grandir. */
    padding-top: 6px !important;
}

/* La pastille vit dans une colonne flex : sans flex-shrink à zéro,
   c'est sa HAUTEUR qui se comprime dès que la place manque, et le
   cercle devient un ovale. */
.cbcz-dot-index {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: var(--cbcz-dot) !important;
    height: var(--cbcz-dot) !important;
}
/* Deux pixels de garde autour de chaque pastille.
   Le rond de l'étape en cours est agrandi de 10 % : au tout début du
   parcours, c'est le PREMIER, collé au bord gauche de la barre — il
   dépassait de 1,7px et se faisait rogner, l'agrandissement ne
   réservant aucune place puisqu'une transformation ne pousse rien.
   La garde est prise dans l'écart entre pastilles, donc invisible ;
   une marge négative sur la barre l'aurait désalignée du titre. */
.cbcz-dot {
    max-width: 100% !important;
    padding: 0 2px !important;
    box-sizing: content-box !important;
}

/* Le trait rejoint le milieu du rond, quelle que soit la hauteur des
   libellés en dessous. */
.cbcz-dot-line {
    align-self: flex-start !important;
    margin-top: calc(var(--cbcz-dot) / 2 - 1px) !important;
    margin-bottom: 0 !important;
}

/* ── Barre de progression sur petit écran ──────────────
   Sept étapes ne tiennent pas côte à côte avec leur libellé. Plutôt
   qu'une barre qui défile — qu'on ne pense pas à faire glisser —, on
   ne garde que le libellé de l'étape en cours : les autres restent
   repérables par leur numéro. */
@media (max-width: 560px) {
    .cbcz-progress {
        --cbcz-dot: 28px;
        gap: 4px !important;
        margin-bottom: 24px !important;
    }

    .cbcz-dot-index {
        font-size: 12.5px !important;
        border-width: 1.5px !important;
    }

    .cbcz-dot-label { display: none !important; }
    .cbcz-dot.is-current .cbcz-dot-label {
        display: block !important;
        font-size: 10.5px !important;
        max-width: 72px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    .cbcz-dot-line { min-width: 6px !important; }
    .cbcz-dot { gap: 4px !important; }
}