/* redesign-products.css — the public catalogue page.
   Track A (Zyentora-branded). Requires redesign-tokens.css and
   redesign-components.css, which already carry the nav, footer, product card,
   badges, filter chips, search field, grid and empty/loading/error states.

   This file only positions those pieces and styles the product modal.
   Mobile-first: base rules are the phone. */

/* ---------------- Catalogue header ---------------- */
.hub-intro {
  padding-block: var(--space-xl) var(--space-l);
  max-width: 62ch;
}
.hub-intro h1 { margin-bottom: var(--space-s); }
.hub-intro .lede { margin-bottom: 0; }

/* Live count sits with the filters rather than in the heading, so it can
   update as the catalogue grows without rewriting the copy around it. */
.hub-count {
  margin: 0 0 var(--space-m);
  font-size: var(--type-small);
  color: var(--color-text-secondary);
}

.hub-grid-wrap { padding-bottom: var(--section-pad); }

/* Filter row scrolls sideways on a phone instead of stacking into four rows
   of chips, which pushed the actual products below the fold. */
@media (max-width: 639px) {
  .category-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Bleed to the screen edge so the row reads as scrollable. */
    margin-inline: calc(var(--container-margin) * -1);
    padding-inline: var(--container-margin);
    padding-bottom: var(--space-xs);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-filter::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; scroll-snap-align: start; }
}

/* ---------------- Product modal ---------------- */
/* The catalogue's click-through. Deliberately has no price and no buy action:
   the main hub exists to show what is in the catalogue, and a product is only
   ever purchased from a reseller's own store, at that reseller's price. */
.modal-thumb {
  position: relative;
  aspect-ratio: var(--cover-ratio);
  max-height: 38vh;
  margin: 0 auto var(--space-m);
  border-radius: var(--radius-image);
  background: var(--cover-mat);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.modal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
}
.modal-badges:empty { display: none; }

.modal h3 {
  margin: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.modal-desc {
  margin: 0 0 var(--space-l);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.modal-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}
.modal-price-note {
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .modal-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }
  .modal-footer .btn-primary { flex: none; }
}