/* ═══════════════════════════════════════════════════════
   CamiBijoux – Checkout  v3.1
   Split-screen façon Shopify : formulaire sur fond blanc à
   gauche, récapitulatif sur fond gris à droite, les deux
   contenus de même largeur convergeant vers le centre.
   !important systématique pour résister à Hello Elementor.
   ═══════════════════════════════════════════════════════ */

.cbco-wrap *,
.cbco-wrap *::before,
.cbco-wrap *::after {
    box-sizing: border-box !important;
}

.cbco-wrap {
    /* ── Palette ──────────────────────────────────────────
       --cbco-dark pilote tout ce qui est foncé (bouton principal,
       sélection, cases cochées). Pour la charte bleue CamiBijoux :
       --cbco-dark: #4D96B8;  --cbco-dark-hover: #3C7E9C;          */
    --cbco-dark:        #3A2317;
    --cbco-dark-hover:  #24150D;
    --cbco-sel-bg:      #FDF8F4;
    --cbco-text:        #1A1A1A;
    --cbco-muted:       #6E6E6E;
    --cbco-border:      #DCDCDC;
    --cbco-border-soft: #EBEBEB;
    --cbco-bg:          #FFFFFF;
    --cbco-gray-bg:     #FAFAFA;
    --cbco-tab-bg:      #F5F5F5;
    --cbco-radius:      10px;
    --cbco-field-h:     56px;
    --cbco-col-w:       470px;  /* largeur commune du formulaire ET du récap */
    --cbco-col-pad:     44px;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    color: var(--cbco-text) !important;
    line-height: 1.45 !important;
    -webkit-font-smoothing: antialiased !important;
    background: var(--cbco-bg) !important;
}

/* ── Pleine largeur (sort du conteneur Elementor) ─────── */
.cbco-wrap--split {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT SPLIT — 2 moitiés d'écran, contenus adossés au centre
   ═══════════════════════════════════════════════════════ */
.cbco-main {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    min-height: 70vh !important;
}

/* Colonne formulaire : blanche, contenu calé à droite (vers le centre) */
.cbco-form-col {
    background: var(--cbco-bg) !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 42px var(--cbco-col-pad) 70px !important;
}
.cbco-form-inner {
    width: 100% !important;
    max-width: var(--cbco-col-w) !important;
    min-width: 0 !important;
}

/* Colonne récap : grise, bord gauche, contenu calé à gauche (vers le centre) */
.cbco-summary-col {
    background: var(--cbco-gray-bg) !important;
    border-left: 1px solid var(--cbco-border-soft) !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 42px var(--cbco-col-pad) 70px !important;
}
.cbco-summary-inner {
    width: 100% !important;
    max-width: var(--cbco-col-w) !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
}

@media (max-width: 1200px) {
    .cbco-wrap { --cbco-col-pad: 28px; }
}
@media (max-width: 980px) {
    .cbco-main { grid-template-columns: 1fr !important; }
    .cbco-summary-col {
        order: -1 !important;
        border-left: none !important;
        border-bottom: 1px solid var(--cbco-border-soft) !important;
        padding: 24px 20px !important;
        justify-content: center !important;
    }
    .cbco-form-col { padding: 28px 20px 60px !important; justify-content: center !important; }
    .cbco-summary-inner { position: static !important; }
}

/* ── Notices ──────────────────────────────────────────── */
.cbco-notices .woocommerce-error,
.cbco-notices .woocommerce-message,
.cbco-notices .woocommerce-info {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 14px 18px !important;
    border-radius: var(--cbco-radius) !important;
    background: #F7F5F3 !important;
    border: 1px solid var(--cbco-border) !important;
    color: var(--cbco-text) !important;
    font-size: 14px !important;
}
.cbco-notices .woocommerce-error { background: #FDF2F2 !important; border-color: #F0CDCD !important; color: #A93B38 !important; }
.cbco-notices li { list-style: none !important; margin: 0 !important; }

/* ── Sections ─────────────────────────────────────────── */
.cbco-section { padding: 0 0 30px !important; }
.cbco-section--express { padding-bottom: 6px !important; }

.cbco-section-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}
.cbco-section-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: var(--cbco-text) !important;
    line-height: 1.3 !important;
}
.cbco-section-head .cbco-section-title { margin-bottom: 0 !important; }
.cbco-section-sub {
    font-size: 13.5px !important;
    color: var(--cbco-muted) !important;
    margin: -8px 0 14px !important;
}
.cbco-login-link {
    font-size: 14px !important;
    color: var(--cbco-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    white-space: nowrap !important;
}
.cbco-login-link:hover { opacity: .7 !important; }

/* ── Paiement express ─────────────────────────────────── */
.cbco-express-label {
    text-align: center !important;
    font-size: 13px !important;
    color: var(--cbco-muted) !important;
    margin: 0 0 10px !important;
}
.cbco-express-buttons { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }
.cbco-express-buttons > * { flex: 1 1 160px !important; min-height: 48px !important; border-radius: var(--cbco-radius) !important; }
.cbco-divider {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 22px 0 8px !important;
    color: var(--cbco-muted) !important;
    font-size: 12px !important;
    letter-spacing: .04em !important;
}
.cbco-divider::before,
.cbco-divider::after { content: "" !important; flex: 1 1 auto !important; height: 1px !important; background: var(--cbco-border-soft) !important; }

/* ═══════════════════════════════════════════════════════
   CHAMPS — label flottant
   ═══════════════════════════════════════════════════════ */
.cbco-fields-grid { display: flex !important; flex-wrap: wrap !important; gap: 0 12px !important; }

.cbco-wrap .form-row {
    position: relative !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}
.cbco-wrap .form-row-first,
.cbco-wrap .form-row-last { width: calc(50% - 6px) !important; float: none !important; }
@media (max-width: 520px) {
    .cbco-wrap .form-row-first,
    .cbco-wrap .form-row-last { width: 100% !important; }
}

/* Libellé = placeholder au repos, remonte quand rempli/focus */
.cbco-wrap .form-row > label {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: var(--cbco-muted) !important;
    pointer-events: none !important;
    transition: all .13s ease-out !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 28px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: none !important;
    z-index: 1 !important;
}
/* Champ avec icône à droite : le libellé au repos s'arrête avant l'icône */
.cbco-wrap .form-row.cbco-has-icon > label { max-width: calc(100% - 58px) !important; }
/* Libellé flotté en haut : plus petit, il dispose de toute la largeur
   (l'icône est au centre vertical, aucune collision possible) */
.cbco-wrap .form-row.is-filled > label,
.cbco-wrap .form-row.is-focused > label {
    top: 8px !important;
    transform: none !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    color: var(--cbco-muted) !important;
    max-width: calc(100% - 20px) !important;
}

/* Cas particulier des zones de texte (notes de commande) : le libellé
   se cale en haut, jamais au centre vertical, pour ne pas chevaucher
   le texte saisi ni les descriptions. */
.cbco-wrap .form-row:has(> textarea) > label,
.cbco-wrap .form-row:has(textarea) > label {
    top: 18px !important;
    transform: none !important;
}
.cbco-wrap .form-row.is-filled:has(textarea) > label,
.cbco-wrap .form-row.is-focused:has(textarea) > label {
    top: 8px !important;
}

/* Description éventuelle sous un champ (texte d'information) */
.cbco-wrap .form-row .description,
.cbco-wrap .form-row small {
    display: block !important;
    position: static !important;
    margin: 6px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: var(--cbco-muted) !important;
}
.cbco-wrap .form-row > label .required,
.cbco-wrap .form-row > label .optional { display: none !important; }

.cbco-wrap .form-row input.input-text,
.cbco-wrap .form-row input[type="text"],
.cbco-wrap .form-row input[type="email"],
.cbco-wrap .form-row input[type="tel"],
.cbco-wrap .form-row input[type="password"],
.cbco-wrap .form-row select,
.cbco-wrap .form-row textarea,
.cbco-wrap .select2-container .select2-selection--single {
    width: 100% !important;
    height: var(--cbco-field-h) !important;
    min-height: var(--cbco-field-h) !important;
    padding: 24px 15px 8px !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-bg) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--cbco-text) !important;
    line-height: 1.3 !important;
    transition: border-color .13s ease, box-shadow .13s ease !important;
    box-shadow: none !important;
    outline: none !important;
}
.cbco-wrap .form-row textarea { height: auto !important; min-height: 100px !important; padding-top: 34px !important; }

/* Bloc « Informations complémentaires » (notes de commande) */
.cbco-wrap .woocommerce-additional-fields { margin-top: 18px !important; }
.cbco-wrap .woocommerce-additional-fields h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cbco-text) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.cbco-wrap .form-row input:focus,
.cbco-wrap .form-row select:focus,
.cbco-wrap .form-row textarea:focus {
    border-color: var(--cbco-text) !important;
    box-shadow: 0 0 0 1px var(--cbco-text) !important;
    outline: none !important;
}

/* Select natif : chevron */
.cbco-wrap .form-row select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px !important;
    padding-right: 42px !important;
    cursor: pointer !important;
}

/* Select2 (pays / région) */
.cbco-wrap .select2-container { width: 100% !important; }
.cbco-wrap .select2-container .select2-selection--single {
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 8px !important;
    cursor: pointer !important;
}
.cbco-wrap .select2-container .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.3 !important;
    color: var(--cbco-text) !important;
    font-size: 15px !important;
}
.cbco-wrap .select2-container .select2-selection__arrow { top: 50% !important; transform: translateY(-50%) !important; right: 10px !important; height: auto !important; }

/* Réserve de place à droite du texte saisi : icône et/ou bouton effacer */
.cbco-wrap .form-row.cbco-has-icon > input { padding-right: 44px !important; }
.cbco-wrap .form-row.is-filled > input { padding-right: 44px !important; }
.cbco-wrap .form-row.cbco-has-icon.is-filled > input { padding-right: 72px !important; }
.cbco-icon-hint {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--cbco-muted) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.cbco-icon-hint svg { width: 100% !important; height: 100% !important; display: block !important; }

/* Bouton « effacer » */
.cbco-clear-field {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--cbco-text) !important;
    cursor: pointer !important;
    z-index: 3 !important;
}
.cbco-wrap .form-row.is-filled .cbco-clear-field { display: flex !important; }
.cbco-wrap .form-row.cbco-has-icon.is-filled .cbco-clear-field { right: 40px !important; }
.cbco-clear-field svg { width: 15px !important; height: 15px !important; }
.cbco-clear-field:hover { opacity: .6 !important; }

/* ── Cases à cocher (rondes, comme la maquette) ───────── */
.cbco-wrap .form-row.cbco-checkbox-row,
.cbco-wrap .woocommerce-account-fields .form-row,
.cbco-wrap #ship-to-different-address { margin: 2px 0 16px !important; }

.cbco-wrap .form-row.cbco-checkbox-row > label,
.cbco-wrap .woocommerce-form__label-for-checkbox,
.cbco-wrap #ship-to-different-address label {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--cbco-text) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
}

.cbco-wrap input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 auto !important;
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    border: 1.5px solid var(--cbco-border) !important;
    border-radius: 50% !important;
    background: var(--cbco-bg) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all .13s ease !important;
}
.cbco-wrap input[type="checkbox"]:checked {
    background: var(--cbco-dark) !important;
    border-color: var(--cbco-dark) !important;
}
.cbco-wrap input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 7px !important;
    top: 3.5px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* ── Boutons radio ────────────────────────────────────── */
.cbco-wrap input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 1.5px solid var(--cbco-border) !important;
    border-radius: 50% !important;
    background: var(--cbco-bg) !important;
    cursor: pointer !important;
    transition: all .13s ease !important;
}
.cbco-wrap input[type="radio"]:checked {
    background: var(--cbco-dark) !important;
    border-color: var(--cbco-dark) !important;
    box-shadow: inset 0 0 0 3.5px #fff !important;
}

/* ── Onglets Expédier / Retrait / Point de retrait ───── */
.cbco-ship-tabs {
    display: flex !important;
    gap: 0 !important;
    padding: 5px !important;
    background: var(--cbco-tab-bg) !important;
    border: none !important;
    border-radius: 14px !important;
    margin-bottom: 18px !important;
}
.cbco-ship-tab {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 70px !important;
    padding: 10px 6px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--cbco-text) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    box-shadow: none !important;
    white-space: normal !important;
    overflow: visible !important;
}
.cbco-ship-tab__label { display: block !important; width: 100% !important; }
.cbco-ship-tab__icon { width: 21px !important; height: 21px !important; display: block !important; }
.cbco-ship-tab__icon svg { width: 100% !important; height: 100% !important; display: block !important; }
.cbco-ship-tab.is-active {
    background: var(--cbco-bg) !important;
    border-color: var(--cbco-border) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}

/* ── Modes d'expédition (cartes) ──────────────────────── */
.cbco-shipping-methods {
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    overflow: hidden !important;
    background: var(--cbco-bg) !important;
}
.cbco-shipping-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
    border-top: 1px solid var(--cbco-border-soft) !important;
    border-radius: var(--cbco-radius) !important;
    cursor: pointer !important;
    transition: background .13s ease, box-shadow .13s ease !important;
}
/* Masquage par onglet (classe posée par le JS — un display inline
   perdrait contre les !important ci-dessus) */
.cbco-wrap .cbco-shipping-card.cbco-hidden { display: none !important; }
/* Séparateur : uniquement entre cartes VISIBLES (la première visible n'en a pas) */
.cbco-shipping-card:first-child { border-top: none !important; }
.cbco-wrap .cbco-shipping-methods .cbco-shipping-card.cbco-hidden + .cbco-shipping-card { border-top: none !important; }
.cbco-wrap .cbco-shipping-methods .cbco-shipping-card:not(.cbco-hidden) ~ .cbco-shipping-card:not(.cbco-hidden) { border-top: 1px solid var(--cbco-border-soft) !important; }
.cbco-shipping-card.is-selected {
    background: var(--cbco-sel-bg) !important;
    box-shadow: inset 0 0 0 2px var(--cbco-dark) !important;
    z-index: 1 !important;
}
.cbco-shipping-icon { width: 21px !important; height: 21px !important; flex: 0 0 auto !important; color: var(--cbco-text) !important; }
.cbco-shipping-icon svg { width: 100% !important; height: 100% !important; display: block !important; }
.cbco-shipping-info { flex: 1 1 auto !important; min-width: 0 !important; }
.cbco-shipping-name { display: block !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--cbco-text) !important; }
.cbco-shipping-desc { display: block !important; font-size: 13px !important; color: var(--cbco-muted) !important; margin-top: 2px !important; }
.cbco-shipping-price { flex: 0 0 auto !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--cbco-text) !important; white-space: nowrap !important; }
.cbco-shipping-message { color: var(--cbco-muted) !important; font-size: 14px !important; padding: 16px !important; border: 1px solid var(--cbco-border) !important; border-radius: var(--cbco-radius) !important; margin: 0 !important; }
.cbco-shipping-contents { color: var(--cbco-muted) !important; font-size: 12px !important; margin-top: 8px !important; }

/* ═══════════════════════════════════════════════════════
   PAIEMENT
   ═══════════════════════════════════════════════════════ */
.cbco-wrap #payment.woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.cbco-wrap ul.payment_methods.methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    overflow: hidden !important;
    background: var(--cbco-bg) !important;
}
.cbco-wrap ul.payment_methods li.wc_payment_method {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--cbco-border-soft) !important;
    list-style: none !important;
}
.cbco-wrap ul.payment_methods li.wc_payment_method:last-child { border-bottom: none !important; }

.cbco-wrap ul.payment_methods li.wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 11px !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 14px 16px 14px 47px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--cbco-text) !important;
    cursor: pointer !important;
    border-radius: var(--cbco-radius) !important;
    transition: background .13s ease, box-shadow .13s ease !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
}
.cbco-wrap ul.payment_methods li.wc_payment_method > input:checked + label {
    background: var(--cbco-sel-bg) !important;
    box-shadow: inset 0 0 0 2px var(--cbco-dark) !important;
}
.cbco-wrap ul.payment_methods li.wc_payment_method > input {
    position: absolute !important;
    left: 16px !important;
    top: 28px !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}
.cbco-wrap ul.payment_methods label img {
    max-height: 24px !important;
    width: auto !important;
    margin: 0 0 0 4px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}
.cbco-wrap ul.payment_methods label img:last-of-type { margin-left: auto !important; }
.cbco-wrap ul.payment_methods .about_paypal { margin-left: auto !important; font-size: 12px !important; }

/* Zone de saisie carte (Stripe Elements) */
.cbco-wrap .payment_box {
    background: var(--cbco-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 16px 18px !important;
    font-size: 14px !important;
    color: var(--cbco-text) !important;
}
.cbco-wrap .payment_box::before { display: none !important; }
.cbco-wrap .payment_box p { margin: 0 0 10px !important; font-size: 13.5px !important; color: var(--cbco-muted) !important; }
.cbco-wrap .payment_box .form-row { margin-bottom: 10px !important; }
.cbco-wrap .payment_box .StripeElement,
.cbco-wrap .payment_box .wc-stripe-elements-field,
.cbco-wrap .payment_box .wc-credit-card-form-card-number,
.cbco-wrap .payment_box .wc-credit-card-form-card-expiry,
.cbco-wrap .payment_box .wc-credit-card-form-card-cvc {
    background: var(--cbco-bg) !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    padding: 18px 14px !important;
    min-height: 54px !important;
    font-size: 15px !important;
}
.cbco-wrap .payment_box .StripeElement--focus,
.cbco-wrap .payment_box .wc-stripe-elements-field.focused {
    border-color: var(--cbco-text) !important;
    box-shadow: 0 0 0 1px var(--cbco-text) !important;
}

.cbco-wrap .woocommerce-terms-and-conditions-wrapper { margin: 16px 0 !important; font-size: 13px !important; color: var(--cbco-muted) !important; }
.cbco-wrap .woocommerce-privacy-policy-text p { font-size: 13px !important; color: var(--cbco-muted) !important; }
.cbco-wrap .form-row.place-order { margin: 18px 0 0 !important; padding: 0 !important; }

.cbco-wrap #place_order,
.cbco-btn-dark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 16px 26px !important;
    border: none !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-dark) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .13s ease !important;
    float: none !important;
}
.cbco-wrap #place_order:hover,
.cbco-btn-dark:hover { background: var(--cbco-dark-hover) !important; color: #fff !important; }
.cbco-wrap #place_order:disabled { opacity: .55 !important; cursor: not-allowed !important; }

/* ── Connexion ────────────────────────────────────────── */
.cbco-wrap .woocommerce-form-login-toggle { display: none !important; }
.cbco-wrap .woocommerce-form-login {
    margin: 0 0 16px !important;
    padding: 18px !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-bg) !important;
}
.cbco-wrap .woocommerce-form-login .form-row { margin-bottom: 12px !important; }
.cbco-wrap .woocommerce-form-login button {
    min-height: 48px !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-dark) !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* ── Panier vide ──────────────────────────────────────── */
.cbco-empty { text-align: center !important; padding: 60px 20px !important; }
.cbco-empty h2 { font-size: 22px !important; margin: 0 0 10px !important; }
.cbco-empty p { color: var(--cbco-muted) !important; margin: 0 0 24px !important; }
.cbco-empty .cbco-btn-dark { display: inline-flex !important; width: auto !important; }

/* ═══════════════════════════════════════════════════════
   RÉCAPITULATIF (colonne grise)
   ═══════════════════════════════════════════════════════ */
.cbco-summary-card { background: transparent !important; padding: 0 !important; border: none !important; }

.cbco-summary-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}
.cbco-summary-item { display: flex !important; align-items: center !important; gap: 14px !important; }
.cbco-summary-item__thumb {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: var(--cbco-radius) !important;
    overflow: visible !important;
    border: 1px solid var(--cbco-border-soft) !important;
    background: #F1F1F1 !important;
}
.cbco-summary-item__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 9px !important;
    margin: 0 !important;
}
.cbco-summary-item__qty {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--cbco-dark) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cbco-summary-item__body { flex: 1 1 auto !important; min-width: 0 !important; }
.cbco-summary-item__name { display: block !important; font-size: 14px !important; font-weight: 500 !important; color: var(--cbco-text) !important; }
.cbco-summary-item__meta { display: block !important; font-size: 12px !important; color: var(--cbco-muted) !important; margin-top: 2px !important; }
.cbco-summary-item__meta p { margin: 0 !important; }
.cbco-summary-item__price { flex: 0 0 auto !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important; }

/* Code promo */
.cbco-summary-coupon { margin-bottom: 24px !important; }
.cbco-summary-coupon .woocommerce-form-coupon-toggle { display: none !important; }
.cbco-wrap .cbco-summary-coupon .checkout_coupon.woocommerce-form-coupon {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.cbco-summary-coupon .form-row { flex: 1 1 auto !important; margin: 0 !important; }
.cbco-summary-coupon .form-row-last { flex: 0 0 auto !important; width: auto !important; }
.cbco-wrap .cbco-summary-coupon input#coupon_code {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 14px !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    font-size: 14px !important;
    background: var(--cbco-bg) !important;
}
.cbco-summary-coupon button {
    height: 52px !important;
    padding: 0 24px !important;
    border: none !important;
    border-radius: var(--cbco-radius) !important;
    background: #EBEBEB !important;
    color: #8A8A8A !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all .13s ease !important;
}
.cbco-summary-coupon button:hover { background: var(--cbco-dark) !important; color: #fff !important; }

.cbco-summary-rows { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.cbco-summary-row { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 14px !important; }
.cbco-summary-row > span { color: var(--cbco-text) !important; display: flex !important; align-items: center !important; gap: 5px !important; }
.cbco-summary-row > strong { font-weight: 500 !important; }
.cbco-summary-row--discount strong { color: #2A7D50 !important; }
.cbco-info-dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    border: 1px solid var(--cbco-muted) !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    color: var(--cbco-muted) !important;
    cursor: help !important;
    line-height: 1 !important;
}

.cbco-summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-top: 18px !important;
}
.cbco-summary-total__label { font-size: 18px !important; font-weight: 700 !important; color: var(--cbco-text) !important; }
.cbco-summary-total__value { display: flex !important; align-items: baseline !important; gap: 7px !important; }
.cbco-summary-total__currency { font-size: 12px !important; color: var(--cbco-muted) !important; text-transform: uppercase !important; }
.cbco-summary-total__value strong { font-size: 22px !important; font-weight: 700 !important; color: var(--cbco-text) !important; }
.cbco-summary-tax-note { margin: 4px 0 0 !important; font-size: 12.5px !important; color: var(--cbco-muted) !important; text-align: left !important; }

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

/* ═══════════════════════════════════════════════════════
   RECALCULS AJAX SANS FLASH
   Pendant chaque mise à jour (adresse, mode d'expédition, code
   promo), WooCommerce pose un voile blanc (blockUI) sur la zone
   paiement : c'est lui qui donne l'impression que « le formulaire
   se recharge ». On le rend invisible — le blocage des clics reste
   actif, seul le clignotement disparaît.
   ═══════════════════════════════════════════════════════ */
.cbco-wrap .blockUI.blockOverlay,
.cbco-wrap .blockUI.blockMsg {
    opacity: 0 !important;
    background: transparent !important;
}
/* Exception : le voile pendant la SOUMISSION de la commande
   (paiement en cours) reste visible, c'est un retour utile. */
.cbco-wrap form.checkout.processing > .blockUI.blockOverlay {
    opacity: .6 !important;
    background: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   BANNIÈRE EXPRESS CHECKOUT STRIPE (plugin tiers)
   Habillage de .wc-stripe-banner-checkout générée par
   « Payment Plugins for Stripe » : titre centré, séparateur
   « OU », textes anglais remplacés en CSS pur.
   Sélecteurs volontairement non préfixés par .cbco-wrap :
   le plugin peut injecter la bannière hors de notre wrapper.
   ═══════════════════════════════════════════════════════ */
.woocommerce-checkout .wc-stripe-banner-checkout {
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.woocommerce-checkout .wc-stripe-banner-checkout fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    min-width: 0 !important;
}

/* « Express Checkout » → « Paiement express », centré, petit gris */
.woocommerce-checkout .wc-stripe-banner-checkout legend.banner-title {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border: none !important;
    background: none !important;
}
.woocommerce-checkout .wc-stripe-banner-checkout legend.banner-title::after {
    content: "Paiement express" !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: #6E6E6E !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif !important;
}

/* Liste des boutons express : centrés, sans puces, bordures ni ombres */
.woocommerce-checkout .wc_stripe_checkout_banner_gateways {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.woocommerce-checkout .wc-stripe-checkout-banner-gateway {
    flex: 0 1 380px !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}
.woocommerce-checkout .wc-stripe-checkout-banner-gateway::marker { content: none !important; }
.woocommerce-checkout .wc-stripe-checkout-banner-gateway.StripeElement {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* « OR » → « OU », avec fine ligne de part et d'autre */
.woocommerce-checkout .wc-stripe-banner-checkout .banner-divider {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background: none !important;
    border: none !important;
    overflow: visible !important;
}
/* Pas de trait : « OU » seul, centré (le pseudo-élément ::before neutralise
   aussi toute ligne dessinée par le CSS du plugin Stripe) */
.woocommerce-checkout .wc-stripe-banner-checkout .banner-divider::before {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}
.woocommerce-checkout .wc-stripe-banner-checkout .banner-divider::after {
    content: "OU" !important;
    position: relative !important;
    display: inline-block !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    color: #6E6E6E !important;
    background: none !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   CARTE CADEAU REPLIÉE (bloc du plugin Cartes Cadeaux)
   ══════════════════════════════════════════════════════════════ */
.cbco-wrap .cbgc-checkout-toggle {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-bg) !important;
}
.cbco-wrap .cbgc-checkout-summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 16px !important;
    list-style: none !important;
    cursor: pointer !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--cbco-text) !important;
    user-select: none !important;
}
.cbco-wrap .cbgc-checkout-summary::-webkit-details-marker { display: none !important; }
.cbco-wrap .cbgc-checkout-summary::after {
    content: "" !important;
    margin-left: auto !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid var(--cbco-muted) !important;
    border-bottom: 2px solid var(--cbco-muted) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transition: transform .15s ease !important;
}
.cbco-wrap .cbgc-checkout-toggle[open] .cbgc-checkout-summary::after {
    transform: rotate(-135deg) translateY(-2px) !important;
}
.cbco-wrap .cbgc-checkout-summary:hover { background: var(--cbco-sel-bg) !important; }
.cbco-wrap .cbgc-checkout-panel { padding: 0 16px 16px !important; }

.cbco-wrap .cbgc-code-row {
    display: flex !important;
    gap: 8px !important;
}
.cbco-wrap .cbgc-code-row .cbgc-input {
    flex: 1 1 auto !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 14px !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    font-size: 14px !important;
    background: var(--cbco-bg) !important;
}
.cbco-wrap .cbgc-code-row .cbgc-apply-btn {
    flex: 0 0 auto !important;
    height: 50px !important;
    padding: 0 22px !important;
    border: none !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-dark) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.cbco-wrap .cbgc-code-row .cbgc-apply-btn:hover { background: var(--cbco-dark-hover) !important; }
.cbco-wrap .cbgc-code-msg { margin: 8px 0 0 !important; font-size: 13px !important; }

/* Code déjà appliqué : bandeau vert discret */
.cbco-wrap .cbgc-checkout-block--applied {
    margin: 0 0 14px !important;
    padding: 13px 16px !important;
    border: 1px solid #BFE3CE !important;
    border-radius: var(--cbco-radius) !important;
    background: #F1F9F4 !important;
}
.cbco-wrap .cbgc-applied-code {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-size: 14px !important;
    color: #2A7D50 !important;
}
.cbco-wrap .cbgc-applied-code > span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cbco-wrap .cbgc-remove-code {
    margin-left: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--cbco-muted) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* Sécurité anti-superposition : le libellé flottant FAIT office de
   placeholder. Un placeholder natif réintroduit par une extension reste
   donc invisible tant que le champ n'a pas le focus (le libellé est alors
   remonté, plus aucun chevauchement possible). */
.cbco-wrap .form-row input::placeholder,
.cbco-wrap .form-row textarea::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}
.cbco-wrap .form-row.is-focused input::placeholder,
.cbco-wrap .form-row.is-focused textarea::placeholder {
    color: #b9b9b9 !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   ADRESSE DE LIVRAISON DIFFÉRENTE — alignement des champs

   Les champs de facturation sont dans notre .cbco-fields-grid (flex),
   mais WooCommerce rend le second formulaire dans SON propre conteneur.
   Sans flex, « Prénom » et « Nom » gardaient bien leur demi-largeur mais
   se retrouvaient l'un SOUS l'autre.
   ══════════════════════════════════════════════════════════════ */
.cbco-wrap .woocommerce-shipping-fields__field-wrapper,
.cbco-wrap .woocommerce-billing-fields__field-wrapper,
.cbco-wrap .woocommerce-additional-fields__field-wrapper,
.cbco-wrap .shipping_address {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    align-items: flex-start !important;
}
/* .shipping_address contient le wrapper : on évite la double contrainte */
.cbco-wrap .shipping_address > .woocommerce-shipping-fields__field-wrapper {
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   RÉCAPITULATIF COLLANT — dégagement sous l'en-tête fixe

   La hauteur réelle de l'en-tête (et de la barre d'admin) est mesurée
   en JS puis publiée dans --cbco-sticky-offset : le récapitulatif ne
   peut plus glisser sous le menu de navigation.
   ══════════════════════════════════════════════════════════════ */
.cbco-summary-inner {
    top: calc(var(--cbco-sticky-offset, 0px) + 24px) !important;
}