/* =====================================================================
   Geo Herb — PRODUCT IMAGE FIX (image cut/crop na ho)
   Load this file LAST on every page that shows product images.
   Rule of thumb: product photos are always shown with object-fit:contain
   (poori image dikhe), never cover (jo crop karta hai).
   ===================================================================== */

/* 1) Home / Category / Products cards ---------------------------------- */
.product-img{display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-img img{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain!important;object-position:center;
  padding:10px;border-radius:0;display:block;
}
@media(max-width:480px){ .product-img img{padding:6px} }

/* 2) Product detail page - MAIN image ----------------------------------
   Bug: .gallery-main was display:grid with img height:100%. In an auto-sized
   grid row, 100% resolves to the image's natural height (e.g. 1143px), so a
   tall bottle photo grew past the 500px box and got clipped (only the cap
   was visible). Flex + max-height fixes it for every image shape. */
.gallery-main{display:flex!important;align-items:center;justify-content:center}
.gallery-main img{
  width:auto!important;height:auto!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;padding:12px;display:block;
}

/* 3) Product detail page - THUMBNAILS (were object-fit:cover = cropped) */
.gallery-thumb,.product-thumb{display:flex;align-items:center;justify-content:center;background:#fff}
.gallery-thumb img,.product-thumb img{
  width:100%;height:100%;object-fit:contain!important;padding:4px;
}

/* 4) "More from category" related cards (had NO fit rule at all, so the
   image rendered at natural size and got clipped by the card) */
.related-image{overflow:hidden;display:flex!important;align-items:center;justify-content:center}
.related-image img{
  width:100%;height:100%;object-fit:contain!important;padding:10px;display:block;
}

/* 5) Cart drawer thumbnails */
.drawer-item-thumb img{object-fit:contain!important;padding:3px}

/* 6) Zoom popup */
.zoom-view img{object-fit:contain!important}


/* =====================================================================
   CARD LAYOUT FIX — "Add to Cart" / "Buy Now" buttons ek hi line (same
   height) par aayein, chahe product ka naam 1 line ka ho ya 3 line ka.
   Bug: .product-click display:block tha, isliye buttons naam/price ke
   turant baad aate the. Ab card = flex column, buttons hamesha neeche.
   ===================================================================== */

/* --- Home / Best Selling / Category / Products / Favorites cards --- */
.product{display:flex;flex-direction:column}
.product-click{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;height:auto}
.product-click>.product-img,.product>.product-img{flex:0 0 auto}
.product-info{display:flex;flex-direction:column;flex:1 1 auto}
/* naam max 2 line, aur hamesha 2 line jitni jagah -> sab cards barabar */
.product-info h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;line-height:1.3;min-height:2.6em;
}
.product-info>.price{margin-bottom:12px}
.product-info>.home-product-actions,
.product-info>.add{margin-top:auto}
.product-info>.home-product-actions{padding-top:0}

/* --- "More from category" related cards (product detail page) --- */
.related-card{display:flex;flex-direction:column}
.related-card>.related-image{flex:0 0 auto}
.related-info{display:flex;flex-direction:column;flex:1 1 auto}
.related-info h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;line-height:1.3;min-height:2.6em;
}
.related-info .related-price{margin-bottom:12px}
.related-info .related-actions{margin-top:auto}