/****** FILE: themes/gamry/css/pages/ProductListing.css *****/
/* ===========================================================================
   Individual product page (ProductListing) — redesign v2
   Translates the Claude Design handoff into theme CSS on the shared --gm-* tokens.
   Full-bleed sections, 40px gutters, credibility-first order.
   (Legacy tabbed-page styles preserved in ProductListing.css.bak.)
   =========================================================================== */

/* Break out of Page.ss's centred #page_type.typography wrapper → full-bleed */
body.ProductListing #main_wrap.wrap { padding: 0; }
body.ProductListing #main_wrap.wrap > #main { max-width: none; width: 100%; margin: 0; }
body.ProductListing #page_type { padding: 0; }
body.ProductListing #page_type.typography { background: none; }

.rd-pd { background: var(--gm-bg, #fbfbfa); color: var(--gm-ink, #17242b); }
.rd-pd :where(a) { text-decoration: none; }

/* shared section rhythm */
.rd-pd-sect { padding: 56px 40px 10px; }
.rd-pd-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 13px; }
.rd-pd-h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink, #17242b); margin: 0; line-height: 1.1; text-wrap: balance; }
.rd-pd-sect-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.rd-pd-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-bottom: 12px; }
.rd-pd-link { font-size: 15px; font-weight: 600; color: var(--gm-navy, #003e69); white-space: nowrap; }
.rd-pd-link:hover { color: var(--gm-navy-hover, #00567f); }

/* ---- Product header ---- */
.rd-pd-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 0; }
.rd-pd-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 30px; }
.rd-pd-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 14px; }
.rd-pd-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: var(--gm-ink, #17242b); margin: 0 0 8px; }
.rd-pd-type { font-size: 16px; color: var(--gm-body, #47535b); }

/* Bioz pill (header) */
.rd-pd-bioz-pill { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--gm-border, #e6eaec); background: #fff; border-radius: 12px; padding: 12px 18px; }
.rd-pd-bioz-pill:hover { border-color: var(--gm-navy, #003e69); }
.rd-pd-star { fill: var(--gm-star, #f0b429); flex-shrink: 0; }
.rd-pd-bioz-label { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--gm-ink, #17242b); }
.rd-pd-bioz-sub { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-top: 3px; }

/* hero grid */
.rd-pd-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: start; padding-bottom: 38px; }
.rd-pd-gallery { min-width: 0; }
.rd-pd-hero-img { position: relative; aspect-ratio: 4/3; border: 1px solid var(--gm-border, #e6eaec); border-radius: 18px; overflow: hidden; background: #e7edf0; }
.rd-pd-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rd-pd-hero-img.is-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a3a52, #0f2231); }
.rd-pd-hero-ph { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 18px; color: rgba(255,255,255,0.75); padding: 0 24px; text-align: center; }
.rd-pd-badge { position: absolute; top: 16px; left: 16px; z-index: 1; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: var(--gm-navy, #003e69); color: #fff; padding: 6px 11px; border-radius: 6px; }
/* flex, not `grid-template-columns: repeat(4, 1fr)`: the hero image now leads this strip
   with its own thumb, so the count is 1 + up to 4 = as many as five. A fixed four-column
   grid wrapped the fifth onto a second row. flex with `flex:1 1 0` keeps however many
   there are on one row, sharing the width equally, which the fixed grid only did at
   exactly four. */
.rd-pd-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.rd-pd-thumb { flex: 1 1 0; min-width: 0; padding: 0; cursor: pointer; aspect-ratio: 1/1; border-radius: 11px; overflow: hidden; border: 2px solid var(--gm-border, #e6eaec); background: #e7edf0 center/cover no-repeat; }
.rd-pd-thumb.is-active { border-color: var(--gm-navy, #003e69); }

/* identity column */
.rd-pd-identity { min-width: 0; }
.rd-pd-lede, .rd-pd-lede p { font-size: 18px; line-height: 1.6; color: var(--gm-body, #47535b); }
.rd-pd-lede { margin: 0 0 22px; max-width: 34em; text-wrap: pretty; }
.rd-pd-lede p { margin: 0 0 12px; }
.rd-pd-lede p:last-child { margin-bottom: 0; }
.rd-pd-features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-pd-features li { display: flex; gap: 11px; align-items: flex-start; }
.rd-pd-check { color: var(--gm-navy, #003e69); margin-top: 3px; flex-shrink: 0; }
.rd-pd-features li span { font-size: 15px; line-height: 1.5; color: var(--gm-body-alt, #485258); }
.rd-pd-apps { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.rd-pd-app { border: 1px solid var(--gm-border-ctl, #d5dcdf); background: #fff; border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 500; color: var(--gm-navy, #003e69); }
.rd-pd-app:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; }
.rd-pd-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 22px; border-top: 1px solid var(--gm-border-soft, #eef1f2); }
.rd-pd-actions .rd-btn { gap: 11px; }
.rd-pd-actions .rd-btn svg { flex-shrink: 0; }
.rd-btn-outline { background: #fff; color: var(--gm-navy, #003e69); border: 1px solid var(--gm-border-ctl, #d5dcdf); }
.rd-btn-outline:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; color: var(--gm-navy, #003e69); text-decoration: none; }

/* ---- Jump nav (sticky) ---- */
.rd-pd-jump { position: sticky; top: var(--rd-pd-headh, 0px); z-index: 30; background: #fff; border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 0 40px; }
.rd-pd-jump-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding: 14px 0; }
.rd-pd-jump-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-right: 6px; }
.rd-pd-jump a { display: inline-flex; align-items: center; gap: 7px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--gm-navy, #003e69); padding: 6px 0; }
.rd-pd-jump a:hover, .rd-pd-jump a.is-current { color: var(--gm-navy-hover, #00567f); }
.rd-pd-jump a.is-current { text-decoration: underline; text-underline-offset: 5px; }
.rd-pd-jump a span { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--gm-faint, #6c7981); }
.rd-pd [id] { scroll-margin-top: var(--rd-pd-anchor, 150px); }

/* ---- Key-spec strip ---- */
.rd-pd-keyspecs { background: var(--gm-dark, #17242b); padding: 38px 40px; }
.rd-pd-keyspecs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 28px; }
.rd-pd-keyspec-v { font-family: 'IBM Plex Mono', monospace; font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.rd-pd-keyspec-k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gm-sky, #7bb8dd); margin-top: 10px; }
.rd-pd-keyspec-n { font-size: 13.5px; line-height: 1.5; color: #aeb9be; margin-top: 7px; }

/* ---- Reviews ---- */
.rd-pd-reviews { padding-top: 44px; }
.rd-pd-reviews-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; }
.rd-pd-review-card { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 28px 30px; }
.rd-pd-quote { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink, #17242b); margin: 0 0 16px; line-height: 1.2; text-wrap: pretty; }
.rd-pd-review-body { font-size: 16px; line-height: 1.6; color: var(--gm-body-alt, #485258); margin: 0 0 20px; max-width: 44em; text-wrap: pretty; }
.rd-pd-review-meta { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 18px; border-top: 1px solid var(--gm-border-soft, #eef1f2); }
.rd-pd-meta-k { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-bottom: 5px; }
.rd-pd-meta-v { font-size: 15px; font-weight: 500; color: var(--gm-ink, #17242b); }
.rd-pd-review-agg { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; }
.rd-pd-agg-row { display: flex; align-items: baseline; gap: 8px; }
.rd-pd-agg-num { font-family: 'IBM Plex Mono', monospace; font-size: 44px; font-weight: 500; letter-spacing: -0.03em; color: var(--gm-ink, #17242b); line-height: 1; }
.rd-pd-agg-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--gm-faint, #6c7981); }
.rd-pd-agg-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin: 10px 0 16px; }

/* ---- Bioz citations ---- */
.rd-pd-bioz-card { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px 24px; overflow: hidden; margin-top: 30px; }
.rd-pd-bioz-widget { min-height: 80px; }
.rd-pd-bioz-fallback { font-size: 15.5px; line-height: 1.6; color: var(--gm-body-alt, #485258); margin: 0; }
.rd-pd-bioz-foot { font-size: 13.5px; color: var(--gm-faint, #6c7981); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gm-border-soft, #eef1f2); }

/* ---- System highlights ---- */
.rd-pd-highlights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.rd-pd-highlights-grid > * { min-width: 0; }
/* No accuracy contour plot for this product: the card is not emitted at all, so the
   two-column grid would leave the prose pinned to a half-width column beside an empty
   one. Collapse to a single column instead. Paired with the <% if %> in
   templates/ProductListing.ss - do not remove one without the other. */
.rd-pd-highlights-grid--noplot { grid-template-columns: 1fr; }
.rd-pd-highlights-prose { max-width: 40em; }
.rd-pd-highlights-prose img { max-width: 100%; height: auto; }
.rd-pd-highlights-prose :where(table) { max-width: 100%; }
/* Cell padding, because nothing else separates the columns any more. These spec tables
   arrived from the CMS with per-cell pixel widths (<td style="width: 225.844px">), and
   that geometry was the only thing holding the label off its value. Stripping the widths
   so the table could reflow left "Max internal power dissipation350 W" touching. Padding
   is the right home for it: it survives any column count and any content length. */
.rd-pd-highlights-prose :where(table) :where(td, th) { padding: 3px 22px 3px 0; vertical-align: top; }
.rd-pd-highlights-prose :where(table) :where(td, th):last-child { padding-right: 0; }
.rd-pd-highlights-prose :where(h2, h3, h4) { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 22px 0 10px; }
.rd-pd-highlights-prose :where(h2, h3, h4):first-child { margin-top: 0; }
.rd-pd-highlights-prose p { font-size: 16.5px; line-height: 1.65; color: var(--gm-body-alt, #485258); margin: 0 0 14px; }
.rd-pd-acp-card { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 16px; }
.rd-pd-acp-img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 10px; display: block; }
.rd-pd-acp-ph { width: 100%; aspect-ratio: 4/3; border-radius: 10px; background: linear-gradient(135deg, #eef1f2, #dde4e6); display: flex; align-items: center; justify-content: center; }
.rd-pd-acp-ph span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); }
.rd-pd-acp-cap { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-top: 12px; line-height: 1.4; }

/* ---- Techniques + other details ---- */
.rd-pd-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; margin-top: 26px; }
.rd-pd-tech { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 14px; padding: 20px 22px; }
.rd-pd-tech-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--gm-navy, #003e69); margin-bottom: 7px; }
.rd-pd-tech-desc { font-size: 14.5px; line-height: 1.55; color: var(--gm-body-alt, #485258); }
.rd-pd-otherdetails { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 14px; padding: 22px 24px; margin-top: 18px; }
.rd-pd-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px 30px; }
.rd-pd-detail { display: flex; gap: 10px; align-items: flex-start; }
.rd-pd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gm-navy, #003e69); margin-top: 8px; flex-shrink: 0; }
.rd-pd-detail-name { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--gm-ink, #17242b); }
.rd-pd-detail-desc { font-size: 14.5px; line-height: 1.5; color: var(--gm-body-alt, #485258); margin-top: 3px; }

/* ---- Full specifications ---- */
.rd-pd-spec-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.rd-pd-spec-tab { background: #fff; border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 9px; padding: 11px 18px; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--gm-body, #47535b); }
.rd-pd-spec-tab.is-active { background: var(--gm-navy, #003e69); border-color: var(--gm-navy, #003e69); color: #fff; }
/* Multi-column, not grid. As a grid these cards sat in ROWS, so the row was as tall as its
   tallest card and the short ones left a hole beside it. On the Kolibrik pages the
   "Acquisition methods" card runs to ~15 lines while "Electrometer & potential" has two
   rows, and columns two and three ended less than half way down the section. Multi-column
   packs the cards vertically and lets the browser balance the heights, which is what a
   masonry of independent spec cards actually wants. `columns: 340px 3` keeps the same
   breakpoints the old minmax() gave: 3 up when there is room, fewer as it narrows. */
.rd-pd-spec-grid { columns: 340px 3; column-gap: 20px; }
.rd-pd-spec-grid > .rd-pd-spec-card { break-inside: avoid; margin: 0 0 20px; }
.rd-pd-spec-card { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; overflow: hidden; }
.rd-pd-spec-card[hidden] { display: none; }
.rd-pd-spec-card-head { padding: 16px 22px; border-bottom: 1px solid var(--gm-border-soft, #eef1f2); background: var(--gm-thead, #f7fafc); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--gm-ink, #17242b); }
.rd-pd-spec-table { width: 100%; border-collapse: collapse; }
.rd-pd-spec-table tr { background: #fff; }
.rd-pd-spec-table tr.is-odd { background: var(--gm-zebra, #fbfcfc); }
.rd-pd-spec-table th, .rd-pd-spec-table td { padding: 13px 22px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); vertical-align: baseline; }
.rd-pd-spec-table th { text-align: left; font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--gm-body, #47535b); }
/* Values left-aligned against a fixed label column, not flushed right. Right alignment
   reads well for "Yes" or "IP20" and badly for anything that wraps: the Sampling and
   Acquisition values run to four and fifteen lines, and right-flushing them gives a ragged
   LEFT edge on the side the eye scans down. A consistent value column costs the flush-right
   look on short rows and makes every multi-line row legible. */
.rd-pd-spec-table th { width: 42%; }
.rd-pd-spec-table td { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--gm-ink, #17242b); }
.rd-pd-spec-vline { display: block; }
.rd-pd-spec-vline + .rd-pd-spec-vline { margin-top: 3px; }
.rd-pd-spec-note { font-size: 13px; color: var(--gm-faint, #6c7981); margin-top: 14px; }
.rd-pd-spec-note code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
/* Styled fallback for legacy/list spec content that doesn't parse into the card
   grid — keeps ALL the information, presented as a readable, organized reference
   block (used by both the main template and the legacy archival template). */
.rd-pd-spec-legacy, .rd-pd-legacy-doc { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px 26px; overflow-x: auto; font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.7; color: var(--gm-body-alt, #485258); }
.rd-pd-spec-legacy :where(h2, h3, h4, h5, h6), .rd-pd-legacy-doc :where(h2, h3, h4, h5, h6) { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--gm-border-soft, #eef1f2); letter-spacing: 0; text-transform: none; }
.rd-pd-spec-legacy :where(h2, h3, h4, h5, h6):first-child, .rd-pd-legacy-doc :where(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.rd-pd-spec-legacy p, .rd-pd-legacy-doc p { margin: 0 0 10px; }
.rd-pd-spec-legacy p:empty, .rd-pd-legacy-doc p:empty { display: none; }
.rd-pd-spec-legacy ul, .rd-pd-legacy-doc ul { margin: 0 0 10px; padding-left: 20px; }
.rd-pd-spec-legacy li, .rd-pd-legacy-doc li { margin: 0 0 5px; }
.rd-pd-spec-legacy a, .rd-pd-legacy-doc a { color: var(--gm-navy, #003e69); }
.rd-pd-spec-legacy a:hover, .rd-pd-legacy-doc a:hover { color: var(--gm-navy-hover, #00567f); }
.rd-pd-spec-legacy img, .rd-pd-legacy-doc img { max-width: 100%; height: auto; }
.rd-pd-spec-legacy table, .rd-pd-legacy-doc table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.rd-pd-spec-legacy th, .rd-pd-spec-legacy td, .rd-pd-legacy-doc th, .rd-pd-legacy-doc td { padding: 10px 14px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); text-align: left; vertical-align: top; }
.rd-pd-spec-legacy th, .rd-pd-legacy-doc th { font-weight: 600; color: var(--gm-ink, #17242b); }

/* ---- Resources ---- */
.rd-pd-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: start; }
.rd-pd-res-col { background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 24px; }
.rd-pd-res-links { display: flex; flex-direction: column; }
.rd-pd-res-link { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); }
.rd-pd-res-link:last-child { border-bottom: 0; }
.rd-pd-res-name { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--gm-ink, #17242b); }
.rd-pd-res-link:hover .rd-pd-res-name { color: var(--gm-navy, #003e69); }
.rd-pd-res-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-faint, #6c7981); white-space: nowrap; }

/* ---- Back to top ---- */
.rd-pd-backtop { display: flex; justify-content: center; padding: 52px 40px 60px; }
.rd-pd-backtop a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: #fff; color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; }
.rd-pd-backtop a:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; }

/* ===========================================================================
   Legacy / discontinued product page (archival treatment)
   =========================================================================== */
.rd-lg .rd-pd-head { padding-bottom: 40px; }
.rd-lg-status { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: #7a5b00; background: #fdf3d7; border: 1px solid #f0e0a8; border-radius: 6px; padding: 5px 11px; margin-bottom: 14px; }
.rd-lg .rd-pd-title { margin-bottom: 10px; }
.rd-lg-replaced { font-size: 17px; line-height: 1.5; color: var(--gm-ink, #17242b); margin: 0 0 4px; }
.rd-lg-replaced a { font-weight: 600; color: var(--gm-navy, #003e69); }
.rd-lg-replaced a:hover { color: var(--gm-navy-hover, #00567f); }
.rd-lg-noreplace { color: var(--gm-muted, #5f6b72); font-weight: 400; }

.rd-lg-hero { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; margin-top: 30px; }
.rd-lg-hero > * { min-width: 0; }
.rd-lg-copy, .rd-lg-copy p { font-size: 16.5px; line-height: 1.65; color: var(--gm-body-alt, #485258); }
.rd-lg-copy p { margin: 0 0 14px; }
.rd-lg-copy img { max-width: 100%; height: auto; }
.rd-lg-archival-note { font-size: 14px; color: var(--gm-muted, #5f6b72); font-style: italic; border-left: 2px solid var(--gm-border, #e6eaec); padding-left: 14px; margin-top: 18px; }
.rd-lg-img { border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; overflow: hidden; background: #fff; }
.rd-lg-img img { width: 100%; height: auto; display: block; }

.rd-lg-support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: start; }
.rd-lg-support-card { display: flex; flex-direction: column; }
.rd-lg-support-text { font-size: 15px; line-height: 1.55; color: var(--gm-body-alt, #485258); margin: 0 0 18px; }
.rd-lg-support-card .rd-btn { align-self: flex-start; }

@media (max-width: 900px) {
	.rd-lg-hero { grid-template-columns: 1fr; gap: 28px; }
	.rd-lg-img { max-width: 360px; }
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
	.rd-pd-hero, .rd-pd-reviews-grid, .rd-pd-highlights-grid { grid-template-columns: 1fr; }
	.rd-pd-hero { gap: 34px; }
}
@media (max-width: 640px) {
	.rd-pd-head { padding: 20px 20px 0; }
	.rd-pd-sect { padding: 40px 20px 6px; }
	.rd-pd-keyspecs, .rd-pd-jump { padding-left: 20px; padding-right: 20px; }
	.rd-pd-h2 { font-size: 26px; }
	.rd-pd-review-card { padding: 22px 20px; }
}

/* Product video section (2026-08). Only rendered when a Video is actually linked to the
   product via Video.ProductPageID — see GamryVideoExtension. The embed comes from the
   gallery's EmbedCode field, so its width/height attributes are unknown: the frame forces a
   responsive 16:9 box rather than trusting them. */
.rd-pd-video-item { margin: 0 0 26px; max-width: 900px; }
.rd-pd-video-item:last-child { margin-bottom: 0; }
.rd-pd-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0f1b21; border-radius: 14px; overflow: hidden; }
.rd-pd-video-frame iframe,
.rd-pd-video-frame object,
.rd-pd-video-frame embed,
.rd-pd-video-frame video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; }
.rd-pd-video-frame > *:not(iframe):not(object):not(embed):not(video) { max-width: 100%; }
.rd-pd-video-cap { font-size: 14.5px; color: var(--gm-muted, #5f6b72); margin-top: 10px; }
.rd-lg-actions { margin: 18px 0 0; }

/* Restored body prose + authored tab sections (2026-08-04). Reuses the same prose treatment as
   the archival template's .rd-pd-legacy-doc so restored content matches the redesign rather
   than reverting to legacy .typography styling. */
.rd-pd-prose { max-width: 62em; }
.rd-pd-prose p { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; }
.rd-pd-prose p:last-child { margin-bottom: 0; }
.rd-pd-prose p:empty { display: none; }
.rd-pd-prose a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-pd-prose a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; }
.rd-pd-prose h3, .rd-pd-prose h4 { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 26px 0 10px; }
.rd-pd-prose h3:first-child, .rd-pd-prose h4:first-child { margin-top: 0; }
.rd-pd-prose ul, .rd-pd-prose ol { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; padding-left: 1.4em; }
.rd-pd-prose li { margin: 0 0 7px; }
.rd-pd-prose strong { color: var(--gm-ink, #17242b); }
/* ...but NOT inside a link. Editors bold links in the CMS, which nests <strong> in <a>;
   the rule above then repaints them ink and they stop looking like links. Same defect
   found and fixed on .rd-cp-prose (see GamryContentPage.css). */
.rd-pd-prose a strong, .rd-pd-prose a b { color: inherit; }
.rd-pd-prose sub, .rd-pd-prose sup { font-size: 0.7em; line-height: 0; }
.rd-pd-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.rd-pd-prose iframe { max-width: 100%; border: 0; border-radius: 12px; }
.rd-pd-prose [width] { max-width: 100%; }
/* Legacy tab tables (part numbers, included items) scroll rather than push the page. */
.rd-pd-prose table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; display: block; overflow-x: auto; }
.rd-pd-prose table tbody { display: table; width: 100%; }
.rd-pd-prose th, .rd-pd-prose td { padding: 10px 14px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); text-align: left; vertical-align: top; }
.rd-pd-prose th { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--gm-ink, #17242b); }
/* Legacy CMS image wrappers carry an inline width (e.g. style="width:600px") that the
   [width]-attribute rule above cannot reach — 600px inside a 390px viewport overflowed by
   230px on LPI1010. Neutralise the inline width and let the figure scale. */
.rd-pd-prose .captionImage,
.rd-pd-prose .captionImage.center,
.rd-pd-prose figure { width: auto !important; max-width: 100%; margin-inline: 0; }
.rd-pd-prose .captionImage img, .rd-pd-prose figure img { max-width: 100%; height: auto; }
.rd-pd-prose .caption { font-size: 13.5px; color: var(--gm-faint, #6c7981); margin-top: 6px; }
/* Floated inline images collapse to full width on narrow screens. */
@media (max-width: 700px) {
	.rd-pd-prose img[align], .rd-pd-prose img.left, .rd-pd-prose img.right,
	.rd-pd-prose .captionImage { float: none !important; width: auto !important; margin: 0 0 16px; }
}

/* ===== Accuracy contour plot: click to enlarge (inline overlay, no new tab) =====
   The trigger reset, the hover hint and the overlay itself now live in
   css/components/image-zoom.css, shared with the generic content pages
   (the Accuracy Contour Plot on /leader-in-eis/ uses the same overlay).
   ProductListingController requires it; only the product-specific pieces
   are left here. */

/* Hero image shares the ACP enlarge affordance. The button must fill the 4:3 frame
   so `.rd-pd-hero-img img { width:100%; height:100% }` still resolves against it. */
.rd-pd-hero-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.rd-pd-hero-zoom:focus-visible { outline: 3px solid var(--gm-navy, #003e69); outline-offset: -3px; }

/* Application pill with no matching application page — same look, no link affordance. */
.rd-pd-app--plain { cursor: default; }