/*
 * Listings Card Grid preset
 *
 * Loaded only when a layout's Style preset is set to "Listings card grid".
 *
 * Notes:
 * - Uses broader selectors (does NOT require a `.woocommerce` wrapper) because some themes/builders
 *   output the archive loop without that class.
 */

/* Grey canvas like the screenshot */
body.guru-wccl-style-listings .guru-wccl-layout {
  background: #e6e6e6;
  padding: var(--guru-wccl-canvas-pad-top, 34px) var(--guru-wccl-canvas-pad-x, 18px) var(--guru-wccl-canvas-pad-bottom, 70px);
}

/* Avoid extra backgrounds/padding from some themes */
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce {
  background: transparent;
}

/* Product + category grids */
body.guru-wccl-style-listings .guru-wccl-layout ul.products,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--guru-wccl-cols-desktop, 4), minmax(0, 1fr));
  gap: var(--guru-wccl-gap, 34px);
  margin: 0 !important;
  padding: 0 !important;
}

/* Optional full-bleed grid (useful inside Divi rows that have a max-width) */
body.guru-wccl-style-listings.guru-wccl-grid-fullbleed .guru-wccl-layout ul.products,
body.guru-wccl-style-listings.guru-wccl-grid-fullbleed .guru-wccl-layout .woocommerce ul.products {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: var(--guru-wccl-canvas-pad-x, 18px) !important;
  padding-right: var(--guru-wccl-canvas-pad-x, 18px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 575px) {
  body.guru-wccl-style-listings.guru-wccl-grid-fullbleed .guru-wccl-layout ul.products,
  body.guru-wccl-style-listings.guru-wccl-grid-fullbleed .guru-wccl-layout .woocommerce ul.products {
    padding-left: var(--guru-wccl-canvas-pad-x-xs, var(--guru-wccl-canvas-pad-x, 18px)) !important;
    padding-right: var(--guru-wccl-canvas-pad-x-xs, var(--guru-wccl-canvas-pad-x, 18px)) !important;
  }
}

/* Reset Woo defaults that use floats/margins */
body.guru-wccl-style-listings .guru-wccl-layout ul.products::before,
body.guru-wccl-style-listings .guru-wccl-layout ul.products::after,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products::before,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products::after {
  content: none !important;
}

body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product,
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product-category,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product-category {
  list-style: none;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;

  background: #fff;
  border-radius: var(--guru-wccl-radius, 14px);
  overflow: hidden;
  box-shadow: var(--guru-wccl-shadow, 0 10px 26px rgba(0, 0, 0, 0.16));
}

body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product a,
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product-category a,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product a,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product-category a {
  text-decoration: none;
  color: inherit;
}

/* Media wrapper injected by plugin (only on preset) */
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product .guru-wccl-card-media,
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product-category .guru-wccl-card-media,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product .guru-wccl-card-media,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product-category .guru-wccl-card-media {
  position: relative;
}

/* Images */
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product a img,
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product-category a img,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product a img,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product-category a img {
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
}

/* Default Woo sale flash: keep it, but style closer to the screenshot badge */
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product span.onsale,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product span.onsale {
  position: absolute;
  top: 14px;
  right: -46px;
  left: auto;
  width: 140px;
  height: 26px;
  min-height: 0;
  line-height: 26px;
  border-radius: 0;
  transform: rotate(45deg);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* Custom badges (finance bar + new ribbon) */
body.guru-wccl-style-listings .guru-wccl-layout .guru-wccl-badge {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: var(--guru-wccl-badge-size, 12px);
}

/* Orange bar across the top */
body.guru-wccl-style-listings .guru-wccl-layout .guru-wccl-badge--finance {
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: #ff7a00;
  color: #fff;
}

/* Diagonal "NEW" ribbon */
body.guru-wccl-style-listings .guru-wccl-layout .guru-wccl-badge--new {
  top: auto;
  bottom: 14px;
  right: -46px;
  width: 140px;
  height: 26px;
  background: #1e5fbf;
  color: #fff;
  transform: rotate(45deg);
}

/* Titles + prices (simple, uppercase, like the screenshot) */
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product .woocommerce-loop-product__title,
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product-category .woocommerce-loop-category__title,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  padding: var(--guru-wccl-title-pad-top, 14px) var(--guru-wccl-pad-x, 16px) var(--guru-wccl-title-pad-bottom, 10px);
  margin: 0;
  font-size: var(--guru-wccl-title-size, 13px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* Category cards: price range line under the title */
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product-category .guru-wccl-cat-price-range,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product-category .guru-wccl-cat-price-range {
  padding: 2px var(--guru-wccl-pad-x, 16px) var(--guru-wccl-price-pad-bottom, 14px);
  margin: 0;
  font-size: var(--guru-wccl-price-size, 13px);
  font-weight: 700;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product .price,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product .price {
  padding: 2px var(--guru-wccl-pad-x, 16px) var(--guru-wccl-price-pad-bottom, 14px);
  margin: 0;
  font-size: var(--guru-wccl-price-size, 13px);
  font-weight: 700;
  color: #9a9a9a;
}

body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product .price ins,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* Optional: hide add to cart buttons on archive so it matches the clean cards */
body.guru-wccl-style-listings .guru-wccl-layout ul.products li.product .button,
body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products li.product .button {
  display: none !important;
}

/* Responsive columns */
@media (max-width: 1200px) {
  body.guru-wccl-style-listings .guru-wccl-layout ul.products,
  body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--guru-wccl-gap-md, var(--guru-wccl-gap, 28px));
  }
}

@media (max-width: 980px) {
  body.guru-wccl-style-listings .guru-wccl-layout ul.products,
  body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--guru-wccl-gap-sm, var(--guru-wccl-gap-md, 24px));
  }
}

@media (max-width: 575px) {
  body.guru-wccl-style-listings .guru-wccl-layout ul.products,
  body.guru-wccl-style-listings .guru-wccl-layout .woocommerce ul.products {
    grid-template-columns: repeat(var(--guru-wccl-cols-mobile, 1), minmax(0, 1fr));
    gap: var(--guru-wccl-gap-xs, var(--guru-wccl-gap-sm, 18px));
  }

  body.guru-wccl-style-listings .guru-wccl-layout {
    padding: var(--guru-wccl-canvas-pad-top-xs, var(--guru-wccl-canvas-pad-top, 22px)) var(--guru-wccl-canvas-pad-x-xs, var(--guru-wccl-canvas-pad-x, 12px)) var(--guru-wccl-canvas-pad-bottom-xs, var(--guru-wccl-canvas-pad-bottom, 60px));
  }
}