/* Style pour les barres CBD */
.cbd-bar {
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: #444;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.cbd-bar .bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
}

/* Couleurs dynamiques selon le % */
.cbd-bar .bar-inner.green { background-color: #7FFF00; }
.cbd-bar .bar-inner.orange { background-color: orange; }
.cbd-bar .bar-inner.red { background-color: red; }

/* Style pour les barres THC */
.thc-bar {
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: #ccc;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.thc-bar .bar-inner {
  height: 100%;
  background-color: #8B0000;
  text-align: center;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.progress-bar {
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    height: 15px;
    width: 100%;
    margin: 5px 0;
    position: relative;
}

.progress-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    white-space: nowrap;
    font-size: 12px;
    transition: width 0.5s ease-in-out;
}

/* Espacement entre chaque attribut */
.attribut {
  margin-bottom: 12px !important;
}

/* Barre de progression arrondie */

/* Remplissage avec coins arrondis à gauche */


.progress-bar {
  position: relative;
  height: 20px;
  background-color: #202f29;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px 0 0 10px;
  transition: width 0.5s ease-in-out;
  background-image: linear-gradient(to right, var(--bar-color) 75%, #202f29);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-text {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  color: #ffffff;
  z-index: 2;
}

/* Cache l’ancien lien "Choix des options" si un widget le réinjecte */
a.product_type_variable.add_to_cart_button { display:none !important; }

/* État chargement/feedback */
.loupth-card-variations.is-loading { opacity:.75; pointer-events:none; }
.loupth-card-variations.added .single_add_to_cart_button { filter:brightness(1.1); }

.loupth-sc-form .loupth-row { margin:.35rem 0; }
.loupth-sc-form .loupth-row label { display:block; font-size:.9rem; opacity:.85; margin-bottom:.2rem; }
.loupth-sc-form select, .loupth-sc-form .quantity .qty {
  width:100%; height:42px; border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25); color:#fff; padding:.35rem .6rem;
}
.loupth-sc-form .btn-croco.cta { width:100%; height:42px; }

/*moi*/

/* ===== Sélecteur variations (shortcode + cards) — version compacte et scoped ===== */

/* Label "poids" plus visible */
.elementor-widget-container .loupth-sc-form .loupth-row label,
.elementor-widget-container .loupth-card-variations .label label{
  display:block;
  margin:.1rem 0 .35rem;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.02em;
  color:#eaeaea;
}

/* Champ select (fermé) */
.elementor-widget-container .loupth-sc-form select.loupth-attr,
.elementor-widget-container .loupth-card-variations select.loupth-attr{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:100%;
  height:48px;
  padding:.6rem 2.2rem .6rem .85rem; /* place pour la flèche */
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:#1a1a1a
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
    no-repeat right .8rem center / 14px;
  color:#fff;
  font:700 1.05rem/1.2 inherit;
  box-shadow:none;
}

/* Options du menu déroulant (Chrome/Edge/Firefox) */
.elementor-widget-container .loupth-sc-form select.loupth-attr option,
.elementor-widget-container .loupth-card-variations select.loupth-attr option{
  background:#0f0f0f;
  color:#fff;
}
.elementor-widget-container .loupth-sc-form select.loupth-attr option[value=""],
.elementor-widget-container .loupth-card-variations select.loupth-attr option[value=""]{
  color:rgba(255,255,255,.75); /* "Choisir…" */
}

/* Focus accessible */
.elementor-widget-container .loupth-sc-form select.loupth-attr:focus,
.elementor-widget-container .loupth-card-variations select.loupth-attr:focus{
  outline:2px solid #61e107;
  outline-offset:2px;
  border-color:#61e107;
}

/* Quantité alignée avec le select */
.elementor-widget-container .loupth-sc-form .quantity .qty,
.elementor-widget-container .loupth-card-variations .quantity .qty{
  width:40%;
  height:48px;
  text-align:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:#1a1a1a;
  color:#fff;
  font-size:1rem;
}

/* Bouton même hauteur */
.elementor-widget-container .loupth-sc-form .btn-croco.cta,
.elementor-widget-container .loupth-card-variations .btn-croco.cta{
  width:100%;
  height:48px;
  font-weight:800;
  font-size:1rem;
  margin-top: .6rem !important;
  border-radius: 12px !important;
}


/*MOI MOI*/

/* === Contrainte de largeur dans le widget Elementor === */
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-sc-form,
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-card-variations{
  box-sizing:border-box;
  display:block;
  width:88% !important;       /* marge intérieure visuelle */
  max-width:320px !important; /* limite sur cartes larges */
  margin:.6rem auto 0 !important; /* centré dans le widget */
  padding:0 !important;
}

/* Les champs occupent la largeur du FORM (pas plus) — (on retire le bouton ici) */
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-sc-form select.loupth-attr,
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-sc-form .quantity .qty,
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-card-variations select.loupth-attr,
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-card-variations .quantity .qty{
  width:100% !important;
  box-sizing:border-box;
}

/* Aligne quantité + bouton sur la même ligne (sans toucher au reste) */
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-sc-form .quantity{
  display:inline-block;
  width:88px;                  /* largeur fixe de la case quantité */
  vertical-align:middle;
  float:none; position:static;
  margin:0;
}
.elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container .loupth-sc-form .btn-croco.cta{
  display:inline-block;
  vertical-align:middle;
  height:48px;
  font-weight:800;
  font-size:1rem;
  width:calc(100% - 88px - .6rem);  /* prend tout l'espace restant */
  margin-left:.6rem;                 /* petit écart avec la quantité */
}