/* ---- moederbord (Moederbord — PC parts, GPUs & custom rigs 334) -------------
   Paper-white discount-retail ground, near-black ink, slate-grey kickers, and
   one deal red spent on the rand figure and the buy slab and nowhere else.
   THE STRUCTURAL MOVE: the page closes on a SINGLE unbroken row of EIGHT
   category tiles at 12.5% each. parseSections caps a strip at six items, so the
   rail is authored as two four-item strips floated at 50% of the page width
   each — percentages, never 50vw, which overflows by the scrollbar and drops
   the second half onto its own line — and the second strip's row is pushed down
   by exactly the 40px box of the first strip's fixed-size heading so all eight
   tiles land on one baseline. The two offer bands above it are boxed 50/50
   splits that MIRROR: copy left / picture right, then picture left / copy
   right, butted together with a 2px seam. --radius: 0 flattens every tile,
   field and photograph in one line, which is the retail read. */
body.t-moederbord { background: #ffffff; color: #101418; --radius: 0; --surface: #ffffff; --surface-2: #f4f5f7; --line: #e4e6ea; --line-strong: #ccd1d8; --heading: #101418; --text: #2b3138; --muted: #6b7280; }
body.t-moederbord .sf-header, body.t-moederbord .sf-footer { background: #ffffff; border-color: #e4e6ea; }
/* the red is a price colour, so the one slab that spends it is the only one */
body.t-moederbord .btn.brand { background: #d92d20; color: #ffffff; border-radius: 3px; box-shadow: none; font-weight: 700; letter-spacing: 0.03em; padding: 14px 28px; }
body.t-moederbord .btn.brand:hover { background: #ae231a; }
body.t-moederbord .sc-hero { min-height: 100vh; }
body.t-moederbord .sc-hero h1, body.t-moederbord .sc-h2, body.t-moederbord .sc-banner h2 { font-weight: 800; letter-spacing: -0.025em; }
/* the catalogue is the spine — four across, two rows that fill exactly */
body.t-moederbord .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; }
/* boxed parts photographed flat: the shot floats inside the tile grey rather
   than being cropped to fill it, which is what makes a components counter read
   as a components counter and not as a lookbook */
body.t-moederbord .sc-buy-media, body.t-moederbord .sc-strip-img { border: 0; padding: 11%; }
body.t-moederbord .sc-buy-media img, body.t-moederbord .sc-strip-img img { aspect-ratio: 1; object-fit: contain; }
body.t-moederbord .sc-buy-cat, body.t-moederbord .sc-strip-label { color: #6b7280; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 12px; padding-bottom: 10px; }
body.t-moederbord .sc-buy-p { color: #d92d20; font-size: 17px; font-weight: 800; margin-top: 5px; }
/* OFFER BAND ONE — boxed, not full bleed: the picture is sized to the RIGHT
   half of the band and the copy sits in the empty left half on tile grey */
body.t-moederbord .sc-banner { width: auto; max-width: none; margin: 36px 0 0; padding: 0; min-height: 400px; display: flex; align-items: center; text-align: left; background-color: #f4f5f7; background-size: 50% 100%; background-position: 100% 50%; background-repeat: no-repeat; }
body.t-moederbord .sc-banner-inner { width: 50%; max-width: none; margin: 0; padding: 44px clamp(22px, 4vw, 62px); }
body.t-moederbord .sc-banner h2, body.t-moederbord .sc-banner p { color: #101418; text-shadow: none; }
body.t-moederbord .sc-banner p { color: #6b7280; }
/* OFFER BAND TWO — the mirror, butted onto the first with a 2px seam */
body.t-moederbord section:has(> .sc-banner) + section:has(> .sc-banner) .sc-banner { background-position: 0 50%; justify-content: flex-end; margin-top: 2px; }
/* THE ROW OF EIGHT — two halves of the page, four gapless tiles in each */
body.t-moederbord .sc-strip { float: left; width: 50%; max-width: none; margin: 0; padding: 44px 0 0; }
body.t-moederbord .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
/* a fixed 20px + 20px heading box, matched exactly by the second half's offset */
body.t-moederbord .sc-strip .sc-h2 { height: 20px; line-height: 20px; margin: 0 0 20px; padding-left: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-align: left; color: #6b7280; }
body.t-moederbord .sc-strip + .sc-strip .sc-strip-row { margin-top: 40px; }
/* the only dark surface on the page, and it clears the floated rail above it */
body.t-moederbord .sc-contact-band { clear: both; background: #101418; color: #ffffff; margin-top: 64px; padding: 76px 0 84px; }
body.t-moederbord .sc-contact-band .sc-h2 { color: #ffffff; }
body.t-moederbord .sc-contact-band .sc-contact-sub { color: rgba(255, 255, 255, 0.68); }
body.t-moederbord .sc-contact-band input, body.t-moederbord .sc-contact-band textarea { background: #1a1f26; border-color: #2b323b; color: #ffffff; }
@media (max-width: 900px) {
  body.t-moederbord .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-moederbord .sc-strip { float: none; width: 100%; padding: 26px 0 0; }
  body.t-moederbord .sc-strip + .sc-strip .sc-strip-row { margin-top: 0; }
  body.t-moederbord .sc-banner, body.t-moederbord section:has(> .sc-banner) + section:has(> .sc-banner) .sc-banner { display: block; min-height: 0; background-size: 100% 210px; background-position: 50% 100%; }
  body.t-moederbord .sc-banner-inner { width: 100%; padding-bottom: 232px; }
}

/* NIGHT — the retail white goes graphite, the tile grey lifts to a slate the
   flat-lays still float on, and the deal red brightens one step so a rand
   figure still reads as a price rather than as a warning. */
html[data-theme="dark"] body.t-moederbord { background: #0f1216; color: #c5cbd3; --surface: #161a20; --surface-2: #1b2028; --line: #262c34; --line-strong: rgba(255, 255, 255, 0.16); --heading: #f1f3f6; --text: #c5cbd3; --muted: #8a929c; }
html[data-theme="dark"] body.t-moederbord .sf-header, html[data-theme="dark"] body.t-moederbord .sf-footer { background: #0f1216; border-color: #262c34; }
html[data-theme="dark"] body.t-moederbord .btn.brand { background: #ff5a4a; color: #14171b; }
html[data-theme="dark"] body.t-moederbord .btn.brand:hover { background: #ff7a6c; }
html[data-theme="dark"] body.t-moederbord .sc-banner { background-color: #1b2028; }
html[data-theme="dark"] body.t-moederbord .sc-banner h2 { color: #f1f3f6; }
html[data-theme="dark"] body.t-moederbord .sc-banner p, html[data-theme="dark"] body.t-moederbord .sc-buy-cat, html[data-theme="dark"] body.t-moederbord .sc-strip-label, html[data-theme="dark"] body.t-moederbord .sc-strip .sc-h2 { color: #8a929c; }
html[data-theme="dark"] body.t-moederbord .sc-buy-p { color: #ff5a4a; }
html[data-theme="dark"] body.t-moederbord .sc-contact-band { background: #161a20; }
html[data-theme="dark"] body.t-moederbord .sc-contact-band input, html[data-theme="dark"] body.t-moederbord .sc-contact-band textarea { background: #0f1216; border-color: #2b323b; }