/* ---- patchbay (Patchbay — Comms room & network cabling 194) ----------------
   THE STRUCTURAL MOVE: THE SAME-HANDED SPLIT. Both prose bands put the
   photograph on the RIGHT — `.sc-about-media` is the first grid child, so it is
   pushed past the copy with `order` rather than by rewriting the markup — and
   neither band mirrors the other. That refusal to zigzag is the tic: the copy
   column, not the picture, is the thing the eye tracks straight down the page,
   which is what makes a text-led ladder read as a document instead of a
   template. Everything under the stage is CONTAINED — the banner gives up its
   100vw bleed so not one photograph below the fold touches the window, and the
   strip tile, the product card and the tier card are the same white box on the
   same zinc ground behind the same hairline. The hero's sub is lifted above the
   headline with `order: -1`, which is how the reference's small eyebrow gets
   built out of the three fields a hero actually has. ONE rule sets the strip,
   the catalogue and the tier row four across together — the reference's 3/3/3
   becomes 4/4/4/4 the whole way down. The cold patch-cord blue is spent on the
   controls, the rand figures, the second (lifted) tier and the closing band;
   the ordinary tier buttons go graphite on purpose, so the lifted card is the
   only blue thing in its row. */
body.t-patchbay {
  background: #f1f2f4;
  color: #22262d;
  --pb-blue: #1b4fe0;
  --radius: 0;
  --shadow: none;
  --header-bg: #f1f2f4;
  --surface: #ffffff;
  --surface-2: #e5e8ee;
  --line: #d7dae0;
  --line-strong: #c1c6d0;
  --heading: #191b1f;
  --text: #22262d;
  --muted: #6c7280;
}

/* flat chrome, nothing glassy — the bar is furniture, not an app shell */
body.t-patchbay .sf-header, body.t-patchbay .sf-head,
body.t-patchbay .sf-footer, body.t-patchbay .sf-foot, body.t-patchbay .sf-cats {
  background: #f1f2f4; border-color: #d7dae0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* THE BAR FLOATS ON THE STAGE — wordmark hard left, links and the one solid
   control right, no rule under it. Scoped by :has so the cart, search and
   product pages, which have no hero to float over, keep a solid header. */
body.t-patchbay:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-patchbay:has(.sc-hero) .sf-name, body.t-patchbay:has(.sc-hero) .sf-navlink,
body.t-patchbay:has(.sc-hero) .sf-cart, body.t-patchbay:has(.sc-hero) .theme-toggle { color: #f4f6fa; }
/* the magnifier and the category rail would both land underneath a floating bar */
body.t-patchbay:has(.sc-hero) .sf-searchbtn, body.t-patchbay:has(.sc-hero) .sf-cats { display: none; }

/* the blue, as a flat slab — never an outline, only ever on a control */
body.t-patchbay .btn.brand { background: var(--pb-blue); border: 0; box-shadow: none; color: #f2f5ff; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; font-size: 11px; padding: 16px 32px; }

/* the stage: three slides, full viewport, copy centred and vertically centred */
body.t-patchbay .sc-hero { min-height: 100vh; padding: 132px 20px 100px; }
body.t-patchbay .sc-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 780px; }
/* THE EYEBROW — the sub climbs above the headline instead of sitting under it */
body.t-patchbay .sc-hero-inner p { order: -1; margin: 0 0 22px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(241, 242, 244, 0.82); }
body.t-patchbay .sc-hero h1 { font-weight: 800; font-size: clamp(32px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -0.03em; max-width: 16ch; margin: 0 0 32px; }

/* the ladder: one rhythm, every band the same height of air, all of it contained */
body.t-patchbay .sc-h2 { text-align: left; font-weight: 700; font-size: clamp(19px, 2.4vw, 27px); margin-bottom: 26px; }
body.t-patchbay .sc-strip, body.t-patchbay .sc-products,
body.t-patchbay .sc-buygrid, body.t-patchbay .sc-about-split { padding: 58px 20px; }

/* 4 / 4 / 4 / 4 — the strip, the catalogue and the tier row set together */
body.t-patchbay .sc-strip-row, body.t-patchbay .product-grid, body.t-patchbay .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 0; }
body.t-patchbay .sc-strip-card, body.t-patchbay .sc-buy-card { background: var(--surface); border: 1px solid var(--line); padding: 18px; text-align: left; align-items: stretch; }
body.t-patchbay .sc-strip-img { border: 0; aspect-ratio: 16 / 10; }
/* the second small row — same four tiles, shallower, so it reads as a footnote
   to the first one rather than a repeat of it */
body.t-patchbay .sc-about-split + .sc-strip .sc-strip-img { aspect-ratio: 16 / 7; }

/* THE UNMIRRORED SPLIT — the media cell is the first child in the markup, so
   ordering it last puts the photograph on the right in BOTH bands */
body.t-patchbay .sc-about-media { order: 2; }
body.t-patchbay .sc-about-media img { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
body.t-patchbay .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.9; }

/* the single visual full stop, and the only image between the two halves —
   contained, because nothing below the stage is allowed to reach the window */
body.t-patchbay .sc-banner { margin: 20px 0 64px; width: auto; max-width: none; min-height: 46vh; display: flex; align-items: center; justify-content: center; }

/* THE TIER TABLE — real priced stock built as the reference's pricing row.
   Graphite buttons everywhere, so the lifted second card is the only blue. */
body.t-patchbay .sc-buy-card .btn.brand { background: var(--heading); color: #f1f2f4; width: 100%; }
body.t-patchbay .sc-buy-cat { color: var(--muted); letter-spacing: 0.16em; }
body.t-patchbay .product-card .p, body.t-patchbay .sc-buy-p { color: var(--pb-blue); font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
body.t-patchbay .sc-buy-card:nth-child(2) { border-color: var(--pb-blue); box-shadow: 0 0 0 1px var(--pb-blue); transform: translateY(-14px); }
body.t-patchbay .sc-buy-card:nth-child(2) .btn.brand { background: var(--pb-blue); color: #f2f5ff; }

/* the page closes on the one painted band. Form tokens are re-pointed inside it
   so the fields sit on blue instead of on zinc. */
body.t-patchbay .sc-contact-band { background: var(--pb-blue); color: #eaefff; margin-top: 44px; padding: 84px 0 92px; --muted: #c6d3fb; --surface: #2f5fe6; --line: #5b82ea; }
body.t-patchbay .sc-contact-band .btn.brand { background: #f1f2f4; color: #14203f; }

@media (max-width: 980px) {
  body.t-patchbay .sc-hero { min-height: 84vh; }
  body.t-patchbay .sc-strip-row, body.t-patchbay .product-grid, body.t-patchbay .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-patchbay .sc-buy-card:nth-child(2) { transform: none; }
  body.t-patchbay .sc-about-media { order: 0; }
}

/* NIGHT — the room with the lights off. Zinc goes to cold graphite and the
   hairline with it, and the blue lifts two steps: #1b4fe0 was picked against a
   pale ground and goes to a bruise on a near-black one, so at night the slab
   takes dark type. The band cannot take the lifted blue at full width — it
   would glow — so it drops to the deep end of the same hue instead, and the
   graphite tier buttons invert with the ink they were made from. */
html[data-theme="dark"] body.t-patchbay {
  background: #14161a;
  color: #b7bdc7;
  --pb-blue: #5b84ff;
  --header-bg: #14161a;
  --surface: #1b1f25;
  --surface-2: #232830;
  --line: #2c313a;
  --line-strong: #3b424e;
  --heading: #eef1f6;
  --text: #b7bdc7;
  --muted: #7d8593;
}
html[data-theme="dark"] body.t-patchbay .sf-header, html[data-theme="dark"] body.t-patchbay .sf-head,
html[data-theme="dark"] body.t-patchbay .sf-footer, html[data-theme="dark"] body.t-patchbay .sf-foot,
html[data-theme="dark"] body.t-patchbay .sf-cats { background: #14161a; border-color: #2c313a; }
html[data-theme="dark"] body.t-patchbay .btn.brand { color: #0b1226; }
html[data-theme="dark"] body.t-patchbay .sc-buy-card .btn.brand { background: #eef1f6; color: #14161a; }
html[data-theme="dark"] body.t-patchbay .sc-contact-band { background: #1b3ea8; color: #e7ecfb; --muted: #a9b8e4; --surface: #25489f; --line: #3f5cb5; }
html[data-theme="dark"] body.t-patchbay .sc-contact-band .btn.brand { background: #eef1f6; color: #14161a; }