/* ==========================================================================
   Selective Amplifiers — product.css

   Loaded only by routes carrying 'css' => 'product' in routes.php. Every
   rule here is specific to the product-page template (amps/_amp-page.php); if
   something turns out to be useful on a second page, it belongs in main.css
   instead. Tokens only — no hardcoded colours or sizes.
   ========================================================================== */

/* The panel leads the page, so it gets more room than the home hero's and sits
   above the figures it describes rather than beside them. */
.amp-hero-panel{margin-bottom:var(--s6);}
.amp-hero-panel .faceplate-svg{margin:0 auto;}
.amp-hero-panel .faceplate-caption{text-align:center;}

.amp-datums{row-gap:var(--s5);}

/* Two indicator states side by side, so the difference between them is the
   comparison rather than something to remember between scrolls. Falls to one
   column early — the panel is 205.7 mm of detail and does not want halving. */
.amp-panel-states{
  display:grid;
  gap:var(--s5);
  margin-top:var(--s6);
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  .amp-panel-states{grid-template-columns:1fr 1fr;}
}

/* The indicator legend. The name column is narrower than .specs' default 34% —
   these are five short words, and the meanings are what want the room. */
.amp-leds th[scope="row"]{width:26%;}

/* The rear panel artwork, under the Connections prose. Full container width,
   not .measure: the panel is 216.75 x 41.99 mm — a 5:1 strip — and its legend
   text ("ANALOG INPUTS", "CLASS 2 WIRING") stops being readable well before a
   text column's width. The caption is centred under it for the same reason the
   hero panel's is: at 1180 px a left-aligned line under a full-width strip
   reads as a stray fragment. */
.amp-rear-panel{margin-top:var(--s6);}
/* Same idea as main.css's .table-scroll: the wrapper scrolls so the page never
   does. 680 px is where the panel's own legend text stops being legible —
   below that, squeezing it to fit produces a shape rather than a diagram. */
.amp-rear-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* main.css's `.figure img` already supplies width:100% and the hairline border.
   The min-width is what turns the overflow on; the border stays on the image
   so it pans with the panel rather than framing the viewport. */
.amp-rear-scroll > img{min-width:680px;}
.amp-rear-scroll:focus-visible{outline:2px solid var(--paper);outline-offset:3px;}
.amp-rear-panel figcaption{
  max-width:var(--measure);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* The full specification: four groups that pack into as many columns as fit
   rather than stacking into one very long table. Each group keeps its caption,
   so a column break never separates a row from its heading. */
.amp-specs{
  display:grid;
  gap:var(--s5) var(--s6);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:760px){
  .amp-specs{grid-template-columns:1fr 1fr;}
}
/* Wider than .specs' default 34%: in a half-width column these labels
   ("Output power @ 4 Ω / 8 Ω") wrapped to two lines almost every row. */
.amp-specs .specs th[scope="row"]{width:41%;}

/* Print: an integrator printing a spec page wants the tables, not the visuals
   they have already seen on screen. .amp-rear-panel is the exception and stays
   — a connector layout is reference material at the rack, which is exactly
   where a printout gets used. */
@media print{
  .amp-panel-states,
  .powershare,
  .zones{display:none;}
  .amp-specs{grid-template-columns:1fr 1fr;gap:0 18pt;}
}

/* Carton contents. A plain list, not a table: these are things, not values. */
.amp-carton{
  margin:0;
  padding-left:1.15em;
  font-size:var(--fs-small);
  color:var(--dim);
}
.amp-carton li{margin-bottom:var(--s1);}