/* =============================
   PC Mix Colors – Solid Baseline CSS (clean)
   ============================= */

/* -----------------------------
   Tier UI
   ----------------------------- */
.pc-mix-colors .pc-tier-wrap{ padding: 0 14px; }

.pc-mix-colors .pc-tier-title{
  font-size: 18px;
  font-weight: 700;
  color: #757575;
  margin: 0 2px 8px 2px;
}

.pc-mix-colors .pc-tier-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.pc-mix-colors .pc-tier-option input{
  position: absolute;
  left: -9999px;
}

.pc-mix-colors .pc-tier-pill{
  border-radius: 2px;
  background: #fff;
  border: 1px solid #b9b9b9;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
}

.pc-mix-colors .pc-tier-qty{
  font-size: 16px;
  font-weight: 500;
  line-height: 2em;
  color: #000;
}

.pc-mix-colors .pc-tier-sub{ display:none; }

.pc-mix-colors .pc-tier-pill:hover{ border-color:#8f8f8f; }
.pc-mix-colors .pc-tier-option input:checked + .pc-tier-pill{ border-color:#000; }

.pc-mix-colors .pc-tier-price-line{ margin-top:6px; }
.pc-mix-colors .pc-tier-price{ font-weight:400; font-size:1.25em; }
.pc-mix-colors .pc-tier-unit{ color:#777; font-weight:400; margin-left:6px; }

.pc-mix-colors .pc-tier-help{ margin-top:6px; font-size:13px; opacity:.85; }

.pc-mix-colors .pc-mix-status{ margin-top:8px; font-size:13px; }
.pc-mix-colors .pc-mix-status.pc-error{ font-weight:700; }

/* Hide the tier price line until JS shows it (per your latest baseline) */
.pc-mix-colors .pc-tier-price-line{ display:none; }

/* -----------------------------
   Hide the color grid until a tier is selected
   ----------------------------- */
.pc-mix-colors:not(.pc-tier-selected) .pc-colors-wrap{
  display: none !important;
}

/* -----------------------------
   Hide MNM internal qty inputs (child item qtys)
   ----------------------------- */
.pc-mix-colors input[name^="mnm_quantity["]{
  position:absolute !important;
  left:-9999px !important;
}

/* -----------------------------
   Reduce MNM tile content (keep images)
   ----------------------------- */
.pc-mix-colors .mnm_item_title,
.pc-mix-colors .mnm_title,
.pc-mix-colors .product-name,
.pc-mix-colors .woocommerce-loop-product__title,
.pc-mix-colors .mnm_item_data,
.pc-mix-colors .mnm_description,
.pc-mix-colors .stock,
.pc-mix-colors .woocommerce-product-excerpt{
  display:none !important;
}

.pc-mix-colors .mnm_price,
.pc-mix-colors .mnm_counter{
  display:none !important;
}

/* Hide MNM notices */
.pc-mix-colors .mnm_message,
.pc-mix-colors .mnm_validation,
.pc-mix-colors [class*="mnm"][class*="notice"],
.pc-mix-colors [class*="mnm"][class*="message"]{
  display:none !important;
}

/* -----------------------------
   Checkbox overlay on the image container
   Your current positioning that works
   ----------------------------- */
.pc-mix-colors .mnm_child_product_image{
  position: relative !important;
  display: inline-block !important;
  line-height: 0 !important;
}

.pc-mix-colors .mnm_child_product_image > img{
  display:block !important;
}

/* Overlay the selector */
.pc-mix-colors .mnm_child_product_image .pc-color-select{
  position: absolute !important;
  left: 4px !important;
  bottom: 0px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  display: block !important;
}

/* Hide the word "Select" */
.pc-mix-colors .pc-color-text{ display:none !important; }

/* Checkbox look */
.pc-mix-colors .mnm_child_product_image .pc-color-checkbox{
  transform: scale(1.25) !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 4px !important;
  padding: 2px !important;
  pointer-events: auto !important;
}

/* Disabled look */
.pc-mix-colors .pc-color-checkbox:disabled{
  opacity: .5 !important;
  cursor: not-allowed !important;
}

/* Kill zoom triggers if present */
.pc-mix-colors .woocommerce-product-gallery__trigger,
.pc-mix-colors .zoomImg,
.woocommerce-product-gallery__trigger,
.zoomImg{
  display:none !important;
}

/* -----------------------------
   Warning label under image (inserted after figure)
   ----------------------------- */
.pc-mix-colors .pc-stock-left{
  display:none;
  margin-top:6px;
  font-size:.83em;
  white-space:nowrap;
  color:#a05a00;
  font-weight:600;
}

.pc-mix-colors .pc-stock-left.pc-stock-warn{
  display:block;
  opacity:.95;
}

/* -----------------------------
   Clear button as simple link (“clear”)
   ----------------------------- */
.pc-mix-colors .mnm_reset.button.wp-element-button{
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;

  padding-top: 1px !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;

  margin: 0 0 10px 0 !important;

  font-size: .83em !important;
  color: var(--pc-link, #2c7c7b) !important;
  line-height: 2em !important;

  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer !important;
  display: block !important;
  width: fit-content !important;
}

/* Remove any icons injected by theme/plugins */
.pc-mix-colors .mnm_reset.button.wp-element-button::before,
.pc-mix-colors .mnm_reset.button.wp-element-button::after,
.pc-mix-colors .mnm_reset.button.wp-element-button svg,
.pc-mix-colors .mnm_reset.button.wp-element-button i{
  display: none !important;
  content: none !important;
}

/* -----------------------------
   Quantity + Add to cart on ONE line
   Target the actual rendered wrapper from Mix & Match:
   .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap
   ----------------------------- */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .quantity{
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .single_add_to_cart_button{
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}

/* Safety: prevent legacy float/clear rules from breaking layout */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .quantity,
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .single_add_to_cart_button{
  float: none !important;
  clear: none !important;
}

/* Optional: keep qty input from being too wide */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .quantity .qty{
  width: 70px;
}

/* ===== If "clear" is inside mnm_button_wrap: force it onto its own row ===== */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap{
  display: flex !important;
  flex-wrap: wrap !important;          /* allow multiple rows */
  align-items: center !important;
  gap: 10px !important;
}

/* Clear link takes full width on row 1 */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .mnm_reset.button.wp-element-button{
  flex: 0 0 100% !important;           /* full-width row */
  width: fit-content !important;
  margin: 0 0 6px 0 !important;
  order: 1 !important;
}

/* Quantity + Add to cart stay on row 2 */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .quantity{
  flex: 0 0 auto !important;
  margin: 0 !important;
  order: 2 !important;
}

.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .single_add_to_cart_button{
  flex: 0 0 auto !important;
  width: auto !important;              /* prevent full-width */
  display: inline-flex !important;
  margin: 0 !important;
  order: 3 !important;
}

/* Safety: prevent legacy float/clear rules from breaking layout */
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .mnm_reset,
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .quantity,
.pc-mix-colors .woocommerce-mix-and-match-add-to-cart.mnm_button_wrap .single_add_to_cart_button{
  float: none !important;
  clear: none !important;
}

/* Hide the Mix & Match reset button completely */
.pc-mix-colors .mnm_reset.button.wp-element-button{
  display: none !important;
}

/* Our "clear" link */
.pc-mix-colors .pc-clear-link{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding-top: 1px !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;

  font-size: .83em !important;
  color: var(--pc-link, #2c7c7b) !important;
  line-height: 2em !important;

  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer !important;

  display: inline-block !important;
}

/* =========================================================
   OUT OF STOCK (MnM grid): keep color + overlay on tile image
   ========================================================= */

/* 1) Prevent any theme/plugin dimming/greyscale INSIDE our MnM component */
.pc-mix-colors .outofstock,
.pc-mix-colors .out-of-stock,
.pc-mix-colors .outofstock *,
.pc-mix-colors .out-of-stock *,
.pc-mix-colors .mnm_child_product.outofstock,
.pc-mix-colors .mnm_child_product.out-of-stock{
  opacity: 1 !important;
  filter: none !important;
}

/* 2) Some themes apply grayscale to images directly */
.pc-mix-colors .outofstock img,
.pc-mix-colors .out-of-stock img{
  opacity: 1 !important;
  filter: none !important;
}

/* 3) Overlay on the wrapper you already position: .mnm_child_product_image
      We support either an OOS class on the tile OR your "title=Out of stock" marker. */

/* Make sure overlay can sit above the image (but below your checkbox z-index 99999) */
.pc-mix-colors .mnm_child_product_image{
  position: relative !important;
}

/* OOS overlay when Woo/MnM marks the child product out of stock */
.pc-mix-colors .mnm_child_product.outofstock .mnm_child_product_image::after,
.pc-mix-colors .mnm_child_product.out-of-stock .mnm_child_product_image::after,
.pc-mix-colors .mnm_child_product_image:has(img[title="Out of stock"])::after{
  content: "Sold out";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.70);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  text-align: center;
  z-index: 5000;        /* below checkbox (99999), above image */
  pointer-events: none;
}

/* Optional: tiny vignette for text legibility (still keeps full color) */
.pc-mix-colors .mnm_child_product.outofstock .mnm_child_product_image::before,
.pc-mix-colors .mnm_child_product.out-of-stock .mnm_child_product_image::before,
.pc-mix-colors .mnm_child_product_image:has(img[title="Out of stock"])::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.10);
  z-index: 4500;
  pointer-events: none;
}