/* Product grid */
.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
@media(max-width:1050px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
/* ================= MOBILE GRID FINAL LOCK ================= */

@media(max-width:600px){
  .grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .pcard{
    width:100%;
  }

  .pimg{
    height:160px;
  }

  .pbody{
    padding:10px;
  }

  .pname{
    font-size:13px;
  }

  .pprice .now{
    font-size:14px;
  }
}
/* ================= QUICK POPUP ================= */

.quick-popup{
  position:fixed;
  inset:0;
  z-index:9999;
}

.qp-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

.qp-box{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:20px;
  width:90%;
  max-width:420px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 40px 80px rgba(0,0,0,.3);
}

.qp-box img{
  width:100%;
  border-radius:12px;
  margin-bottom:15px;
}

.qp-close{
  position:absolute;
  right:12px;
  top:10px;
  border:none;
  background:none;
  font-size:22px;
  cursor:pointer;
}
/* ===== FLASH SALE BAR CENTERED ===== */

.flash-sale-bar{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-weight:700;
  padding:12px 0;
  background:#fff;
  position:relative;
}

.flash-sale-inner{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
}

.flash-blink{
  color:#e10600;
  animation: flashBlink 1s infinite alternate;
}

@keyframes flashBlink{
  from{opacity:1}
  to{opacity:.4}
}

/* Smooth countdown highlight */
.flash-timer{
  background:#111;
  color:#fff;
  padding:4px 10px;
  border-radius:6px;
  font-weight:700;
}

/* Animated hero progress bar center fix */
.hero-progress{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  height:4px;
  width:60%;
  background:#e10600;
  animation: progressAnim 5s linear forwards;
}


.pcard{
  border-radius: var(--radius);
  border: 1px solid #000 !important; /* Changed to black */
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pcard:hover{transform: translateY(-2px); box-shadow: var(--shadow-md);}

.pimg{
  height: 240px; /* Increased from 210px */
  background: rgba(16,18,19,.02);
  position: relative;
  padding: 0; /* Removed padding */
}
.pimg img{width:100%;height:100%;object-fit:cover} /* Changed to cover for larger image */
.pimg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.06));
  pointer-events:none;
}

.pbody{padding: 14px}
.pname{font-weight: 900; font-size: var(--fz-14);}
.pmeta{
  margin-top: 8px;
  color: var(--text-2);
  font-size: var(--fz-12);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.pprice{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:baseline;
}
.pprice .now{font-weight: 900; font-size: var(--fz-16);}
.pprice .old{color: var(--text-3); text-decoration: line-through; font-size: var(--fz-12);}

.sale{
  margin-left:auto;
  font-size: 12px;
  font-weight: 900;
  border:1px solid rgba(199,162,83,.35);
  background: rgba(199,162,83,.12);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Toast */
.toast{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:999;
  background: rgba(16,18,19,.92);
  color:#fff;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  opacity:0;
  transform: translateY(10px);
  transition:.22s;
  max-width: 92vw;
}
.toast.show{opacity:1;transform:translateY(0)}
/* ================= QUICK VIEW POPUP ================= */

.quick-popup{
  position:fixed;
  inset:0;
  z-index:9999;
}

.qp-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

.qp-box{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:20px;
  width:90%;
  max-width:420px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 40px 80px rgba(0,0,0,.3);
}

.qp-box img{
  width:100%;
  border-radius:12px;
  margin-bottom:15px;
}

.qp-close{
  position:absolute;
  right:12px;
  top:10px;
  border:none;
  background:none;
  font-size:22px;
  cursor:pointer;
}
/* ================================
   MOBILE IMAGE FIT FIX (NO CROP)
   Product cards / grids
================================ */
@media (max-width: 768px){

  /* Common wrappers (safe) */
  .sp-card .sp-img,
  .pcard .pimg,
  .product-card .product-image,
  .product-card .img,
  .home-shop-grid .sp-img,
  .hot-selling-grid .sp-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* ✅ Main product images */
  .sp-card .sp-img img,
  .pcard .pimg img,
  .product-card img,
  .home-shop-grid img,
  .hot-selling-grid img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;     /* ✅ no crop */
    object-position: center !important; /* ✅ centered */
    background: #fff !important;
    transform: none !important;         /* ✅ remove zoom/crop transforms */
  }

  /* ✅ If your card wrapper has fixed height, keep stable */
  .sp-card .sp-img { height: 220px !important; }
  .pcard .pimg   { height: 220px !important; }

}