/* MA Variation Swatches */
.ma-swatches-wrap {
  display:flex;
	align-content: center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.ma-swatch-link {
  text-decoration:none;
  display:inline-block;
  line-height:0;
}

.ma-swatch {
  width:22px;
  height:22px;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  display:inline-block;
  background-size:cover;
  background-position:center;
  position:relative;
}

.ma-swatch--label {
  width:auto;
  min-width:22px;
  padding:2px 8px;
  border-radius:9999px;
  background:#f5f5f5;
  font-size:12px;
  line-height:18px;
  color:#333;
  border:1px solid rgba(0,0,0,.15);
}

.ma-swatch-link:hover .ma-swatch,
.ma-swatch-link:focus .ma-swatch {
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:1px;
}

.ma-swatches-wrap--archive {
	align-content: center;
  /* Porto uses product-grid specific spacing; keep it subtle */
}

.variations_form .ma-swatches-wrap {
  margin-bottom:10px;
	align-content: center;
}

/* Hide the default dropdowns if desired (optional, comment out if you want both) */
/*
.variations_form .variations select {
  display:none;
}
*/