/* Base look if we paint directly on the swatch element */
.bmsw-multicolor,
.bmsw-multicolor-applied {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Absolute overlay that sits on top of any inner IMG/pseudo-element */
.bmsw-layer {
    position: absolute;
    border-radius: 50%;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border: none;
    border: 1px solid rgba(0,0,0,0.15);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 9;
}

/* Ensure the host swatch can position our overlay */
.bmsw-host {
    position: relative !important!important;
    overflow: hidden;
}

/* Optional helper to force circular hosts if your swatch plugin uses pills */
.bmsw-force-circle {
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

/* If the swatch plugin draws an image, keep it but let our overlay show above */
.bmsw-host img,
.bmsw-host .swatch-image {
    display: block;
}

/* Bespecta: ensure Woostify squares and ::before use our gradient */
.w-filter-item.w-filter-swatch-color.bmsw-painted,
.w-filter-item.w-filter-swatch-color.bmsw-painted::before{
  background: var(--bmsw-grad) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* Woodmart: hide swatch labels in grid/product page (tooltip remains) */
.single-product .wd-swatches-product .wd-swatch .wd-swatch-text,
.product-grid-item .wd-swatch .wd-swatch-text {
  display: none !important;
}

/* Woodmart: collapse text-only swatch blocks on grid so the label bar doesn't show */
.product-grid-item .wd-swatch.wd-text {
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* === Bespecta Multicolor Swatches fixes === */

/* Ensure painted backgrounds fill the swatch box consistently (filters + grid + product page) */
.wd-swatch-bg.bmsw-painted,
.wd-swatch-bg.bmsw-remapped {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

/* Add border for multicolor in filters to match single swatch look */
.woocommerce-widget-layered-nav-list .wd-swatch .wd-swatch-bg.bmsw-painted,
.wd-wc-layered-nav .wd-swatch .wd-swatch-bg.bmsw-painted,
.widget .wd-swatch .wd-swatch-bg.bmsw-painted {
  border: 1px solid rgba(0,0,0,0.15);
  box-sizing: border-box;
}

/* If Woodmart renders multi-color as wd-text (no bg), make it behave like wd-bg */
.wd-swatch.bmsw-generated-bg {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0px;
}

/* Hide labels in product grids (keep for accessibility/tooltip) */
.bmsw-hide-text .wd-swatch-text {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Active filter chips: small multicolor box before text */
.wd-active-filters a .bmsw-chip,
.woocommerce-widget-layered-nav-list .chosen a .bmsw-chip,
.woocommerce-widget-layered-nav-list__item--chosen a .bmsw-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 0px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.15);
  box-sizing: border-box;
}

/* Prevent any background bleeding onto non-color filter labels */
.woocommerce-widget-layered-nav-list a,
.wd-active-filters a {
  background-image: none !important;
}

/* Product grid: ensure ALL multi-color swatches are perfectly square */
.wd-swatches-grid.wd-swatches-product .wd-swatch.bmsw-generated-bg {
  border-radius: 0 !important;
}

.wd-swatches-grid.wd-swatches-product .wd-swatch-bg.bmsw-painted {
  border-radius: 0 !important;
}

/* Force multi-color swatches to be perfect squares (Woodmart grids + widgets + chosen filter chips) */
.wd-swatches-grid .wd-swatch-bg.bmsw-painted,
.woocommerce-widget-layered-nav-list .wd-swatch-bg.bmsw-painted,
.wd-widget-layered-nav .wd-swatch-bg.bmsw-painted {
  width: 20px !important;
  height: 20px !important;
  border-radius: 0 !important;
}