/* Product archive, category and detail pages. */
/* Only what base.css does not already carry; new classes are prefixed .pc-. */

/* ---- Catalogue archive ------------------------------------------------ */
/* The family chips under the catalogue heading: every family listed, none of them current. */
.pc-chips {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}
.pc-chips li { margin: 0; }

/* The second level of the family tree in the sticky sidebar. */
.pc-sub {
  margin-top: var(--space-2xs);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--line);
}
.pc-sub li {
  padding: 0.3rem 0;
  border-bottom: 0;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.pc-sub a { color: var(--ink-soft); }
.pc-sub a:hover { color: var(--ink); }

/* The one question the catalogue cannot answer by itself. */
.pc-help {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border);
}
.pc-help .panel__title { margin-bottom: var(--space-2xs); }
.pc-help p { font-size: var(--text-sm); color: var(--ink-soft); }
.pc-help p:not(.panel__title) { margin-bottom: var(--space-xs); }

/* ---- Category page ---------------------------------------------------- */
/* Child categories read as a compact row above the models, not as a second catalogue. */
.pc-children .card__title { font-size: var(--text-base); }
.pc-children .card__body { gap: var(--space-3xs); }
.pc-children + .pc-products { margin-top: var(--space-xl); }

/* ---- Product page ----------------------------------------------------- */
/* The picture is wider than the facts panel beside it. */
@media (min-width: 52rem) {
  .pc-top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
}

/* No photograph yet: the same box the picture would fill, so the split does not collapse. */
.pc-figure-empty {
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.pc-facts { margin-block: var(--space-md); }
.pc-actions { margin-top: var(--space-md); }

.pc-block { margin-top: var(--space-xl); }
.pc-block:first-child { margin-top: 0; }
.pc-maintenance { margin-top: var(--space-md); }

/* A wide specification table scrolls instead of pushing the page sideways. */
.pc-table-scroll { overflow-x: auto; }

/* The applications anchor clears the sticky header. */
.pc-anchor { scroll-margin-top: calc(var(--header-height) + 1rem); }

/* ---- Product page: the order an engineer decides in ------------------- */
/* Two columns from 62rem: the argument on the left, the commercial facts and the short enquiry form
   on the right, so a procurement reader never scrolls to find lead time, MOQ or the datasheet. */
.pc-layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 62rem) {
  .pc-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--space-2xl);
  }
}

.pc-main { min-width: 0; }

/* Picture and promise side by side; the picture a little wider than the words. */
.pc-intro {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 52rem) {
  .pc-intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-lg);
  }
}

/* A studio photograph sits on white, so the instrument reads as the object and not as a tinted box. */
.figure--product {
  margin: 0;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.figure--product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: var(--space-sm);
}

/* The thumbnails are the link to the installation photographs further down. */
.pc-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
}
.pc-thumb {
  display: block;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.pc-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pc-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.pc-pitch .eyebrow { margin-bottom: var(--space-2xs); }
.pc-pitch .lede { margin-top: var(--space-sm); }

/* The block a buyer must not skip: the conditions this model is the wrong answer for. */
.pc-limits {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--paper-deep);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.pc-limits h2 { margin-top: 0; }
.pc-limits__intro {
  color: var(--ink-soft);
  max-width: var(--measure);
}
.pc-limits .limit-list { margin-block: var(--space-md); }

/* Installation photographs, printed at the size they are worth. */
.pc-install__intro {
  color: var(--ink-soft);
  max-width: var(--measure);
}
.pc-install__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-sm);
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}
.pc-install__figure {
  margin: 0;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pc-install__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pc-install__caption {
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Buyer questions, always open: a search engine reads the answers and so does a buyer in a hurry. */
.pc-faq__list {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: 0;
}
.pc-faq__item {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-sm) 0;
  border-top: var(--border);
}
@media (min-width: 46rem) {
  .pc-faq__item {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-md);
  }
}
.pc-faq__item dt {
  font-weight: 600;
  color: var(--ink);
}
.pc-faq__item dd {
  margin: 0;
  color: var(--ink-soft);
}

.pc-spec-foot,
.pc-doc-foot {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.pc-doc-list li { padding-block: var(--space-2xs); }

/* ---- Product page: the sidebar --------------------------------------- */
.pc-side {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 62rem) {
  .pc-side {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
  }
}

.pc-side-card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.pc-side-card__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* The datasheet is the one file a buyer wants before writing to anyone. */
.pc-file {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem var(--space-2xs);
  padding: var(--space-xs);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
}
.pc-file__name {
  font-weight: 600;
  color: var(--ink);
}
.pc-file__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}
.pc-file:hover { border-color: var(--ink); }
.pc-file:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.pc-side-facts { margin-top: var(--space-md); }
.pc-side-mail {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.pc-side-card--form { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }

/* ---- The short enquiry form ------------------------------------------ */
/* One column, because it lives in a 21rem sidebar: name, email and one line is enough to answer. */
.rfq__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.rfq__form {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}
.rfq__form .field--full { grid-column: 1 / -1; }
.rfq__note {
  margin: 0;
  color: var(--muted);
}

/* ---- Catalogue: start from the condition --------------------------------- */
/* The eight conditions a visitor arrives with, each one a real category: the first fork in the path,
   printed above the families so nobody has to know a product name to get anywhere. */
.pc-choose { margin-bottom: var(--space-2xl); }
.pc-choose h2 { margin: 0 0 var(--space-2xs); }
.pc-choose__intro {
  color: var(--ink-soft);
  max-width: var(--measure);
}
.pc-choose__list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  border-top: var(--border);
}
.pc-choose__link {
  display: grid;
  gap: 0.2rem var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border);
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 48rem) {
  .pc-choose__link {
    grid-template-columns: minmax(0, 1fr) 13rem;
    align-items: baseline;
  }
}
.pc-choose__link:hover .pc-choose__text { color: var(--accent); }
.pc-choose__link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.pc-choose__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 48rem) {
  .pc-choose__name { text-align: right; }
}

/* ---- Category page: the models side by side ------------------------------ */
.pc-compare { margin-bottom: var(--space-xl); }
.pc-compare h2 { margin: 0 0 var(--space-2xs); }
.pc-compare__intro {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
}
.pc-compare__table th a { color: var(--ink); }
.pc-compare__table th a:hover { color: var(--accent); }
.pc-compare__code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}