/* ── AlphaGen Variation Swatches ───────────────────────────────────────────── */

/*
 * WooCommerce classic variation form: table.variations has display:block from
 * woocommerce-blocktheme.css, which collapses normal table layout. Stack the
 * label above the swatch grid for reliable, browser-agnostic layout.
 */
.woocommerce table.variations,
.woocommerce table.variations tbody,
.woocommerce table.variations tr {
  display: block !important;
}

.woocommerce table.variations th.label {
  display: block !important;
  padding: 0 0 6px 0 !important;
}

.woocommerce table.variations th.label label {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #05d9e8;
}

.woocommerce table.variations td.value {
  display: block !important;
  padding: 0 0 16px 0 !important;
}

/* ── Swatch list ─────────────────────────────────────────────────────────── */

.ag-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

/* ── Individual swatch ───────────────────────────────────────────────────── */

.ag-swatch {
  display: inline-block;
  padding: 0;
  line-height: 0;
  font-size: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  /*
   * box-shadow renders outside overflow:hidden so it wraps flush against the
   * image on all sides. Three states: resting · hover · selected.
   */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.15s, transform 0.1s;
  overflow: hidden;
}

.ag-swatch img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 0; /* parent overflow:hidden + border-radius handles clipping */
}

.ag-swatch:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
  transform: scale(1.08);
}

.ag-swatch--selected {
  box-shadow: 0 0 0 2px #05d9e8, 0 0 6px rgba(5, 217, 232, 0.4);
}

.ag-swatch--selected:hover {
  box-shadow: 0 0 0 2px #05d9e8, 0 0 6px rgba(5, 217, 232, 0.4);
}

.ag-swatch:focus-visible {
  outline: 2px solid #05d9e8;
  outline-offset: 2px;
}