/* ================================================================
 *  TECH ZONE — products-scroll.css
 *  Professional grid view with smooth vertical scroll UX
 *  Inspired by Jumia / Amazon / AliExpress grid layout
 * ================================================================ */

/* ── 1. SMOOTH VERTICAL SCROLL ───────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 2. PRODUCT GRID — Responsive columns, capped at 3 ───────── */
.product-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 columns */
}
@media (min-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (min-width: 1200px) {
  .product-grid { grid-template-columns: repeat(5, 1fr); gap: 22px; }
}

/* ── 3. PRODUCT CARD — Uniform height, consistent spacing ───── */
.j-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: box-shadow .22s ease, transform .22s ease, opacity .35s ease;
  will-change: transform, opacity;
  /* Lazy-load: start hidden, JS reveals */
  opacity: 0;
  transform: translateY(14px);
}
.j-product-card.ps-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delay set by JS */
.j-product-card { transition-delay: var(--delay, 0ms); }

/* Hover lift — desktop only */
@media (hover: hover) {
  .j-product-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    transform: translateY(-3px);
  }
}
/* Disable hover effects during page scroll for smoothness */
body.ps-is-scrolling .j-product-card {
  pointer-events: none;
}
body.ps-is-scrolling .j-product-card:hover {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

/* Image fills consistent height */
.j-product-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}
.j-product-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
@media (hover: hover) {
  .j-product-card:hover .j-product-card__img-wrap img {
    transform: scale(1.04);
  }
}

/* Card body stretches to fill remaining space */
.j-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 10px 8px;
  gap: 2px;
}

/* Category label — always occupies one line (reserved even when a
   product has no category, via the   placeholder in the markup)
   so every card starts its text block at the same height. */
.j-product-card__category {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--j-orange, #ff7a00);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1em;
  line-height: 1;
}

/* Name — single line, truncated with an ellipsis. Using a fixed
   1-line height (instead of always reserving space for 2 lines) is
   what keeps every card the same, compact height without leaving
   unused space under short titles. */
.j-product-card__name {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.j-product-card__name:hover { color: var(--j-orange, #ff7a00); }

/* Price row — forced to a single line. Without this, flex-wrap lets
   a long "was" price (e.g. GH₵149,999.99) wrap onto a second line,
   making that one card taller than cards without an old price.
   Truncating with ellipsis keeps every card's price row exactly one
   line tall, so grid rows stay even with no reserved dead space. */
.j-product-card__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 6px;
  margin-top: 1px;
}
.j-product-card__price {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
  flex-shrink: 0;
  white-space: nowrap;
}
.j-product-card__old-price {
  font-size: 0.75rem;
  color: #9e9e9e;
  text-decoration: line-through;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Save badge — always rendered by product-card.php (blank when there's
   no discount) so this row's height is always reserved; hide the text
   visually without collapsing the space it occupies. */
.j-product-card__save {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
  min-height: 1em;
  line-height: 1;
}
.j-product-card__save--empty {
  visibility: hidden;
}

/* Add to Cart pinned to bottom */
.j-product-card__cart-form {
  display: flex;
  margin-top: 6px;
}

/* Add to Cart button */
.j-btn-cart-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  border-radius: 9px;
  border: none;
  background: var(--j-orange, #ff7a00);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.j-btn-cart-full:hover  { background: var(--j-orange-dark, #e56700); }
.j-btn-cart-full:active { transform: scale(0.97); }
.j-btn-cart-full--oos {
  background: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
}

/* ── 4. CATEGORY CHIPS — Horizontal scroll strip ─────────────── */
.category-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.category-chips::-webkit-scrollbar { display: none; }
.category-chip { flex-shrink: 0; }

/* ── 5. LOADING SKELETON shimmer ─────────────────────────────── */
@keyframes ps-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 6. MOBILE CARD COMPACT ──────────────────────────────────── */
@media (max-width: 479px) {
  .j-product-card__body { padding: 8px 8px 8px; gap: 2px; }
  .j-product-card__category { font-size: 0.58rem; }
  .j-product-card__name { font-size: 0.76rem; }
  .j-product-card__price { font-size: 0.88rem; }
  .j-product-card__old-price { font-size: 0.64rem; }
  .j-product-card__save { font-size: 0.62rem; }
  .j-product-card__cart-form { margin-top: 5px; }
  .j-btn-cart-full { height: 34px; font-size: 0.68rem; border-radius: 8px; }
  .j-new-badge { font-size: 0.58rem; padding: 4px 8px; top: 8px; left: 8px; }
  .j-discount-badge { font-size: 0.62rem; padding: 4px 7px; top: 8px; right: 8px; }
}

/* ── 7. NO-JS FALLBACK ───────────────────────────────────────── */
.no-js .j-product-card {
  opacity: 1;
  transform: none;
}