/*
 * Crafty Corner v0.4.153 — Correct WooCommerce related-product grid.
 *
 * WooCommerce supplies clearfix pseudo-elements on ul.products. As grid
 * children, these pseudo-elements can occupy one of the four grid tracks,
 * displacing the fourth product to a new row.
 *
 * This is scoped to related products / upsells on SINGLE product pages.
 * It does not alter shop archives, checkout, product data, or image files.
 */

body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products,
body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.8vw, 24px) !important;
  align-items: stretch;
  list-style: none;
  padding: 0 !important;
}

/* WooCommerce's clearfix ::before/::after must not become grid cells. */
body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products::before,
body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products::after,
body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products::before,
body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products::after {
  content: none !important;
  display: none !important;
}

/* Clear legacy float/first/last rules: every item gets its own grid cell. */
body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products > li.product,
body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products > li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  background: #171B27 !important;
  border: 1px solid rgba(214,178,124,.55) !important;
  border-radius: var(--cc151-radius, 12px) !important;
  color: #F5EBD9 !important;
}

/* Consistent image frames, without adding white CSS gutters. */
body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products > li.product img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 5;
  height: auto !important;
  object-fit: cover !important;
  object-position: center;
  padding: 0 !important;
  margin: 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0B1119 !important;
}

body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products > li.product :is(.price, .price *, .woocommerce-loop-product__title) {
  color: #F5EBD9;
}
body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products > li.product .price,
body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products > li.product .price * {
  color: #D6B27C !important;
}

@media (max-width: 1150px) {
  body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products,
  body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products,
  body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  body.single-product.woocommerce div.product :is(.related.products,.upsells.products) ul.products,
  body.single-product.woocommerce-page div.product :is(.related.products,.upsells.products) ul.products {
    gap: 12px !important;
  }
}