/* =====================================================================
   KR Installations — AS FD 75 TEST PROTOTYPE (isolated, noindex)
   Scoped to #page-test-as-fd-75 (listing) and #page-as-fd-75 (detail).
   Loads after base.css + style.css. Touches no production selector.
   ===================================================================== */

/* ─── SKIP LINK ─── */
.tp-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 2000;
  transform: translateY(-200%);
  background: var(--color-primary);
  color: #F8F7F4;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease;
}
.tp-skip:focus { transform: translateY(0); }
[data-theme='dark'] .tp-skip { color: #1A1510; }

/* ─── REVIEW BANNER ─── */
.tp-banner {
  /* Fixed .site-header measures 82px tall at every breakpoint; 84px keeps the
     review flag clear of it instead of tucking underneath. */
  margin-top: 84px;
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-3);
}
.tp-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
/* --tp-accent-ink: darkened bronze so small uppercase text clears WCAG AA;
   plain --color-accent only reaches ~3.9:1 at these sizes. */
.tp-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-accent-ink);
  white-space: nowrap;
}
.tp-banner-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 78ch;
  margin: 0;
}

/* ─── SHARED SMALL PARTS ─── */
.tp-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tp-crumb a { color: var(--color-text-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.tp-crumb a:hover { color: var(--color-accent); border-bottom-color: currentColor; }
.tp-crumb span[aria-current] { color: var(--color-text); }
.tp-crumb span[aria-hidden] { opacity: 0.45; }

.tp-sch-logo {
  width: 104px;
  height: auto;
  filter: brightness(0.17);   /* supplied mark is white artwork; unmodified file */
}
[data-theme='dark'] .tp-sch-logo { filter: none; opacity: 0.82; }

.tp-arrow { flex: none; }

.tp-textlink {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Small uppercase bronze text uses the darkened accent ink so it clears
     WCAG AA 4.5:1 on the cream, surface-2 and offset fills alike. */
  color: var(--tp-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.tp-textlink:hover { color: var(--color-accent-active); }
[data-theme='dark'] .tp-textlink:hover { color: var(--color-accent); }

.tp-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 80ch;
  margin-top: var(--space-6);
}

.tp-attr {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 86ch;
  margin-top: var(--space-5);
}
.tp-attr a { color: var(--tp-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* The standalone `.tp-bookmark` chip was replaced in round 11 by the
   Bookmark / Compare / Details action row (`.tp-act`, further down); its rules
   were removed rather than left dead. */

/* =====================================================================
   PAGE 1 — DOORS / BIFOLD DOORS LISTING
   ===================================================================== */

#page-test-as-fd-75 { background: var(--color-bg); }

.tp-cat { padding-block: var(--space-10) var(--space-5); }
.tp-cat-label {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tp-cat-title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 1.8vw, 2.85rem);
  line-height: 1.06;
  color: var(--color-text);
}
.tp-cat-rule { margin-block: var(--space-4); }
.tp-lead {
  font-size: 1rem;          /* 16px floor kept for readability */
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 56ch;
}

.tp-listing { padding-block: 0 var(--space-12); }

/* ── Product tile ── */
.tp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw, var(--space-6));
}
[data-theme='dark'] .tp-card { background: var(--color-surface); }

.tp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.tp-card-ident { display: flex; flex-direction: column; gap: var(--space-3); }
.tp-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Sized so "Schuco Folding Sliding System AS FD 75" holds a single line from
     ~700px upward without dropping below a legible display size. */
  font-size: clamp(1.35rem, 2.45vw, 2.3rem);
  line-height: 1.15;
  color: var(--color-text);
  white-space: nowrap;
}
.tp-card-title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.tp-card-title a:hover { color: var(--color-accent); border-bottom-color: currentColor; }

.tp-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(200px, 0.72fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  padding-top: var(--space-8);
  align-items: start;
}

/* Media column — two aligned images */
.tp-card-media { display: grid; gap: var(--space-5); }
.tp-shot { margin: 0; }
.tp-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  display: block;
}
.tp-shot figcaption,
.tp-detail-fig figcaption,
.tp-gal-fig figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.tp-kr-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface-2);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: none;
}
.tp-kr-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* Award + quick access column */
.tp-card-side { display: grid; gap: var(--space-8); }
.tp-side-title {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Listing card: marks sit in a single row of intrinsically sized logos, as on the
   Schueco reference tile. Names stay in the accessibility tree via .tp-award-label. */
.tp-awards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  max-width: 320px;
}
.tp-award { display: flex; flex-direction: column; gap: var(--space-2); }
.tp-awards:not(.tp-awards--lg) .tp-award-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.tp-awards:not(.tp-awards--lg) .tp-award img { width: auto; max-width: 84px; }
.tp-award img {
  width: 100%;
  height: 56px;          /* aspect ratio preserved; marks never cropped or recoloured */
  object-fit: contain;
  object-position: center;
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 6px;
}
.tp-award-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.tp-awards--lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-8); margin-top: var(--space-2); max-width: 620px; }
.tp-awards--lg .tp-award { display: grid; grid-template-rows: auto 1fr; }
.tp-awards--lg .tp-award img { height: 104px; padding: var(--space-4); }
.tp-awards--lg .tp-award-label { font-size: 0.72rem; }

.tp-quick { display: grid; gap: 2px; }
.tp-quick a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, gap 0.16s ease;
}
.tp-quick a:hover { color: var(--color-accent); gap: var(--space-4); }
.tp-quick a:hover span { border-bottom: 1px solid currentColor; }
.tp-quick svg { color: var(--color-accent); }
/* Keep the arrow on the first text line when a label wraps (2-column layout at
   768px wraps "Technical information"): line-height is 1.6em, arrow box is 14px. */
.tp-card-cols .tp-quick a { align-items: flex-start; }
.tp-card-cols .tp-quick a > svg { margin-top: calc(0.8em - 7px); }

.tp-card-foot {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.tp-cta { text-decoration: none; }
.tp-cta:hover { color: #1A1510; }

/* =====================================================================
   PAGE 2 — LOCAL KR PRODUCT DETAIL PAGE
   ===================================================================== */

#page-as-fd-75 { background: var(--color-bg); }

.tp-prod-head { padding-block: var(--space-12) var(--space-6); }
.tp-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}
.tp-back:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* `.tp-prod-title-row` / `.tp-prod-title` were retired in round 11: the detail
   page title now lives inside the site-standard `.page-hero` panel. */

/* ── Anchor navigation ── */
.tp-anchornav {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  backdrop-filter: saturate(1.1) blur(6px);
}
.tp-anchornav-list {
  display: flex;
  gap: 0;
  overflow-x: auto;
  /* 9 sections: tighten tracking/padding from tablet up so the full set is
     visible on desktop rather than silently scrolling out of view. */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tp-anchornav-list::-webkit-scrollbar { height: 3px; }
.tp-anchornav-list::-webkit-scrollbar-thumb { background: var(--color-border); }
.tp-anchor {
  display: block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-4) var(--space-5);
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
@media (min-width: 900px) {
  .tp-anchor { padding-inline: 10px; font-size: 0.7rem; letter-spacing: 0.06em; }
}
.tp-anchor:hover { color: var(--color-text); }
.tp-anchor.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ── Spotlight ── */
.tp-spotlight { padding-block: var(--space-16) var(--space-12); }
.tp-spotlight-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  align-items: center;
}
.tp-spot-media { position: relative; }
.tp-spot-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.tp-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(248,247,244,0.92);
  border: 1px solid var(--color-accent);
  color: #2A2520;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: background 0.18s ease, transform 0.18s ease;
}
.tp-hotspot { text-decoration: none; }
.tp-hotspot:hover,
.tp-hotspot:focus-visible,
.tp-hotspot.is-active {
  background: var(--color-accent);
  color: #F8F7F4;
  transform: translate(-50%, -50%) scale(1.08);
}

.tp-spot-panel {
  position: relative;
  z-index: 2;
  margin-left: clamp(-72px, -4vw, -24px);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  box-shadow: var(--shadow-md);
}
.tp-spot-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tp-spot-title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  color: var(--color-text);
}
.tp-spot-intro {
  margin-top: var(--space-4);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.tp-spot-list { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.tp-spot-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
  max-width: none;
}
.tp-spot-item.is-active { background: var(--color-accent-highlight, rgba(140,110,69,0.12)); }
[data-theme='dark'] .tp-spot-item.is-active { background: rgba(140,110,69,0.18); }
.tp-spot-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--tp-accent-ink);
  color: var(--tp-accent-ink);
  font-size: 0.74rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* ── Generic detail sections ── */
.tp-section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); scroll-margin-top: 72px;  /* + html scroll-padding-top 64px = clears header + sticky nav */ }
.tp-section--alt { background: var(--color-surface-2); }
.tp-section:focus { outline: none; }
.tp-sec-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tp-accent-ink);
}
.tp-sec-title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
  line-height: 1.08;
  color: var(--color-text);
}
.tp-sec-rule { margin-block: var(--space-6); }
.tp-sec-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 74ch;
}

/* Planning benefits */
.tp-benefits {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8) var(--space-10);
}
.tp-benefit { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.tp-benefit h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--color-text);
}
.tp-benefit p, .tp-highlight p {
  margin-top: var(--space-3);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Construction figures + highlights */
.tp-detail-figs {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.tp-detail-fig { margin: 0; }
.tp-detail-fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #ECEAE5;
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
[data-theme='dark'] .tp-detail-fig img { background: #E4E1DA; }

.tp-highlights {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-8) var(--space-10);
}
.tp-highlight { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.tp-highlight h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--color-text);
}

/* Gallery */
.tp-gallery {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.tp-gal-fig { margin: 0; }
.tp-gal-fig img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

/* Technical tables */
.tp-tech-grid {
  margin-top: var(--space-8);
  display: grid;
  /* min() keeps the 320px two-up threshold on larger screens while allowing the
     track to shrink below 320px on a 320px-wide phone, where a hard 320px floor
     made the grid wider than the 272px content box. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-10);
}
.tp-tech-title {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-accent-ink);
  margin-bottom: var(--space-3);
}
.tp-tech-table { width: 100%; }
.tp-tech-table th,
.tp-tech-table td {
  text-align: left;
  vertical-align: top;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.tp-tech-table th { font-weight: 600; color: var(--color-text); width: 55%; padding-right: var(--space-4); }
.tp-tech-table td { color: var(--color-text-muted); }

/* Gated documents */
.tp-gated {
  margin-top: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-5), 2.5vw, var(--space-8));
  display: grid;
  gap: var(--space-4);
  max-width: 80ch;
}
.tp-gated p { font-size: 0.92rem; line-height: 1.7; color: var(--color-text-muted); }
.tp-gated-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-right: var(--space-3);
}
.tp-gated-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.tp-gated-actions .btn { text-decoration: none; }

/* Specification text columns */
.tp-spec-cols {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-10);
}
.tp-spec-h {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-accent-ink);
  margin-bottom: var(--space-3);
  margin-top: var(--space-8);
}
.tp-spec-col > .tp-spec-h:first-child { margin-top: 0; }
.tp-spec-list { display: grid; gap: var(--space-3); }
.tp-spec-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.tp-spec-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

/* Brochures */
.tp-docs {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6);
}
.tp-doc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.tp-doc h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--color-text);
}
.tp-doc p { margin-top: var(--space-2); font-size: 0.84rem; line-height: 1.6; color: var(--color-text-muted); }

.tp-end .tp-sec-title { margin-top: 0; }
.tp-end .tp-sec-lead { margin-top: var(--space-5); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1080px) {
  .tp-card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-card-side { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-10); }
  .tp-spotlight-inner { grid-template-columns: 1fr; gap: 0; }
  .tp-spot-panel { margin-left: 0; margin-top: -40px; margin-inline: clamp(var(--space-4), 4vw, var(--space-10)); }
}

@media (max-width: 900px) {
  .tp-anchornav { top: 64px; }
  .tp-detail-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .tp-card-grid { grid-template-columns: 1fr; padding-top: var(--space-6); }
  .tp-card-side { grid-template-columns: 1fr; }
  .tp-card-media { grid-template-columns: 1fr; }
  .tp-detail-figs { grid-template-columns: 1fr; }
  .tp-tech-grid { gap: var(--space-8); }
}

@media (max-width: 560px) {
  .tp-gallery { grid-template-columns: 1fr; }
  .tp-spec { flex-direction: column; gap: 2px; align-items: flex-start; }
  .tp-spec dd { text-align: left; }
  .tp-tech-table th { width: 58%; }
  .tp-tech-table th, .tp-tech-table td { font-size: 0.78rem; }
  .tp-cta,
  .tp-gated-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding-inline: var(--space-4);
  }
  .tp-gated-actions { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .tp-gated-actions .tp-textlink { text-align: center; }
  .tp-hotspot { width: 28px; height: 28px; font-size: 0.7rem; }
  .tp-awards--lg { gap: var(--space-6); }
  .tp-awards--lg .tp-award img { height: 62px; }
}

/* =====================================================================
   CONTRAST SCOPING (this prototype only — shared rules untouched)
   Light-mode bronze on cream measures below 4.5:1 for small bold labels,
   so accent CTAs and the back link use the darker approved bronze tones.
   ===================================================================== */
#page-test-as-fd-75 .btn-accent,
#page-as-fd-75 .btn-accent {
  background: var(--color-accent-active, #664E2E);
  color: #F8F7F4;
}
#page-test-as-fd-75 .btn-accent:hover,
#page-as-fd-75 .btn-accent:hover {
  background: var(--color-accent-hover, #7A5E38);
  color: #F8F7F4;
}
[data-theme='dark'] #page-test-as-fd-75 .btn-accent,
[data-theme='dark'] #page-as-fd-75 .btn-accent,
[data-theme='dark'] #page-test-as-fd-75 .btn-accent:hover,
[data-theme='dark'] #page-as-fd-75 .btn-accent:hover,
[data-theme='dark'] #page-test-as-fd-75 .btn-primary,
[data-theme='dark'] #page-as-fd-75 .btn-primary,
[data-theme='dark'] #page-test-as-fd-75 .btn-primary:hover,
[data-theme='dark'] #page-as-fd-75 .btn-primary:hover {
  background: #7A5E38;   /* approved bronze hover tone — cream label clears AA */
  color: #F8F7F4;
}
.tp-back { color: #7A5E38; }
[data-theme='dark'] .tp-back { color: var(--color-accent); }
.tp-banner-text { color: #5C574F; }

/* Accessible bronze ink for small text. Both values are KR brand tokens:
   #7A5E38 = accent-hover (light), #AC8E65 = accent-active (dark). */
:root { --tp-accent-ink: #7A5E38; }
[data-theme='dark'] { --tp-accent-ink: #AC8E65; }
[data-theme='dark'] .tp-banner-text { color: var(--color-text-muted); }

/* =====================================================================
   KR PRODUCT OVERVIEW — client-supplied description, reproduced verbatim.
   Listing: directly under the product title, above imagery/specs.
   Detail:  directly under the H1, above the anchor nav and hero.
   Labelled as KR's own overview (not a Schüco specification).
   ===================================================================== */
.tp-overview {
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-offset);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tp-overview-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-active, #664E2E);
}
[data-theme='dark'] .tp-overview-label { color: var(--color-accent-active); }  /* brighter bronze clears AA on the offset surface */
.tp-overview-text {
  margin: 0;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
}
.tp-overview-text sub { font-size: 0.72em; }

/* Detail page — larger, sits under the H1 as the page's opening statement */
.tp-overview--lg {
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding: var(--space-6);
}
.tp-overview--lg .tp-overview-text { font-size: 1.1875rem; line-height: 1.6; max-width: 74ch; }

@media (max-width: 640px) {
  .tp-overview,
  .tp-overview--lg { padding: var(--space-4) var(--space-5); }
  .tp-overview-text { font-size: 1rem; }
  .tp-overview--lg .tp-overview-text { font-size: 1.0625rem; }
}
/* "Uw" kept on the baseline — the brief writes it inline, so no subscript drop */
.tp-uw { font-size: 0.82em; }

/* =====================================================================
   CONFIGURABLE OPTIONS — icon row on the listing tile.
   Deliberately secondary to the KR product overview and the two images:
   small marks, one short label + one value each, no marketing copy.
   Icon language matches the site's .wd-sci-tile-icon (24px viewBox,
   currentColor stroke at 1.6). Every item carries a full screen-reader
   label; the shared qualifier sits directly beneath the grid.
   ===================================================================== */
.tp-caps {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.tp-caps-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Base grid; the boxed-cell rhythm and column counts live in the
   `.tp-panel .tp-caps-grid` block further down (mirrors .wd-hcard-spec on the
   Windows & Doors page). */
.tp-caps-grid {
  display: grid;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.tp-cap { align-items: center; }
.tp-cap-icon {
  display: block;
  color: var(--color-primary);
  opacity: 0.9;
}
[data-theme='dark'] .tp-cap-icon { color: var(--color-text); opacity: 0.86; }
.tp-cap-copy { display: grid; gap: 2px; min-width: 0; }
.tp-cap-name {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tp-cap-value {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text);
}
.tp-cap-value sub { font-size: 0.8em; }
.tp-caps-note {
  margin: 0;
  max-width: 78ch;
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

@media (max-width: 1100px) {
  .tp-caps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tp-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .tp-cap { gap: var(--space-2); }
  .tp-cap-icon svg { width: 22px; height: 22px; }
}

/* =====================================================================
   IMAGE-LED HERO — the exact client-supplied primary asset, shown
   uncropped-in-spirit (object-fit: cover on a 4:3 frame, centred), beside
   a charcoal panel with restrained bronze detailing. The panel carries
   category, one statement and three key figures only — it never repeats
   the KR product overview or the technical table.
   ===================================================================== */
.tp-hero { padding-block: var(--space-10) var(--space-6); }
.tp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}
/* `.tp-hero-media` was retired in round 11 - the approved photograph now carries
   the `.page-hero` panel at the top of the detail page, so the key-figures band
   below it holds no image and its figure rules were removed. */
.tp-hero-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: #2A2520;                      /* KR warm charcoal, both themes */
  border-radius: var(--radius-md, 6px);
  border-top: 2px solid var(--color-accent);
  color: #F8F7F4;
}
.tp-hero-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D9C4A6;                           /* light bronze — measured 8.96:1 on charcoal */
}
.tp-hero-statement {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1.25;
  color: #F8F7F4;
}
.tp-hero-figures {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(248, 247, 244, 0.16);
}
.tp-hero-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.tp-hero-figures dt {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C9C2B8;
}
.tp-hero-figures dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #E8E4DC;
  white-space: nowrap;
}
.tp-hero-num {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  color: #D9C4A6;
  margin-right: 0.2em;
}
.tp-hero-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D9C4A6;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 196, 166, 0.4);
  padding-bottom: 2px;
  align-self: flex-start;
}
.tp-hero-link:hover { color: #F8F7F4; border-bottom-color: #F8F7F4; }
.tp-hero-link svg { stroke: currentColor; }
/* The global :focus-visible ring is var(--color-primary) = #2A2520, which is the
   exact charcoal of this panel — the ring measured 1.00:1 against it and was
   invisible in light mode. Scoped override only, so production focus is unchanged. */
.tp-hero-link:focus-visible {
  outline: 2px solid #F8F7F4;               /* cream on charcoal — 13.5:1 */
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .tp-hero-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .tp-hero-panel { padding: var(--space-6); }
}
@media (max-width: 620px) {
  .tp-hero { padding-block: var(--space-6) var(--space-4); }
  .tp-hero-panel { padding: var(--space-5); }
  .tp-hero-figure { gap: var(--space-3); }
  .tp-hero-num { font-size: 1.35rem; }
}
/* Long option names (e.g. "Configuration") must wrap rather than clip */
.tp-cap-name,
.tp-cap-value { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 620px) {
  .tp-cap-name { font-size: 0.64rem; letter-spacing: 0.06em; }
  .tp-cap-value { font-size: 0.74rem; }
}


/* =====================================================================
   SUMMARY TILE — post-simplification layout.
   The specification column has been removed from this page entirely; the
   full technical table lives on as-fd-75.html. What remains is: header,
   KR product overview, option icons, two aligned images, awards, quick
   access, footer.
   ===================================================================== */
.tp-card-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  align-items: start;
}
.tp-card-cols .tp-awards { max-width: none; }

@media (max-width: 700px) {
  .tp-card-cols { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* At phone widths a 38-character display line cannot stay legible on one row,
   so allow a deliberate, balanced two-line wrap instead of shrinking further. */
@media (max-width: 700px) {
  .tp-card-title { white-space: normal; text-wrap: balance; font-size: 1.5rem; }
}

/* Quick access reads as a compact two-column index beside the award marks,
   so the summary tile stays short. */
@media (min-width: 701px) {
  .tp-card-cols .tp-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--space-6);
  }
}


/* =====================================================================
   COMPACT CATALOGUE ENTRY (summary page only)
   The page is deliberately narrow — a product record, not a landing page.
   Body copy stays at 16px+ and every link/button keeps a >=40px hit area.
   ===================================================================== */
/* Structural width is inherited from the production `.container` used by the
   live Solutions > Windows & Doors layout — `max-width: var(--content-wide)`
   (1280px) with `padding-inline: clamp(24px, 5vw, 64px)`, i.e. 64px desktop
   gutters and a 1152px content/card span at 1440. No width override is applied
   here on purpose: the card must read as a page-spanning composition on the
   same grid as Windows & Doors, not as a centred island. Compactness is created
   by constraining CONTENT (58ch copy measure, compact icon cells, tight
   vertical padding) rather than by shrinking the container. */

/* ── Description panel: exact KR overview + KR product facts + award marks ── */
.tp-panel {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6) var(--space-4) var(--space-5);
  background: var(--color-surface-offset);
  border-left: 2px solid var(--color-accent);   /* the single bronze accent */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.tp-panel .tp-overview-label { margin: 0 0 var(--space-2); }
.tp-panel .tp-overview-text { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 58ch; }
.tp-panel .tp-caps-grid {
  /* Seven verified data points in a balanced wrapping grid — 4 + 3 at desktop.
     Cell rhythm mirrors .wd-hcard-spec on the Windows & Doors page: 1px border,
     4px radius, tiny tracked label over a compact value. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  list-style: none;
}
.tp-panel .tp-caps-grid > .tp-cap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  min-width: 0;
}
[data-theme='dark'] .tp-panel .tp-caps-grid > .tp-cap { background: var(--color-surface); }
.tp-panel .tp-cap-icon { flex: 0 0 auto; line-height: 0; }
.tp-panel .tp-cap-name { font-size: 0.6rem; letter-spacing: 0.08em; line-height: 1.25; }
.tp-panel .tp-cap-value { font-size: 0.78rem; font-weight: 500; line-height: 1.3; }
.tp-panel .tp-cap-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-panel .tp-caps-note { font-size: 0.8rem; line-height: 1.5; max-width: 62ch; }

/* Award marks now live inside the panel — original aspect ratios preserved. */
.tp-awards--panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-divider);
  list-style: none;
  max-width: none;
}
.tp-awards--panel .tp-award img {
  width: auto;
  max-width: 76px;
  height: 44px;              /* aspect ratio preserved via object-fit: contain */
  object-fit: contain;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}

/* ── Quick access beside two equal square image boxes ── */
.tp-showcase {
  display: grid;
  /* Fixed 220px index rail + a flexible image field, echoing the 220px actions
     column on the Windows & Doors hero card. Quick Access stays on the left as
     previously approved. */
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  align-items: start;
}
.tp-showcase-quick { align-self: start; }           /* aligns with the image tops */
.tp-showcase-quick .tp-side-title { margin-bottom: var(--space-2); }
.tp-showcase .tp-quick { gap: 0; }
.tp-showcase .tp-quick a {
  font-size: 0.84rem;
  padding-block: 9px;                                /* ~40px touch target */
  min-height: 40px;
}

.tp-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.tp-shots .tp-shot { margin: 0; display: flex; flex-direction: column; }
/* Square boxes matching the assets' natural 1:1 ratio, so both images fill
   their frame edge to edge with no CSS letterboxing and no distortion. */
.tp-shots .tp-shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  /* see the 4:3 override at >=861px */
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-md);
  padding: 0;
  background: none;
  border: 0;
}
/* The section drawing is supplied with its own studio background baked in, so it
   is shown edge to edge (cover) rather than plated. The asset is pre-trimmed of
   its dead left margin so the profile is centred and spans the full box width —
   the largest a 2.8:1 subject can be drawn inside a square frame undistorted. */
.tp-shots .tp-shot--tech img { object-fit: cover; object-position: center; padding: 0; background: none; }
[data-theme='dark'] .tp-shots .tp-shot--tech img { background: none; }
.tp-shots figcaption { margin-top: var(--space-2); }

/* On the full-width card each image box is ~430px wide, so a 4:3 frame keeps the
   pair in proportion with the panel instead of towering over it. Both assets are
   square natives, cropped centrally with `object-fit: cover` — no distortion. */
@media (min-width: 861px) {
  .tp-shots .tp-shot img { aspect-ratio: 4 / 3; }
  .tp-shots { gap: var(--space-5); }
}

.tp-card-foot { margin-top: var(--space-6); padding-top: var(--space-4); }
.tp-card-foot .tp-attr { margin-top: var(--space-3); }

/* ── Compact stacking: quick access first, then the images ── */
@media (max-width: 860px) {
  .tp-showcase { grid-template-columns: 1fr; gap: var(--space-5); }
  .tp-showcase-quick { order: 1; }
  .tp-shots { order: 2; }
  .tp-showcase .tp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
}
@media (max-width: 560px) {
  .tp-shots { grid-template-columns: 1fr; gap: var(--space-4); }
  .tp-showcase .tp-quick { grid-template-columns: 1fr; }
  .tp-panel { padding: var(--space-4); }
}

/* The narrower shell needs a lower display cap so the wordmark / title /
   bookmark row stays on one balanced line at desktop and tablet. */
#page-test-as-fd-75 .tp-card-title { font-size: clamp(1.3rem, 2.05vw, 1.85rem); }
#page-test-as-fd-75 .tp-card-head { align-items: center; }
#page-test-as-fd-75 .tp-card-ident { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  #page-test-as-fd-75 .tp-card-title { font-size: 1.35rem; }
}

/* Separator hairlines follow the four-item row: only row-leading cells lose the
   rule. These override the older 3-up / 2-up rules for this panel. */
/* Responsive column counts for the seven-cell grid. Between 861 and 1100px the
   panel is single-column again and the grid is pinned to 3 tracks further down
   (see the icon-scale block), so the cells run 3 + 3 + 1-spanning-full-width. */
@media (max-width: 860px) {
  .tp-panel .tp-caps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tp-panel .tp-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two columns are kept even at 375px: a single column made the panel
   unnecessarily tall, and the brief asks for a compact, balanced grid. */
@media (max-width: 420px) {
  .tp-panel .tp-caps-grid { gap: var(--space-1); }
  .tp-panel .tp-caps-grid > .tp-cap { padding: var(--space-2); gap: var(--space-1); }
}
/* Below ~360px a two-column grid leaves only ~100px of text width, which is
   narrower than the longest unbreakable words ("aluminium", "performance").
   Since hyphenation is deliberately off, the cells are stacked instead so
   nothing spills past its border. 375px keeps the compact two-up grid. */
@media (max-width: 360px) {
  .tp-panel .tp-caps-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Muted copy inside the panel sits on the offset surface, so it is darkened /
   lightened to hold >= 4.5:1 in both themes. */
.tp-panel .tp-cap-name,
.tp-panel .tp-caps-note,
.tp-panel .tp-award-label { color: #5C574F; }
[data-theme='dark'] .tp-panel .tp-cap-name,
[data-theme='dark'] .tp-panel .tp-caps-note,
[data-theme='dark'] .tp-panel .tp-award-label { color: #ADA69E; }
.tp-panel .tp-cap-value { color: var(--color-text); }

/* Values wrap on word boundaries only — no mid-word hyphenation in narrow cells. */
.tp-cap-value, .tp-cap-name { hyphens: none; overflow-wrap: normal; }


/* Cormorant Garamond ships old-style (text) figures by default, so "75" hangs
   below the cap baseline. Lining figures are requested for product titles and
   data values so `AS FD 75` reads as ordinary aligned title text. Verified the
   webfont honours `lnum` (advance width changes when applied). */
#page-test-as-fd-75 .tp-card-title,
#page-test-as-fd-75 .tp-cat-title,
#page-as-fd-75 .tp-title,
#page-as-fd-75 .tp-hero-title,
#page-as-fd-75 h1,
#page-as-fd-75 h2,
#page-as-fd-75 h3,
#page-test-as-fd-75 h1,
#page-test-as-fd-75 h2,
#page-test-as-fd-75 h3 {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
  font-variant-position: normal;
  vertical-align: baseline;
}
#page-test-as-fd-75 .tp-card-title a { vertical-align: baseline; font: inherit; }

/* Desktop: the panel spans the full 1152px card and splits into a copy region
   (capped at 58ch, matching the reference story-column measure) and a data
   region carrying the seven icon cells, separated by a quiet hairline. This
   keeps the wide card purposeful without lengthening the reading measure. */
@media (min-width: 1101px) {
  .tp-panel {
    display: grid;
    grid-template-columns: minmax(0, 56ch) minmax(430px, 1fr);
    column-gap: var(--space-8);
    align-content: start;
  }
  .tp-panel > .tp-overview-label,
  .tp-panel > .tp-overview-text,
  .tp-panel > .tp-caps-note,
  .tp-panel > .tp-awards--panel { grid-column: 1; }
  .tp-panel > .tp-caps-grid {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    /* auto-fit keeps every cell wide enough for its longest unbreakable label
       ("ACOUSTIC PERFORMANCE") at any container width. */
    grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
    margin: 0;
    padding: 0 0 0 var(--space-6);
    border-top: 0;
    border-left: 1px solid var(--color-divider);
  }
  .tp-panel > .tp-caps-note { margin-top: var(--space-4); }
}

/* Narrow phones: trim cell padding so the longest label ("ACOUSTIC
   PERFORMANCE") still fits its box at 375px without clipping, while the
   two-up compact grid and the on-brand label tracking are both preserved. */
@media (max-width: 420px) {
  .tp-panel .tp-caps-grid > .tp-cap { padding: var(--space-2) 6px; gap: 4px; }
}

/* ── 320px: the technical tables' intrinsic minimum width (label + value +
   padding) exceeded the 272px content box and pushed the document 24px wide.
   Below 400px the type steps down slightly, the label column is capped and
   `table-layout: fixed` stops the longest label ("Min.-max. vent height") from
   forcing an intrinsic width. Values wrap on word boundaries only. ── */
@media (max-width: 400px) {
  #page-as-fd-75 .tp-tech-table { table-layout: fixed; width: 100%; }
  #page-as-fd-75 .tp-tech-table th { width: 54%; padding-right: var(--space-3); }
  #page-as-fd-75 .tp-tech-table th,
  #page-as-fd-75 .tp-tech-table td { font-size: 0.74rem; overflow-wrap: break-word; }
}

/* =====================================================================
   CAPABILITY ICON SCALE — brand feature-tile sizing
   KR brand guidance sizes a feature-tile / card-header icon at 40x40 px
   (vs 20x20 for body-inline use). The seven capability glyphs were still
   rendering at the inline 20 px size, so they read as micro-marks rather
   than tile icons. They are now scaled with CSS only: the inline SVGs keep
   their official 0 0 24 24 viewBox and untouched geometry, so all seven
   scale identically (1.5 stroke -> ~2.4 effective at 38 px) and stay
   optically consistent with each other and with the pack.
   Desktop 38 px  |  tablet 36 px  |  mobile 34-32 px.
   ===================================================================== */
.tp-cap-icon svg,
.tp-panel .tp-cap-icon svg {
  width: 38px;
  height: 38px;
}
.tp-panel .tp-caps-grid > .tp-cap {
  /* Extra breathing room around the larger glyph without adding rows: the
     cell is padded 14px/12px and the icon-to-copy gap steps 8px -> 12px. */
  gap: var(--space-3);
  padding: 14px var(--space-3);
}
/* 861-1100px: the panel is single-column, so pin exactly 3 tracks (224-290px
   cells - comfortably wider than the 214px label floor). A 214px auto-fit floor
   flipped to 4 tracks in the 1091-1100px sliver, which left the middle row two
   cells short once the seventh cell spans its row. */
@media (min-width: 861px) {
  .tp-panel .tp-caps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tp-cap-icon svg, .tp-panel .tp-cap-icon svg { width: 36px; height: 36px; }
}
/* 361-460px: cells are too narrow for icon-beside-copy once the glyph is
   34 px, so the cell stacks (icon over label) and the copy regains the full
   cell width - this keeps the two-up compact grid and prevents any clipping. */
@media (min-width: 361px) and (max-width: 460px) {
  .tp-panel .tp-caps-grid > .tp-cap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) 10px;
  }
  .tp-cap-icon svg, .tp-panel .tp-cap-icon svg { width: 34px; height: 34px; }
}
@media (max-width: 360px) {
  .tp-panel .tp-caps-grid > .tp-cap { gap: var(--space-3); padding: var(--space-3); }
  .tp-cap-icon svg, .tp-panel .tp-cap-icon svg { width: 32px; height: 32px; }
}

/* Inside the two-column desktop panel the data column is ~430 px, which a
   214 px auto-fit floor could not split into two tracks (214*2 + 8 gap > 430)
   and the seven cells collapsed into a single tall stack. Pin two equal
   tracks here; 211 px cells still hold every label on one line. */
@media (min-width: 1101px) {
  .tp-panel .tp-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Trim the stacked mobile cells so the larger glyph does not inflate the
   section height. */
@media (min-width: 361px) and (max-width: 460px) {
  .tp-panel .tp-caps-grid > .tp-cap { gap: 6px; padding: 10px; }
}

/* Seven items in a two-up grid leave an orphan in the last row; the seventh
   cell spans both tracks so the block closes deliberately instead of looking
   like a dropped cell. This is applied unconditionally rather than only at the
   two-up desktop width: at every column count (4-up, 3-up and 2-up) seven cells
   leave a short final row, so the seventh always spans to the end of its row and
   every row reads as fully resolved. At one column `1 / -1` is a no-op.
   `max-width: none` is required: production `base.css` caps every `li` at 72ch
   for prose measure, which held the spanning cell 122px short of the row edge
   between 861 and 1100px. These are data cells sized by grid tracks, not prose,
   so the cap is overridden locally (base.css itself is untouched). */
.tp-panel .tp-caps-grid > .tp-cap { max-width: none; }
.tp-panel .tp-caps-grid > .tp-cap:last-child { grid-column: 1 / -1; }
@media (min-width: 361px) and (max-width: 460px) {
  .tp-panel .tp-caps-grid > .tp-cap:last-child { flex-direction: row; align-items: center; gap: var(--space-3); }
}

/* =====================================================================
   ROUND 11 — COMPACT CAPABILITY CELLS
   The seven boxes keep the approved feature-tile icon scale (38 -> 36 px
   desktop, 34 -> 33, 32 unchanged: at most a 2 px reduction) and lose height
   through geometry instead: box padding 14/12 -> 8/10, icon-to-copy gap
   12 -> 8 px, label leading 1.35 -> 1.12 and value leading 1.4 -> 1.22.
   ===================================================================== */
.tp-panel .tp-caps-grid { gap: 6px; margin-bottom: var(--space-4); }
.tp-panel .tp-caps-grid > .tp-cap {
  gap: var(--space-2);
  padding: 8px 10px;
}
.tp-cap-icon svg,
.tp-panel .tp-cap-icon svg { width: 36px; height: 36px; }
.tp-cap-name { line-height: 1.12; }
.tp-cap-value { line-height: 1.22; }
.tp-panel .tp-cap-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

@media (max-width: 860px) {
  .tp-cap-icon svg, .tp-panel .tp-cap-icon svg { width: 34px; height: 34px; }
  .tp-panel .tp-caps-grid > .tp-cap { padding: 7px 9px; }
}
@media (min-width: 361px) and (max-width: 460px) {
  .tp-cap-icon svg, .tp-panel .tp-cap-icon svg { width: 33px; height: 33px; }
  .tp-panel .tp-caps-grid > .tp-cap { gap: 3px; padding: 6px 7px; }
  .tp-panel .tp-caps-grid { gap: 5px; }
}
@media (max-width: 360px) {
  .tp-cap-icon svg, .tp-panel .tp-cap-icon svg { width: 32px; height: 32px; }
  .tp-panel .tp-caps-grid > .tp-cap { gap: var(--space-2); padding: 7px 9px; }
}

/* =====================================================================
   ROUND 11 — TOP ACTION ROW (Bookmark / Compare / Product Details)
   One line wherever the card is wide enough; the row wraps by itself on the
   narrow breakpoints rather than overhanging the card. Compact, low-chrome,
   4px radius per the brand button scale - not
   pill-shaped. Icons are the official pack marks at 16 px (UI-label size).
   ===================================================================== */
.tp-actions {
  display: flex;
  /* Round 12 QA: the row wraps only when it genuinely cannot fit. The longer
     "PRODUCT DETAILS" label widened the row from ~250px to ~327px, so the old
     `nowrap` + 359px wrap break pushed the chip past the card edge at 360-420px
     (and off the document at 360px). `wrap` self-corrects at every width. */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  /* `flex: 0 0 auto` alone resolves the row at max-content even in the stacked
     (column) card head, so wrapping never triggered; cap it at the card. */
  max-width: 100%;
}
.tp-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
/* The glyph must never be squeezed: as a flex item inside a nowrap row it would
   otherwise shrink (measured 7-9px, and unequally between the three chips) once
   the row ran out of space. Pin the chip, the wrapper and the svg. */
.tp-act-icon { display: inline-flex; flex: 0 0 auto; }
.tp-act-icon svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.tp-act-label { flex: 0 0 auto; }
.tp-act:hover { color: var(--color-accent); border-color: var(--color-accent); }
.tp-act:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-text);
}
/* Round 12: the forward action is now the primary chip (.tp-act--primary,
   defined at the end of this file) rather than a bronze-outlined variant. */
/* Pressed state: bronze frame + filled glyph, matching the old bookmark chip. */
.tp-act[aria-pressed='true'] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(140, 110, 69, 0.10);
}
/* Round 18: the glyphs are now KR pack <use> references, so paint is driven by the
   sprite's --kr-icon-* custom properties (a plain `fill` on the <svg> cannot reach
   cloned <use> content). The compare glyph keeps the pack's 1.5px optical stroke —
   the old stroke-width:2 emphasis is dropped; the bronze frame, bronze text and the
   "Added" label already carry the pressed state without colour alone. */
.tp-act[data-bookmark][aria-pressed='true'] .tp-act-icon svg { --kr-icon-fill: currentColor; }
[data-theme='dark'] .tp-act[aria-pressed='true'] { background: rgba(140, 110, 69, 0.18); }

@media (max-width: 1023px) {
  .tp-act { padding: 6px 9px; letter-spacing: 0.08em; }
}
@media (max-width: 420px) {
  .tp-actions { gap: 5px; }
  .tp-act { padding: 5px 7px; font-size: 0.61rem; letter-spacing: 0.04em; gap: 4px; }
  .tp-act-icon svg { width: 14px; height: 14px; }
}
/* The former `max-width: 359px` wrap break is gone: `.tp-actions` now carries
   `flex-wrap: wrap` at every width, so the row breaks exactly where the card
   runs out of room rather than at a hard-coded pixel measured against the old
   shorter label. Chips keep `flex: 0 0 auto`, so icons still never squeeze. */

/* Card head: title block flexes, action row stays on its own line-end. */
#page-test-as-fd-75 .tp-card-head { gap: var(--space-3) var(--space-4); }
@media (max-width: 700px) {
  #page-test-as-fd-75 .tp-card-head { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   ROUND 11 — DETAIL PAGE HERO PANEL
   Uses the production .page-hero / .page-hero-bg / .page-hero-overlay /
   .page-hero-content structure so the prototype matches the Solutions
   product pages; only prototype-scoped overrides live here (style.css is
   never modified). The approved KR image is cropped to its door band
   (as-fd-75-hero-wide.webp, 1600x754) above 860px and to a taller band
   (as-fd-75-hero-43.webp, 1024x693) below, so the folding doors - the focal
   area - are never cut. Both files are verified centre-width crops of the
   approved 458x458 KR photograph (mean abs diff 1.2 / 3.8 against the source
   crop), upscaled 3.49x and 2.24x respectively.
   ===================================================================== */
/* Round 14: the breadcrumb / back strip below the hero was removed at the
   client's request, so its scoped rule is gone with it. */

#page-as-fd-75 .tp-prod-hero {
  padding-top: 0;                     /* no fixed-header offset: the hero is not the first band */
  min-height: 0;
  align-items: flex-end;
  width: 100%;
  /* Explicit heights rather than aspect-ratio: on a block-level flex band an
     aspect-ratio + max-height pair shrinks the used width instead of the
     height, which pulled the hero in to 560px at tablet. */
  height: clamp(360px, 34vw, 520px);
  /* Literal warm charcoal, not var(--color-primary): the primary token resolves
     to bronze in dark mode, which would sit as a bronze band behind the
     photograph. */
  background: #141210;
}
#page-as-fd-75 .tp-prod-hero .page-hero-bg img,
#page-as-fd-75 .tp-prod-hero .page-hero-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
}
/* Legibility wash. Round-11 QA rebuilt this gradient twice:
   1. The stops are anchored in PIXELS FROM THE BOTTOM, not percentages. The
      hero text block measures 216-268px tall at every breakpoint 320-1440,
      while the hero itself ranges 300-490px - so percentage stops put full
      wash strength under the eyebrow at 1440 (63% down) and almost none at
      360px (32% down). Percentage stops measured 1.9-2.9:1 behind the eyebrow.
   2. These are the LIGHTEST stops that still hold WCAG AA against the actual
      rendered pixels of the approved photograph: measured worst-case 5.3-6.5:1
      behind the eyebrow, 6.0-6.9:1 behind the title and 6.6-6.9:1 behind the
      lead, at 320/360/375/768/1024/1440.
   The prototype cannot simply reuse the production `.page-hero-overlay`
   (0.10 -> 0.45): simulated on this photograph it yields 1.7-3.2:1 and fails AA
   at every width, because this render is far brighter than the darker hero
   photography the production overlay was tuned against. */
#page-as-fd-75 .tp-prod-hero-wash {
  background: linear-gradient(to top,
    rgba(20, 18, 16, 0.76) 0px,
    rgba(20, 18, 16, 0.70) 110px,
    rgba(20, 18, 16, 0.62) 200px,
    rgba(20, 18, 16, 0.34) 245px,
    rgba(20, 18, 16, 0.09) 295px,
    rgba(20, 18, 16, 0.04) 100%);
}
#page-as-fd-75 .tp-prod-hero-content {
  padding: var(--space-10) clamp(var(--space-6), 5vw, var(--space-16)) var(--space-8);
  width: 100%;
}
#page-as-fd-75 .tp-sch-logo--onhero {
  filter: none;                  /* supplied mark is white artwork - correct on the dark wash */
  opacity: 0.95;
  margin-bottom: var(--space-3);
}
[data-theme='dark'] #page-as-fd-75 .tp-sch-logo--onhero { opacity: 0.95; }
#page-as-fd-75 .tp-prod-hero-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Near-opaque: at 0.68rem the previous 0.82 alpha cost roughly a full contrast
     step against the photograph. Hierarchy comes from size and tracking. */
  color: rgba(255, 255, 255, 0.95);
}
#page-as-fd-75 .tp-prod-hero-title {
  margin: 0;
  color: #FFFFFF;
  font-weight: 400;
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}
#page-as-fd-75 .tp-prod-hero-lead {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 860px) {
  #page-as-fd-75 .tp-prod-hero { height: clamp(300px, 46vw, 400px); }
  #page-as-fd-75 .tp-prod-hero-content { padding-block: var(--space-8) var(--space-6); }
}
@media (max-width: 480px) {
  #page-as-fd-75 .tp-prod-hero { height: 300px; }
  /* No narrow-width wash override is needed now that the stops are anchored in
     pixels from the bottom - one gradient is verified AA at 320-1440. */
  #page-as-fd-75 .tp-prod-hero-lead { font-size: 0.92rem; max-width: none; }
}

/* Overview + actions band below the hero. */
#page-as-fd-75 .tp-prod-head { padding-block: var(--space-8) var(--space-6); }
#page-as-fd-75 .tp-prod-head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
}
#page-as-fd-75 .tp-prod-head-inner .tp-overview { flex: 1 1 46ch; min-width: 0; }

/* Round 14: the key-figures band ("Wide openings that fold away almost
   entirely") was removed as redundant, so its scoped rules are gone too. The
   same figures remain in the technical-information table. */

/* =====================================================================
   ROUND 12 — SUMMARY CARD READING ORDER
   The summary card now reads: head + actions -> overview beside the award
   marks -> imagery -> capability grid. Two panels carry the two data
   regions (`--overview`, `--caps`), so the older single panel's desktop
   two-column grid (copy | icons) is switched off for both; the icon grid
   is instead a full-card-width strip beneath the imagery. Detail-page
   markup is untouched: everything here is scoped to the summary page or
   to the new `--overview` / `--caps` variants, except the shared action
   chip hierarchy (item 5), which the detail page inherits by design.
   ===================================================================== */

/* --- 1. Overview panel: copy beside the awards ---------------------- */
#page-test-as-fd-75 .tp-panel--overview,
#page-test-as-fd-75 .tp-panel--caps { display: block; }

#page-test-as-fd-75 .tp-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
/* Beside from 861px up: the copy keeps its 58ch measure and the marks sit in a
   quiet right-hand column, separated by the same hairline used elsewhere in the
   card. The column is sized to the marks (3 x 76px + gaps) so the copy takes
   every remaining pixel of the 1152px card. */
@media (min-width: 861px) {
  #page-test-as-fd-75 .tp-overview-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-8);
    align-items: center;
  }
  #page-test-as-fd-75 .tp-awards--beside {
    padding: 0 0 0 var(--space-8);
    border-top: 0;
    border-left: 1px solid var(--color-divider);
    justify-content: flex-end;
  }
}
#page-test-as-fd-75 .tp-awards--beside {
  margin: 0;
  flex-wrap: nowrap;
  gap: var(--space-3);
}
/* Subordinate to the copy: marks step down from 76px to 64px wide so they read
   as endorsements beside the statement rather than competing with it. Aspect
   ratio is preserved (object-fit: contain inside a fixed-height box). */
#page-test-as-fd-75 .tp-awards--beside .tp-award img {
  max-width: 64px;
  height: 38px;
}
/* Narrow: the marks stack under the copy and left-align with it. */
@media (max-width: 860px) {
  #page-test-as-fd-75 .tp-awards--beside {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* --- 2. Capability strip beneath the imagery ------------------------ */
#page-test-as-fd-75 .tp-panel--caps { margin-top: var(--space-6); }
#page-test-as-fd-75 .tp-panel--caps > .tp-caps-grid {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-left: 0;
}
#page-test-as-fd-75 .tp-panel--caps > .tp-caps-note {
  margin: var(--space-4) 0 0;
}
/* Full card width above 1100px: all seven cells stand in a single row, so the
   grid resolves without an orphan and the seventh cell no longer needs to span.
   Cells stack icon-over-copy at this track width (158px) - the same compact
   treatment already used on narrow screens - which keeps "ACOUSTIC
   PERFORMANCE" on one line per word and nothing clipped. */
@media (min-width: 1101px) {
  #page-test-as-fd-75 .tp-panel--caps > .tp-caps-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
  }
  #page-test-as-fd-75 .tp-panel--caps > .tp-caps-grid > .tp-cap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
    grid-column: auto;
  }
}

/* --- 3. Action hierarchy: Product Details is the primary CTA -------- */
.tp-act--primary {
  color: var(--color-text-inverse, #F8F7F4);
  background: var(--color-primary, #2A2520);
  border-color: var(--color-primary, #2A2520);
  /* Round 12 QA: vertical padding matches the outline chips (6px) so the three
     controls share a top and bottom edge - the emphasis comes from the solid
     fill and the wider 13px inset, not from a 2px taller box. */
  padding: 6px 13px;
}
.tp-act--primary:hover,
.tp-act--primary:focus-visible {
  color: var(--color-text-inverse, #F8F7F4);
  background: var(--color-primary-hover, #1F1B17);
  border-color: var(--color-primary-hover, #1F1B17);
}
/* Dark mode: `--color-primary` resolves to bronze, which fails contrast against
   cream label text, so the primary chip takes the brand's bronze-on-dark-text
   treatment instead. */
[data-theme='dark'] .tp-act--primary {
  color: #141210;
  background: var(--color-accent, #8C6E45);
  border-color: var(--color-accent, #8C6E45);
}
[data-theme='dark'] .tp-act--primary:hover,
[data-theme='dark'] .tp-act--primary:focus-visible {
  color: #141210;
  background: var(--color-accent-hover, #9C7E55);
  border-color: var(--color-accent-hover, #9C7E55);
}
/* Narrow chips drop to 5px vertical padding at 420px, so the primary chip
   follows at exactly the same breakpoint - Round 12 QA measured it 2px shorter
   than its neighbours between 421 and 460px when this fired at 460px. */
@media (max-width: 420px) {
  .tp-act--primary { padding: 5px 9px; }
}

/* Round 12 refinements ------------------------------------------------ */
/* The 58ch panel measure was set when the copy shared the panel with the icon
   column; beside the (much narrower) award marks it left a wide void before the
   hairline. 72ch keeps the line length inside a comfortable reading measure
   while the two columns read as a balanced row. */
@media (min-width: 1101px) {
  #page-test-as-fd-75 .tp-overview-row .tp-overview-text { max-width: 72ch; }
}
/* Seven-up strip: the label steps down one notch so "ACOUSTIC PERFORMANCE"
   holds a single line in a 158px track. With every label on one line the seven
   values sit on a common baseline instead of stepping down in the wider cells. */
@media (min-width: 1101px) {
  #page-test-as-fd-75 .tp-panel--caps .tp-cap-name {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }
}
/* Balanced split: the copy takes a ~1fr column (≈680px, a ~70ch measure) and the
   marks a 0.55fr column, so the hairline falls near the card's optical
   two-thirds instead of hugging the right edge. Round 12 QA: the marks are
   centred in that column - flush right left a ~180px void between the hairline
   and the first mark, which read as a misalignment rather than a balance. */
@media (min-width: 1101px) {
  #page-test-as-fd-75 .tp-overview-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  }
  #page-test-as-fd-75 .tp-awards--beside { justify-content: center; }
  #page-test-as-fd-75 .tp-overview-row .tp-overview-text { max-width: none; }
}
/* 1101px+ strip: 144px tracks leave 124px of copy, two pixels short of
   "ACOUSTIC PERFORMANCE" at 0.55rem. Trim the cell padding and step the label
   down once more so all seven labels hold one line and the values share a
   baseline. */
@media (min-width: 1101px) {
  #page-test-as-fd-75 .tp-panel--caps > .tp-caps-grid > .tp-cap { padding: 10px 8px; }
  #page-test-as-fd-75 .tp-panel--caps .tp-cap-name {
    font-size: 0.53rem;
    letter-spacing: 0.05em;
  }
}
/* Dark mode: the bronze focus ring would read as a halo around the bronze
   primary chip, so it switches to cream for an unambiguous indicator. */
[data-theme='dark'] .tp-act--primary:focus-visible { outline-color: #E8E4DC; }

/* =====================================================================
   ROUND 13 — award marks beside the overview, enlarged for recognition
   The marks were legible but not identifiable at a 38px box. They now step
   up to a 56px box on desktop with proportional tablet/mobile steps.
   Only the box grows: height is fixed, width stays `auto`, so each mark
   keeps its own native ratio (458x458, 128x68, 171x100) and is never
   cropped or stretched. `max-width` is set from the widest native ratio
   (1.882:1) at each step, so no mark is ever clamped and letterboxed.
   No padding: with `box-sizing: border-box` padding is subtracted from the
   declared height, which made the marks SMALLER than the previous 38px at
   375px and 320px (Round-13 QA finding). The narrow steps are sized so the
   three marks plus gaps always hold one line inside the awards column:
   1440 = 281/331px used, 768 = 271/603, 375 = 235/251, 320 = 192/196.
   ===================================================================== */
#page-test-as-fd-75 .tp-awards--beside .tp-award img {
  max-width: 102px;
  height: 54px;
  padding: 0;
}
/* The 0.55fr awards column scales with the viewport, so the largest step can
   only apply once the column can hold it: at exactly 1101px the column is
   275.6px wide and a 56px set needs 281.2px (measured 2.3px of overflow). The
   56px step therefore starts at 1136px, where the column reaches 281.4px. */
@media (min-width: 1136px) {
  #page-test-as-fd-75 .tp-awards--beside .tp-award img { max-width: 106px; height: 56px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  #page-test-as-fd-75 .tp-awards--beside .tp-award img { max-width: 102px; height: 54px; }
}
@media (max-width: 860px) {
  #page-test-as-fd-75 .tp-awards--beside .tp-award img { max-width: 98px; height: 52px; }
}
@media (max-width: 460px) {
  #page-test-as-fd-75 .tp-awards--beside .tp-award img { max-width: 87px; height: 46px; }
}
/* At 360px and below the row is width-bound: the three native ratios sum to
   4.59:1, so one line inside a 196px column caps the box at ~41px. 40px with a
   4px gap is the largest set that still holds one line at 320px. */
@media (max-width: 360px) {
  #page-test-as-fd-75 .tp-awards--beside { gap: 4px; }
  #page-test-as-fd-75 .tp-awards--beside .tp-award img { max-width: 76px; height: 40px; }
}

/* =====================================================================
   ROUND 14 — DETAIL PAGE: single overview + real spotlight destinations
   ===================================================================== */
/* The hero now ends on the H1, so the content band below it takes the space the
   removed breadcrumb strip used to occupy. */
#page-as-fd-75 .tp-prod-head { padding-block: var(--space-10) var(--space-8); }
/* One integrated overview paragraph: a slightly longer measure and looser
   leading than the summary card's three-line version. */
#page-as-fd-75 .tp-prod-head-inner .tp-overview { flex: 1 1 62ch; }
#page-as-fd-75 .tp-overview--lg .tp-overview-text { max-width: 78ch; line-height: 1.72; }

/* Numbered spotlight items are links now. */
.tp-spot-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.tp-spot-item { padding: 0; }
.tp-spot-item > .tp-spot-link { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.tp-spot-link:hover .tp-spot-label { text-decoration: underline; text-underline-offset: 3px; }
.tp-spot-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.tp-hotspot:focus-visible { outline: 2px solid #F8F7F4; outline-offset: 2px; }

/* Destination panels: one per numbered highlight, three-up on desktop. */
.tp-spotfeatures { padding-block: var(--space-10) var(--space-12); }
.tp-spotfeature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8);
}
.tp-spotfeature {
  /* Clears the sticky site header when a marker or numbered item jumps here. */
  scroll-margin-top: 96px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.tp-spotfeature:focus { outline: none; }
.tp-spotfeature:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }
.tp-spotfeature-num {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--tp-accent-ink, #8C6E45);
  margin: 0 0 var(--space-3);
}
.tp-spotfeature-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.tp-spotfeature-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 46ch;
}
@media (max-width: 700px) {
  .tp-spotfeatures { padding-block: var(--space-8) var(--space-10); }
  .tp-spotfeature-grid { gap: var(--space-6); }
}

/* =====================================================================
   ROUND 15 — site-standard breadcrumb band below the hero
   Reuses the site's own `.page-hero-breadcrumb` typography (Switzer,
   --text-xs, uppercase, 0.15em tracking, bronze links, muted separators)
   and the live pages' `color: var(--color-text-muted)` treatment for
   breadcrumbs rendered on a page background rather than over a hero
   photograph. Only the wrapper band is new: on the live site the crumb
   sits inside .page-hero-content, which would overlay the approved image
   here, so it gets its own band directly beneath the hero.
   ===================================================================== */
#page-as-fd-75 .tp-crumbband { padding-block: var(--space-6) var(--space-2); }
#page-as-fd-75 .tp-crumbband-path {
  margin: 0;
  /* site paragraph rules cap measure at ~65ch, which would wrap the trail early */
  max-width: none;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}
/* Round 15 QA: the live site's crumb links sit over dark hero photography, where
   --color-accent clears AA. On this cream band #8C6E45 measures only 4.42:1 at
   12-14px, so the page's darkened bronze ink token is used instead (5.62 light /
   6.06 dark) - same hue, same visual role, AA-compliant. */
#page-as-fd-75 .tp-crumbband-path a { color: var(--tp-accent-ink); text-decoration: none; }
#page-as-fd-75 .tp-crumbband-path a:hover { text-decoration: underline; text-underline-offset: 3px; }
#page-as-fd-75 .tp-crumbband-path a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Separators follow the live pages, where the trail inherits --color-text-muted;
   --color-text-faint rendered them at 2.1:1. */
#page-as-fd-75 .tp-crumb-sep { color: var(--color-text-muted); }
#page-as-fd-75 .tp-crumb-current { color: var(--color-text); }
/* The breadcrumb band now carries the space the Overview band used to open
   with, so the Overview keeps the site's rhythm without doubling the gap. */
#page-as-fd-75 .tp-prod-head { padding-block: var(--space-6) var(--space-8); }
@media (max-width: 480px) {
  #page-as-fd-75 .tp-crumbband { padding-block: var(--space-5) var(--space-1); }
}