/* ===========================
   Variables (colores activos)
   =========================== */
:root{
  --wab-active-bg: #2563eb;    /* azul visible */
  --wab-active-border: #1d4ed8;
  --wab-active-color: #fff;
  --wab-hover-border: #bbb;
}

/* Oculta el <select> pero accesible para lectores de pantalla */
.attr-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ================
   Layout apilado
   ================ */
.wab-stack{
  display: flex;
  flex-direction: column;       /* título arriba, botones debajo */
  align-items: flex-start;
  gap: 6px;
}

/* BeTheme coloca el label dentro de .mfn-vr */
.wab-stack > label{
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
}

/* En el layout estándar de Woo (tabla variaciones), por si acaso */
.variations .value .attr-btn-group{ margin-top: 6px; }

/* ================
   Grupo de botones
   ================ */
.attr-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

/* Botón base (píldora) */
.attr-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #dcdcdc;
  background: #f7f7f7;
  color: #222;
  padding: 7px 12px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}

.attr-btn:hover { background: #fff; border-color: var(--wab-hover-border); }

/* Estado ACTIVO muy visible */
.attr-btn.is-active {
  background: var(--wab-active-bg);
  border-color: var(--wab-active-border);
  color: var(--wab-active-color);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* Accesibilidad al navegar con teclado */
.attr-btn:focus-visible{
  outline: 2px solid var(--wab-active-bg);
  outline-offset: 2px;
}

.attr-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* === Fuerza el título arriba (BeTheme) === */
.mfn-vr.wab-stack{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.mfn-vr.wab-stack > label{
  margin: 0 0 6px !important;
  width: auto !important;
  min-width: 0 !important;
}
.mfn-vr.wab-stack .attr-btn-group{
  margin: 0 0 12px 0 !important; /* sin sangría a la izquierda */
}

/* Títulos de atributo en negrita */
.mfn-vr.wab-stack > label,
.variations .mfn-vr > label,
.variations .label label{
  font-weight: 700 !important;
}