/* ── Category header, shared by the products index and each category ── */
.cathead { padding-top: calc(var(--nav-height) + var(--space-8)); padding-bottom: var(--space-7); background: var(--surface-base); }
.cathead__title { font-size: clamp(2.2rem, 6vw, var(--size-4xl)); }
.cathead__tagline { margin-top: var(--space-4); color: var(--red-text); font-size: var(--size-md); }
.cathead__desc { margin-top: var(--space-4); max-width: 62ch; color: var(--steel-300); }

/* ── Category index ── */
.catlist { display: grid; gap: 1px; background: var(--surface-line); border-block: 1px solid var(--surface-line); padding: 0; }
.catlist__item { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-5); background: var(--surface-base); padding: var(--space-5); align-items: center; }
.catlist__item:hover { background: var(--surface-raised); }
.catlist__media { aspect-ratio: 4 / 3; background: var(--surface-panel); overflow: hidden; }
.catlist__media img { width: 100%; height: 100%; object-fit: contain; }
.catlist__body h2 { font-size: var(--size-lg); }
.catlist__body p { color: var(--steel-300); margin-top: var(--space-2); font-size: var(--size-sm); }
.catlist__count { display: inline-block; margin-top: var(--space-3); font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--red-text); }

/* ── Product grid ── */
.catgrid { padding-block: var(--space-8) var(--space-10); }
.catgrid__items { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.catgrid__empty { color: var(--steel-400); }

.pcard { background: var(--surface-raised); border: 1px solid var(--surface-line); display: flex; flex-direction: column; }
.pcard:hover { border-color: var(--steel-600); }
.pcard__media { aspect-ratio: 4 / 3; background: var(--surface-panel); display: grid; place-items: center; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__media.is-missing::after,
.catlist__media.is-missing::after,
.pdp__media.is-missing::after,
.wheel__item-media.is-missing::after { content: attr(data-missing); color: var(--text-faint); font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; text-align: center; padding: var(--space-2); }
.pcard__media.is-missing img,
.catlist__media.is-missing img,
.pdp__media.is-missing img,
.wheel__item-media.is-missing img { display: none; }
/* Same empty-state treatment for every product and category image box, so a
   photo that has not been added yet reads as a placeholder, not a broken icon. */
.catlist__media.is-missing { display: grid; place-items: center; }
.pcard__body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; flex: 1; }
.pcard__code { font-size: var(--size-xs); letter-spacing: var(--tracking-wide); color: var(--red-text); }
.pcard__name { font-size: var(--size-md); }
.pcard__subtitle { display: block; font-size: var(--size-xs); color: var(--steel-400); text-transform: none; letter-spacing: 0; margin-top: var(--space-1); font-family: var(--font-body); font-weight: 400; }
.pcard__summary { font-size: var(--size-sm); color: var(--steel-300); }
.pcard__cta { margin-top: auto; font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--red-text); }
.pcard__cta:hover { color: var(--red-hot); }

/* ── Product detail ── */
.pdp { padding-top: calc(var(--nav-height) + var(--space-7)); padding-bottom: var(--space-10); }
.pdp__layout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
/* Grid tracks grow to fit their content unless told otherwise. A large
   uploaded photo (1500px+) made the column wider than a phone screen and the
   whole product page scrolled sideways. minmax(0, …) and min-width: 0 keep
   the column the width of the screen; the photo scales down inside it. */
.pdp__layout > * { min-width: 0; }
.pdp__media { background: var(--surface-panel); border: 1px solid var(--surface-line); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--space-6); }
.pdp__media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.pdp__code { font-size: var(--size-sm); letter-spacing: var(--tracking-wide); color: var(--red-text); }
.pdp__name { font-size: clamp(2rem, 5vw, var(--size-3xl)); margin-top: var(--space-3); }
.pdp__subtitle { color: var(--steel-400); margin-top: var(--space-2); }
.pdp__desc { margin-block: var(--space-5); color: var(--steel-300); max-width: 56ch; }

.pdp__specs { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); margin-block: var(--space-6); padding-block: var(--space-5); border-block: 1px solid var(--surface-line); }
.pdp__specs dt { font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); }
.pdp__specs dd { margin: 0; font-size: var(--size-sm); }

.pdp__features { margin-top: var(--space-9); }
.pdp__features h2 { font-size: var(--size-xl); margin-bottom: var(--space-5); }
.pdp__features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--surface-line); border: 1px solid var(--surface-line); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pdp__features li { background: var(--surface-raised); padding: var(--space-5); }
.pdp__features h3 { font-size: var(--size-sm); color: var(--red-text); margin-bottom: var(--space-2); }
.pdp__features p { font-size: var(--size-sm); color: var(--steel-300); }

.pdp__sizes { margin-top: var(--space-9); }

/* ── Size chart ── */
.sizechart { margin: 0; }
.sizechart__title { font-family: var(--font-display); font-size: var(--size-xl); text-transform: uppercase; margin-bottom: var(--space-5); }
/* The table is sized by its content, not stretched to the page width: each
   column is as wide as its longest value plus a little padding, so short
   sizes like "13" or "400" no longer sit in a 300px-wide cell. */
.sizechart__scroll { overflow-x: auto; max-width: 100%; width: fit-content; border: 1px solid var(--surface-line); }
.sizechart__table { width: auto; border-collapse: collapse; font-size: var(--size-sm); }
.sizechart__table th, .sizechart__table td { padding: var(--space-2) var(--space-4); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--surface-line); }
.sizechart__table thead th { background: var(--red); color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--size-xs); border-bottom: none; white-space: normal; }
/* Headings may wrap onto two lines when the screen is too narrow; the size
   values themselves never break mid-value. */
.sizechart__grouprow th { background: var(--red-deep); }
.sizechart__table tbody tr:last-child th, .sizechart__table tbody tr:last-child td { border-bottom: none; }
.sizechart__table tbody th { font-weight: 500; color: var(--text-primary); }
.sizechart__table tbody td { color: var(--text-secondary); }
.sizechart__table tbody tr:nth-child(even) { background: var(--surface-raised); }
@media (max-width: 480px) {
  .sizechart__table th, .sizechart__table td { padding: var(--space-2) var(--space-3); }
}
.sizechart__note { margin-top: var(--space-3); font-size: var(--size-xs); color: var(--steel-400); }
.sizechart__empty { color: var(--steel-400); }

@media (min-width: 900px) {
  .pdp__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .catlist { grid-template-columns: repeat(2, 1fr); }
}