/* ---- terrazzo (Screed — Cement tiles & terrazzo 52) ------------------------
   THE STRUCTURAL MOVE: there is no hero. The first pixel under the navigation
   is a priced tile. The buygrid and the strip are BOTH pulled full-bleed to
   four columns with zero gap, so eight product tiles and four pattern squares
   butt into one continuous twelve-tile wall, broken only by a hairline rule
   carrying the section heading. Everything below the wall is contained again.
   Cement grey ground, bone tiles, one burnt ochre kept for price, cart count
   and nothing else. No gradients, no shadows — the tiles carry all the colour. */
body.t-terrazzo {
  background: #f3efe7;
  color: #23211e;
  --surface: #f3efe7;
  --surface-2: #e9e3d8;
  --line: #d6cfc4;
  --line-strong: #c3bab0;
  --heading: #23211e;
  --text: #4a463f;
  --muted: #8a8378;
  --header-bg: #f3efe7;
  --radius: 0;
}
/* solid and sticky, never transparent — it sits on a rule, not over a picture */
body.t-terrazzo .sf-header, body.t-terrazzo .sf-footer { background: #f3efe7; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #d6cfc4; margin-top: 0; }
body.t-terrazzo .sf-cart .badge { background: transparent; color: #a8672c; box-shadow: none; padding: 0; margin-left: 7px; font-weight: 700; }
body.t-terrazzo .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-weight: 700; font-size: clamp(10.5px, 1.1vw, 12px); color: #8a8378; }
body.t-terrazzo .btn.brand { background: #23211e; border-color: #23211e; color: #f3efe7; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; padding: 12px 22px; }
body.t-terrazzo .btn.brand:hover { background: #a8672c; border-color: #a8672c; color: #ffffff; opacity: 1; }

/* THE WALL — both grids leave the container and run edge to edge */
body.t-terrazzo .sc-buygrid, body.t-terrazzo .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
/* the headings become the hairline rules that break the wall, nothing more */
body.t-terrazzo .sc-buygrid .sc-h2, body.t-terrazzo .sc-strip .sc-h2 { margin: 0; padding: 12px 20px 11px; border-top: 1px solid #d6cfc4; border-bottom: 1px solid #d6cfc4; }
body.t-terrazzo .sc-buy-grid, body.t-terrazzo .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-terrazzo .sc-buy-media img { aspect-ratio: 1; }
body.t-terrazzo .sc-buy-card { padding: 0 12px 34px; }
body.t-terrazzo .sc-buy-cat, body.t-terrazzo .sc-show-cat { margin-top: 13px; font-size: 9.5px; letter-spacing: 0.22em; color: #8a8378; }
body.t-terrazzo .sc-buy-t, body.t-terrazzo .sc-buy-p { margin-top: 4px; font-size: 12.5px; font-weight: 600; }
body.t-terrazzo .sc-buy-p, body.t-terrazzo .sc-show-price { color: #a8672c; }
body.t-terrazzo .sc-buy-btn { margin-top: 12px; padding: 9px 16px; font-size: 9.5px; }
body.t-terrazzo .sc-strip-card { position: relative; }
body.t-terrazzo .sc-strip-img { border: 0; }
body.t-terrazzo .sc-strip-label { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; background: rgba(35, 33, 30, 0.34); color: #f3efe7; text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; font-weight: 700; }

/* the page's one photograph, flush under the wall and at real scale */
body.t-terrazzo .sc-banner { min-height: 62vh; margin: 0 calc(50% - 50vw); display: flex; align-items: center; justify-content: center; }
body.t-terrazzo .sc-banner h2 { text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(17px, 2.4vw, 28px); }
body.t-terrazzo .sc-banner h2, body.t-terrazzo .sc-banner p { text-shadow: none; }

/* the reset: fewer, bigger tiles on the open ground, split by hairlines only */
body.t-terrazzo .sc-show-item { background: transparent; border-top: 1px solid #d6cfc4; }
body.t-terrazzo .sc-show-media img { max-width: 82%; max-height: 320px; }

/* contained, image beside words — the opposite of everything above it */
body.t-terrazzo .sc-about-split { padding: 86px 20px 88px; gap: 58px; align-items: start; }

/* the close: a rule with fields on it, not a section */
body.t-terrazzo .sc-contact-band { background: transparent; border-top: 1px solid #d6cfc4; padding: 40px 0 58px; }
body.t-terrazzo .sc-contact-band-inner { max-width: 100%; text-align: left; }
body.t-terrazzo .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px 22px; align-items: end; }
body.t-terrazzo .sc-contact-band textarea { height: 43px; min-height: 43px; resize: none; }

@media (max-width: 900px) {
  body.t-terrazzo .sc-buy-grid, body.t-terrazzo .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-terrazzo .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
}

/* NIGHT — wet cement instead of dry, and the ochre warms up to keep its bite */
html[data-theme="dark"] body.t-terrazzo {
  background: #171614;
  color: #cfc8bd;
  --surface: #171614;
  --surface-2: #201e1b;
  --line: #2e2b26;
  --line-strong: #3d3931;
  --heading: #f1ece3;
  --text: #cfc8bd;
  --muted: #8b8478;
  --header-bg: #171614;
  --radius: 0;
}
html[data-theme="dark"] body.t-terrazzo .sf-header, html[data-theme="dark"] body.t-terrazzo .sf-footer { background: #171614; border-color: #2e2b26; }
html[data-theme="dark"] body.t-terrazzo .sc-buygrid .sc-h2, html[data-theme="dark"] body.t-terrazzo .sc-strip .sc-h2, html[data-theme="dark"] body.t-terrazzo .sc-show-item, html[data-theme="dark"] body.t-terrazzo .sc-contact-band { border-color: #2e2b26; }
html[data-theme="dark"] body.t-terrazzo .sc-buy-p, html[data-theme="dark"] body.t-terrazzo .sc-show-price, html[data-theme="dark"] body.t-terrazzo .sf-cart .badge { color: #d08a4a; }
html[data-theme="dark"] body.t-terrazzo .sc-buy-t { color: #f1ece3; }
html[data-theme="dark"] body.t-terrazzo .btn.brand { background: #f1ece3; border-color: #f1ece3; color: #171614; }
html[data-theme="dark"] body.t-terrazzo .btn.brand:hover { background: #d08a4a; border-color: #d08a4a; color: #171614; }
html[data-theme="dark"] body.t-terrazzo .sc-field input, html[data-theme="dark"] body.t-terrazzo .sc-field textarea { background: #201e1b; border-color: #2e2b26; color: #f1ece3; }