/* Pattern swatches: same shapes as the colour dots in product.css / shop.css,
   but with an <img> filling the circle instead of a flat background.
   Applied to any pa_color term carrying an `ux_image` attachment; terms
   without one keep the colour-dot rules in those files. */

/* --- PDP: 32px circles (mirrors .ux-swatch--color in product.css) --- */
.single-product .variations .ux-swatch--image {
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border: 1px solid #ddd6ca;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none;
  outline: none;
}
.single-product .variations .ux-swatch--image .ux-swatch__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.single-product .variations .ux-swatch--image.selected {
  border: 2px solid var(--bsx-ink);
  box-shadow: none;
  outline: none;
}
.single-product .variations .ux-swatch--image.selected::after { display: none; }

/* Product cards deliberately keep Flatsome's colour dots (shop.css) — pattern
   tiles are unreadable at 13px, and the price row has no space for larger ones.
   Images are a product-page treatment only. */