/* ---- banneton (Banneton — Bakery & mill room 111) --------------------------
   THE STRUCTURAL MOVE: the showcase stops being a checkerboard of half-width
   panels and becomes a CONTAINED ROW OF GAPPED TILES. The photograph is pulled
   to the top of each cell with `order` and given a 4:5 crop so it fills roughly
   two thirds of the tile; the name, its category line and the rand figure stack
   underneath. Around that the page alternates picture and text in strict turns —
   a centred masthead that scrolls away instead of sticking, a full-viewport
   slider, then a bare imageless column carrying more vertical air than anything
   else on the page. Oat-cream ground, rye-brown ink, and burnt crust rationed to
   exactly two homes: the buttons and the price figures. Nothing else is warm
   except the photographs. ------------------------------------------------- */
body.t-banneton {
  background: #f4ece0;
  color: #3a2c22;
  --bn-crust: #b4642f;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bg-flat: #f4ece0;
  --surface: #efe4d4;
  --surface-2: #e9dcc8;
  --line: #ded0ba;
  --line-strong: #c9b89e;
  --heading: #2c211a;
  --text: #3a2c22;
  --muted: #7d6a58;
  --header-bg: #f4ece0;
  --radius: 0;
  --shadow: none;
}

/* the masthead simply scrolls away — not fixed, not sticky, no blur, no shrink */
body.t-banneton .sf-header, body.t-banneton .sf-head,
body.t-banneton .sf-foot, body.t-banneton .sf-footer, body.t-banneton .sf-cats {
  position: static;
  background: #f4ece0;
  border-color: #ded0ba;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* logo centred on its own line with the menu ranged underneath it, so nothing
   above the fold is left-aligned */
/* header stays one row, brand hard left — house rule; the theme keeps its
   own type, colour and rhythm, it just does not restack or centre the name */
body.t-banneton .sf-header .container { gap: 16px; padding-top: 24px; padding-bottom: 20px; }
body.t-banneton .sf-name, body.t-banneton .sc-hero h1, body.t-banneton .sc-h2,
body.t-banneton .sc-show-t, body.t-banneton .sc-buy-t, body.t-banneton .pdp h1 { font-family: var(--sf-serif); font-weight: 400; }
body.t-banneton .sf-name { font-size: 26px; letter-spacing: 0.16em; text-transform: uppercase; }

/* CRUST 1 of 2 — a flat slab with no ring around it */
body.t-banneton .btn.brand { background: var(--bn-crust); border-color: var(--bn-crust); color: #fff8f0; box-shadow: none; padding: 13px 28px; }

/* the whole first screen: three cross-fading photographs with the heading, one
   line of sub and one outlined button stacked dead centre — which leaves the
   bottom third of the frame empty on purpose */
body.t-banneton .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-banneton .sc-hero h1 { font-size: clamp(38px, 6.2vw, 74px); line-height: 1.06; letter-spacing: -0.01em; margin-bottom: 18px; }

/* the heritage column — no photograph, the narrowest measure on the page and
   the widest vertical air. The emptiness is what makes the tile row below land. */
body.t-banneton .sc-richtext { max-width: 620px; padding: 150px 20px 134px; }
body.t-banneton .sc-richtext p { color: #4a382c; font-size: 17px; line-height: 1.92; }

/* --- THE TILE ROW: contained, gapped, photograph on top of every cell --- */
body.t-banneton .sc-show-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 26px; max-width: 1080px; margin: 0 auto; padding: 0 20px 8px; }
body.t-banneton .sc-show-item, body.t-banneton .sc-show-inner { background: transparent; padding: 0; min-height: 0; }
body.t-banneton .sc-show-media { order: 1; flex: none; padding: 0; }
body.t-banneton .sc-show-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; }
body.t-banneton .sc-show-t { order: 2; margin-top: 16px; font-size: 18px; text-transform: none; letter-spacing: 0; }
body.t-banneton .sc-show-cat { order: 3; margin-top: 7px; color: var(--muted); letter-spacing: 0.18em; font-weight: 500; }
body.t-banneton .sc-show-rule { display: none; }
/* CRUST 2 of 2 — the rand figure, and nowhere else on the page */
body.t-banneton .sc-show-price, body.t-banneton .sc-buy-p { color: var(--bn-crust); font-size: 18px; font-weight: 600; }
body.t-banneton .sc-show-price { order: 4; margin: 10px 0 16px; }
body.t-banneton .sc-show-buy, body.t-banneton .sc-show-inner > .sc-show-btn { order: 5; }

/* the four printed menu categories, as one full row of photographic tiles */
body.t-banneton .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-banneton .sc-strip-label { margin-top: 12px; font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* the priced grid that replaces the reference's dead price card — four across,
   twice, so eight products fill both rows exactly */
body.t-banneton .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 26px; }

/* the one full-bleed photograph below the hero, copy held left of the frame */
body.t-banneton .sc-banner { min-height: 62vh; display: flex; align-items: center; text-align: left; padding: 84px 8vw; }
body.t-banneton .sc-banner-inner { margin: 0; max-width: 520px; }

/* the page ends on a warm-dark strip that reads as the footer, not as a form */
body.t-banneton .sc-contact-band { background: #3a2c22; color: #f4ece0; padding: 92px 0 104px; }
body.t-banneton .sc-contact-band .sc-h2, body.t-banneton .sc-contact-band .sc-contact-sub { color: #f4ece0; }
body.t-banneton .sc-contact-band .sc-field input, body.t-banneton .sc-contact-band .sc-field textarea { background: #f4ece0; border-color: #55402f; color: #3a2c22; }

@media (max-width: 940px) {
  body.t-banneton .sc-show-grid, body.t-banneton .sc-buy-grid, body.t-banneton .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-banneton .sc-richtext { padding: 92px 20px 84px; }
}

/* NIGHT — the oat ground drops to a burnt-crumb brown and the crust lifts a
   couple of stops so it still carries the buttons and the prices against it. */
html[data-theme="dark"] body.t-banneton {
  background: #171210;
  color: #cbbca9;
  --bn-crust: #d98247;
  --bg-flat: #171210;
  --surface: #1f1815;
  --surface-2: #261d18;
  --line: #33271f;
  --line-strong: #4a392d;
  --heading: #f2e6d6;
  --text: #cbbca9;
  --muted: #93826f;
  --header-bg: #171210;
}
html[data-theme="dark"] body.t-banneton .sf-header, html[data-theme="dark"] body.t-banneton .sf-head,
html[data-theme="dark"] body.t-banneton .sf-foot, html[data-theme="dark"] body.t-banneton .sf-footer,
html[data-theme="dark"] body.t-banneton .sf-cats { background: #171210; border-color: #33271f; }
html[data-theme="dark"] body.t-banneton .sc-richtext p { color: #cbbca9; }
html[data-theme="dark"] body.t-banneton .sc-contact-band { background: #0f0b09; border-top: 1px solid #33271f; }
html[data-theme="dark"] body.t-banneton .sc-contact-band .sc-field input, html[data-theme="dark"] body.t-banneton .sc-contact-band .sc-field textarea { background: #241c17; border-color: #3d2f26; color: #f2e6d6; }