/* ============================================================================
   product.css — layout and components for the server-rendered product pages.

   Why a stylesheet with media queries, when the rest of the site branches on
   useViewport() in JSX: product.php now renders the FINAL page in PHP, and PHP
   cannot know the viewport. The old approach (static fallback, then React
   replacing it) meant the indexed DOM, the first paint and the layout were all
   whatever JS produced after mount — which is how the hero came to overflow
   phones by up to 480px with nobody noticing in the server HTML. Breakpoints
   match useViewport(): mobile < 768, tablet 768–1023, desktop >= 1024.

   Every colour, family and radius comes from colors_and_type.css tokens.
   ============================================================================ */

.pd {
  --pd-gutter: 16px;
  --pd-header-h: 56px;
  --pd-sticky-top: 0px;
  margin: 0;
  background: var(--gmu-bg-1);
  color: var(--gmu-fg-1);
  font-family: var(--gmu-font-body);
  font-size: var(--gmu-fs-16);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px)  { .pd { --pd-gutter: 32px; } }
@media (min-width: 1024px) { .pd { --pd-gutter: 48px; --pd-header-h: 68px; --pd-sticky-top: var(--pd-header-h); } }

/* Base rules sit in :where() so they carry no specificity: a bare `.pd img`
   (0,1,1) silently outranks a component class like .pd-plate__img (0,1,0). */
:where(.pd) *, :where(.pd) *::before, :where(.pd) *::after { box-sizing: border-box; }
.pd [hidden] { display: none !important; }
/* Copy that describes something only the enhancement script provides. */
:root:not(.pd-js) .pd-js-only { display: none; }
:where(.pd) img { max-width: 100%; }
:where(.pd) a { color: inherit; }
:where(.pd) :focus-visible { outline: 2px solid var(--gmu-red); outline-offset: 2px; }

.pd-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pd-gutter);
}
@media (min-width: 1600px) { .pd-wrap { max-width: 1320px; } }

.pd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pd-skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--gmu-ink); color: var(--gmu-fg-inverse) !important;
  padding: 10px 16px; text-decoration: none;
}
.pd-skip:focus { top: 8px; }

.pd-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons --------------------------------------------------------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--gmu-font-display); font-weight: 600; font-size: var(--gmu-fs-14);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--gmu-radius-1);
  cursor: pointer; white-space: nowrap;
  transition: background var(--gmu-dur-base) var(--gmu-ease-out),
              color var(--gmu-dur-base) var(--gmu-ease-out),
              border-color var(--gmu-dur-base) var(--gmu-ease-out);
}
.pd-btn--primary { background: var(--gmu-red); color: var(--gmu-on-accent) !important; box-shadow: var(--gmu-shadow-red); }
.pd-btn--primary:hover { background: var(--gmu-red-700); }
.pd-btn--secondary { background: transparent; color: var(--gmu-red) !important; border-color: var(--gmu-red); }
.pd-btn--secondary:hover { background: var(--gmu-red); color: var(--gmu-on-accent) !important; }
.pd-btn--light { background: var(--gmu-paper); color: var(--gmu-red) !important; }
.pd-btn--light:hover { background: var(--gmu-paper-2); }
.pd-btn--outline-light { background: transparent; color: var(--gmu-fg-inverse) !important; border-color: var(--gmu-fg-inverse); }
.pd-btn--outline-light:hover { background: var(--gmu-fg-inverse); color: var(--gmu-red) !important; }
.pd-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.pd-btn--icon { min-width: 44px; min-height: 44px; padding: 10px; }

.pd-linkbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--gmu-font-display); font-weight: 600; font-size: var(--gmu-fs-14);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gmu-red);
}
.pd-linkbtn:hover { color: var(--gmu-red-700); text-decoration: underline; text-underline-offset: 4px; }
.pd-linkbtn .pd-icon { transition: transform var(--gmu-dur-slow) var(--gmu-ease-out); }
.pd-linkbtn[aria-expanded="true"] .pd-icon { transform: rotate(180deg); }

/* ---------- Header ---------------------------------------------------------- */
.pd-header {
  background: var(--gmu-paper);
  border-bottom: 1px solid var(--gmu-line);
  z-index: 60;
}
/* Sticky on desktop only: on a phone the bottom quote bar is the persistent
   chrome, and two pinned bars would eat a fifth of a 640px-tall screen. */
@media (min-width: 1024px) { .pd-header { position: sticky; top: 0; } }
.pd-header__in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--pd-header-h);
}
.pd-brandmark { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; text-decoration: none; }
.pd-brandmark img { height: 32px; width: auto; flex: none; }
.pd-brandmark__text { min-width: 0; line-height: 1.15; }
.pd-brandmark__name {
  display: block; font-family: var(--gmu-font-display); font-weight: 700;
  font-size: var(--gmu-fs-14); letter-spacing: 0.02em; color: var(--gmu-red);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-brandmark__tag { display: none; font-style: italic; font-size: 11px; color: var(--gmu-fg-3); }
@media (min-width: 768px) {
  .pd-brandmark img { height: 40px; }
  .pd-brandmark__name { font-size: var(--gmu-fs-18); }
  .pd-brandmark__tag { display: block; }
}
.pd-nav { display: none; }
@media (min-width: 1024px) {
  .pd-nav { display: flex; gap: 4px; margin-left: auto; }
  .pd-nav a {
    padding: 10px 14px; text-decoration: none;
    font-family: var(--gmu-font-display); font-weight: 600; font-size: var(--gmu-fs-14);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--gmu-fg-1);
  }
  .pd-nav a:hover { color: var(--gmu-red); }
}
.pd-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }
@media (min-width: 1024px) { .pd-header__actions { gap: 16px; } }

.pd-lang { display: flex; align-items: center; font-family: var(--gmu-font-display); font-size: 13px; font-weight: 600; }
.pd-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 40px; padding: 0 6px;
  text-decoration: none; color: var(--gmu-fg-3); letter-spacing: 0.06em;
}
.pd-lang a:hover { color: var(--gmu-red); }
.pd-lang a[aria-current="true"] { color: var(--gmu-red); box-shadow: inset 0 -2px 0 var(--gmu-red); }
.pd-lang span { color: var(--gmu-line); }
.pd-header .pd-btn__label { display: none; }
@media (min-width: 768px) { .pd-header .pd-btn__label { display: inline; } .pd-header .pd-btn--icon { padding-inline: 16px; } }

/* ---------- Hero ------------------------------------------------------------ */
.pd-hero {
  position: relative; overflow: hidden;
  background: var(--gmu-bg-2);
  padding-block: 20px 40px;
}
/* The brand's corner wedge, bottom-right, as in the brochure. */
.pd-hero::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 72px; height: 72px;
  background: var(--gmu-red); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
@media (min-width: 768px)  { .pd-hero { padding-block: 28px 56px; } .pd-hero::after { width: 104px; height: 104px; } }
@media (min-width: 1024px) { .pd-hero { padding-block: 32px clamp(48px, 8vh, 88px); } .pd-hero::after { width: 128px; height: 128px; } }

.pd-crumbs { font-size: 13px; color: var(--gmu-fg-3); margin-bottom: 20px; }
.pd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.pd-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.pd-crumbs li + li::before { content: '\203A'; margin: 0 8px; color: var(--gmu-ink-4); }
.pd-crumbs a { display: inline-block; padding: 6px 0; color: var(--gmu-fg-2); text-decoration: none; }
.pd-crumbs a:hover { color: var(--gmu-red); text-decoration: underline; text-underline-offset: 3px; }
.pd-crumbs [aria-current] { color: var(--gmu-fg-3); overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .pd-crumbs [aria-current] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 1024px) { .pd-crumbs { margin-bottom: 36px; } }

/* Mobile: title, then picture, then the rest — the name of the thing first.
   Desktop: picture on the left spanning both rows, copy on the right. */
.pd-hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "plate" "body";
}
/* Tablet: title across the top, picture beside the copy. Stacked, the plate
   left a 200px empty band beside it at 768px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pd-hero__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "title title" "plate body";
    gap: 28px 32px; align-items: start;
  }
}
@media (min-width: 1024px) {
  .pd-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "plate title" "plate body";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 80px); row-gap: 24px;
    align-items: start;
  }
}
.pd-hero__title { grid-area: title; min-width: 0; }
.pd-hero__body  { grid-area: body;  min-width: 0; }
.pd-plate-wrap  { grid-area: plate; min-width: 0; margin: 0; }

/* The H1 is the brand ribbon — the one loud element on the page. It wraps:
   about three in four model titles exceed 40 characters, and the old
   nowrap ribbon pushed a Parker title to 852px on a 390px phone. */
.pd-title {
  display: inline-block; max-width: 100%; margin: 0;
  padding: 12px 40px 12px 16px;
  background: var(--gmu-ribbon); color: var(--gmu-fg-inverse);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  font-family: var(--gmu-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 24px; line-height: 1.15; letter-spacing: 0.02em;
  overflow-wrap: anywhere; text-wrap: balance;
}
.pd-title--long { font-size: 20px; }
@media (min-width: 768px) {
  .pd-title { font-size: 32px; padding: 14px 52px 14px 22px; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
  .pd-title--long { font-size: 26px; }
}
@media (min-width: 1024px) { .pd-title { font-size: clamp(32px, 2.4vw, 42px); } .pd-title--long { font-size: clamp(24px, 1.8vw, 30px); } }

/* No dividers between facts: a Parker category name is long enough to wrap
   the row, and a divider then dangles at the end of a line. Spacing only. */
.pd-facts {
  display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0 0 20px;
}
@media (max-width: 767.98px) {
  .pd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px 16px; }
  .pd-facts > .pd-facts__wide { grid-column: 1 / -1; }
}
.pd-facts dt { font-size: 12px; color: var(--gmu-fg-3); line-height: 1.3; }
.pd-facts dd {
  margin: 2px 0 0; font-family: var(--gmu-font-display); font-weight: 600;
  font-size: var(--gmu-fs-18); color: var(--gmu-fg-1); line-height: 1.2;
}
.pd-facts dd a { text-decoration: none; }
.pd-facts dd a:hover { color: var(--gmu-red); }

.pd-lead {
  margin: 0; max-width: 64ch;
  font-size: var(--gmu-fs-16); line-height: 1.7; color: var(--gmu-fg-2);
}
@media (min-width: 1024px) { .pd-lead { font-size: 17px; } }
@media (min-width: 1600px) { .pd-lead { font-size: var(--gmu-fs-18); } }

.pd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 479.98px) { .pd-cta .pd-btn { flex: 1 1 100%; } }

/* Product plate. The catalog shots are small (median ~380px, smallest 83px
   wide), so the image is capped at --pd-img-max (set per image from its real
   width) rather than stretched to fill: a 124px source blown up to 320 CSS px
   is 8x on a 3x phone, and reads as broken. The plate keeps a fixed shape so
   the layout does not depend on which picture a page happens to have. */
.pd-plate {
  position: relative; display: grid; place-items: center;
  /* aspect-ratio is only a preferred size: with min-height:auto a tall image
     stretches the box. The minmax(0) track and min-height:0 hold the shape, and
     the image is contained inside it instead. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0;
  aspect-ratio: 4 / 3; padding: 24px;
  background: var(--gmu-paper); border: 1px solid var(--gmu-line);
}
.pd-plate::before {
  content: ''; position: absolute; left: -1px; top: -1px; width: 44px; height: 44px;
  background: var(--gmu-red); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pd-plate__img {
  display: block; width: 100%; height: 100%;
  max-width: min(100%, var(--pd-img-max, 100%)); max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(20, 20, 20, 0.14));
}
.pd-plate__hex { width: min(60%, 220px); height: auto; color: var(--gmu-red-100); }
.pd-plate__hex text { fill: var(--gmu-red); font-family: var(--gmu-font-display); font-weight: 700; }
.pd-plate-wrap figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--gmu-fg-3); }
@media (max-width: 767.98px) { .pd-plate { aspect-ratio: 16 / 10; padding: 16px; } .pd-plate::before { width: 32px; height: 32px; } }

/* ---------- Sections -------------------------------------------------------- */
.pd-sec { padding-block: 48px; }
.pd-sec--alt { background: var(--gmu-bg-2); }
@media (min-width: 1024px) { .pd-sec { padding-block: 72px; } }
.pd-sec__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin-bottom: 24px;
}
.pd-sec__meta { margin: 0; font-size: var(--gmu-fs-14); color: var(--gmu-fg-3); max-width: 60ch; }

.pd-ribbon {
  display: inline-block; max-width: 100%; margin: 0;
  padding: 10px 36px 10px 16px;
  background: var(--gmu-ribbon); color: var(--gmu-fg-inverse);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  font-family: var(--gmu-font-label); font-style: italic; font-weight: 700;
  font-size: var(--gmu-fs-18); line-height: 1.2; letter-spacing: 0.005em;
  text-transform: none;
}

/* ---------- Specs ----------------------------------------------------------- */
.pd-specs {
  display: grid; grid-template-columns: minmax(0, 1fr); margin: 0;
  border-top: 1px solid var(--gmu-line);
}
@media (min-width: 768px) { .pd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.pd-specs > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--gmu-line);
}
.pd-specs dt { font-size: var(--gmu-fs-14); color: var(--gmu-fg-3); }
.pd-specs dd { margin: 0; font-weight: 600; font-size: var(--gmu-fs-14); text-align: right; overflow-wrap: anywhere; }

/* ---------- Order-code table ------------------------------------------------ */
.pd-codes__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px;
}
.pd-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.pd-search .pd-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gmu-fg-3); pointer-events: none; }
.pd-search input {
  width: 100%; min-height: 48px; padding: 10px 14px 10px 42px;
  font: inherit; font-size: var(--gmu-fs-16); color: var(--gmu-fg-1);
  background: var(--gmu-paper); border: 1px solid var(--gmu-ink-4); border-radius: var(--gmu-radius-1);
}
.pd-search input:focus { outline: 2px solid var(--gmu-red); outline-offset: 0; border-color: var(--gmu-red); }
.pd-codes__count { font-size: var(--gmu-fs-14); color: var(--gmu-fg-3); }

.pd-table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--gmu-paper); border: 1px solid var(--gmu-line);
}
/* With the page as the scroll container the header row can stick under the
   site header. Every table on the site fits a desktop width (four columns at
   most), so nothing is lost by dropping the horizontal scroller there. */
@media (min-width: 1024px) { .pd-table-scroll { overflow: visible; } }

.pd-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--gmu-fs-14); font-variant-numeric: tabular-nums;
}
.pd-table thead th {
  position: sticky; top: var(--pd-sticky-top); z-index: 2;
  background: var(--gmu-paper); text-align: left; vertical-align: bottom;
  padding: 12px 16px; border-bottom: 2px solid var(--gmu-line);
  font-size: 12.5px; font-weight: 600; color: var(--gmu-fg-3); white-space: nowrap;
}
.pd-table tbody th, .pd-table td {
  padding: 11px 16px; border-bottom: 1px solid var(--gmu-line);
  text-align: left; vertical-align: top;
}
.pd-table tbody th {
  font-family: var(--gmu-font-mono); font-weight: 600; color: var(--gmu-fg-1);
  white-space: nowrap; background: var(--gmu-paper);
}
.pd-table td { color: var(--gmu-fg-2); }
.pd-table tbody tr:last-child > * { border-bottom: 0; }
.pd-table tbody tr:hover > * { background: var(--gmu-red-50); }
.pd-table tbody tr.is-picked > * { background: var(--gmu-red-50); }
.pd-table tbody tr.is-picked > th { box-shadow: inset 3px 0 0 var(--gmu-red); }
/* Phones and tablets scroll the table sideways; keep the code in view. */
@media (max-width: 1023.98px) {
  .pd-table thead th:first-child, .pd-table tbody th {
    position: sticky; left: 0; z-index: 1;
    box-shadow: 1px 0 0 var(--gmu-line);
  }
  .pd-table thead th:first-child { z-index: 3; }
  .pd-table tbody tr.is-picked > th { box-shadow: inset 3px 0 0 var(--gmu-red), 1px 0 0 var(--gmu-line); }
}
/* The checkbox lands in left padding reserved before the script runs, so the
   code column does not widen (and the table does not shift) when it appears. */
.pd-js .pd-table tbody th, .pd-js .pd-table thead th:first-child { padding-left: 44px; }
.pd-table tbody th { position: relative; }
.pd-pick { cursor: pointer; }
.pd-pick input {
  position: absolute; left: 16px; top: 13px;
  width: 18px; height: 18px; margin: 0; accent-color: var(--gmu-red); cursor: pointer;
}

.pd-codes__empty { margin: 16px 0 0; color: var(--gmu-fg-3); }

/* Long lists collapse — but only with JS running (html.pd-js, set in <head>
   before first paint, so nothing shifts). Every row stays in the DOM: the
   order codes are what these pages rank for, and Google indexes collapsed
   content but never clicks "show all". Without JS, everything shows. */
.pd-js .pd-collapsible:not(.is-open):not(.is-filtering) .pd-extra { display: none; }
.pd-more { margin-top: 12px; }

/* ---------- Models / related ----------------------------------------------- */
.pd-models {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .pd-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pd-models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.pd-model {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 16px 18px; text-decoration: none;
  background: var(--gmu-paper); border: 1px solid var(--gmu-line); border-left: 3px solid var(--gmu-line);
  transition: border-color var(--gmu-dur-base) var(--gmu-ease-out);
}
.pd-model:hover { border-color: var(--gmu-red); }
.pd-model__code { font-family: var(--gmu-font-display); font-weight: 600; font-size: var(--gmu-fs-20); line-height: 1.2; color: var(--gmu-fg-1); overflow-wrap: anywhere; }
.pd-model:hover .pd-model__code { color: var(--gmu-red); }
.pd-model__name { font-size: var(--gmu-fs-14); line-height: 1.45; color: var(--gmu-fg-2); }
.pd-model__meta { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--gmu-fg-3); }

.pd-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pd-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  background: var(--gmu-paper); border: 1px solid var(--gmu-line); border-left: 3px solid var(--gmu-red);
  font-size: var(--gmu-fs-14); color: var(--gmu-fg-1); text-decoration: none;
}
.pd-links a:hover { color: var(--gmu-red); border-color: var(--gmu-red); }

/* ---------- Closing CTA ----------------------------------------------------- */
.pd-band { background: var(--gmu-ribbon); color: var(--gmu-fg-inverse); padding-block: 48px; text-align: center; }
@media (min-width: 1024px) { .pd-band { padding-block: 64px; } }
.pd-band h2 {
  margin: 0; color: inherit; font-family: var(--gmu-font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--gmu-fs-24); line-height: 1.15; letter-spacing: 0.02em;
}
@media (min-width: 768px) { .pd-band h2 { font-size: var(--gmu-fs-32); } }
.pd-band p { margin: 12px auto 28px; max-width: 56ch; color: inherit; opacity: 0.94; }
.pd-band .pd-cta { justify-content: center; margin-top: 0; }

/* ---------- Footer ---------------------------------------------------------- */
.pd-footer__bar {
  background: var(--gmu-ribbon); color: var(--gmu-fg-inverse);
  padding-block: 28px; border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.pd-footer__grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px)  { .pd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pd-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; } }
.pd-footer__item { display: flex; gap: 16px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
.pd-footer__item a { text-decoration: none; }
.pd-footer__item a:hover { text-decoration: underline; }
.pd-footer__ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gmu-paper); color: var(--gmu-red);
}
.pd-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 18px; font-size: 12.5px; color: var(--gmu-fg-3);
}
.pd-footer__base img { height: 24px; width: auto; vertical-align: middle; margin-right: 10px; }
.pd-footer__base nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pd-footer__base nav a { text-decoration: none; padding: 6px 0; }
.pd-footer__base nav a:hover { color: var(--gmu-red); }

/* ---------- Quote bar ------------------------------------------------------- */
/* Fixed to the bottom. On phones it appears once the hero's quote button has
   scrolled away; on desktop only while order codes are ticked. The body gets
   matching bottom padding while it shows, so it never covers the last content. */
.pd-quotebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--gmu-paper); border-top: 1px solid var(--gmu-line);
  box-shadow: 0 -6px 20px rgba(20, 20, 20, 0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0); transition: transform var(--gmu-dur-slow) var(--gmu-ease-out);
}
.pd-quotebar.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform var(--gmu-dur-slow) var(--gmu-ease-out), visibility 0s var(--gmu-dur-slow); }
.pd-quotebar__in { display: flex; align-items: center; gap: 12px; min-height: 68px; padding-block: 10px; }
.pd-quotebar__msg { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--gmu-fs-14); line-height: 1.35; }
.pd-quotebar__msg strong { display: block; font-family: var(--gmu-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-quotebar__msg span { color: var(--gmu-fg-3); font-size: 12.5px; }
.pd-quotebar .pd-btn { flex: none; }
@media (max-width: 479.98px) { .pd-quotebar .pd-btn__label--long { display: none; } }
@media (min-width: 480px) { .pd-quotebar .pd-btn__label--short { display: none; } }
.pd.has-quotebar { padding-bottom: 80px; }

@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after { transition-duration: 0.001ms !important; }
}

@media print {
  .pd-header, .pd-quotebar, .pd-band, .pd-codes__tools, .pd-more, .pd-hero::after, .pd-plate::before { display: none !important; }
  .pd-js .pd-collapsible .pd-extra { display: revert !important; }
  .pd-title, .pd-ribbon { background: none; color: var(--gmu-ink); clip-path: none; padding: 0; }
}