/* ==========================================================================
   VIVID — PRODUCTS (the catalogue)
   --------------------------------------------------------------------------
   Only what the listing needs. The cards, toolbar, view switch, chips, pager
   and empty state all come from components.css — this file adds the ink
   filter band, the list container, the active-filter row and the red closer.
   Logical properties only: the whole page mirrors in RTL.
   ========================================================================== */

/* ==========================================================================
   0. THE SLIM MASTHEAD
   --------------------------------------------------------------------------
   The page opens with `.phead .phead--slim` straight from the shared kit —
   a breadcrumb, one H1, one sub-line, and the quote CTA in the aside. All of
   its colour comes from the kit's tokens, so it inverts with the theme for
   free. The ONE thing this page tunes is the sub-line's measure: the kit caps
   it at 74ch (and clamps to two lines), which makes THIS page's sub-copy wrap
   and pushes the masthead past 155px. Given the whole column on a wide screen
   it sits on a single line and the head lands ~130px — the catalogue then
   starts almost immediately.
   ========================================================================== */
@media (min-width: 1080px) {
  .phead--slim .phead__sub { max-inline-size: none; }
}


/* ==========================================================================
   1. FILTER BAND — the ink band sits directly under the slim page header, so
   the catalogue starts on the first scroll. Light → ink → white, as always.
   ========================================================================== */
.pfilter {
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.pfilter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-end: var(--sp-5);
}
.pfilter__head .kicker { margin-block-end: 0; }

.pfilter__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
}
/* The red on the band is the ONE red whose luminance has to move with the theme
   (the band goes from #0E1016 to #262C3C) — that is exactly --brand-on-ink. */
.pfilter__note svg { inline-size: 14px; block-size: 14px; color: var(--brand-on-ink); flex: none; }

.pfilter__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-inline-size: 0;
}

/* The children of the active root — a second, quieter tier. */
.pfilter__row--sub {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: var(--bw-hair) solid var(--line-on-ink);
}
/* This label sits ON the ink band, so it takes an on-ink text token — the page
   tokens (--text-subtle) are tuned for the white canvas and would drop to ~2.9:1
   against the lifted band in dark. */
.pfilter__sublabel {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
  padding-inline-end: var(--sp-2);
}

/* The count inside an on-ink chip needs its own contrast. */
.pfilter .chip--on-ink .chip__count { color: var(--text-on-ink-subtle); }
.pfilter .chip--on-ink:hover .chip__count { color: var(--text-on-ink-muted); }
/* The ACTIVE on-ink chip is a hard WHITE plate in both themes (components.css),
   so its count is theme-independent by nature: a fixed dark grey, 7.5:1 on white.
   A page text token here would go pale-grey-on-white in dark. */
.pfilter .chip--on-ink.is-active .chip__count { color: var(--ink-500); }


/* ==========================================================================
   2. THE CATALOGUE
   ========================================================================== */
/* The filter band IS the catalogue chrome — the grid must not start a whole
   section-gap below it. */
.pcat {
  padding-block-start: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  scroll-margin-block-start: 76px;
}

.pcat__per { min-inline-size: 0 !important; inline-size: 84px; }

/* --- active filters -------------------------------------------------------- */
.pactive {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
}
.pactive__label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-inline-end: var(--sp-1);
}
.pactive__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-3);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text);
  cursor: pointer;
  max-inline-size: 100%;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
/* Hover flips the chip to the solid brand block — flat colour, never a gradient.
   The red surface is identical in both themes, so its label is --text-on-red. */
.pactive__chip:hover {
  background: var(--surface-red);
  border-color: var(--surface-red);
  color: var(--text-on-red);
  transform: translateY(-2px);
}
.pactive__k {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  flex: none;
}
.pactive__chip:hover .pactive__k { color: var(--text-on-red); }
.pactive__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pactive__chip svg { inline-size: 13px; block-size: 13px; flex: none; }

.pactive__clear {
  min-block-size: 36px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  color: var(--brand-text);
  border-block-end: var(--bw) solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.pactive__clear:hover { border-block-end-color: var(--brand-text); }

/* --- results --------------------------------------------------------------- */
#results { margin-block-start: var(--sp-8); }

/* The LIST view: a plain vertical stack of rows, never .pgrid. */
.plist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rail-gap);
}

/* A list row is centred on its photo: no auto-margin gap under the tags. */
.pcard--list .pcard__foot { margin-block-start: var(--sp-4); padding-block-start: 0; }
@media (min-width: 900px) {
  .plist .pcard--list .pcard__media { max-inline-size: 320px; }
}

/* On a narrow card the spec label takes its own line rather than being
   ellipsised down to nothing by the quote button (Arabic runs long). */
@media (max-width: 559px) {
  .pcat .pcard__foot { flex-wrap: wrap; row-gap: var(--sp-3); }
  .pcat .pcard__specs { flex: 1 0 100%; }
}

/* The two spec tags belong to the list row only — in the grid the photo and
   the single spec line carry the card. */
.pcard__tags { margin-block-start: var(--sp-1); }
.pcard--grid .pcard__tags { display: none; }
@media (max-width: 559px) {
  .pcard--list .pcard__tags { display: none; }
}

/* --- pager ----------------------------------------------------------------- */
.pcat__pagefoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-10);
  padding-block-start: var(--sp-8);
  border-block-start: var(--bw) solid var(--line-bold);
}
.pcat__showing {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}

/* --- empty state ----------------------------------------------------------- */
.pempty { margin-block-start: var(--sp-4); }
.pempty__desc {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-subtle);
  max-inline-size: 58ch;
}
.pempty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}


/* ==========================================================================
   3. CLOSING CTA — the red band. Flat colour, never a gradient.
   ========================================================================== */
.pquote__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pquote__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.pquote__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text-on-red);
  max-inline-size: 18ch;
}
.pquote__body {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-red-muted);
  max-inline-size: 52ch;
}

.pquote__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.pquote__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-red);
}
.pquote__note svg { inline-size: 15px; block-size: 15px; flex: none; }