/* =========================
   BCS Cards Builder (UI)
   ========================= */

/* Bloc principal */
#bcs-cards-builder {
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;

  max-width: 100%;
  overflow: hidden; /* évite les débordements */

  /* ✅ un peu plus "premium" */
  background: linear-gradient(180deg, rgba(47,181,210,.08), rgba(0,0,0,0) 60%);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

#bcs-cards-builder .bcs-title {
  font-weight: 800;
  margin-bottom: 10px;
  font-size: 16px;
}

/* ✅ Champs : focus plus propre */
#bcs-cards-builder select:focus,
#bcs-cards-builder input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,181,210,.20);
  border-color: rgba(47,181,210,.55);
}

/* PS9 Classic — Produit ID 1 : masque le bloc natif Quantité + Ajouter au panier */
body#product.product-id-1 form#add-to-cart-or-refresh .product-add-to-cart.js-product-add-to-cart,
body#product.product-id-1 form#add-to-cart-or-refresh .product-add-to-cart.js-product-add-to-cart * {
  display: none !important;
}

/* (optionnel) au cas où le thème l’encapsule) */
body#product.product-id-1 form#add-to-cart-or-refresh .product-actions {
  display: none !important;
}

#bcs-cards-builder .bcs-row {
  display: grid;
  /* ✅ Colonnes plus souples (évite que "Langue" soit coupé) */
  grid-template-columns: 140px minmax(240px, 2.2fr) minmax(140px, 1.2fr) minmax(150px, 1fr) 44px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* IMPORTANT : permet aux champs de se réduire sans déborder */
#bcs-cards-builder .bcs-row > * {
  min-width: 0;
}

#bcs-cards-builder .bcs-row.bcs-header {
  font-size: 12px;
  opacity: .75;
  margin-top: 6px;
}

#bcs-cards-builder select,
#bcs-cards-builder input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
}

/* ✅ Produit Gradation (ID 1) : désactiver le popup panier (blockcart modal) sans flash */
body.page-product.product-id-1 #blockcart-modal,
body.page-product.product-id-1 #blockcart-modal.show,
body.page-product.product-id-1 #blockcart-modal * {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* backdrop bootstrap (l’overlay noir) */
body.page-product.product-id-1 .modal-backdrop {
  display: none !important;
  opacity: 0 !important;
}

/* évite le verrouillage du scroll quand Bootstrap ajoute modal-open */
body.page-product.product-id-1.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

#bcs-cards-builder .bcs-remove {
  width: 44px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  cursor: pointer;
  background: transparent;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

#bcs-cards-builder .bcs-remove:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.28);
}

#bcs-cards-builder .bcs-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* ✅ Force le style du bouton "Ajouter toutes..." malgré .bcs-add (background transparent) */
#bcs-cards-builder .bcs-actions .bcs-add.bcs-add-all{
  background-color:#2fb5d2 !important;
  border-color:#2fb5d2 !important;
  color:#fff !important;
  font-weight:700;
}

/* Hover / focus (optionnel mais plus “pro”) */
#bcs-cards-builder .bcs-actions .bcs-add.bcs-add-all:hover{
  filter: brightness(0.95);
}
#bcs-cards-builder .bcs-actions .bcs-add.bcs-add-all:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,181,210,.25);
}

#bcs-cards-builder .bcs-actions .bcs-add.bcs-add-all[disabled]{
  opacity:.5;
  cursor:not-allowed;
  filter:none;
}

#bcs-cards-builder .bcs-add {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  cursor: pointer;
  background: transparent;
}

#bcs-cards-builder .bcs-add:hover{
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

#bcs-cards-builder .bcs-add[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

#bcs-cards-builder .bcs-msg {
  margin-top: 8px;
  font-size: 13px;
}

#bcs-cards-builder .bcs-error {
  color: #b00020;
}

#bcs-cards-builder .bcs-ok {
  color: #1b7f2a;
}

@media (max-width: 768px) {
  #bcs-cards-builder .bcs-row {
    grid-template-columns: 1fr;
  }
  #bcs-cards-builder .bcs-row.bcs-header {
    display: none;
  }
}

/* =========================
   ✅ PRODUIT ID 1 : Délais de traitement en "cartes" (ul#group_1)
   ========================= */

/* optionnel : rendre le libellé du groupe plus fort */
body.page-product.product-id-1 .product-variants .product-variants-item .control-label{
  font-weight: 900;
  font-size: 1.05rem;
}

/* Le groupe lui-même (ton inspect montre ul#group_1) */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

/* annule floats/marges thème */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 > li{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* label = surface cliquable */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label{
  margin:0 !important;
  cursor:pointer;
  display:block;
  position:relative;
}

/* masque le radio natif */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* le texte (souvent span juste après l'input) devient la carte */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio + span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  min-width:170px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:800;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

/* hover */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label:hover > input.input-radio + span{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* sélection */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio:checked + span{
  border-color: rgba(0,120,255,.55);
  box-shadow:0 10px 22px rgba(0,120,255,.12);
}

/* =========================
   ✅ FIX PRODUIT ID 1 : réduire l'espace photo <-> champs
   (sans :has, compatible partout)
   ========================= */

@media (min-width: 992px) {

  /* On cible la "grande" zone produit (les thèmes PS9 varient, donc plusieurs fallbacks) */
  body.page-product.product-id-1 #main .product-container .row,
  body.page-product.product-id-1 #main .page-content .row,
  body.page-product.product-id-1 #main .row {
    /* ⚠️ On ne met PAS flex sur toutes les rows du site : on limite au produit ID 1 via body */
  }

  /* La row principale produit contient presque toujours 2 colonnes col-md-6 (image / infos) */
  body.page-product.product-id-1 #main .row > div.col-md-6:first-of-type {
    width: 320px !important;
    max-width: 320px !important;
    flex: 0 0 320px !important; /* si le thème est en flex */
  }

  body.page-product.product-id-1 #main .row > div.col-md-6:last-of-type {
    width: calc(100% - 320px) !important;
    max-width: none !important;
    flex: 1 1 auto !important; /* si le thème est en flex */
    min-width: 0 !important;
  }

  /* Espace propre entre les 2 colonnes (sinon ça colle ou ça fait bizarre) */
  body.page-product.product-id-1 #main .row > div.col-md-6:first-of-type {
    padding-right: 12px !important;
  }
  body.page-product.product-id-1 #main .row > div.col-md-6:last-of-type {
    padding-left: 12px !important;
  }

  /* Image : ne dépasse pas */
  body.page-product.product-id-1 #main .images-container,
  body.page-product.product-id-1 #main .product-images {
    max-width: 320px !important;
    margin: 0 !important;
  }

  body.page-product.product-id-1 #main .product-cover img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =========================
   Masquer le champ Anvanto BCS_CARTES (label + champ)
   ========================= */

/* ✅ Variante moderne (Chrome OK) */
.form-group:has([name="an_pf_name[5]"]),
.an_pf_row:has([name="an_pf_name[5]"]),
.anvanto-field:has([name="an_pf_name[5]"]),
.an_field:has([name="an_pf_name[5]"]) {
  display: none !important;
}

/* ✅ Fallback minimal (si :has non supporté) : au moins cacher les inputs */
input[name="an_pf_name[5]"],
textarea[name="an_pf_name[5]"],
input[name="an_pf_value[5]"],
textarea[name="an_pf_value[5]"],
input[name="an_custom_fields[5]"],
textarea[name="an_custom_fields[5]"]{
  display:none !important;
}
/* =========================
   POLISH – Radios "Délais" en cartes (couleur BCS + ✓)
   ========================= */

body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio + span{
  position: relative;
  padding-right: 34px; /* place pour le ✓ */
}

body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio:checked + span{
  border-color: #2fb5d2 !important;
  background: rgba(47,181,210,.10);
  box-shadow: 0 10px 22px rgba(47,181,210,.14);
}

body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio:checked + span::after{
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: #2fb5d2;
}
/* =========================
   POLISH – Titre du builder
   ========================= */

#bcs-cards-builder .bcs-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:16px;
}

#bcs-cards-builder .bcs-title::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(0,0,0,.10);
}
/* =========================
   POLISH – Messages (info / ok)
   ========================= */

#bcs-cards-builder .bcs-msg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

#bcs-cards-builder .bcs-msg.bcs-error{
  color: rgba(0,0,0,.75);
  background: rgba(47,181,210,.08);
  border: 1px solid rgba(47,181,210,.20);
}

#bcs-cards-builder .bcs-msg.bcs-ok{
  color:#1b7f2a;
  background: rgba(27,127,42,.08);
  border: 1px solid rgba(27,127,42,.18);
}
/* Sous-texte délais dans les cartes "Délais de traitement" */
body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 label > input.input-radio + span{
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
}

body.page-product.product-id-1 .product-variants .product-variants-item ul#group_1 .bcs-delay-sub{
  display:block;
  font-size: .78rem;
  font-weight: 800;
  opacity: .65;
}
/* =========================
   PRODUIT ID 1 – "TTC" inline à côté du prix
   ========================= */

/* 1) On ajoute "TTC" après le prix */
body.page-product.product-id-1 .product-prices .current-price .current-price-value::after{
  content: " TTC";
  font-size: .75em;
  font-weight: 800;
  opacity: .65;
  margin-left: .25rem;
}

/* 2) On cache le libellé TTC/Taxe affiché en dessous (classes variables selon thèmes) */
body.page-product.product-id-1 .product-prices :is(
  .tax-shipping-delivery-label,
  .tax-label,
  .price-tax,
  .product-price-tax,
  .current-price + .tax-shipping-delivery-label
){
  display: none !important;
}
.product-flags .product-flag.new,
.product-flags li.product-flag.new{
  display:none !important;
}
/* =========================
   BCS Builder – Libellés au-dessus des champs : plus lisibles + mieux alignés
   ========================= */

/* La ligne des libellés */
#bcs-cards-builder .bcs-row.bcs-header{
  opacity: 1 !important;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.70);
  margin: 6px 0 8px;
}

/* Chaque cellule du header : alignement vertical + léger padding */
#bcs-cards-builder .bcs-row.bcs-header > div{
  display:flex;
  align-items:center;
  min-height: 18px;
  padding-left: 10px;  /* aligne avec le padding interne des champs */
}

/* Pas de padding sur la colonne du bouton "X" */
#bcs-cards-builder .bcs-row.bcs-header > div:last-child{
  padding-left: 0;
}

/* Optionnel : si tu veux encore plus "pro", une mini séparation */
#bcs-cards-builder .bcs-row.bcs-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 8px;
}
/* =========================
   PANIER – rendre les personnalisations lisibles (retours ligne + encart)
   ========================= */

/* 1) préserver les \n */
body#cart .cart-item .product-line-info,
body#cart .cart-item .product-line-info *{
  /* on n'applique pas pre-line à tout, seulement là où il y a du texte custom */
}

body#cart .cart-item .product-line-info .value,
body#cart .cart-item .product-line-info .customization,
body#cart .cart-item .product-line-info .customizations,
body#cart .cart-item .product-line-info .product-line-info{
  white-space: pre-line !important;
}

/* 2) encadrer le bloc custom (souvent affiché dans .product-line-info) */
body#cart .cart-item .product-line-info .product-line-info{
  margin-top: 6px;
  line-height: 1.35;
}

/* 3) Style “carte” pour le récap BCS */
body#cart .cart-item .product-line-info .product-line-info:has(strong),
body#cart .cart-item .product-line-info .product-line-info{
  /* si :has pas supporté, pas grave, ça reste joli */
}

body#cart .cart-item .product-line-info .product-line-info{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(47,181,210,.06);
  border: 1px solid rgba(47,181,210,.18);
}

/* 4) Optionnel : rendre le label BCS_CARTES plus discret */
body#cart .cart-item .product-line-info .product-line-info strong{
  font-weight: 900;
  opacity: .85;
}
/* PANIER : cacher le label de personnalisation (BCS_CARTES) pour le produit 1 */
body#cart article.cart-item[data-id-product="1"] .customizations .customization .label,
body#cart article.cart-item[data-id-product="1"] .customization .label{
  display:none !important;
}

/* CHECKOUT : idem (selon thème, le conteneur peut varier) */
body#checkout article.cart-item[data-id-product="1"] .customizations .customization .label,
body#checkout article.cart-item[data-id-product="1"] .customization .label{
  display:none !important;
}

/* Bonus : la valeur (ta liste) démarre bien à gauche */
body#cart article.cart-item[data-id-product="1"] .customization .value,
body#checkout article.cart-item[data-id-product="1"] .customization .value{
  display:block;
  margin-left:0 !important;
}
#bcs-cards-builder select,
#bcs-cards-builder input {
  color: #1a1a1a !important;
}

#bcs-cards-builder select option {
  color: #1a1a1a !important;
  background: #ffffff !important;
}