/* Product card styling (Flatsome-ish target) */
.woocommerce ul.products li.product {
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius);
  overflow: hidden;
  min-height: 450px;
  background: #fff;
}

.woocommerce ul.products li.product a {
  text-decoration: none;
}

.woocommerce ul.products li.product a img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}

/* Out of stock: grayscale without image copies */
.woocommerce ul.products li.product.outofstock img {
  filter: grayscale(1);
  opacity: .75;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  display: block;
}

@supports (aspect-ratio: 5 / 7) {
  .woocommerce ul.products li.product .woocommerce-loop-product__link img {
    height: 100%;
  }
}

/* Text area (approx 100px) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  margin: 10px 12px 6px;
  line-height: 1.2;
  min-height: 2.4em; /* keep titles aligned-ish */
}

.woocommerce ul.products li.product .price {
  margin: 0 12px 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Optional: category line (requires small markup tweak later if you want it explicitly) */
.np-card__category {
  margin: 10px 12px 0;
  font-size: 12px;
  opacity: .7;
}

/* Add to cart button */
.woocommerce ul.products li.product .button {
  margin: 0 12px 12px;
  border-radius: var(--np-radius);
}

/* Sale badge tweak */
.woocommerce span.onsale {
  border-radius: var(--np-radius);
}

/* Anchor: Out of stock – fogged product card */

/* Whole card gets slightly muted */
.woocommerce ul.products li.product.outofstock {
  opacity: 0.72;                 /* main fog effect */
}

/* Keep text readable (slightly counter opacity) */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title,
.woocommerce ul.products li.product.outofstock .price,
.woocommerce ul.products li.product.outofstock .np-card__meta {
  opacity: 0.9;
}

/* Image: grayscale + slight dim */
.woocommerce ul.products li.product.outofstock img {
  filter: grayscale(100%) brightness(0.95);
}

/* Optional: disable hover lift / effects */
.woocommerce ul.products li.product.outofstock:hover {
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Remove Woo yellow / accent color from price */
.woocommerce ul.products li.product.outofstock .price,
.woocommerce ul.products li.product.outofstock .price span,
.woocommerce ul.products li.product.outofstock .price bdi {
  color: #666 !important;   /* neutral grey */
}