/* Archive/Grid enhancements (non-product pages only)
   Scoped to Moopsi injected containers. */

/* Zero-flash: hide injected UI until MPGP finishes first render pass */
body:not(.single-product).mpgp-archive-loading .moopsi-color-preview,
body:not(.single-product).mpgp-archive-loading .moopsi-size-preview{
  opacity: 0 !important;
  visibility: hidden !important;
}
body:not(.single-product).mpgp-archive-ready .moopsi-color-preview,
body:not(.single-product).mpgp-archive-ready .moopsi-size-preview{
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.single-product) .moopsi-has-size-pills{
  display:flex;
  align-items:center;
}

body:not(.single-product) .moopsi-size-preview{
  margin-left:auto;
  display:flex;
  gap: var(--mpgp-archive-size-gap, 4px);
  padding-left: var(--mpgp-archive-size-pad-left, 6px);
}

body:not(.single-product) .moopsi-size-pill{
  font-size: var(--mpgp-archive-size-fs, 11px);
  line-height: 1;
  padding: var(--mpgp-archive-size-pad-y, 4px) var(--mpgp-archive-size-pad-x, 6px);
  border: var(--mpgp-archive-size-border-w, 1px) solid var(--mpgp-archive-size-border, #444444);
  background: var(--mpgp-archive-size-bg, #fff);
  color: var(--mpgp-archive-size-text, #121212);
  font-weight: var(--mpgp-archive-size-fw, 500);
  border-radius: var(--mpgp-archive-size-radius, 0px);
  white-space: nowrap;
  pointer-events:auto;
}


/* Theme-override container: when a theme disables swatches, we still render Moopsi extras */
body:not(.single-product) .mpgp-archive-extras{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-left:auto;
  align-self:flex-end;
  gap: var(--mpgp-archive-extras-gap, 6px);
  margin-top: var(--mpgp-archive-extras-mt, 6px);
}
body:not(.single-product) .mpgp-archive-extras .moopsi-size-preview{
  margin-left:0;
  padding-left:0;
}

/* Within the shared wrapper: keep price LEFT and pills RIGHT */
body:not(.single-product) .mpgp-archive-extras .wrap-price,
body:not(.single-product) .mpgp-archive-extras .price{
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: var(--mpgp-archive-price-gap, 4px);
}

/* Ensure sale prices remain visible after DOM moves (Woodmart can be picky) */
body:not(.single-product) .mpgp-archive-extras .wrap-price ins,
body:not(.single-product) .mpgp-archive-extras .wrap-price del,
body:not(.single-product) .mpgp-archive-extras .price ins,
body:not(.single-product) .mpgp-archive-extras .price del{
  display:inline-block !important;
  float:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
body:not(.single-product) .mpgp-archive-extras .moopsi-size-preview{
  margin-left: auto !important;
  justify-content: flex-end !important;
}
/* Color dots overlay */
body:not(.single-product) .product-wrapper .moopsi-color-preview{
  position:absolute;
  right: var(--mpgp-archive-color-right, 8px);
  bottom: var(--mpgp-archive-color-bottom, 8px);
  display: flex !important;
  gap: var(--mpgp-archive-color-gap, 5px);
  z-index:5;
  flex-wrap: nowrap !important;
  align-items: center !important;

  flex-direction: row !important;}

body:not(.single-product) .product-wrapper .moopsi-color-dot{  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
  border-radius: var(--mpgp-archive-color-radius, 0px);
  border: none !important;
background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:auto;

  box-shadow: none !important;
  outline: none !important;

  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: inline-block !important;}

/* Force archive color dot button box to match dot size (prevents theme button padding/min-height inflating it) */
body:not(.single-product) .product-wrapper .moopsi-color-preview,
body:not(.single-product) .product-wrapper .moopsi-color-dot{
  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: inline-block !important;
}

body:not(.single-product) .product-wrapper .moopsi-color-dot{
  border-radius: var(--mpgp-archive-color-radius, 0px) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}



body:not(.single-product) .product-wrapper .moopsi-color-dot.moopsi-dot-has-image{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Trust badges */
body:not(.single-product) .product-wrapper .moopsi-attr-badges{
  position:absolute;
  left: var(--mpgp-archive-badge-left, 8px);
  bottom: var(--mpgp-archive-badge-bottom, 8px);
  z-index:6;
}

body:not(.single-product) .moopsi-badge{
  display:inline-flex;
  font-size: var(--mpgp-archive-badge-fs, 11px);
  padding: var(--mpgp-archive-badge-pad-y, 4px) var(--mpgp-archive-badge-pad-x, 7px);
  border: var(--mpgp-archive-badge-border-w, 1px) solid var(--mpgp-archive-badge-border, rgba(0,0,0,.1));
  background: var(--mpgp-archive-badge-bg, rgba(255,255,255,.95));
  color: var(--mpgp-archive-badge-text, #555);
  font-weight: 500;
  white-space:nowrap;
  line-height:1;
}

body:not(.single-product) .moopsi-badge-trust{
  display:none;
  flex-direction:column;
  gap:4px;
}
body:not(.single-product) .product-wrapper:hover .moopsi-badge-trust{
  display:flex;
}

/* Optional: hide theme swatches on archives when enabled (scoped) */
body:not(.single-product) .product-wrapper.moopsi-hide-theme-swatches .wd-swatches,
body:not(.single-product) .product-wrapper.moopsi-hide-theme-swatches .wd-swatch,
body:not(.single-product) .product-wrapper.moopsi-hide-theme-swatches .wd-swatch-text,
body:not(.single-product) .product-wrapper.moopsi-hide-theme-swatches .wd-tooltip,
body:not(.single-product) .product-wrapper.moopsi-hide-theme-swatches .wd-text,
body:not(.single-product) .product-wrapper.moopsi-hide-theme-swatches .wd-swatch-bg{
  display:none !important;
}

body:not(.single-product) .product-element-top.moopsi-has-color-dots{ overflow:hidden; }


/* Make overlay reliably positioned */
body:not(.single-product) .product-wrapper .product-element-top{position:relative;}
body:not(.single-product) .product-wrapper .moopsi-color-preview{z-index: 15; pointer-events:auto;}
body:not(.single-product) .product-wrapper .moopsi-color-dot{cursor:pointer;}
body:not(.single-product) .product-wrapper .moopsi-color-dot.is-active{outline:2px solid var(--mpgp-archive-color-active-outline, rgba(0,0,0,.55)); outline-offset:2px;}
body:not(.single-product) .product-wrapper .moopsi-color-dot:focus-visible{outline:2px solid var(--mpgp-archive-color-focus-outline, rgba(0,0,0,.55)); outline-offset:2px;}



/* Out-of-stock color dot states (fade + slash, theme-agnostic) */
body:not(.single-product) .moopsi-color-dot.is-oos,
body:not(.single-product) .moopsi-color-dot[aria-disabled="true"],
body:not(.single-product) .moopsi-color-dot:disabled{
  opacity: var(--mpgp-archive-color-oos-opacity, 0.35) !important;
  filter: grayscale(100%) !important;
  cursor: not-allowed;
  pointer-events: none !important;
  position: relative;
  overflow: hidden;

/* Keep OOS visuals locked on hover/active/focus (Woodmart can try to override) */
body:not(.single-product) .moopsi-color-dot.is-oos:hover,
body:not(.single-product) .moopsi-color-dot.is-oos:focus,
body:not(.single-product) .moopsi-color-dot.is-oos:active,
body:not(.single-product) .moopsi-color-dot[aria-disabled="true"]:hover,
body:not(.single-product) .moopsi-color-dot[aria-disabled="true"]:focus,
body:not(.single-product) .moopsi-color-dot[aria-disabled="true"]:active{
  opacity: var(--mpgp-archive-color-oos-opacity, 0.35) !important;
  filter: grayscale(100%) !important;
  box-shadow: none !important;
  outline: none !important;
}
}

/* OOS diagonal slash overlay (thin, Moopsi-style) */
body:not(.single-product) .moopsi-color-dot.is-oos:after,
body:not(.single-product) .moopsi-color-dot[aria-disabled="true"]:after,
body:not(.single-product) .moopsi-color-dot:disabled:after{
  content:"";
  position:absolute;
  left:-35%;
  top:50%;
  width:170%;
  height: var(--mpgp-archive-color-oos-slash, 1px);
  background: var(--mpgp-archive-color-oos-slash-color, #343434);
  opacity: var(--mpgp-archive-color-oos-slash-opacity, 0.75);
  transform: rotate(45deg);
  transform-origin: center;
  pointer-events:none;
}


/* Out-of-stock size pill states */
body:not(.single-product) .product-wrapper .moopsi-size-pill.is-oos{
  opacity: var(--mpgp-archive-size-oos-opacity, 0.35);
  position: relative;
}
body:not(.single-product) .product-wrapper .moopsi-size-pill.is-oos.oos-outline{
  opacity: 1;
  border-color: var(--mpgp-archive-size-oos-border, #bdbdbd);
}
body:not(.single-product) .product-wrapper .moopsi-size-pill.is-oos.oos-hatch{
  opacity: 1;
}
body:not(.single-product) .product-wrapper .moopsi-size-pill.is-oos.oos-hatch:after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.0) 0, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 3px);
  border-radius: inherit;
  opacity: .45;
}
body:not(.single-product) .product-wrapper .moopsi-size-pill.is-oos.oos-dim{
  opacity: var(--mpgp-archive-size-oos-opacity, 0.35);
}

body:not(.single-product) .product-wrapper .moopsi-color-more{  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
  margin-left:4px;
  border:1px solid var(--mpgp-archive-dot-more-border, #cfcfcf);
  background: var(--mpgp-archive-dot-more-bg, #fff);
  color: var(--mpgp-archive-dot-more-text, #343434);
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
  border-radius: var(--mpgp-archive-color-radius, 0px) !important;
  cursor:pointer;

  min-width: var(--mpgp-archive-color-dot, 20px) !important;
  min-height: var(--mpgp-archive-color-dot, 20px) !important;
  box-sizing: border-box !important;}

/* Smart cap: hide extra dots until expanded */
body:not(.single-product) .product-wrapper .moopsi-color-preview .moopsi-color-dot.is-hidden{
  display:none !important;
}
body:not(.single-product) .product-wrapper .moopsi-color-preview.is-expanded .moopsi-color-dot.is-hidden{
  display:inline-block !important;
}


/* Phase18e: FORCE horizontal archive color dots, override theme button/layout quirks */
body:not(.single-product) .product-wrapper .moopsi-color-preview{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

body:not(.single-product) .product-wrapper .moopsi-color-preview > *{
  display: inline-block !important;
  flex: 0 0 auto !important;
}

body:not(.single-product) .product-wrapper .moopsi-color-dot{
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  vertical-align: middle !important;
}

/* Some themes force buttons to full width */
body:not(.single-product) .product-wrapper .moopsi-color-preview button.moopsi-color-dot{
  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
}



/* Phase18f FIX: restore wrapper as horizontal flex container (previous phase incorrectly sized .moopsi-color-preview itself) */
body:not(.single-product) .product-wrapper .moopsi-color-preview{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  font-size: inherit !important;
  white-space: nowrap !important;
}

body:not(.single-product) .product-wrapper .moopsi-color-preview > .moopsi-color-dot{
  display: inline-block !important;
  flex: 0 0 auto !important;
}

/* Ensure each dot stays 20px and never becomes a block row */
body:not(.single-product) .product-wrapper .moopsi-color-dot{
  display: inline-block !important;
  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
  padding: 0 !important;
  margin: 0 !important;
}


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


/* Professional-grade OOS/disabled states (theme-agnostic selectors) */
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot.is-oos{
  opacity: var(--mpgp-archive-color-oos-opacity, 0.35);
  position: relative;
}
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot.is-disabled{
  cursor: not-allowed !important;
  pointer-events: auto !important;
}
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot.is-disabled:active,
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot.is-disabled.is-active{
  transform: none !important;
}



/* V007.301: Make +X "more" badge match dots across themes (no .product-wrapper dependency) */
body:not(.single-product) .moopsi-color-dots .moopsi-color-more,
body:not(.single-product) .moopsi-color-more{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mpgp-archive-color-dot, 20px) !important;
  height: var(--mpgp-archive-color-dot, 20px) !important;
  min-width: var(--mpgp-archive-color-dot, 20px) !important;
  min-height: var(--mpgp-archive-color-dot, 20px) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* OOS indicator: faded + thin slash overlay (match single product behavior)
   NOTE: Do not suppress ::after — Woodmart themes often rely on ::after being present for our slash.
*/

/* V007.301: Disabled dots are truly non-interactive */
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot.is-disabled,
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot[aria-disabled="true"],
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot:disabled{
  pointer-events: none !important;
}


/* V007.303 — Archive OOS colors: faded + slash overlay (match single products) */
.moopsi-color-dot.is-oos{
  opacity: var(--mpgp-archive-color-oos-opacity, 0.35) !important;
  filter: grayscale(1) !important;
  position: relative;
  overflow: hidden;
}
.moopsi-color-dot.is-oos::after{
  content: "" !important;
  position: absolute !important;
  left: -35% !important;
  top: 50% !important;
  width: 170% !important;
  height: var(--mpgp-archive-color-oos-slash, 1px) !important;
  background: var(--mpgp-archive-color-oos-slash-color, #343434) !important;
  opacity: var(--mpgp-archive-color-oos-slash-opacity, 0.75) !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}
.moopsi-color-dot.is-oos.oos-outline,
.moopsi-color-dot.is-oos.oos-hatch{
  opacity: var(--mpgp-archive-color-oos-opacity, 0.35) !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* V007.356 — Force archive OOS fade/slash even when theme CSS tries to override inline opacity or pseudo elements */
body:not(.single-product) .moopsi-color-dots .moopsi-color-dot.is-oos::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -35% !important;
  top: 50% !important;
  width: 170% !important;
  height: var(--mpgp-archive-color-oos-slash, 1px) !important;
  background: var(--mpgp-archive-color-oos-slash-color, #343434) !important;
  opacity: var(--mpgp-archive-color-oos-slash-opacity, 0.75) !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}