/**
 * MADAME Premium — Pages Shop (Cart, Checkout, Account, Archive)
 * Charte : blanc / noir / vert profond
 *
 * Project: MADAME / 2026-04-30
 */

/* :root variables — IMPORTANT : ce fichier est chargé seul sur les pages
   shop (cart/checkout/account/archive), où madame-premium.css n'est pas
   chargé. Sans cette définition, tous les `var(--ink)` sans fallback
   échouent et le texte des boutons héritait du noir Shoptimizer (bouton
   noir + texte noir = invisible). */
:root {
    /* Neutres */
    --ink:        #161616;
    --graphite:   #2A2A2A;
    --stone:      #6B6B6B;
    --line:       #E5E3DD;
    --bone:       #F2F0EB;
    --paper:      #FAFAF8;
    --ivory:      #FCFAF5;
    --white:      #FFFFFF;
    /* Vert MADAME */
    --forest:     #1B3328;
    --forest-deep:#0F1E16;
    --forest-soft:#2D4A3C;
    /* Typo */
    --serif:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --serif-italic: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --sans:         'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    /* Easings */
    --ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --gutter:       clamp(16px, 3vw, 32px);
    --section-gap:  clamp(40px, 6vw, 80px);
}

/* Le scope est .mpp-shop-page (body class) */
body.mpp-shop-page {
    font-family: var(--sans);
    background: var(--white);
    color: var(--ink);
}

/* Cache les page-titles doublons du thème (Shoptimizer/madame-theme-child)
   pour ne garder que notre H1 dans .mpp-shop-header */
body.mpp-shop-page .entry-title,
body.mpp-shop-page .page-title,
body.mpp-shop-page .woocommerce-products-header,
body.mpp-shop-page .woocommerce-products-header__title,
body.mpp-shop-page header.entry-header,
body.mpp-shop-page .term-description {
    display: none !important;
}
/* Sauf notre h1 dans le header MADAME */
body.mpp-shop-page .mpp-shop-header h1 {
    display: block !important;
}

/* Cache la sidebar widget native WC/Shoptimizer (#secondary / .shop-sidebar)
   sur les archives boutique : on a notre propre sidebar MADAME */
body.mpp-page-shop #secondary,
body.mpp-page-shop aside.shop-sidebar,
body.mpp-page-shop .secondary-content,
body.mpp-page-shop .commercekit-sidebar,
body.mpp-page-shop .h-ckit-filters,
body.mpp-page-category #secondary,
body.mpp-page-category aside.shop-sidebar,
body.mpp-page-category .secondary-content,
body.mpp-page-category .commercekit-sidebar,
body.mpp-page-category .h-ckit-filters {
    display: none !important;
}
/* Force layout pleine largeur sur archives WC */
body.mpp-page-shop .content-area,
body.mpp-page-shop #primary,
body.mpp-page-shop main.site-main,
body.mpp-page-category .content-area,
body.mpp-page-category #primary,
body.mpp-page-category main.site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
/* Conteneur pleine largeur (override Shoptimizer max-width 1170px) */
body.mpp-page-shop .col-full,
body.mpp-page-category .col-full {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container shop standard */
.mpp-shop-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 32px var(--gutter, 4vw);
}
.mpp-shop-container--narrow {
    max-width: 1100px;
}
.mpp-shop-container--xnarrow {
    max-width: 720px;
}

/* ============================================================
   Page header (titre + breadcrumb)
   ============================================================ */
.mpp-shop-header {
    text-align: center;
    padding: 56px var(--gutter) 40px;
    max-width: 1100px;
    margin: 0 auto;
}
.mpp-shop-header .mpp-section-eyebrow {
    justify-content: center;
}
.mpp-shop-header h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.mpp-shop-header h1 em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}
.mpp-shop-header .mpp-shop-sub {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 17px;
    color: var(--stone);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Steps progress (utilisé dans checkout/thank-you) */
.mpp-checkout-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 3vw, 48px);
    margin: 40px auto 60px;
    max-width: 720px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
}
.mpp-checkout-step {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mpp-checkout-step .num {
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 12px;
    color: var(--stone);
}
.mpp-checkout-step.is-active .num {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}
.mpp-checkout-step.is-active .label {
    color: var(--ink);
}
.mpp-checkout-step.is-done .num {
    background: var(--forest);
    color: var(--white);
    border-color: var(--forest);
}
.mpp-checkout-step.is-done .num::before {
    content: '✓';
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
}
.mpp-checkout-step.is-done .num span { display: none; }
.mpp-checkout-step + .mpp-checkout-step::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--line);
    margin-right: 10px;
}

/* ============================================================
   Layout 2 colonnes (cart, checkout)
   ============================================================ */
.mpp-shop-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 2.5vw, 40px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px var(--gutter) var(--section-gap);
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .mpp-shop-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Side panel (récap commande) */
.mpp-side-panel {
    position: sticky;
    top: 100px;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(24px, 3vw, 36px);
}
@media (max-width: 1024px) {
    .mpp-side-panel { position: static; }
}
.mpp-side-panel h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 24px;
    letter-spacing: -0.005em;
}
.mpp-side-panel h2 em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}

/* ============================================================
   Lignes panier / order summary
   ============================================================ */
.mpp-cart-line {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
}
.mpp-cart-line:last-child {
    border-bottom: none;
}
.mpp-cart-line-img {
    width: 80px;
    aspect-ratio: 3/4;
    background: var(--bone);
    overflow: hidden;
    position: relative;
}
.mpp-cart-line-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mpp-cart-line-info {
    min-width: 0;
}
.mpp-cart-line-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}
.mpp-cart-line-name a {
    color: inherit;
    text-decoration: none;
}
.mpp-cart-line-name a:hover { color: var(--forest); }
.mpp-cart-line-meta {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--stone);
    margin: 0 0 8px;
}
.mpp-cart-line-meta span + span::before {
    content: '·';
    margin: 0 6px;
    opacity: 0.4;
}
.mpp-cart-line-price {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
    text-align: right;
    white-space: nowrap;
}
.mpp-cart-line-price-unit {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--stone);
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* Ligne actions (qty + Retirer) — flex propre, séparation verticale du reste */
.mpp-cart-line-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Quantité dans cart line */
.mpp-cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--white);
    height: 36px;
    flex-shrink: 0;
}
.mpp-cart-qty button {
    width: 32px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--graphite);
    font-family: var(--serif-italic);
    font-size: 14px;
}
.mpp-cart-qty button:hover { color: var(--forest); }
.mpp-cart-qty input,
.mpp-cart-qty input.qty,
.mpp-cart-qty input[type="number"] {
    width: 44px;
    height: 34px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Cache les flèches natives du navigateur sur l'input number */
.mpp-cart-qty input[type="number"]::-webkit-outer-spin-button,
.mpp-cart-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Suppression — bouton "Retirer" italique, séparé visuellement du qty */
.mpp-cart-remove {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    color: var(--stone) !important;
    font-family: var(--serif), Georgia, serif !important;
    font-style: italic !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--line) !important;
    text-underline-offset: 3px;
    transition: color 0.3s var(--ease);
    flex-shrink: 0;
    white-space: nowrap;
    height: auto !important;
    line-height: 1.4 !important;
}
.mpp-cart-remove:hover { color: #b91c1c !important; }

/* Cache TOUS les boutons remove tiers (CommerceKit, WC default, Shoptimizer) */
.mpp-cart-line a.remove,
.mpp-cart-line .product-remove,
.mpp-cart-line .product-remove a,
.mpp-cart-line .cgkit-cart-remove,
.mpp-cart-line .ckit-mini-cart__remove,
.mpp-cart-line .ckit-quantity-button,
.mpp-cart-line a.remove_from_cart_button,
.mpp-cart-line .product-thumbnail-remove,
.mpp-cart-line .cart-item-remove {
    display: none !important;
    visibility: hidden !important;
}

/* Cache les +/- du Shoptimizer/CommerceKit (`.quantity-nav` + `.quantity-button`)
   qui s'affichaient comme un X cassé / glyphe d'icône non chargée à côté de
   l'input qty. On garde l'input seul, et le client peut taper directement la
   quantité. Sélecteurs très larges (toutes variantes connues + wildcard). */
.mpp-cart-line .quantity-nav,
.mpp-cart-line .quantity-button,
.mpp-cart-line .quantity-up,
.mpp-cart-line .quantity-down,
.mpp-cart-line .plus,
.mpp-cart-line .minus,
.mpp-cart-line button.plus,
.mpp-cart-line button.minus,
.mpp-cart-line .qib-button,
.mpp-cart-line .ckit-quantity,
.mpp-cart-line .ckit-quantity-button,
.mpp-cart-line .cgkit-quantity-button,
.mpp-cart-line [class*="quantity-button"],
.mpp-cart-line [class*="qty-button"],
.mpp-cart-line [class*="quantity-up"],
.mpp-cart-line [class*="quantity-down"],
.mpp-cart-qty .quantity-nav,
.mpp-cart-qty .quantity-button,
.mpp-cart-qty .quantity-up,
.mpp-cart-qty .quantity-down,
.mpp-cart-qty .plus,
.mpp-cart-qty .minus,
.mpp-cart-qty button.plus,
.mpp-cart-qty button.minus,
.mpp-cart-qty [class*="quantity-button"],
.mpp-cart-qty [class*="qty-button"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.mpp-cart-qty .quantity {
    display: flex;
    align-items: center;
    border: none;
    margin: 0;
    padding: 0;
}
.mpp-cart-qty .quantity .screen-reader-text { position: absolute; left: -9999px; }

/* Ligne actions panier (.mpp-cart-actions-row) — coupon à gauche, "Mettre
   à jour le panier" à droite. Évite que le bouton flotte tout seul à droite
   ou s'aligne mal quand le coupon n'est pas déplié. */
.mpp-cart-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.mpp-cart-actions-row .mpp-coupon { flex: 1 1 auto; min-width: 220px; }
.mpp-cart-actions-row [name="update_cart"] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 10px 0 !important;
}
@media (max-width: 600px) {
    .mpp-cart-actions-row { flex-direction: column; align-items: stretch; }
    .mpp-cart-actions-row [name="update_cart"] { margin-left: 0; text-align: left; }
}

/* Notice WC : container clamp pour éviter overflow horizontal — voir bloc
   complet "Notices WC" plus bas pour le rendu visuel. Ces règles assurent
   uniquement que les wrappers occupent toute la largeur de leur parent. */
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-message {
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   Totaux / récap
   ============================================================ */
.mpp-totals {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.mpp-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--graphite);
}
.mpp-totals-row strong {
    color: var(--ink);
    font-weight: 500;
}
.mpp-totals-row em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}
.mpp-totals-row.is-final {
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 18px;
    align-items: baseline;
}
.mpp-totals-row.is-final .label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--graphite);
}
.mpp-totals-row.is-final .amount {
    font-family: var(--serif);
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* Code promo */
.mpp-coupon {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.mpp-coupon-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--ink);
    padding: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
    transition: color 0.3s var(--ease);
}
.mpp-coupon-toggle:hover { color: var(--forest); border-bottom-color: var(--forest); }
.mpp-coupon-form {
    display: none;
    margin-top: 14px;
    gap: 8px;
}
.mpp-coupon.is-open .mpp-coupon-form {
    display: flex;
}
.mpp-coupon-form input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.mpp-coupon-form input:focus {
    outline: none;
    border-color: var(--ink);
}
.mpp-coupon-form button {
    padding: 0 18px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s var(--ease);
}
.mpp-coupon-form button:hover { background: var(--forest); border-color: var(--forest); }

/* ============================================================
   Boutons MADAME (réutilisables sur toutes les pages shop)
   IMPORTANT : on force avec !important sur color/bg car Shoptimizer
   et CommerceKit ont des règles très spécifiques (`a span`,
   `.button:not(.specific)`, etc.) qui écrasaient nos couleurs et
   rendaient le texte invisible (gris foncé sur fond noir).
   ============================================================ */
a.mpp-btn-primary,
button.mpp-btn-primary,
.mpp-btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    font-family: var(--sans) !important;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 18px 32px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    line-height: 1;
}
.mpp-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--forest);
    transform: translateY(101%);
    transition: transform 0.4s var(--ease);
    z-index: 0;
}
/* Le texte du bouton DOIT rester blanc même quand un thème surcharge `a span` */
.mpp-btn-primary span,
.mpp-btn-primary > span,
a.mpp-btn-primary span,
button.mpp-btn-primary span {
    position: relative;
    z-index: 2;
    color: var(--white) !important;
}
.mpp-btn-primary:hover::before { transform: translateY(0); }
a.mpp-btn-primary:hover,
button.mpp-btn-primary:hover,
.mpp-btn-primary:hover {
    border-color: var(--forest) !important;
    color: var(--white) !important;
    background: var(--ink) !important; /* le hover anim utilise ::before en overlay */
}
.mpp-btn-primary:hover span { color: var(--white) !important; }
.mpp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

a.mpp-btn-ghost,
button.mpp-btn-ghost,
.mpp-btn-ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--white) !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    font-family: var(--sans) !important;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 16px 28px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.3s var(--ease);
}
.mpp-btn-ghost:hover {
    background: var(--ink) !important;
    color: var(--white) !important;
}
.mpp-btn-ghost span,
.mpp-btn-ghost:hover span { color: inherit !important; }

.mpp-btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--ink) !important;
    font-family: var(--serif-italic) !important;
    font-style: italic;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid var(--line) !important;
    text-decoration: none !important;
    transition: all 0.3s var(--ease);
}
.mpp-btn-link:hover { color: var(--forest) !important; border-bottom-color: var(--forest) !important; }

/* ============================================================
   Add-to-cart button (theme override safety)
   Shoptimizer + CommerceKit injectent des règles fortes sur
   `.single_add_to_cart_button` qui peuvent inverser les couleurs.
   ============================================================ */
button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.single_add_to_cart_button.button.alt {
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
button.single_add_to_cart_button:hover {
    background: var(--forest) !important;
    color: var(--white) !important;
    border-color: var(--forest) !important;
}

/* ============================================================
   WC Buttons générique (panier "Mettre à jour", "Procéder au paiement")
   ============================================================ */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce a.checkout-button,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    padding: 16px 32px;
    border-radius: 0 !important;
}
.woocommerce a.checkout-button:hover,
.woocommerce button.button.alt:hover {
    background: var(--forest) !important;
    border-color: var(--forest) !important;
    color: var(--white) !important;
}

/* "Voir le panier" notice WC : déjà couvert plus haut, mais
    on s'assure le texte blanc */
.woocommerce-message .button span,
.woocommerce-message a.button span { color: var(--white) !important; }

/* CommerceGurus / Elementor buttons in homepage hero */
.elementor-button,
a.elementor-button,
.cgkit-button,
a.cgkit-button {
    color: inherit !important;
}
.elementor-button.elementor-button-link[style*="background"] span,
a.elementor-button[style*="background:#0"] {
    color: #fff !important;
}

/* ============================================================
   Form fields (checkout)
   ============================================================ */
.mpp-form-group {
    margin-bottom: 18px;
}
.mpp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .mpp-form-row { grid-template-columns: 1fr; }
}
.mpp-form-label {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 8px;
    font-weight: 500;
}
.mpp-form-label .required {
    color: var(--forest);
    font-weight: 400;
    margin-left: 2px;
}
.mpp-form-input,
.mpp-form-select,
.mpp-form-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.3s var(--ease);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
.mpp-form-input:focus,
.mpp-form-select:focus,
.mpp-form-textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.mpp-form-input::placeholder { color: var(--mist); }
.mpp-form-textarea { min-height: 100px; resize: vertical; }
.mpp-form-input.has-error { border-color: #b91c1c; }
.mpp-form-error {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 12px;
    color: #b91c1c;
    margin-top: 6px;
}

/* Section title (encadré dans formulaire) */
.mpp-form-section {
    margin-bottom: 40px;
}
.mpp-form-section h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}
.mpp-form-section h3 em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}
.mpp-form-section .mpp-form-section-sub {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--stone);
    margin: 0 0 24px;
}

/* Checkboxes */
.mpp-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--graphite);
    line-height: 1.5;
}
.mpp-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--forest);
    flex-shrink: 0;
    margin-top: 2px;
}
.mpp-checkbox a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
.mpp-checkbox a:hover { color: var(--forest); }

/* Radio (méthodes paiement / livraison) */
.mpp-radio-group {
    display: grid;
    gap: 10px;
}
.mpp-radio {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: var(--white);
    cursor: pointer;
    transition: all 0.25s var(--ease);
}
.mpp-radio:hover { border-color: var(--ink); }
.mpp-radio.is-active {
    border-color: var(--forest);
    background: var(--paper);
}
.mpp-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--forest);
}
.mpp-radio-content strong {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
}
.mpp-radio-content span {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--stone);
}
.mpp-radio-price {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
}

/* ============================================================
   Empty states
   ============================================================ */
.mpp-empty-state {
    text-align: center;
    padding: 80px var(--gutter);
    max-width: 600px;
    margin: 0 auto;
}
.mpp-empty-state-mark {
    font-family: var(--serif);
    font-style: italic;
    font-size: 80px;
    color: var(--forest);
    line-height: 1;
    margin-bottom: 24px;
    font-weight: 500;
}
.mpp-empty-state h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 36px);
    color: var(--ink);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.mpp-empty-state h2 em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}
.mpp-empty-state p {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--stone);
    margin: 0 0 32px;
}

/* ============================================================
   Notices WC (errors / messages / info) — version centrée MADAME
   ============================================================
   Problème historique : selon la page (shop / cart / checkout) WC injecte
   .woocommerce-notices-wrapper à différents niveaux. Sur certaines pages le
   wrapper est rendu hors de notre conteneur .mpp-shop-* → la notice se colle
   à gauche du viewport. On contraint donc toujours le wrapper à la même
   max-width que nos pages, avec gutter horizontal. */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-notices-wrapper {
    max-width: 1500px;
    margin: 0 auto !important;
    padding: 16px var(--gutter) 0;
    box-sizing: border-box;
    width: 100%;
}
/* Quand la wrapper est DÉJÀ dans nos colonnes (shop main / side panel),
   on retire le double gutter pour éviter la marge cumulée. */
.mpp-shop-main > .woocommerce-notices-wrapper,
.mpp-shop-with-sidebar .woocommerce-notices-wrapper,
.mpp-shop-layout > .woocommerce-notices-wrapper,
.mpp-side-panel .woocommerce-notices-wrapper,
form.checkout .woocommerce-notices-wrapper,
form.woocommerce-cart-form .woocommerce-notices-wrapper {
    padding: 0;
    margin-bottom: 16px !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    margin: 0 0 24px;
    padding: 16px 20px;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.6;
    border: 1px solid var(--line) !important;
    border-left-width: 3px !important;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper) !important;
    /* layout : texte à gauche, bouton "Voir le panier" à droite, alignés */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    /* Supprime les pseudo-icônes WC/Shoptimizer (✓ ! ⓘ) qui shiftent le texte. */
    display: none !important;
    content: none !important;
}
.woocommerce-message {
    border-left-color: var(--forest) !important;
    color: var(--ink);
}
.woocommerce-info {
    border-left-color: #2563eb !important;
    color: var(--ink);
}
.woocommerce-error {
    border-left-color: #b91c1c !important;
    color: #7f1d1d;
}
/* Items à l'intérieur d'un .woocommerce-error (liste d'erreurs WC) */
.woocommerce-error li {
    list-style: none;
    flex: 1 1 100%;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Bouton "Voir le panier" / "View cart" injecté par WC dans le notice
   (.button.wc-forward) — Shoptimizer le rend blanc sur blanc → on force
   le contraste avec un solid noir style MADAME. */
.woocommerce-message .button,
.woocommerce-message a.button.wc-forward,
.woocommerce-message .wc-forward {
    display: inline-block !important;
    background: var(--ink) !important;
    color: var(--white) !important;
    padding: 10px 18px !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    transition: all 0.3s var(--ease) !important;
    margin: 0 0 0 16px !important;
    float: none !important;
    flex-shrink: 0;
    align-self: center;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button.wc-forward:hover {
    background: var(--white) !important;
    color: var(--ink) !important;
}

/* Masque le bouton "x" trash injecté par WC (.product-remove a.remove)
   et celui de CommerceKit (.cgkit-cart-remove). On utilise notre propre
   .mpp-cart-remove ("Retirer" en italique). */
.mpp-cart-line a.remove,
.mpp-cart-line .product-remove,
.mpp-cart-line .cgkit-cart-remove,
.mpp-cart-line .ckit-mini-cart__remove {
    display: none !important;
}

/* Hide "Soit X / pièce" sur ligne unique — info redondante quand qty = 1
   est déjà affichée à côté. (Re-show via JS si qty change.) */
.mpp-cart-line[data-qty="1"] .mpp-cart-line-price-unit { display: none; }

/* ============================================================
   Layout boutique : sidebar gauche + grid produits
   ============================================================ */
.mpp-shop-with-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(32px, 4vw, 56px);
    max-width: 1700px;
    margin: 0 auto;
    padding: 24px var(--gutter) var(--section-gap);
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .mpp-shop-with-sidebar {
        grid-template-columns: 1fr;
        padding: 16px var(--gutter) 60px;
    }
}

/* ============================================================
   Sidebar filtres — Effet WOW moderne
   ============================================================ */
.mpp-shop-sidebar {
    position: sticky;
    top: 100px;
    background: var(--white);
}
@media (max-width: 1024px) {
    .mpp-shop-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(360px, 90vw);
        background: var(--white);
        z-index: 100;
        padding: 24px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.4s var(--ease);
        box-shadow: 4px 0 30px rgba(0,0,0,0.08);
    }
    .mpp-shop-sidebar.is-open { transform: translateX(0); }
    body.mpp-filters-open { overflow: hidden; }
    body.mpp-filters-open::after {
        content: ''; position: fixed; inset: 0;
        background: rgba(10,10,10,0.5);
        z-index: 99;
    }
}

.mpp-filter-drawer-close {
    display: none;
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    align-items: center; justify-content: center;
    color: var(--ink);
}
@media (max-width: 1024px) {
    .mpp-filter-drawer-close { display: flex; }
}

/* Filter trigger button (mobile) */
.mpp-filters-trigger {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 22px;
    cursor: pointer;
    font-weight: 500;
}
@media (max-width: 1024px) {
    .mpp-filters-trigger { display: inline-flex; }
}

.mpp-filter-header {
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.mpp-filter-header h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}
.mpp-filter-count {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--stone);
}

/* Active filter chips */
.mpp-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.mpp-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 7px 12px;
    text-decoration: none;
    transition: all 0.25s var(--ease);
}
.mpp-active-chip:hover { background: var(--forest); }
.mpp-active-chip svg { width: 11px; height: 11px; }
.mpp-clear-all {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 12px;
    color: var(--stone);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
    padding: 7px 12px;
    transition: color 0.3s var(--ease);
}
.mpp-clear-all:hover { color: var(--forest); }

/* Filter block (accordion) */
.mpp-filter-block {
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
}
.mpp-filter-block:first-of-type { border-top: 1px solid var(--line); margin-top: -1px; }
.mpp-filter-summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
    padding: 4px 0 14px;
    position: relative;
}
.mpp-filter-summary::-webkit-details-marker { display: none; }
.mpp-filter-summary::after {
    content: '+';
    position: absolute;
    right: 0; top: 4px;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
    font-weight: 300;
    transition: transform 0.3s var(--ease);
}
.mpp-filter-block[open] > .mpp-filter-summary::after {
    content: '−';
}

/* Liste catégories */
.mpp-filter-list {
    list-style: none;
    margin: 0; padding: 0;
}
.mpp-filter-list li { margin: 0 0 6px; }
.mpp-filter-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--graphite);
    text-decoration: none;
    transition: all 0.25s var(--ease);
    min-height: 36px;
}
.mpp-filter-link:hover { color: var(--forest); transform: translateX(4px); }
.mpp-filter-count-pill {
    font-size: 11px;
    color: var(--mist);
    letter-spacing: 0.05em;
}

/* === Color swatches grid (effet WOW) === */
.mpp-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 4px 0;
}
.mpp-color-swatch-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--graphite);
    cursor: pointer;
    transition: transform 0.3s var(--ease);
}
.mpp-color-swatch-filter:hover { transform: translateY(-2px); }
.mpp-color-swatch-filter .swatch-bg {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    transition: all 0.25s var(--ease);
    position: relative;
}
.mpp-color-swatch-filter:hover .swatch-bg {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.mpp-color-swatch-filter.active .swatch-bg {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--forest);
}
.mpp-color-swatch-filter.active .swatch-bg::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mpp-color-swatch-filter .swatch-name {
    font-family: var(--sans);
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    color: var(--graphite);
}
.mpp-color-swatch-filter.active .swatch-name { color: var(--forest); font-weight: 500; }

/* === Size chips (pills) === */
.mpp-size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
.mpp-size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 38px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--graphite);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.25s var(--ease);
    cursor: pointer;
}
.mpp-size-chip:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.mpp-size-chip.active {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

/* === Price double range slider === */
.mpp-price-range { padding: 8px 4px 4px; }
.mpp-price-slider {
    position: relative;
    height: 32px;
    margin-bottom: 14px;
}
.mpp-price-track {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    background: var(--line);
    transform: translateY(-50%);
    border-radius: 2px;
}
.mpp-price-track-fill {
    position: absolute;
    height: 100%;
    background: var(--forest);
    border-radius: 2px;
}
.mpp-price-slider input[type="range"] {
    position: absolute;
    left: 0; right: 0; top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.mpp-price-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s var(--ease);
}
.mpp-price-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    border-color: var(--forest);
}
.mpp-price-slider input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}
.mpp-price-values {
    display: flex;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* ============================================================
   Loop produits (archive boutique + catégories)
   ============================================================ */
.mpp-loop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
}
@media (min-width: 1280px) { .mpp-loop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .mpp-loop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .mpp-loop-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } }
@media (max-width: 420px)  { .mpp-loop-grid { grid-template-columns: 1fr; } }

/* Reuses .mpp-product-card from madame-premium.css */

/* Loop sidebar/filters bar (bandeau au-dessus de la grille) */
.mpp-loop-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px var(--gutter);
    border-bottom: 1px solid var(--line);
    max-width: 1700px;
    margin: 0 auto;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--graphite);
    letter-spacing: 0.05em;
}
.mpp-loop-bar-count {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--stone);
}
.mpp-loop-bar-count strong {
    color: var(--ink);
    font-style: normal;
    font-weight: 500;
}
.mpp-loop-bar select {
    padding: 8px 32px 8px 14px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23161616' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border-radius: 0;
}

/* Pagination */
.mpp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 32px var(--gutter) 80px;
    font-family: var(--sans);
    font-size: 13px;
}
.mpp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    background: var(--white);
    transition: all 0.3s var(--ease);
    padding: 0 14px;
    letter-spacing: 0.05em;
}
.mpp-pagination .page-numbers:hover {
    border-color: var(--ink);
}
.mpp-pagination .page-numbers.current {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}
.mpp-pagination .page-numbers.dots {
    border: none;
    color: var(--mist);
}

/* ============================================================
   My Account
   ============================================================ */
.mpp-account-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(40px, 5vw, 80px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px var(--gutter) var(--section-gap);
    align-items: flex-start;
}
@media (max-width: 900px) {
    .mpp-account-layout { grid-template-columns: 1fr; }
}
.mpp-account-nav {
    position: sticky;
    top: 100px;
    border-right: 1px solid var(--line);
    padding-right: 24px;
}
@media (max-width: 900px) {
    .mpp-account-nav { position: static; border-right: none; padding-right: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
}
.mpp-account-nav h3 {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 18px;
    font-weight: 500;
}
.mpp-account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mpp-account-nav li { margin: 0 0 4px; }
.mpp-account-nav a {
    display: block;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--graphite);
    text-decoration: none;
    transition: color 0.3s var(--ease);
    border-bottom: 1px solid transparent;
}
.mpp-account-nav a:hover,
.mpp-account-nav .is-active a {
    color: var(--forest);
}
.mpp-account-nav .is-active a {
    border-bottom-color: var(--forest);
}

/* ============================================================
   Mobile : touch targets ≥ 44px + responsive
   ============================================================ */
@media (max-width: 768px) {
    /* Boutons : touch min 44px */
    .mpp-btn-primary,
    .mpp-btn-ghost,
    .mpp-cart-qty button,
    .mpp-coupon-form button {
        min-height: 48px;
    }
    .mpp-cart-qty button {
        width: 44px;
        height: 44px;
    }
    .mpp-cart-qty input {
        min-width: 44px;
        height: 44px;
        font-size: 16px; /* iOS : empêche le zoom auto */
    }
    .mpp-form-input,
    .mpp-form-select,
    .mpp-form-textarea {
        font-size: 16px; /* idem iOS no-zoom */
        padding: 16px;
        min-height: 48px;
    }
    .mpp-cart-line {
        grid-template-columns: 90px 1fr;
        gap: 14px;
    }
    .mpp-cart-line-img { width: 90px; }
    .mpp-cart-line-price {
        grid-column: 2;
        text-align: left;
        margin-top: 8px;
    }
    .mpp-cart-remove {
        padding: 12px 0;
        min-height: 44px;
        display: inline-block;
    }
    .mpp-checkout-steps {
        gap: 10px;
        font-size: 10px;
        letter-spacing: 0.18em;
    }
    .mpp-checkout-step + .mpp-checkout-step::before { width: 14px; }
    .mpp-shop-header { padding: 32px var(--gutter) 20px; }
    .mpp-shop-header h1 { font-size: clamp(28px, 8vw, 38px); }
    .mpp-shop-layout { padding: 16px var(--gutter) 60px; gap: 24px; }
    .mpp-side-panel { padding: 24px 20px; }
    .mpp-loop-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px var(--gutter);
    }
    .mpp-loop-bar select { width: 100%; min-height: 44px; }
    .mpp-pagination .page-numbers {
        min-width: 44px;
        height: 44px;
    }
}

/* Mobile : iPhone SE et + petits */
@media (max-width: 380px) {
    .mpp-shop-header h1 { font-size: 26px; }
    .mpp-totals-row.is-final .amount { font-size: 22px; }
}

/* ============================================================
   Order list table (My Account)
   ============================================================ */
.mpp-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 13.5px;
}
.mpp-orders-table th {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
    text-align: left;
    padding: 16px 12px;
    border-bottom: 1px solid var(--line);
}
.mpp-orders-table td {
    padding: 18px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    vertical-align: middle;
}
.mpp-orders-table .order-number {
    font-family: var(--serif);
    font-size: 16px;
}
.mpp-orders-table .order-status {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--bone);
    color: var(--graphite);
}
.mpp-orders-table .order-status.is-completed { background: var(--forest); color: var(--white); }
.mpp-orders-table .order-status.is-processing { background: #f59e0b; color: var(--white); }
.mpp-orders-table .order-status.is-cancelled { background: #ef4444; color: var(--white); }

/* ============================================================
   Checkout — récapitulatif (colonne droite)
   ============================================================
   La page checkout utilise le template WC `review-order.php` qui rend une
   <table class="shop_table woocommerce-checkout-review-order-table"> avec
   <th> + <td>. Dans notre colonne droite (1fr), les cellules sont trop
   étroites → libellés cassés ("Sous-total" / "(TTC)" sur 2 lignes), nom
   produit empilé verticalement, modes de paiement débordant. On passe la
   table en mode "block flex" et on fixe les largeurs des sections. */

/* 1) Grille checkout : forme/récap quasi 50/50 sur desktop pour donner
   plus de place au récap dont le contenu (image + nom + variations + prix
   + livraison + paiements) est dense. Ratio 1.15/1 = ~52% form / 48% récap. */
.woocommerce-checkout .mpp-shop-layout {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    max-width: 1400px;
}
@media (max-width: 1024px) {
    .woocommerce-checkout .mpp-shop-layout {
        grid-template-columns: 1fr;
    }
}

/* 2) Side panel : padding plus serré + min-width 0 pour respecter la grille */
.woocommerce-checkout .mpp-side-panel {
    padding: 24px 28px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.woocommerce-checkout .mpp-side-panel h2 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

/* ============================================================
   FIXES audit MCP Chrome 2026-05-02
   ============================================================ */

/* (1) Hide tri/pagination DOUBLONS Shoptimizer/CommerceKit qui s'ajoutent
   APRÈS notre .mpp-loop-bar (remove_action ne suffit pas car certains
   hooks sont ré-attachés par d'autres plugins/themes). On garde
   uniquement la 1ère occurrence visible (notre mpp-loop-bar).
   Ces sélecteurs ciblent les blocs SHOPTIMIZER hors de mpp-loop-bar. */
body.woocommerce-shop .woocommerce-result-count:not(.mpp-loop-bar-count *):not(.mpp-loop-bar > *):not(.mpp-loop-bar-count),
body.tax-product_cat .woocommerce-result-count:not(.mpp-loop-bar-count *):not(.mpp-loop-bar > *):not(.mpp-loop-bar-count),
body.woocommerce-shop .mpp-shop-main > .woocommerce-result-count,
body.tax-product_cat .mpp-shop-main > .woocommerce-result-count,
body.woocommerce-shop > .woocommerce-result-count,
body.tax-product_cat > .woocommerce-result-count {
    display: none !important;
}
/* Garde UNIQUEMENT la 1ère barre tri (notre mpp-loop-bar)  + la pagination
   en bas. Cache toute autre injection en haut. */
body.woocommerce-shop form.woocommerce-ordering ~ form.woocommerce-ordering,
body.tax-product_cat form.woocommerce-ordering ~ form.woocommerce-ordering {
    display: none !important;
}
/* Approche radicale : si plus d'une barre, on cache toutes celles HORS
   de notre conteneur mpp-loop-bar */
body.woocommerce-shop .mpp-shop-main > form.woocommerce-ordering,
body.tax-product_cat .mpp-shop-main > form.woocommerce-ordering,
body.woocommerce-shop .mpp-shop-with-sidebar > form.woocommerce-ordering,
body.tax-product_cat .mpp-shop-with-sidebar > form.woocommerce-ordering {
    display: none !important;
}

/* CONFIRMÉ via inspecteur Chrome : Shoptimizer injecte ses propres
   barres de tri/result-count via .shoptimizer-sorting (en haut + en bas
   .sorting-end). On les cache, notre .mpp-loop-bar suffit. */
.shoptimizer-sorting,
.mpp-shop-main > .shoptimizer-sorting,
.mpp-shop-with-sidebar .shoptimizer-sorting,
div.shoptimizer-sorting,
div.shoptimizer-sorting.sorting-end {
    display: none !important;
}

/* (2) Widget "Avez-vous un code promo ?" qui déborde full-bleed
   Selectors typiques : .checkout_coupon, .woocommerce-form-coupon-toggle,
   .checkout-coupon-form, .ckit-coupon-bar (CommerceKit). */
.woocommerce-form-coupon-toggle,
.checkout_coupon,
.checkout-coupon-form,
.ckit-coupon-bar,
.shoptimizer-checkout-coupon,
.cgkit-checkout-coupon-bar,
.cgkit-coupon-toggle {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 14px var(--gutter, 32px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-align: left !important;
}

/* (3) Hide gateway Stripe doublon "Carte de crédit/débit" (le 2e qui
   doublonne avec "Cartes de débit/crédit" qu'on garde par défaut).
   Identifier exact = stripe_cc / stripe_card / les variantes Stripe Cards. */
.woocommerce-checkout li.payment_method_stripe_cc,
.woocommerce-checkout li.payment_method_stripe_card,
.woocommerce-checkout li.payment_method_stripe_credit_card,
.woocommerce-checkout li[class*="payment_method_stripe_cc"],
.woocommerce-checkout li[class*="payment_method_stripe_card"] {
    display: none !important;
}

/* (4) Sidebar catégorie boutique : hide les widget items dont le NAME
   contient une virgule (catégories WC mal créées par Matterhorn). On
   masque le <li> entier qui contient un <a> avec virgule. */
.woocommerce-widget-layered-nav-list li a[title*=","],
.product-categories li a[title*=","],
.widget_product_categories li:has(a[title*=","]) {
    /* hide via parent — ne fonctionne que si le browser supporte :has() */
}
/* Fallback JS (pas de :has) : cibles directes */

/* CRITICAL FIX — woocommerce.css du parent (theme Shoptimizer / WC core)
   applique au breakpoint 993px+ :
       #order_review, #order_review_heading {
           float: right;
           width: 41.1764705882%;
           margin-right: 0;
           clear: right;
       }
   Cela rétrécit la div récap à ~41% du parent et la fait flotter à droite,
   ce qui casse complètement notre grid. On force le reset ici en !important
   car la règle parent a la même spécificité (#id) et est chargée APRÈS notre
   madame-shop.css selon l'ordre d'enqueue. */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #wc_checkout_add_ons,
.woocommerce-page #order_review,
.woocommerce-page #order_review_heading,
.woocommerce-page #customer_details {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    clear: none !important;
}
/* On retire aussi le clear:right qui force un saut de ligne avant le récap */
.woocommerce-checkout #order_review_heading { display: none !important; }
/* Idem pour les colonnes/wrapper Shoptimizer */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3) Reset complet de la table review-order : block + flex propre */
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order * {
    box-sizing: border-box;
}
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    display: block;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-family: var(--sans) !important;
}
/* Cache le <thead> WC ("Produit" / "Total") — redondant avec notre H2 */
.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* Lignes produit : flex img(opt) + nom + prix */
.woocommerce-checkout-review-order-table .cart_item {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
}
.woocommerce-checkout-review-order-table .cart_item:first-child {
    padding-top: 0 !important;
}
.woocommerce-checkout-review-order-table .cart_item .product-name {
    flex: 1 1 auto;
    display: block;
    font-family: var(--serif) !important;
    font-size: 15px !important;
    color: var(--ink);
    line-height: 1.35;
    width: auto !important;
}
.woocommerce-checkout-review-order-table .cart_item .product-name img {
    width: 64px !important;
    height: 86px !important;
    max-width: 64px !important;
    object-fit: cover;
    float: left;
    margin: 0 14px 0 0 !important;
    background: var(--bone);
    flex-shrink: 0;
}
/* Évite que l'image WC ne soit overrideée par les rules par défaut */
.woocommerce-checkout-review-order-table .cart_item .product-name a {
    display: inline;
}
.woocommerce-checkout-review-order-table .cart_item .product-name a {
    color: inherit;
    text-decoration: none;
}
.woocommerce-checkout-review-order-table .cart_item .product-name strong.product-quantity {
    font-family: var(--serif-italic) !important;
    font-style: italic;
    font-weight: 400;
    color: var(--stone);
    font-size: 13px;
    margin-left: 4px;
}
.woocommerce-checkout-review-order-table .cart_item .product-name dl.variation,
.woocommerce-checkout-review-order-table .cart_item .product-name .wc-item-meta {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-family: var(--serif-italic) !important;
    font-style: italic;
    font-size: 12.5px !important;
    color: var(--stone);
    list-style: none;
}
.woocommerce-checkout-review-order-table .cart_item .product-name dl.variation dt,
.woocommerce-checkout-review-order-table .cart_item .product-name dl.variation dd,
.woocommerce-checkout-review-order-table .cart_item .product-name .wc-item-meta li {
    display: inline !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    font-weight: 400;
}
.woocommerce-checkout-review-order-table .cart_item .product-total {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 70px;
    text-align: right !important;
    font-family: var(--serif) !important;
    font-size: 15px !important;
    color: var(--ink);
    white-space: nowrap !important;
    align-self: flex-start;
    padding-top: 2px !important;
    line-height: 1.4;
}
/* Force inline + nowrap sur TOUT ce qui est dans .product-total — bdi, span,
   small inclus. Sinon "(TTC)" passe à la ligne quand la cellule est étroite. */
.woocommerce-checkout-review-order-table .cart_item .product-total *,
.woocommerce-checkout-review-order-table .cart-subtotal td *,
.woocommerce-checkout-review-order-table .order-total td *,
.woocommerce-checkout-review-order-table .shipping td .amount,
.woocommerce-checkout-review-order-table .fee td * {
    white-space: nowrap !important;
}
.woocommerce-checkout-review-order-table .cart_item .product-total bdi,
.woocommerce-checkout-review-order-table .cart_item .product-total .amount {
    font-family: var(--serif) !important;
    font-size: 15px;
    display: inline;
}
.woocommerce-checkout-review-order-table .cart_item .product-total .woocommerce-Price-currencySymbol {
    margin-left: 1px;
}
.woocommerce-checkout-review-order-table .cart_item .product-total small {
    display: block !important;
    font-size: 10px !important;
    color: var(--stone);
    margin-top: 2px;
    margin-left: 0 !important;
}

/* Lignes totaux (sous-total, livraison, taxes, total) */
.woocommerce-checkout-review-order-table .cart-subtotal,
.woocommerce-checkout-review-order-table .order-total,
.woocommerce-checkout-review-order-table .tax-rate,
.woocommerce-checkout-review-order-table .fee,
.woocommerce-checkout-review-order-table tr[class*="cart-discount"] {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--line) !important;
}
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .tax-rate th,
.woocommerce-checkout-review-order-table .fee th,
.woocommerce-checkout-review-order-table tr[class*="cart-discount"] th {
    flex: 1 1 auto;
    width: auto !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite);
    font-weight: 500;
}
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .tax-rate td,
.woocommerce-checkout-review-order-table .fee td,
.woocommerce-checkout-review-order-table tr[class*="cart-discount"] td {
    flex: 0 0 auto;
    width: auto !important;
    text-align: right !important;
    white-space: nowrap;
    font-family: var(--serif) !important;
    font-size: 15px !important;
    color: var(--ink);
}
.woocommerce-checkout-review-order-table small.includes_tax,
.woocommerce-checkout-review-order-table small {
    display: inline !important;
    font-family: var(--sans) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em;
    color: var(--stone);
    margin-left: 6px;
    white-space: nowrap;
}

/* Total final mis en valeur */
.woocommerce-checkout-review-order-table .order-total {
    margin-top: 6px !important;
    padding: 16px 0 !important;
    border-top: 2px solid var(--ink) !important;
    border-bottom: none !important;
    align-items: center;
}
.woocommerce-checkout-review-order-table .order-total th {
    font-family: var(--serif) !important;
    font-size: 18px !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    color: var(--ink);
    font-weight: 400;
}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce-checkout-review-order-table .order-total bdi {
    font-family: var(--serif) !important;
    font-size: 26px !important;
    color: var(--ink);
    font-weight: 500;
    line-height: 1;
}

/* Lignes livraison (.shipping) — même layout flex mais avec liste de méthodes */
.woocommerce-checkout-review-order-table .shipping {
    display: block !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
}
.woocommerce-checkout-review-order-table .shipping th {
    width: 100% !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 10px !important;
    font-weight: 500;
    display: block !important;
}
.woocommerce-checkout-review-order-table .shipping td {
    width: 100% !important;
    display: block !important;
}
.woocommerce-checkout-review-order-table ul#shipping_method,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-checkout-review-order-table ul#shipping_method li,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li {
    display: flex !important;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border: none !important;
    margin: 0 !important;
}
.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"],
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--forest);
    width: 16px;
    height: 16px;
}
.woocommerce-checkout-review-order-table ul#shipping_method li label,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li label {
    flex: 1 1 auto;
    margin: 0 !important;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.woocommerce-checkout-review-order-table ul#shipping_method li label .amount,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li label .amount {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
}
/* Méthode active mise en avant */
.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"]:checked + label {
    font-weight: 500;
}

/* ============================================================
   Checkout — Mode de paiement (.woocommerce-checkout-payment / #payment)
   ============================================================ */
.woocommerce-checkout #payment,
.woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 24px !important;
}
.woocommerce-checkout-payment ul.payment_methods,
#payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--line);
    background: var(--white);
}
.woocommerce-checkout-payment ul.payment_methods li,
#payment ul.payment_methods li {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    margin: 0 !important;
    list-style: none !important;
}
.woocommerce-checkout-payment ul.payment_methods li:last-child,
#payment ul.payment_methods li:last-child {
    border-bottom: none !important;
}
.woocommerce-checkout-payment ul.payment_methods li input[type="radio"],
#payment ul.payment_methods li input[type="radio"] {
    margin: 0 10px 0 0 !important;
    accent-color: var(--forest);
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.woocommerce-checkout-payment ul.payment_methods li label,
#payment ul.payment_methods li label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    font-weight: 500 !important;
    cursor: pointer;
    margin: 0 !important;
    flex-wrap: wrap;
    width: calc(100% - 30px);
}
.woocommerce-checkout-payment ul.payment_methods li label img,
#payment ul.payment_methods li label img {
    max-height: 22px;
    width: auto;
    margin: 0 0 0 auto !important;
    display: inline-block;
    vertical-align: middle;
}
.woocommerce-checkout-payment ul.payment_methods li .payment_box,
#payment ul.payment_methods li .payment_box {
    background: var(--paper) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    margin: 12px 0 0 !important;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
}
.woocommerce-checkout-payment ul.payment_methods li .payment_box::before,
#payment ul.payment_methods li .payment_box::before {
    display: none !important;
}
.woocommerce-checkout-payment .form-row.place-order,
#payment .form-row.place-order {
    margin-top: 24px !important;
    padding: 0 !important;
}
.woocommerce-checkout-payment #place_order,
#payment #place_order,
button#place_order {
    width: 100% !important;
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 18px 24px !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    box-shadow: none !important;
    text-shadow: none !important;
}
.woocommerce-checkout-payment #place_order:hover,
#payment #place_order:hover,
button#place_order:hover {
    background: var(--forest) !important;
    border-color: var(--forest) !important;
}
.woocommerce-checkout-payment .woocommerce-privacy-policy-text,
#payment .woocommerce-privacy-policy-text {
    margin-top: 16px !important;
    font-family: var(--serif-italic) !important;
    font-style: italic;
    font-size: 12.5px;
    color: var(--stone);
    line-height: 1.5;
}
.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper,
#payment .woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0;
    font-size: 13px;
    color: var(--graphite);
}
.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper a,
#payment .woocommerce-terms-and-conditions-wrapper a {
    color: var(--forest);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Loading overlay (pendant submit Stripe/PayPal) */
.woocommerce-checkout .blockUI.blockOverlay {
    background: rgba(255,255,255,0.7) !important;
    opacity: 1 !important;
}

/* Cache les gateways Stripe doublons (Express Checkout vs Cards) qui
   apparaissent comme 2 lignes quasi-identiques "Cartes de débit/crédit"
   et "Carte de crédit/débit". On garde uniquement la 1ère (express) qui
   inclut Apple Pay/Google Pay/cards. Mascage côté UI seulement.
   Si on veut désactiver côté admin: WC → Settings → Payments. */
.woocommerce-checkout li.payment_method_stripe_link,
.woocommerce-checkout li.payment_method_stripe_oxxo,
.woocommerce-checkout li.payment_method_stripe_alipay,
.woocommerce-checkout li.payment_method_stripe_wechat,
.woocommerce-checkout li.payment_method_stripe_p24,
.woocommerce-checkout li.payment_method_stripe_eps,
.woocommerce-checkout li.payment_method_stripe_giropay,
.woocommerce-checkout li.payment_method_stripe_multibanco,
.woocommerce-checkout li.payment_method_stripe_boleto,
.woocommerce-checkout li.payment_method_stripe_sepa,
.woocommerce-checkout li.payment_method_stripe_ideal {
    display: none !important;
}

/* Mobile : récap empilé sous le formulaire */
@media (max-width: 1024px) {
    .woocommerce-checkout .mpp-side-panel {
        position: static;
    }
}
@media (max-width: 600px) {
    .woocommerce-checkout-review-order-table .cart_item .product-name img {
        width: 48px;
        height: 64px;
    }
    .woocommerce-checkout-review-order-table .order-total td,
    .woocommerce-checkout-review-order-table .order-total .amount {
        font-size: 22px !important;
    }
}