/* Products page layouts. Uses shared tokens and components only. */
html { scroll-padding-top: calc(var(--nav-h) + 72px); }

/* ---------- Page intro ---------- */
.pintro { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.pintro .container > * { max-width: 40rem; }
.pintro .lead { margin-top: 1.25rem; }
.pintro__note { margin-top: .75rem; font-size: .875rem; color: var(--ink-soft); }
.pintro .rule { margin: 2.25rem 0 0; margin-inline: 0; width: min(18rem, 70%); }

/* ---------- Sticky filter bar ---------- */
.filter {
  position: sticky; top: var(--nav-h); z-index: var(--z-sticky);
  background: var(--paper);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line-gold);
}
.filter__row {
  display: flex; align-items: center; gap: 2rem; height: 56px;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.filter__row::-webkit-scrollbar { display: none; }
.filter__btn {
  position: relative; flex: none; padding-block: 1rem;
  font: 500 .78rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.filter__btn:hover { color: var(--ink); }
.filter__btn[aria-pressed="true"] { color: var(--ink); }
.filter__btn::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--foil);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.filter__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.filter__count {
  margin-left: .35em; font: italic 400 .95rem/1 var(--font-display);
  letter-spacing: 0; text-transform: none; color: var(--gold-700);
}

/* ---------- Category sections ---------- */
.cat[hidden] { display: none; }
.cat { padding-block: clamp(3.5rem, 8vw, 7rem) 0; }
#catalogue { padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.cat__head { max-width: 38rem; margin-bottom: 3rem; display: grid; gap: 1rem; }
.cat__head .h2 { position: relative; padding-bottom: 1.25rem; }
.cat__head .h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 1px; background: var(--gold-600);
}
.cat__head p { color: var(--ink-soft); max-width: 34rem; }

.cat__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }

/* ---------- Piece cards ---------- */
.piece { display: flex; flex-direction: column; min-width: 0; }
.piece__media { margin: 0; }
.piece__body { padding-top: 1.25rem; display: grid; gap: .5rem; }
.piece__name {
  font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.15; letter-spacing: var(--tracking-display);
}
.piece__desc { color: var(--ink-soft); font-size: .95rem; max-width: 36ch; }
.piece__price {
  font: 500 .72rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700);
  margin-top: .25rem;
}
.piece__cta { justify-self: start; margin-top: .5rem; }
.piece--feature .piece__name { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); }

@media (max-width: 479.98px) {
  .piece__cta { justify-self: stretch; justify-content: center; width: 100%; }
}

@media (min-width: 768px) {
  .cat__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .piece--feature { grid-column: 1 / -1; }
  .piece--feature .mat__img { aspect-ratio: 16 / 10; }
  .piece--feature .piece__body { max-width: 44rem; }
}

@media (min-width: 1024px) {
  .cat__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
  .piece--feature { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; }
  .piece--feature .piece__media { flex: 1; display: flex; }
  .piece--feature .mat__img { aspect-ratio: auto; height: 100%; flex: 1; position: relative; }
  .piece--feature .mat__img img { position: absolute; inset: 0; }
  /* lookbook rhythm: lower row staggers slightly */
  .cat__grid > .piece:nth-child(5) { margin-top: 2.5rem; }
}

/* Image hover: slow, quiet zoom already comes from .mat; add caption tint */
@media (hover: hover) and (pointer: fine) {
  .piece:hover .piece__name { color: var(--gold-700); }
}
.piece__name { transition: color var(--dur) var(--ease-out); }

/* ---------- Bespoke band ---------- */
.bespoke { background: var(--ivory); text-align: center; }
.bespoke__inner > * + * { margin-top: 1.5rem; }
.bespoke .rule { margin-block: 0 2.5rem; }
.bespoke p { color: var(--ink-soft); max-width: 36rem; margin-inline: auto; }
.bespoke__ctas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2rem; margin-top: 2rem;
}
@media (max-width: 479.98px) {
  .bespoke__ctas { flex-direction: column; }
  .bespoke__ctas .btn { width: 100%; justify-content: center; }
}

/* ---------- Scroll reveal (CSS only, never leaves cards hidden) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .piece, .cat__head { animation: piece-in linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  }
}
@keyframes piece-in { from { opacity: 0; transform: translateY(32px); } }