/* Masquer visuellement le select mais le garder accessible */
.sb-attr-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Groupe */
.sb-attr-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}

/* Bouton CARRE (plus arrondi !) */
.sb-attr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid #111;     /* trait + soutenu */
  border-radius: 0;           /* bien carré */
  background: #fff;
  color: #111;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.sb-attr-btn:hover { border-color: #000; }
.sb-attr-btn:active { transform: scale(0.98); }

.sb-attr-btn.is-selected {
  background: #000;
  color: #fff;
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
  font-weight: 600;
}


/* Etat indisponible contextuel (selon la sélection en cours) */
.sb-attr-btn.is-unavailable-context {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Etat indisponible GLOBAL (toutes combinaisons HS pour cette valeur) */
.sb-attr-btn.is-unavailable-global {
  color: #777;
  background: #f4f4f4;
  border-color: #e0e0e0;
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: .9;
}

/* Désactivé natif */
.sb-attr-btn[disabled],
.sb-attr-btn[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
}

/* Focus clavier (accessibilité) */
.sb-attr-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Pastilles carrées pour “Coloris” si tu utilises des slugs or/argente */
.sb-attr-btn[data-value="or"]::before,
.sb-attr-btn[data-value="gold"]::before,
.sb-attr-btn[data-value="argente"]::before,
.sb-attr-btn[data-value="argent"]::before,
.sb-attr-btn[data-value="silver"]::before{
  content:"";
  width: 14px; height: 14px; margin-right: 8px; border-radius: 0; /* carré */
  border: 1px solid rgba(0,0,0,.2);
}
.sb-attr-btn[data-value="or"]::before,
.sb-attr-btn[data-value="gold"]::before{
  background: linear-gradient(180deg,#f6d365,#fda085);
}
.sb-attr-btn[data-value="argente"]::before,
.sb-attr-btn[data-value="argent"]::before,
.sb-attr-btn[data-value="silver"]::before{
  background: linear-gradient(180deg,#e6e6e6,#cfcfcf);
}