/* ============================================================
   Product page — one catalogue entry.

   Drives single-gps_product.php via
   template-parts/content-gps_product.php. Loads after
   product-archive.css, which owns the full-bleed .gps-pagehead banner
   and the .cat-card tiles the related-products grid reuses — neither is
   redefined here, so a change to a tile changes it on the home page,
   the category page and this one at once.

   Section order follows the reference catalogue: banner, title, prose,
   a features list the visitor opens, then the enquiry, then siblings.
   Two blocks have no counterpart there and are ours: the specification
   table, and the breadcrumb.
   ============================================================ */

/* ---------- Breadcrumb ----------
   The reference ships no breadcrumb, which is why its own deep links rot.
   Small, quiet, and above the title rather than over the banner: laid over
   a photograph it would need a scrim to stay legible, and a scrim over the
   client's uploaded artwork is a cost the trail does not justify. */
.gps-crumbs{
  padding-block:var(--sp-5) 0;
  font-size:var(--fs-sm);
  color:var(--grey-600);
}
.gps-crumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-2);
  margin:0;
  padding:0;
  list-style:none;
}
/* The separator is generated content, so it is never read out as text and
   never selected when a visitor copies the trail. */
.gps-crumbs__item+.gps-crumbs__item::before{
  content:"/";
  margin-inline-end:var(--sp-2);
  color:var(--grey-300);
}
.gps-crumbs__link{
  color:var(--grey-600);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.gps-crumbs__link:hover,
.gps-crumbs__link:focus-visible{
  color:var(--gps-red);
  border-bottom-color:currentColor;
}
.gps-crumbs__current{
  color:var(--gps-black);
  font-weight:var(--fw-bold);
}

/* ---------- Two-column layout ----------
   The reference catalogue's own geometry, measured at 1280px: 761px of main
   column against 362px of aside, side by side under the banner. That is the
   2fr/1fr below.

   The split is what puts the enquiry form beside the specification table
   instead of under it. A form below the fold is a footer nobody scrolls to;
   beside the figures it is in view at the moment the buyer has just read the
   one they came for.

   Stacked below 62rem. The reference keeps both columns down to phone widths,
   which squeezes its form to 179px of usable width at a 654px viewport -- the
   form fields stop being tappable long before that. This is one place the copy
   deliberately declines to reproduce the original's behaviour. */
.gps-product__layout{
  display:grid;
  gap:var(--sp-7);
  align-items:start;
}
@media (min-width:62rem){
  .gps-product__layout{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem);
  }
}
/* minmax(0,…) on the tracks and min-width:0 here are the same guard stated
   twice: a grid item's default min-width is auto, so the specification table
   -- which is explicitly min-width:34rem -- would otherwise force the main
   column wider than its track and push the aside off the page. */
.gps-product__main,
.gps-product__side{min-width:0}

.gps-product__side{
  display:grid;
  gap:var(--sp-5);
  align-content:start;
}

/* ---------- Sibling navigation ----------
   The set this product belongs to, current entry marked. The reference runs
   the same box at the top of its sidebar, and it is the only way to move
   between siblings there without going back to the category grid.

   Dark ground because the box is navigation, not content: it has to read as
   chrome sitting beside the article rather than as another section of it. */
.gps-product__siblings{
  padding:var(--sp-5);
  background:var(--gps-black);
  border-radius:var(--radius-tile);
}
.gps-product__siblings-title{
  margin:0 0 var(--sp-4);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--gps-white);
}
.gps-product__siblings-title a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color var(--dur-fast) var(--ease);
}
.gps-product__siblings-title a:hover,
.gps-product__siblings-title a:focus-visible{border-bottom-color:var(--gps-yellow)}

.gps-product__siblings-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin:0;
  padding:0;
  list-style:none;
}
.gps-product__sibling{
  display:flex;
  align-items:center;
  /* WCAG 2.5.8 wants 24px minimum and 2.5.5 (AAA) wants 44px; these are the
     smallest targets on the page, so they take the larger figure. Stated as a
     min-height rather than left to padding plus line-height, which measured
     43px and would drift again the moment the type scale moved. */
  min-height:44px;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-tile);
  background:rgba(255,255,255,.07);
  font-size:var(--fs-sm);
  line-height:1.35;
  color:var(--gps-white);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.gps-product__sibling:hover{background:var(--gps-red)}
.gps-product__sibling:focus-visible{
  outline:3px solid var(--gps-yellow);
  outline-offset:2px;
}
/* The page you are on. Yellow on black measures 12.6:1, and the weight change
   carries the same information without relying on colour alone. */
.gps-product__sibling.is-current{
  background:var(--gps-yellow);
  color:var(--gps-black);
  font-weight:var(--fw-bold);
  cursor:default;
}
.gps-product__sibling.is-current:hover{background:var(--gps-yellow)}

.gps-product__siblings-all{
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-xs);
}
.gps-product__siblings-all a{
  color:var(--gps-yellow);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.gps-product__siblings-all a:hover,
.gps-product__siblings-all a:focus-visible{border-bottom-color:currentColor}

/* ---------- Title block ----------
   Left-aligned, unlike the centred category title. A product page is read
   top to bottom as prose and figures; centring the name of a machine over
   a left-aligned summary puts a kink in the reading line. */
.gps-product__head{
  padding-block:var(--sp-6) 0;
  max-width:60rem;
}
.gps-product__eyebrow{
  margin:0 0 var(--sp-3);
  font-family:var(--font-head);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
}
.gps-product__eyebrow a{
  color:var(--gps-red);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease);
}
.gps-product__eyebrow a:hover,
.gps-product__eyebrow a:focus-visible{border-bottom-color:currentColor}

.gps-product__title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.25rem);
  /* 700, not 900. The reference serves no Black face at all — its child
     theme ships Regular, Bold and the italics — so a Black heading is
     heavier than anything on the page being matched. */
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);
  line-height:var(--lh-head);
  color:var(--gps-black);
  text-wrap:balance;
}
.gps-product__summary{
  margin:var(--sp-5) 0 0;
  font-size:var(--fs-lg);
  line-height:var(--lh-body);
  color:var(--grey-600);
}

/* ---------- Shared sub-head ----------
   One rule for every section title on the page, so Features, Specifications,
   Enquiry and Related cannot drift apart as the labels get renamed in
   wp-admin -- including the h2 inside the disclosure's <summary>, which
   <summary> accepts by spec and which keeps that section in the outline. */
.gps-product__subhead{
  margin:0;
  font-family:var(--font-head);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
  line-height:var(--lh-head);
  color:var(--gps-black);
}

.gps-product__body{
  /* No max-width. .gps-single__body in content.css already sets a 68ch
     measure for editor prose, and a wider one restated here wins on source
     order alone -- silently undoing the one rule that keeps a typed paragraph
     readable. */
  margin-block:var(--sp-6);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
}

/* ---------- Features disclosure ----------
   A native <details>. The reference collapses the same list behind a
   scripted accordion; this is the same interaction with the browser doing
   the work, so it opens without JavaScript, takes keyboard focus, is found
   by find-in-page, and prints expanded. */
.gps-product__disclosure{
  margin-block:var(--sp-6);
  border:1px solid var(--grey-300);
  border-radius:var(--radius-tile);
  background:var(--gps-white);
}
.gps-product__disclosure-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  /* 44px of vertical target at the base font size, per WCAG 2.5.8. */
  padding:var(--sp-4) var(--sp-5);
  cursor:pointer;
  /* Suppress both marker implementations: Safari still uses the WebKit
     pseudo-element, everything else honours list-style on the summary. */
  list-style:none;
}
.gps-product__disclosure-summary::-webkit-details-marker{display:none}
.gps-product__disclosure-summary:hover .gps-product__subhead{color:var(--gps-red)}
/* The focus ring goes on the summary, which is the real focus target.
   Removing it here would leave keyboard users with no visible position. */
.gps-product__disclosure-summary:focus-visible{
  outline:3px solid var(--gps-red);
  outline-offset:2px;
}

/* Our own marker: a chevron drawn from two borders, so it needs no glyph,
   no icon font and no sprite entry. */
.gps-product__disclosure-hint{
  flex:0 0 auto;
  width:.6rem;height:.6rem;
  border-right:2px solid var(--grey-600);
  border-bottom:2px solid var(--grey-600);
  transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.gps-product__disclosure[open] .gps-product__disclosure-hint{
  transform:rotate(225deg);
}
@media (prefers-reduced-motion:reduce){
  .gps-product__disclosure-hint{transition:none}
}

.gps-product__features{
  margin:0;
  padding:0 var(--sp-5) var(--sp-5);
  list-style:none;
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--grey-600);
}
.gps-product__features li{
  position:relative;
  padding-inline-start:var(--sp-5);
  padding-block:var(--sp-2);
  border-top:1px solid var(--grey-100);
}
.gps-product__features li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  /* Aligns the rule to the cap height of the first line rather than to the
     top of the line box, which sits visibly high next to 1.7 leading. */
  top:calc(var(--sp-2) + .7em);
  width:.75rem;height:2px;
  background:var(--gps-red);
}

/* ---------- Specification table ----------
   No counterpart on the reference site, which carries one table across 190
   pages. A buyer there cannot compare an operating weight without sending an
   enquiry first; this is the block that fixes that. */
.gps-product__specs{margin-block:var(--sp-8)}
.gps-product__specs-scroll{
  margin-top:var(--sp-5);
  overflow-x:auto;
  /* Momentum scrolling on touch, and a focus ring when the region is
     tabbed to — it carries tabindex="0" so it is keyboard-scrollable. */
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--grey-300);
  border-radius:var(--radius-tile);
}
.gps-product__specs-scroll:focus-visible{
  outline:3px solid var(--gps-red);
  outline-offset:2px;
}
.gps-product__table{
  width:100%;
  min-width:34rem;          /* below this the four columns stop being a table */
  border-collapse:collapse;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
}
.gps-product__table th,
.gps-product__table td{
  padding:var(--sp-3) var(--sp-4);
  text-align:start;
  vertical-align:top;
  border-bottom:1px solid var(--grey-100);
}
.gps-product__table thead th{
  background:var(--grey-100);
  font-family:var(--font-head);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--gps-black);
  border-bottom:1px solid var(--grey-300);
  white-space:nowrap;
}
.gps-product__table tbody th{
  font-weight:var(--fw-bold);
  color:var(--gps-black);
}
.gps-product__table tbody tr:last-child th,
.gps-product__table tbody tr:last-child td{border-bottom:0}
.gps-product__figure{
  /* Tabular figures so ranges line up column-wise down the table, which is
     the only reason to put numbers in a table rather than in prose. */
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--gps-black);
}
.gps-product__unit{
  white-space:nowrap;
  color:var(--grey-600);
}
.gps-product__note{
  min-width:16rem;
  color:var(--grey-600);
}

/* ---------- Enquiry ----------
   The section the whole page exists to reach: 143 of the reference's 190
   pages carry this form. Panelled so it reads as an action rather than as
   more prose, and full width because a form plugin's own grid needs room. */
.gps-product__enquiry{
  /* No block margin: the aside is a grid and owns the gap between its boxes.
     A margin here would fight it and only show up when the sibling box is
     absent, which is the one case nobody reviews. */
  margin:0;
  padding:var(--sp-5);
  background:var(--grey-100);
  border-radius:var(--radius-tile);
  /* The brand rule along the top edge, the same device the banner
     placeholder and the footer use. */
  border-top:6px solid var(--gps-red);
}
.gps-product__enquiry-intro{
  max-width:44rem;
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--grey-600);
}
.gps-product__form{margin-top:var(--sp-5)}

/* Buttons shown when no form shortcode is configured. A catalogue page must
   still convert on a fresh install, before any form plugin exists. */
.gps-product__contact{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin:var(--sp-5) 0 0;
  padding:0;
  list-style:none;
}
/* .btn is white-space:nowrap with 40px of inline padding, which is right for a
   short call to action on a full-width band and wrong here. An address like
   info@germanpowersolutions.example gives the button a min-content width of
   ~436px; as a grid item the enquiry panel takes its automatic minimum size
   from that and is forced wider than its own column, pushing its grey ground
   and red rule past the container and putting a horizontal scrollbar on the
   document. It overflows at every width, worst in the two-column layout.

   Letting the label wrap fixes the cause. min-inline-size:0 on the panel is the
   backstop, so no future long string can blow the track out the same way. */
.gps-product__enquiry{min-inline-size:0}
.gps-product__contact .btn{
  white-space:normal;
  overflow-wrap:anywhere;
  padding-inline:var(--sp-4);
  text-align:center;
}

/* In the aside the column is too narrow for buttons side by side: one per row,
   full width. */
@media (min-width:62rem){
  .gps-product__contact{flex-direction:column}
  .gps-product__contact .btn{display:flex}
}

/* ---------- Related ---------- */
.gps-product__related{margin-block:var(--sp-8) var(--sp-10)}
/* .gps-archive__grid already sets the block margins for a grid that follows
   a page title. Under a section heading here that top margin is doubled. */
.gps-product__related .gps-archive__grid{margin-block:var(--sp-5) 0}

@media (max-width:60rem){
  .gps-product__head{padding-block:var(--sp-5) 0}
  .gps-product__specs,
  .gps-product__related{margin-block:var(--sp-7)}
  .gps-product__related{margin-bottom:var(--sp-8)}
}