/* ---- semola (Semola — Pasta house & deli counter 145) ----------------------
   THE STRUCTURAL MOVE: THE PRICE LIST IS HOISTED TO SECOND POSITION. Straight
   off a full-viewport stage into the catalogue, with no about block and no
   photograph in between — and the catalogue is not a card grid. The buy grid
   collapses to ONE narrow contained column of ruled lines: small-caps category,
   the name on the left, the rand hard against the right, and a small slab
   under it. Thumbnails are switched off entirely, so the second screen of the
   shop carries no picture at all. Flour-pale warm grey the whole way down,
   olive-black ink, and exactly one dark tomato with two homes and no third —
   every rand figure and every button. Section headings are the serif, each one
   closed by a hairline olive rule. */
body.t-semola {
  background: #ede9e1;
  color: #3c3d34;
  --sm-tom: #8e2b1e;
  --sm-rule: rgba(30, 31, 26, 0.22);
  --bg-flat: #ede9e1;
  --surface: #e5e0d5;
  --surface-2: #dcd6c9;
  --line: #d8d2c5;
  --line-strong: #c3bcab;
  --heading: #1e1f1a;
  --text: #3c3d34;
  --muted: #6f7062;
  --header-bg: #ede9e1;
  --radius: 0;
  --shadow: none;
}

/* the bar keeps the flour ground rather than going glassy over the slides */
body.t-semola .sf-header, body.t-semola .sf-head,
body.t-semola .sf-footer, body.t-semola .sf-foot, body.t-semola .sf-cats {
  background: #ede9e1; border-color: #d8d2c5;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* five plain items, small-caps olive-black — a table of contents, nothing more */
body.t-semola .sf-navlink { text-transform: uppercase; letter-spacing: 0.19em; font-size: 11px; font-weight: 600; color: var(--heading); }

/* TOMATO 1 of 2 — every button, flat, no visible edge */
body.t-semola .btn.brand { background: var(--sm-tom); border-color: var(--sm-tom); color: #f6f1e7; box-shadow: none; font-weight: 600; letter-spacing: 0.06em; padding: 13px 28px; }
body.t-semola .btn.brand:hover { background: #74210f; border-color: #74210f; }

/* the stage: a full screen of photograph, three words and one slab dead centre */
body.t-semola .sc-hero { min-height: 100vh; }
body.t-semola .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(38px, 7.6vw, 92px); line-height: 1.03; letter-spacing: -0.015em; margin-bottom: 14px; }
body.t-semola .sc-hero p { font-size: clamp(14px, 1.7vw, 18px); max-width: 500px; margin: 0 auto 30px; }
/* serif, closed by the hairline that separates every band from its heading */
body.t-semola .sc-h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(23px, 3.2vw, 38px); letter-spacing: -0.012em; color: var(--heading); padding-bottom: 15px; border-bottom: 1px solid var(--sm-rule); margin-bottom: 30px; }

/* THE COUNTER — the whole point of the template. One narrow column of ruled
   lines directly under the stage: no thumbnails, no dotted leaders, no split. */
body.t-semola .sc-buygrid { max-width: 660px; padding: 88px 20px 34px; }
body.t-semola .sc-buy-grid { grid-template-columns: 1fr; gap: 0; }
body.t-semola .sc-buy-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; text-align: left; padding: 19px 0; border-bottom: 1px solid var(--sm-rule); }
/* the two pictures the page deliberately does without: counter thumbnails and
   captions under the six-up run */
body.t-semola .sc-buy-media, body.t-semola .sc-strip-label { display: none; }
body.t-semola .sc-buy-cat { flex: 0 0 100%; margin-top: 0; color: var(--muted); letter-spacing: 0.2em; font-size: 10px; }
body.t-semola .sc-buy-t { flex: 1 1 auto; margin-top: 5px; font-size: clamp(16px, 1.9vw, 20px); font-weight: 500; }
body.t-semola .sc-buy-p { margin: 5px 0 0 auto; padding-left: 20px; font-size: clamp(16px, 1.9vw, 20px); }
/* TOMATO 2 of 2 — the rand figure, in both catalogue passes and nowhere else */
body.t-semola .sc-buy-p, body.t-semola .product-card .p { color: var(--sm-tom); font-weight: 600; }
body.t-semola .sc-buy-form, body.t-semola .sc-buy-card > .sc-buy-btn { margin: 12px 0 0 auto; }
body.t-semola .sc-buy-btn { padding: 9px 20px; font-size: 11.5px; letter-spacing: 0.1em; }

/* THE ONE TEXT BAND — narrow, centred, no photograph anywhere in it, sitting
   between the counter and the six-up run so the page breathes type once */
body.t-semola .sc-richtext { max-width: 600px; padding: 96px 20px 100px; }
body.t-semola .sc-richtext p, body.t-semola .sc-about-copy p { color: var(--heading); font-size: 16.5px; line-height: 2; }

/* the pantry pass, back to a contained gapped grid — four across, eight fill */
body.t-semola .sc-products { padding: 84px 20px 44px; }
body.t-semola .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }

/* THE RUN — six tiles welded flush and full-bleed, a band rather than a grid */
body.t-semola .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-semola .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-semola .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; background: #e5e0d5; }

/* the order slip: stacked on plain ground, one hairline above it, no picture */
body.t-semola .sc-contact { padding: 84px 20px 104px; border-top: 1px solid var(--sm-rule); }

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

/* NIGHT — the ground and the ink swap: olive-black paper, flour-pale type. The
   tomato is lifted two stops so the prices and the slabs still carry against a
   dark page, and the hairlines invert with them. */
html[data-theme="dark"] body.t-semola {
  background: #1a1b16;
  color: #c3c2b4;
  --sm-tom: #cf6a52;
  --sm-rule: rgba(226, 222, 208, 0.2);
  --bg-flat: #1a1b16;
  --surface: #22231d;
  --surface-2: #2a2b24;
  --line: #2f3029;
  --line-strong: #414237;
  --heading: #ece9df;
  --text: #c3c2b4;
  --muted: #8d8d7e;
  --header-bg: #1a1b16;
}
html[data-theme="dark"] body.t-semola .sf-header, html[data-theme="dark"] body.t-semola .sf-head,
html[data-theme="dark"] body.t-semola .sf-footer, html[data-theme="dark"] body.t-semola .sf-foot,
html[data-theme="dark"] body.t-semola .sf-cats { background: #1a1b16; border-color: #2f3029; }
html[data-theme="dark"] body.t-semola .btn.brand { color: #22100a; }
html[data-theme="dark"] body.t-semola .btn.brand:hover { background: #b95740; border-color: #b95740; color: #f6efe7; }
html[data-theme="dark"] body.t-semola .sc-strip-img { background: #22231d; }