/* ===== SX GROUPED – FULL FIT FINAL ===== */

.sx-grouped-form{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
}

/* Wrap: fit container */
.sx-grouped-wrap{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  border:1px solid #D1D5DB !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#fff !important;
}

/* Desktop grid: fit without overflow */
.sx-grouped-head,
.sx-grouped-row{
  display:grid !important;
  width:100% !important;
  box-sizing:border-box !important;
  grid-template-columns: 84px 1fr 90px 110px !important; /* Format | Prix (flex) | Stock | Qté */
  align-items:center !important;
  column-gap:12px !important;
}

/* Header */
.sx-grouped-head{
  padding:10px 12px !important;
  background:#f7f7f7 !important;
  border-bottom:1px solid #E5E7EB !important;
  font-weight:900 !important;
  font-size:11px !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}
.sx-grouped-head > div{
  text-align:center !important;
}

/* Rows */
.sx-grouped-row{
  padding:12px 12px !important;
  border-bottom:1px solid #eee !important;
}
.sx-grouped-row:last-child{ border-bottom:none !important; }

/* Neutralise Bricks */
.sx-grouped-row .sx-col{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

/* Column align */
.sx-col--fmt{ justify-content:flex-start !important; }
.sx-col--price{ justify-content:center !important; }
.sx-col--stock{ justify-content:center !important; }
.sx-col--qty{ justify-content:flex-end !important; }

/* Format pill */
.sx-format{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:56px !important;
  height:26px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
  background:#111 !important;
  color:#fff !important;
}

/* Price */
.sx-price{
  font-weight:900 !important;
  font-size:14px !important;
  white-space:nowrap !important;
}

/* Stock badge */
.sx-stock-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:56px !important;
  height:24px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.sx-stock-badge--in{ background:rgba(40,180,99,.15) !important; color:#28B463 !important; }
.sx-stock-badge--bo{ background:rgba(243,156,18,.18) !important; color:#F39C12 !important; }
.sx-stock-badge--out{ background:rgba(231,76,60,.15) !important; color:#E74C3C !important; }

/* Qty */
.sx-qty{
  width:90px !important;
  max-width:90px !important;
  height:34px !important;
  box-sizing:border-box !important;
  font-size:13px !important;
  font-weight:800 !important;
  border:1px solid #D1D5DB !important;
  border-radius:10px !important;
  text-align:center !important;
}
.sx-qty-disabled{ color:#9ca3af !important; font-weight:900 !important; }

/* Legend */
.sx-legend{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px 14px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.sx-legend-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Button */
.sx-add{
  width:100% !important;
  padding:12px 16px !important;
  border-radius:12px !important;
  font-weight:900 !important;
}

/* ===== MOBILE: Format+Prix / Stock+Qté ===== */
@media (max-width: 768px){

  .sx-grouped-head{ display:none !important; }

  .sx-grouped-row{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "fmt price"
      "stock qty" !important;
    row-gap:10px !important;
    column-gap:12px !important;
  }

  .sx-col--fmt{ grid-area:fmt !important; justify-content:flex-start !important; }
  .sx-col--price{ grid-area:price !important; justify-content:flex-end !important; }
  .sx-col--stock{ grid-area:stock !important; justify-content:flex-start !important; }
  .sx-col--qty{ grid-area:qty !important; justify-content:flex-end !important; }

  .sx-qty{
    width:110px !important;
    max-width:110px !important;
    height:36px !important;
    font-size:14px !important;
  }
}
/* ===== Desktop fit container (Qté plus petite) ===== */
@media (min-width: 769px){
  .sx-grouped-head,
  .sx-grouped-row{
    grid-template-columns: 84px 1fr 90px 88px !important; /* Qté plus petite */
  }

  .sx-qty{
    width: 72px !important;
    max-width: 72px !important;
    height: 34px !important;
  }
}
/* ===== Mobile: afficher "Format" ===== */
@media (max-width: 768px){
  .sx-col--fmt{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .sx-col--fmt::before{
    content:"Format";
    font-weight:900;
    font-size:12px;
    color:#111;
    opacity:.7;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
/* ===== Mobile: afficher "Format" ===== */
@media (max-width: 768px){
  .sx-col--fmt{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .sx-col--fmt::before{
    content:"Format";
    font-weight:900;
    font-size:12px;
    color:#111;
    opacity:.7;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
}

/* Format cliquable sans style de lien */
.sx-format-link{ text-decoration:none !important; display:inline-flex; }
.sx-format-link:hover .sx-format{ opacity:.9; }

/* Format clickable */
.sx-format{ cursor: pointer; }
.sx-format:hover{ opacity: .9; }