/* ================================================================
 *  TECH ZONE — homepage-product-parity.css
 *  Makes the homepage horizontal-scroll cards (Featured Laptops,
 *  Best Sellers, New Arrivals — .j-product-scroll / .tz-scroll-row)
 *  render at the EXACT same size, spacing, typography and HEIGHT as
 *  the cards on the Products page grid (.product-grid, styled by
 *  css/products-scroll.css) — a card looks identical wherever it
 *  appears, no card is ever taller than another, and there's no
 *  dead space reserved for content that isn't there.
 *
 *  Kept self-contained (not just linking products-scroll.css) because
 *  that file also drives a lazy-fade-in reveal animation tied to
 *  products-scroll.js, which only runs on products.php.
 *
 *  Must be loaded AFTER header.php's inline master stylesheet and
 *  AFTER css/smooth-scroll-ux.css so these rules win the cascade.
 * ================================================================ */

/* ── 1. TYPOGRAPHY / SPACING — mirrors css/products-scroll.css ──── */
.j-product-scroll .j-product-card__body,
.tz-scroll-row .j-product-card__body {
  padding: 8px 10px 8px;
  gap: 2px;
}

/* Category — single line, reserved height so a missing category
   (product-card.php always renders this row, blank if empty) doesn't
   shrink the card. */
.j-product-scroll .j-product-card__category,
.tz-scroll-row .j-product-card__category {
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1em;
  line-height: 1;
}

/* Name — single line, truncated with an ellipsis. A fixed 1-line
   height (rather than reserving space for 2 lines that's usually
   empty) is what keeps cards compact with no wasted space, while
   still being identical from card to card. */
.j-product-scroll .j-product-card__name,
.tz-scroll-row .j-product-card__name {
  font-size: 0.88rem;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price row — forced to a single line. Without this, the flex-wrap
   inherited from the base card CSS lets a long "was" price (e.g.
   GH₵149,999.99) wrap onto a second line, making that one card taller
   than every card without an old price. Truncating with ellipsis
   instead keeps every card's price row exactly one line tall, so
   height stays identical card-to-card with no reserved dead space. */
.j-product-scroll .j-product-card__price-row,
.tz-scroll-row .j-product-card__price-row {
  margin-top: 1px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.j-product-scroll .j-product-card__price,
.tz-scroll-row .j-product-card__price {
  font-size: 1.05rem;
  line-height: 1.1;
  flex-shrink: 0;
  white-space: nowrap;
}
.j-product-scroll .j-product-card__old-price,
.tz-scroll-row .j-product-card__old-price {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Save badge — product-card.php always renders this row (blank when
   there's no discount) so its height is always reserved; hide the
   text without collapsing the row. */
.j-product-scroll .j-product-card__save,
.tz-scroll-row .j-product-card__save {
  font-size: 0.72rem;
  min-height: 1em;
  line-height: 1;
}
.j-product-scroll .j-product-card__save--empty,
.tz-scroll-row .j-product-card__save--empty {
  visibility: hidden;
}

.j-product-scroll .j-btn-cart-full,
.tz-scroll-row .j-btn-cart-full {
  height: 38px;
  border-radius: 9px;
  font-size: 0.78rem;
}
.j-product-scroll .j-product-card__cart-form,
.tz-scroll-row .j-product-card__cart-form {
  margin-top: 6px;
}

/* Safety net: nothing on the homepage sets opacity:0 on cards, but
   guard against it anyway so cards can never end up invisible. */
.j-product-scroll .j-product-card,
.tz-scroll-row .j-product-card {
  opacity: 1;
  transform: none;
}

/* ── 2. CARD WIDTH — matches .product-grid's column math ─────────
   base    → 2 cols, 10px gap
   ≥480px  → 2 cols, 18px gap
   ≥768px  → 4 cols, 20px gap
   ≥1200px → 5 cols, 22px gap
   Reproducing the same math as flex-item widths means each visible
   card is exactly as wide as its counterpart would be in the grid. */
.j-product-scroll,
.tz-scroll-row {
  gap: 10px;
  padding-left: 0;
  padding-right: 0;
  /* Default flex align-items is "stretch", which forces every card to
     match the height of the single tallest card anywhere in the whole
     scroll row (even ones scrolled off-screen). Every card is already
     a fixed, equal height above, so stretching only risks reintroducing
     dead space — remove it. */
  align-items: flex-start;
}
.j-product-scroll .j-product-card,
.tz-scroll-row .j-product-card {
  width: calc((100% - 10px) / 2);
}

@media (min-width: 480px) {
  .j-product-scroll,
  .tz-scroll-row { gap: 18px; }
  .j-product-scroll .j-product-card,
  .tz-scroll-row .j-product-card {
    width: calc((100% - 18px) / 2);
  }
}

@media (min-width: 768px) {
  .j-product-scroll,
  .tz-scroll-row { gap: 20px; }
  .j-product-scroll .j-product-card,
  .tz-scroll-row .j-product-card {
    width: calc((100% - 3 * 20px) / 4);
  }
}

@media (min-width: 1200px) {
  .j-product-scroll,
  .tz-scroll-row { gap: 22px; }
  .j-product-scroll .j-product-card,
  .tz-scroll-row .j-product-card {
    width: calc((100% - 4 * 22px) / 5);
  }
}

/* ── 3. MOBILE COMPACT — mirrors products-scroll.css's own
   max-width:479px block, so small-screen sizing matches too ────── */
@media (max-width: 479px) {
  .j-product-scroll .j-product-card__body,
  .tz-scroll-row .j-product-card__body {
    padding: 8px 8px 8px;
    gap: 2px;
  }
  .j-product-scroll .j-product-card__category,
  .tz-scroll-row .j-product-card__category { font-size: 0.58rem; }
  .j-product-scroll .j-product-card__name,
  .tz-scroll-row .j-product-card__name { font-size: 0.76rem; }
  .j-product-scroll .j-product-card__price,
  .tz-scroll-row .j-product-card__price { font-size: 0.88rem; }
  .j-product-scroll .j-product-card__old-price,
  .tz-scroll-row .j-product-card__old-price { font-size: 0.64rem; }
  .j-product-scroll .j-product-card__save,
  .tz-scroll-row .j-product-card__save { font-size: 0.62rem; }
  .j-product-scroll .j-product-card__cart-form,
  .tz-scroll-row .j-product-card__cart-form { margin-top: 5px; }
  .j-product-scroll .j-btn-cart-full,
  .tz-scroll-row .j-btn-cart-full { height: 34px; font-size: 0.68rem; border-radius: 8px; }
}