/* Widget « Produit (CercleKit) » — fiche produit composable.
   Le stepper de quantité reprend les MÊMES variables --ckwc-loop-qty-* que la
   boucle produit : réglé une fois dans le tiroir Boucle, identique partout ;
   surcharge possible par widget (contrôles Elementor → vars sur le wrapper). */

.ckwc-produit {
    display: flex;
    flex-direction: column;
    align-items: var(--ckwc-prod-align, flex-start);
}
/* Espacement PAR BLOC : chaque enfant porte sa marge basse. Défaut commun
   --ckwc-prod-gap, surchargé bloc par bloc par les contrôles « Disposition »
   du widget. Le dernier bloc ne pousse rien. */
.ckwc-produit > * { margin-top: 0; margin-bottom: var(--ckwc-prod-gap, 12px); }
.ckwc-produit > :last-child { margin-bottom: 0; }

/* ── Marque : reprend LES réglages de la boucle (tiroir Boucle produit).
      Les contrôles Elementor du widget les surchargent (post CSS, plus
      spécifique, chargé après). ── */
.ckwc-produit .ckwc-prod-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, .05em);
    text-transform: var(--ckwc-loop-brand-case, uppercase);
    line-height: 1.2;
}

/* ── Titre + réf, sur la même ligne de base — réglages de la boucle. ── */
.ckwc-produit .ckwc-prod-titlewrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.ckwc-produit .ckwc-prod-title {
    margin: 0;
    color: var(--ckwc-loop-title-color, #1a1a1a);
    font-weight: var(--ckwc-loop-title-weight, 600);
    line-height: var(--ckwc-loop-title-lh, 1.2);
    letter-spacing: var(--ckwc-loop-title-ls, 0px);
}
.ckwc-produit .ckwc-prod-ref {
    color: var(--ckwc-loop-ref-color, #9aa3ad);
    font-size: var(--ckwc-loop-ref-size, 11px);
    font-weight: var(--ckwc-loop-ref-weight, 600);
    letter-spacing: var(--ckwc-loop-ref-ls, .03em);
    text-transform: var(--ckwc-loop-ref-case, uppercase);
    white-space: nowrap;
}

/* ── Description courte ── */
.ckwc-produit .ckwc-prod-desc { line-height: 1.6; }
.ckwc-produit .ckwc-prod-desc > :first-child { margin-top: 0; }
.ckwc-produit .ckwc-prod-desc > :last-child { margin-bottom: 0; }

/* ── Prix : couleurs/graisse de la boucle ; HT/TTC et mention viennent du
      module Prix & taxe (le HTML arrive déjà suffixé). ── */
.ckwc-produit .ckwc-prod-price {
    color: var(--ckwc-loop-price-color, #1a1a1a);
    font-size: var(--ckwc-loop-price-size, 20px);
    font-weight: var(--ckwc-loop-price-weight, 600);
    line-height: var(--ckwc-loop-price-lh, 1.2);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

/* ── Séparateurs. La marge basse est REdéclarée ici : Elementor reset les
      <hr> (margin:0, spécificité .elementor hr) et étoufferait l'espacement
      par bloc. ── */
.ckwc-produit .ckwc-prod-sep {
    width: var(--ckwc-prod-sep-w, 100%);
    max-width: 100%;
    height: 0;
    border: 0;
    border-top: var(--ckwc-prod-sep-bw, 1px) solid var(--ckwc-prod-sep-color, #ececec);
    margin: 0 0 var(--ckwc-prod-gap, 12px);
}
.ckwc-produit > .ckwc-prod-sep:last-child { margin-bottom: 0; }

/* ── Rangée quantité + bouton ── */
.ckwc-produit form.cart.ckwc-prod-cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ckwc-prod-cart-gap, 10px);
    padding: 0;
    border: 0;
}
/* WooCommerce pose un clearfix ::before/::after (display:table) sur form.cart :
   en flex, ce pseudo-élément devient un ENFANT invisible qui consomme un gap
   → la rangée se décalait à gauche de la quantité. On le supprime. */
.ckwc-produit form.cart.ckwc-prod-cart::before,
.ckwc-produit form.cart.ckwc-prod-cart::after { content: none !important; display: none !important; }

/* ── Stepper de quantité — copie du stepper de la boucle, portée .ckwc-produit.
      Mêmes variables : le tiroir Boucle produit reste la source des défauts. ── */
.ckwc-produit .ckwc-loop-qty { display: inline-flex; vertical-align: middle; margin: 0; }
.ckwc-produit .ckwc-qty-stepper { display: inline-flex; align-items: stretch; }
.ckwc-produit .ckwc-qty-stepper .quantity { margin: 0 !important; float: none; }
.ckwc-produit .ckwc-qty-stepper input[type=number]::-webkit-inner-spin-button,
.ckwc-produit .ckwc-qty-stepper input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ckwc-produit .ckwc-qty-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ckwc-produit .ckwc-qty-stepper .quantity input,
.ckwc-produit .ckwc-qty-stepper .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) 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-produit .ckwc-qty-arrows {
    display: inline-flex;
    flex-direction: column;
    width: var(--ckwc-loop-qtybtn-size, 22px);
}
.ckwc-produit .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-produit .ckwc-qty-up   { border-radius: 0 var(--ckwc-loop-qty-radius, 4px) 0 0; border-bottom: 0; }
.ckwc-produit .ckwc-qty-down { border-radius: 0 0 var(--ckwc-loop-qty-radius, 4px) 0; }
.ckwc-produit .ckwc-qty-btn svg { width: 62%; height: 62%; max-width: 16px; max-height: 16px; display: block; }

/* Le bouton d'ajout est un .ck-btn : son style vient de l'aspect CercleKit.
   On ne pose ici que le minimum de neutralisation du thème. */
.ckwc-produit .single_add_to_cart_button { margin: 0; }

/* ─────────────────────────────────────────────────────────────
   VARIATIONS — le formulaire de WooCommerce, à la charte du site

   On garde SON markup : le moteur `add-to-cart-variation.js` lit la table des
   attributs, `.single_variation_wrap` et les champs cachés au caractère près.
   Le select porte `ck-f-input` (voir CKWC_Produit_Widget::variation_select_class),
   donc hauteur, rayon, bordure, police et focus viennent de `cercle-form.css` et
   des réglages Création › Forms — on n'en écrit aucun ici, sinon la fiche
   produit serait le seul écran hors charte.

   Ce qui suit est donc UNIQUEMENT la mise en page, et la neutralisation du
   cadre que thème et WooCommerce posent autour d'une table de variations.
   ───────────────────────────────────────────────────────────── */

.ckwc-produit form.cart.variations_form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.ckwc-produit form.cart.variations_form::before,
.ckwc-produit form.cart.variations_form::after { content: none !important; display: none !important; }

.ckwc-produit .variations {
    display: block;
    width: 100%;
    margin: 0 0 var(--ckwc-prod-gap, 12px);
    padding: 0;
    border: 0;
    background: none;
    border-collapse: collapse;
}
.ckwc-produit .variations tbody,
.ckwc-produit .variations tr { display: block; }
.ckwc-produit .variations tr + tr { margin-top: var(--ck-form-gap, 14px); }
.ckwc-produit .variations th,
.ckwc-produit .variations td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
/* Le libellé d'attribut prend les variables de libellé de CercleKit — les
   MÊMES que les champs du site, pas des valeurs à nous. */
.ckwc-produit .variations th.label label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--ck-form-label-font, inherit);
    font-size: var(--ck-form-label-size, inherit);
    font-weight: var(--ck-form-label-weight, 600);
    color: var(--ck-form-label-color, inherit);
}
.ckwc-produit .variations select { width: 100%; max-width: 100%; }
.ckwc-produit .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--ck-form-help-size, 12px);
    color: var(--ck-form-help-color, inherit);
}

/* Zone de variation : le prix (masqué en mode catalogue), la dispo, puis la
   rangée quantité + bouton — celle du produit simple, aux mêmes variables. */
.ckwc-produit .single_variation_wrap { display: block; width: 100%; }
.ckwc-produit .woocommerce-variation { margin-bottom: var(--ckwc-prod-gap, 12px); }
.ckwc-produit .woocommerce-variation:empty { display: none; margin: 0; }
.ckwc-produit .woocommerce-variation-price { display: block; }
.ckwc-produit .woocommerce-variation-price .price {
    color: var(--ckwc-loop-price-color, #1a1a1a);
    font-size: var(--ckwc-loop-price-size, 20px);
    font-weight: var(--ckwc-loop-price-weight, 600);
    line-height: var(--ckwc-loop-price-lh, 1.2);
}
.ckwc-produit .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ckwc-prod-cart-gap, 10px);
}