/* Remove the native dropdown UI (kvc's swatches/cards replace it). Keep
   .woocommerce-variation visible - it's a sibling of
   .woocommerce-variation-add-to-cart, not a wrapper around it, and is
   where WooCommerce renders the selected variation's price and
   stock/"unavailable combination" messaging. Hiding it hid that
   messaging along with the dropdowns it was meant to replace. */
table.variations,
.reset_variations {
  display:none !important;
}
.woocommerce-variation-add-to-cart { display:block !important; }

/* Option groups - values lifted from the STAGGS configurator on live (2026-10-30) */
.kvc-section{
  background:#fff;
  border-radius:12px;
  padding:20px;
  margin-bottom:40px;
  box-shadow:0 4px 12px 0 rgba(0,0,0,.1);
}
.kvc-header{ margin-bottom:12px; }
.kvc-section .kvc-title{
  font-family:ivymode, serif;
  font-size:19px;
  font-weight:600;
  line-height:24.7px;
  letter-spacing:-0.32px;
  margin:0;
  padding:0;
}
.kvc-section .kvc-selected{
  font-size:16px;
  line-height:1.3;
  margin:0;
  padding:0;
}

.kvc-options{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(63px, 1fr));
  justify-items:center;
  gap:12px;
}
.kvc-option-wrapper{ cursor:pointer; }

/* Colour / trim circles */
.kvc-colour-circle{
  width:40px;height:40px;border-radius:50%;
  background-size:cover;background-position:center;
  background-clip:content-box;
  padding:4px;
  border:2px solid transparent;
  box-sizing:content-box;
}
.kvc-option-wrapper.active .kvc-colour-circle{ border-color:#000; }
.kvc-label{ display:none; } /* STAGGS hides swatch labels; name shows in .kvc-selected and on hover */

/* Image cards for non-colour attributes (e.g. Cooktop) */
.kvc-section:not([data-attribute="pa_colour"]):not([data-attribute="pa_trim"]) .kvc-options{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  justify-items:stretch;
  gap:10px;
}
.kvc-card{
  height:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #f6f6f6;
  padding:20px;
  text-align:center;
}
.kvc-option-wrapper.active .kvc-card{ border:2px solid #000; padding:19px; }
.kvc-card-thumb{ margin-bottom:16px; }
.kvc-card-thumb img{ display:block; width:100%; height:auto; }
.kvc-card-label{ font-size:16px; font-weight:700; line-height:1.3; }
.kvc-card-note{ display:block; font-size:14px; font-weight:300; line-height:20px; margin-top:4px; }
.kvc-card-price{ display:block; font-size:16px; font-weight:300; margin-top:4px; }

/* Pills */
.kvc-pill{
  padding:10px 22px;border-radius:25px;border:1px solid #ccc;
  background:#fff;font-size:14px; min-width:140px;
}
.kvc-option-wrapper.active .kvc-pill{ border-color:#000; box-shadow:0 0 0 1px #000 inset; }

/* Summary box */
.kvc-summary-box{
  margin-top:28px;
  background:#f5f5f5;
  border-radius:16px;
  padding:26px 28px;
}
.kvc-summary-box h3{
  margin:0 0 16px 0;
  font-size:32px;
  line-height:1.1;
}
.kvc-row{
  display:flex;
  gap:16px;
  margin:10px 0;
}
.kvc-row-key{
  width:120px;
  font-weight:700;
}
.kvc-row-val{
  flex:1;
}
.kvc-summary-sku{
  margin-top:14px;
  font-size:18px;
}
.kvc-summary-price{
  margin-top:14px;
  font-size:24px;
}
/* beats woocommerce.css .woocommerce div.product span.price (#958e09) */
.woocommerce div.product .kvc-summary-price span.price{
  color:#000;
}
.kvc-summary-price:empty{
  display:none;
}
/* Price is shown in the summary box instead (after the SKU) */
.kvc-wrapper ~ .variations_form .woocommerce-variation-price{
  display:none;
}
.kvc-copy-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding:0;
  background:none;
  border:0;
  color:inherit;
  font-size:16px;
  text-decoration:underline;
  cursor:pointer;
}


/* Hide duplicate SKU/meta output under the summary (keep our in-box SKU only) */
.product_meta .sku_wrapper,
.product_meta .sku-message,
.product_meta .sku,
.product_meta .posted_in,
.product_meta .tagged_as {
  display: none !important;
}

/* -----------------------------------------
   Salient: sticky main product image column
   Scoped off the "Left Thumbnails" gallery type, where it collapses the layout
   (that type has its own sticky thumbs).
   ----------------------------------------- */
body.single-product .product:not([data-gallery-style="left_thumb_sticky"]) > .nectar-prod-wrap,
body.single-product .product:not([data-gallery-style="left_thumb_sticky"]) > .nectar-prod-wrap .woocommerce-product-gallery{
  overflow: visible !important;
}

/* Stick the left image column while scrolling options */
body.single-product .product:not([data-gallery-style="left_thumb_sticky"]) > .nectar-prod-wrap .single-product-main-image{
  position: sticky;
  top: var(--kvc-sticky-top, 110px); /* adjust via CSS var if needed */
  align-self: flex-start;
}

/* Disable sticky on small screens. Back to Salient's own value (relative), not
   static - Salient offsets the mobile gallery with it and static shifts it ~170px left. */
@media (max-width: 999px){
  body.single-product .product:not([data-gallery-style="left_thumb_sticky"]) > .nectar-prod-wrap .single-product-main-image{
    position: relative;
    top: auto;
  }
}