/* ============================================================
   MODULE 6 — Product Listing
   Scoped under .sh-list*. Renders the grid + related strip.
   ============================================================ */
.sh-list__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.sh-list__title{font-size:20px;font-weight:800;color:var(--sh-navy);margin:0}
.sh-list__title small{display:block;font-size:13px;font-weight:600;color:var(--sh-muted);margin-top:2px}
.sh-list__sort{border:1px solid var(--sh-line);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13px;background:#fff;cursor:pointer}

.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}

.sh-card{background:#fff;border:1px solid var(--sh-line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s ease;position:relative}
.sh-card:hover{box-shadow:var(--sh-shadow);transform:translateY(-3px)}
.sh-card__imgwrap{position:relative;aspect-ratio:1/1;background:var(--sh-bg-soft);overflow:hidden}
.sh-card__imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.sh-card__badge{position:absolute;top:10px;left:10px;background:var(--sh-gold);color:var(--sh-navy);
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.3px}
.sh-card__fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;
  background:rgba(255,255,255,.9);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:#c0392b}
.sh-card__body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.sh-card__sub{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--sh-muted);font-weight:700}
.sh-card__name{font-size:14px;font-weight:600;line-height:1.35;color:var(--sh-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.sh-card__rate{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sh-muted)}
.sh-card__stars{color:var(--sh-gold);letter-spacing:1px}
.sh-card__chips{display:flex;gap:5px;flex-wrap:wrap}
.sh-chip{font-size:11px;border:1px solid var(--sh-line);border-radius:20px;padding:2px 8px;color:#444}
.sh-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.sh-card__price{font-size:18px;font-weight:800;color:var(--sh-navy)}
.sh-card__add{border:0;background:var(--sh-navy);color:#fff;border-radius:9px;width:38px;height:38px;
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex:0 0 auto}
.sh-card__add:hover{background:var(--sh-gold);color:var(--sh-navy)}
.sh-card__add.added{background:var(--sh-green)}

/* official Mall badge (admin uploads only) */
.sh-mall{display:inline-block;background:#e10600;color:#fff;font-size:10px;font-weight:800;
  line-height:1;padding:3px 6px;border-radius:4px;margin-right:6px;vertical-align:middle;
  letter-spacing:.3px;box-shadow:0 1px 3px rgba(225,6,0,.4)}

.sh-list__empty{padding:50px 10px;text-align:center;color:var(--sh-muted)}

/* filter counts / clear */
.sh-filter-n{margin-left:auto;font-size:11px;color:var(--sh-muted);background:var(--sh-bg-soft);border-radius:10px;padding:1px 7px}
.sh-filter-group label{justify-content:flex-start}
.sh-filter-clear{display:inline-block;font-size:12.5px;font-weight:700;color:var(--sh-navy);cursor:pointer;margin-bottom:8px}
.sh-filter-clear:hover{text-decoration:underline}

/* card click affordance */
.sh-card{cursor:pointer}
.sh-card:focus-visible{outline:2px solid var(--sh-navy);outline-offset:2px}
.sh-card__rate{font-size:12px;color:var(--sh-muted)}

/* pagination */
.sh-pagenav{margin:28px 0 8px;display:flex;flex-direction:column;align-items:center;gap:10px}
.sh-pagenav__hint{font-size:12px;color:var(--sh-muted)}
.sh-pagenav__btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sh-page{min-width:38px;height:38px;border:1px solid var(--sh-line);background:#fff;border-radius:9px;
  font-weight:700;font-size:14px;cursor:pointer;color:var(--sh-ink);padding:0 10px}
.sh-page:hover{border-color:var(--sh-navy)}
.sh-page.active{background:var(--sh-navy);color:#fff;border-color:var(--sh-navy)}
.sh-page--next{font-weight:700}
.sh-page-ell{padding:0 6px;color:var(--sh-muted);align-self:center}
#sh-scroll-sentinel{height:1px}

/* Home personalized view */
.sh-home__sec{margin-bottom:30px}
.sh-home__sec h3{font-size:17px;color:var(--sh-navy);margin:0 0 12px;border-bottom:2px solid var(--sh-line);padding-bottom:8px}
.sh-home__empty{color:var(--sh-muted);font-size:13.5px;margin:0}

/* related strip (reused under cart in Module 3) */
.sh-related{margin-top:30px}
.sh-related__title{font-size:17px;font-weight:800;color:var(--sh-navy);margin:0 0 14px}
.sh-related .sh-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

@media (max-width:560px){
  .sh-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sh-card__price{font-size:16px}
}