/* ─── HEMLINE — shweshwe dress house, Gqeberha ──────────────────────────────
   STRUCTURAL MOVE: one catalogue printed TWICE. Both product blocks are the
   same four-across wall of tall tiles, and CSS deals the single seeded list
   between them — pieces 1–4 into the first pass, 5–8 into the second — so the
   page runs wide, narrow, wide, narrow: full-bleed indigo plate, contained
   grid, contained interlude, contained grid, marks, full-bleed band. The
   palette is the discharge print itself — chalk lifted out of indigo — with
   one burnt ochre held back for the rand line and the buttons and nothing
   else, so the theme and the product photographs are the same two colours. */
body.t-hemline {
  background: #f6f3ec;
  color: #2b3557;
  --hem-indigo: #1b2a55;
  --hem-ochre: #b0611c;
  --bg-flat: #f6f3ec;
  --surface: #fffdf8;
  --surface-2: #ece7db;
  --line: #ddd6c8;
  --line-strong: #c4baa6;
  --heading: #1b2a55;
  --text: #2b3557;
  --muted: #6d7695;
  --header-bg: #f6f3ec;
  --radius: 0;
  --shadow: none;
}

/* flat paper bar and foot — no blur, no card edge, the name in the display cut */
body.t-hemline .sf-header, body.t-hemline .sf-head,
body.t-hemline .sf-footer, body.t-hemline .sf-foot, body.t-hemline .sf-cats {
  background: #f6f3ec; border-color: #ddd6c8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-hemline .sf-name { font-family: var(--sf-serif); font-weight: 500; font-size: 23px; letter-spacing: 0.01em; }

/* the only ochre on the page: a flat slab with no edge of its own */
body.t-hemline .btn.brand { background: var(--hem-ochre); border-color: var(--hem-ochre); color: #fffdf8; border-radius: 0; box-shadow: none; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 30px; }
body.t-hemline .btn.brand:hover { background: var(--hem-indigo); border-color: var(--hem-indigo); opacity: 1; }

/* THE STAGE — three plates cross-fading over a full window, centred, with a
   hairline ghost standing in for the reference's understated see-more link */
body.t-hemline .sc-hero { min-height: 100vh; padding: 26px 20px; }
body.t-hemline .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(34px, 5.8vw, 68px); line-height: 1.08; letter-spacing: -0.02em; max-width: 680px; margin: 0 auto 18px; }
body.t-hemline .sc-hero p { max-width: 520px; margin: 0 auto 32px; font-size: 15px; letter-spacing: 0.02em; }
body.t-hemline .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: rgba(255, 255, 255, 0.78); }

/* headings are ranged labels above the wall, never centred titles */
body.t-hemline .sc-h2 { font-family: var(--sf-serif); font-weight: 400; color: var(--heading); font-size: clamp(22px, 3vw, 31px); letter-spacing: -0.01em; text-align: left; margin: 0 0 30px; }

/* the introduction plate — the scrim is pulled off black and onto indigo, so
   the photograph sits in the same dye the rest of the page is printed in */
body.t-hemline .sc-about-overlay { padding: clamp(90px, 16vh, 150px) 20px; box-shadow: inset 0 0 0 100vmax rgba(20, 32, 66, 0.66); }
body.t-hemline .sc-about-overlay .sc-h2, body.t-hemline .sc-contact .sc-h2 { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }
body.t-hemline .sc-about-overlay p { max-width: 600px; margin: 0 auto; font-size: 16px; line-height: 1.9; }

/* THE WALL, PRINTED TWICE — four tall tiles, type ranged under, no card at all */
body.t-hemline .sc-products { padding: clamp(76px, 11vh, 118px) 20px; }
body.t-hemline .product-grid { grid-template-columns: repeat(4, 1fr); gap: 46px 30px; padding: 0; }
body.t-hemline .product-card { background: none; border: 0; border-radius: 0; box-shadow: none; }
body.t-hemline .product-card:hover { transform: none; box-shadow: none; }
body.t-hemline .product-card .ph { aspect-ratio: 3 / 4; background: var(--surface-2); }
body.t-hemline .product-card .meta { padding: 15px 0 0; }
body.t-hemline .product-card .t { font-family: var(--sf-serif); font-weight: 400; font-size: 18px; letter-spacing: 0; }
body.t-hemline .product-card .p { color: var(--hem-ochre); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; margin-top: 5px; }
/* one seeded rail, dealt 1–4 to the first pass and 5–8 to the second */
body.t-hemline #products .product-card:nth-child(n + 5),
body.t-hemline #products-2 .product-card:nth-child(-n + 4) { display: none; }

/* THE INTERLUDE — the only large serif below the stage is a quote, with the
   woman who said it set small and quiet underneath */
body.t-hemline .sc-about-split { gap: 60px; padding: clamp(70px, 10vh, 110px) 20px; align-items: center; }
body.t-hemline .sc-about-media img { aspect-ratio: 4 / 5; }
body.t-hemline .sc-about-copy .sc-h2 { font-size: clamp(23px, 3.3vw, 36px); line-height: 1.35; margin-bottom: 22px; }
body.t-hemline .sc-about-copy p { font-size: 13px; letter-spacing: 0.02em; line-height: 1.9; }

/* four square marks, one word under each, and no heading anywhere on it */
body.t-hemline .sc-strip { padding: 0 20px clamp(70px, 10vh, 110px); }
body.t-hemline .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 30px; }
body.t-hemline .sc-strip-img { border: 0; background: var(--surface-2); }
body.t-hemline .sc-strip-label { margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--heading); }

/* the band is the last full-bleed thing on the page and it goes fully indigo */
body.t-hemline .sc-banner { min-height: 60vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); box-shadow: inset 0 0 0 100vmax rgba(20, 32, 66, 0.62); }
body.t-hemline .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 48px); margin: 0 0 14px; }
body.t-hemline .sc-banner .btn.brand { background: #fffdf8; border-color: #fffdf8; color: var(--hem-indigo); }

/* the close: a narrow centred column where the reference put its subscribe plate */
body.t-hemline .sc-contact { padding: clamp(80px, 12vh, 126px) 20px clamp(80px, 12vh, 120px); max-width: 560px; }
body.t-hemline .sc-contact-sub { line-height: 1.95; font-size: 14px; }
body.t-hemline .sc-field label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

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

/* NIGHT — paper and ink change places: the ground becomes the indigo the cloth
   is dyed with and the type becomes the white discharged out of it, which is
   the same two colours the day theme uses, only the other way round. The ochre
   is raised a shade because it is still carrying every price on its own. */
html[data-theme="dark"] body.t-hemline {
  background: #121a33;
  color: #c3cade;
  --hem-indigo: #121a33;
  --hem-ochre: #d68a3c;
  --bg-flat: #121a33;
  --surface: #18213e;
  --surface-2: #1e2848;
  --line: #2a3457;
  --line-strong: #3d4870;
  --heading: #f2efe7;
  --text: #c3cade;
  --muted: #8b93ad;
  --header-bg: #121a33;
}
html[data-theme="dark"] body.t-hemline .sf-header, html[data-theme="dark"] body.t-hemline .sf-head,
html[data-theme="dark"] body.t-hemline .sf-footer, html[data-theme="dark"] body.t-hemline .sf-foot,
html[data-theme="dark"] body.t-hemline .sf-cats { background: #121a33; border-color: #2a3457; }
html[data-theme="dark"] body.t-hemline .btn.brand { color: #121a33; }
html[data-theme="dark"] body.t-hemline .btn.brand:hover { background: #f2efe7; border-color: #f2efe7; color: #121a33; }
html[data-theme="dark"] body.t-hemline .sc-banner .btn.brand { background: var(--hem-ochre); border-color: var(--hem-ochre); color: #121a33; }