/* ---- elachi (Elachi — Spice merchant & masala house 118) -------------------
   THE STRUCTURAL MOVE: the tile bands are GAPLESS and FULL-BLEED. .sc-strip
   breaks out of the centred measure to 100vw, drops every gutter, squares the
   tiles, sets the label over the bottom of each one, and ends flush at the
   tile edge so the band is welded onto the block that follows it. Both bands
   stand on deep ash — the only dark ground on an otherwise bone page, giving
   it two dark rungs — and the coals orange is kept for buttons, rand figures
   and the short rule under every heading. Nothing else is tinted. (Both strips
   are styled together on purpose: a section can only be told apart by class
   here, and :nth-of-type would count the hero as section one.) */
body.t-elachi {
  background: #f4f1e8;
  color: #33332b;
  --radius: 0;
  --header-bg: #f4f1e8;
  --surface: #fbf9f3;
  --surface-2: #ece8dc;
  --line: #ddd8c9;
  --line-strong: #c4bfae;
  --heading: #1b1b16;
  --text: #33332b;
  --muted: #7a7669;
  --elc-ash: #33342e;
  --elc-ember: #ab4c1c;
}

/* the bar stays a solid slab of paper rather than going glassy over the hero */
body.t-elachi .sf-header, body.t-elachi .sf-head,
body.t-elachi .sf-footer, body.t-elachi .sf-foot, body.t-elachi .sf-cats {
  background: #f4f1e8; border-color: #ddd8c9;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-elachi .sf-name { text-transform: uppercase; letter-spacing: 0.3em; font-size: 14px; font-weight: 700; }
body.t-elachi .btn.brand { background: var(--elc-ember); border-color: var(--elc-ember); color: #fdf8f0; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 14px 26px; }
body.t-elachi .btn.brand:hover { background: #8e3d14; border-color: #8e3d14; }

/* a CONTAINED banner, never a stage — it stops short of the fold so the first
   tile band is already on screen when the page loads */
body.t-elachi .sc-hero { min-height: 0; padding: clamp(94px, 15vh, 148px) 20px clamp(98px, 16vh, 156px); }
body.t-elachi .sc-hero h1 { font-size: clamp(38px, 6.6vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }

/* headings small, centred, widely spaced from their content, one ember rule */
body.t-elachi .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; color: var(--heading); margin-bottom: 34px; }
body.t-elachi .sc-h2::after { content: ''; display: block; width: 34px; height: 2px; background: var(--elc-ember); margin: 14px auto 0; }

/* --- THE BAND: four square tiles, no gutters, edge to edge, welded on --- */
body.t-elachi .sc-strip { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: clamp(54px, 7vw, 84px) 0 0; background: var(--elc-ash); }
body.t-elachi .sc-strip .sc-h2 { color: #f6f2e7; padding: 0 20px; }
body.t-elachi .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.t-elachi .sc-strip-card { position: relative; }
body.t-elachi .sc-strip-img { aspect-ratio: 1; border: 0; border-radius: 0; background: var(--elc-ash); }
body.t-elachi .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 46px 14px 14px; background: linear-gradient(rgba(18, 18, 15, 0), rgba(18, 18, 15, 0.8)); color: #f6f2e7; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; }

/* the catalogue: large panels, picture first and big, name under it, then the
   two lines — rand figure and control */
body.t-elachi .sc-show-inner { padding: clamp(40px, 5vw, 62px) clamp(24px, 4vw, 54px) clamp(46px, 5vw, 64px); min-height: 600px; }
body.t-elachi .sc-show-media { order: -1; padding: 0 0 26px; }
body.t-elachi .sc-show-media img { max-width: 88%; max-height: 330px; }
body.t-elachi .sc-show-rule { display: none; }
body.t-elachi .sc-show-cat, body.t-elachi .sc-show-price { color: var(--elc-ember); }
body.t-elachi .sc-show-t { margin-top: 8px; text-transform: none; letter-spacing: -0.015em; font-size: clamp(18px, 2vw, 24px); }
body.t-elachi .sc-show-price { font-weight: 700; font-size: clamp(19px, 2vw, 25px); margin: 10px 0 20px; }

/* the shop detail sits opposite the form, and the message field is relabelled
   to ask the only two things the counter actually needs */
body.t-elachi .sc-contact-split label[for="sc-msg"] { font-size: 0; }
body.t-elachi .sc-contact-split label[for="sc-msg"]::after { content: 'What are you cooking, and how much do you need?'; font-size: 13px; }

@media (max-width: 760px) {
  body.t-elachi .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
}

/* NIGHT — the bone page drops to a roasted dark ground and the two ash bands
   lift ABOVE it instead of sinking below, so the rungs still read as rungs.
   The ember opens a stop so the rand figures hold against the dark. */
html[data-theme="dark"] body.t-elachi {
  background: #141410;
  color: #cbc7ba;
  --header-bg: #141410;
  --surface: #1c1c17;
  --surface-2: #22221c;
  --line: #2b2b24;
  --line-strong: #3c3c33;
  --heading: #f6f2e6;
  --text: #cbc7ba;
  --muted: #8e8a7d;
  --elc-ash: #26261f;
  --elc-ember: #d9803f;
}
html[data-theme="dark"] body.t-elachi .sf-header, html[data-theme="dark"] body.t-elachi .sf-head,
html[data-theme="dark"] body.t-elachi .sf-footer, html[data-theme="dark"] body.t-elachi .sf-foot,
html[data-theme="dark"] body.t-elachi .sf-cats { background: #141410; border-color: #2b2b24; }
html[data-theme="dark"] body.t-elachi .btn.brand { color: #17140f; }