/* 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. */
/* `:not(.ckwc-view-product)` : le second bouton « Voir le produit » porte AUSSI
   la classe `button`. Sans cette exclusion, éteindre « Bouton » masquait les DEUX —
   l'inverse exact de l'usage (retirer l'achat, garder « Voir le produit »). */
.woocommerce.woocommerce ul.products li.product a.button:not(.ckwc-view-product),
.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;
}

/* ---- BOUTON ROND (+) — réglage « Forme du bouton » = Rond avec + (1.0.374) ----
   Un bouton À PART, pas un aspect CercleKit : il ne porte aucune classe `ck-btn`,
   et ses couleurs viennent du sous-tiroir « Bouton rond (+) ».
   Sélecteur à 7 classes + !important : il doit passer devant le style de bouton du
   THÈME et de WooCommerce, qui visent tous `a.button`. `display` n'est PAS posé :
   l'interrupteur « Bouton « Ajouter au panier » » doit continuer de le masquer. */
.woocommerce.woocommerce ul.products li.product a.button.ckwc-rnd.ckwc-rnd {
    box-sizing: border-box !important;
    position: relative;
    width: var(--ckwc-rnd-size, 40px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ckwc-rnd-size, 40px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: var(--ckwc-rnd-bw, 1px) solid var(--ckwc-rnd-bc, #1a1a1a) !important;
    border-radius: 50% !important;
    background: var(--ckwc-rnd-bg, #ffffff) !important;
    background-image: none !important;
    color: var(--ckwc-rnd-color, #1a1a1a) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none;
    transform: none;
    opacity: 1 !important;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
.woocommerce.woocommerce ul.products li.product a.button.ckwc-rnd.ckwc-rnd:hover,
.woocommerce.woocommerce ul.products li.product a.button.ckwc-rnd.ckwc-rnd:focus-visible {
    background: var(--ckwc-rnd-bg-h, var(--ckwc-rnd-bg, #ffffff)) !important;
    border-color: var(--ckwc-rnd-bc-h, var(--ckwc-rnd-bc, #1a1a1a)) !important;
    color: var(--ckwc-rnd-color-h, var(--ckwc-rnd-color, #1a1a1a)) !important;
}
/* AJOUTÉ — placé APRÈS le survol : à spécificité égale, la souris posée sur le
   bouton qu'on vient de cliquer ne doit pas masquer la confirmation. */
.woocommerce.woocommerce ul.products li.product a.button.ckwc-rnd.ckwc-rnd.added {
    background: var(--ckwc-rnd-bg-ok, #16a34a) !important;
    border-color: var(--ckwc-rnd-bc-ok, #16a34a) !important;
    color: var(--ckwc-rnd-color-ok, #ffffff) !important;
}
/* Le coche « \e017 » et la roue de chargement de WooCommerce vivent en ::after
   (et certains thèmes décorent ::before) : sur le rond, c'est NOTRE icône qui
   dit l'état. Sans ça, coche et « + » s'affichent côte à côte (vécu, 1.0.373). */
.woocommerce.woocommerce ul.products li.product a.button.ckwc-rnd.ckwc-rnd::before,
.woocommerce.woocommerce ul.products li.product a.button.ckwc-rnd.ckwc-rnd::after {
    content: none !important;
    display: none !important;
}

/* L'icône : « + » et coche superposés, tracés au trait en currentColor. */
.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__ico {
    position: relative;
    display: block;
    width: var(--ckwc-rnd-icon, 16px);
    height: var(--ckwc-rnd-icon, 16px);
    pointer-events: none;
}
.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__ico svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--ckwc-rnd-stroke, 2px);
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* L'épaisseur réglée est une épaisseur À L'ÉCRAN, quelle que soit la taille de
   l'icône : sans ça, 2px sur un tracé de 24 unités réduit à 16px ferait 1,3px. */
.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__ico svg path { vector-effect: non-scaling-stroke; }

.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__plus { transition: opacity .2s ease, transform .3s ease; }
.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__check { opacity: 0; transition: opacity .15s ease .1s; }
.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__check path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .35s ease .12s;
}
/* Ajouté : le « + » tourne et s'efface, le coche se dessine. */
.woocommerce ul.products li.product .ckwc-rnd.added .ckwc-rnd__plus { opacity: 0; transform: rotate(90deg) scale(.4); }
.woocommerce ul.products li.product .ckwc-rnd.added .ckwc-rnd__check { opacity: 1; }
.woocommerce ul.products li.product .ckwc-rnd.added .ckwc-rnd__check path { stroke-dashoffset: 0; }
/* Pendant la requête (classe `loading` de WooCommerce) : un PETIT CERCLE DE
   CHARGEMENT à la place du « + » — un « + » qui tourne se lit comme une croix
   qui s'affole, pas comme « ça charge » (Kévin, 1.0.375). L'anneau est le
   ::before de l'icône (celui du BOUTON est neutralisé plus haut, pas celui-ci) :
   aucun markup de plus, et il prend la couleur (currentColor) et l'épaisseur
   (--ckwc-rnd-stroke) réglées pour l'icône. Le « + » revient tout seul si la
   requête échoue : WooCommerce retire `loading` sans poser `added`. */
.woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__ico::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: var(--ckwc-rnd-stroke, 2px) solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
}
.woocommerce ul.products li.product .ckwc-rnd.loading .ckwc-rnd__ico::before {
    opacity: 1;
    animation: ckwc-rnd-spin .7s linear infinite;
}
.woocommerce ul.products li.product .ckwc-rnd.loading .ckwc-rnd__plus { opacity: 0; transform: scale(.4); }
@keyframes ckwc-rnd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__plus,
    .woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__check,
    .woocommerce ul.products li.product .ckwc-rnd .ckwc-rnd__check path,
    .woocommerce ul.products li.product .ckwc-rnd.loading .ckwc-rnd__ico::before { transition: none; animation: none; }
}

/* Le libellé, masqué à l'œil et lu par les lecteurs d'écran. */
.ckwc-rnd .ckwc-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* 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; }
/* Contrepartie du confinement, à ne pas retirer : un élément
   `container-type:inline-size` compte pour ZÉRO dans la largeur intrinsèque de
   ses ancêtres (sa taille en ligne est calculée « comme s'il n'avait pas de
   contenu »). Or Elementor pose ses widgets en éléments flex, et un élément
   flex calcule sa hauteur à sa largeur fit-content AVANT d'être étiré : sans
   largeur explicite, cette mesure se faisait sur une liste réputée vide, à une
   largeur qui n'est pas la vraie. La hauteur retenue restait celle-là et le
   widget gardait un grand vide sous les cartes (1280 px mesurés en 375 px, vue
   Liste). Une largeur explicite rend la largeur définie dès le départ, donc la
   hauteur juste. On reprend la formule d'Elementor lui-même (celle de son
   widget Séparateur) plutôt qu'un `100%` sec : le réglage de largeur du widget
   dans un conteneur en RANGÉE passe par ces deux variables, un `100%` en dur
   l'écraserait. Sans effet là où la mesure tombait déjà juste (desktop). */
.e-con > .elementor-widget-ckwc_filtre_boutique,
.e-con-inner > .elementor-widget-ckwc_filtre_boutique,
.e-con > .elementor-widget-ckwc_boucle_produit,
.e-con-inner > .elementor-widget-ckwc_boucle_produit {
    width: var(--container-widget-width, 100%);
    --flex-grow: var(--container-widget-flex-grow);
}
.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;
    /* Le CADRE de la carte est décrit UNE fois, dans « Carte », et vaut pour les
       deux vues : fond, épaisseur, couleur de bordure, rayon. La liste avait sa
       propre couleur et son propre rayon alors qu'elle partageait déjà le fond
       et l'épaisseur — ces deux-là étaient les intrus. Résultat : un rayon réglé
       à 3 px sur la carte laissait la liste à 8 px, et rien dans l'interface ne
       disait pourquoi. Seule la MARGE INTERNE reste propre à la liste : une
       rangée compacte n'a pas la respiration d'une carte en hauteur. */
    border: var(--ckwc-loop-card-bw, 1px) solid var(--ckwc-loop-card-bc, #ececec) !important;
    border-radius: var(--ckwc-loop-card-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;
    /* Vue liste › Taille du titre ; vide = celle de la grille (1.0.383). */
    font-size: var(--ckwc-loop-list-title-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;
}
/* « À CÔTÉ DU BOUTON D'AJOUT » (1.0.381, réglage « Voir le produit en vue
   liste ») : une 6ᵉ colonne, et « Voir le produit » rejoint la ligne des
   actions — après le bouton d'ajout, ou avant si « Position du second bouton »
   vaut « À gauche ». Classes posées par CKWC_Boucle_Produit::list_btn2_class(). */
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
}
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions a.ckwc-view-product {
    grid-column: 6; grid-row: 2 / span 4;
    justify-self: auto;
    align-self: center !important;
    margin: 0 !important;
}
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche a.ckwc-view-product {
    grid-column: 5;
}
/* LE TITRE AU CENTRE (1.0.382). Kévin, capture xpospace : « pourquoi mon titre
   est pas centré dans la vue liste ». L'image et les actions couvraient QUATRE
   rangées (marque / titre / réf / « Voir le produit ») ; « Voir le produit »
   parti sur la ligne des actions, la 4ᵉ restait vide mais couverte. La hauteur
   de l'image se répartit à parts égales entre les rangées couvertes : une vide
   au-dessus du titre, DEUX en dessous — le titre remontait (mesuré : 6px au-dessus
   du centre, 8px avec une réf). Trois rangées : autant au-dessus qu'en dessous. */
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions img,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .price,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .ckwc-loop-cart .ckwc-loop-qty,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .ckwc-loop-cart > .quantity,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .ckwc-loop-cart a.button:not(.ckwc-view-product),
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .ckwc-loop-cart a.add_to_cart_button,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .ckwc-loop-cart a.ckwc-devis-button,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .ckwc-loop-cart a.cercle-add-to-cart,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions a.ckwc-view-product {
    grid-row: 2 / span 3;
}
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.button:not(.ckwc-view-product),
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.add_to_cart_button,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.ckwc-devis-button,
.woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.cercle-add-to-cart {
    grid-column: 6;
}
/* 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.ckwc-devis-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.ckwc-devis-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;
    }
    /* « À côté » en colonne étroite : on revient aux deux colonnes, et le bouton
       reste dans la rangée d'actions redevenue flex (1.0.381). */
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions { grid-template-columns: auto minmax(0, 1fr); }
    /* ⚠️ Le prix reprend SA rangée sous le texte (1.0.382) : la règle « trois
       rangées » du titre centré est plus spécifique que celle de l'étroit, elle
       remontait le prix PAR-DESSUS le titre (constaté à 540px). Même sélecteur,
       plus bas dans la feuille : celui-ci gagne. */
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions .price { grid-row: 6; }
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions a.ckwc-view-product,
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.button:not(.ckwc-view-product),
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.add_to_cart_button,
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.ckwc-devis-button,
    .woocommerce.woocommerce ul.products.we-list li.product.ckwc-list-btn2-actions.ckwc-list-btn2-gauche .ckwc-loop-cart a.cercle-add-to-cart {
        grid-area: auto;
    }
}

/* 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;
}