/* ============================================================
   SavCart — Product Listing Page styles
   Append to styles4.css (or include as a separate <link>).
   ============================================================ */

/* ---------- Hero ---------- */
.sav-listing-hero {
  background: linear-gradient(135deg, #ff3d7f 0%, #ff9a3c 50%, #ffd23f 100%);
  color: #fff;
  padding: 28px 18px 22px;
  border-radius: 0 0 28px 28px;
  margin-bottom: 18px;
}
.sav-listing-hero-inner { max-width: 1200px; margin: 0 auto; }
.sav-back-link {
  color: rgba(255,255,255,.9);
  font-size: 13px;
  text-decoration: none;
}
.sav-back-link:hover { color: #fff; text-decoration: underline; }
.sav-listing-hero h1 {
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  margin: 8px 0 4px;
  text-transform: capitalize;
  letter-spacing: -0.5px;
}
.sav-listing-sub {
  font-size: 14px;
  opacity: .92;
  margin: 0 0 14px;
}

/* ---------- Chip rail (auto-scrolls on mobile) ---------- */
.sav-chip-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px;
}
.sav-chip-rail::-webkit-scrollbar { display: none; }
.sav-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: rgba(255,255,255,.18);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease;
}
.sav-chip:hover { transform: translateY(-1px); background: rgba(255,255,255,.28); }
.sav-chip.is-active { background: green; color: #ff3d7f; border-color: #fff; }
.sav-chip-brand { font-style: italic; }

/* ---------- Listing wrapper ---------- */
.sav-listing-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px 40px;
}

/* ---------- Rows ----------
   Desktop: each .sav-row becomes a 4-col grid.
   Mobile : each .sav-row becomes a horizontal scrolling strip
            with 3 cards visible.
*/
.sav-rows { display: flex; flex-direction: column; gap: 18px; }

.sav-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ---------- Product card ---------- */
.sav-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sav-pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(255, 61, 127, .35);
}

.sav-pcard-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f5f5f7;
  overflow: hidden;
}
.sav-pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.sav-pcard:hover .sav-pcard-media img { transform: scale(1.06); }
.sav-pcard-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; opacity: .5;
}

.sav-pcard-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #ff3d7f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}

.sav-pcard-hover {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.sav-pcard:hover .sav-pcard-hover { opacity: 1; transform: translateY(0); }
.sav-pcard-cta { color: #fff; font-weight: 700; font-size: 13px; }

.sav-pcard-body { padding: 12px 12px 14px; }
.sav-pcard-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.sav-pcard-brand {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #888;
  margin-bottom: 6px;
}
.sav-pcard-priceline { display: flex; align-items: baseline; gap: 8px; }
.sav-pcard-price {
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(90deg, #ff3d7f, #ff9a3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sav-pcard-old {
  font-size: 12px;
  color: #aaa;
  text-decoration: line-through;
}
.sav-pcard-rating {
  margin-top: 6px;
  font-size: 12px;
  color: #f5a524;
  font-weight: 600;
}

/* ---------- Empty state ---------- */
.sav-empty {
  text-align: center;
  padding: 60px 20px;
}
.sav-empty-emoji { font-size: 56px; }
.sav-empty h2 { margin: 12px 0 6px; }
.sav-empty p { color: #777; margin-bottom: 18px; }



/* Tablet — 3 columns */
@media (max-width: 980px) {
  .sav-row { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .sav-pcard-title { font-size: 13px; }
}

/* Mobile — 3 cards visible, horizontal scroll, smaller cards.
   NOTE: do NOT enlarge cards; cap card width and let row scroll. */
@media (max-width: 640px) {
  .sav-listing-hero { padding: 20px 14px 16px; border-radius: 0 0 22px 22px; }

  .sav-row {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .sav-row::-webkit-scrollbar { display: none; }

  .sav-pcard {
    flex: 0 0 calc((100% - 20px) / 3); /* exactly 3 visible, 10px gap × 2 */
    max-width: calc((100% - 20px) / 3);
    scroll-snap-align: start;
    border-radius: 14px;
  }
  .sav-pcard-body { padding: 8px 8px 10px; }
  .sav-pcard-title { font-size: 12px; min-height: 2.4em; margin-bottom: 2px; }
  .sav-pcard-brand { font-size: 10px; margin-bottom: 3px; }
  .sav-pcard-price { font-size: 13px; }
  .sav-pcard-old { font-size: 10px; }
  .sav-pcard-rating { font-size: 11px; }
  .sav-pcard-badge { font-size: 9px; padding: 2px 6px; }

  /* Hover effects don't apply on touch — keep CTA visible subtly */
  .sav-pcard-hover { display: none; }
}

/* ============================================================
   CATEGORY & BRAND PREVIEW (home.html) — mobile tightening
   These complement the existing .sav-cat-grid / brand grid.
   On mobile: 3 per row, smaller, with horizontal auto-scroll.
   ============================================================ */
@media (max-width: 640px) {
  .sav-cat-grid,
  .sav-brand-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .sav-cat-grid::-webkit-scrollbar,
  .sav-brand-grid::-webkit-scrollbar { display: none; }

  .sav-cat-card,
  .sav-brand-card {
    flex: 0 0 calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    scroll-snap-align: start;
    padding: 10px;
    border-radius: 14px;
  }
  .sav-cat-card h3,
  .sav-brand-card h3 { font-size: 13px; }
  .sav-cat-count { font-size: 10px; }
  .sav-cat-preview { height: 60px; }
  .sav-cat-preview img { width: 50px; height: 50px; }
}

/* Brands grid — desktop: render in 3 rows by capping columns
   so the view distributes brands across 3 visual rows. */
.sav-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  grid-auto-rows: minmax(80px, auto);
  /* With 6 cols, 18 brands ⇒ 3 rows. Adjust col count in the view
     by sending brands in groups of (total/3) if you want strict 3-row. */
}
@media (max-width: 980px) {
  .sav-brand-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Dark mode tweaks */
body.dark-mode .sav-pcard {
  background: #1c1c22;
  border-color: rgba(255,255,255,.08);
}
body.dark-mode .sav-pcard-media { background: #25252d; }
body.dark-mode .sav-pcard-brand { color: #aaa; }
body.dark-mode .sav-pcard-old { color: #666; }