/*
 * Custom front-end styles for WooCommerce Variation Swatches.
 *
 * This stylesheet provides additional spacing around the swatch wrappers on single product pages.
 * Without this padding the first and last swatches sit flush against the container, which looks
 * cramped (especially on mobile). The rules below add a small horizontal padding so the
 * swatches breathe and align consistently with other form elements.
 */

.woo-variation-swatches .variable-items-wrapper,
.woo-variation-swatches .variable-items-wrapper.radio-variable-items-wrapper {
  padding-left: 5px;
  padding-right: 5px;
}

/* Ensure spacing between swatch items so they don't stick together */
.woo-variation-swatches .variable-items-wrapper {
  gap: 8px; /* works on modern browsers for flex containers */
}

/* Neutralize any theme/plugin margin overrides and rely on gap */
.woo-variation-swatches
  .variable-items-wrapper
  .variable-item:not(.radio-variable-item) {
  margin: 0 !important;
}