/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Set fixed height for product card image */
/* 1) Target the actual <img> inside each product card */
.attachment-woocommerce_thumbnail .size-woocommerce_thumbnail {
  display: block !important;     /* kill inline gaps */
  width: 100% !important;        /* fill the card’s width */
  height: 300px !important;      /* ← your desired fixed height */
  object-fit: cover !important;  /* crop to fill without distortion */
}

/* 2) (Optional) If your theme wraps images in a link or div, add those too */
.product-image-link {
  /* same rules as above */
  display: block !important;
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
}

/* Smaller product details image gallery width */
/* 1) Limit the whole gallery block on single-product pages */
body.single-product .product .images,
body.single-product .woocommerce-product-gallery {
  max-width: 400px;         /* ← whatever total width you want */
  width: 100%;              /* ensures it still shrinks on mobile */
  margin: 0 auto;           /* center it */
}

/* 2) Keep each image filling that container at its natural ratio */
body.single-product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto  !important;
}

/* Set fixed height for product card image on mobile for today's recommendation section on homepage*/
@media only screen and (max-width: 767px) {
  /* 1) Target that one carousel’s images on mobile */
  .home-recommendation-product-carousel .attachment-woocommerce_thumbnail .size-woocommerce_thumbnail {
    display: block !important;
    width: 100%  !important;
    height: 150px !important;   /* ← your mobile-only height */
    object-fit: cover !important;
  }
	
	.home-recommendation-product-carousel .product-image-link {
  /* same rules as above */
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
}