/* =========================
   Shop CSS (Final / Fixed)
   - Equal size cards
   - Proper grid
   - Product name 2-line clamp
   - Sticky footer support
   ========================= */

*{box-sizing:border-box;font-family:system-ui,Arial}
html,body{height:100%}
body{margin:0;background:#f5f6fa;color:#111;display:flex;flex-direction:column}
main{flex:1}

a{text-decoration:none;color:inherit}

.container{max-width:1100px;margin:0 auto;padding:16px}

/* ✅ GRID */
.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:950px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid-4,.grid-3{grid-template-columns:1fr}}

/* ✅ TOPBAR */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0;
}

/* ✅ BASIC CARD */
.card{
  background:#fff;
  border:1px solid #e6e8ef;
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.04)
}

/* ✅ CATEGORY / PRODUCT CARD (SAME SIZE) */
.cat-card, .prod-card{
  background:#fff;
  border:1px solid #e6e8ef;
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:240px;
}
.cat-card:hover, .prod-card:hover{
  transform:translateY(-2px);
  transition:.2s;
}

/* ✅ IMAGE (SAME SIZE EVERYWHERE) */
.img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #eef;
  display:block;
  background:#f3f4f6;
}

/* ✅ PRODUCT NAME (2 LINES) */
.pname{
  font-weight:800;
  line-height:1.25;
  min-height:40px; /* 2 lines space */
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* ✅ BUTTONS */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #1f7aec;
  background:#1f7aec;
  color:#fff;
  font-weight:700;
  cursor:pointer
}
.btn-outline{background:#fff;color:#1f7aec}

/* ✅ BADGE */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#eef6ff;
  color:#1f7aec;
  font-weight:700;
  font-size:12px
}

/* ✅ FORM */
.input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #d7dbe7;
  outline:none
}
.input:focus,select:focus,textarea:focus{
  border-color:#1f7aec;
  box-shadow:0 0 0 3px rgba(31,122,236,.12)
}

/* ✅ ROWS */
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > div{flex:1;min-width:220px}

/* ✅ TEXT */
.price{font-weight:900;margin-top:auto}
.small{font-size:12px;color:#555}

/* ===== Home Filters ===== */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0;
}
.filter-pill{
  padding:9px 12px;border-radius:999px;border:1px solid #d7dbe7;background:#fff;
  font-weight:800;font-size:13px;cursor:pointer;
}
.filter-pill:hover{border-color:#1f7aec}

/* dropdown */
.dd{position:relative}
.dd-menu{
  position:absolute;top:110%;left:0;min-width:210px;background:#fff;border:1px solid #e6e8ef;
  border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.12);padding:8px;display:none;z-index:9999;
}
.dd:hover .dd-menu{display:block}
.dd-menu a{display:block;padding:10px 10px;border-radius:10px;font-weight:800}
.dd-menu a:hover{background:#1f7aec;color:#fff}

/* ===== Banner Slider ===== */
.banner{
  border-radius:16px;overflow:hidden;border:1px solid #e6e8ef;background:#fff;
  height:260px;position:relative;
}
.banner img{width:100%;height:260px;object-fit:cover;display:block}
.banner-dots{
  position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;
}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.15)}
.dot.active{background:#fff}

/* ===== Section Title Bar (Patti) ===== */
.section-bar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;background:#ffffff;border:1px solid #e6e8ef;
  margin:14px 0 10px;
}
.section-bar .title{font-weight:950}
.section-bar .right a{font-weight:900;color:#1f7aec}

/* ===== Product Cards (Taller + desc + button) ===== */
.prod-card{
  min-height:330px; /* taller */
}
.item-code{font-size:12px;color:#555;font-weight:800}
.desc{
  font-size:13px;color:#444;line-height:1.35;
  min-height:44px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.btn-row{margin-top:auto;display:flex;gap:10px;align-items:center}

/* ===== Modal ===== */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
  align-items:center;justify-content:center;z-index:999999;
}
.modal{
  width:min(520px,92vw);background:#fff;border-radius:16px;border:1px solid #e6e8ef;
  box-shadow:0 20px 60px rgba(0,0,0,.25);padding:14px;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-head b{font-size:16px}
.close-x{border:none;background:#f3f4f6;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:900}
.modal-body{display:flex;gap:12px;margin-top:12px}
.modal-body img{width:130px;height:130px;object-fit:cover;border-radius:12px;border:1px solid #eef}
.modal-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.toast{margin-top:10px;font-weight:800;color:#0a7a2f;display:none}