/* Martinez Distro v1.5.0: stable product tiles for Kapee Products & Categories Box.
   All selectors are scoped to THIS widget; never shop or single product pages.
   This CSS deliberately does not require .section-content; some WPBakery builds
   omit that wrapper. JS adds .zm-md-grid as a separate safeguard. */
html body .products-and-categories-box {
  --md-card-height: 232px;
  --md-image-stage: 174px;
  --md-image-width: 178px;
  --md-image-height: 165px;
}

/* 4 products per row and fixed row height. Overrides Bootstrap float/flex grid. */
@media (min-width: 1024px) {
  html body .products-and-categories-box .products.products-wrap:not(.owl-carousel),
  html body .products-and-categories-box .products.row:not(.owl-carousel),
  html body .products-and-categories-box .products.zm-md-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1023px) {
  html body .products-and-categories-box .products.products-wrap:not(.owl-carousel),
  html body .products-and-categories-box .products.row:not(.owl-carousel),
  html body .products-and-categories-box .products.zm-md-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel),
html body .products-and-categories-box .products.row:not(.owl-carousel),
html body .products-and-categories-box .products.zm-md-grid {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-rows: var(--md-card-height) !important;
  gap: 0 !important;
  align-items: stretch !important;
  align-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: initial !important;
  box-sizing: border-box !important;
}

html body .products-and-categories-box .products.zm-md-grid > .product,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) > .product {
  display: block !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  flex: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--md-card-height) !important;
  min-height: var(--md-card-height) !important;
  max-height: var(--md-card-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Only eight visible cards per product section. */
html body .products-and-categories-box .products.zm-md-grid > .product:nth-of-type(n+9),
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) > .product:nth-of-type(n+9) {
  display: none !important;
}

/* Keep the complete hover box inside each stable tile. */
html body .products-and-categories-box .products.zm-md-grid > .product > .product-wrapper,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) > .product > .product-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--md-card-height) !important;
  min-height: var(--md-card-height) !important;
  max-height: var(--md-card-height) !important;
  margin: 0 !important;
  padding: 8px 8px 8px !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Every picture has the same stage, regardless of the uploaded image ratio. */
html body .products-and-categories-box .products.zm-md-grid .product-image,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-image {
  display: flex !important;
  flex: 0 0 var(--md-image-stage) !important;
  align-items: flex-end !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--md-image-stage) !important;
  min-height: var(--md-image-stage) !important;
  max-height: var(--md-image-stage) !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
html body .products-and-categories-box .products.zm-md-grid .product-image > a.woocommerce-LoopProduct-link,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-image > a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex: 0 1 auto !important;
  align-items: flex-end !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* No width:auto, padding %, or intrinsic-height leaks. Exact fitting rectangle. */
html body .products-and-categories-box .products.zm-md-grid .product-image > a img.front-image,
html body .products-and-categories-box .products.zm-md-grid .product-image > a img.wp-post-image,
html body .products-and-categories-box .products.zm-md-grid .product-image > a img:not(.hover-image),
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-image > a img:not(.hover-image) {
  display: block !important;
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: min(100%, var(--md-image-width)) !important;
  min-width: 0 !important;
  max-width: var(--md-image-width) !important;
  height: var(--md-image-height) !important;
  min-height: var(--md-image-height) !important;
  max-height: var(--md-image-height) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}
html body .products-and-categories-box .products.zm-md-grid .product-image > a img.hover-image,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-image > a img.hover-image {
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: min(100%, var(--md-image-width)) !important;
  max-width: var(--md-image-width) !important;
  height: var(--md-image-height) !important;
  max-height: var(--md-image-height) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

html body .products-and-categories-box .products.zm-md-grid .product-info,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-info {
  display: block !important;
  flex: 0 0 40px !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
}
html body .products-and-categories-box .products.zm-md-grid .product-title,
html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: 13px !important;
  line-height: 19px !important;
  font-weight: 400 !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
}

/* Small screens: two columns without cropping product photography. */
@media (max-width: 767px) {
  html body .products-and-categories-box {
    --md-card-height: 196px;
    --md-image-stage: 132px;
    --md-image-width: 124px;
    --md-image-height: 125px;
  }
  html body .products-and-categories-box .products.zm-md-grid .product-title,
  html body .products-and-categories-box .products.products-wrap:not(.owl-carousel) .product-title {
    font-size: 12px !important;
    line-height: 18px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}