/* Craft Sticky Bar CSS v6.0.0 */
:root {
  --csb-bg:   #ffffff;
  --csb-pt:   #1a1a1a;
  --csb-bb:   #3b5bdb;
  --csb-bt:   #ffffff;
  --csb-cb:   #f1f3f5;
  --csb-ci:   #1a1a1a;
  --csb-bw:   0px;
  --csb-bc:   #e9ecef;
  --csb-cr:   50px;
  --csb-br:   14px;
  --csb-bh:   68px;
  --csb-cs:   48px;
  --csb-buh:  48px;
  --csb-buf:  14px;
  --csb-scs:  44px;
  --csb-sbh:  44px;
  --csb-sbf:  13px;
  --csb-z:    9000;
}

/* ══════════════════════════════════════
   BARRE STICKY
══════════════════════════════════════ */
#csb-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--csb-z) !important;
  display: none;
  align-items: center;
  gap: 10px;
  height: var(--csb-bh);
  padding: 0 14px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--csb-bg);
  border-top: var(--csb-bw) solid var(--csb-bc);
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  font-family: -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}
#csb-bar.on { display: flex !important; }

/* ══════════════════════════════════════
   PRIX (sticky)
══════════════════════════════════════ */
.csb-price-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.csb-price-label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}
.csb-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--csb-pt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.csb-price del { opacity: .4; font-size: .7em; font-weight: 500; }
.csb-price ins { text-decoration: none; }

/* ══════════════════════════════════════
   BOUTON PANIER (sticky)
══════════════════════════════════════ */
.csb-cb {
  position: relative;
  width: var(--csb-cs);
  height: var(--csb-cs);
  border-radius: var(--csb-cr);
  border: none;
  background: var(--csb-cb);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
.csb-cb:hover  { transform: scale(1.06); }
.csb-cb:active { transform: scale(.96); }
.csb-cb .csb-ci {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--csb-ci);
  transition: opacity .18s;
}
.csb-cb .csb-cs {
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -11px; margin-left: -11px;
  width: 22px; height: 22px;
  border: 2.5px solid rgba(26,26,26,.15);
  border-top-color: var(--csb-ci);
  border-radius: 50%;
  opacity: 0;
  animation: csb-spin .65s linear infinite;
  transition: opacity .18s;
}
.csb-cb.loading .csb-ci { opacity: 0; }
.csb-cb.loading .csb-cs { opacity: 1; }

/* ══════════════════════════════════════
   BOUTON ACHETER (sticky)
══════════════════════════════════════ */
.csb-bb {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--csb-buh);
  padding: 0 18px;
  border-radius: var(--csb-br);
  border: none;
  background: var(--csb-bb);
  color: var(--csb-bt);
  font-size: var(--csb-buf);
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s, transform .15s;
  min-width: 0;
}
.csb-bb:hover  { opacity: .88; transform: scale(1.02); }
.csb-bb:active { transform: scale(.97); }
.csb-bb:disabled { opacity: .6; cursor: default; transform: none; }
.csb-bb .csb-bt { pointer-events: none; transition: opacity .18s; }
.csb-bb .csb-bs {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: csb-spin .65s linear infinite;
  flex-shrink: 0;
}
.csb-bb.loading .csb-bt { opacity: .4; }
.csb-bb.loading .csb-bs { display: inline-block; }

/* ══════════════════════════════════════
   BOUTON "CHOISIR UNE OPTION" (sticky variable)
══════════════════════════════════════ */
.csb-choose {
  flex: 2;
  height: var(--csb-buh);
  padding: 0 18px;
  border-radius: var(--csb-br);
  border: 2px solid var(--csb-bb);
  background: transparent;
  color: var(--csb-bb);
  font-size: var(--csb-buf);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s;
  min-width: 0;
}
.csb-choose:hover { background: var(--csb-bb); color: var(--csb-bt); }

/* ══════════════════════════════════════
   STICKY — HORS STOCK (BIS)
══════════════════════════════════════ */
.csb-oos-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.csb-oos-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  color: #9a3412;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.csb-bis-btn {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--csb-buh);
  padding: 0 18px;
  border-radius: var(--csb-br);
  border: 1.5px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-size: var(--csb-buf);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s, transform .15s;
  min-width: 0;
}
.csb-bis-btn:hover  { background: #f59e0b; color: #fff; transform: scale(1.02); }
.csb-bis-btn:active { transform: scale(.97); }
.csb-bis-icon { font-size: 1em; flex-shrink: 0; }

/* ══════════════════════════════════════
   SHORTCODE [csb_bar] — CONTENEUR
   ─────────────────────────────────────
   Comportement des largeurs selon data-type :

   [data-type="simple"]  → panier compact + ACHETER standard (flex:2)
   [data-type="wapf"]    → panier compact + ACHETER pleine largeur (flex:1)
   [data-type="variable"]→ panier compact + CHOISIR pleine largeur
                           (après sélection : panier + ACHETER pleine largeur)
   [data-type="outofstock"] → BIS bouton pleine largeur
══════════════════════════════════════ */
.csb-sc {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}

/* Pleine largeur : les classes fw prennent tout l'espace restant */
.csb-sc-fw {
  flex: 1 1 0;
  min-width: 0;
}

/* ══════════════════════════════════════
   SHORTCODE — BOUTON PANIER
══════════════════════════════════════ */
.csb-sc-c {
  position: relative;
  width: var(--csb-scs);
  height: var(--csb-scs);
  min-width: var(--csb-scs);
  border-radius: var(--csb-cr);
  border: 1.5px solid rgba(0,0,0,.1);
  background: var(--csb-cb);
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
  box-sizing: border-box;
}
.csb-sc-c:hover  { transform: scale(1.06); }
.csb-sc-c:active { transform: scale(.96); }
.csb-sc-c .csb-ci {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--csb-ci);
  transition: opacity .18s;
}
.csb-sc-c .csb-cs {
  position: absolute; top: 50%; left: 50%;
  margin-top: -10px; margin-left: -10px;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(26,26,26,.15);
  border-top-color: var(--csb-ci);
  border-radius: 50%; opacity: 0;
  animation: csb-spin .65s linear infinite;
  transition: opacity .18s;
}
.csb-sc-c.loading .csb-ci { opacity: 0; }
.csb-sc-c.loading .csb-cs { opacity: 1; }

/* ══════════════════════════════════════
   SHORTCODE — BOUTON ACHETER
   → par défaut : flex:2 (simple)
   → avec .csb-sc-fw : prend tout l'espace restant (wapf, variable-après)
══════════════════════════════════════ */
.csb-sc-b {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--csb-sbh);
  padding: 0 18px;
  border-radius: var(--csb-br);
  border: none;
  background: var(--csb-bb);
  color: var(--csb-bt);
  font-size: var(--csb-sbf);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s, transform .15s;
  min-width: 0;
  box-sizing: border-box;
}
.csb-sc-b:hover    { opacity: .88; transform: scale(1.02); }
.csb-sc-b:active   { transform: scale(.97); }
.csb-sc-b:disabled { opacity: .6; cursor: default; transform: none; }
.csb-sc-b .csb-bt  { pointer-events: none; transition: opacity .18s; }
.csb-sc-b .csb-bs {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: csb-spin .65s linear infinite;
  flex-shrink: 0;
}
.csb-sc-b.loading .csb-bt { opacity: .4; }
.csb-sc-b.loading .csb-bs { display: inline-block; }

/* ══════════════════════════════════════
   SHORTCODE — BOUTON "CHOISIR UNE OPTION"
   (variable avant sélection — pleine largeur)
══════════════════════════════════════ */
.csb-sc-choose {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--csb-sbh);
  padding: 0 18px;
  border-radius: var(--csb-br);
  border: 2px solid var(--csb-bb);
  background: transparent;
  color: var(--csb-bb);
  font-size: var(--csb-sbf);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s, transform .15s;
  gap: 5px;
  min-width: 0;
  box-sizing: border-box;
}
.csb-sc-choose:hover  { background: var(--csb-bb); color: var(--csb-bt); transform: scale(1.02); }
.csb-sc-choose:active { transform: scale(.97); }

/* ══════════════════════════════════════
   SHORTCODE — BOUTON BIS (hors stock, pleine largeur)
══════════════════════════════════════ */
.csb-sc-bis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--csb-sbh);
  padding: 0 20px;
  border-radius: var(--csb-br);
  border: 1.5px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-size: var(--csb-sbf);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s, transform .15s;
  min-width: 0;
  box-sizing: border-box;
}
.csb-sc-bis:hover  { background: #f59e0b; color: #fff; transform: scale(1.02); }
.csb-sc-bis:active { transform: scale(.97); }
.csb-sc-bis-icon   { font-size: 1em; flex-shrink: 0; }

/* ══════════════════════════════════════
   SHORTCODE — PRIX (BVP sync)
══════════════════════════════════════ */
.csb-sc-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--csb-pt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.csb-sc-price del { opacity: .5; font-size: .8em; font-weight: 500; }
.csb-sc-price ins { text-decoration: none; }
.csb-sc-oos-txt {
  color: #9a3412;
  font-size: 12px;
  font-weight: 600;
}

/* ══════════════════════════════════════
   SHORTCODE — MESSAGES FEEDBACK
══════════════════════════════════════ */
.csb-sc-msg {
  font-size: 12px;
  font-weight: 600;
  min-height: 16px;
  transition: color .2s;
  display: block;
  width: 100%;
  margin-top: 4px;
}
.csb-sc-msg.ok  { color: #166534; }
.csb-sc-msg.err { color: #991b1b; }

/* ══════════════════════════════════════
   ANIMATION
══════════════════════════════════════ */
@keyframes csb-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   STICKY — WAPF : bouton ACHETER pleine largeur
   Le bouton panier reste compact, ACHETER prend flex:1
══════════════════════════════════════ */
#csb-bar[data-type="wapf"] .csb-bb {
  flex: 1;
}

/* ══════════════════════════════════════
   WAPF SHORTCODE — bouton ACHETER pleine largeur
   Le bouton panier reste compact, ACHETER prend flex:1
══════════════════════════════════════ */
.csb-wapf-form .csb-sc { width: 100%; }
.csb-wapf-form .csb-sc-b--wapf {
  flex: 1 1 0 !important;
  min-width: 0;
}

/* ══════════════════════════════════════
   MOBILE — cacher les boutons du shortcode
   Les champs WAPF restent visibles.
   La sticky bar gère les boutons.
══════════════════════════════════════ */
@media (max-width: 768px) {
  .csb-wapf-form .csb-sc {
    display: none !important;
  }
}

/* ══════════════════════════════════════
   ANIMATION — reset forcé si idle
   Empêche le spinner de tourner indéfiniment
══════════════════════════════════════ */
.csb-bb:not(.loading) .csb-bs,
.csb-sc-b:not(.loading) .csb-bs,
.csb-sc-c:not(.loading) .csb-cs,
.csb-cb:not(.loading) .csb-cs {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.csb-bb:not(.loading) .csb-bt,
.csb-sc-b:not(.loading) .csb-bt {
  opacity: 1 !important;
}
.csb-cb:not(.loading) .csb-ci,
.csb-sc-c:not(.loading) .csb-ci {
  opacity: 1 !important;
}

/* ══════════════════════════════════════
   PLEINE LARGEUR — Shortcode WAPF dans Elementor
   Elementor wrapping peut casser le flex.
   On force le bouton à prendre tout l'espace.
══════════════════════════════════════ */
.csb-wapf-form .csb-sc {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box;
}
.csb-wapf-form .csb-sc-b--wapf,
.csb-wapf-form .csb-sc-b.csb-sc-fw {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
/* Elementor ajoute souvent un widget-container qui limite la largeur */
.elementor-widget-shortcode .csb-wapf-form,
.elementor-widget .csb-wapf-form {
  width: 100% !important;
}
.elementor-widget-shortcode .csb-sc,
.elementor-widget .csb-sc {
  width: 100% !important;
}

/* ══════════════════════════════════════
   MOBILE — cacher boutons de TOUS les shortcodes
   (simple, wapf, variable) — la sticky bar prend le relais
   Les champs WAPF restent toujours visibles.
══════════════════════════════════════ */
@media (max-width: 768px) {
  .csb-sc { display: none !important; }
  .csb-wapf-form .csb-sc { display: none !important; }
}

/* ══════════════════════════════════════
   PLEINE LARGEUR — shortcode dans Elementor
   Force le bouton ACHETER à occuper tout l'espace
   quelle que soit la profondeur du wrapper Elementor.
══════════════════════════════════════ */
.csb-wapf-form {
  width: 100% !important;
  display: block !important;
}
.csb-wapf-form .csb-sc {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.csb-wapf-form .csb-sc-b,
.csb-wapf-form .csb-sc-b--wapf,
.csb-wapf-form .csb-sc-fw {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 0 !important;          /* force le flex-grow à calculer */
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Tous les wrappers Elementor en chemin */
.elementor-widget-container .csb-wapf-form,
.elementor-widget-shortcode .csb-wapf-form,
.elementor-column .csb-wapf-form,
.elementor-section .csb-wapf-form {
  width: 100% !important;
}
.elementor-widget-container .csb-sc,
.elementor-widget-shortcode .csb-sc,
.elementor-column .csb-sc,
.elementor-section .csb-sc {
  width: 100% !important;
  display: flex !important;
}

/* ══════════════════════════════════════
   SUPPRIMER LES NOTICES WC NATIVES
   "Voir le panier" / "Vous ne pouvez pas ajouter..."
   qui apparaissent sur la page produit après ajout AJAX.
   Ces notices sont gérées par CSB/CraftCart directement.
══════════════════════════════════════ */
.woocommerce-notices-wrapper,
.woocommerce-message,
.wc-block-components-notice-banner,
.woocommerce-info {
  display: none !important;
}

/* ══════════════════════════════════════
   RETIRER LES TRAITS BLEUS SUR LES CHAMPS
   (outline de focus/validation qui reste collé)
══════════════════════════════════════ */
.csb-wapf-form .wapf-field-container,
.csb-wapf-form input,
.csb-wapf-form select,
.csb-wapf-form textarea {
  outline: none !important;
}
.csb-wapf-form input:focus,
.csb-wapf-form select:focus,
.csb-wapf-form textarea:focus {
  outline: 1px solid var(--csb-bb) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   MESSAGE ERREUR STICKY BAR
   Bien positionné au-dessus de la barre,
   full-width, style cohérent
══════════════════════════════════════ */
.csb-notice {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  right: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  z-index: 2;
  border-radius: 0;
  display: none;
  animation: csb-noticein .2s ease;
}
.csb-notice.csb-notice--err {
  background: #fef2f2;
  border-top: 1.5px solid #fecaca;
  color: #991b1b;
  display: block;
}
.csb-notice.csb-notice--ok {
  background: #f0fdf4;
  border-top: 1.5px solid #bbf7d0;
  color: #166534;
  display: block;
}
@keyframes csb-noticein {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════
   MESSAGE ERREUR SHORTCODE
   Affiché sous les boutons, bien stylisé
══════════════════════════════════════ */
.csb-sc-msg {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  animation: csb-noticein .2s ease;
}
.csb-sc-msg:empty { display: none !important; }
.csb-sc-msg.ok  {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #166534;
}
.csb-sc-msg.err {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #991b1b;
}

/* ══════════════════════════════════════
   STICKY BAR — ACHETER MAINTENANT pleine largeur
   Sur mobile le texte ne doit pas être coupé
══════════════════════════════════════ */
@media (max-width: 480px) {
  #csb-bar .csb-bb .csb-bt {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
  #csb-bar .csb-price {
    font-size: 14px !important;
  }
}

/* ══════════════════════════════════════
   SHORTCODE — message d'erreur SOUS les boutons
   Le .csb-sc est flex horizontal (boutons).
   Le .csb-sc-msg doit être en-dessous, pas à côté.
   On wrap le tout dans .csb-sc-wrap pour contrôler le layout.
══════════════════════════════════════ */
.csb-sc-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}
.csb-sc-wrap .csb-sc {
  width: 100% !important;
}
.csb-sc-wrap .csb-sc-msg {
  order: 2; /* toujours après les boutons */
  margin-top: 8px;
}
/* Compatibilité si pas de wrap (fallback) */
.csb-sc { flex-wrap: wrap; }
.csb-sc .csb-sc-msg {
  flex-basis: 100%;
  order: 99;
  margin-top: 8px;
}

/* ══════════════════════════════════════
   FORMULAIRE BIS dans le shortcode [csb_bar]
   Reprend le style du formulaire BIS natif
   avec les couleurs CSB
══════════════════════════════════════ */
.csb-bis-shortcode-wrap {
  width: 100%;
}
.csb-bis-shortcode-wrap .cwginstock-subscribe-form,
.csb-bis-shortcode-wrap .cwginstock-panel-primary {
  border-radius: 12px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-heading {
  background: var(--csb-bb) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-heading h4 {
  color: var(--csb-bt) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-body {
  background: #f8fafc !important;
  border-radius: 0 0 10px 10px !important;
  padding: 14px 16px !important;
}
.csb-bis-shortcode-wrap .cwgstock_email,
.csb-bis-shortcode-wrap .cwgstock_name {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
  background: #fff !important;
}
.csb-bis-shortcode-wrap .cwgstock_button {
  width: 100% !important;
  background: var(--csb-bb) !important;
  color: var(--csb-bt) !important;
  border: none !important;
  border-radius: var(--csb-br) !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
}
.csb-bis-shortcode-wrap .cwgstock_button:hover { opacity: .88 !important; }

/* ══════════════════════════════════════
   PAGE HORS STOCK — pas de padding en bas
   (sticky bar retirée)
══════════════════════════════════════ */
body.single-product.woocommerce-product-out-of-stock {
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════════
   CHAMPS WAPF — design Craft Popup
   Labels, inputs, selects, bouton submit
   Reprend exactement le langage visuel
   des sélecteurs Craft Popup Notification
══════════════════════════════════════ */

/* Variables locales (héritées du popup) */
.csb-wapf-form,
.wapf-wrapper,
.wapf {
  --wf-blue:    #3181FF;
  --wf-blue-lt: rgba(49,129,255,0.12);
  --wf-border:  #d1d5db;
  --wf-bg:      #f9fafb;
  --wf-text:    #111827;
  --wf-muted:   #6b7280;
  --wf-r:       9px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ── Label ── */
.csb-wapf-form .wapf-field-label label,
.wapf-field-label label,
.wapf-field-container .wapf-field-label label {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--wf-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  margin-bottom: 5px !important;
  line-height: 1.4 !important;
}

/* Indicateur requis */
.csb-wapf-form .wapf-field-label label abbr,
.wapf-field-label label abbr {
  color: #ef4444 !important;
  text-decoration: none !important;
  margin-left: 3px !important;
}

/* ── Input texte / email / url / number / textarea ── */
.csb-wapf-form .wapf-input[type="text"],
.csb-wapf-form .wapf-input[type="email"],
.csb-wapf-form .wapf-input[type="url"],
.csb-wapf-form .wapf-input[type="number"],
.csb-wapf-form .wapf-input[type="tel"],
.csb-wapf-form textarea.wapf-input,
.wapf-field-container input.wapf-input[type="text"],
.wapf-field-container input.wapf-input[type="email"],
.wapf-field-container input.wapf-input[type="number"],
.wapf-field-container textarea.wapf-input {
  width: 100% !important;
  padding: 10px 12px !important;
  background: var(--wf-bg) !important;
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-r) !important;
  font-size: 0.93rem !important;
  font-family: inherit !important;
  color: var(--wf-text) !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.csb-wapf-form .wapf-input[type="text"]:focus,
.csb-wapf-form .wapf-input[type="email"]:focus,
.csb-wapf-form .wapf-input[type="number"]:focus,
.csb-wapf-form textarea.wapf-input:focus,
.wapf-field-container input.wapf-input:focus,
.wapf-field-container textarea.wapf-input:focus {
  border-color: var(--wf-blue) !important;
  box-shadow: 0 0 0 3px var(--wf-blue-lt) !important;
}

/* ── Select ── */
.csb-wapf-form select.wapf-input,
.wapf-field-container select.wapf-input {
  width: 100% !important;
  padding: 10px 36px 10px 12px !important;
  background: var(--wf-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  border: 1.5px solid var(--wf-border) !important;
  border-radius: var(--wf-r) !important;
  font-size: 0.93rem !important;
  font-family: inherit !important;
  color: var(--wf-text) !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}
.csb-wapf-form select.wapf-input:focus,
.wapf-field-container select.wapf-input:focus {
  border-color: var(--wf-blue) !important;
  box-shadow: 0 0 0 3px var(--wf-blue-lt) !important;
}

/* ── Checkboxes & Radios — style pill ── */
.csb-wapf-form .wapf-field-checkboxes .wapf-checkable,
.csb-wapf-form .wapf-field-radio .wapf-checkable,
.wapf-field-container .wapf-checkable {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: var(--wf-bg) !important;
  border: 1.5px solid var(--wf-border) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: border-color .18s, background .18s !important;
  margin: 3px 4px 3px 0 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--wf-text) !important;
  user-select: none !important;
}
.csb-wapf-form .wapf-checkable.wapf-checked,
.wapf-field-container .wapf-checkable.wapf-checked {
  border-color: var(--wf-blue) !important;
  background: var(--wf-blue-lt) !important;
  color: var(--wf-blue) !important;
  font-weight: 600 !important;
}
.csb-wapf-form .wapf-checkable:hover,
.wapf-field-container .wapf-checkable:hover {
  border-color: var(--wf-blue) !important;
}
/* Cacher le vrai input */
.csb-wapf-form .wapf-checkable input[type="checkbox"],
.csb-wapf-form .wapf-checkable input[type="radio"],
.wapf-field-container .wapf-checkable input {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--wf-blue) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* ── Description / instructions ── */
.csb-wapf-form .wapf-field-description,
.wapf-field-container .wapf-field-description {
  font-size: 0.78rem !important;
  color: var(--wf-muted) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* ── Séparation entre champs ── */
.csb-wapf-form .wapf-field-container,
.wapf-field-container {
  margin-bottom: 16px !important;
}

/* ── Container général WAPF dans shortcode ── */
.csb-wapf-form .wapf,
.csb-wapf-form .wapf-wrapper {
  margin-bottom: 16px !important;
}
.csb-wapf-form .wapf-field-group {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   FORMULAIRE BIS — même design Craft Popup
   Reprend le style des sélecteurs
══════════════════════════════════════ */
.csb-bis-shortcode-wrap .cwginstock-subscribe-form {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-primary {
  box-shadow: none !important;
  border: none !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-heading {
  background: var(--csb-bb) !important;
  padding: 14px 18px !important;
  border-bottom: none !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-heading h4 {
  color: var(--csb-bt) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
}
.csb-bis-shortcode-wrap .cwginstock-panel-body {
  background: #f9fafb !important;
  padding: 16px !important;
  border-top: none !important;
  border: 1.5px solid #e5e7eb !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
}
/* Email input */
.csb-bis-shortcode-wrap .cwgstock_email,
.csb-bis-shortcode-wrap .cwgstock_name {
  width: 100% !important;
  padding: 10px 12px !important;
  background: #fff !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 9px !important;
  font-size: 0.93rem !important;
  color: #111827 !important;
  outline: none !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  transition: border-color .2s, box-shadow .2s !important;
  -webkit-appearance: none !important;
  text-align: left !important;
}
.csb-bis-shortcode-wrap .cwgstock_email:focus,
.csb-bis-shortcode-wrap .cwgstock_name:focus {
  border-color: #3181FF !important;
  box-shadow: 0 0 0 3px rgba(49,129,255,0.12) !important;
}
/* Bouton submit */
.csb-bis-shortcode-wrap .cwgstock_button {
  width: 100% !important;
  padding: 11px 20px !important;
  background: var(--csb-bb) !important;
  color: var(--csb-bt) !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  letter-spacing: 0.3px !important;
  transition: opacity .2s, transform .2s !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}
.csb-bis-shortcode-wrap .cwgstock_button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}
/* Message retour */
.csb-bis-shortcode-wrap .cwgstock_output {
  font-size: 0.85rem !important;
  text-align: center !important;
  margin-top: 8px !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════
   WAPF FAKE SELECT — design Craft Popup
   Remplace le <select> natif du navigateur
   par un dropdown custom avec recherche
══════════════════════════════════════ */

/* Le vrai select : caché une fois le fake construit (classe ajoutée par JS) */
.csb-wapf-form select.wapf-input.wapf-select-hidden,
.wapf-field-container select.wapf-input.wapf-select-hidden {
  display: none !important;
}
/* Avant construction : select reste visible mais on indique l'état en cours */
.csb-wapf-form select.wapf-input,
.wapf-field-container select.wapf-input {
  /* Garde l'apparence par défaut jusqu'à ce que le fake soit prêt */
}

/* Trigger — reprend .rcsp-fake-select */
.wapf-fake-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1.5px solid #d1d5db;
  border-radius: 9px;
  cursor: pointer;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size: 0.93rem;
  transition: border-color .2s, box-shadow .2s;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.wapf-fake-trigger:hover,
.wapf-fake-trigger.wapf-open {
  border-color: #3181FF;
  box-shadow: 0 0 0 3px rgba(49,129,255,.12);
}
.wapf-fake-trigger-text {
  color: #111827;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wapf-fake-trigger-text.wapf-placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.wapf-fake-arrow {
  color: #6b7280;
  font-size: 0.6rem;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform .2s;
  pointer-events: none;
}
.wapf-fake-trigger.wapf-open .wapf-fake-arrow {
  transform: rotate(180deg);
}

/* Dropdown panel */
.wapf-fake-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  background: #fff;
  border: 1.5px solid #3181FF;
  border-top: none;
  border-radius: 0 0 9px 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  z-index: 9999;
  overflow: hidden;
}
.wapf-fake-dropdown.wapf-dd-open {
  display: block;
}

/* Wrapper position relative pour le dropdown */
.wapf-fake-wrap {
  position: relative;
  width: 100%;
}

/* Barre de recherche */
.wapf-fake-search-wrap {
  position: relative;
  border-bottom: 1px solid #e5e7eb;
}
.wapf-fake-search {
  width: 100%;
  padding: 9px 32px 9px 12px;
  background: #fff !important;
  border: none !important;
  color: #111827 !important;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  box-sizing: border-box;
  box-shadow: none !important;
}
.wapf-fake-search::placeholder { color: #9ca3af; }
.wapf-fake-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 11px;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  display: none;
  align-items: center;
  justify-content: center;
}
.wapf-fake-search-clear:hover { color: #374151; }

/* Liste d'items */
.wapf-fake-list {
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.wapf-fake-list::-webkit-scrollbar { width: 4px; }
.wapf-fake-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.wapf-fake-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.88rem;
  color: #111827;
  transition: background .12s;
  box-sizing: border-box;
}
.wapf-fake-item:last-child { border-bottom: none; }
.wapf-fake-item:hover { background: #eff6ff; }
.wapf-fake-item.wapf-item-active {
  background: rgba(49,129,255,0.10);
  font-weight: 600;
  color: #3181FF;
}
.wapf-fake-item[data-value=""] { color: #9ca3af; }

.wapf-fake-no-results {
  padding: 12px;
  font-size: 0.85rem;
  color: #9ca3af;
  text-align: center;
  display: none;
}

/* Réduire l'espace entre champs WAPF */
.csb-wapf-form .wapf-field-container,
.wapf-field-container {
  margin-bottom: 12px !important;
}
.csb-wapf-form .wapf-field-group {
  padding: 0 !important;
}
.csb-wapf-form .wapf-wrapper,
.csb-wapf-form .wapf {
  margin-bottom: 12px !important;
}
.csb-wapf-form .wapf-field-row {
  gap: 10px !important;
}

/* ══════════════════════════════════════
   SUPPRESSION DES ESPACES PARASITES
   Entre champs WAPF et boutons shortcode
══════════════════════════════════════ */

/* Wrapper WAPF global — zéro espace en bas */
.csb-wapf-form .wapf,
.csb-wapf-form .wapf-wrapper,
.csb-wapf-form .wapf-field-group,
.csb-wapf-form .wapf-field-row,
.csb-wapf-form .wapf-wrapper > *:last-child,
.csb-wapf-form .wapf-field-group > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Dernier champ — pas d'espace avant les boutons */
.csb-wapf-form .wapf-field-container:last-child,
.csb-wapf-form .wapf-field-row:last-child .wapf-field-container {
  margin-bottom: 0 !important;
}

/* Entre le bloc WAPF et le bloc boutons */
.csb-wapf-form .wapf + .csb-sc,
.csb-wapf-form .wapf-wrapper + .csb-sc,
.csb-wapf-form > input[type="hidden"] + input[type="hidden"],
.csb-wapf-form > .csb-sc {
  margin-top: 10px !important;
}

/* Le formulaire lui-même */
.csb-wapf-form {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}
.csb-wapf-form > .wapf {
  margin-bottom: 10px !important;
}

/* Retirer les marges internes du wrapper DIV wapf natif */
.csb-wapf-form .wapf > .wapf-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}