/* ═══════════════════════════════════════════════════════
   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 ───────────────────────────────────
   Tant qu'aucune passerelle n'a monté de bouton, on efface le titre
   et le séparateur « OU » — mais surtout PAS le conteneur, qui doit
   rester affiché pour que Stripe puisse s'y monter. Vide, il ne
   prend aucune place de toute façon.
   Voir revealExpress() dans checkout-script.js. */
.cbco-wrap [data-cbco-express].is-empty {
    margin: 0 !important;
    padding: 0 !important;
}
.cbco-wrap [data-cbco-express].is-empty > .cbco-express-label,
.cbco-wrap [data-cbco-express].is-empty > .cbco-divider { display: none !important; }
/* ── Paiement express ─────────────────────────────────── */
.cbco-express-label {
    text-align: center !important;
    font-size: 13px !important;
    color: var(--cbco-muted) !important;
    margin: 0 0 10px !important;
}
/* Empilement simple, calé sur la largeur du formulaire.
   Le flex précédent donnait aux boutons une base de 160px et les
   laissait flotter au milieu, désalignés des champs en dessous. */
.cbco-express-buttons { display: block !important; }

/* Stripe pose des marges automatiques et un padding-top en style
   inline sur son conteneur. On ne touche NI à l'iframe NI au
   .__PrivateStripeElement : leur largeur en calc(100% + 8px) et leur
   marge négative sont un artifice de Stripe pour masquer un
   débordement — les écraser rognerait le bouton. */
.cbco-wrap .cbco-express-buttons > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    float: none !important;
}

/* Le décalage vers la droite venait de la liste : Stripe enveloppe le
   bouton dans un <fieldset><ul><li>, et le retrait par défaut d'une
   liste fait une quarantaine de pixels. */
.cbco-wrap .cbco-express-buttons fieldset {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
}
.cbco-wrap .cbco-express-buttons ul,
.cbco-wrap .cbco-express-buttons li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.cbco-wrap .cbco-express-buttons > * + * { margin-top: 10px !important; }

/* Stripe rend son propre séparateur « — OU — » : le nôtre suffit.
   Le titre en double est retiré par revealExpress(), qui compare le
   texte plutôt que de parier sur un identifiant. */
.cbco-wrap .cbco-express-buttons [id*="separator"] { display: none !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; }
/* Mise en page détaillée plus bas (section « CHAMP PAYS ») :
   on ne garde ici que le curseur. */
.cbco-wrap .select2-container .select2-selection--single {
    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 ──────────────────────────────────────────
   Le <form> de connexion est rendu hors du formulaire de commande
   puis déplacé ici par le JS : l'imbrication de deux <form> n'est
   interdite qu'à l'analyse de la page, pas dans le DOM construit.

   Tout se joue au niveau de .cbco-login, le conteneur que pose notre
   gabarit : le balisage interne appartient à WooCommerce et peut
   changer.
   ────────────────────────────────────────────────────── */
.cbco-login .woocommerce-form-login-toggle { display: none !important; }

/* WooCommerce rend ce formulaire avec un style="display:none" en dur,
   parce qu'il compte le déplier lui-même depuis son propre lien. C'est
   .cbco-login qui porte le pli/dépli ici, donc on neutralise. */
.cbco-login form.woocommerce-form-login { display: block !important; }

/* Source du bloc, hors formulaire de commande : vidée par le JS. Le
   masquage tient sans lui, au cas où le script ne s'exécuterait pas. */
.cbco-wrap .cbco-login-src { display: none !important; }

/* Replié par défaut ; le lien « Se connecter » le déroule.
   Le reste du fichier étant en !important, le masquage doit l'être
   aussi, sinon le display inline de slideDown() ne pourrait pas
   reprendre la main. */
.cbco-wrap .cbco-login[hidden] { display: none !important; }

.cbco-login {
    margin: 0 0 18px !important;
    padding: 20px !important;
    border: 1px solid var(--cbco-border-soft) !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-gray-bg) !important;
}

/* Texte d'introduction de WooCommerce : enfant direct, sans classe. */
.cbco-login > p:not([class]) {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--cbco-muted) !important;
}

/* Une seule colonne : les demi-largeurs natives donnaient deux
   champs étroits juste au-dessus d'un e-mail pleine largeur. */
.cbco-login .form-row,
.cbco-login .form-row-first,
.cbco-login .form-row-last {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}
.cbco-login .clear { display: none !important; }

/* Case « Se souvenir de moi » et bouton, dans la même ligne. */
.cbco-login .cbco-checkbox-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}
.cbco-login .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--cbco-muted) !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}
.cbco-login input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: 4px !important;
    background: var(--cbco-bg) !important;
    position: relative !important;
    top: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.cbco-login input[type="checkbox"]:checked {
    border-color: var(--cbco-dark) !important;
    background: var(--cbco-dark) !important;
}
/* Coche dessinée en CSS : aucune image à charger. */
.cbco-login input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Bouton de connexion — et LUI SEUL.
   Un `.cbco-login button` global attrapait aussi la croix d'effacement
   du champ et l'œil du mot de passe, qui devenaient des pavés foncés
   pleine largeur par-dessus les champs. */
.cbco-login .woocommerce-form-login__submit,
.cbco-login button[name="login"] {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 24px !important;
    border: none !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-dark) !important;
    background-image: none !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background .13s ease !important;
}
.cbco-login .woocommerce-form-login__submit:hover,
.cbco-login button[name="login"]:hover {
    background: var(--cbco-dark-hover) !important;
    color: #fff !important;
}

.cbco-login .lost_password {
    margin: 0 !important;
    font-size: 13px !important;
    text-align: center !important;
}
.cbco-login .lost_password a {
    color: var(--cbco-muted) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.cbco-login .lost_password a:hover { color: var(--cbco-text) !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;
    /* Indispensable : sans ça, le fond rectangulaire du survol dépasse
       des coins arrondis et donne l'impression que la bordure disparaît. */
    overflow: hidden !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 {
    transition: background .15s ease !important;
}
.cbco-wrap .cbgc-checkout-summary:hover { background: #F7F7F7 !important; }

/* Déplié : trait de séparation net, et le champ respire au lieu d'être
   collé sous le libellé. */
.cbco-wrap .cbgc-checkout-toggle[open] .cbgc-checkout-summary {
    border-bottom: 1px solid var(--cbco-border-soft) !important;
}
.cbco-wrap .cbgc-checkout-panel { padding: 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;
}

/* Exception : le champ code promo n'a pas de libellé flottant, son
   placeholder est donc la SEULE indication de ce qu'il attend. */
.cbco-wrap .cbco-summary-coupon input::placeholder,
.cbco-wrap .cbgc-code-row input::placeholder {
    color: #9a9a9a !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 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    align-items: flex-start !important;
}

/* ATTENTION : ne JAMAIS imposer un `display` à .shipping_address.
   C'est WooCommerce qui affiche/masque ce bloc (style inline) selon la
   case « Expédier à une adresse différente ». Un `display: flex !important`
   ici gagnerait contre le `display: none` inline et le formulaire
   resterait affiché en permanence. Le conteneur interne suffit. */
.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;
}

/* ══════════════════════════════════════════════════════════════
   CHAMP PAYS (Select2) — boîte identique aux autres champs

   Select2 remplace le <select> natif par un composant en
   inline-block sans hauteur propre : sa boîte visuelle débordait
   sous la ligne du formulaire, si bien que l'écart avec le champ
   suivant paraissait plus petit que partout ailleurs.
   On lui impose donc exactement la même boîte que les autres champs.
   ══════════════════════════════════════════════════════════════ */
.cbco-wrap .form-row .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

.cbco-wrap .form-row .select2-container {
    display: block !important;
    width: 100% !important;
    height: var(--cbco-field-h) !important;
    min-height: var(--cbco-field-h) !important;
    margin: 0 !important;
    vertical-align: top !important;
}

/* Exactement le même modèle de boîte que les champs texte
   (padding: 24px en haut pour le libellé, 8px en bas) : le texte se
   place donc à la même hauteur que dans « Prénom » ou « Ville ».
   Un alignement flex dépendait du line-height interne de Select2 et
   faisait déborder « France » sous la bordure. */
.cbco-wrap .form-row .select2-container .select2-selection--single {
    display: block !important;
    height: var(--cbco-field-h) !important;
    min-height: var(--cbco-field-h) !important;
    padding: 24px 40px 8px 15px !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-bg) !important;
    outline: none !important;
    overflow: hidden !important;
}

.cbco-wrap .form-row .select2-container--open .select2-selection--single,
.cbco-wrap .form-row .select2-container--focus .select2-selection--single {
    border-color: var(--cbco-text) !important;
    box-shadow: 0 0 0 1px var(--cbco-text) !important;
}

.cbco-wrap .form-row .select2-container .select2-selection__rendered {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    font-size: 15px !important;
    color: var(--cbco-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cbco-wrap .form-row .select2-container .select2-selection__arrow {
    top: 50% !important;
    right: 12px !important;
    height: auto !important;
    transform: translateY(-50%) !important;
}

/* Liste déroulante ouverte : au-dessus du récapitulatif */
.select2-container--open .select2-dropdown {
    z-index: 1000003 !important;
    border-color: var(--cbco-border, #DCDCDC) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Sécurité : aucun bouton d'effacement dans les champs code promo /
   carte cadeau, même si un ancien bouton subsiste dans le cache. */
.cbco-wrap .cbco-summary-coupon .cbco-clear-field,
.cbco-wrap .checkout_coupon .cbco-clear-field,
.cbco-wrap .cbgc-checkout-block .cbco-clear-field {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOC RÉASSURANCE  [camibijoux_orders_count]
   Volontairement discret : petite pastille, une seule ligne.
   Couleurs pilotées par les attributs bg="" et color="".
   ══════════════════════════════════════════════════════════════ */
.cbco-social-proof {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 6px 14px 6px 7px !important;
    border-radius: 999px !important;
    background: var(--cbco-proof-bg, #E9B3D3) !important;
    color: var(--cbco-proof-color, #fff) !important;
    font-family: inherit !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    vertical-align: middle !important;
}
/* Sans photos, la pastille n'a pas besoin d'autant d'air à gauche */
.cbco-social-proof:not(:has(.cbco-social-proof__avatars)) { padding-left: 14px !important; }

/* Photos clientes superposées */
.cbco-social-proof__avatars {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}
.cbco-social-proof__avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 2px solid var(--cbco-proof-bg, #E9B3D3) !important;
    background: #f2f2f2 !important;
    margin: 0 0 0 -9px !important;
}
.cbco-social-proof__avatar:first-child { margin-left: 0 !important; }

.cbco-social-proof__icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    width: 16px !important;
    height: 16px !important;
}
.cbco-social-proof__icon svg { width: 100% !important; height: 100% !important; }

/* Nombre et texte sur une seule ligne */
.cbco-social-proof__label {
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cbco-social-proof__label strong { font-weight: 700 !important; }

@media (max-width: 480px) {
    .cbco-social-proof { gap: 7px !important; padding: 5px 12px 5px 6px !important; }
    .cbco-social-proof__avatar { width: 23px !important; height: 23px !important; }
    .cbco-social-proof__label { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════
   RÉCAPITULATIF REPLIABLE (mobile et tablette)

   Sur petit écran, le récapitulatif se réduit à une barre
   « Récapitulatif (3) — 146,00 € » avec un chevron. Sur grand écran,
   la barre disparaît et tout reste déplié en permanence.
   ══════════════════════════════════════════════════════════════ */
.cbco-summary-toggle { display: none !important; }
.cbco-summary-panel  { display: block !important; }

@media (max-width: 980px) {
    .cbco-summary-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 14px 4px !important;
        border: none !important;
        background: none !important;
        color: var(--cbco-text) !important;
        font-family: inherit !important;
        font-size: 15px !important;
        cursor: pointer !important;
        text-align: left !important;
    }

    .cbco-summary-toggle__label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-weight: 600 !important;
    }
    .cbco-summary-toggle__count { color: var(--cbco-muted) !important; font-weight: 400 !important; }

    .cbco-summary-toggle__chevron {
        display: inline-flex !important;
        width: 18px !important;
        height: 18px !important;
        color: var(--cbco-muted) !important;
        transition: transform .2s ease !important;
    }
    .cbco-summary-toggle__chevron svg { width: 100% !important; height: 100% !important; }
    .cbco-summary-card.is-open .cbco-summary-toggle__chevron { transform: rotate(180deg) !important; }

    .cbco-summary-toggle__total {
        font-size: 17px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    .cbco-summary-toggle__total .amount { font-weight: 700 !important; }

    /* Replié par défaut */
    .cbco-summary-panel {
        display: none !important;
        padding-top: 6px !important;
    }
    .cbco-summary-card.is-open .cbco-summary-panel { display: block !important; }

    /* La colonne n'a plus besoin d'autant d'air quand elle est repliée */
    .cbco-summary-col { padding: 8px 20px !important; }
    .cbco-summary-card.is-open ~ * { margin-top: 0 !important; }

    /* Le total est déjà dans la barre : inutile de le répéter en bas */
    .cbco-summary-card.is-open .cbco-summary-total { margin-bottom: 6px !important; }
}

/* Aucune infobulle sur la page de paiement : sécurité si un ancien
   script reste en cache côté navigateur. */
.cbco-wrap .cbco-info-dot,
.cbco-wrap #billing_phone_field .cbco-icon-hint,
.cbco-wrap #shipping_phone_field .cbco-icon-hint,
.cbco-wrap #billing_email_field .cbco-icon-hint {
    display: none !important;
}
.cbco-wrap #billing_phone_field.cbco-has-icon > input,
.cbco-wrap #shipping_phone_field.cbco-has-icon > input,
.cbco-wrap #billing_email_field.cbco-has-icon > input {
    padding-right: 44px !important;
}

/* Plus aucune icône décorative dans les champs (loupe incluse) :
   sécurité si un ancien script reste en cache côté navigateur. */
.cbco-wrap .cbco-icon-hint { display: none !important; }
.cbco-wrap .form-row.cbco-has-icon > input { padding-right: 15px !important; }
.cbco-wrap .form-row.cbco-has-icon.is-filled > input { padding-right: 44px !important; }
.cbco-wrap .form-row.cbco-has-icon.is-filled .cbco-clear-field { right: 12px !important; }

/* Barre repliable mobile : chevron juste après « Récapitulatif »,
   total repoussé à l'extrême droite. */
@media (max-width: 980px) {
    .cbco-summary-toggle__label { flex: 0 1 auto !important; min-width: 0 !important; }
    .cbco-summary-toggle__chevron { flex: 0 0 auto !important; margin-left: 2px !important; }
    .cbco-summary-toggle__total { margin-left: auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE DE REMERCIEMENT (après commande)
   ══════════════════════════════════════════════════════════════ */
.cbco-ty {
    --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-radius:      12px;

    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 8px 20px 60px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif !important;
    color: var(--cbco-text) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}
.cbco-ty *, .cbco-ty *::before, .cbco-ty *::after { box-sizing: border-box !important; }

/* ── En-tête de confirmation ──────────────────────────────── */
.cbco-ty-head { text-align: center !important; padding: 30px 0 34px !important; }

.cbco-ty-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 18px !important;
    border-radius: 50% !important;
    background: #3F9D6D !important;
    color: #fff !important;
    animation: cbco-ty-pop .45s cubic-bezier(.34, 1.56, .64, 1) both !important;
}
.cbco-ty-check svg { width: 26px !important; height: 26px !important; }

@keyframes cbco-ty-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cbco-ty-check { animation: none !important; }
}

.cbco-ty-order {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--cbco-muted) !important;
}
.cbco-ty-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
    color: var(--cbco-text) !important;
}
.cbco-ty-sub { margin: 0 !important; color: var(--cbco-muted) !important; font-size: 15px !important; }
.cbco-ty-sub strong { color: var(--cbco-text) !important; font-weight: 600 !important; }

/* ── Grille ───────────────────────────────────────────────── */
.cbco-ty-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
}
@media (max-width: 900px) {
    .cbco-ty-grid { grid-template-columns: 1fr !important; }
}

.cbco-ty-main { display: flex !important; flex-direction: column !important; gap: 22px !important; }

.cbco-ty-card {
    padding: 22px !important;
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    background: var(--cbco-bg) !important;
}
.cbco-ty-card--map { padding: 0 !important; overflow: hidden !important; }

.cbco-ty-card__title {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cbco-text) !important;
}

/* ── Carte du trajet ──────────────────────────────────────── */
.cbco-ty-map {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #EDEAE6 !important;
}
.cbco-ty-map iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}
/* Repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .cbco-ty-map { height: 300px !important; }
}

.cbco-ty-route {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border-top: 1px solid var(--cbco-border-soft) !important;
    font-size: 13.5px !important;
}
.cbco-ty-route__point {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
}
.cbco-ty-route__point > span { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.cbco-ty-route__point strong {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--cbco-muted) !important;
}
.cbco-ty-route__dot {
    flex: 0 0 auto !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--cbco-dark) !important;
}
.cbco-ty-route__point--end .cbco-ty-route__dot {
    background: #fff !important;
    box-shadow: inset 0 0 0 3px var(--cbco-dark) !important;
}
.cbco-ty-route__line {
    flex: 1 1 auto !important;
    height: 2px !important;
    min-width: 20px !important;
    background: repeating-linear-gradient(90deg, var(--cbco-border) 0 6px, transparent 6px 12px) !important;
}
@media (max-width: 560px) {
    .cbco-ty-route { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .cbco-ty-route__line { width: 2px !important; height: 18px !important; min-width: 0 !important; margin-left: 4px !important;
        background: repeating-linear-gradient(180deg, var(--cbco-border) 0 5px, transparent 5px 10px) !important; }
}

/* ── Informations ─────────────────────────────────────────── */
.cbco-ty-info {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 18px !important;
}
.cbco-ty-info__item { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
.cbco-ty-info__label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--cbco-muted) !important;
}
.cbco-ty-info__value { font-size: 14.5px !important; color: var(--cbco-text) !important; }
.cbco-ty-info__value address { font-style: normal !important; margin: 0 !important; line-height: 1.5 !important; }

.cbco-ty-note {
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: var(--cbco-sel-bg) !important;
    font-size: 14px !important;
}

.cbco-ty-help p { margin: 0 !important; color: var(--cbco-muted) !important; font-size: 14.5px !important; }
.cbco-ty-help a { color: var(--cbco-text) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }

/* ── Actions ──────────────────────────────────────────────── */
.cbco-ty-actions {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}
.cbco-ty-actions .cbco-btn-dark { width: auto !important; display: inline-flex !important; padding: 15px 30px !important; }
.cbco-ty-link {
    color: var(--cbco-text) !important;
    font-size: 14.5px !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ── Récapitulatif ────────────────────────────────────────── */
@media (min-width: 901px) {
    .cbco-ty-side { position: sticky !important; top: 24px !important; }
}

.cbco-ty-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--cbco-border-soft) !important;
}
.cbco-ty-item { display: flex !important; align-items: center !important; gap: 13px !important; }
.cbco-ty-item__thumb {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
    border: 1px solid var(--cbco-border-soft) !important;
    background: #F4F4F4 !important;
}
.cbco-ty-item__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    display: block !important;
    margin: 0 !important;
}
.cbco-ty-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-ty-item__body { flex: 1 1 auto !important; min-width: 0 !important; }
.cbco-ty-item__name { display: block !important; font-size: 14px !important; font-weight: 500 !important; }
.cbco-ty-item__meta { display: block !important; font-size: 12px !important; color: var(--cbco-muted) !important; margin-top: 2px !important; }
.cbco-ty-item__meta p,
.cbco-ty-item__meta .wc-item-meta { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cbco-ty-item__meta .wc-item-meta li { margin: 0 !important; }
.cbco-ty-item__meta .wc-item-meta strong { font-weight: 500 !important; }
.cbco-ty-item__price { flex: 0 0 auto !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important; }

.cbco-ty-totals { display: flex !important; flex-direction: column !important; gap: 9px !important; padding-top: 14px !important; }
.cbco-ty-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 14px !important;
    font-size: 14px !important;
}
.cbco-ty-total-row > span { color: var(--cbco-muted) !important; }
.cbco-ty-total-row > strong { font-weight: 500 !important; text-align: right !important; }
.cbco-ty-total-row--final {
    padding-top: 12px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--cbco-border-soft) !important;
}
.cbco-ty-total-row--final > span { color: var(--cbco-text) !important; font-size: 16px !important; font-weight: 700 !important; }
.cbco-ty-total-row--final > strong { font-size: 19px !important; font-weight: 700 !important; }

@media (max-width: 560px) {
    .cbco-ty { padding: 4px 16px 48px !important; }
    .cbco-ty-title { font-size: 25px !important; }
    .cbco-ty-card { padding: 18px !important; }
    .cbco-ty-actions .cbco-btn-dark { width: 100% !important; }
}

/* ── Carte OpenStreetMap (page de remerciement) ───────────── */
.cbco-ty-map.leaflet-container {
    background: #EDEAE6 !important;
    font-family: inherit !important;
}
.cbco-ty-map .leaflet-control-attribution {
    font-size: 10px !important;
    background: rgba(255,255,255,.82) !important;
}
.cbco-ty-map .leaflet-control-attribution a { color: #4A4A4A !important; }

/* Marqueurs dessinés en CSS : aucune image à charger */
.cbco-ty-pin {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(58, 35, 23, .18) !important;
}
.cbco-ty-pin--from { background: #3A2317 !important; }
.cbco-ty-pin--to {
    background: #fff !important;
    box-shadow: inset 0 0 0 4px #3A2317, 0 0 0 4px rgba(58, 35, 23, .18) !important;
}

/* ── Délai de livraison estimé (page de remerciement) ─────── */
.cbco-ty-eta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 13px 20px !important;
    border-top: 1px solid var(--cbco-border-soft) !important;
    background: var(--cbco-sel-bg) !important;
    color: var(--cbco-text) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.cbco-ty-eta strong {
    font-weight: 700 !important;
    margin-right: 3px !important;
}
.cbco-ty-eta__icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    width: 19px !important;
    height: 19px !important;
    color: var(--cbco-dark) !important;
}
.cbco-ty-eta__icon svg { width: 100% !important; height: 100% !important; }

/* Sans carte : le bandeau devient une carte autonome */
.cbco-ty-eta--alone {
    border: 1px solid var(--cbco-border) !important;
    border-radius: var(--cbco-radius) !important;
    padding: 15px 20px !important;
}

@media (max-width: 560px) {
    .cbco-ty-eta { align-items: flex-start !important; padding: 12px 16px !important; }
    .cbco-ty-eta__icon { margin-top: 1px !important; }
}