/* ==========================================================================
   LBP Boutique — blocs WooCommerce (panier, commande, grille de l'accueil)
   Chargée au début de wp_footer (voir functions.php), donc après les styles
   des blocs : à spécificité égale elle l'emporte. Tokens --lbp-* : refonte.css.
   Reprise de lbp-checkout-skin/assets/checkout.css, étendue au panier.
   Les boutons express (Apple Pay, G Pay, Link, PayPal) et les champs carte
   Stripe sont des iframes : leur rendu appartient aux prestataires.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mise en page
   -------------------------------------------------------------------------- */
body.lbp-shop .wp-block-woocommerce-checkout,
body.lbp-shop .wp-block-woocommerce-cart,
body.lbp-shop-checkout .entry-content > .woocommerce {
    margin: 0;
    padding: 0;
    color: var(--lbp-text);
    font-family: var(--lbp-font);
}

/* On arrive au checkout depuis le panier ou la fiche : « Retour » suffit. */
body.lbp-shop-checkout .wc-block-components-checkout-return-to-cart-button { display: none; }

/* --------------------------------------------------------------------------
   2. Titres
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-components-checkout-step__title,
body.lbp-shop .wc-block-components-title.wc-block-components-title,
body.lbp-shop .wc-block-components-checkout-order-summary__title-text,
body.lbp-shop .wc-block-cart__totals-title.wc-block-cart__totals-title {
    font-family: var(--lbp-font);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    color: var(--lbp-text);
}
body.lbp-shop .wc-block-components-checkout-step__description,
body.lbp-shop .wc-block-checkout__guest-checkout-notice,
body.lbp-shop .wc-block-components-checkout-step__heading-content {
    color: var(--lbp-text-muted);
    font-size: 14px;
}
body.lbp-shop .wc-block-components-checkout-step__heading-content a { color: var(--lbp-brand-text); }

/* --------------------------------------------------------------------------
   3. Étapes du checkout (Coordonnées, Adresse, Paiement…) en cartes
   -------------------------------------------------------------------------- */
body.lbp-shop-checkout .wc-block-components-checkout-step {
    margin: 0 0 16px;
    padding: 20px 16px;
    background: var(--lbp-card-bg);
    border: 1px solid var(--lbp-card-border);
    border-radius: var(--lbp-radius-block);
}
/* La ligne verticale des étapes numérotées n'a pas sa place dans une carte. */
body.lbp-shop-checkout .wc-block-components-checkout-step::after { display: none; }
body.lbp-shop-checkout .wc-block-components-checkout-step__container { padding-left: 0; }

/* --------------------------------------------------------------------------
   4. Paiement express
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before {
    border-color: var(--lbp-accent-border);
    border-top-left-radius: var(--lbp-radius-block);
}
body.lbp-shop .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after {
    border-color: var(--lbp-accent-border);
    border-top-right-radius: var(--lbp-radius-block);
}
body.lbp-shop .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
    border-color: var(--lbp-accent-border);
    border-radius: 0 0 var(--lbp-radius-block) var(--lbp-radius-block);
}
body.lbp-shop .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title {
    font-family: var(--lbp-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--lbp-text-muted);
}
body.lbp-shop .wc-block-components-express-payment-continue-rule {
    color: var(--lbp-text-muted);
    font-size: 14px;
}
body.lbp-shop .wc-block-components-express-payment-continue-rule::before,
body.lbp-shop .wc-block-components-express-payment-continue-rule::after {
    border-color: var(--lbp-card-border);
}

/* --------------------------------------------------------------------------
   5. Champs texte (réf. .lbp-input). Seuls bordure, fond, rayon et focus
   changent : hauteurs et marges internes restent celles de WooCommerce, dont
   dépend l'animation du libellé flottant.
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-components-text-input input[type="text"],
body.lbp-shop .wc-block-components-text-input input[type="email"],
body.lbp-shop .wc-block-components-text-input input[type="tel"],
body.lbp-shop .wc-block-components-text-input input[type="number"],
body.lbp-shop .wc-block-components-text-input input[type="url"],
body.lbp-shop .wc-block-components-text-input input[type="password"],
body.lbp-shop .wc-block-components-textarea,
body.lbp-shop .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
body.lbp-shop .wc-blocks-components-select .wc-blocks-components-select__select {
    min-height: 0;
    background: var(--lbp-bg-page);
    border: 1px solid var(--lbp-accent-border);
    border-radius: var(--lbp-radius-field);
    box-shadow: none;
    color: var(--lbp-text);
    font-family: var(--lbp-font);
}
body.lbp-shop .wc-blocks-components-select .wc-blocks-components-select__container {
    background: var(--lbp-bg-page);
    border-radius: var(--lbp-radius-field);
}
body.lbp-shop .wc-block-components-text-input input:focus,
body.lbp-shop .wc-block-components-textarea:focus,
body.lbp-shop .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
body.lbp-shop .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    background: var(--lbp-card-bg);
    border-color: var(--lbp-brand-text);
    box-shadow: 0 0 0 1px var(--lbp-brand-text);
    outline: none;
}
body.lbp-shop .wc-block-components-text-input label,
body.lbp-shop .wc-block-components-combobox .wc-block-components-combobox-control label,
body.lbp-shop .wc-blocks-components-select .wc-blocks-components-select__label {
    color: var(--lbp-text-muted);
    font-family: var(--lbp-font);
    font-weight: 500;
}
body.lbp-shop .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--lbp-text-muted); }

/* Erreurs : le rouge WooCommerce reste, il ne doit pas passer sous le rose. */
body.lbp-shop .wc-block-components-text-input.has-error input,
body.lbp-shop .wc-block-components-combobox.has-error input.components-combobox-control__input,
body.lbp-shop .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
    border-color: #cc1818;
    box-shadow: 0 0 0 1px #cc1818;
}
body.lbp-shop .wc-block-components-text-input.has-error label,
body.lbp-shop .wc-block-components-validation-error { color: #cc1818; }

/* « + Ajouter appartement, suite, etc. » */
body.lbp-shop .wc-block-components-address-form__address_2-toggle,
body.lbp-shop .wc-block-components-address-form__address_2-toggle:hover {
    color: var(--lbp-brand-text);
    font-weight: 600;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Cases à cocher et boutons radio (choix du moyen de paiement)
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    border-color: var(--lbp-accent-border);
    border-radius: 6px;
    background: var(--lbp-bg-page);
}
body.lbp-shop .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    border-color: var(--lbp-brand);
    background: var(--lbp-brand);
}
body.lbp-shop .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: #fff; }
body.lbp-shop .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus {
    outline: 2px solid var(--lbp-brand-text);
    outline-offset: 2px;
}

body.lbp-shop .wc-block-components-radio-control .wc-block-components-radio-control__input {
    border-color: var(--lbp-accent-border);
    background: var(--lbp-card-bg);
}
body.lbp-shop .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    border-color: var(--lbp-brand);
}
body.lbp-shop .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
    background: var(--lbp-brand);
}
body.lbp-shop .wc-block-components-radio-control--highlight-checked::after {
    border-color: var(--lbp-card-border);
    border-radius: var(--lbp-radius-field);
}
body.lbp-shop .wc-block-components-radio-control-accordion-option,
body.lbp-shop .wc-block-components-radio-control__option {
    border-radius: var(--lbp-radius-field);
}
body.lbp-shop .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.lbp-shop .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: inset 0 0 0 2px var(--lbp-brand);
    border-radius: var(--lbp-radius-field);
}
body.lbp-shop .wc-block-components-radio-control__label,
body.lbp-shop .wc-block-components-payment-method-label {
    color: var(--lbp-text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Boutons (réf. .lbp-btn--primary)
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-components-button:not(.is-link) {
    min-height: 46px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--lbp-pill);
    background: var(--lbp-brand);
    color: var(--lbp-on-brand);
    font-family: var(--lbp-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease;
}
body.lbp-shop .wc-block-components-button:not(.is-link):hover,
body.lbp-shop .wc-block-components-button:not(.is-link):focus {
    background: var(--lbp-brand-hover);
    color: var(--lbp-on-brand);
}
body.lbp-shop .wc-block-components-button:not(.is-link):focus-visible {
    outline: 2px solid var(--lbp-brand-text);
    outline-offset: 2px;
}
body.lbp-shop .wc-block-components-button:disabled,
body.lbp-shop .wc-block-components-button[aria-disabled="true"] { opacity: .6; }
body.lbp-shop .wc-block-components-button.is-link { color: var(--lbp-brand-text); }

/* Bouton principal (Commander, Valider la commande) : pleine largeur, CTA du site. */
body.lbp-shop .wc-block-checkout__actions_row {
    display: block;
}
body.lbp-shop .wc-block-components-checkout-place-order-button,
body.lbp-shop .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link),
body.lbp-shop .wc-block-cart__submit-button.wc-block-components-button:not(.is-link) {
    width: 100%;
    min-height: 56px;
    padding: 15px 24px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: var(--lbp-shadow-cta);
}
body.lbp-shop .wc-block-checkout__terms {
    color: var(--lbp-text-muted);
    font-size: 13px;
}
body.lbp-shop .wc-block-checkout__terms a { color: var(--lbp-brand-text); }

/* --------------------------------------------------------------------------
   8. Résumé de la commande (colonne latérale en desktop ; en mobile
   WooCommerce le replie en une ligne « Résumé — total » au-dessus du formulaire).
   -------------------------------------------------------------------------- */
body.lbp-shop .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--lbp-card-bg);
    border: 1px solid var(--lbp-card-border);
    border-radius: var(--lbp-radius-block);
    overflow: hidden;
}
body.lbp-shop .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper,
body.lbp-shop .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel,
body.lbp-shop .wc-block-components-checkout-order-summary__title {
    border-color: var(--lbp-card-border);
}
body.lbp-shop .wc-block-components-checkout-order-summary__title-price {
    color: var(--lbp-brand-text);
    font-weight: 800;
}
body.lbp-shop .wc-block-components-checkout-order-summary__title-icon { fill: var(--lbp-brand-text); }

/* Mobile : WooCommerce replie le résumé du haut et en ajoute un second, complet,
   au-dessus du bouton Commander. On ouvre celui du haut d'office (le client voit
   ce qu'il achète en arrivant) et on masque le doublon du bas. En desktop, seul le
   résumé de la colonne latérale existe et il est déjà ouvert. */
body.lbp-shop-checkout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
    display: block;
}
body.lbp-shop-checkout .wc-block-components-sidebar .wc-block-components-checkout-order-summary__title {
    cursor: default;
}
body.lbp-shop-checkout .wc-block-components-sidebar .wc-block-components-checkout-order-summary__title :is(.wc-block-components-checkout-order-summary__title-price, .wc-block-components-checkout-order-summary__title-icon, .wc-block-components-checkout-order-summary__title-open-close) {
    display: none;
}
body.lbp-shop-checkout .checkout-order-summary-block-fill-wrapper { display: none; }
/* Hors desktop (is-large), WooCommerce n'a pas de marge intérieure : le contenu toucherait la carte. */
body.lbp-shop-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
    padding: 0 16px;
}
/* La bordure haute de l'en-tête repliable ferait un trait en haut de la carte. */
body.lbp-shop-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-block-components-sidebar .wc-block-components-checkout-order-summary__title {
    margin-top: 0;
    border-top: none;
}

body.lbp-shop .wc-block-components-order-summary-item__image img { border-radius: 10px; }
body.lbp-shop .wc-block-components-order-summary-item__quantity {
    background: var(--lbp-brand);
    border: 2px solid var(--lbp-card-bg);
    box-shadow: none;
    color: var(--lbp-on-brand);
    font-weight: 700;
}
body.lbp-shop .wc-block-components-product-name {
    color: var(--lbp-text);
    font-weight: 700;
    text-decoration: none;
}
body.lbp-shop .wc-block-components-product-metadata,
body.lbp-shop .wc-block-components-order-summary-item__description .wc-block-components-product-price {
    color: var(--lbp-text-muted);
}

/* « Ajouter des codes promo » */
body.lbp-shop .wc-block-components-panel__button,
body.lbp-shop .wc-block-components-panel__button:hover,
body.lbp-shop .wc-block-components-panel__button:focus {
    background: transparent;
    box-shadow: none;
    color: var(--lbp-text-soft);
    font-family: var(--lbp-font);
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
}
body.lbp-shop .wc-block-components-panel__button-icon { fill: var(--lbp-text-muted); }

body.lbp-shop .wc-block-components-totals-item__label,
body.lbp-shop .wc-block-components-totals-item__value { color: var(--lbp-text-soft); }
body.lbp-shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--lbp-text);
    font-weight: 800;
}
body.lbp-shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--lbp-brand-text);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   9. Panier
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-cart .wc-block-cart-items {
    border-collapse: separate;
}
body.lbp-shop .wc-block-cart .wc-block-cart-items__header {
    color: var(--lbp-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
body.lbp-shop .wc-block-cart .wc-block-cart-items th,
body.lbp-shop .wc-block-cart .wc-block-cart-items td,
body.lbp-shop .wc-block-cart .wc-block-cart-items__row {
    border-color: var(--lbp-card-border);
}
body.lbp-shop .wc-block-cart .wc-block-cart-item__image img { border-radius: 10px; }
body.lbp-shop .wc-block-cart .wc-block-cart-item__prices,
body.lbp-shop .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price {
    color: var(--lbp-text);
    font-weight: 700;
}
body.lbp-shop .wc-block-cart .wc-block-components-product-metadata__description { font-size: 14px; }
body.lbp-shop .wc-block-cart .wc-block-cart-item__remove-link {
    color: var(--lbp-text-muted);
    font-size: 14px;
}
body.lbp-shop .wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--lbp-brand-text); }

/* Totaux en carte */
body.lbp-shop .wc-block-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-totals-block,
body.lbp-shop .wc-block-cart .wc-block-cart__totals {
    padding: 4px 16px 16px;
    background: var(--lbp-card-bg);
    border: 1px solid var(--lbp-card-border);
    border-radius: var(--lbp-radius-block);
}
body.lbp-shop .wc-block-cart .wc-block-components-totals-wrapper { border-color: var(--lbp-card-border); }

/* Panier vide : titre, séparateur en points, grille « Nouveau dans la boutique » */
body.lbp-shop .wc-block-cart__empty-cart__title,
body.lbp-shop .wp-block-woocommerce-empty-cart-block > h2 {
    font-family: var(--lbp-font);
    font-size: 21px;
    font-weight: 800;
    color: var(--lbp-text);
}
body.lbp-shop .wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
    background-color: var(--lbp-accent-border);
}
body.lbp-shop .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
    color: var(--lbp-accent-border);
}
body.lbp-shop .wc-block-grid .wc-block-grid__products {
    gap: 14px;
    margin: 0;
}
body.lbp-shop .wc-block-grid .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 12px 14px;
    background: var(--lbp-card-bg);
    border: 1px solid var(--lbp-card-border);
    border-radius: var(--lbp-radius-card);
    overflow: hidden;
    text-align: left;
}
body.lbp-shop .wc-block-grid.has-3-columns .wc-block-grid__product {
    flex: 1 1 0;
    max-width: none;
}
body.lbp-shop .wc-block-grid .wc-block-grid__product-link {
    color: var(--lbp-text);
    text-decoration: none;
}
body.lbp-shop .wc-block-grid .wc-block-grid__product-image {
    margin: 0 -12px 12px;
}
body.lbp-shop .wc-block-grid .wc-block-grid__product-image img { border-radius: 0; }
body.lbp-shop .wc-block-grid .wc-block-grid__product-title {
    margin: 0 0 6px;
    font-family: var(--lbp-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--lbp-text);
}
body.lbp-shop .wc-block-grid .wc-block-grid__product-price {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--lbp-brand-text);
}
body.lbp-shop .wc-block-grid .wc-block-grid__product-add-to-cart { margin-top: auto; }
body.lbp-shop .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 9px 10px;
    border: none;
    border-radius: var(--lbp-pill);
    background: var(--lbp-brand);
    color: var(--lbp-on-brand);
    font-family: var(--lbp-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
body.lbp-shop .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: var(--lbp-brand-hover);
}

/* --------------------------------------------------------------------------
   10. Messages
   -------------------------------------------------------------------------- */
body.lbp-shop .wc-block-components-notice-banner {
    border-radius: var(--lbp-radius-field);
    font-family: var(--lbp-font);
}
body.lbp-shop .wc-block-components-notice-banner.is-info,
body.lbp-shop .wc-block-components-notice-banner.is-success {
    background: var(--lbp-bg-tint);
    border-color: var(--lbp-accent-border);
    color: var(--lbp-text);
}
body.lbp-shop .wc-block-components-notice-banner.is-info > svg,
body.lbp-shop .wc-block-components-notice-banner.is-success > svg { background: var(--lbp-brand); }

/* --------------------------------------------------------------------------
   11. Page de remerciement (order-received : gabarit classique WooCommerce)
   -------------------------------------------------------------------------- */
body.lbp-shop-checkout .woocommerce-order {
    margin-top: 0;
    padding: 22px 18px;
    background: var(--lbp-card-bg);
    border: 1px solid var(--lbp-card-border);
    border-radius: var(--lbp-radius-block);
}
body.lbp-shop-checkout .woocommerce-order .woocommerce-thankyou-order-received {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    color: var(--lbp-brand-text);
}
body.lbp-shop-checkout .woocommerce-order h2 {
    font-family: var(--lbp-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--lbp-text);
}
body.lbp-shop-checkout .woocommerce-order ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    color: var(--lbp-text-muted);
    font-size: 14px;
}
body.lbp-shop-checkout .woocommerce-order ul.woocommerce-order-overview li {
    margin: 0;
    padding: 0;
    border: none;
}
body.lbp-shop-checkout .woocommerce-order ul.woocommerce-order-overview strong {
    display: block;
    color: var(--lbp-text);
    font-size: 16px;
}
body.lbp-shop-checkout .woocommerce-order a { color: var(--lbp-brand-text); }
body.lbp-shop-checkout .woocommerce-order .woocommerce-info {
    border-radius: var(--lbp-radius-field);
    border-top-color: var(--lbp-brand);
    background: var(--lbp-bg-tint);
    color: var(--lbp-text);
}

/* --------------------------------------------------------------------------
   12. Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body.lbp-shop-checkout .wc-block-components-checkout-step { padding: 24px 24px; }
    body.lbp-shop-checkout .woocommerce-order { padding: 28px 28px; }
    body.lbp-shop .wc-block-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-totals-block,
    body.lbp-shop .wc-block-cart .wc-block-cart__totals { padding: 8px 24px 24px; }
}