/* ==========================================================================
   Takszu — in stock (Figma node 9:5, "takszu-in-stock")

   This page is drawn entirely in the current design system: Playfair Display
   for names, Archivo Narrow for labels, Inter for descriptions, on a 60px
   gutter. It is the catalogue — its 18 cards map one-to-one onto the 18
   product pages, in node order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Catalogue header (9:15)
   -------------------------------------------------------------------------- */

.catalogue-header {
  background-color: var(--color-surface);
  padding-block: calc(var(--navbar-height) + var(--space-90)) var(--space-60);
}

.catalogue-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

/* Not the System A eyebrow — this one has no leading dash. */
.catalogue-header__kicker {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  line-height: normal;
  text-transform: uppercase;
}

.catalogue-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--weight-bold);
  line-height: normal;
}

.catalogue-header__lede {
  max-width: 600px;
  color: var(--color-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.catalogue-header__rule {
  width: 120px;
  height: var(--hairline);
  background-color: var(--color-rule-faint);
}

/* --------------------------------------------------------------------------
   Catalogue body (9:20)
   -------------------------------------------------------------------------- */

.catalogue {
  background-color: var(--color-surface);
  padding-block-end: var(--space-120);
}

.catalogue__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* Section divider — a centred label with a short rule beneath it, in a fixed
   128px band (Figma 22:40 / 22:45 / 22:50). */
.catalogue-section {
  position: relative;
  height: 128px;
  padding-block: var(--space-80) var(--space-48);
  overflow: clip;
}

.catalogue-section__rule {
  width: 120px;
  height: var(--hairline);
  background-color: var(--color-rule-faint);
}

.catalogue-section__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--fs-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: 4px;
  line-height: normal;
  text-align: center;
}

.catalogue__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
}

.catalogue__row > * {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1024px) {
  .catalogue-header { padding-block: calc(var(--navbar-height) + var(--space-64)) var(--space-48); }
  .catalogue        { padding-block-end: var(--space-80); }
  .catalogue__inner { gap: var(--space-48); }
  .catalogue__row   { flex-wrap: wrap; gap: var(--space-32); }
  .catalogue__row > * { flex: 1 1 calc(50% - var(--space-32)); }
  .catalogue-section { height: 104px; padding-block: var(--space-48) var(--space-32); }
}

@media (max-width: 640px) {
  .catalogue__row > * { flex: 1 1 100%; }
}