/* ---- frit (Frit — Enamelware & camp kitchen 234) --------------------------
   THE STRUCTURAL MOVE: THE COLOUR CHOOSER IS THE PRODUCT. Eight enamel chips
   are cut round, laid four across in two rows and welded into one block —
   parseSections caps a strip at SIX items, so the chooser ships as two strips
   of four and the second one's top padding is set to the row's own gap, which
   makes the pair read as a single 4 x 2 grid rather than two sections. Both
   rows are reached by the same class because the chooser is the only strip on
   the page; no element-type selector is needed or wanted. Everything around
   it is flattened so it can carry the page: the catalogue gives up its cards
   and becomes three butted photographs a row with a centred caption under
   each, and the two story bands zig-zag before a single price appears. Chalk
   paper, ink type, and one cobalt rationed to four jobs — the controls, the
   48px hairline under every heading, the ring on the chip you are pointing at,
   and nothing else. ------------------------------------------------------- */
body.t-frit {
  background: #f4f1ea;
  color: #3a352e;
  --fr-cobalt: #1b4a86;
  --fr-deep: #143a6a;
  --bg-flat: #f4f1ea;
  --header-bg: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #ece7dc;
  --line: #ded7c8;
  --line-strong: #c6bda9;
  --heading: #14110f;
  --text: #3a352e;
  --muted: #7d766a;
  --radius: 0;
  --shadow: none;
}

/* flat chalk bars top and bottom, no blur and no lift — the page is paper all
   the way through and the only depth on it is in the photographs */
body.t-frit .sf-head, body.t-frit .sf-header,
body.t-frit .sf-foot, body.t-frit .sf-footer, body.t-frit .sf-cats {
  background: #f4f1ea; border-color: #ded7c8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-frit .sf-name, body.t-frit .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* COBALT 1 of 4 — every control is a flat cobalt slab with no edge on it */
body.t-frit .btn.brand { background: var(--fr-cobalt); border: 0; color: #f4f1ea; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-frit .btn.brand:hover { background: var(--fr-deep); color: #f4f1ea; }

/* the opener: three cross-fading slides, a whole screen of photograph, the
   headline and the outline button held to the left third and nothing beside them */
body.t-frit .sc-hero { min-height: 100vh; padding: 104px max(24px, calc(50vw - 600px)); }
body.t-frit .sc-hero-left .sc-hero-inner { max-width: 520px; margin: 0; }
body.t-frit .sc-hero h1 { font-size: clamp(33px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -0.02em; }
body.t-frit .sc-hero p { text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px, 1.5vw, 13px); line-height: 2; }

/* COBALT 2 of 4 — a 48px hairline under every heading on the page, centred
   under the centred ones and flush left under the story band's */
body.t-frit .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; color: var(--heading); margin-bottom: 32px; }
body.t-frit .sc-h2::after { content: ''; display: block; width: 48px; height: 2px; margin: 16px auto 0; background: var(--fr-cobalt); }
body.t-frit .sc-about-copy .sc-h2::after { margin-left: 0; }
body.t-frit .sc-about-overlay .sc-h2::after { background: rgba(255, 255, 255, 0.86); }

/* THE CATALOGUE, DELIBERATELY QUIET — three across, butted almost together,
   a square photograph over a centred caption and no card around any of it.
   Six tiles, so both rows fill exactly. */
body.t-frit .sc-products { padding: 100px 20px 104px; }
body.t-frit .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
body.t-frit .product-card { background: transparent; border: 0; }
body.t-frit .product-card .meta { text-align: center; padding: 18px 12px 30px; }

/* the one full-bleed interruption between the catalogue and the chooser */
body.t-frit .sc-banner { min-height: 60vh; display: flex; align-items: center; }

/* THE CHOOSER — the load-bearing block. Two strips of four, welded by giving
   the second the same 40px the row uses as its own gutter, so eight round
   chips land as one 4 x 2 grid with even air all through it. */
body.t-frit .sc-strip { padding: 104px 20px 0; }
body.t-frit .sc-strip + .sc-strip { padding: 40px 20px 104px; }
body.t-frit .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
body.t-frit .sc-strip-img { border-radius: 50%; border: 1px solid var(--line-strong); }
/* COBALT 3 of 4 — the chip under the cursor is the chosen one */
body.t-frit .sc-strip-card:hover .sc-strip-img { box-shadow: 0 0 0 4px var(--bg-flat), 0 0 0 6px var(--fr-cobalt); }
body.t-frit .sc-strip-label { margin-top: 16px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; color: var(--muted); line-height: 1.8; }

/* COBALT 4 of 4 sits in the submit button — the page ends on us, on the same
   chalk ground it opened on, in a narrow column with nothing beside it */
body.t-frit .sc-contact { padding: 96px 20px 112px; }

@media (max-width: 900px) {
  body.t-frit .sc-hero { min-height: 84vh; }
  body.t-frit .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-frit .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the chalk and the ink swap places: a warm near-black ground with the
   paper colour lifted into the type, and the cobalt taken two stops brighter so
   the heading hairlines and the chip ring survive against it. The ring reads
   var(--bg-flat) for its inner band, so it re-cuts itself against the dark
   ground with no extra rule. */
html[data-theme="dark"] body.t-frit {
  background: #14120f;
  color: #cdc6b8;
  --fr-cobalt: #4f8ad0;
  --fr-deep: #6ba0de;
  --bg-flat: #14120f;
  --header-bg: #14120f;
  --surface: #1c1915;
  --surface-2: #221e19;
  --line: #2b2620;
  --line-strong: #423a31;
  --heading: #f4f1ea;
  --text: #cdc6b8;
  --muted: #8b8377;
}
html[data-theme="dark"] body.t-frit .sf-head, html[data-theme="dark"] body.t-frit .sf-header,
html[data-theme="dark"] body.t-frit .sf-foot, html[data-theme="dark"] body.t-frit .sf-footer,
html[data-theme="dark"] body.t-frit .sf-cats { background: #14120f; border-color: #2b2620; }
html[data-theme="dark"] body.t-frit .btn.brand { color: #0e0c0a; }
html[data-theme="dark"] body.t-frit .btn.brand:hover { color: #0e0c0a; }