/* Widget « Panier (CercleKit) » — articles à gauche, récapitulatif à droite.
   Réglages → variables --ckwc-cart-* posées sur {{WRAPPER}} .ckwc-panier ;
   le stepper reprend les variables --ckwc-loop-qty-* de la boucle (source
   unique, surcharge par widget). Responsive par requête CONTENEUR. */

/* L'enveloppe porte la container query : un conteneur CSS ne peut pas être
   stylé par sa PROPRE requête — les règles responsive sur .ckwc-panier
   étaient ignorées en silence quand il était lui-même le conteneur (vécu). */
/* width:100% obligatoire : le containment (inline-size) dimensionne l'élément
   SANS son contenu — dans un parent flex, il tomberait à 0 de large (vécu). */
.ckwc-panier-scope { container-type: inline-size; width: 100%; }

.ckwc-panier {
    display: flex;
    align-items: flex-start;
    gap: var(--ckwc-cart-gap, 40px);
}

/* ── Colonne articles ── */
.ckwc-panier__items {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ckwc-cart-rows, 0px);
    margin: 0;
    padding: 0;
    border: 0;
}

/* En-têtes et lignes partagent LE MÊME gabarit (--ckwc-cart-tpl, calculé au
   rendu selon les éléments actifs) : les colonnes Quantité / Total tombent
   pile sous leurs en-têtes — un récapitulatif, pas des vignettes. */
.ckwc-panier__head,
.ckwc-panier__item {
    display: grid;
    grid-template-columns: var(--ckwc-cart-tpl, var(--ckwc-cart-img, 64px) minmax(0, 1fr) minmax(100px, auto) minmax(90px, auto) 28px);
    align-items: center;
    column-gap: var(--ckwc-cart-colgap, 18px);
    box-sizing: border-box;
}

.ckwc-panier__head {
    padding: 0 var(--ckwc-cart-item-padx, 4px) 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ckwc-cart-head-color, #9aa3ad);
    border-bottom: 1px solid var(--ckwc-cart-sep, #e8e8e8);
}
.ckwc-panier__head-qty { text-align: center; }
.ckwc-panier__head-total { text-align: right; }

/* Mode « Récapitulatif » (défaut) : lignes aérées séparées par un filet.
   L'épaisseur des filets = le réglage « Épaisseur des filets / bordures ». */
.ckwc-panier--lines .ckwc-panier__item {
    background: var(--ckwc-cart-item-bg, transparent);
    border: 0;
    border-bottom: var(--ckwc-cart-item-bw, 1px) solid var(--ckwc-cart-sep, #e8e8e8);
    border-radius: 0;
    padding: var(--ckwc-cart-item-pad, 18px 4px);
}
/* Mode « Cartes » : chaque ligne est une carte. */
.ckwc-panier--cards .ckwc-panier__items { gap: var(--ckwc-cart-rows, 14px); }
.ckwc-panier--cards .ckwc-panier__head { border-bottom: 0; }
.ckwc-panier--cards .ckwc-panier__item {
    background: var(--ckwc-cart-item-bg, #fff);
    border: var(--ckwc-cart-item-bw, 1px) solid var(--ckwc-cart-item-bc, #ececec);
    border-radius: var(--ckwc-cart-item-radius, 10px);
    padding: var(--ckwc-cart-item-pad, 14px 16px);
}

.ckwc-panier__imgcell { line-height: 0; }
/* Spécificité (0,2,0) : le reset `.elementor img{height:auto}` battrait la classe seule. */
.ckwc-panier .ckwc-panier__img,
.ckwc-panier .ckwc-panier__imgcell img {
    width: var(--ckwc-cart-img, 64px) !important;
    height: var(--ckwc-cart-img, 64px) !important;
    max-width: var(--ckwc-cart-img, 64px) !important;
    object-fit: contain;
    border-radius: var(--ckwc-cart-img-radius, 8px);
    /* Vignette cerclée sur fond blanc — même langage que le récapitulatif
       de la Validation (design Shopify). */
    background: var(--ckwc-cart-img-bg, #fff);
    border: 1px solid rgba(0, 0, 0, .09);
    box-sizing: border-box;
    display: block;
}

.ckwc-panier__info { min-width: 0; }
/* Marque : mêmes réglages que la vue liste (vars du tiroir Boucle produit). */
.ckwc-panier .ckwc-panier__brand {
    color: var(--ckwc-loop-brand-color, #9aa3ad);
    font-size: var(--ckwc-loop-brand-size, 11px);
    font-weight: var(--ckwc-loop-brand-weight, 600);
    letter-spacing: var(--ckwc-loop-brand-ls, .04em);
    text-transform: var(--ckwc-loop-brand-case, uppercase);
    line-height: 1.2;
    margin-bottom: 3px;
}
.ckwc-panier__name { font-weight: 600; font-size: 16px; line-height: 1.35; }
.ckwc-panier__name a { color: inherit; text-decoration: none; }
.ckwc-panier__name a:hover { text-decoration: underline; color: var(--ckwc-cart-name-hover, inherit); }
/* Pas d'opacity ici : elle délavait toute couleur réglée dans Elementor
   (vécu — « le prix unitaire ça marche pas »). La teinte vit dans la couleur. */
.ckwc-panier__unit { margin-top: 3px; font-size: 13px; color: #8a8f98; }

/* LES OPTIONS D'UNE VARIATION, COMPACTES (1.0.379). Kévin, capture du panier
   xpospace : « dans la vue liste faut faire un truc compact pour les variables,
   là c'est le bordel ». WooCommerce les rend en liste libellé / valeur
   (`dl.variation` au panier, `ul.wc-item-meta` sur une commande) et le THÈME
   les étale : un libellé par ligne, la valeur en retrait, de grandes marges —
   cinq attributs faisaient la hauteur de trois produits. Ici, une seule ligne
   qui revient à la ligne : « Coins : Coins ouverts · Largeur : 992 mm · … ».
   Spécificité (0,2,1)+ : au-dessus des règles de thème sur `dl`/`dd`/`p`. */
/* ⚠️ PAS DE FLEX ICI : un enfant de flex est toujours rendu en BLOC, les
   `display: inline` ci-dessous sautaient et chaque libellé / valeur restait
   une boîte à part (mesuré : 108 px pour cinq options). Un bloc normal aux
   enfants en ligne fait couler le texte et revient à la ligne tout seul. */
.ckwc-panier .ckwc-panier__info dl.variation,
.ckwc-panier .ckwc-panier__info ul.wc-item-meta {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.45;
    color: #8a8f98;
}
.ckwc-panier .ckwc-panier__info dl.variation dt,
.ckwc-panier .ckwc-panier__info dl.variation dd,
.ckwc-panier .ckwc-panier__info ul.wc-item-meta li,
.ckwc-panier .ckwc-panier__info ul.wc-item-meta li strong {
    display: inline;
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}
.ckwc-panier .ckwc-panier__info dl.variation dt { margin-right: 4px; }
.ckwc-panier .ckwc-panier__info dl.variation dd p,
.ckwc-panier .ckwc-panier__info ul.wc-item-meta li p {
    display: inline;
    margin: 0;
    padding: 0;
    color: #3b4250;
}
/* Le séparateur entre deux options, jamais après la dernière. */
.ckwc-panier .ckwc-panier__info dl.variation dd:not(:last-child)::after,
.ckwc-panier .ckwc-panier__info ul.wc-item-meta li:not(:last-child)::after {
    content: "\00B7";
    margin: 0 8px;
    color: #c2c6cc;
}
.ckwc-panier__view { margin-top: 8px; }
.ckwc-panier .ckwc-panier__view a.ckwc-view-product { display: inline-flex; align-items: center; }
.ckwc-panier .ckwc-loop-qty { justify-self: center; }
.ckwc-panier__linetotal { font-weight: 700; white-space: nowrap; text-align: right; justify-self: end; }

/* Retirer : croix réglable — taille de l'icône + marge interne (la boîte =
   icône + padding), rayon angle par angle, couleurs normal/survol. */
.ckwc-panier .ckwc-panier__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ckwc-cart-rm-pad, 7px);
    border-radius: var(--ckwc-cart-rm-radius, 50%);
    color: var(--ckwc-cart-rm-color, #9aa3ad);
    background: var(--ckwc-cart-rm-bg, transparent);
    box-sizing: border-box;
    transition: color .15s ease, background .15s ease;
}
.ckwc-panier .ckwc-panier__remove:hover {
    color: var(--ckwc-cart-rm-color-h, #d33);
    background: var(--ckwc-cart-rm-bg-h, rgba(221, 51, 51, .08));
}
.ckwc-panier .ckwc-panier__remove svg {
    width: var(--ckwc-cart-rm-icon, 14px);
    height: var(--ckwc-cart-rm-icon, 14px);
    display: block;
}

/* Le bouton « Mettre à jour » : superflu avec le JS (soumission automatique
   au changement de quantité) → masqué. Sans JS, un <noscript> dans le
   formulaire le réaffiche — et c'est alors un vrai .ck-btn (aspect CercleKit),
   pas un bouton restylé par le thème (vécu : le kit Elementor l'habillait). */
/* !important : l'override d'aspect (ck-btn) déclare display:inline-flex et
   battrait le masquage. Le <style> du <noscript>, plus tardif dans le DOM,
   reprend la main à égalité d'importance pour le repli sans JS. */
.ckwc-panier .ckwc-panier__update {
    display: none !important;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ── Stepper de quantité — copie scopée, variables de la boucle. ── */
.ckwc-panier .ckwc-loop-qty { display: inline-flex; vertical-align: middle; margin: 0; }
.ckwc-panier .ckwc-qty-stepper { display: inline-flex; align-items: stretch; }
.ckwc-panier .ckwc-qty-stepper .quantity { margin: 0 !important; float: none; }
.ckwc-panier .ckwc-qty-stepper input[type=number]::-webkit-inner-spin-button,
.ckwc-panier .ckwc-qty-stepper input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ckwc-panier .ckwc-qty-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ckwc-panier .ckwc-qty-stepper .quantity input,
.ckwc-panier .ckwc-qty-stepper .quantity .qty {
    height: var(--ckwc-loop-qty-h, 40px) !important;
    width: var(--ckwc-loop-qty-w, 56px) !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) 0 0 var(--ckwc-loop-qty-radius, 4px) !important;
    border-right: 0 !important;
    font-size: var(--ckwc-loop-qty-fs, 14px) !important;
    padding: 0 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    text-align: center !important;
}
.ckwc-panier .ckwc-qty-arrows {
    display: inline-flex;
    flex-direction: column;
    width: var(--ckwc-loop-qtybtn-size, 22px);
}
.ckwc-panier .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;
}
.ckwc-panier .ckwc-qty-up   { border-radius: 0 var(--ckwc-loop-qty-radius, 4px) 0 0; border-bottom: 0; }
.ckwc-panier .ckwc-qty-down { border-radius: 0 0 var(--ckwc-loop-qty-radius, 4px) 0; }
.ckwc-panier .ckwc-qty-btn svg { width: 62%; height: 62%; max-width: 16px; max-height: 16px; display: block; }

/* ── Colonne récapitulatif ── */
.ckwc-panier__totals {
    flex: 0 0 var(--ckwc-cart-side, 340px);
    max-width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: var(--ckwc-cart-tot-top, 24px);
    background: var(--ckwc-cart-tot-bg, #fafafa);
    border: var(--ckwc-cart-tot-bw, 1px) solid var(--ckwc-cart-tot-bc, transparent);
    border-radius: var(--ckwc-cart-tot-radius, 12px);
    padding: var(--ckwc-cart-tot-pad, 24px);
}
.ckwc-panier__totheading { margin: 0 0 16px; }
/* Sans prix : le mot d'invitation sous le titre (à la place des lignes chiffrées). */
.ckwc-panier__invite { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ckwc-cart-invite-color, #545454); }
.ckwc-panier__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
.ckwc-panier__row--coupon { color: #16a34a; }
.ckwc-panier__row--total {
    border-top: 1px solid var(--ckwc-cart-tot-sep, rgba(0, 0, 0, .1));
    margin-top: 6px;
    padding-top: 14px;
    align-items: baseline;
    font-weight: 600;
    font-size: 1.1em;
}
/* Le montant, plus grand que son libellé — le geste Shopify. */
.ckwc-panier__row--total > span:last-child { font-size: 1.3em; font-weight: 700; letter-spacing: -0.01em; }
.ckwc-panier__row--total .includes_tax,
.ckwc-panier__row--total .tax_label { font-size: 12px; font-weight: 400; opacity: .65; }
.ckwc-panier .ckwc-panier__cta {
    margin-top: var(--ckwc-cart-cta-mt, 16px);
    width: var(--ckwc-cart-cta-w, 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

/* ── Vide ── */
.ckwc-panier--empty { display: block; }

/* ── Responsive : la largeur RÉELLE du widget décide (container queries). ── */

/* Intermédiaire : plus assez de place pour deux colonnes → le récap passe
   sous la liste, pleine largeur. */
@container (max-width: 860px) {
    /* align-items:stretch : en colonne, l'axe transversal devient horizontal —
       flex-start rétrécirait la liste à son contenu. */
    .ckwc-panier { flex-direction: column; align-items: stretch; }
    .ckwc-panier__items { width: 100%; }
    .ckwc-panier__totals { position: static; flex: 1 1 auto; width: 100%; }
}

/* Étroit (mobile) : les en-têtes n'ont plus de sens, chaque article se
   réorganise sur deux rangées — [image | nom+prix | ×] puis
   [quantité … total] — quels que soient les éléments activés. */
@container (max-width: 620px) {
    .ckwc-panier__head { display: none; }
    .ckwc-panier__head + .ckwc-panier__item { border-top: 1px solid var(--ckwc-cart-sep, #e8e8e8); }
    .ckwc-panier__item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 12px;
    }
    .ckwc-panier__imgcell { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
    .ckwc-panier__info { grid-column: 2; grid-row: 1; }
    .ckwc-panier .ckwc-panier__remove { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
    .ckwc-panier .ckwc-loop-qty { grid-column: 2; grid-row: 2; justify-self: start; }
    .ckwc-panier__linetotal { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
}

/* Très étroit : image réduite, respiration resserrée. */
@container (max-width: 380px) {
    .ckwc-panier { --ckwc-cart-img: 48px; --ckwc-cart-colgap: 12px; }
    .ckwc-panier__name { font-size: 15px; }
}