/**
 * EAFPS — WooCommerce charter overrides.
 *
 * Aligned with eafps_videos & eafps_directory tokens (Inter body, Butler headings,
 * turquoise/marine/parme palette, 18px card radius, pill buttons).
 *
 * Specificity strategy: most rules are prefixed with `.woocommerce` (Woo wraps every
 * shop/cart/checkout/account screen in a `.woocommerce` element). Where the Salient
 * parent or `salient-core` apply button/input styles with their own !important, we
 * either chain selectors (`body.woocommerce-page …`) or use !important — same
 * approach as eafps_videos/frontend.css.
 *
 * Sections:
 *   1. Tokens
 *   2. Shared primitives (button, field, card, chip, pill)
 *   3. Single product
 *   4. Shop loop / archive
 *   5. Cart
 *   6. Checkout
 *   7. My account
 *   8. Notices
 *   9. Responsive
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
.woocommerce,
.woocommerce-page,
body.woocommerce,
body.woocommerce-page {
    --eafps-turquoise: #4BC1D0;
    --eafps-turquoise-dark: #08AEC0;
    --eafps-turquoise-darker: #079AAB;
    --eafps-marine: #272E47;
    --eafps-marine-soft: #1b2236;
    --eafps-parme-clair: #E3E9F6;
    --eafps-parme-tres-clair: #F6F7FF;
    --eafps-contour-champs: #DCE4F5;
    --eafps-muted: #667085;
    --eafps-procedure-bg: #C4F6FD;
    --eafps-procedure-fg: #128AA2;
    --eafps-topic-bg: #4BC1D0;
    --eafps-topic-fg: #FFFFFF;
    --eafps-pill-bg: #272E47;
    --eafps-pill-fg: #FFFFFF;
    --eafps-radius-card: 18px;
    --eafps-radius-field: 8px;
    --eafps-radius-block: 12px;
    --eafps-shadow-card: 0 4px 20px rgba(39, 46, 71, 0.10);
    --eafps-shadow-card-hover: 0 10px 30px rgba(39, 46, 71, 0.18);
    --eafps-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --eafps-font-serif: 'Butler', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* Base text color & font on every WC screen. */
.woocommerce,
.woocommerce-page {
    font-family: var(--eafps-font-sans);
    color: var(--eafps-marine);
}

/* ── 2. Shared primitives ─────────────────────────────────────────────── */

/* Pill button (primary). Targets every Woo button — they all share `.button`. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit {
    background: var(--eafps-turquoise) !important;
    background-image: none !important;
    color: #FFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    transition: background-color .15s ease, transform .15s ease !important;
    cursor: pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page #respond input#submit:hover {
    background: var(--eafps-turquoise-dark) !important;
    color: #FFF !important;
    transform: translateY(-1px);
}

/* Secondary pill (dark navy) — used for "Place order" / checkout submit. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce-page #place_order {
    background: var(--eafps-pill-bg) !important;
    color: #FFF !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce-page #place_order:hover {
    background: var(--eafps-marine-soft) !important;
}

/* Form fields. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
    background: #FFF !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    padding: 0 16px !important;
    height: 48px !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    transition: border-color .15s ease !important;
}
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea {
    height: auto !important;
    min-height: 140px !important;
    padding: 12px 16px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
    border-color: var(--eafps-turquoise) !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}
.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required {
    color: var(--eafps-turquoise-dark) !important;
    text-decoration: none !important;
}

/* Quantity input (used in single product + cart). */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty {
    background: #FFF !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    height: 48px !important;
    width: 84px !important;
    padding: 0 12px !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    text-align: center;
}
.woocommerce .quantity .qty:focus,
.woocommerce-page .quantity .qty:focus {
    border-color: var(--eafps-turquoise) !important;
    outline: 0 !important;
}

/* Headings (serif, marine). */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-Tabs-panel h2 {
    font-family: var(--eafps-font-serif) !important;
    color: var(--eafps-marine);
    font-weight: 400;
    line-height: 1.2;
}

/* ── 3. Single product ────────────────────────────────────────────────── */
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
    font-family: var(--eafps-font-serif) !important;
    font-size: 38px;
    font-weight: 400;
    color: var(--eafps-marine);
    line-height: 1.15;
    margin: 0 0 18px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-page div.product p.price,
.woocommerce-page div.product span.price {
    color: var(--eafps-turquoise-dark) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 22px;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce-page div.product p.price del,
.woocommerce-page div.product span.price del {
    color: var(--eafps-muted) !important;
    font-weight: 400;
    opacity: 1;
    margin-right: 10px;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    background: transparent !important;
    text-decoration: none !important;
    color: var(--eafps-turquoise-dark) !important;
}

.woocommerce div.product .woocommerce-product-rating,
.woocommerce-page div.product .woocommerce-product-rating {
    margin-bottom: 18px;
}
.woocommerce .star-rating,
.woocommerce-page .star-rating {
    color: var(--eafps-turquoise);
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-page div.product .woocommerce-product-details__short-description {
    color: var(--eafps-marine);
    font-family: var(--eafps-font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Sale flash → procedure chip style (light turquoise pill). */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background: var(--eafps-procedure-bg) !important;
    color: var(--eafps-procedure-fg) !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 28px !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: 0 !important;
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
}

/* Gallery image rounded corners + soft shadow. */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-page div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    border-radius: var(--eafps-radius-card);
    overflow: hidden;
    background: var(--eafps-parme-tres-clair);
}
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce-page div.product .woocommerce-product-gallery img {
    border-radius: var(--eafps-radius-card);
}
.woocommerce div.product .flex-control-thumbs li img,
.woocommerce-page div.product .flex-control-thumbs li img {
    border-radius: 10px;
    opacity: .7;
    transition: opacity .15s ease;
}
.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce-page div.product .flex-control-thumbs li img:hover,
.woocommerce-page div.product .flex-control-thumbs li img.flex-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--eafps-turquoise);
}

/* Add-to-cart row layout. */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 24px 0 28px;
}
.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
    margin: 0 !important;
}

/* 3.x — Stepper de quantité (− N +) unifié, hauteur 48px alignée avec le bouton ATC.
   Salient injecte des boutons `.minus` / `.plus` à part (35×35px) qui désalignent
   le bloc. On les soude au champ qty en un seul stepper avec bordure commune. */
.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 48px !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    overflow: hidden;
    background: #FFF;
}
.woocommerce div.product form.cart .quantity input.minus,
.woocommerce div.product form.cart .quantity input.plus,
.woocommerce-page div.product form.cart .quantity input.minus,
.woocommerce-page div.product form.cart .quantity input.plus {
    width: 40px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--eafps-parme-tres-clair) !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.woocommerce div.product form.cart .quantity input.minus:hover,
.woocommerce div.product form.cart .quantity input.plus:hover,
.woocommerce-page div.product form.cart .quantity input.minus:hover,
.woocommerce-page div.product form.cart .quantity input.plus:hover {
    background: var(--eafps-turquoise) !important;
    color: #FFF !important;
}
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-page div.product form.cart .quantity input.qty {
    width: 64px !important;
    height: 48px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-left: 1px solid var(--eafps-contour-champs) !important;
    border-right: 1px solid var(--eafps-contour-champs) !important;
    border-radius: 0 !important;
    text-align: center;
    background: #FFF !important;
}

/* 3.y — Bouton "Add to cart" unique sur la fiche produit : forcer hauteur 48px
   pour s'aligner avec le stepper. Salient applique padding 16px 23px !important
   via `body[data-button-style="rounded"] .container-wrap button[type="submit"]`
   (spécificité 0,4,3), plus un override font-size sur `.single_add_to_cart_button`
   (0,6,3). On ajoute une classe au sélecteur (woocommerce + woocommerce-page sur
   body) pour passer à (0,6,4) qui bat la cascade. */
body.woocommerce.woocommerce-page div.product form.cart button.single_add_to_cart_button,
body.woocommerce.woocommerce-page div.product form.cart .single_add_to_cart_button {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;          /* Salient pose margin-top: 30px, qui désaligne le centrage flex */
    padding: 0 32px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--eafps-turquoise) !important;
    color: #FFF !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: 0 !important;
    transition: background-color .15s ease, transform .15s ease !important;
}
body.woocommerce.woocommerce-page div.product form.cart button.single_add_to_cart_button:hover,
body.woocommerce.woocommerce-page div.product form.cart .single_add_to_cart_button:hover {
    background: var(--eafps-turquoise-dark) !important;
    transform: translateY(-1px);
}

/* Product meta (sku, category, tags). */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
    border-top: 1px solid var(--eafps-parme-clair);
    padding-top: 18px;
    margin-top: 24px;
    font-family: var(--eafps-font-sans);
    font-size: 14px;
    color: var(--eafps-muted);
}
.woocommerce div.product .product_meta > span,
.woocommerce-page div.product .product_meta > span {
    display: block;
    margin-bottom: 6px;
}
.woocommerce div.product .product_meta a,
.woocommerce-page div.product .product_meta a {
    color: var(--eafps-turquoise-dark);
    text-decoration: none;
}
.woocommerce div.product .product_meta a:hover,
.woocommerce-page div.product .product_meta a:hover {
    color: var(--eafps-turquoise-darker);
}

/* Tabs (description / additional info / reviews). */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--eafps-parme-clair) !important;
    padding: 0 !important;
    margin: 40px 0 24px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 14px 22px !important;
    color: var(--eafps-muted) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid transparent !important;
    transition: color .15s ease, border-color .15s ease;
    text-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--eafps-marine) !important;
    border-bottom-color: var(--eafps-turquoise) !important;
}
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce-page div.product .woocommerce-Tabs-panel {
    font-family: var(--eafps-font-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--eafps-marine);
}
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce-page div.product .woocommerce-Tabs-panel h2 {
    font-family: var(--eafps-font-serif) !important;
    font-size: 26px;
    font-weight: 400;
    margin: 0 0 14px;
}

/* Related / upsell section. */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce-page .related,
.woocommerce-page .upsells {
    margin-top: 60px;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce-page .related > h2,
.woocommerce-page .upsells > h2 {
    font-family: var(--eafps-font-serif) !important;
    font-size: 28px;
    font-weight: 400;
    color: var(--eafps-marine);
    margin: 0 0 28px;
}

/* ── 4. Shop loop / archive ───────────────────────────────────────────── */
/* Salient applique sur la grille produits une règle "killer" de spécificité (0,5,3) :
     body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns="4"] li.product
       { width: 23.49% !important; margin: 0 1.5% 1.5% 0 !important }
   Pour la battre on doit reproduire la MÊME structure (body + :not + attribut data-*)
   tout en chargeant après. Mon CSS étant enqueué après salient/woocommerce.css, la
   cascade tranche en ma faveur dès que la spécificité est égale. */

/* 4.0 — Neutralise les pseudo-éléments ::before/::after de WC core sur `ul.products`.
   WC les ajoute pour le clearfix des floats (`content: " "; display: table`). En
   contexte CSS Grid, ils deviennent des grid items qui consomment des cells fantômes,
   poussant les vraies cards d'une position vers la droite. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

/* 4.1 — UL : grille 3 colonnes, override des règles `display: flex; width: 101.5%; padding: 1.5%`
   posées par Salient sur tous les `[data-product-style]`. */
body.woocommerce:not(.single-product) ul.products[data-product-style],
body.woocommerce-page:not(.single-product) ul.products[data-product-style],
body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns],
body.woocommerce-page:not(.single-product) ul.products[data-n-desktop-columns] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    flex-wrap: nowrap !important;
}

/* 4.2 — LI : largeur 100% de la cellule grid + désactivation float/margin Salient.
   Sélecteurs avec [data-n-desktop-columns] = même spécificité que la règle Salient
   `width: 23.49% !important`. Mine loads after → mine wins. */
body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns] li.product,
body.woocommerce-page:not(.single-product) ul.products[data-n-desktop-columns] li.product,
body.woocommerce:not(.single-product) ul.products[data-product-style] li.product,
body.woocommerce-page:not(.single-product) ul.products[data-product-style] li.product {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    float: none !important;
    clear: none !important;
    background: #FFF !important;
    border: 1px solid var(--eafps-parme-clair) !important;
    border-radius: var(--eafps-radius-card) !important;
    box-shadow: var(--eafps-shadow-card) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns] li.product:hover,
body.woocommerce-page:not(.single-product) ul.products[data-n-desktop-columns] li.product:hover,
body.woocommerce:not(.single-product) ul.products[data-product-style] li.product:hover,
body.woocommerce-page:not(.single-product) ul.products[data-product-style] li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--eafps-shadow-card-hover) !important;
}

/* 4.3 — Aplatissement du .product-wrap pour mettre le bouton "Add to cart" en bas.
   Salient encapsule image + bouton dans `.product-wrap`, et positionne le bouton
   en `position: absolute; transform: translateY(101%)` (hover-reveal). On veut
   l'inverse : bouton toujours visible, ancré en bas du bloc, sous le prix.
   Solution : `display: contents` sur `.product-wrap` pour que ses enfants (image,
   product-add-to-cart) participent au flex column du li. Puis on ordonne :
   image (1) → titre (2) → prix (3) → bouton (4, poussé en bas via `margin-top: auto`). */
body.woocommerce ul.products li.product .product-wrap,
body.woocommerce-page ul.products li.product .product-wrap {
    display: contents !important;
}
body.woocommerce ul.products li.product > .product-wrap > a:first-child,
body.woocommerce-page ul.products li.product > .product-wrap > a:first-child {
    order: 1;
    display: block;
    margin-bottom: 16px;
}
body.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
    order: 2;
}
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
    order: 3;
}
body.woocommerce ul.products li.product .product-add-to-cart,
body.woocommerce-page ul.products li.product .product-add-to-cart {
    order: 4;
    margin-top: auto !important;   /* pousse le bouton tout en bas du flex column */
    padding-top: 14px;
    width: 100%;
}

/* 4.4 — Bouton Add to cart : neutralisation totale du hover-reveal Salient
   (`position: absolute; transform: translateY(101%); bottom: 0; z-index: 20`).
   On force position relative + transform none + width 100% + on garde le style
   pill marine défini en section 2 (mais en plus spécifique pour battre la
   classe `.classic` de Salient). */
body.woocommerce ul.products li.product .product-wrap .add_to_cart_button,
body.woocommerce ul.products li.product .product-wrap a.button,
body.woocommerce ul.products li.product .product-add-to-cart a.button,
body.woocommerce-page ul.products li.product .product-wrap .add_to_cart_button,
body.woocommerce-page ul.products li.product .product-wrap a.button,
body.woocommerce-page ul.products li.product .product-add-to-cart a.button,
.woocommerce .classic .product-wrap .add_to_cart_button,
.woocommerce .classic .product-wrap a.button {
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 22px !important;
    background: var(--eafps-pill-bg) !important;
    color: #FFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background-color .15s ease, transform .15s ease !important;
}
body.woocommerce ul.products li.product .product-wrap .add_to_cart_button:hover,
body.woocommerce ul.products li.product .product-wrap a.button:hover,
body.woocommerce-page ul.products li.product .product-wrap .add_to_cart_button:hover,
body.woocommerce-page ul.products li.product .product-wrap a.button:hover,
.woocommerce .classic .product-wrap .add_to_cart_button:hover {
    background: var(--eafps-turquoise) !important;
    transform: translateY(-1px) !important;
}
/* Icônes Salient (panier, quickview) à l'intérieur du bouton — on les masque pour
   garder un libellé textuel propre type "Add to cart". */
body.woocommerce ul.products li.product .product-add-to-cart .add_to_cart_button i,
body.woocommerce-page ul.products li.product .product-add-to-cart .add_to_cart_button i {
    display: none !important;
}

/* 4.5 — Titre cliquable (lien injecté côté PHP via eafps_wc_loop_product_title_linked).
   On retire le style "lien" générique (souligné, couleur turquoise) pour garder
   l'apparence du titre serif marine. */
body.woocommerce ul.products li.product h2.woocommerce-loop-product__title a,
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title a {
    color: var(--eafps-marine) !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: color .15s ease;
}
body.woocommerce ul.products li.product h2.woocommerce-loop-product__title a:hover,
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title a:hover {
    color: var(--eafps-turquoise-dark) !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    border-radius: 12px;
    margin: 0 0 16px !important;
    background: var(--eafps-parme-tres-clair);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--eafps-font-serif) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--eafps-marine) !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    color: var(--eafps-turquoise-dark) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
    color: var(--eafps-muted) !important;
    font-weight: 400 !important;
    opacity: 1;
    margin-right: 8px;
}
/* (Le styling du bouton "Add to cart" loop est centralisé en section 4.4.) */
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
    margin: 0 0 8px !important;
}

/* Shop page header (page title, result count, ordering). */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
    font-family: var(--eafps-font-serif) !important;
    color: var(--eafps-marine);
    font-weight: 400;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    color: var(--eafps-muted);
    font-family: var(--eafps-font-sans);
    font-size: 14px;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background: #FFF !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    height: 44px !important;
    padding: 0 36px 0 14px !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
}

/* Pagination. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
    border: 0 !important;
    display: inline-flex;
    gap: 6px;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
    border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
    background: #FFF !important;
    border: 1px solid var(--eafps-parme-clair) !important;
    border-radius: 999px !important;
    min-width: 40px;
    height: 40px;
    line-height: 40px !important;
    padding: 0 14px !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li a:hover,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
    background: var(--eafps-turquoise) !important;
    color: #FFF !important;
    border-color: var(--eafps-turquoise) !important;
}

/* ── 5. Cart ──────────────────────────────────────────────────────────── */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    border: 1px solid var(--eafps-parme-clair) !important;
    border-radius: var(--eafps-radius-card) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    background: #FFF;
    box-shadow: var(--eafps-shadow-card);
}
.woocommerce table.shop_table thead th,
.woocommerce-page table.shop_table thead th {
    background: var(--eafps-parme-tres-clair) !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--eafps-parme-clair) !important;
}
.woocommerce table.shop_table tbody td,
.woocommerce-page table.shop_table tbody td {
    padding: 18px !important;
    border-top: 1px solid var(--eafps-parme-clair) !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 15px !important;
    vertical-align: middle !important;
}
.woocommerce table.shop_table tbody tr:first-child td,
.woocommerce-page table.shop_table tbody tr:first-child td {
    border-top: 0 !important;
}
.woocommerce table.shop_table td.product-name a,
.woocommerce-page table.shop_table td.product-name a {
    color: var(--eafps-marine) !important;
    font-weight: 600;
    text-decoration: none;
}
.woocommerce table.shop_table td.product-name a:hover,
.woocommerce-page table.shop_table td.product-name a:hover {
    color: var(--eafps-turquoise-dark) !important;
}
.woocommerce table.shop_table .product-remove a.remove,
.woocommerce-page table.shop_table .product-remove a.remove {
    width: 32px;
    height: 32px;
    line-height: 32px !important;
    border-radius: 50%;
    background: var(--eafps-parme-tres-clair) !important;
    color: var(--eafps-marine) !important;
    font-size: 18px !important;
    transition: background .15s ease, color .15s ease;
    border: 1px solid var(--eafps-parme-clair);
}
.woocommerce table.shop_table .product-remove a.remove:hover,
.woocommerce-page table.shop_table .product-remove a.remove:hover {
    background: var(--eafps-turquoise) !important;
    color: #FFF !important;
    border-color: var(--eafps-turquoise);
}

/* Cart totals box. */
.woocommerce .cart_totals,
.woocommerce-page .cart_totals {
    background: var(--eafps-parme-tres-clair);
    border: 1px solid var(--eafps-parme-clair);
    border-radius: var(--eafps-radius-card);
    padding: 24px;
}
.woocommerce .cart_totals h2,
.woocommerce-page .cart_totals h2 {
    font-family: var(--eafps-font-serif) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--eafps-marine);
    margin: 0 0 18px !important;
}
.woocommerce .cart_totals table.shop_table,
.woocommerce-page .cart_totals table.shop_table {
    background: #FFF;
    box-shadow: none;
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-page .cart_totals .order-total .amount {
    color: var(--eafps-turquoise-dark) !important;
    font-weight: 700;
    font-size: 20px;
}

/* Coupon row. */
.woocommerce .coupon,
.woocommerce-page .coupon {
    display: flex;
    gap: 10px;
    align-items: center;
}
.woocommerce .coupon input[type="text"],
.woocommerce-page .coupon input[type="text"] {
    background: #FFF !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 15px !important;
    color: var(--eafps-marine) !important;
    min-width: 220px;
}

/* Empty cart / return links. */
.woocommerce .return-to-shop .button,
.woocommerce-page .return-to-shop .button,
.woocommerce .cart-empty + p .button {
    background: var(--eafps-pill-bg) !important;
}

/* ── 6. Checkout ──────────────────────────────────────────────────────── */
.woocommerce form.checkout h3,
.woocommerce-page form.checkout h3,
.woocommerce-checkout h3#order_review_heading {
    font-family: var(--eafps-font-serif) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--eafps-marine);
    margin: 0 0 18px;
    border-bottom: 1px solid var(--eafps-parme-clair);
    padding-bottom: 10px;
}

.woocommerce-checkout #payment,
.woocommerce-page #payment {
    background: var(--eafps-parme-tres-clair) !important;
    border: 1px solid var(--eafps-parme-clair) !important;
    border-radius: var(--eafps-radius-card) !important;
    padding: 24px !important;
}
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-page #payment ul.payment_methods {
    border-bottom: 1px solid var(--eafps-parme-clair) !important;
    padding: 0 0 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-page #payment ul.payment_methods li {
    background: #FFF;
    border: 1px solid var(--eafps-parme-clair);
    border-radius: var(--eafps-radius-field);
    padding: 12px 14px;
    margin-bottom: 8px;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-page #payment ul.payment_methods li label {
    font-family: var(--eafps-font-sans) !important;
    color: var(--eafps-marine) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.woocommerce-checkout #payment div.payment_box,
.woocommerce-page #payment div.payment_box {
    background: var(--eafps-parme-tres-clair) !important;
    border-radius: var(--eafps-radius-field) !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans);
    font-size: 14px;
    margin-top: 10px !important;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-page #payment div.payment_box::before {
    border-bottom-color: var(--eafps-parme-tres-clair) !important;
}
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-page #payment .form-row.place-order {
    border-top: 1px solid var(--eafps-parme-clair) !important;
    padding-top: 18px !important;
    margin-top: 18px !important;
}

/* Checkout login / coupon info banners. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    border-radius: var(--eafps-radius-block) !important;
    border-top: 0 !important;
    padding: 14px 18px !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    box-shadow: var(--eafps-shadow-card);
}
.woocommerce-info {
    background: var(--eafps-parme-tres-clair) !important;
    color: var(--eafps-marine) !important;
}
.woocommerce-info::before {
    color: var(--eafps-turquoise-dark) !important;
}
.woocommerce-message {
    background: var(--eafps-procedure-bg) !important;
    color: var(--eafps-procedure-fg) !important;
}
.woocommerce-message::before {
    color: var(--eafps-procedure-fg) !important;
}
.woocommerce-error {
    background: #FDECEC !important;
    color: #9B1C1C !important;
}

/* ── 7. My account ────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-page.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li,
.woocommerce-page.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--eafps-parme-clair);
    margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-page.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 0 !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-page.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-page.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--eafps-turquoise-dark) !important;
}

/* ── 8. Notices (cart, account, checkout-wide) ────────────────────────── */
.woocommerce-notices-wrapper {
    margin-bottom: 18px;
}

/* ── 9. WC Blocks — Cart & Checkout (Gutenberg) ───────────────────────── */
/* Le Cart Block et le Checkout Block utilisent des classes `.wc-block-components-*`
   complètement différentes du form classique. Sans override dédié, les champs
   gardent leur look "stock" (labels flottants qui se chevauchent avec la valeur,
   bordures grises, boutons WordPress par défaut). On aplatit les labels flottants
   en labels statiques top-aligned (cohérent avec eafps_videos / forms-global) et
   on rebascule tous les inputs sur les tokens charter. */

/* 9.1 — Aplatir les labels flottants en labels statiques.
   On force le label en position normale (static) et on enlève le padding-top que
   WC ajoute pour faire de la place au label flottant. Le label apparaît donc
   au-dessus du champ, comme dans le reste du site. */
.wc-block-components-text-input,
.wc-block-components-combobox,
.wc-block-components-select {
    padding-top: 0 !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label.wc-block-components-select__label {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
}

/* 9.2 — Inputs, comboboxes (Country/State), selects. */
.wc-block-components-text-input input.wc-block-components-text-input__input,
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__suggestions-container input,
.wc-block-components-combobox input.components-form-token-field__input,
.wc-block-components-select .wc-block-components-select__select {
    background: #FFF !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    padding: 0 16px !important;
    height: 48px !important;
    min-height: 48px !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    transition: border-color .15s ease !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select .wc-block-components-select__select:focus {
    border-color: var(--eafps-turquoise) !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* Placeholders cohérents (typo Inter, marine atténué). */
.wc-block-components-text-input input::placeholder,
.wc-block-components-combobox input::placeholder {
    color: var(--eafps-marine) !important;
    opacity: .55 !important;
    font-weight: 300 !important;
}

/* 9.3 — Combobox / Select chevron (Country/Region, State/County).
   Le SVG de la flèche par défaut est cassé visuellement quand le label est aplati ;
   on le remplace par la même icône turquoise que dans eafps_videos. */
.wc-block-components-combobox .components-combobox-control,
.wc-block-components-select {
    position: relative;
}
.wc-block-components-combobox::after,
.wc-block-components-select::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 20px;
    width: 14px;
    height: 7px;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7' fill='none'><path d='M12.9144 0.184L7.44885 5.56317C7.32959 5.68114 7.16862 5.74731 7.00087 5.74731C6.83312 5.74731 6.67214 5.68114 6.55289 5.56317L1.08615 0.185153C0.966155 0.0672388 0.804652 0.00116707 0.636419 0.00116707C0.468186 0.00116707 0.306682 0.0672388 0.18669 0.185153C0.127602 0.242757 0.0806439 0.311604 0.0485811 0.387639C0.0165183 0.463674 0 0.545358 0 0.627877C0 0.710396 0.0165183 0.792079 0.0485811 0.868115C0.0806439 0.94415 0.127602 1.013 0.18669 1.0706L5.6511 6.44861C6.01102 6.80201 6.49529 7 6.9997 7C7.50412 7 7.98838 6.80201 8.3483 6.44861L13.8127 1.0706C13.872 1.01298 13.9191 0.94406 13.9513 0.867917C13.9834 0.791773 14 0.709953 14 0.627294C14 0.544635 13.9834 0.462814 13.9513 0.386671C13.9191 0.310528 13.872 0.241608 13.8127 0.183987C13.6927 0.0660723 13.5312 0 13.363 0C13.1947 0 13.0332 0.0660723 12.9133 0.183987' fill='%2308AEC0'/></svg>") no-repeat center / contain;
}
/* Masque les SVG natifs du chevron WC pour éviter le doublon. */
.wc-block-components-combobox .components-combobox-control svg,
.wc-block-components-select .wc-block-components-select__select + svg {
    display: none !important;
}
/* Reserve room on the right side of selects/comboboxes for our chevron. */
.wc-block-components-combobox input.components-form-token-field__input,
.wc-block-components-select .wc-block-components-select__select {
    padding-right: 38px !important;
}

/* 9.4 — Suggestions dropdown (Country autocomplete). */
.components-form-token-field__suggestions-list {
    background: #FFF !important;
    border: 1px solid var(--eafps-contour-champs) !important;
    border-radius: var(--eafps-radius-field) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 6px 0 !important;
    margin-top: 6px !important;
}
.components-form-token-field__suggestion {
    padding: 10px 16px !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
}
.components-form-token-field__suggestion.is-selected,
.components-form-token-field__suggestion:hover {
    background: var(--eafps-parme-tres-clair) !important;
    color: var(--eafps-marine) !important;
}

/* 9.5 — Checkboxes (terms, save to account, ship to different address). */
.wc-block-components-checkbox .wc-block-components-checkbox__input,
.wc-block-components-checkbox input[type="checkbox"] {
    accent-color: var(--eafps-turquoise) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 1px solid var(--eafps-contour-champs) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__label,
.wc-block-components-checkbox-list__label {
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* 9.6 — Block buttons (Place Order, Proceed to checkout). */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--eafps-pill-bg) !important;
    color: #FFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 16px 32px !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    transition: background-color .15s ease, transform .15s ease !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--eafps-marine-soft) !important;
    color: #FFF !important;
    transform: translateY(-1px);
}
/* "Add a coupon" / "Add apartment, suite, etc." link-style buttons. */
.wc-block-components-button.is-link,
button.wc-block-components-button.is-link {
    color: var(--eafps-turquoise-dark) !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
.wc-block-components-button.is-link:hover {
    color: var(--eafps-turquoise-darker) !important;
}

/* 9.7 — Titles of checkout / cart steps. */
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2,
.wc-block-components-title,
h2.wc-block-components-title {
    font-family: var(--eafps-font-serif) !important;
    color: var(--eafps-marine) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* 9.8 — Order summary / totals (right column of checkout block). */
.wc-block-components-totals-item__value,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount {
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-weight: 600 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: var(--eafps-turquoise-dark) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}
.wc-block-components-panel,
.wc-block-components-totals-wrapper {
    border-color: var(--eafps-parme-clair) !important;
}

/* 9.9 — Cart Block — line items. */
.wc-block-cart-items {
    border: 1px solid var(--eafps-parme-clair) !important;
    border-radius: var(--eafps-radius-card) !important;
    overflow: hidden;
    background: #FFF;
    box-shadow: var(--eafps-shadow-card);
}
.wc-block-cart-items__header {
    background: var(--eafps-parme-tres-clair) !important;
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wc-block-cart-item__product-name,
a.wc-block-components-product-name {
    color: var(--eafps-marine) !important;
    font-family: var(--eafps-font-sans) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
a.wc-block-components-product-name:hover {
    color: var(--eafps-turquoise-dark) !important;
}

/* ── 10. Empty cart cleanup ──────────────────────────────────────────────
   Le template "Empty Cart" du Cart Block embarque par défaut, après le titre
   "Your cart is currently empty!", un séparateur + un h2 "New in store" + une
   grille de produits récents. On masque tout ce qui suit le premier titre. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:first-of-type ~ * {
    display: none !important;
}

/* ── 11. Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 700px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .woocommerce div.product .product_title,
    .woocommerce-page div.product .product_title {
        font-size: 30px;
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price,
    .woocommerce-page div.product p.price,
    .woocommerce-page div.product span.price {
        font-size: 24px;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs {
        gap: 0;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }
    .woocommerce table.shop_table,
    .woocommerce-page table.shop_table {
        box-shadow: none;
        border-radius: 12px !important;
    }
    .woocommerce .cart_totals,
    .woocommerce-page .cart_totals {
        padding: 18px;
    }
}

@media (max-width: 599px) {
    .woocommerce div.product form.cart,
    .woocommerce-page div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }
    .woocommerce div.product form.cart .quantity,
    .woocommerce-page div.product form.cart .quantity {
        width: 100%;
    }
    .woocommerce .quantity .qty,
    .woocommerce-page .quantity .qty {
        width: 100% !important;
    }
    .woocommerce div.product form.cart .button,
    .woocommerce-page div.product form.cart .button {
        width: 100%;
    }
    .woocommerce .coupon,
    .woocommerce-page .coupon {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── 12. Archives produit (boutique + catégories) — vignettes centrées + grille mobile 2 col ──
   Objectif : centrer le contenu des vignettes (image, titre, prix, bouton) et limiter la
   grille à 2 colonnes maximum sur mobile/tablette.

   NB scope : initialement scopé à `body.tax-product_cat`, mais la page catégorie de ce
   site ne porte PAS cette classe → les règles ne s'appliquaient pas (d'où l'absence de
   centrage et le débordement du contenu, la grille restant en 3 colonnes serrées sur
   mobile). On s'aligne donc sur le scope de la section 4 (`body.woocommerce` /
   `body.woocommerce-page`), qui, lui, fonctionne sur ces archives. `:not(.single-product)`
   exclut la fiche produit, où le bloc related est déjà traité en section 13. */

/* 12.1 — Centrage horizontal du contenu des cartes.
   La section 4.2 pose `display: flex; flex-direction: column` sur les `li` mais laisse
   `align-items: stretch` (défaut). On bascule en `center` + `text-align: center` pour
   centrer image, titre, prix et bouton. S'applique aussi aux tuiles de sous-catégorie
   (`li.product-category`, cf. wc-template-functions.php:536). */
body.woocommerce:not(.single-product) ul.products li.product,
body.woocommerce-page:not(.single-product) ul.products li.product,
body.woocommerce:not(.single-product) ul.products li.product-category,
body.woocommerce-page:not(.single-product) ul.products li.product-category {
    align-items: center !important;
    text-align: center !important;
}

/* 12.2 — Image centrée.
   Le lien-image (section 4.3, `order: 1`) reste pleine largeur de la carte ; l'image
   est centrée à l'intérieur (utile quand elle est plus étroite que la carte). On
   réécrit la marge `margin: 0 0 16px !important` de la section 4 en `0 auto 16px`. */
body.woocommerce:not(.single-product) ul.products li.product > .product-wrap > a:first-child,
body.woocommerce-page:not(.single-product) ul.products li.product > .product-wrap > a:first-child {
    width: 100%;
    text-align: center;
}
body.woocommerce:not(.single-product) ul.products li.product a img,
body.woocommerce-page:not(.single-product) ul.products li.product a img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 16px !important;
}

/* 12.3 — Grille : 2 colonnes maximum dès qu'on passe sous le desktop.
   La règle desktop de la section 4.1 force `grid-template-columns: repeat(3, …)` en
   !important avec une spécificité (0,4,2). Les media queries n'ajoutent pas de
   spécificité : on reproduit la même spécificité (body + .woocommerce +
   :not(.single-product) + ul.products + [attribut] = (0,4,2)) en !important, et comme
   cette règle est déclarée plus loin dans le fichier, elle l'emporte sous 1024px.
   (C'est aussi ce qui répare la section 11, restée sans effet car non !important.) */
@media (max-width: 1024px) {
    body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns],
    body.woocommerce:not(.single-product) ul.products[data-product-style],
    body.woocommerce-page:not(.single-product) ul.products[data-n-desktop-columns],
    body.woocommerce-page:not(.single-product) ul.products[data-product-style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}
@media (max-width: 600px) {
    body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns],
    body.woocommerce:not(.single-product) ul.products[data-product-style],
    body.woocommerce-page:not(.single-product) ul.products[data-n-desktop-columns],
    body.woocommerce-page:not(.single-product) ul.products[data-product-style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    body.woocommerce:not(.single-product) ul.products li.product,
    body.woocommerce-page:not(.single-product) ul.products li.product,
    body.woocommerce:not(.single-product) ul.products li.product-category,
    body.woocommerce-page:not(.single-product) ul.products li.product-category {
        padding: 12px !important;
    }
}

/* ── 13. Fiche produit — bloc "Produits liés" / "Upsells" calé sur la page catégorie ──
   Demande : sur la fiche produit, donner aux related/upsells le même style carte que les
   vignettes de catégorie (carte centrée, bouton sous les infos) pour la cohérence.

   Rappel : la section 4 (grille + carte) est en `:not(.single-product)`, donc elle ne
   touche PAS le bloc related. En revanche les sections 4.3/4.4/4.5 (aplatissement du
   `.product-wrap`, bouton pill ancré en bas, titre/image/prix) n'ont pas ce filtre et
   s'appliquent déjà ici. Il suffit donc de : (a) passer le conteneur en grid, (b) passer
   chaque carte en `flex-direction: column` — ce qui active le `margin-top: auto` du
   bouton défini en 4.3 — et (c) reprendre le style carte + le centrage de la section 12. */

/* 13.1 — Conteneur en grille (3 col desktop), comme les archives catégorie.
   Salient pose `display: flex; width: 100%` sur `ul.products[data-product-style]…`
   (spécificité (0,4,1)). On reprend (0,4,2) + !important pour basculer en grid. */
body.single-product .woocommerce .related ul.products,
body.single-product .woocommerce .upsells ul.products,
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
}
/* Neutralise le clearfix ::before/::after de WC (cellules grid fantômes). */
body.single-product .related ul.products::before,
body.single-product .related ul.products::after,
body.single-product .upsells ul.products::before,
body.single-product .upsells ul.products::after {
    display: none !important;
    content: none !important;
}

/* 13.2 — Cartes : style carte (section 4.2) + centrage (section 12) + passage en
   flex column (active le bouton ancré en bas via la section 4.3).
   Spécificité (0,4,3) > la règle Salient `.woocommerce .products.related .product
   { width: 48% !important }` (0,4,0) → on l'emporte. */
body.single-product .related ul.products li.product,
body.single-product .upsells ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    float: none !important;
    clear: none !important;
    background: #FFF !important;
    border: 1px solid var(--eafps-parme-clair) !important;
    border-radius: var(--eafps-radius-card) !important;
    box-shadow: var(--eafps-shadow-card) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
body.single-product .related ul.products li.product:hover,
body.single-product .upsells ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--eafps-shadow-card-hover) !important;
}

/* 13.3 — Image centrée (cohérent avec section 12.2). */
body.single-product .related ul.products li.product > .product-wrap > a:first-child,
body.single-product .upsells ul.products li.product > .product-wrap > a:first-child {
    width: 100%;
    text-align: center;
}
body.single-product .related ul.products li.product a img,
body.single-product .upsells ul.products li.product a img {
    display: block;
    margin: 0 auto 16px !important;
}

/* 13.4 — Responsive : 2 colonnes max sous 1024px (cohérent avec la catégorie). */
@media (max-width: 1024px) {
    body.single-product .woocommerce .related ul.products,
    body.single-product .woocommerce .upsells ul.products,
    body.single-product .related.products ul.products,
    body.single-product .upsells.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}
@media (max-width: 600px) {
    body.single-product .woocommerce .related ul.products,
    body.single-product .woocommerce .upsells ul.products,
    body.single-product .related.products ul.products,
    body.single-product .upsells.products ul.products {
        gap: 12px !important;
    }
    body.single-product .related ul.products li.product,
    body.single-product .upsells ul.products li.product {
        padding: 12px !important;
    }
}

/* ── 14. Ajustements ciblés — panier épuré + alignement des radios checkout ──────── */

/* 14.1 — Page panier : design simplifié, sans bordure ni ombre autour du tableau.
   Couvre le Cart Block (`.wc-block-cart-items`, cf. section 9.9) ET le tableau classique
   (`table.shop_table`, cf. section 5). Scopé à `.woocommerce-cart` pour ne pas toucher
   le récap de commande du checkout ni l'historique du compte. */
.woocommerce-cart .wc-block-cart-items,
.woocommerce-cart table.shop_table {
    border: 0 !important;
    box-shadow: none !important;
}
/* Entêtes de colonnes (« Product », « Total ») : on retire le fond lavande
   (posé en section 9.9 pour le Cart Block et en section 5 pour le tableau classique). */
.woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart table.shop_table thead th {
    background: transparent !important;
}

/* 14.2 — Checkout : bouton radio du MODE DE LIVRAISON collé à gauche et aligné sur le
   titre, avec le contenu (titre + prix) indenté pour laisser la place au radio.

   Mécanique : le radio passe en `left: 0` (bord gauche de la gouttière) + `top: 23px`
   (calé sur la ligne du titre). On supprime la gouttière de padding par défaut du
   `__option` (`padding-left: 0`) et on indente le contenu via le `__option-layout`
   (`margin-left: 50px`) — un seul mécanisme d'offset, donc pas d'empilement.

   IMPORTANT : tout est limité au bloc « frais de port »
   (`.wc-block-components-shipping-rates-control__package`). Le `__option-layout` est un
   conteneur GÉNÉRIQUE rendu aussi par le moyen de paiement : appliqué globalement, le
   `margin-left: 50px` viendrait s'ajouter au padding propre du bloc Stripe (~98px) et
   re-décalerait le titre « Credit / Debit Card ». On reste donc scopé à la livraison. */
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control .wc-block-components-radio-control__input {
    left: 0 !important;
    top: 23px !important;
    transform: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option {
    padding-left: 0 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 90% !important;
    margin-left: 50px !important;
}
/* Garde-fou mobile : évite un débordement horizontal (90% + 50px peut dépasser 100%). */
@media (max-width: 600px) {
    .wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option-layout {
        width: auto !important;
        margin-left: 40px !important;
    }
}