/* Phase 3 (V007.132): Native Single Product Swatches (Moopsi) */
.mpgp-single-swatches{
  margin: 10px 0 14px;
}
.mpgp-single-swatches .mpgp-swatch-group{
  margin: 0 0 10px;
}
.mpgp-single-swatches .mpgp-swatch-group-head{
  margin: 0 0 6px;
}
.mpgp-single-swatches .mpgp-label{
  font-weight: 500;
  font-size: var(--mpgp-single-font-size, 13px);
  color: var(--mpgp-single-label-color, #343434);
}
.mpgp-single-swatches .mpgp-swatch-options{
  display:flex;
  flex-wrap:wrap;
  gap: var(--mpgp-single-swatch-gap, 6px);
  align-items:center;
}
.mpgp-single-swatches .mpgp-swatch-btn{
  appearance:none;
  border: var(--mpgp-prod-swatch-border-w, 1px) solid var(--mpgp-prod-swatch-border, rgba(0,0,0,.15));
  background: var(--mpgp-single-swatch-bg, #fff);
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  position:relative;
}
.mpgp-single-swatches .mpgp-swatch-btn:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}
.mpgp-single-swatches .mpgp-swatch-btn.is-selected{
  border-color: var(--mpgp-prod-swatch-selected-outline, rgba(0,0,0,.55));
}
.mpgp-single-swatches .mpgp-swatch-btn-color{
  /* Single Product color swatches must be a square (30x30 baseline), even under aggressive theme CSS. */
  width: var(--mpgp-single-swatch-size, 30px) !important;
  height: var(--mpgp-single-swatch-size, 30px) !important;
  min-width: var(--mpgp-single-swatch-size, 30px) !important;
  min-height: var(--mpgp-single-swatch-size, 30px) !important;
  max-width: var(--mpgp-single-swatch-size, 30px) !important;
  max-height: var(--mpgp-single-swatch-size, 30px) !important;
  flex: 0 0 var(--mpgp-single-swatch-size, 30px);
  border-radius: var(--mpgp-single-swatch-radius, 0px);
}
.mpgp-single-swatches .mpgp-swatch-chip{
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--mpgp-single-swatch-fallback, #eee);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mpgp-single-swatches .mpgp-swatch-btn-size{
  /* Single Product: size pill height is fixed to 30px (theme-proof). */
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  /* Default to a 30x30 square for short sizes (S/M/L/XL/etc). */
  width: 30px !important;
  min-width: 30px !important;
  /* Allow long labels (e.g., 5XXXL, One Size) to expand via .is-long */
  max-width: none !important;
  border-radius: var(--mpgp-single-pill-radius, 0px);
  padding: 0 !important;
  background: var(--mpgp-single-pill-bg, #fff);
  border-color: var(--mpgp-single-pill-border, #343434);
  /* Hard override for themes that zero/transparent button text (Woodmart can do this in some stacks). */
  color: var(--mpgp-single-pill-color, #343434) !important;
  font-size: var(--mpgp-single-pill-font-size, 12px) !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
}

/* Long labels expand width while preserving the 30px height */
.mpgp-single-swatches .mpgp-swatch-btn-size.is-long{
  width: auto !important;
  min-width: 30px !important;
  padding: 0 var(--mpgp-single-pill-pad-x, 10px) !important;
}
.mpgp-single-swatches .mpgp-swatch-btn-size .mpgp-swatch-text{
  font-size: var(--mpgp-single-pill-font-size, 12px);
  color: var(--mpgp-single-pill-color, #343434);
  line-height: 1;
  white-space: nowrap;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Size pill hover + selected (Moopsi default: #343434 bg + white text) */
.mpgp-single-swatches .mpgp-swatch-btn-size:hover{
  background: var(--mpgp-single-pill-hover-bg, #343434);
}
.mpgp-single-swatches .mpgp-swatch-btn-size:hover .mpgp-swatch-text{
  color: var(--mpgp-single-pill-hover-color, #fff);
}

.mpgp-single-swatches .mpgp-swatch-btn-size.is-selected{
  background: var(--mpgp-single-pill-selected-bg, #343434);
  border-color: var(--mpgp-single-pill-selected-border, #343434);
}
.mpgp-single-swatches .mpgp-swatch-btn-size.is-selected .mpgp-swatch-text{
  color: var(--mpgp-single-pill-selected-color, #fff);
}
.mpgp-single-swatches .mpgp-swatch-text-sr{
  position:absolute;
  width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
}

.mpgp-single-swatches .mpgp-swatch-btn.is-disabled,
.mpgp-single-swatches .mpgp-swatch-btn:disabled{
  opacity: var(--mpgp-single-disabled-opacity, .35) !important;
  filter: grayscale(1) !important;
  cursor: not-allowed;
  /* Theme-proof: never hide disabled swatches; keep them visible but non-interactive */
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: none;
}

/* V007.349 — OOS indicator for color swatches only: thinner diagonal slash overlay (keeps fade). */
.mpgp-single-swatches .mpgp-swatch-btn-color{ position: relative; overflow: hidden; }
.mpgp-single-swatches .mpgp-swatch-btn-color .mpgp-swatch-chip{ position: relative; z-index: 1; }
.mpgp-single-swatches .mpgp-swatch-btn-color.is-disabled::after,
.mpgp-single-swatches .mpgp-swatch-btn-color[aria-disabled="true"]::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg,
	    transparent 48.5%,
	    rgba(52,52,52,.85) 49.5%,
	    rgba(52,52,52,.85) 50.5%,
	    transparent 51.5%
    );
}
.mpgp-single-swatches .mpgp-swatch-btn:focus{outline:none;box-shadow:none;}
.mpgp-single-swatches .mpgp-swatch-btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px var(--mpgp-prod-swatch-selected-outline, rgba(0,0,0,.18));
}

/* Phase 14 — Accessibility polish: keyboard focus visibility */
.single-product .moopsi-color-dot:focus-visible,
.single-product .moopsi-color-more:focus-visible,
.single-product .moopsi-size-pill:focus-visible{
  outline: 2px solid #343434 !important;
  outline-offset: 2px !important;
}


/* MPGP: When native single swatches are enabled, hide common theme swatch UIs (Woodmart) to prevent "dead" duplicates. */
body.mpgp-single-native-on .variations_form .wd-attr-items,
body.mpgp-single-native-on .variations_form .wd-swatch-wrap,
body.mpgp-single-native-on .variations_form .vi-wpvs-variation-wrap,
body.mpgp-single-native-on .variations_form .variable-items-wrapper {
  display:none !important;
}

/* V007.332: When MPGP single swatches are active, hide Woodmart/VillaTheme style swatch UIs on single product pages.
   Keep selects in DOM (hidden by JS) for Woo variation logic.
*/
body.mpgp-single-swatches-active .wd-variations-swatches,
body.mpgp-single-swatches-active .wd-attr-items,
body.mpgp-single-swatches-active .wd-swatch-wrap,
body.mpgp-single-swatches-active .wd-swatches,
body.mpgp-single-swatches-active .vi-wpvs-variation-wrap,
body.mpgp-single-swatches-active .vi-wpvs-option-wrap,
body.mpgp-single-swatches-active .variable-items-wrapper,
body.mpgp-single-swatches-active .wvs-variations-wrapper,
body.mpgp-single-swatches-active .wvs-variations-form,
body.mpgp-single-swatches-active .variations .value .wd-attr-term,
body.mpgp-single-swatches-active .variations .value .wd-attr-item{
  display:none !important;
}

/* Hide native Woo attribute rows so you don't see duplicate “Color/Size” labels under our swatches */
body.mpgp-single-swatches-active .mpgp-hide-native-row{
  display:none !important;
}