/* Designer de boucle produit : règles pilotées par --ckwc-loop-*.
   Préfixe `body` + !important pour passer devant le thème (même à chargement
   plus tardif). La grille (colonnes) reste gérée ailleurs : ici on style la carte. */

.woocommerce.woocommerce ul.products li.product {
    background: var(--ckwc-loop-card-bg, #fff) !important;
    border: var(--ckwc-loop-card-bw, 1px) solid var(--ckwc-loop-card-bc, #ececec) !important;
    border-radius: var(--ckwc-loop-card-radius, 8px) !important;
    padding: var(--ckwc-loop-card-pad, 12px) !important;
    box-shadow: var(--ckwc-loop-shadow, none) !important;
    text-align: var(--ckwc-loop-align, center) !important;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

/* Image : plusieurs variantes de sélecteur pour battre le thème sur la largeur. */
.woocommerce.woocommerce ul.products li.product img,
.woocommerce.woocommerce ul.products li.product a img,
.woocommerce.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce.woocommerce ul.products li.product img.wp-post-image {
    display: var(--ckwc-loop-img-display, block) !important;
    width: var(--ckwc-loop-img-w, 100%) !important;
    max-width: var(--ckwc-loop-img-w, 100%) !important;
    height: var(--ckwc-loop-img-h, auto) !important;
    object-fit: var(--ckwc-loop-img-fit, cover) !important;
    background: var(--ckwc-loop-img-bg, #fff) !important;
    border-radius: var(--ckwc-loop-img-radius, 6px) !important;
    margin: var(--ckwc-loop-img-mt, var(--ckwc-loop-gap, 8px)) auto var(--ckwc-loop-img-mb, 0) !important;
}

.woocommerce.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: var(--ckwc-loop-title-display, block) !important;
    color: var(--ckwc-loop-title-color, #1a1a1a) !important;
    font-size: var(--ckwc-loop-title-size, 15px) !important;
    font-weight: var(--ckwc-loop-title-weight, 600) !important;
    line-height: var(--ckwc-loop-title-lh, 1.3) !important;
    letter-spacing: var(--ckwc-loop-title-ls, 0px) !important;
    margin: var(--ckwc-loop-title-mt, var(--ckwc-loop-gap, 8px)) 0 var(--ckwc-loop-title-mb, 0) !important;
    /* woocommerce.css (front uniquement) pose `padding:.5em 0` sur ce titre :
       l'aperçu admin ne charge pas cette feuille → espaces différents back/front.
       Les marges réglables sont la SEULE source d'espacement. */
    padding: 0 !important;
}

.woocommerce.woocommerce ul.products li.product .price {
    display: var(--ckwc-loop-price-display, block) !important;
    color: var(--ckwc-loop-price-color, #1a1a1a) !important;
    font-size: var(--ckwc-loop-price-size, 15px) !important;
    font-weight: var(--ckwc-loop-price-weight, inherit) !important;
    line-height: var(--ckwc-loop-price-lh, 1.3) !important;
    margin: var(--ckwc-loop-price-mt, var(--ckwc-loop-gap, 8px)) 0 var(--ckwc-loop-price-mb, 0) !important;
}

/* Base commune : l'admin et le thème front ont chacun leur line-height ET leur
   police — on fixe les deux pour que le rythme soit LE MÊME. La police est la
   primaire du site (variable CercleKit), à défaut l'héritage local. */
.woocommerce.woocommerce ul.products li.product,
.ckwc-loop-preview.woocommerce ul.products li.product {
    line-height: 1.4;
}
.woocommerce.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce.woocommerce ul.products li.product .price,
.woocommerce.woocommerce ul.products li.product .cercle-marque,
.woocommerce.woocommerce ul.products li.product .cercle-code-article,
.woocommerce.woocommerce ul.products li.product .ckwc-in-cart-badge {
    font-family: var(--ck-font-primary, inherit) !important;
}

.woocommerce.woocommerce ul.products li.product .cercle-code-article {
    display: var(--ckwc-loop-ref-display, inline-block) !important;
    margin: var(--ckwc-loop-ref-mt, 0) 0 var(--ckwc-loop-ref-mb, 0) 6px !important;
    vertical-align: baseline;
    color: var(--ckwc-loop-ref-color, #9aa3ad) !important;
    font-size: var(--ckwc-loop-ref-size, 11px) !important;
    font-weight: var(--ckwc-loop-ref-weight, 600) !important;
    line-height: 1.2 !important;
    text-transform: var(--ckwc-loop-ref-case, uppercase) !important;
    letter-spacing: var(--ckwc-loop-ref-ls, 0px) !important;
}

/* Marque : même langage que le code article, avec SES réglages. */
.woocommerce.woocommerce ul.products li.product .cercle-marque {
    display: var(--ckwc-loop-brand-display, block) !important;
    color: var(--ckwc-loop-brand-color, #9aa3ad) !important;
    font-size: var(--ckwc-loop-brand-size, 11px) !important;
    font-weight: var(--ckwc-loop-brand-weight, 600) !important;
    line-height: 1.2 !important;
    text-transform: var(--ckwc-loop-brand-case, uppercase) !important;
    letter-spacing: var(--ckwc-loop-brand-ls, 0px) !important;
    margin: var(--ckwc-loop-brand-mt, 0) 0 var(--ckwc-loop-brand-mb, 0) !important;
}

.woocommerce.woocommerce ul.products li.product div.quantity,
.woocommerce.woocommerce ul.products li.product .quantity {
    display: var(--ckwc-loop-qty-display, inline-block) !important;
    vertical-align: middle !important;
    margin: var(--ckwc-loop-qty-mt, var(--ckwc-loop-gap, 8px)) 0 var(--ckwc-loop-qty-mb, 0) !important;
}
/* Sélecteur de quantité entièrement réglable (hauteur, largeur, fond, texte,
   bordure, rayon). Cible l'input et son conteneur .qty. */
.woocommerce.woocommerce ul.products li.product .quantity input,
.woocommerce.woocommerce ul.products li.product .quantity .qty {
    height: var(--ckwc-loop-qty-h, auto) !important;
    width: var(--ckwc-loop-qty-w, auto) !important;
    background: var(--ckwc-loop-qty-bg, #fff) !important;
    color: var(--ckwc-loop-qty-color, #1a1a1a) !important;
    border: var(--ckwc-loop-qty-bw, 1px) solid var(--ckwc-loop-qty-bc, #ddd) !important;
    border-radius: var(--ckwc-loop-qty-radius, 4px) !important;
    font-size: var(--ckwc-loop-qty-fs, 14px) !important;
    /* On neutralise le padding du thème (souvent énorme) qui écrase/masque le chiffre.
       La largeur/hauteur réglées suffisent ; le chiffre est centré. */
    padding: 0 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    text-align: center !important;
}

/* Bouton : on ne gère QUE le placement (marge + affichage/masquage via le toggle).
   Les COULEURS / rayon / animation viennent de CercleKit (aspects « Création › Boutons »,
   cible .woocommerce a.button). On ne surcharge JAMAIS le style du bouton ici, sinon on
   écraserait l'aspect CercleKit. */
.woocommerce.woocommerce ul.products li.product a.button,
.woocommerce.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce.woocommerce ul.products li.product a.cercle-add-to-cart {
    vertical-align: middle;
    margin: var(--ckwc-loop-btn-mt, var(--ckwc-loop-gap, 8px)) 0 var(--ckwc-loop-btn-mb, 0) !important;
}
/* Affichage/masquage via le toggle « Bouton ». Valeur « inline-flex » = identique à
   CercleKit (centrage préservé) ; « none » masque. !important requis pour battre le
   inline-flex!important de CercleKit lors du masquage. */
.woocommerce.woocommerce ul.products li.product a.button,
.woocommerce.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce.woocommerce ul.products li.product a.cercle-add-to-cart {
    display: var(--ckwc-loop-btn-display, inline-flex) !important;
}

/* Rangée « quantité + bouton » : vrai conteneur flex (hooks priorités 8 → 11).
   « gap » = espacement RÉGLABLE entre la quantité et le bouton, indépendant de
   l'espacement général de la carte. « flex-direction » = côte à côte / empilés. */
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart {
    display: flex;
    flex-direction: var(--ckwc-loop-cart-dir, row);
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--ckwc-loop-align, center);
    gap: var(--ckwc-loop-cart-gap, 8px);
    margin: var(--ckwc-loop-cart-mt, var(--ckwc-loop-gap, 8px)) 0 var(--ckwc-loop-cart-mb, 0);
}
/* Dans la rangée, on neutralise les marges propres : c'est « gap » qui régle l'écart. */
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart .ckwc-loop-qty,
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart .quantity {
    margin: var(--ckwc-loop-qty-mt, 0) 0 var(--ckwc-loop-qty-mb, 0) !important;
}
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart a.button,
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart a.add_to_cart_button,
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart a.cercle-add-to-cart {
    margin: var(--ckwc-loop-btn-mt, 0) 0 var(--ckwc-loop-btn-mb, 0) !important;
}
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart a.ckwc-view-product {
    margin: var(--ckwc-loop-btn2-mt, 0) 0 var(--ckwc-loop-btn2-mb, 0) !important;
}
.woocommerce.woocommerce ul.products li.product .ckwc-loop-cart .ckwc-loop-qty { display: inline-flex; vertical-align: middle; }

/* Flèches ▲▼ de quantité PERSONNALISABLES. Les flèches natives de input[type=number]
   ne sont pas stylables (couleur/taille) par le navigateur → on les masque et on fournit
   nos propres flèches haut/bas (fond, couleur, largeur via variables). */
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper {
    display: inline-flex;
    align-items: stretch;
}
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper .quantity { margin: 0 !important; }
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper input[type=number]::-webkit-inner-spin-button,
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* champ à gauche, arrondi seulement du côté gauche */
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper .quantity input,
.woocommerce.woocommerce ul.products li.product .ckwc-qty-stepper .quantity .qty {
    border-radius: var(--ckwc-loop-qty-radius, 4px) 0 0 var(--ckwc-loop-qty-radius, 4px) !important;
    border-right: 0 !important;
}
/* colonne des deux flèches, à droite du champ */
.woocommerce.woocommerce ul.products li.product .ckwc-qty-arrows {
    display: inline-flex;
    flex-direction: column;
    width: var(--ckwc-loop-qtybtn-size, 22px);
}
.woocommerce.woocommerce ul.products li.product .ckwc-qty-btn {
    flex: 1 1 50%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; min-height: 0;
    background: var(--ckwc-loop-qtybtn-bg, #f3f3f3);
    color: var(--ckwc-loop-qtybtn-color, #1a1a1a);
    border: var(--ckwc-loop-qty-bw, 1px) solid var(--ckwc-loop-qty-bc, #ddd);
    line-height: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    user-select: none;
}
.woocommerce.woocommerce ul.products li.product .ckwc-qty-up   { border-radius: 0 var(--ckwc-loop-qty-radius, 4px) 0 0; border-bottom: 0; }
.woocommerce.woocommerce ul.products li.product .ckwc-qty-down { border-radius: 0 0 var(--ckwc-loop-qty-radius, 4px) 0; }
.woocommerce.woocommerce ul.products li.product .ckwc-qty-btn svg { width: 62%; height: 62%; max-width: 16px; max-height: 16px; display: block; }

/* Masque le lien « Voir le panier » après ajout (badge à la place). */
.woocommerce a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart,
a.added_to_cart.wc-forward { display: none !important; }

/* Badge « Dans votre panier » sur la vignette. */
.woocommerce.woocommerce ul.products li.product { position: relative; }
.ckwc-in-cart-badge {
    position: absolute; top: 15px; left: 15px; z-index: 5;
    display: inline-flex; align-items: center; gap: 6px;
    /* !important : un thème/kit Elementor qui style les `a` (spécificité
       supérieure à notre classe seule) décalerait le badge au front alors que
       l'aperçu admin, sans ce CSS, resterait juste. */
    padding: 10px 15px !important; border-radius: var(--ckwc-loop-badge-radius, 0);
    background: var(--ckwc-loop-badge-bg, #16a34a);
    color: var(--ckwc-loop-badge-color, #ffffff);
    font-size: var(--ckwc-loop-badge-size, 13px) !important; font-weight: var(--ckwc-loop-badge-weight, 600) !important; line-height: 1 !important; cursor: pointer;
    text-decoration: none !important;
    transition: background .35s, transform .35s, opacity .3s;
}
.ckwc-in-cart-badge::before {
    content: ''; display: inline-block; width: 12px; height: 12px; flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    pointer-events: none;
}
.ckwc-in-cart-badge__default { display: inline-block; }
/* Au survol : le TEXTE ne change pas. Seuls le fond passe en gris et l'icône
   check devient une croix (voir ::before ci-dessous). */
.ckwc-in-cart-badge:hover { background: var(--ckwc-loop-badge-bg-h, #3a3a3a); color: var(--ckwc-loop-badge-color, #ffffff); }
.ckwc-in-cart-badge:hover::before {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ckwc-in-cart-badge--hidden { opacity: 0; transform: translateY(-5px); pointer-events: none; }
.ckwc-in-cart-badge--just-added { animation: ckwcBadgePopIn .5s cubic-bezier(0.34,1.56,0.64,1) 1; }
@keyframes ckwcBadgePopIn { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ===== VUE LISTE (classe « we-list » posée sur ul.products par le Filtre boutique) =====
   La carte EST la grille : image | texte | prix | quantité | bouton d'ajout.
   Le lien produit et la rangée panier passent en display:contents : leurs
   enfants (titre, prix, « Voir le produit », quantité, bouton) deviennent des
   éléments de la grille de la carte — c'est ce qui permet de placer « Voir le
   produit » SOUS le titre et le prix en colonne à gauche des actions, alors
   qu'ils ne sont pas frères dans le markup. Réglages --ckwc-loop-list-*. */
/* Conteneur de requête : la disposition de la carte suit la largeur RÉELLE de
   la liste (aperçu admin étroit, colonne front, mobile), pas celle de l'écran. */
.woocommerce.woocommerce ul.products.we-list { display: block !important; margin: 0 !important; container-type: inline-size; }
.woocommerce.woocommerce ul.products.we-list li.product {
    display: grid !important;
    /* image | texte (1fr) | prix | quantité | bouton */
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 0 var(--ckwc-loop-list-gap, 16px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: var(--ckwc-loop-list-pad, 12px) !important;
    border: var(--ckwc-loop-card-bw, 1px) solid var(--ckwc-loop-list-bc, #ececec) !important;
    border-radius: var(--ckwc-loop-list-radius, 8px) !important;
    background: var(--ckwc-loop-card-bg, #fff) !important;
    box-shadow: none !important;
    text-align: left !important;
    float: none !important;
    box-sizing: border-box !important;
}
/* Les pseudo-éléments hérités (clearfix, ancienne cassure de ligne) n'ont pas
   leur place dans la grille. */
.woocommerce.woocommerce ul.products.we-list li.product::before,
.woocommerce.woocommerce ul.products.we-list li.product::after { content: none !important; display: none !important; }
/* Le lien et la rangée panier s'effacent : leurs enfants se placent seuls. */
.woocommerce.woocommerce ul.products.we-list li.product > a.woocommerce-loop-product__link,
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart { display: contents !important; }
/* Les libellés d'accessibilité ne doivent pas devenir des éléments de grille. */
.woocommerce.woocommerce ul.products.we-list li.product span.screen-reader-text { display: none !important; }
/* Rangée 1 : badge « Dans votre panier », pleine largeur, seulement s'il est
   visible. Masqué = hors flux (sinon il réservait 33px en haut de chaque carte). */
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-in-cart-badge,
.woocommerce.woocommerce ul.products.we-list li.product .cercle-in-cart-badge {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    margin: 0 0 8px !important;
}
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-in-cart-badge--hidden { display: none !important; }
/* Colonne 1 : l'image, carrée, sur toute la hauteur du texte. */
.woocommerce.woocommerce ul.products.we-list li.product img,
.woocommerce.woocommerce ul.products.we-list li.product img.attachment-woocommerce_thumbnail,
.woocommerce.woocommerce ul.products.we-list li.product img.wp-post-image {
    grid-column: 1;
    grid-row: 2 / span 4;
    width: var(--ckwc-loop-list-img, 56px) !important;
    height: var(--ckwc-loop-list-img, 56px) !important;
    min-width: var(--ckwc-loop-list-img, 56px) !important;
    max-width: var(--ckwc-loop-list-img, 56px) !important;
    object-fit: contain !important;
    margin: 0 !important;
    align-self: center !important;
    aspect-ratio: auto !important;
    border-radius: var(--ckwc-loop-img-radius, 6px) !important;
    background: var(--ckwc-loop-img-bg, #fff) !important;
}
/* Colonne 2 : marque / titre / (réf) / « Voir le produit ». Les interlignes
   se règlent par marges (le row-gap est à 0 à cause des rangées optionnelles). */
.woocommerce.woocommerce ul.products.we-list li.product .cercle-marque {
    grid-column: 2; grid-row: 2;
    align-self: end !important;
    margin: 0 0 2px !important;
    color: var(--ckwc-loop-brand-color, #9aa3ad) !important;
    font-size: var(--ckwc-loop-brand-size, 11px) !important;
}
.woocommerce.woocommerce ul.products.we-list li.product .woocommerce-loop-product__title {
    grid-column: 2; grid-row: 3;
    margin: 0 !important;
    align-self: center !important;
    text-align: left !important;
    white-space: normal !important;
    min-width: 0;
    display: block !important;
    color: var(--ckwc-loop-title-color, #1a1a1a) !important;
    font-size: var(--ckwc-loop-title-size, 15px) !important;
    font-weight: var(--ckwc-loop-title-weight, 600) !important;
    line-height: var(--ckwc-loop-title-lh, 1.3) !important;
}
.woocommerce.woocommerce ul.products.we-list li.product .cercle-code-article {
    grid-column: 2; grid-row: 4;
    align-self: center !important;
    margin: 2px 0 0 !important;
    color: var(--ckwc-loop-ref-color, #9aa3ad) !important;
    font-size: var(--ckwc-loop-ref-size, 11px) !important;
}
/* « Voir le produit » : sous le titre, à la place qu'occupait le prix. */
.woocommerce.woocommerce ul.products.we-list li.product a.ckwc-view-product {
    grid-column: 2; grid-row: 5;
    justify-self: start;
    align-self: start !important;
    margin: 6px 0 0 !important;
}
/* Colonne 3 : le prix, centré verticalement, à gauche des actions. */
.woocommerce.woocommerce ul.products.we-list li.product .price {
    grid-column: 3; grid-row: 2 / span 4;
    margin: 0 !important;
    align-self: center !important;
    white-space: nowrap;
    text-align: left !important;
    color: var(--ckwc-loop-price-color, #1a1a1a) !important;
    font-size: var(--ckwc-loop-price-size, 15px) !important;
}
/* Colonnes 4 et 5 : quantité puis bouton d'ajout, centrés verticalement. */
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart .ckwc-loop-qty,
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart > .quantity {
    grid-column: 4; grid-row: 2 / span 4;
    align-self: center !important;
    margin: 0 !important;
}
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.button:not(.ckwc-view-product),
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.add_to_cart_button,
.woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.cercle-add-to-cart {
    grid-column: 5; grid-row: 2 / span 4;
    align-self: center !important;
    margin: 0 !important;
}
/* Étroit (aperçu, colonne serrée, mobile) : le prix passe sous le texte et la
   rangée quantité + bouton redevient une vraie rangée flex, pleine largeur
   dessous. Requête CONTENEUR : c'est la largeur de la liste qui décide. */
@container (max-width: 640px) {
    .woocommerce.woocommerce ul.products.we-list li.product { grid-template-columns: auto minmax(0, 1fr); }
    .woocommerce.woocommerce ul.products.we-list li.product .price {
        grid-column: 2; grid-row: 6;
        justify-self: start;
        white-space: normal;
        margin: 6px 0 0 !important;
    }
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart {
        display: flex !important;
        grid-column: 1 / -1; grid-row: 7;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: var(--ckwc-loop-cart-gap, 8px);
        margin: 10px 0 0 !important;
    }
    /* Dans la rangée redevenue flex, chacun reprend sa place naturelle. */
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart .ckwc-loop-qty,
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart > .quantity,
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.button:not(.ckwc-view-product),
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.add_to_cart_button,
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.cercle-add-to-cart,
    .woocommerce.woocommerce ul.products.we-list li.product .ckwc-loop-cart a.ckwc-view-product {
        grid-area: auto;
        margin: 0 !important;
    }
}

/* Aperçu admin : carte propre (pas de fond beige). */
.ckwc-loop-preview { padding: 16px; background: var(--ck-white, #fff); border: 1px solid var(--ck-border, #ece7dd); border-radius: 12px; }
.ckwc-loop-preview.woocommerce ul.products { display: block; margin: 0; padding: 0; list-style: none; }
.ckwc-loop-preview .price { margin-top: 4px; }

/* Second bouton « Voir le produit » : marges réglables — hors rangée (au-dessus /
   en dessous) comme dans la rangée (la neutralisation des marges de la rangée
   ne s'applique qu'aux éléments quantité). */
.woocommerce.woocommerce ul.products li.product a.ckwc-view-product {
    margin-top: var(--ckwc-loop-btn2-mt, 0) !important;
    margin-bottom: var(--ckwc-loop-btn2-mb, 0) !important;
}