/* ---- bartack (Bartack — Packs & carry 103) --------------------------------
   THE STRUCTURAL MOVE: total centre symmetry, broken by exactly one plane.
   There is not a single split block on this page — hero copy dead centre, both
   prose blocks centred columns, the contact band centred, and even the submit
   button pulled back to the middle, since the shared sheet flushes it left and
   that would be the one asymmetric thing on the whole scroll. Against all that
   bone paper, the catalogue is the only surface that is NOT paper: the showcase
   run goes pure white with its gutter dropped to zero, so the flat-lays butt
   edge to edge and read cooler and inset without a border — the way the
   reference butts its screenshots together. Cobalt is rationed to the buttons,
   the strip labels and the two price lines; the category labels are pushed back
   to grey on purpose so the accent stays spent in three places only. */
body.t-bartack {
  background: #f4f1ea;
  color: #56534c;
  --bt-blue: #1f4d9c;
  --surface: #ffffff;
  --surface-2: #eae5da;
  --line: #ddd7c9;
  --line-strong: #c5bfae;
  --heading: #14161a;
  --text: #56534c;
  --muted: #77736a;
  --header-bg: #f4f1ea;
  --radius: 0;
  --shadow: none;
}

/* the bar takes the paper ground and loses its blur, so it dissolves into the
   page instead of sitting on it — as close as a sticky header gets to the
   reference's transparent floating nav without letting type scroll under it */
body.t-bartack .sf-header, body.t-bartack .sf-head,
body.t-bartack .sf-footer, body.t-bartack .sf-foot {
  background: #f4f1ea; border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-bartack .btn.brand { background: var(--bt-blue); border-color: var(--bt-blue); color: #ffffff; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11px; padding: 15px 32px; }

/* the opener owns the whole first screen: three cross-fading slides, headline
   and one slab stacked dead centre and nothing beside them */
body.t-bartack .sc-hero { min-height: 100vh; }
body.t-bartack .sc-hero h1 { font-weight: 700; font-size: clamp(32px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; margin: 0 auto 16px; }

/* whitespace is spent as vertical distance between bands, not at the page
   edges, so content runs wide while the sections sit far apart */
body.t-bartack .sc-strip, body.t-bartack .sc-buygrid, body.t-bartack .sc-contact { padding: 100px 20px 104px; }
body.t-bartack .sc-showcase { padding: 44px 0 96px; }
body.t-bartack .sc-richtext { max-width: 660px; padding: 112px 20px 104px; }
body.t-bartack .sc-h2 { font-size: clamp(21px, 3vw, 31px); color: var(--heading); margin-bottom: 30px; }
body.t-bartack .sc-richtext p, body.t-bartack .sc-about-overlay p { font-size: 17px; line-height: 1.95; }

/* four macro crops in one unbroken row, one word under each — the accent's
   first resting place */
body.t-bartack .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.t-bartack .sc-strip-label { margin-top: 14px; color: var(--bt-blue); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; }

/* --- THE WHITE RUN: flat-lays butted together, no gutter, no checkerboard --- */
body.t-bartack .sc-show-grid { gap: 0; }
body.t-bartack .sc-show-item { background: #ffffff; }
body.t-bartack .sc-show-inner { min-height: 560px; padding: 54px 28px 58px; }
body.t-bartack .sc-show-media img { max-width: 80%; max-height: 300px; }
body.t-bartack .sc-show-cat, body.t-bartack .sc-buy-cat { color: var(--muted); font-weight: 600; }
body.t-bartack .sc-show-price, body.t-bartack .sc-buy-p { color: var(--bt-blue); font-weight: 700; }
body.t-bartack .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 32px; }

/* both catalogues are pinned to counts that fill their rows — 4 and 6 across
   two widths, never an orphan tile */
@media (min-width: 900px) {
  body.t-bartack .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.t-bartack .sc-show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-bartack .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.t-bartack .sc-banner { margin: 0 calc(50% - 50vw); min-height: 60vh; display: flex; align-items: center; }
/* the one line that keeps the symmetry whole */
body.t-bartack .sc-contact-form .btn { align-self: center; }

/* NIGHT — the paper goes out and the ink comes up. The catalogue keeps its job
   of being the inset plane, so it goes DARKER than the ground rather than
   lighter, and the cobalt lifts to a thread blue that can hold against it. */
html[data-theme="dark"] body.t-bartack {
  background: #15161a;
  color: #b3afa6;
  --bt-blue: #7ea6ff;
  --surface: #1c1e23;
  --surface-2: #22242a;
  --line: #2b2e35;
  --line-strong: #3c414a;
  --heading: #f1eee6;
  --text: #b3afa6;
  --muted: #8b877e;
  --header-bg: #15161a;
}
html[data-theme="dark"] body.t-bartack .sf-header, html[data-theme="dark"] body.t-bartack .sf-head,
html[data-theme="dark"] body.t-bartack .sf-footer, html[data-theme="dark"] body.t-bartack .sf-foot { background: #15161a; border-color: #2b2e35; }
html[data-theme="dark"] body.t-bartack .sc-show-item { background: #0f1115; }
html[data-theme="dark"] body.t-bartack .btn.brand { color: #10131a; }