/* ==========================================================================
   Mojolnir — products.css (products.html: the catalogue)
   PH head (PRODUCTS + filter) · PF STAGE-T first (five colours) · CAT categories → series → cards
   Cards are generated by tools/build_lineup.py from tools/lineup.json.
   ========================================================================== */
.sp { display: none; }
@media (max-width: 767px) { .sp { display: inline; } }

/* ---------- head ---------- */
.ph { padding: calc(var(--header-h) + 72px) 0 56px; }
.ph__word { margin: 0; color: var(--resin); }
.ph__row { display: flex; align-items: flex-end; justify-content: flex-start; gap: 32px; margin-top: 32px; }
.ph__h { margin: 0; }
.ph__filter { display: flex; box-shadow: inset 0 0 0 1px var(--gunmetal); }
.ph__filter[hidden] { display: none; }
.ph__filter button { min-height: 44px; padding: 0 20px; font-size: 13px; letter-spacing: 0.06em; color: var(--sand); transition: color var(--d-micro) linear, background-color var(--d-micro) linear; }
.ph__filter button + button { box-shadow: inset 1px 0 0 var(--gunmetal); }
.ph__filter button:hover { color: var(--resin); }
.ph__filter button[aria-pressed="true"] { background: var(--resin); color: var(--stage); }

/* ---------- STAGE-T first ---------- */
.pf { padding: 56px 0 96px; box-shadow: inset 0 1px 0 var(--gunmetal); }
.pf[hidden], .cat[hidden] { display: none; }
.pf__grid { align-items: end; }
.pf__text { grid-column: 1 / span 5; padding-bottom: 24px; }
.pf__series { color: var(--sand); }
.pf__mark { margin: 20px 0 0; font-weight: inherit; }
.pf__logo { display: block; width: min(100%, 440px); color: var(--resin); }
.pf__sub { display: block; width: 66px; margin-top: 12px; color: var(--resin); }
.pf__mark svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.pf__lead { margin: 32px 0 0; }
.pf__meta { margin: 8px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--sand); }
.pf__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.pf__row { grid-column: 6 / -1; display: flex; justify-content: space-between; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.pf__row li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.pf__row li + li { margin-left: 8px; }
.pf__row a { display: block; width: 100%; }
.pf__row img { width: 100%; height: auto; max-height: min(62vh, 520px); object-fit: contain; object-position: 50% 100%; transition: transform var(--d-short) var(--ease-out), opacity var(--d-short) var(--ease-out); }
.pf__row:hover li:not(:hover) img { opacity: 0.5; }
.pf__row a:hover img, .pf__row a:focus-visible img { transform: translateY(-10px); }
@media (max-width: 1279px) { .pf__text { grid-column: 1 / -1; } .pf__row { grid-column: 1 / -1; margin-top: 48px; } }

/* ---------- categories ---------- */
.cat { padding: 96px 0 32px; }
.cat__head { display: flex; align-items: baseline; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--gunmetal); }
.cat__h { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.4; }
.cat__n { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--sand); }
.cat__series { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--gunmetal); }
.cat__sname { margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; color: var(--sand); }
.cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 48px 32px; margin: 0; padding: 0; list-style: none; }

/* ---------- card ---------- */
.pc { display: flex; flex-direction: column; }
.pc__link { display: block; }
.pc__img { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 400px; padding-top: 16px; }
.pc__img::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 60%; background: radial-gradient(closest-side, rgba(236, 232, 227, 0.06), transparent); z-index: -1; }
.pc__img img { height: 100%; width: auto; max-width: none; transition: transform var(--d-short) var(--ease-out); }
.pc__img--none { box-shadow: inset 0 0 0 1px var(--gunmetal); }
.pc__link:hover .pc__img img, .pc__link:focus-visible .pc__img img { transform: translateY(-10px); }
.pc__body { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.pc__series { order: 2; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--sand); }
.pc__name { position: relative; font-family: var(--f-display); font-weight: 600; font-size: 28px; letter-spacing: 0.06em; line-height: 1.1; }
.pc__link:hover .pc__name::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--lava); }
.pc__meta { margin-top: 12px; }
.pc__chips i { width: 12px; height: 12px; }
.pc__codes { margin: 8px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--sand); }
.pc__lead { margin: 12px 0 0; font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.pc__inc { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.04em; color: var(--sand); }

@media (max-width: 767px) {
  .ph { padding: calc(var(--header-h) + 40px) 0 32px; }
  .ph__row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ph__filter { align-self: stretch; } .ph__filter button { flex: 1; padding: 0 8px; }
  .pf { padding: 40px 0 64px; }
  .pf__cta { flex-direction: column; } .pf__cta .btn { width: 100%; }
  .cat { padding: 64px 0 16px; }
  .cat__h { font-size: 22px; }
  .cat__series { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .cat__grid { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .pc__img { height: 300px; }
  .pc__name { font-size: 22px; }
  .pc__body { flex-direction: column; gap: 4px; margin-top: 16px; }
  .pc__series { order: 0; }
}