/* ================================================================
   KR AWS 50 — icon-strip override
   Brand rule (KR Brand Guidelines & Iconography v1.3.6, §08.0):
   - Icon tile keeps its 0.4pt Divider border and 1.2mm radius.
   - NO outer white surface panel wrapping the strip.
   - Title only + optional single data line (measurement or class).
   - Stacked, centred, tight.
   ================================================================ */

/* --- kill the outer surface panels wrapping the strip --- */
.tp-capsband,
.tp-capsband .tp-panel,
.tp-capsband > .tp-container,
.tp-capsband .tp-caps-inner,
.tp-capsband .tp-caps-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.tp-capsband {
  padding: 2.5rem 0 1.5rem 0 !important;
  margin: 0 !important;
}
.tp-capsband .tp-panel,
.tp-capsband > .tp-container,
.tp-capsband .tp-caps-inner,
.tp-capsband .tp-caps-wrap {
  padding: 0 !important;
}

/* Kill the theme's decorative bronze stripe on left of .tp-panel */
.tp-capsband .tp-panel::before,
.tp-capsband .tp-panel::after {
  display: none !important;
  content: none !important;
}
.tp-capsband .tp-panel {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- grid: 6 tiles per row on wide, wrap gracefully --- */
.tp-capsband .tp-caps-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1.5rem 1rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
}
@media (max-width: 960px) {
  .tp-capsband .tp-caps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  .tp-capsband .tp-caps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- each tile: NO card background, stacked, centred --- */
.tp-capsband .tp-caps-grid > .tp-cap,
.tp-capsband .tp-caps-grid > .tp-cap:last-child,
.tp-capsband .tp-caps-grid > .tp-cap:nth-child(n) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 0.55rem !important;
  grid-column: auto !important;
}

/* --- the icon glyph itself: brand-guide tile
       (16.8mm ≈ 64px on screen; keep its own 0.4pt border, no outer card) --- */
.tp-capsband .tp-cap .tp-cap-icon {
  width: 64px !important;
  height: 64px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tp-capsband .tp-cap .tp-cap-icon .kr-icon {
  width: 64px !important;
  height: 64px !important;
  color: var(--color-text, #2A2520) !important;
}

/* Treatment A (default light band) — remove the sprite's baked-in square frame.
   The sprite embeds a <rect rx=3> as the first child of each symbol; we hide it on
   treatment A only so the light strip reads as clean glyphs. Treatment B keeps the
   frame in cream on charcoal, treatment C keeps it in bronze. */
.tp-capsband:not([data-tp-treatment]) .tp-cap .tp-cap-icon .kr-icon > rect:first-child,
.tp-capsband[data-tp-treatment="A"] .tp-cap .tp-cap-icon .kr-icon > rect:first-child {
  display: none !important;
}

/* --- title: Switzer SemiBold 9.5pt ≈ 12.5px, centred --- */
.tp-capsband .tp-cap .tp-cap-name {
  display: block !important;
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;   /* ≈ 12.5px */
  line-height: 1.25 !important;
  color: var(--color-text, #2A2520) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* --- optional single data line: Switzer Medium 7.5pt ≈ 10px, muted --- */
.tp-capsband .tp-cap .tp-cap-value {
  display: block !important;
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif) !important;
  font-weight: 500 !important;
  font-size: 0.66rem !important;   /* ≈ 10.5px */
  line-height: 1.2 !important;
  color: var(--color-text-muted, #6B6B6B) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

/* Copy wrapper */
.tp-capsband .tp-cap .tp-cap-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.15rem !important;
}

/* --- footnote under the strip stays, but tightened --- */
.tp-capsband .tp-caps-note {
  margin-top: 1.5rem !important;
  color: var(--color-text-muted, #6B6B6B) !important;
  font-size: 0.75rem !important;
  text-align: center !important;
}

/* ================================================================
   TREATMENTS — B (dark inversion) and C (bronze icon accent)
   Rotate per page for visual variety. Base state (no attr) = A (light).
   ================================================================ */

/* B — dark band: full-bleed charcoal strip with cream glyphs */
.tp-capsband[data-tp-treatment="B"] {
  background: #1E1A16 !important;
  background-color: #1E1A16 !important;
  padding: 3rem 2rem 2.5rem 2rem !important;
}
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon,
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon rect,
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon path,
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon line,
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon polyline,
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon polygon,
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .kr-icon circle {
  color: #E8E4DC !important;
  stroke: currentColor !important;
}
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-name {
  color: #F0EBE1 !important;
}
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-value {
  color: #A69C90 !important;
}
.tp-capsband[data-tp-treatment="B"] .tp-caps-note {
  color: #A69C90 !important;
}

/* C — bronze accent icon: light bg, warm bronze glyph */
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon,
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon rect,
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon path,
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon line,
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon polyline,
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon polygon,
.tp-capsband[data-tp-treatment="C"] .tp-cap .tp-cap-icon .kr-icon circle {
  color: #8C6E45 !important;
  stroke: currentColor !important;
}

/* ================================================================
   ROUND 27 — Windows & Doors overview standardisation
   Scoped to #page-windows-doors ONLY. Schüco product-detail pages
   keep their existing A / B / C capsband treatments untouched.
   ================================================================ */

/* --- 27.1  ONE uniform capsband treatment (supersedes A / B / C here) ---
   Light mode: charcoal glyphs + text on the light/cream surface token.
   Dark mode : cream glyphs + text on the dark surface token.
   Both come free from --color-surface-2 / --color-text, which flip with
   [data-theme]. Bronze stays accent-only and is never a base glyph colour. */
#page-windows-doors .tp-capsband,
#page-windows-doors .tp-capsband[data-tp-treatment="A"],
#page-windows-doors .tp-capsband[data-tp-treatment="B"],
#page-windows-doors .tp-capsband[data-tp-treatment="C"] {
  background: var(--color-surface-2, #F2F0EC) !important;
  background-color: var(--color-surface-2, #F2F0EC) !important;
  border: 1px solid var(--color-divider, #DDD9D2) !important;
  border-radius: 6px !important;
  padding: 2rem 1.5rem 1.75rem !important;
  margin: 1.5rem 0 0 !important;
}
@media (max-width: 520px) {
  #page-windows-doors .tp-capsband,
  #page-windows-doors .tp-capsband[data-tp-treatment="A"],
  #page-windows-doors .tp-capsband[data-tp-treatment="B"],
  #page-windows-doors .tp-capsband[data-tp-treatment="C"] {
    padding: 1.5rem 1rem 1.25rem !important;
  }
}

/* glyphs — always the theme ink, never bronze, never a hard-coded cream */
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon,
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon rect,
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon path,
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon line,
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon polyline,
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon polygon,
#page-windows-doors .tp-capsband[data-tp-treatment] .tp-cap .tp-cap-icon .kr-icon circle,
#page-windows-doors .tp-capsband .tp-cap .tp-cap-icon .kr-icon {
  color: var(--color-text, #2A2520) !important;
  stroke: currentColor !important;
}

/* framed 64px tile everywhere — the sprite frame is retained on every band */
#page-windows-doors .tp-capsband .tp-cap .tp-cap-icon,
#page-windows-doors .tp-capsband .tp-cap .tp-cap-icon .kr-icon {
  width: 64px !important;
  height: 64px !important;
}
#page-windows-doors .tp-capsband[data-tp-treatment="A"] .tp-cap .tp-cap-icon .kr-icon > rect:first-child,
#page-windows-doors .tp-capsband:not([data-tp-treatment]) .tp-cap .tp-cap-icon .kr-icon > rect:first-child {
  display: inline !important;
}

/* uniform grid rhythm + wrapping */
#page-windows-doors .tp-capsband .tp-caps-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1.75rem 1rem !important;
  align-items: start !important;
}
@media (max-width: 960px) {
  #page-windows-doors .tp-capsband .tp-caps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem 0.75rem !important;
  }
}
@media (max-width: 520px) {
  #page-windows-doors .tp-capsband .tp-caps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.35rem 0.5rem !important;
  }
}
#page-windows-doors .tp-capsband .tp-cap { gap: 0.5rem !important; }

/* --- 27.2  Stronger tile typography (still Switzer, still the KR scale) --- */
#page-windows-doors .tp-capsband .tp-cap .tp-cap-name,
#page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-name {
  font-size: 0.845rem !important;       /* 13.5px, was 12.5px */
  line-height: 1.3 !important;
  letter-spacing: 0.005em !important;
  color: var(--color-text, #2A2520) !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
#page-windows-doors .tp-capsband .tp-cap .tp-cap-value,
#page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-value {
  font-size: 0.72rem !important;        /* 11.5px, was 10.5px */
  line-height: 1.25 !important;
  color: var(--color-text-muted, #6B6B6B) !important;
}
#page-windows-doors .tp-capsband .tp-caps-note,
#page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-caps-note {
  color: var(--color-text-muted, #6B6B6B) !important;
}

/* --- 27.3  Award marks: never cropped, never squeezed, always complete ---
   Original artwork and aspect ratio preserved (object-fit: contain); the
   container is simply given room and allowed to wrap instead of shrinking. */
#page-windows-doors .tp-page-listing .tp-awards,
#page-windows-doors .tp-page-listing .tp-awards--beside {
  flex-wrap: wrap !important;
  max-width: none !important;
  gap: 0.75rem !important;
  overflow: visible !important;
  align-items: center !important;
}
#page-windows-doors .tp-page-listing .tp-awards .tp-award {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}
#page-windows-doors .tp-page-listing .tp-awards .tp-award img,
#page-windows-doors .tp-page-listing .tp-awards--beside .tp-award img {
  width: auto !important;
  max-width: 148px !important;
  height: auto !important; max-height: 78px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--color-divider, #DDD9D2) !important;
  border-radius: 4px !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}
@media (max-width: 1100px) {
  #page-windows-doors .tp-page-listing .tp-awards .tp-award img,
  #page-windows-doors .tp-page-listing .tp-awards--beside .tp-award img {
    max-width: 136px !important; height: auto !important; max-height: 72px !important;
  }
}
@media (max-width: 860px) {
  #page-windows-doors .tp-page-listing .tp-awards .tp-award img,
  #page-windows-doors .tp-page-listing .tp-awards--beside .tp-award img {
    max-width: 128px !important; height: auto !important; max-height: 66px !important;
  }
}
@media (max-width: 460px) {
  #page-windows-doors .tp-page-listing .tp-awards,
  #page-windows-doors .tp-page-listing .tp-awards--beside { gap: 0.5rem !important; }
  #page-windows-doors .tp-page-listing .tp-awards .tp-award img,
  #page-windows-doors .tp-page-listing .tp-awards--beside .tp-award img {
    max-width: 112px !important; height: auto !important; max-height: 60px !important; padding: 6px !important;
  }
}
@media (max-width: 360px) {
  #page-windows-doors .tp-page-listing .tp-awards .tp-award img,
  #page-windows-doors .tp-page-listing .tp-awards--beside .tp-award img {
    max-width: 96px !important; height: auto !important; max-height: 54px !important;
  }
}

/* --- 27.4  Subtitle / supporting-copy hierarchy -------------------------
   No new copy, no change to primary titles — the existing secondary tier is
   simply lifted out of the "too small / lost" range. Switzer only. */
#page-windows-doors .tp-page-listing .tp-overview-label,
#page-windows-doors .tp-page-listing .tp-side-title {
  font-size: 0.78rem !important;        /* 12.5px, was ~10.9px */
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: var(--color-text, #1E1A16) !important;
  opacity: 0.85 !important;
}
#page-windows-doors .tp-page-listing .tp-overview-text {
  font-size: 1.09rem !important;        /* 17.5px, was 17px */
  line-height: 1.72 !important;
  color: var(--color-text, #1E1A16) !important;
}
#page-windows-doors .tp-page-listing .tp-confirm,
#page-windows-doors .tp-page-listing .tp-attr {
  font-size: 0.83rem !important;        /* 13.3px, was ~11.8px */
  line-height: 1.65 !important;
}
#page-windows-doors .wd-range-header .section-subtitle,
#page-windows-doors .wd-schueco-intro .wd-sci-copy p {
  font-size: 1.15rem !important;        /* 18.4px */
  line-height: 1.72 !important;
  color: var(--color-text, #1E1A16) !important;
  opacity: 0.82 !important;
}
#page-windows-doors .tp-group-head .tp-group-title {
  letter-spacing: -0.005em !important;
}

/* ================================================================
   ROUND 29 — Schüco capability matrix
   (a) .kr-cap-note — the accessible qualification line that sits
       OUTSIDE the icon tile, used where a capability is only
       available as a specialist construction/variant.
   (b) .wd-hcard-caps — capability band for the Schüco façade cards
       on Solutions ▸ Facades & Ventilation. Mirrors the Round 27
       uniform Windows & Doors treatment exactly (same 64 px framed
       tile, same 6-per-row grid, same theme-aware ink) so both
       routes read as one visual system.
   ================================================================ */

.kr-cap-note {
  margin: 1.25rem 0 0;
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-muted, #6B6B6B);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

/* ---- (b) façade capability band ---- */
.wd-hcard-caps {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-divider, #DDD9D2);
  background: var(--color-surface-2, #F2F0EC);
  padding: 2rem 1.5rem 1.75rem;
}
@media (max-width: 520px) {
  .wd-hcard-caps { padding: 1.5rem 1rem 1.25rem; }
}

.wd-hcard-caps .tp-caps-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  align-items: start;
  justify-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (max-width: 960px) {
  .wd-hcard-caps .tp-caps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 0.75rem;
  }
}
@media (max-width: 520px) {
  .wd-hcard-caps .tp-caps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 0.5rem;
  }
}

.wd-hcard-caps .tp-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.wd-hcard-caps .tp-cap-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.wd-hcard-caps .tp-cap-icon .kr-icon {
  width: 64px;
  height: 64px;
}
.wd-hcard-caps .tp-cap-icon .kr-icon,
.wd-hcard-caps .tp-cap-icon .kr-icon rect,
.wd-hcard-caps .tp-cap-icon .kr-icon path,
.wd-hcard-caps .tp-cap-icon .kr-icon line,
.wd-hcard-caps .tp-cap-icon .kr-icon polyline,
.wd-hcard-caps .tp-cap-icon .kr-icon polygon,
.wd-hcard-caps .tp-cap-icon .kr-icon circle {
  color: var(--color-text, #2A2520);
  stroke: currentColor;
}
.wd-hcard-caps .tp-cap-icon .kr-icon > rect:first-child { display: inline; }
.wd-hcard-caps .tp-cap-icon .tp-cap-raster { width: 64px; height: 64px; }
.wd-hcard-caps .tp-cap-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wd-hcard-caps .tp-cap-name {
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif);
  font-weight: 600;
  font-size: 0.845rem;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--color-text, #2A2520);
  overflow-wrap: break-word;
  hyphens: none;
}
.wd-hcard-caps .tp-cap-value {
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--color-text-muted, #6B6B6B);
}

/* ---- (c) Round 29 specialist-variant modules ----
   AWS 90 BR (bullet) and AWS 90 XR / FW 80+ XR (blast) are separate approved
   systems, so they get their own visually separated module rather than a tile
   on a base product card. The tile anatomy is identical; only the container
   differs, so the capability reads at the same optical weight everywhere. */
.kr-variant .kr-variant-caps {
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem 0 1.75rem;
  padding: 1.5rem;
  background: var(--color-surface-2, #F2F0EC);
  border: 1px solid var(--color-divider, #DDD9D2);
  border-radius: 6px;
}
.kr-variant .tp-caps-grid--variant {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kr-variant .tp-caps-grid--variant .tp-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: 120px;
}
.kr-variant .tp-caps-grid--variant .tp-cap-icon,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon,
.kr-variant .tp-caps-grid--variant .tp-cap-raster {
  width: 64px;
  height: 64px;
}
.kr-variant .tp-caps-grid--variant .tp-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon rect,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon path,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon line,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon polyline,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon polygon,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon circle {
  color: var(--color-text, #2A2520);
  stroke: currentColor;
}
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon > rect:first-child { display: inline; }
.kr-variant .tp-caps-grid--variant .tp-cap-name {
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif);
  font-weight: 600;
  font-size: 0.845rem;
  line-height: 1.3;
  color: var(--color-text, #2A2520);
}
.kr-variant .tp-caps-grid--variant .tp-cap-value {
  font-family: var(--font-body, "Switzer", -apple-system, sans-serif);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--color-text-muted, #6B6B6B);
}
.kr-variant .kr-cap-note { text-align: left; margin-inline: 0; max-width: 78ch; }
.kr-variant-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 860px) {
  .kr-variant-pair { grid-template-columns: 1fr; gap: 2.5rem; }
}
.kr-variant-item { display: flex; flex-direction: column; }
.kr-variant-item > h3 { margin: 0 0 0.5rem; }
.kr-variant-item > .tp-related { margin-top: auto; }

/* ---- (d) Round 29: raster capability icons at capability-band scale ----
   `bullet-resistance` is the one raster-backed icon in the pack. The base rule
   in schuco-rollout.css pins .tp-cap-raster to the 20 px inline size, which is
   correct for inline use but leaves the tile visually broken next to the 64 px
   vector glyphs. Scope the 64 px size to the three capability contexts only. */
#page-windows-doors .tp-capsband .tp-cap .tp-cap-icon .tp-cap-raster,
.tp-capsband .tp-cap .tp-cap-icon .tp-cap-raster,
.wd-hcard-caps .tp-cap .tp-cap-icon .tp-cap-raster,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .tp-cap-raster {
  width: 64px;
  height: 64px;
}

/* ---- (e) Round 29 fix: variant capability panel must not inherit the
   two-column .tp-panel--caps grid, which pushed the single Bullet Resist tile
   into the second column and stretched the panel to the full content width. */
.kr-variant .tp-panel.tp-panel--caps.kr-variant-caps {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
.kr-variant .tp-panel.tp-panel--caps.kr-variant-caps > .tp-caps-grid--variant {
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 30 — COMPACT CAPABILITY TILES  (scoped brand exception, user-requested)
   ═══════════════════════════════════════════════════════════════════════════
   User feedback, 12 Aug 2026:
     "I said the icons could be made smaller so they can all be accommodated
      on one line."

   Rounds 22-29 locked capability tiles at 64 px (16.8 mm at print scale, the
   KR brand-guide tile size). With 6 fixed grid columns, products carrying 7-9
   capabilities wrapped onto two or three rows, which broke the card rhythm and
   buried the last tiles. The user has now explicitly asked for smaller tiles so
   every capability of a product reads as ONE row.

   Two changes make that work together:

   1. TILE SIZE 64 px -> 48 px  (--kr-cap-tile)
      48 px is the measured fit, not a guess. The widest surface is the Windows
      & Doors capsband, whose grid measures 924 px at a 1440 px viewport. The
      densest product (AWS 75.SI+) carries 9 tiles, and AWS 90.SI+ carries 9
      after Round 30 adds Bullet Resist, so a one-row layout must survive 10
      columns: 924 px / 10 = 92 px per column at 1440, and roughly 78 px at
      1280. A 48 px tile clears that with room for the label; 56 px does not
      leave enough side padding at 1280 once the 10 px column gap is applied.
      48 px also sits exactly on the brand pack's own step between the 40 px
      feature-tile size and the 64 px hero size, so it is a pack size, not an
      arbitrary one. This is a website-only exception; print documents keep
      16.8 mm.

   2. SINGLE-ROW GRID
      The desktop grid switches from `repeat(6, 1fr)` to column auto-flow, so
      the row holds however many tiles the product has - 4 or 10 - instead of
      wrapping at 6. Below 960 px the grid falls back to 3 columns and below
      520 px to 2, exactly as before, so mobile still wraps cleanly rather than
      forcing a horizontal scroll.

   Type stays fully readable: the labels return to the KR brand-locked sizes
   (Switzer SemiBold 9.5 pt = 12.5 px title, Switzer Medium 7.5 pt = 10.5 px
   data line) rather than the inflated 13.5/11.5 px Round 27 used to balance the
   64 px tile. A long title such as "Burglary Resist" wraps to two lines inside
   its column; the TILE ROW does not wrap, which is what the user asked for.

   Nothing outside the Schueco capability surfaces is touched: general UI icons,
   nav, buttons, hero and inline 20 px glyphs are all unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --kr-cap-tile: 48px;        /* was 64px (Rounds 22-29) */
  --kr-cap-gap-x: 0.625rem;   /* 10px - column gap that makes 10 columns fit */
  --kr-cap-gap-y: 1.5rem;
  --kr-cap-title: 0.78rem;    /* 12.5px = Switzer SemiBold 9.5pt (brand-locked) */
  --kr-cap-data: 0.66rem;     /* 10.5px = Switzer Medium 7.5pt  (brand-locked) */
}

/* --- 30.1  one row on desktop, whatever the tile count ------------------- */
@media (min-width: 961px) {
  .tp-capsband:not([data-kr-cap-density="curated"]) .tp-caps-grid,
  #page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-caps-grid,
  .wd-hcard-caps .tp-caps-grid {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    column-gap: var(--kr-cap-gap-x) !important;
    row-gap: var(--kr-cap-gap-y) !important;
    align-items: start !important;
  }
}

/* --- 30.2  the 48px tile ------------------------------------------------- */
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon,
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon .kr-icon,
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon .tp-cap-raster,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon .kr-icon,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon .tp-cap-raster,
.wd-hcard-caps .tp-cap-icon,
.wd-hcard-caps .tp-cap-icon .kr-icon,
.wd-hcard-caps .tp-cap-icon .tp-cap-raster,
.kr-variant .tp-caps-grid--variant .tp-cap-icon,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .kr-icon,
.kr-variant .tp-caps-grid--variant .tp-cap-icon .tp-cap-raster {
  width: var(--kr-cap-tile) !important;
  height: var(--kr-cap-tile) !important;
}

/* --- 30.3  brand-locked label sizes -------------------------------------- */
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-name,
.tp-capsband:not([data-kr-cap-density="curated"])[data-tp-treatment="B"] .tp-cap .tp-cap-name,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-name,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"])[data-tp-treatment="B"] .tp-cap .tp-cap-name,
.wd-hcard-caps .tp-cap-name,
.kr-variant .tp-caps-grid--variant .tp-cap-name {
  font-size: var(--kr-cap-title) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.005em !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-value,
.tp-capsband:not([data-kr-cap-density="curated"])[data-tp-treatment="B"] .tp-cap .tp-cap-value,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-value,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"])[data-tp-treatment="B"] .tp-cap .tp-cap-value,
.wd-hcard-caps .tp-cap-value,
.kr-variant .tp-caps-grid--variant .tp-cap-value {
  font-size: var(--kr-cap-data) !important;
  line-height: 1.2 !important;
  overflow-wrap: break-word !important;
}

/* Tighter icon-to-label gap so the shorter tile still reads as one object. */
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap,
#page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap,
.wd-hcard-caps .tp-cap {
  gap: 0.4rem !important;
}

/* --- 30.4  the frame is mandatory on every tile, raster or vector --------
   KR brand spec v1.3.6, "Icon tile anatomy - LOCKED":
       "Every icon (raster or vector) draws this outer frame - no exceptions."
   Round 27 hid the sprite's frame rect on treatment A and Round 27.1 restored
   it only under #page-windows-doors, so treatment-A DETAIL pages (including
   schuco-security.html, which carries the Bullet Resist tile) rendered
   frameless glyphs. Round 30 rebuilds the Bullet Resist raster WITH its frame
   baked in, so a frameless vector neighbour would now be the odd one out.
   Restore the frame everywhere except the curated AWS 50 strip. */
.tp-capsband:not([data-kr-cap-density="curated"]) .tp-cap .tp-cap-icon .kr-icon > rect:first-child,
.tp-capsband:not([data-kr-cap-density="curated"])[data-tp-treatment="A"] .tp-cap .tp-cap-icon .kr-icon > rect:first-child {
  display: inline !important;
}

/* --- 30.5  mobile: keep the existing wrap behaviour, just smaller -------- */
@media (max-width: 960px) {
  .tp-capsband:not([data-kr-cap-density="curated"]) .tp-caps-grid,
  #page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-caps-grid,
  .wd-hcard-caps .tp-caps-grid {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem 0.625rem !important;
  }
}
@media (max-width: 520px) {
  .tp-capsband:not([data-kr-cap-density="curated"]) .tp-caps-grid,
  #page-windows-doors .tp-capsband:not([data-kr-cap-density="curated"]) .tp-caps-grid,
  .wd-hcard-caps .tp-caps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.1rem 0.5rem !important;
  }
}

/* --- 30.6  curated density opt-out (RETAINED, but nothing uses it) -------
   Round 30 used data-kr-cap-density="curated" to hold the AWS 50 "Friday"
   strip at 64 px across two rows, reading "do not shrink it unless necessary"
   literally.

   Round 30.1 removes that exception. The user's instruction was that ALL icons
   fit on one line, and QA confirmed AWS 50 was the sole survivor at 64 px and
   two rows against 38 compacted rows elsewhere. Its capsband no longer carries
   the marker, so it now inherits 30.1-30.5: 48 px tile, brand-locked 12.5 px
   title / 10.5 px data, one desktop row. Its seven approved tiles, their data,
   their order, the light treatment and every surrounding section are unchanged
   - only the tile geometry moved.

   The rule below is kept deliberately as the documented mechanism for pinning a
   future curated strip. `CAP_DENSITY` in kr_capability_matrix.py is the source
   of truth: add a slug there and the applier writes this attribute back. The
   matrix selftest asserts aws-50 is never re-added and that no page carries a
   hand-edited marker the table disowns. */
.tp-capsband[data-kr-cap-density="curated"] .tp-cap .tp-cap-icon,
.tp-capsband[data-kr-cap-density="curated"] .tp-cap .tp-cap-icon .kr-icon,
.tp-capsband[data-kr-cap-density="curated"] .tp-cap .tp-cap-icon .tp-cap-raster {
  width: 64px !important;
  height: 64px !important;
}

/* --- 30.7  façade listing page (schuco-facades-outdoor.html) --------------
   Its five capability grids sit directly on a `tp-panel tp-panel--caps`
   section rather than inside a separate `tp-capsband` wrapper. Round 30 adds
   the `tp-capsband` class so they pick up the KR tile system, but that element
   is then both the band and the panel, and `.tp-panel--caps` sets its own
   two-column grid on its children. Force block flow so the sr-only heading and
   the tile row stack normally instead of sitting side by side. */
section.tp-capsband.tp-panel--caps {
  display: block;
}

/* --- 30.8  qualifier-note call to action ---------------------------------
   Where a capability is only reachable through a separate variant, the note
   ends with a link to that variant. Give it its own line so the uppercase
   bronze link cannot wrap into the middle of the sentence above it. */
.kr-cap-note .kr-cap-note-cta {
  display: block;
  margin-top: 0.45rem;
}

/* --- 30.9  QA fix: raster tiles must follow the BAND tone, not the site theme
   Round 30 QA finding. `.tp-cap-raster--light` / `--dark` are swapped by
   `[data-theme='dark']` on the document (schuco-rollout.css §tp-cap-raster), so
   the raster follows the SITE theme. Treatment B is a full-bleed charcoal strip
   that stays dark in BOTH themes (see the treatment-B block above), and its
   vector glyphs are forced to cream. On `schuco-aws-90-si-plus.html` — the only
   treatment-B band carrying a raster tile — the light theme therefore painted
   the charcoal Bullet Resist tile onto the charcoal strip: measured contrast
   1.2:1 against its cream neighbours' 14.6:1, i.e. effectively invisible at the
   default theme. Key the swap to the band instead.

   The `#page-windows-doors` exception is required: Round 27 standardised the
   Windows & Doors overview so its treatment-B bands render on the LIGHT surface
   colour, where the theme-driven swap is already correct. */
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .tp-cap-raster--light {
  display: none !important;
}
.tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .tp-cap-raster--dark {
  display: block !important;
}
#page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .tp-cap-raster--light {
  display: block !important;
}
#page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .tp-cap-raster--dark {
  display: none !important;
}
[data-theme='dark'] #page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .tp-cap-raster--light {
  display: none !important;
}
[data-theme='dark'] #page-windows-doors .tp-capsband[data-tp-treatment="B"] .tp-cap .tp-cap-icon .tp-cap-raster--dark {
  display: block !important;
}