/*
 * Unlayered compatibility bridge for WooCommerce and commerce plugins.
 *
 * Third-party WooCommerce CSS is intentionally unlayered. Per the cascade
 * specification, unlayered declarations outrank every named layer, even when
 * the layered theme stylesheet is loaded later. Structural resets therefore
 * live in this small final stylesheet; brand and component styling stays in
 * the locked theme layers.
 */

.em26-woo-surface,
.em26-woo-surface > [class~="woocommerce"],
.em26-woo-surface [class~="woocommerce-notices-wrapper"] {
  width: 100%;
  min-width: 0;
}

.em26-woo-surface ul[class~="products"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--em26-space-5) !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.em26-woo-surface ul[class~="products"]::before,
.em26-woo-surface ul[class~="products"]::after {
  content: none !important;
  display: none !important;
}

.em26-woo-surface ul[class~="products"] > li[class~="product"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  float: none !important;
  clear: none !important;
  grid-column: auto !important;
  margin: 0 !important;
}

.em26-woo-surface ul[class~="products"] > li[class~="product"] > a[class~="woocommerce-LoopProduct-link"] {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  flex: 1 1 auto;
}

/* WooCommerce appends product counts to native category tiles. The count is
 * inventory plumbing rather than navigation copy; hiding it also keeps paired
 * category cards aligned when one family has a longer stock list. */
.em26-woo-surface mark[class~="count"] {
  display: none !important;
}

/* Shoptimizer places the sale flag beyond the product-card edge. Keep the
 * native badge, but anchor it inside the card so it cannot widen mobile pages. */
.em26-woo-surface ul[class~="products"] > li[class~="product"] [class~="onsale"] {
  left: auto !important;
  right: var(--em26-space-3) !important;
  max-width: calc(100% - (2 * var(--em26-space-3)));
  margin: 0 !important;
}

.em26-product--resin-technical div[class~="product"],
.em26-woo-surface--product div[class~="product"] {
  width: 100% !important;
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
  align-items: start;
  column-gap: var(--em26-space-8);
}

/* CommerceKit inserts this empty runtime mount between the gallery and the
 * summary. Keep the mount available to its scripts without letting it consume
 * a CSS-grid cell and push the purchase summary onto a second row. */
.em26-woo-surface--product div[class~="product"] > #cgkit-pdp-gallery-outside {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.em26-woo-surface--product div[class~="product"] [class~="woocommerce-product-gallery"],
.em26-woo-surface--product div[class~="product"] [class~="images"],
.em26-woo-surface--product div[class~="product"] [class~="summary"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

.em26-woo-surface--product div[class~="product"] [class~="woocommerce-product-gallery"],
.em26-woo-surface--product div[class~="product"] [class~="images"] {
  opacity: 1 !important;
}

.em26-woo-surface--product [class~="woocommerce-product-gallery"] img,
.em26-woo-surface--product [class~="images"] img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* CommerceKit gives its thumbnail swiper a fixed 400px width on narrow
 * screens. The rail remains interactive, but must stay inside the gallery. */
.em26-woo-surface--product [class~="cg-thumb-swiper"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

.em26-woo-surface--product div[class~="product"] [class~="woocommerce-tabs"],
.em26-woo-surface--product div[class~="product"] [class~="related"],
.em26-woo-surface--product div[class~="product"] [class~="upsells"] {
  width: 100% !important;
  min-width: 0;
  grid-column: 1 / -1 !important;
  float: none !important;
  clear: both !important;
}

.em26-woo-surface--product [class~="related"] ul[class~="products"],
.em26-woo-surface--product [class~="upsells"] ul[class~="products"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--em26-space-5) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.em26-woo-surface--product [class~="related"] ul[class~="products"] > li[class~="product"],
.em26-woo-surface--product [class~="upsells"] ul[class~="products"] > li[class~="product"] {
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  grid-column: auto !important;
  margin: 0 !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
}

.em26-woo-surface--product [class~="related"] ul[class~="products"] > li[class~="product"] > a[class~="woocommerce-LoopProduct-link"],
.em26-woo-surface--product [class~="upsells"] ul[class~="products"] > li[class~="product"] > a[class~="woocommerce-LoopProduct-link"] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  flex: 1 1 auto;
}

@media (max-width: 63.99rem) {
  .em26-woo-surface ul[class~="products"],
  .em26-woo-surface--product [class~="related"] ul[class~="products"],
  .em26-woo-surface--product [class~="upsells"] ul[class~="products"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .em26-woo-surface--product div[class~="product"] {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--em26-space-6);
  }

  .em26-woo-surface--product div[class~="product"] [class~="woocommerce-tabs"],
  .em26-woo-surface--product div[class~="product"] [class~="related"],
  .em26-woo-surface--product div[class~="product"] [class~="upsells"] {
    grid-column: 1 !important;
  }
}

@media (max-width: 47.99rem) {
  .em26-woo-surface ul[class~="products"],
  .em26-woo-surface--product [class~="related"] ul[class~="products"],
  .em26-woo-surface--product [class~="upsells"] ul[class~="products"] {
    grid-template-columns: minmax(0, 1fr);
  }
}