/* TRENCHER — academic dress & school outfitting. THE BRACKET is the whole move:
   one catalogue of eight is broken across two grids of four with identical
   geometry, one near the top of the page and one near the bottom, and
   everything caught between them runs full-bleed and dead centre. The split is
   done on the section IDs the renderer already emits — the first products block
   is #products and the second is #products-2 — and the :not(.sample) guard
   keeps a store with no stock yet from hiding its own placeholder row. The
   middle richtext is authored as 'split' only because the centred richtext
   layout renders no photograph at all; the grid is collapsed to one column here
   so it reads as the reference's single big centred plate with its copy
   beneath. Navy is spent on the bar, the closing band and the footer, oxblood
   on nothing but the controls and the price line, and there is no third colour
   anywhere on the page. */
body.t-trencher {
  background: #f2ede3;
  color: #333a47;
  --tr-navy: #1b2333;
  --tr-ox: #8a2833;
  --bg-flat: #f2ede3;
  --surface: #faf7f0;
  --surface-2: #e8e1d4;
  --line: #ded5c6;
  --line-strong: #c3b8a4;
  --heading: #1b2333;
  --text: #333a47;
  --muted: #6f6a60;
  --header-bg: #1b2333;
  --radius: 0;
  --shadow: none;
}

/* the bar refuses to overlap the photograph — flat navy, no blur, and a hard
   horizontal edge the hero begins underneath. The footer is the same slab, so
   the closing band runs straight into it without a seam. */
body.t-trencher .sf-header, body.t-trencher .sf-head,
body.t-trencher .sf-footer, body.t-trencher .sf-foot {
  background: var(--tr-navy); border-color: var(--tr-navy); margin-top: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-trencher .sf-header .sf-name, body.t-trencher .sf-header .sf-cart,
body.t-trencher .sf-header .sf-searchbtn,
body.t-trencher .sf-footer, body.t-trencher .sf-footer a { color: #e6dfd2; }
body.t-trencher .sf-name, body.t-trencher .sc-hero h1, body.t-trencher .sc-h2,
body.t-trencher .sc-banner h2, body.t-trencher .product-card .t {
  font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.005em;
}
body.t-trencher .sf-name { font-size: 22px; letter-spacing: 0.015em; }

/* OXBLOOD — the controls, flat slab, no visible edge */
body.t-trencher .btn.brand { background: var(--tr-ox); border-color: var(--tr-ox); color: #f7f1e7; box-shadow: none; font-weight: 600; letter-spacing: 0.04em; padding: 14px 30px; }
body.t-trencher .btn.brand:hover { background: #6d1d27; border-color: #6d1d27; }

body.t-trencher .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-trencher .sc-hero h1 { font-size: clamp(36px, 6.6vw, 86px); line-height: 1.05; margin-bottom: 16px; }
body.t-trencher .sc-h2 { font-size: clamp(22px, 2.9vw, 32px); color: var(--heading); margin: 0 0 32px; }
body.t-trencher .sc-products, body.t-trencher .sc-strip { padding: 88px 20px 84px; }

/* THE BRACKET — the same eight products, the first four in the top grid and the
   other four in the bottom one, both grids identical in every other respect */
body.t-trencher #products .product-card:not(.sample):nth-child(n + 5),
body.t-trencher #products-2 .product-card:not(.sample):nth-child(-n + 4) { display: none; }
body.t-trencher .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; padding: 0; }
body.t-trencher .product-card { background: transparent; border: 0; border-radius: 0; }
body.t-trencher .product-card .ph { aspect-ratio: 4 / 3; background: #ffffff; }
/* the tic worth keeping: the tile copy is ranged left while the section heading
   above it stays centred */
body.t-trencher .product-card .meta { padding: 15px 0 0; text-align: left; }
body.t-trencher .product-card .t { font-size: 18px; }
body.t-trencher .product-card .p { color: var(--tr-ox); font-weight: 600; font-size: 15px; margin-top: 6px; }

/* the centred middle, one of three: the plate. Full-bleed pale ground, the
   split folded into a single narrow column so the photograph sits centred with
   its forty words underneath. */
body.t-trencher .sc-about-split {
  grid-template-columns: 1fr; gap: 34px; max-width: none; width: 100vw;
  margin: 0 calc(50% - 50vw); background: #e8e1d4;
  padding: 100px max(20px, calc(50vw - 330px)) 104px;
}
body.t-trencher .sc-about-copy, body.t-trencher .sc-about-copy .sc-h2 { text-align: center; }

/* two: the fitting band, full-bleed and pulled towards navy under the photograph */
body.t-trencher .sc-banner {
  margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; min-height: 58vh;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--tr-navy); background-blend-mode: multiply;
}

/* three: six uniform marks on one line, one word under each, no heading at all */
body.t-trencher .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
body.t-trencher .sc-strip-label { margin-top: 12px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* the page closes on the same navy it opened under */
body.t-trencher .sc-contact-band { background: var(--tr-navy); color: #e6dfd2; padding: 96px 0 104px; }
body.t-trencher .sc-contact-band .sc-h2, body.t-trencher .sc-contact-band .sc-contact-sub { color: #e6dfd2; }
body.t-trencher .sc-contact-band .sc-field input, body.t-trencher .sc-contact-band .sc-field textarea { background: #f2ede3; border-color: #f2ede3; color: #1b2333; }

@media (max-width: 900px) {
  body.t-trencher .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-trencher .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* NIGHT — bone goes to cold slate and the navy drops below it, so the bar, the
   fitting band and the closing panel are still the darkest things on the page
   and the bracket still reads as two lit rows against them. The oxblood lifts
   to a dusty rose because it is carrying every control and every price on its
   own against a dark ground. The bar, the footer, the banner tint and the
   closing band all resolve through --tr-navy, so they follow the token. */
html[data-theme="dark"] body.t-trencher {
  background: #151a21;
  color: #c2c7d0;
  --tr-navy: #0e131a;
  --tr-ox: #c2666f;
  --bg-flat: #151a21;
  --surface: #1c222b;
  --surface-2: #202733;
  --line: #2d3540;
  --line-strong: #424b58;
  --heading: #ecedf0;
  --text: #c2c7d0;
  --muted: #868d99;
  --header-bg: #0e131a;
}
html[data-theme="dark"] body.t-trencher .product-card .ph { background: #1c222b; }
html[data-theme="dark"] body.t-trencher .sc-about-split { background: #1a2029; }
html[data-theme="dark"] body.t-trencher .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-trencher .sc-contact-band .sc-field textarea { background: #1c222b; border-color: #2d3540; color: #ecedf0; }
html[data-theme="dark"] body.t-trencher .btn.brand { color: #1b0d10; }