/* Beltscan — product page additions.
   Loaded after main.css. Every class here is prefixed `pp-`; everything else
   on the page reuses main.css. All colour comes from the existing theme
   tokens, so dark/light both work with no extra rules. */

.pp-sect { margin-bottom: 44px; position: relative; z-index: 2; }

/* --- Qualification / scope: two panels ------------------------------- */

.pp-qual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.pp-panel {
  padding: 22px 24px;
  background: var(--pn);
  border: 1px solid var(--bd);
  border-left: 2px solid var(--bd);
  border-radius: var(--r);
  transition: border-color .25s, box-shadow .25s;
}
.pp-panel-ok { border-left-color: var(--ok); }
.pp-panel-wn { border-left-color: var(--wn); }
.pp-panel-cr { border-left-color: var(--acc); }
.pp-panel:hover { box-shadow: var(--s1); }

.pp-panel-h {
  font-family: var(--m);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.pp-panel-ok .pp-panel-h { color: var(--ok); }
.pp-panel-wn .pp-panel-h { color: var(--wn); }
.pp-panel-cr .pp-panel-h { color: var(--acc); }

/* The mark and the first line of text are laid out as a two-column grid rather
   than an absolutely positioned ::before, so they share a baseline no matter
   how the text wraps or what the inherited line-height is. */
.pp-ticks { margin: 0; padding: 0; list-style: none; }
.pp-ticks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: .94rem;
  color: var(--tx);
  line-height: 1.55;
}
.pp-ticks li::before {
  content: "\2713";
  color: var(--ok);
  font-weight: 700;
  font-size: .92em;
  text-align: center;
}
/* Inline links stay in the flow of the item's text, not on their own row. */
.pp-ticks li > span > .pp-link { display: inline; margin-top: 0; }
.pp-crosses li::before { content: "\2715"; color: var(--acc); }

.pp-link {
  font-family: var(--m);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sec);
  display: inline-block;
  margin-top: 12px;
  transition: color .2s;
}
.pp-link:hover { color: var(--acc); }

/* --- Installation photographs ---------------------------------------- */

.pp-fG .fGi { position: relative; }
.pp-fc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 11px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  font-family: var(--m);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.pp-cap {
  font-size: .93rem;
  color: var(--tx);
  line-height: 1.68;
  max-width: 78ch;
  margin: 12px 0 0;
}

/* --- Business case: three-up reuse of .wgiG -------------------------- */

.pp-wgi3 { grid-template-columns: repeat(3, 1fr); }

/* --- Track record ---------------------------------------------------- */

.pp-refs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.pp-ref {
  padding: 16px 18px;
  background: var(--pn);
  border: 1px solid var(--bd);
  border-left: 2px solid var(--sec);
  border-radius: var(--r);
}
.pp-ref-s {
  font-family: var(--c);
  font-weight: 700;
  font-size: .98rem;
  color: var(--th);
  line-height: 1.25;
}
.pp-ref-r { font-size: .88rem; color: var(--tx); margin-top: 3px; }
.pp-ref-d {
  font-family: var(--m);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--tm);
  margin-top: 8px;
  line-height: 1.5;
}

/* --- Unconfirmed content flag ---------------------------------------- */

.pp-todo {
  font-family: var(--m);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--wn);
  border: 1px dashed var(--wn);
  border-radius: var(--r);
  padding: 1px 7px;
  white-space: nowrap;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
  .pp-refs { grid-template-columns: repeat(2, 1fr); }
  .pp-wgi3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pp-qual { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .pp-refs, .pp-wgi3 { grid-template-columns: 1fr; }
  .pp-panel { padding: 18px 16px; }
  .pp-sect { margin-bottom: 34px; }
}

/* --- Theme-paired artwork ---------------------------------------------
   Some hero diagrams ship as a light and a dark rendering rather than a
   single transparent one, because the type has to invert. Both are in the
   markup; the theme picks one. The hidden variant carries loading="lazy",
   which keeps browsers from fetching an image that is display:none. */

/* .pdM-info is a fixed light plate because the older hero infographics are
   light-background JPGs. A diagram that ships a true dark rendering needs the
   plate to go dark with it — scoped to .pp-diagram so the other product
   heroes are untouched. The lightbox pad already follows the theme. */

[data-theme="dark"] .pdM-info.pp-diagram { background: #05070d; }
[data-theme="light"] .pdM-info.pp-diagram { background: #f2f3f7; }

/* .pdM-info is locked to 3/2 for the old landscape JPGs. The diagram sheets are
   a different shape, so forcing them into 3/2 letterboxed them with dead space
   on both sides. Let the artwork set the height instead. */
.pdM-info.pp-diagram { aspect-ratio: auto; padding: 0; }
.pdM-info.pp-diagram img { width: 100%; height: auto; object-fit: fill; }
[data-theme="dark"] .lbx-imgpad { background: #05070d; }

/* --- Legacy (discontinued) product pages ------------------------------- */

.lgH { margin: 6px 0 40px; }
.lgT { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lgH .pdT { margin: 0; }
.lgS {
  font-size: 1.05rem;
  color: var(--tm);
  margin: 6px 0 20px;
}
.lgBadge {
  font-family: var(--m);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wn);
  border: 1px solid var(--wn);
  border-radius: var(--r);
  padding: 5px 11px;
  white-space: nowrap;
}
.lgN { border-left-color: var(--wn); max-width: 78ch; margin-bottom: 22px; }

@media (max-width: 560px) {
  .lgT { gap: 10px; }
}

/* --- How it works / What gets installed: larger icons ------------------- */

/* 25% smaller than the 56px they were bumped to. */
.opIc { width: 42px; height: 42px; }
.opIc svg { width: 22px; height: 22px; }

/* Each installed element gets its own glyph at the same size as the
   how-it-works icons, so the two sections read as one system. */
.wgiIc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--sec);
  background: var(--in);
  margin-bottom: 10px;
}
.wgiIc svg { width: 22px; height: 22px; display: block; }
.wgiI:hover .wgiIc { border-color: var(--sec); }

@media (max-width: 560px) {
  .opIc, .wgiIc { width: 35px; height: 35px; }
  .opIc svg, .wgiIc svg { width: 19px; height: 19px; }
}

/* --- Reference sections, folded ----------------------------------------- */

.pp-accs {
  margin: 0 0 44px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pn);
}
.pp-acc { border-top: 1px solid var(--bd); }
.pp-acc:first-child { border-top: 0; }

.pp-acc-s {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.pp-acc-s::-webkit-details-marker { display: none; }
.pp-acc-s:hover .pp-acc-h { color: var(--sec); }

.pp-acc-ey {
  font-family: var(--m);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tm);
  flex: 0 0 132px;
}
.pp-acc-h {
  font-family: var(--c);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--th);
  transition: color .18s;
}
.pp-acc-i {
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 1.6px solid var(--tm);
  border-bottom: 1.6px solid var(--tm);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s;
  flex: none;
}
.pp-acc[open] .pp-acc-i { transform: rotate(-135deg) translate(-3px, -3px); }

.pp-acc-b { padding: 0 22px 24px; }
.pp-acc-b > .qa-table,
.pp-acc-b > .cW { margin-top: 2px; }

@media (max-width: 700px) {
  .pp-acc-s { flex-direction: column; align-items: flex-start; gap: 4px; padding: 15px 16px; }
  .pp-acc-ey { flex: none; }
  .pp-acc-i { position: absolute; right: 16px; top: 20px; margin: 0; }
  .pp-acc-b { padding: 0 16px 20px; }
}

/* --- Final CTA: last thing on the page ---------------------------------- */

.pp-last { margin-bottom: 0; }
.pdCta-pr { display: block; margin: 16px 0 18px; }
.pdCta-prl {
  display: block;
  font-family: var(--m);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 4px;
}
.pdCta-prv {
  display: block;
  font-family: var(--c);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--th);
}

/* Related products used to sit in a narrow column beside the CTA, so .rG was
   a single stack. Now the section runs full width and the cards need a grid. */
.pp-sect .rG { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-sect .rG .pC-img { aspect-ratio: 4 / 3; }
.pp-sect .rG .pC-img img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1000px) { .pp-sect .rG { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pp-sect .rG { grid-template-columns: 1fr; } }

/* Quantity sits inline with the element name rather than on its own line. */
.wgiN .wgiQ {
  display: inline;
  margin: 0 7px 0 0;
  font-family: var(--m);
  font-size: .82em;
  letter-spacing: .06em;
  color: var(--sec);
}

/* Technical reading sits inside the questions block: someone who has worked
   through the FAQ and still wants more is exactly who should see it. */
.pp-faq-more {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}
.pp-faq-more-t {
  font-family: var(--c);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--th);
  margin-bottom: 5px;
}
.pp-faq-more-p {
  font-size: .92rem;
  color: var(--tm);
  line-height: 1.6;
  max-width: 70ch;
  margin: 0 0 14px;
}