/* =========================================================================
   WooCommerce — Page panier (bloc Cart natif)
   Couche thème au-dessus du bloc « woocommerce/cart » (moteur natif conservé).
   Chargée uniquement sur is_cart() (inc/woo-conf.php). Scopée `.woocommerce-cart`
   (classe body) par sécurité.
   Étape 1 — squelette : titre, 2 colonnes (60/40), récap en boîte crème, sticky.
   ========================================================================= */

/* ── Titre de page ───────────────────────────────────────────────────────── */
.woocommerce-cart .wp-block-post-title {
    margin-block: var(--wp--preset--spacing--s);
    max-width: var(--wp--style--global--wide-size);
}

/* ── 2 colonnes : produits (≈60%) / récap (≈40%) ─────────────────────────────
   Le bloc filled-cart est déjà en flex-wrap. On fixe les proportions maquette
   et on aligne en haut (indispensable pour le sticky de la colonne droite). */
.woocommerce-cart .wp-block-woocommerce-filled-cart-block {
    gap: var(--wp--preset--spacing--xxl);
    align-items: flex-start;
}

.woocommerce-cart .wp-block-woocommerce-cart-items-block {
    flex: 1.5 1 0%;
    max-width: none;
    width: auto;
}

/* Gouttière entre colonnes gérée par `gap` du filled-cart → on retire le
   padding-right que WooCommerce ajoute à la colonne principale. */
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main {
    padding-right: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart-totals-block {
    flex: 1 1 0%;
    max-width: none;
    width: auto;
}

/* ── Récapitulatif : boîte crème collée en haut, sticky au scroll ────────────
   Sécurité « écran court » : max-height + overflow interne → si le récap dépasse
   la hauteur d'écran, la boîte défile en interne et le bouton Commander reste
   toujours atteignable (jamais poussé hors de portée). */
.woocommerce-cart .wp-block-woocommerce-cart-totals-block {
    position: sticky;
    top: var(--wp--preset--spacing--l);
    max-height: calc(100dvh - var(--wp--preset--spacing--l) * 2);
    overflow-y: auto;
    padding: var(--wp--preset--spacing--m);
    background: var(--wp--custom--color--creme-principal);
    border: 1px solid var(--wp--custom--color--gris-bordure);
}

/* ═════════════════════════════════════════════════════════════════════════
   Étape 2 — Lignes produits (table native .wc-block-cart-items)
   ═════════════════════════════════════════════════════════════════════════ */

/* En-tête de tableau : petite ligne overline, filet bas (comme la maquette). */
.woocommerce-cart .wc-block-cart-items__header th {
    padding-bottom: var(--wp--preset--spacing--s);
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: var(--wp--custom--font-weight--regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--quinary);
    &.wc-block-cart-items__header-image{
        text-align: left;
    }
    &.wc-block-cart-items__header-total{
        text-align: right;
        padding-right: 0;
    }
}



/* Rangée produit : filet bas, respiration verticale. */
.woocommerce-cart .wc-block-cart-items__row td {
    padding-block: var(--wp--preset--spacing--l);
}

.wc-block-cart__main .wc-block-cart-items{
    margin-bottom: var(--wp--preset--spacing--xxl);
}

.wc-block-cart__main .wc-block-cart-items td:last-child{
    padding-right: 0;
}

.wc-block-cart__main .wc-block-cart-items td{
    padding-left: 0;
}

/* Espace entre l'image et les infos produit (la règle ci-dessus met tous les
   td à padding-left:0 → on réintroduit une gouttière sur la cellule produit). */
.wc-block-cart__main .wc-block-cart-items td.wc-block-cart-item__product {
    padding-left: var(--wp--preset--spacing--l);
}

/* Image : carrée, remplit sa cellule (120px), coins nets. */
.woocommerce-cart .wc-block-cart-item__image {
    width: 120px;
}

.woocommerce-cart .wc-block-cart-item__image img {
    width: 120px;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Titre : Inter Tight, sombre (pas doré), plus grand, sans soulignement.
   Spécificité calquée sur WC (`table… __row .product-name`, 0,3,1) + scope body
   → 0,4,1 pour imposer notre font-size (sinon WC force `--font-size--small`). */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: var(--wp--custom--font-weight--medium);
    line-height: var(--wp--custom--line-height--tight, 1.2);
    text-decoration: none;
}

.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
    color: var(--wp--preset--color--secondary);
}

/* Prix unitaire sous le titre : masqué (07/07/2026). La maquette n'affiche que
   le total de ligne à droite, et ce montant React est calculé sous-total ÷ qté :
   avec une option « forfait » il devient un hybride trompeur (34,90 + 1,50/2 =
   « 35,65 € ») impossible à corriger côté données. Les options détaillent leurs
   prix dans les métas de ligne, le total de ligne inclut tout.
   Sélecteur calqué sur WC (0,4,1) — cf. gotcha spécificité en tête de fichier. */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
    display: none;
}

/* Extrait de description (lorem sur les produits simples) : masqué — la maquette
   n'affiche pas de description ici (seul le format/variante, absent en simple). */
.woocommerce-cart .wc-block-components-product-metadata__description {
    display: none;
}

/* Bloc quantité + retirer : alignés sur une même ligne. */
.woocommerce-cart .wc-block-cart-item__quantity {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--m);
    margin-top: var(--wp--preset--spacing--s);
}

/* Sélecteur de quantité : encadré net, largeur fixe pour que le « + » ne
   déborde pas la bordure (le padding 0.7em élargit les boutons). */
.woocommerce-cart .wc-block-components-quantity-selector {
    width: 125px;
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: 0;
}

.woocommerce-cart .wc-block-components-quantity-selector__input,
.woocommerce-cart .wc-block-components-quantity-selector__button {
    font-family: var(--wp--preset--font-family--tertiary);
    color: var(--wp--preset--color--primary);
    padding: 0.7em;
}

.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not([disabled]) {
    color: var(--wp--preset--color--secondary);
}

/* Variations / métadonnées produit (attributs de variation) : JetBrains Mono. */
.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wc-block-components-product-details {
    font-family: var(--wp--preset--font-family--tertiary);
}

/* Métas de ligne (options produit + attribut de variation) : une méta par
   ligne, libellé à gauche / valeur (prix) alignée à droite. Markup : au rendu
   SSR chaque méta a son div .product-details ; après re-rendu React, les
   options partagent UN div avec des séparateurs « / » (span aria-hidden) —
   le flex par méta redonne une ligne par option dans les deux cas. */
.woocommerce-cart .wc-block-components-product-details {
    margin-bottom: 0;
}

.woocommerce-cart .wc-block-components-product-details > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--s);
    padding-block: 2px;
}

/* Séparateur « / » injecté par React entre deux métas : superflu en une-par-ligne. */
.woocommerce-cart .wc-block-components-product-details > span > span[aria-hidden="true"] {
    display: none;
}

.woocommerce-cart .wc-block-components-product-details__name {
    font-weight: var(--wp--custom--font-weight--regular);
    color: var(--wp--preset--color--quinary);
}

.woocommerce-cart .wc-block-components-product-details__value {
    white-space: nowrap;
    color: var(--wp--preset--color--primary);
}

/* « Retirer » : lien texte (l'icône corbeille native est masquée), gris uppercase.
   WC force `text-transform:none` + `color/weight:inherit` via un sélecteur (0,4,1)
   `table… __row .__quantity .__remove-link` → on ajoute `.__quantity` + scope body
   pour atteindre 0,5,1 et gagner. */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: var(--wp--custom--font-weight--medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--quinary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{
    gap:var(--wp--preset--spacing--m);
}
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
    color: var(--wp--preset--color--secondary);
}

.woocommerce-cart .wc-block-cart-item__remove-link svg {
    display: none;
}

.woocommerce-cart .wc-block-cart-item__remove-link::after {
    content: "Retirer";
}

/* Total de ligne (colonne droite) : montant en xl medium, sombre. */
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: var(--wp--custom--font-weight--medium);
    color: var(--wp--preset--color--primary);
}

/* ═════════════════════════════════════════════════════════════════════════
   Étape 3 — Récapitulatif (montants)
   ═════════════════════════════════════════════════════════════════════════ */

/* Montants des lignes (sous-total, livraison…) : medium, un peu plus grands. */
.woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-item__value {
    font-weight: var(--wp--custom--font-weight--medium);
    font-size: var(--wp--preset--font-size--m);
}

/* Total final : nettement plus gros. */
.woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--wp--preset--font-size--xxl);
}

/* ═════════════════════════════════════════════════════════════════════════
   Étape 4 — Récapitulatif : titre, libellé total, TVA, boutons
   ═════════════════════════════════════════════════════════════════════════ */

/* Titre natif de la boîte récap (bloc cart-order-summary-heading, contenu changé
   en « Récapitulatif » côté page) : personnalisé en Fraunces xxl. WC le masque
   (`display:none`) sous un point de rupture → on le force visible (spécificité
   0,2,0 > la règle WC 0,1,0, y compris dans sa media query). */
.woocommerce-cart .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
    display: block;
    padding: 0;
    margin-bottom: var(--wp--preset--spacing--m);
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--xxl);
    font-weight: var(--wp--custom--font-weight--regular);
    line-height: var(--wp--custom--line-height--tight, 1.2);
    letter-spacing: normal;
    text-transform: none;
    color: var(--wp--preset--color--primary);
}


/* Libellé « Total estimé » de la ligne finale : en capitales. */
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    text-transform: uppercase;
}

/* Ligne « inclut X € de TVA » sous le total : alignée à droite, sous le montant,
   en gris. */
.woocommerce-cart .wc-block-components-totals-footer-item-tax {
    text-align: right;
    color: var(--wp--preset--color--quinary);
    justify-content: flex-end;
    font-family: var(--wp--preset--font-family--tertiary);
    color: var(--wp--custom--color--gris-disabled);
}

/* Bouton du code promo — style « Bouton contour » (is-style-button-secondary) :
   transparent, bordure et texte sombres ; hover → fond sombre, texte clair.
   (Le libellé natif « Appliquer » est conservé : le bouton est rendu côté client
   par WooCommerce, pas de point d'accroche PHP propre pour le passer à « OK ».)
   `.wc-block-components-button` ajouté au sélecteur → 0,3,0 pour battre la règle WC
   `.wc-block-components-button:not(.is-link).contained` (chargé avant). */
.woocommerce-cart .wc-block-components-totals-coupon__button.wc-block-components-button {
    background: transparent;
    color: var(--wp--preset--color--primary);
    border: 1.5px solid var(--wp--preset--color--primary);
    border-radius: 0;
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce-cart .wc-block-components-totals-coupon__button.wc-block-components-button:hover,
.woocommerce-cart .wc-block-components-totals-coupon__button.wc-block-components-button:focus {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--tertiary);
    border-color: var(--wp--preset--color--primary);
}

/* Bouton « Commander » — même comportement que le bouton principal du thème
   (`.wp-block-button__link`) : fond doré, hover doré foncé + soulèvement + ombre.
   `.wc-block-components-button` ajouté → 0,3,0 pour battre la règle WC. */
.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button {
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--primary);
    border: 1.5px solid var(--wp--preset--color--secondary);
    border-radius: 0;
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button:hover,
.woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button:focus {
    background: var(--wp--custom--color--or-hover);
    border-color: var(--wp--custom--color--or-hover);
    color: var(--wp--preset--color--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(193, 154, 107, .45);
}

/* ═════════════════════════════════════════════════════════════════════════
   Étape 5 — Réassurance (compo reassurance-panier-cdm, 2×2 dans le récap)
   ═════════════════════════════════════════════════════════════════════════ */

.woocommerce-cart .lame-reassurance-panier-cdm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--m);
    margin-top: var(--wp--preset--spacing--l);
    padding-top: var(--wp--preset--spacing--l);
    border-top: 1px solid var(--wp--custom--color--gris-bordure);
}

.woocommerce-cart .lame-reassurance-panier-cdm__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--xs);
}

.woocommerce-cart .lame-reassurance-panier-cdm__icon {
    flex-shrink: 0;
    margin: 0;
    line-height: 0;
}

.woocommerce-cart .lame-reassurance-panier-cdm__icon img {
    display: block;
    width: 22px;
    height: 22px;
}

.woocommerce-cart .lame-reassurance-panier-cdm__text {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xxxs);
}

.woocommerce-cart .lame-reassurance-panier-cdm__title {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: var(--wp--custom--font-weight--semibold);
    line-height: 1.3;
    color: var(--wp--preset--color--primary);
    margin: 0;
}

.woocommerce-cart .lame-reassurance-panier-cdm__subtitle {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: var(--wp--custom--font-weight--regular);
    line-height: 1.4;
    color: var(--wp--preset--color--quinary);
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   Étape 6 — Goodies & accessoires (compo panier-goodies-cdm, sous les articles)
   Tuile identique aux produits associés (stylée par product-card.css, chargé sur
   le panier). Ici : seulement l'espacement de section + la grille 3 colonnes.
   ═════════════════════════════════════════════════════════════════════════ */

/* Espace au-dessus de la section (la règle globale `:where(.wp-block-group)`
   force margin-top:0 !important → il faut !important pour repasser devant). */
.woocommerce-cart .lame-goodies-panier-cdm {
    margin-top: var(--wp--preset--spacing--xxl) !important;
}

.woocommerce-cart .lame-goodies-panier-cdm__head {
    margin-bottom: var(--wp--preset--spacing--l);
}

/* Titre des tuiles goodies : sans marge verticale et en xl (plus compact que le
   xxl des autres tuiles, adapté à ces petites tuiles). */
.woocommerce-cart .lame-goodies-panier-cdm .lame-produits-associes-cdm__name {
    margin-block: 0;
    /* !important pour battre la classe utilitaire `has-xxl-font-size` (générée
       par WP avec !important). */
    font-size: var(--wp--preset--font-size--xl) !important;
}

/* Grille : même mécanique flex que l'archive (largeur des <li> pilotée en
   tenant compte du gap ; `.is-flex-container` doublée pour battre Woo). */
.woocommerce-cart .lame-goodies-panier-cdm__grid .wc-block-product-template {
    gap: var(--wp--preset--spacing--m);
}

.woocommerce-cart .lame-goodies-panier-cdm__grid .wc-block-product-template > li {
    box-sizing: border-box;
}

.woocommerce-cart .lame-goodies-panier-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
    width: calc((100% - var(--wp--preset--spacing--m) * 2) / 3);
}

/* 783–992px : le panier est encore en 2 colonnes → les goodies sont dans la
   colonne gauche étroite ; 3 tuiles seraient trop petites → 2 colonnes. */
@media (min-width: 783px) and (max-width: 992px) {
    .woocommerce-cart .lame-goodies-panier-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
        width: calc((99% - var(--wp--preset--spacing--m)) / 2);
    }
}

/* ── Responsive : colonnes empilées pleine largeur ≤ 782px ───────────────────
   Sous le point de rupture WooCommerce, le filled-cart passe en colonne. Les
   flex-basis 0% ne suffisent pas (les blocs ne remplissent pas la ligne) → on
   force 100%. Le récap perd son sticky et sa hauteur limitée (plus de colonne
   à suivre au scroll). */
@media (max-width: 782px) {
    .woocommerce-cart .wp-block-woocommerce-cart-items-block,
    .woocommerce-cart .wp-block-woocommerce-cart-totals-block {
        flex-basis: 100%;
        width: 100%;
        max-width: none;
    }

    .woocommerce-cart .wp-block-woocommerce-cart-totals-block {
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* Sous ce point de rupture, WooCommerce passe la rangée en grid mais réserve
       un rail image ~80px : notre image 120px déborde sur la colonne détails.
       On redéfinit une grille 3 colonnes explicite (image auto / détails / total)
       en dépassant la spécificité WC (`table… __row`, 0,2,1) → 0,3,1. */
    .woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
        grid-column: 1;
        grid-row: 1;
    }

    .woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
        grid-column: 2;
        grid-row: 1;
    }

    .woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
        grid-column: 3;
        grid-row: 1;
    }
}

/* ── Très petits écrans (≤ 480px) : image réduite (90px) ─────────────────────
   Le rail image de la grille est en `auto` → il suit la taille de l'image. */
@media (max-width: 480px) {
    .woocommerce-cart .wc-block-cart-item__image,
    .woocommerce-cart .wc-block-cart-item__image img {
        width: 90px;
    }
}

/* Goodies : 2 colonnes ≤ 600px (3 tuiles trop serrées en dessous). */
@media (max-width: 600px) {
    .woocommerce-cart .lame-goodies-panier-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
        width: calc((99% - var(--wp--preset--spacing--m)) / 2);
    }
}

/* Goodies : 1 colonne ≤ 479px. En 2 colonnes la tuile tombe sous ~165px : l'image
   carrée devient une vignette, le titre passe sur 3 lignes et le prix se retrouve
   collé au bouton « + ». Pleine largeur, la tuile reprend la lisibilité des autres
   grilles du site. */
@media (max-width: 479px) {
    .woocommerce-cart .lame-goodies-panier-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
        width: 100%;
    }
}

/* Produit variable dans les goodies : WooCommerce préfixe le prix d'un « À partir de »
   (`wc_get_price_html_from_text()`). Ce préfixe est un nœud texte NU dans le conteneur
   de prix — aucun élément à cibler — d'où la font-size posée sur le CONTENEUR.
   Le montant, lui, ne bouge pas : sa règle dédiée dans product-card.css
   (`.wc-block-product … .woocommerce-Price-amount.amount`, 0,5,0, xl) est plus spécifique.
   Bureau uniquement : la tuile y est contrainte (~229px dans la colonne gauche du panier),
   alors qu'en mobile elle occupe toute la largeur et le préfixe passe très bien. */
@media (min-width: 783px) {
    .woocommerce-cart .lame-goodies-panier-cdm__grid .lame-produits-associes-cdm__foot .wc-block-components-product-price {
        font-size: var(--wp--preset--font-size--xs);
    }
}

/* Bouton « + » en mode ajout direct (produits simples sans option, cf.
   `dridri_loop_button_ajoute_directement()` dans inc/woo-conf.php) : le bloc
   natif `product-button` rend alors, EN PLUS du bouton, un lien « Voir le
   panier » (`get_view_cart_html()`, affiché après l'ajout dès qu'une page
   panier existe). Sur la page panier elle-même il ne mène nulle part → retiré
   du flux ET de l'arbre d'accessibilité (`display:none`, pas `visibility`).
   Le libellé du bouton (« Ajouter au panier » / « 1 dans le panier », rendu
   dans un <span> par l'API Interactivity) est déjà masqué par product-card.css
   (`font-size:0; color:transparent`), qui ne laisse voir que l'icône « + ». */
.woocommerce-cart .lame-goodies-panier-cdm .lame-produits-associes-cdm__add .added_to_cart,
.woocommerce-cart .lame-goodies-panier-cdm .lame-produits-associes-cdm__add > span:has(> .added_to_cart) {
    display: none;
}

/* ═════════════════════════════════════════════════════════════════════════
   PANIER VIDE — pattern `panier-vide-cdm` (référencé dans le empty-cart-block)
   Message d'invitation centré + CTA boutique, puis grille « derniers arrivages »
   (tuile partagée `lame-produits-associes-cdm__*`, stylée par product-card.css).
   ═════════════════════════════════════════════════════════════════════════ */

/* Rythme haut de la section (la règle globale `:where(.wp-block-group)` force
   margin-top:0 !important → !important requis pour repasser devant). */
.woocommerce-cart .lame-panier-vide-cdm {
    margin-top: var(--wp--preset--spacing--xxl) !important;
}

/* En-tête d'invitation : centré, largeur de lecture limitée. */
.woocommerce-cart .lame-panier-vide-cdm__head {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.woocommerce-cart .lame-panier-vide-cdm__head .is-style-heading-display-cdm {
    margin-block: var(--wp--preset--spacing--s) 0;
}

.woocommerce-cart .lame-panier-vide-cdm__intro {
    margin-block: var(--wp--preset--spacing--m) 0;
}

.woocommerce-cart .lame-panier-vide-cdm__cta {
    margin-top: var(--wp--preset--spacing--l);
}

/* Section « derniers arrivages » : détachée de l'en-tête par un filet + rythme. */
.woocommerce-cart .lame-panier-vide-cdm__products {
    margin-top: var(--wp--preset--spacing--xxxl) !important;
    padding-top: var(--wp--preset--spacing--xl);
    border-top: 1px solid var(--wp--custom--color--gris-bordure);
}

.woocommerce-cart .lame-panier-vide-cdm__productsHead {
    margin-bottom: var(--wp--preset--spacing--l);
    text-align: center;
}

.woocommerce-cart .lame-panier-vide-cdm__productsHead .is-style-heading-display-cdm {
    margin-block: var(--wp--preset--spacing--xs) 0;
}

/* Grille des tuiles — 4 colonnes (même mécanique flex que l'archive : largeur des
   <li> pilotée en tenant compte du gap ; `.is-flex-container` doublée pour battre
   la largeur native Woo ; border-box pour inclure la bordure 1px des tuiles). */
.woocommerce-cart .lame-panier-vide-cdm__grid .wc-block-product-template {
    gap: var(--wp--preset--spacing--m);
}

.woocommerce-cart .lame-panier-vide-cdm__grid .wc-block-product-template > li {
    box-sizing: border-box;
}

/* ≥ 993px : 4 tuiles par ligne */
.woocommerce-cart .lame-panier-vide-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
    width: calc((100% - var(--wp--preset--spacing--m) * 3) / 4);
}

/* 768–992px : 3 tuiles par ligne */
@media (min-width: 768px) and (max-width: 992px) {
    .woocommerce-cart .lame-panier-vide-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
        width: calc((100% - var(--wp--preset--spacing--m) * 2) / 3);
    }
}

/* 600–767px : 2 tuiles par ligne */
@media (min-width: 600px) and (max-width: 767px) {
    .woocommerce-cart .lame-panier-vide-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
        width: calc((99% - var(--wp--preset--spacing--m)) / 2);
    }
}

/* < 600px : 1 tuile par ligne */
@media (max-width: 599.98px) {
    .woocommerce-cart .lame-panier-vide-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
        width: 100%;
    }
}