/* 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);
}

/* Two ways in, read as one row: the buttons share the column evenly instead of wrapping into a
   ragged pair of different widths. One button means one full-width button. */
.pc-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  width: 100%;
  max-width: 26rem;
  margin-top: var(--space-md);
}
/* the pair shares the column, so the horizontal padding gives way before a label wraps */
.pc-actions .btn {
  width: 100%;
  padding-inline: 0.9rem;
}
@media (max-width: 23.99rem) {
  .pc-actions { grid-auto-flow: row; }
}

/* The six facts the decision rests on, as a strip under the picture and the promise: three cells a row
   on a wide screen, one a row on a phone, each a mono label over its value. */
.pc-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--space-lg) 0 0;
  border-top: var(--border);
}
.pc-facts__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: var(--border);
}
.pc-facts__row dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pc-facts__row dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
}
@media (min-width: 40rem) {
  .pc-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-md);
  }
  .pc-facts__row { padding-right: var(--space-xs); }
}

.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-2xs);
}

/* 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;
}
/* The thumbnail is a button: it opens the photograph at full size, and the zoom cursor says so before the click. */
.pc-thumb__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.pc-thumb__open img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 220ms ease;
}
.pc-thumb__open:hover img,
.pc-thumb__open:focus-visible img { transform: scale(1.05); }
.pc-thumb__open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .pc-thumb__open img { transition: none; }
  .pc-thumb__open:hover img,
  .pc-thumb__open:focus-visible img { transform: none; }
}
/* The way down to the installation section is a line of text, so the pictures stay pictures. */
.pc-thumbs__more {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-xs);
}
.pc-thumbs__more a { color: var(--muted); }
.pc-thumbs__more a:hover { color: var(--accent); }

/* The name of a model is not a billboard headline: at the display size "Electromagnetic" runs
   straight out of the column beside the picture. It gets a size that fits on one line. */
.pc-pitch h1 {
  margin-block: var(--space-3xs) var(--space-2xs);
  font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.pc-pitch .eyebrow { margin-bottom: 0; }
.pc-pitch .lede {
  margin-top: var(--space-2xs);
  text-wrap: pretty;
}

/* The words column stretches to the height of the picture column, with the two buttons sitting on
   the bottom edge of the thumbnails rather than floating halfway up. */
@media (min-width: 52rem) {
  .pc-intro { align-items: stretch; }
  .pc-pitch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .pc-pitch .pc-actions {
    margin-top: auto;
    padding-top: var(--space-md);
  }
}

/* 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); }

/* One way to ask, printed where the buyer has just been told this may be the wrong model. */
.pc-limits__cta { margin-bottom: var(--space-md); }

/* The way out when the principle is wrong: another principle, not another brand. */
.pc-alt {
  padding-top: var(--space-sm);
  border-top: var(--border);
}
.pc-alt__note {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.pc-alt__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.pc-alt__links a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Second way out of the questions block: the form on this page, not a contact page. */
.pc-faq__exit {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: var(--border);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.pc-faq__exit a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Installation photographs: one at full width, the rest beside it, each enlarging in place. */
.pc-install__head { max-width: var(--measure); }
.pc-install__intro { color: var(--ink-soft); }
.pc-install__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}
.pc-install__item--lead { grid-column: 1 / -1; }
.pc-install__figure { margin: 0; }
.pc-install__frame { position: relative; }
.pc-install__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  overflow: hidden;
  cursor: zoom-in;
}
/* One frame shape per row, whatever the camera produced: a wide lead picture and two square-shouldered
   companions underneath, so the block reads as a set instead of three photographs that fell together.
   The whole picture is still one click away in the dialog. */
.pc-install__open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pc-install__item--lead .pc-install__open img { aspect-ratio: 16 / 10; }
.pc-install__open:hover img,
.pc-install__open:focus-visible img { transform: scale(1.035); }
.pc-install__open:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.pc-install__zoom {
  position: absolute;
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  padding: 0.24rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-navy);
  background: rgba(12, 31, 45, 0.74);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.pc-install__open:hover .pc-install__zoom,
.pc-install__open:focus-visible .pc-install__zoom {
  opacity: 1;
  transform: none;
}
.pc-install__caption {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

/* The enlarged view: the photograph at the width it was taken, caption under it. */
.pc-install__dialog {
  width: min(64rem, 92vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: auto;
}
.pc-install__dialog::backdrop { background: rgba(12, 31, 45, 0.76); }
.pc-install__dialog-body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}
.pc-install__dialog-body img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  background: var(--paper-deep);
  border-radius: var(--radius);
}
.pc-install__dialog-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}
.pc-install__dialog-body .btn { justify-self: start; }

@media (max-width: 39.99rem) {
  .pc-install__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-install__open img,
  .pc-install__zoom { transition: none; }
  .pc-install__open:hover img,
  .pc-install__open:focus-visible img { transform: none; }
}

/* 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);
}

.pc-side-card--form { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }
/* A short window must not hide the send button under the fold: the fields scroll inside the card
   and the button stays pinned to its bottom edge. On a normal screen nothing scrolls at all. */
.pc-side-card--form {
  max-height: calc(100dvh - var(--header-height) - var(--space-lg));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* On a desktop the card is already on the first screen, so "#rfq" used to change the URL and
   nothing else. The ring fades out on its own; without JavaScript the :target ring is the answer. */
.pc-side-card--form:target { animation: z2-rfq-land 1.6s ease-out 1; }
@keyframes z2-rfq-land {
  0% { box-shadow: var(--shadow-sm), 0 0 0 6px var(--accent); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-side-card--form:target {
    animation: none;
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

/* ---- The short enquiry form ------------------------------------------ */
/* One column, because it lives in a 21rem sidebar. The card is built so that the send button lands
   on the first screen: two fields, a closed fold for the technical questions, then the button. */
.rfq__title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.rfq__lead {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}
.rfq__form {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
}
.rfq__form .field textarea { min-height: 5rem; }
.rfq__actions {
  position: sticky;
  bottom: 0;
  padding-top: var(--space-2xs);
  background: var(--surface);
}
.rfq__actions .btn { width: 100%; }
.rfq__form .field--full { grid-column: 1 / -1; }
.rfq__note {
  margin: 0;
  color: var(--muted);
}

/* The sheet is opened from the bar on a phone and from the first-screen links at any width, so it
   sits beside the bar rather than inside it: the bar is display:none above 62rem and a dialog inside
   it would not open there. The host itself must not become a box in the page. */
.quote-host { display: contents; }

/* ---- The ask on a phone ---------------------------------------------- */
/* The card lives in a second column that only exists from 62rem up. Below that the price of asking
   has to travel with the reader, so it is a bar at the bottom edge that opens the same form. */
.quote-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm) calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: var(--border);
  box-shadow: 0 -6px 18px rgba(15, 27, 36, 0.12);
}
.quote-bar__label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.quote-bar__btn { white-space: nowrap; }

@media (max-width: 61.99rem) {
  .quote-bar { display: flex; }
  .quote-bar.is-quiet { display: none; }
  body.single-product #main,
  body:has(.quote-bar) #main { padding-bottom: 5.5rem; }
  .pc-side-card--form { max-height: none; overflow: visible; }
}

.quote-sheet {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
}
.quote-sheet::backdrop { background: rgba(15, 27, 36, 0.55); }
.quote-sheet__body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.quote-sheet__close { justify-self: start; }

/* ---- The datasheet gate, in place ------------------------------------ */
/* The hero's second button asks for the name and email here instead of handing the buyer to
   another page. The form is the download record's own gate, posting to the same intake. */
.dl-sheet { width: min(30rem, calc(100vw - 2rem)); }
.dl-sheet__foot {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}
.dl-sheet__foot .cluster { justify-content: space-between; align-items: center; }
.dl-sheet__foot .form-note { margin: 0; }