/* ============================================================
   Checkout Personnalisé — Les Box de Lulu
   Typo : Fraunces (titres) + Inter (texte)
   ============================================================ */

/* -------------------------
   Reset + variables
   ------------------------- */
#cl-checkout {
  --cl-bg:          #F5EFE2;
  --cl-card:        rgb(253, 250, 241);
  --cl-card-border: rgb(218, 216, 201);
  --cl-green:       #2E4D1E;
  --cl-green-dark:  #1E3412;
  --cl-text:        #1C1C1C;
  --cl-muted:       #6B7280;
  --cl-radius:      1rem;
  --cl-radius-sm:   .5rem;
  --cl-shadow:      0 1px 4px rgba(0,0,0,.06);
  --cl-input-bg:    rgb(248, 241, 227);
  font-family: 'Inter', sans-serif;
  color: var(--cl-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

#cl-checkout *,
#cl-checkout *::before,
#cl-checkout *::after {
  box-sizing: border-box;
}

/* -------------------------
   Back link + header
   ------------------------- */
.cl-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--cl-muted) !important;
  text-decoration: none !important;
  margin-bottom: 1.2rem;
  transition: color .15s;
}
.cl-back-link:hover { color: var(--cl-text) !important; }

.cl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.cl-header-tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cl-green);
  margin: 0 0 .4rem;
}
.cl-header-title {
  font-family: 'Fraunces', serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: var(--cl-text) !important;
}
.cl-ssl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cl-card);
  border: 1px solid var(--cl-card-border);
  border-radius: 2rem;
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--cl-muted);
  white-space: nowrap;
  margin-top: .8rem;
}

/* -------------------------
   Layout 2 colonnes
   ------------------------- */
.cl-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 960px) {
  .cl-layout { grid-template-columns: 1fr; }
  .cl-summary-col { order: -1; }
}

/* -------------------------
   Step cards
   ------------------------- */
.cl-step-card {
  background: rgb(253, 250, 241) !important;
  border: 1px solid rgb(218, 216, 201) !important;
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow);
  margin-bottom: 1rem;
  overflow: hidden;
}

.cl-step-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--cl-card-border);
}

.cl-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--cl-green);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}

.cl-step-header h2 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--cl-text) !important;
  flex: 1;
}

.cl-step-body {
  padding: 1.4rem;
}

/* -------------------------
   Grille 2 colonnes (champs)
   ------------------------- */
.cl-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .75rem;
}

@media (max-width: 600px) {
  .cl-grid-2 { grid-template-columns: 1fr; }
}

/* -------------------------
   Champs WooCommerce (override)
   ------------------------- */
#cl-checkout .form-row,
#cl-checkout p.form-row {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

#cl-checkout .form-row input[type="text"],
#cl-checkout .form-row input[type="email"],
#cl-checkout .form-row input[type="tel"],
#cl-checkout .form-row input[type="number"],
#cl-checkout .form-row select {
  width: 100% !important;
  padding: .75rem 1rem !important;
  border: 1px solid var(--cl-card-border) !important;
  border-radius: var(--cl-radius-sm) !important;
  background: var(--cl-input-bg) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  color: var(--cl-text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
  margin: 0 !important;
}

#cl-checkout .form-row input:focus,
#cl-checkout .form-row select:focus {
  border-color: var(--cl-green) !important;
  box-shadow: 0 0 0 3px rgba(46,77,30,.1) !important;
}

#cl-checkout .form-row label { display: none !important; }
#cl-checkout .form-row .required { display: none !important; }

#cl-checkout .form-row.woocommerce-validated input { border-color: var(--cl-card-border) !important; }
#cl-checkout .form-row.woocommerce-invalid input { border-color: #e53e3e !important; }

/* -------------------------
   Section adresse (conditionnelle)
   ------------------------- */
.cl-address-section {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.cl-address-section .cl-field-full {
  grid-column: 1 / -1;
}

/* -------------------------
   Modes de réception
   ------------------------- */
.cl-delivery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

@media (max-width: 600px) {
  .cl-delivery-grid { grid-template-columns: 1fr; }
}

.cl-delivery-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem;
  background: var(--cl-input-bg);
  border: 1.5px solid var(--cl-card-border);
  border-radius: var(--cl-radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.cl-delivery-card:hover {
  border-color: var(--cl-green);
  background: rgb(240, 231, 214);
}

.cl-delivery-card.cl-delivery-selected {
  border-color: var(--cl-green);
  background: rgb(235, 242, 230);
  box-shadow: 0 0 0 3px rgba(46,77,30,.08);
}

.cl-delivery-icon {
  color: var(--cl-green);
  width: 22px;
  height: 22px;
}
.cl-delivery-icon svg { width: 22px; height: 22px; }

.cl-delivery-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--cl-text);
  display: block;
}

.cl-delivery-desc {
  font-size: .78rem;
  color: var(--cl-muted);
  display: block;
}

.cl-delivery-price {
  font-weight: 700;
  font-size: .9rem;
  color: var(--cl-text);
  margin-top: .2rem;
}

/* -------------------------
   Logos cartes bancaires (SVG)
   ------------------------- */
.cl-card-logos {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.cl-card-svg {
  width: 38px;
  height: 24px;
  border-radius: 4px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ========================
   PAIEMENT — Reset complet
   WooCommerce + Stripe UPE + Card Element
   ======================== */

.cl-payment-body {
  padding: 1.4rem !important;
}

/* --- Conteneur principal WooCommerce --- */
#cl-checkout #payment,
body.woocommerce-checkout #cl-checkout #payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* --- Liste des méthodes de paiement --- */
#cl-checkout #payment ul.payment_methods,
#cl-checkout #payment ul.wc_payment_methods {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#cl-checkout #payment ul.payment_methods li,
#cl-checkout #payment ul.wc_payment_methods li,
#cl-checkout #payment .wc_payment_method {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Cacher radio + label quand une seule méthode */
#cl-checkout #payment ul.payment_methods li:only-child > label,
#cl-checkout #payment ul.payment_methods li:only-child > input[type="radio"] {
  display: none !important;
}

#cl-checkout #payment ul.payment_methods li label {
  font-family: 'Inter', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--cl-text) !important;
  margin: 0 0 .5rem !important;
  display: block !important;
  cursor: pointer !important;
}

/* --- payment_box (container des champs) --- */
#cl-checkout #payment .payment_box,
#cl-checkout #payment .woocommerce-checkout-payment .payment_box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 0 !important;
}
#cl-checkout #payment .payment_box::before,
#cl-checkout #payment .payment_box::after,
#cl-checkout #payment .payment_box > *::before,
#cl-checkout #payment .payment_box > *::after {
  display: none !important;
  content: none !important;
}

/* --- Stripe Card Element (version classique) --- */
#cl-checkout #payment .StripeElement,
#cl-checkout #payment .wc-stripe-elements-field,
#cl-checkout #payment .wc-stripe-card-element {
  display: block !important;
  width: 100% !important;
  padding: .85rem 1rem !important;
  border: 1px solid rgb(218, 216, 201) !important;
  border-radius: .5rem !important;
  background: rgb(248, 241, 227) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  margin-bottom: .5rem !important;
  transition: border-color .15s !important;
}
#cl-checkout #payment .StripeElement--focus {
  border-color: #2E4D1E !important;
  box-shadow: 0 0 0 3px rgba(46,77,30,.1) !important;
  outline: none !important;
}
#cl-checkout #payment .StripeElement--invalid {
  border-color: #DC2626 !important;
}

/* --- Stripe Payment Element (UPE) iframe + wrapper --- */
/* Le fond noir/gris vient du .wc-stripe-upe-form ou similaire */
#cl-checkout #payment .wc-stripe-upe-form,
#cl-checkout #payment .wc-stripe-upe-element,
#cl-checkout #payment [id^="wc-stripe-upe"],
#cl-checkout #payment .stripe-payment-element-container,
#cl-checkout #payment #wc-stripe-payment-element,
#cl-checkout #payment #payment-element {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* iframe Stripe — on ne peut pas styler l'intérieur,
   mais on neutralise le conteneur */
#cl-checkout #payment iframe {
  border: none !important;
  outline: none !important;
  display: block !important;
}

/* --- Champ Nom du titulaire (outside Stripe iframe) --- */
#cl-checkout #payment input[type="text"],
#cl-checkout #payment input[name="billing_name"],
#cl-checkout #payment #stripe-billing-name,
#cl-checkout #payment .wc-stripe-name-field input,
#cl-checkout #payment [id*="name"] {
  display: block !important;
  width: 100% !important;
  padding: .85rem 1rem !important;
  border: 1px solid rgb(218, 216, 201) !important;
  border-radius: .5rem !important;
  background: rgb(248, 241, 227) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  color: #1C1C1C !important;
  box-shadow: none !important;
  margin-bottom: .5rem !important;
  box-sizing: border-box !important;
  outline: none !important;
  -webkit-appearance: none !important;
}
#cl-checkout #payment input[type="text"]:focus {
  border-color: #2E4D1E !important;
  box-shadow: 0 0 0 3px rgba(46,77,30,.1) !important;
}

/* --- Bouton "Passer la commande" WooCommerce — invisible --- */
#cl-checkout #payment #place_order,
#cl-checkout #payment button[type="submit"],
#cl-checkout #payment .button.alt,
#cl-checkout #payment .button[name="woocommerce_checkout_place_order"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- Note de sécurité --- */
.cl-security-note {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .78rem !important;
  color: var(--cl-muted) !important;
  margin: .75rem 0 0 !important;
}

/* --- Termes & conditions --- */
#cl-checkout .woocommerce-privacy-policy-text,
#cl-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: .78rem !important;
  color: var(--cl-muted) !important;
  margin: .75rem 0 0 !important;
}

/* ========================
   Hello Elementor — reset global agressif
   ======================== */
#cl-checkout input[type="text"],
#cl-checkout input[type="email"],
#cl-checkout input[type="tel"],
#cl-checkout input[type="number"],
#cl-checkout input[type="password"],
#cl-checkout select,
#cl-checkout textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: .5rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  color: #1C1C1C !important;
  box-shadow: none !important;
  margin: 0 !important;
}
#cl-checkout a {
  text-decoration: none !important;
  transition: color .15s !important;
}

/* Note de sécurité */
.cl-security-note {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .78rem !important;
  color: var(--cl-muted) !important;
  margin: .5rem 0 0 !important;
}

/* Termes & conditions */
#cl-checkout .woocommerce-privacy-policy-text,
#cl-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: .78rem !important;
  color: var(--cl-muted) !important;
  margin: .75rem 0 0 !important;
}

/* -------------------------
   Override Hello Elementor agressif
   — cible tous les inputs/buttons dans #cl-checkout
   ------------------------- */
#cl-checkout input[type="text"],
#cl-checkout input[type="email"],
#cl-checkout input[type="tel"],
#cl-checkout input[type="number"],
#cl-checkout input[type="password"],
#cl-checkout select,
#cl-checkout textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: .5rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  color: #1C1C1C !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Tous les boutons dans le checkout hors nos boutons custom */
#cl-checkout button:not(.cl-pay-btn):not(.cl-notice-close):not(.cl-qty-btn):not(.cl-coupon-btn) {
  font-family: 'Inter', sans-serif !important;
}

/* Hello Elementor reset sur les liens */
#cl-checkout a {
  text-decoration: none !important;
  transition: color .15s !important;
}

/* -------------------------
   Récapitulatif sticky (droite)
   ------------------------- */
.cl-summary-col {
  position: sticky;
  top: 2rem;
}

.cl-summary-card {
  background: var(--cl-card);
  border: 1px solid var(--cl-card-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow);
  padding: 1.4rem;
}

.cl-summary-title {
  font-family: 'Fraunces', serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.1rem !important;
  color: var(--cl-text) !important;
}

/* Produits */
.cl-order-items {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-bottom: 1.1rem;
}

.cl-order-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.cl-order-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--cl-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cl-input-bg);
}
.cl-order-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cl-order-item-info { flex: 1; }

.cl-order-item-name {
  font-size: .88rem;
  font-weight: 600;
  margin: 0 0 2px !important;
  color: var(--cl-text);
}
.cl-order-item-meta {
  font-size: .75rem;
  color: var(--cl-muted);
  margin: 0 !important;
}
.cl-order-item-qty {
  font-size: .75rem;
  color: var(--cl-muted);
  margin: 2px 0 0 !important;
}

.cl-order-item-price {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cl-text);
}
.cl-order-item-price .woocommerce-Price-amount { font-size: inherit !important; }

/* Totaux */
.cl-order-totals {
  border-top: 1px solid var(--cl-card-border);
  padding-top: .85rem;
  margin-bottom: .85rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.cl-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  color: var(--cl-muted);
}

.cl-total-row span:last-child {
  color: var(--cl-text);
  font-weight: 500;
}

.cl-free { color: var(--cl-green); font-weight: 600; }

.cl-total-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 0;
  border-top: 1px solid var(--cl-card-border);
  margin-bottom: 1rem;
}

.cl-total-final span:first-child {
  font-size: .9rem;
  font-weight: 600;
  color: var(--cl-text);
}

.cl-frag-total {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cl-text);
}
.cl-frag-total .woocommerce-Price-amount { font-size: inherit !important; }

/* Bouton Payer */
.cl-pay-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: .95rem 1rem !important;
  background: var(--cl-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  line-height: 1.4 !important;
  text-align: center !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

.cl-pay-btn:hover { background: var(--cl-green-dark) !important; }

.cl-pay-btn .woocommerce-Price-amount { color: #fff !important; font-size: inherit !important; }

.cl-pay-note {
  text-align: center;
  font-size: .78rem;
  color: var(--cl-muted);
  margin: .6rem 0 0 !important;
}

/* -------------------------
   Validation errors WooCommerce
   ------------------------- */
#cl-checkout .woocommerce-notices-wrapper .woocommerce-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  border-radius: var(--cl-radius-sm) !important;
  padding: .75rem 1rem !important;
  list-style: none !important;
  margin-bottom: 1rem !important;
}

/* ============================================================
   Panier personnalisé — cl-cart
   ============================================================ */

#cl-cart {
  --cl-bg:          #F5EFE2;
  --cl-card:        rgb(253, 250, 241);
  --cl-card-border: rgb(218, 216, 201);
  --cl-green:       #2E4D1E;
  --cl-green-dark:  #1E3412;
  --cl-text:        #1C1C1C;
  --cl-muted:       #6B7280;
  --cl-radius:      1rem;
  --cl-radius-sm:   .5rem;
  --cl-shadow:      0 1px 4px rgba(0,0,0,.06);
  --cl-input-bg:    rgb(248, 241, 227);
  font-family: 'Inter', sans-serif;
  color: var(--cl-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

#cl-cart *,
#cl-cart *::before,
#cl-cart *::after { box-sizing: border-box; }

/* Header */
.cl-cart-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
  gap: .75rem;
}

.cl-cart-title {
  font-family: 'Fraunces', serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--cl-text) !important;
}

.cl-item-count {
  background: var(--cl-card);
  border: 1px solid var(--cl-card-border);
  border-radius: 2rem;
  padding: 4px 14px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--cl-muted);
  white-space: nowrap;
}

/* Panier vide */
.cl-cart-empty {
  text-align: center;
  padding: 4rem 1rem;
}
.cl-cart-empty p { color: var(--cl-muted); margin-bottom: 1.5rem; }

/* Layout */
#cl-cart .cl-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 960px) {
  #cl-cart .cl-layout { grid-template-columns: 1fr; }
  #cl-cart .cl-summary-col { order: -1; }
}

/* Articles */
.cl-cart-items {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.cl-cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--cl-card);
  border: 1px solid var(--cl-card-border);
  border-radius: var(--cl-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--cl-shadow);
}

.cl-cart-item-img {
  width: 72px;
  height: 72px;
  border-radius: var(--cl-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cl-input-bg);
}
.cl-cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cl-cart-item-info { flex: 1; min-width: 0; }

.cl-cart-item-name {
  font-size: .95rem !important;
  font-weight: 600 !important;
  margin: 0 0 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-cart-item-name a { color: var(--cl-text) !important; text-decoration: none !important; }

.cl-cart-item-meta {
  font-size: .78rem;
  color: var(--cl-muted);
  margin: 0 0 1px !important;
}
.cl-cart-item-ings {
  font-size: .75rem;
  color: var(--cl-muted);
  margin: 0 0 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.cl-cart-item-unit {
  font-size: .82rem;
  color: var(--cl-muted);
  margin: 0 !important;
}
.cl-cart-item-unit .woocommerce-Price-amount { font-size: inherit !important; }

/* Contrôles quantité */
.cl-qty-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--cl-input-bg);
  border: 1px solid var(--cl-card-border);
  border-radius: 2rem;
  overflow: hidden;
  flex-shrink: 0;
}

.cl-qty-btn {
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--cl-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  box-shadow: none !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.cl-qty-btn:hover { background: var(--cl-card-border) !important; }

.cl-qty-input {
  width: 36px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: var(--cl-text) !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
  outline: none !important;
  box-shadow: none !important;
}
.cl-qty-input::-webkit-inner-spin-button,
.cl-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Prix total ligne */
.cl-cart-item-total {
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--cl-text);
}
.cl-cart-item-total .woocommerce-Price-amount { font-size: inherit !important; }

/* Bouton supprimer */
.cl-remove-btn {
  color: var(--cl-muted) !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: color .15s !important;
  flex-shrink: 0;
  padding: 4px !important;
}
.cl-remove-btn:hover { color: #DC2626 !important; }

/* Badges info */
.cl-cart-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.cl-badge-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cl-card);
  border: 1px solid var(--cl-card-border);
  border-radius: 2rem;
  padding: 6px 14px;
  font-size: .78rem;
  color: var(--cl-muted);
}

/* Récapitulatif panier (colonne droite) */
#cl-cart .cl-summary-card {
  background: var(--cl-card);
  border: 1px solid var(--cl-card-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow);
  padding: 1.4rem;
  position: sticky;
  top: 2rem;
}

/* Code promo */
.cl-coupon-section {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--cl-card-border);
}

.cl-coupon-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cl-muted);
  margin: 0 0 .7rem !important;
}

.cl-coupon-form {
  display: flex;
  gap: .5rem;
}

.cl-coupon-input {
  flex: 1;
  padding: .6rem .9rem;
  border: 1px solid var(--cl-card-border);
  border-radius: var(--cl-radius-sm);
  background: var(--cl-input-bg);
  font-size: .88rem;
  color: var(--cl-text);
  outline: none;
  font-family: 'Inter', sans-serif;
}
.cl-coupon-input:focus { border-color: var(--cl-green); }
.cl-coupon-input::placeholder { color: var(--cl-muted); }

.cl-coupon-btn {
  padding: .6rem 1rem !important;
  background: var(--cl-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cl-radius-sm) !important;
  font-size: .83rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  white-space: nowrap !important;
  transition: background .15s !important;
}
.cl-coupon-btn:hover { background: var(--cl-green-dark) !important; }

/* Remise code promo */
.cl-coupon-row { color: var(--cl-green); }
.cl-discount { color: var(--cl-green) !important; font-weight: 600; }
.cl-remove-coupon { color: var(--cl-muted) !important; font-size: .75rem; margin-left: 4px; text-decoration: none !important; }
.cl-remove-coupon:hover { color: #DC2626 !important; }

/* Note livraison */
.cl-shipping-note {
  font-style: italic;
  color: var(--cl-muted);
  font-size: .82rem;
}

/* Bouton passer au paiement */
.cl-checkout-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: .95rem 1rem !important;
  background: var(--cl-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s !important;
  margin-bottom: 0 !important;
}
.cl-checkout-btn:hover { background: var(--cl-green-dark) !important; color: #fff !important; }

@media (max-width: 600px) {
  .cl-cart-item { flex-wrap: wrap; }
  .cl-cart-item-info { flex: 1 1 calc(100% - 88px); }
  .cl-cart-item-total { order: 3; }
  .cl-remove-btn { order: 4; }
}