/*
 * Control IO Theme Styles
 * @file: css/woocommerce.css
 * @purpose: WooCommerce-specific overrides (no component visuals here)
 * @author: WojBit
 * @version: 1.0.1
 * @license: https://wojbit.au/licenses/proprietary.html
 * @notes:
 *   - Card visuals are defined in css/components/cards.css
 *   - This file only adjusts Woo core loops/layout and minor helpers
 */

/* ==========================================================================
   Product & Category Loops
   ========================================================================== */

/* Ensure category thumbnails in default Woo loops fill nicely */
.woocommerce ul.products li.product-category a img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 11;
  border-top-left-radius: var(--radius-2xl, 16px);
  border-top-right-radius: var(--radius-2xl, 16px);
}

/* Avoid unexpected overflow from product/category cards */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  overflow: visible; /* cards handle their own overflow */
}

/* Spacing polish for wide screens (kept minimal and safe) */
@media (min-width: 1280px) {
  .woocommerce ul.products.columns-4 li.product-category,
  .woocommerce ul.products.columns-4 li.product {
    margin-bottom: 2rem;
  }
}

/* ==========================================================================
   Background-image Variant Support
   (Only needed if using content-product_cat-bg.php)
   ========================================================================== */

.category-card.is-bg .category-card__media {
  aspect-ratio: 16 / 11;
  background-image: var(--cat-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .category-card.is-bg .category-card__media {
    height: 160px;
  }
}

/* ==========================================================================
   Misc Woo UX Polishing (non-visual)
   ========================================================================== */

/* Remove underlines from links inside Woo product/category cards */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product-category a {
  text-decoration: none;
}

/* Ensure images don’t exceed their container width due to legacy themes/plugins */
.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Keep sale/onsale badges from overlapping rounded corners too aggressively */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  z-index: 2;
}