/* Match the invisible-bass diagram to the product page's light blue surface. */
.product-range-page #invisible-bass {
  --bass-diagram-ink: var(--amina-blue, #274b5b);
  --bass-diagram-line: var(--visual-text-secondary, #4b6068);
}
.product-range-page #invisible-bass .pr-building-frame,
.product-range-page #invisible-bass .pr-building-frame::before,
.product-range-page #invisible-bass .pr-building-body::before {
  border-color: var(--bass-diagram-line);
}
.product-range-page #invisible-bass .pr-building-body,
.product-range-page #invisible-bass .pr-building-frame::after {
  border-color: var(--bass-diagram-ink);
}
.product-range-page #invisible-bass .pr-building-body {
  background: var(--visual-surface-cool, #f2f5f5);
}
.product-range-page #invisible-bass .pr-building-port::before {
  background: var(--bass-diagram-ink);
}
.product-range-page #invisible-bass .pr-install-types > div,
.product-range-page #invisible-bass .pr-passive-note {
  border-top-color: var(--bass-diagram-line);
}
.product-range-page #invisible-bass .pr-passive-note > strong {
  color: var(--bass-diagram-ink);
}
/* Leave room for the current site typography inside the port outline. */
.product-range-page #invisible-bass .pr-building-frame::after {
  top: calc(50% - 18px);
  width: 68px;
  height: 36px;
}
.product-range-page #invisible-bass .pr-building-port {
  top: calc(50% - 18px);
  right: 0;
  display: grid;
  place-items: center;
  width: 68px;
  height: 36px;
}
.product-range-page #invisible-bass .pr-building-port::before {
  top: 50%;
}
@media (max-width: 560px) {
  .product-range-page #invisible-bass .pr-building-port::before {
    width: clamp(16px, calc(100vw - 322px), 68px);
  }
}