/* =====================================================
   Saste Tools — Product & Category Cards (Luxury polish)
   Load after variables.css + animations.css + style.css.
   ===================================================== */

/* ---------- Category cards ---------- */
.category-card {
  transition: var(--transition);
}
.category-card:hover {
  border-color: var(--gold) !important;
  background: var(--card-bg-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* ---------- Product cards ---------- */
.product-card {
  position: relative;
  transition: var(--transition);
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-card);
}

/* Ribbon badge: Bestseller / Hot / Trending / Popular */
.product-ribbon {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.product-ribbon.badge-bestseller { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.product-ribbon.badge-hot        { background: linear-gradient(135deg, #ff9a5a, #ff5b5b); color: #1a0a05; }
.product-ribbon.badge-trending   { background: linear-gradient(135deg, #c084fc, #ec4899); color: #fff; }
.product-ribbon.badge-popular    { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #062018; }

/* Out-of-stock ribbon (top-right, only shown when actually out of stock) */
.product-stock-badge.stock-out {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(255,107,107,0.15);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
}
/* In-stock status is the default assumption — no ribbon clutter for it */
.product-stock-badge.stock-in { display: none; }

/* Low-stock scarcity ribbon (top-right) — shown only when a handful of accounts remain */
.product-stock-badge.stock-low {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(245,166,35,0.15);
  border: 1px solid #f5a623;
  color: #f5a623;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ---------- Discounted / offer price ---------- */
.product-price.has-discount,
.product-detail-price.has-discount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-old {
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85em;
}
.price-new {
  color: var(--gold-light);
  font-weight: 800;
}
.price-off-tag {
  background: linear-gradient(135deg, #ff9a5a, #ff5b5b);
  color: #1a0a05;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.offer-countdown {
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #ff9a5a;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =====================================================
   All Products page (products.php)
   Page head, search bar, category filter chips, results meta.
   ===================================================== */

.products-page-head {
  text-align: center;
  margin-bottom: 18px;
}
.products-page-head .section-title { margin-bottom: 8px; }
.products-page-subline {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin: 0;
}

@media (max-width: 480px) {
  .products-page-head { margin-bottom: 12px; }
  .products-page-head .section-title { font-size: 1.5rem; line-height: 1.3; }
  .products-page-head .section-sub { font-size: 0.88rem; margin-bottom: 4px; }
  .products-page-head .products-page-subline { font-size: 0.8rem; }
  /* Trust tags directly under the products-page heading — condensed to a
     single tight row instead of the full-size wrapping pills used in the
     homepage hero, so the product grid shows up sooner on small screens. */
  .products-page-head + .hero-tags {
    gap: 6px;
    margin: 14px auto 16px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 2px;
  }
  .products-page-head + .hero-tags::-webkit-scrollbar { display: none; }
  .products-page-head + .hero-tags span {
    font-size: 0.72rem;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ---------- Search bar ---------- */
.products-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 26px;
  padding: 8px 8px 8px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--card-border);
  border-radius: 40px;
  backdrop-filter: var(--glass-blur);
  transition: var(--transition);
}
.products-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-glow-soft);
}
.products-search-icon {
  color: var(--text-faint);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.products-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 0;
}
.products-search input::placeholder { color: var(--text-faint); }
.products-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.products-search-clear:hover { color: var(--danger); background: rgba(255,107,107,0.12); }
.products-search .btn { flex-shrink: 0; border-radius: 30px; }

/* ---------- Category filter chips ---------- */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 30px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}
.category-chip i { font-size: 0.85rem; color: var(--text-faint); transition: var(--transition-fast); }
.category-chip:hover {
  border-color: var(--card-border-hover);
  background: var(--card-bg-hover);
  color: var(--text-light);
  transform: translateY(-2px);
}
.category-chip:hover i { color: var(--gold); }
.category-chip.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: var(--gold);
  color: #111;
  font-weight: 600;
  box-shadow: 0 6px 20px var(--gold-glow-soft);
}
.category-chip.active i { color: #111; }
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  font-size: 0.72rem;
  font-weight: 700;
}
.category-chip.active .chip-count { background: rgba(0,0,0,0.18); }

/* ---------- Results meta row ---------- */
.products-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--card-border);
}
.products-meta p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}
.products-meta strong { color: var(--gold); }

/* ---------- Homepage "View All" row under the featured grid ---------- */
.view-all-row {
  text-align: center;
  margin-top: 30px;
}

/* =====================================================
   Homepage Featured Products grid — scoped to #products
   so products.php (the full catalogue) is never affected.

   Desktop : all 10 fetched cards show, filling the shared
             5-6 column grid in 2 clean rows.
   Mobile  : only the first 6 of the 10 fetched cards are
             shown (2 columns x 3 rows) — the 7th-10th stay
             hidden on mobile only, so the section doesn't
             turn into a long scroll on phones.
   ===================================================== */
#products .product-grid { gap: 20px; }

/* Belt-and-braces: force a true 1:1 square on the homepage featured
   images specifically, so this always wins even if something else on
   the live site is interfering with the shared .product-img-wrap rule. */
#products .product-img-wrap {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

@media (max-width: 768px) {
  #products .product-grid .product-card:nth-child(n + 7) {
    display: none;
  }
}

/* Center + give the button some breathing room under the grid */
#products .view-all-row {
  margin-top: 36px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .products-search {
    max-width: 100%;
    padding-left: 14px;
    gap: 6px;
    margin-bottom: 18px;
  }
  .products-search input { font-size: 0.9rem; }
  .category-chips {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 18px;
    /* let the chip row scroll edge-to-edge on small screens */
    margin-left: -4px;
    padding-left: 4px;
    scrollbar-width: none;
    /* fade the last chip toward the edge as a subtle "more to scroll" cue */
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
  .category-chips::-webkit-scrollbar { display: none; }
  .category-chip { padding: 8px 14px; font-size: 0.82rem; }
  .products-meta { justify-content: flex-start; margin-bottom: 16px; padding-bottom: 12px; }
}