:root {
  --gap: 28px;
  --card-bg: #fff;
}
body { font-family: "Lora", Georgia, serif; background:#fafafa; color:#111; margin:0; }
.container { max-width:1320px; }

/* card image area */
.img-wrap {
  padding:36px 28px 18px;
  background: linear-gradient(#f7f6f5, #efeeef);
  display:flex;
  align-items:center;
  justify-content:center;
  height:320px;           /* <-- Add this line */
  min-height:320px;       /* <-- You can keep or remove this */
  position:relative;
}
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-card .img-wrap {
  height: 170px !important;
  overflow: hidden;
}

.product-card .img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* wishlist heart */
.wish-btn{
  position:absolute;
  top:12px;
  right:12px;
  background:transparent;
  border:0;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#111;
}
.wish-btn.active{ color:#e63946; }

/* new badge */
.badge-new{
  position:absolute;
  left:12px;
  top:12px;
  font-size:13px;
  color:#7c7c7c;
  border-bottom:2px solid #111;
  padding-bottom:6px;
}
  #productCardRow {
    --bs-gutter-y: 10px !important;
  }

/* meta */
.product-title{ font-size:16px; margin:0; font-weight:500; }
.price{ font-size:16px; }

/* Product card visible name in caps (display-only) */
.product-card-item .product-title {
  text-transform: uppercase;
  font-weight: 700;
}

/* variant dots */
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,0.06); }
.more{ font-size:13px; color:#6b6b6b; }

.product-hover-zoom:hover,
.product-hover-zoom:focus {
  transform: scale(1.02);
  z-index: 2;
}

/* Eye icon on product cards: icon only, transparent background */
.view-images-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* User request: no icon at all on product cards */
.product-card-item .view-images-btn {
  display: none !important;
}

.view-images-btn:hover,
.view-images-btn:focus {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.9;
}

/* Products header divider: solid black line under title/count */
.products-header-divider {
  border: 0;
  border-top: 2px solid #d1d1d1;
  opacity: 1;
  margin: 0.5rem 0 0.75rem;
}

/* Display-only: database labels in caps (keep stored values unchanged) */
#categoryList .form-check-label,
#brandList .form-check-label {
  text-transform: uppercase;
}

/* Ensure filter offcanvas title is always uppercase across pages */
#filterLabel {
  text-transform: uppercase;
}

/* Filter icon trigger: no border (icon-only look) */
button[data-bs-target="#filterOffcanvas"][aria-label="Filter"],
a[data-bs-target="#filterOffcanvas"][aria-label="Filter"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

button[data-bs-target="#filterOffcanvas"][aria-label="Filter"]:hover,
button[data-bs-target="#filterOffcanvas"][aria-label="Filter"]:focus,
a[data-bs-target="#filterOffcanvas"][aria-label="Filter"]:hover,
a[data-bs-target="#filterOffcanvas"][aria-label="Filter"]:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

button[data-bs-target="#filterOffcanvas"][aria-label="Filter"]:focus-visible,
a[data-bs-target="#filterOffcanvas"][aria-label="Filter"]:focus-visible {
  outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
  outline-offset: 2px;
}

button[data-bs-target="#filterOffcanvas"][aria-label="Filter"] i.bi,
a[data-bs-target="#filterOffcanvas"][aria-label="Filter"] i.bi {
  font-size: 1.25rem;
  line-height: 1;
}

/* Offcanvas filter action buttons: black, square corners */
#filterOffcanvas #filterForm .d-flex.gap-2 .btn {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#filterOffcanvas #filterForm .d-flex.gap-2 .btn:hover,
#filterOffcanvas #filterForm .d-flex.gap-2 .btn:focus {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

#imageViewerModal .modal-content {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* responsive tweaks */
@media (max-width: 991.98px) { /* tablet and below handled by Bootstrap cols */
  .img-wrap{ min-height:300px; padding:28px; }
}
@media (max-width: 575.98px) {
  .img-wrap{ min-height:260px; padding:20px; }
  .badge-new{ left:10px; top:10px; }
  .wish-btn{ top:10px; right:10px; }
}



.slideshow { position: relative; width: 100%; height: 320px; overflow: hidden; background: linear-gradient(#f7f6f5, #efeeef); display:flex; align-items:center; justify-content:center; }
  .slideshow img { 
    position: absolute; 
    left:0; top:0; 
    width:100%; 
    height:100%; 
    object-fit: cover;
    opacity:0; 
    transition:opacity .6s ease; 
    display: block;
  }
  .slideshow img.active { opacity:1; }
  .img-wrap { width: 100%; height: 320px; background: linear-gradient(#f7f6f5, #efeeef); display: flex; align-items: center; justify-content: center; position: relative; }
  @media (max-width:575px){
    .img-wrap, .slideshow { height: 260px !important; }
  }

      .custom-pagination .page-item {
        margin: 0 4px;
      }
      .custom-pagination .page-link {
        border: none;
        background: none;
        color: #222;
        font-size: 0.78em;
        min-width: 56px;
        min-height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 0;
        padding: 0;
        transition: background 0.2s, color 0.2s;
        box-shadow: none;
        display: inline-block;
      }
      .custom-pagination .page-item.active .page-link {
        background: #222;
        color: #fff;
        font-weight: 500;
        border-radius: 0;
        min-width: 36px;
        min-height: 36px;
        line-height: 36px;
        box-shadow: none;
      }
      .custom-pagination .page-link:focus {
        box-shadow: none;
        outline: none;
      }
      .custom-pagination .page-item.disabled .page-link {
        color: #888;
        background: none;
      }
      @media (max-width: 600px) {
        .custom-pagination .page-link, .custom-pagination .page-item.active .page-link {
          min-width: 36px;
          min-height: 36px;
          line-height: 36px;
          font-size: 1rem;
        }
        .custom-pagination .page-item {
          margin: 0 3px;
        }
      }

/* Reduce horizontal gap between product cards (Bootstrap gutter) on mobile */
@media (max-width: 575.98px) {
  #productCardRow {
    --bs-gutter-y: 10px !important;
  }
}
@media (max-width: 767.98px) {
  .dis-div {
    display: none !important;
  }
}