/* NotesDuniya – responsive fixes for the homepage (tablet / small-desktop widths).  v2
   Loaded last from includes/import_common_css.php so it overrides the theme.
   Remove the <link> line to roll back. */

/* ---------- hero slider: never wider than its column ---------- */
#homepage-slider .bx-wrapper,
#homepage-slider .bx-wrapper-custom-height { max-width: 100% !important; }
#homepage-slider .carousel-inner img.carsl-img,
.carsl-img { width: 100%; max-width: 100%; height: auto; max-height: none; }

/* ---------- side promos: images scale, captions never overlap ---------- */
#htmlcontent_top img, #htmlcontent_silderbottom img { max-width: 100%; height: auto; display: block; }
#htmlcontent_top .item-title {
  position: static; display: block; margin: 6px 0 12px; font-size: 13px; line-height: 1.35;
  white-space: normal; overflow: hidden;
}

/* ---------- product grid (Relevant / Latest products) ---------- */
/* !important is deliberate: the theme CSS forces these columns to 100% at mid widths. */
#showcase-container .row.d-flex-row {
  display: flex !important; flex-wrap: wrap !important; flex-direction: row !important;
  margin-left: -10px; margin-right: -10px;
}
#showcase-container .row.d-flex-row > [class*="col-"] {
  float: none !important; display: flex !important; flex-direction: column;
  flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  padding: 0 10px !important; box-sizing: border-box; margin: 0 0 24px 0 !important;
}
@media (min-width: 480px) {
  #showcase-container .row.d-flex-row > [class*="col-"],
  #showcase-container .shop-bottom-area .col-sm-6 { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; }
}
@media (min-width: 992px) {
  #showcase-container .row.d-flex-row > [class*="col-"],
  #showcase-container .shop-bottom-area .col-sm-6 { flex: 0 0 33.3333% !important; width: 33.3333% !important; max-width: 33.3333% !important; }
}
@media (min-width: 1200px) {
  #showcase-container .row.d-flex-row > [class*="col-"],
  #showcase-container .shop-bottom-area .col-sm-6 { flex: 0 0 25% !important; width: 25% !important; max-width: 25% !important; }
}

#showcase-container .product-wrap { position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100%; display: flex; flex-direction: column; margin: 0 !important; }

/* image box keeps a book-cover shape; the picture fits inside without stretching */
#showcase-container .product-img { position: relative; width: 100%; overflow: hidden; background: #f7f7f7; }
#showcase-container .product-img > a { display: block; aspect-ratio: 3 / 4; max-height: 420px; }
#showcase-container .product-img > a > img {
  width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;
}
/* browsers without aspect-ratio support (very old) */
@supports not (aspect-ratio: 3 / 4) {
  #showcase-container .product-img > a > img { height: auto; max-height: 360px; }
}

#showcase-container .product-content { flex: 1 1 auto; }
#showcase-container .product-content h3 {
  font-size: 14px; line-height: 1.35; margin: 8px 0 4px; min-height: 2.7em;
  overflow: hidden; word-break: break-word;
}
#showcase-container .product-sale-wrap { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* neutralise the theme's APPWEB rules in overwritestyle.css
   (.shop-bottom-area .col-sm-6 {width:25%} at <=768px, 50% at <=576px, img min-height 235px) */
#showcase-container .shop-bottom-area .row.d-flex-row > .col-sm-6,
#showcase-container .shop-bottom-area .col-sm-6 { padding-left: 10px !important; padding-right: 10px !important; }
#showcase-container .product-wrap .product-img a img {
  min-height: 0 !important; max-height: 100% !important; height: 100% !important; width: 100% !important;
}

/* small phones: a little tighter */
@media (max-width: 479px) {
  #showcase-container .row.d-flex-row { margin-left: -6px; margin-right: -6px; }
  #showcase-container .row.d-flex-row > [class*="col-"] { padding: 0 6px; }
}