/* ===========================
   Bloc calculateur (container)
   =========================== */
.mbbc{
  border:1px solid #e5e5e5;
  padding:1rem;
  border-radius:.5rem;
  background:#fff;
}

/* grille des champs de saisie */
.mbbc__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.75rem;
}
.mbbc__grid label{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.mbbc__grid span{
  font-size:.9rem;
  opacity:.85;
}
.mbbc__grid input[type="number"]{
  width:100%;
  padding:.5rem .6rem;
  border:1px solid #d9d9d9;
  border-radius:.375rem;
}

/* aide + récapitulatif */
.mbbc__help{
  margin-bottom:.75rem;
  opacity:.9;
}
.mbbc__recap{
  margin:.75rem 0;
  display:grid;
  gap:.25rem;
  font-size:.95rem;
}

/* ===========================
   Liste des choix (radios)
   =========================== */
.mbbc__choices-head{
  margin:.75rem 0 .25rem;
  font-size:1rem;
}
.mbbc__suggest{ margin-top:.75rem; }

.mbbc__choices{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.5rem;
}

.mbbc__row{ margin:0; padding:0; }

.mbbc__line{
  display:grid;
  grid-template-columns: auto 120px 160px 160px 1fr; /* radio | largeur | quantité | surface | notes */
  align-items:center;
  gap:.75rem;
  border:1px solid #e5e5e5;
  border-radius:.5rem;
  padding:.5rem .75rem;
  background:#fafafa;
}

/* radio plus visible et bien collé au label */
.mbbc__line input[type="radio"]{
  margin:0 .25rem 0 0;
  transform:scale(1.1);
  accent-color:#111; /* compatible modernes, fallback OK */
}

/* colonnes */
.mbbc__col strong{ white-space:nowrap; }
.mbbc__col small{ opacity:.7; }
.mbbc__w{ min-width:120px; }
.mbbc__q{ min-width:140px; }
.mbbc__a{ min-width:160px; }

/* hover/focus pour confort */
.mbbc__line:hover{
  background:#f5f5f5;
  border-color:#dcdcdc;
}
.mbbc__line:has(input[type="radio"]:checked){
  background:#f0f7ff;
  border-color:#b6d4fe;
}

/* ===========================
   Accessoires/états
   =========================== */
/* griser les options trop petites dans le select des largeurs */
select[data-product-attribute] option[disabled],
select[name^="group["] option[disabled]{
  color:#9a9a9a;
}

/* petites tailles d’écran : passer sur 2-3 colonnes fluides */
@media (max-width: 680px){
  .mbbc__line{
    grid-template-columns: auto 1fr;
    row-gap:.35rem;
  }
  .mbbc__w, .mbbc__q, .mbbc__a, .mbbc__l{
    min-width:auto;
  }
}

/* ultra compact sur très petit écran */
@media (max-width: 420px){
  .mbbc__line{
    grid-template-columns:auto 1fr;
  }
  .mbbc__col strong{ display:inline-block; }
}
/* radio vraiment devant la ligne, aligné */
.mbbc__row{ display:grid; grid-template-columns:auto 1fr; align-items:stretch; gap:.5rem; }
.mbbc__radio{ align-self:center; margin:0 .25rem 0 0; transform:scale(1.1); }