/* ═══════════════════════════════════════════════════════════════════════
   VUE LISTE — une ligne de commande EST une ligne de la vue liste de la
   Boucle produit. Classe `.ckwc-panier--vue-liste`, posée sur :
     - le récap de la Validation et les commandes de Mon compte
       (interrupteur « Composants CercleKit partout ») ;
     - les lignes du widget Panier (interrupteur « Panier : les lignes suivent
       la vue liste »).
   Chargée seulement si l'un des deux est allumé : éteints, rien ne change.

   `:not(#ckwc-vl)` pèse un identifiant : la vue liste passe devant les
   réglages Elementor du widget Panier ({{WRAPPER}} = .elementor-N
   .elementor-element.elementor-element-X…, 0,5,0), sans !important. C'est le
   sens de l'interrupteur Panier : la vue liste décide, pas ces réglages.
   ═══════════════════════════════════════════════════════════════════════ */
.ckwc-panier--vue-liste:not(#ckwc-vl) {
    --ckwc-cart-img: var(--ckwc-loop-list-img, 56px);
    --ckwc-cart-colgap: var(--ckwc-loop-list-gap, 16px);
}
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__items { display: flex; flex-direction: column; gap: 10px; }
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__item,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__item:last-child {
    column-gap: var(--ckwc-loop-list-gap, 16px);
    padding: var(--ckwc-loop-list-pad, 12px);
    border: var(--ckwc-loop-card-bw, 1px) solid var(--ckwc-loop-card-bc, #ececec);
    border-radius: var(--ckwc-loop-card-radius, 8px);
    background: var(--ckwc-loop-card-bg, #fff);
}
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__img,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__imgcell img {
    border: 0;
    border-radius: var(--ckwc-loop-img-radius, 6px);
    background: var(--ckwc-loop-img-bg, #fff);
}
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__name,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__brand,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__unit,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__linetotal { font-family: var(--ck-font-primary, inherit); }
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__name {
    color: var(--ckwc-loop-title-color, #1a1a1a);
    font-size: var(--ckwc-loop-list-title-size, var(--ckwc-loop-title-size, 15px));
    font-weight: var(--ckwc-loop-title-weight, 600);
    line-height: var(--ckwc-loop-title-lh, 1.3);
}
/* « 1 × 130,00 € » et les options : le rang du code article (le texte second). */
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__unit,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info dl.variation,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info ul.wc-item-meta {
    color: var(--ckwc-loop-ref-color, #9aa3ad);
    font-size: var(--ckwc-loop-ref-size, 11px);
    font-weight: var(--ckwc-loop-ref-weight, 400);
}
/* Les VALEURS des options sont dans des <p> : sans ceci, elles prennent la
   taille de paragraphe du thème (16 px) au milieu d'une ligne en 11 px —
   « ST 03/1 Sanddorngelee » sortait en gros (LH, commande 2307). */
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info dl.variation dd p,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info ul.wc-item-meta li p,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info dl.variation dt,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info ul.wc-item-meta li strong {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
}
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info dl.variation dd p,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info ul.wc-item-meta li p,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info dl.variation dd:not(:last-child)::after,
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__info ul.wc-item-meta li:not(:last-child)::after { color: inherit; }
.ckwc-panier--vue-liste:not(#ckwc-vl) .ckwc-panier__linetotal {
    color: var(--ckwc-loop-price-color, #1a1a1a);
    font-size: var(--ckwc-loop-price-size, 15px);
    font-weight: var(--ckwc-loop-price-weight, 400);
}