/* ============================== KOBO ==============================
   Kobo — Basotho blanket house & wearing capes 281.
   THE STRUCTURAL MOVE: a strict wide/narrow zip. Below the stage the page
   goes wide exactly three times and never again — a gapless six-tile rail
   welded straight under the hero, then an indigo band, then a second indigo
   band — while every other block is a contained, gapped row standing on bare
   bone with one brass hairline under each tile. The two bands are the only
   wide photographs after the stage, so the contained rows read as daylight
   and the bands as cold morning. One accent and one only: maize gold on the
   controls, on the rand figure and on the short rule under each band
   heading. Every other colour on the page comes out of the blankets
   themselves, which is the point. Nothing here positions, orders or
   reorders a single item inside the header. */
body.t-kobo {
  background: #f1ece2;
  color: #2b3140;
  --kb-gold: #c08a12;
  --kb-lit: #d79c1c;
  --kb-indigo: #1b2436;
  --kb-brass: #c9b48c;
  --bg-flat: #f1ece2;
  --header-bg: #f1ece2;
  --surface: #f8f5ee;
  --surface-2: #e6dfd0;
  --line: #ddd4c1;
  --line-strong: #c2b59a;
  --heading: #161a22;
  --text: #2b3140;
  --muted: #77705f;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the page, so the stage begins beneath it
   rather than behind it. Type and colour only — no order, no position. */
body.t-kobo .sf-header, body.t-kobo .sf-head,
body.t-kobo .sf-footer, body.t-kobo .sf-foot, body.t-kobo .sf-cats {
  background: #f1ece2; border-color: #ddd4c1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kobo .sf-name, body.t-kobo .sf-navlink { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11.5px; font-weight: 700; }

/* GOLD 1 of 3 — every control is a flat maize slab with no edge on it */
body.t-kobo .btn.brand { background: var(--kb-gold); border: 0; box-shadow: none; color: #161a22; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 32px; }
body.t-kobo .btn.brand:hover { background: var(--kb-lit); color: #161a22; }

/* the whole first screen and nothing else on it: three plates crossing over,
   the copy held dead centre over the calm middle of the frame */
body.t-kobo .sc-hero { min-height: 100vh; padding: 110px 20px; }
body.t-kobo .sc-hero h1 { font-size: clamp(32px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; margin: 0 auto 18px; }
body.t-kobo .sc-h2 { color: var(--heading); font-weight: 700; font-size: clamp(13px, 1.7vw, 15px); text-transform: uppercase; letter-spacing: 0.22em; margin: 0 0 34px; }

/* WIDE, ONCE — the rail. Six photographs welded edge to edge with no gutter
   between them and none at the ends, the only gapless thing on the page, and
   the caption lies on the picture. Its heading stays inside the container. */
body.t-kobo .sc-strip { padding: 96px 20px 4px; }
body.t-kobo .sc-strip-row { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-kobo .sc-strip-card { position: relative; }
body.t-kobo .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; }
body.t-kobo .sc-strip-label { position: absolute; left: 15px; right: 12px; bottom: 15px; margin: 0; color: #f4efe4; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.11em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75); }

/* NARROW — the spine. Four across, contained and gapped, standing straight on
   the bone with a brass hairline under each tile and nothing drawn round it.
   The first grid carries no heading at all, so the blankets introduce
   themselves; the second one names itself. */
body.t-kobo .sc-buygrid { padding: 84px 20px 92px; }
body.t-kobo #products .sc-h2 { display: none; }
body.t-kobo .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; }
body.t-kobo .sc-buy-card { align-items: flex-start; text-align: left; padding-bottom: 30px; border-bottom: 1px solid var(--kb-brass); }
body.t-kobo .sc-buy-media { background: #ffffff; }
body.t-kobo .sc-buy-media img { aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }
body.t-kobo .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; }
/* GOLD 2 of 3 — the rand figure, the only gold below the fold that is not a control */
body.t-kobo .sc-buy-p { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--kb-gold); }

/* THE ZIP — one catalogue of eight broken across two identical four-up rows
   with a full-bleed band between them, split on the section ids the renderer
   already emits. Four in each, so both rows fill. */
body.t-kobo #products .sc-buy-card:nth-child(n + 5),
body.t-kobo #products-2 .sc-buy-card:nth-child(-n + 4) { display: none; }

/* WIDE, TWICE MORE — the bands. The photograph is multiplied into highveld
   indigo so both read as the same cold morning, butted flush with no gutter
   above or below. GOLD 3 of 3 is the short rule under the heading. */
body.t-kobo .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; padding: 14vh 24px 12vh; background-color: var(--kb-indigo); background-blend-mode: normal, multiply; }
body.t-kobo .sc-banner h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 600; line-height: 1.14; letter-spacing: -0.015em; }
body.t-kobo .sc-banner h2::after { content: ''; display: block; width: 54px; height: 3px; background: var(--kb-gold); margin: 22px auto 26px; }

/* the moment the page proves it is a text page: one narrow column on bare
   bone, no photograph, no panel, no rule */
body.t-kobo .sc-richtext { max-width: 620px; padding: 116px 20px 104px; }
body.t-kobo .sc-richtext p { color: var(--text); font-size: 17px; line-height: 1.95; }

/* and it closes on the indigo again — one full-width strip carrying the order
   form and the shop's own details */
body.t-kobo .sc-contact-band { background: var(--kb-indigo); color: #efe9dc; padding: 92px 0 100px; }
body.t-kobo .sc-contact-band .sc-h2 { color: #f4efe4; }
body.t-kobo .sc-contact-band .sc-contact-sub { color: rgba(240, 234, 222, 0.82); font-size: 15.5px; line-height: 1.8; }
body.t-kobo .sc-contact-band .sc-field input, body.t-kobo .sc-contact-band .sc-field textarea { background: #232d41; border-color: #33405a; color: #f4efe4; }

@media (max-width: 900px) {
  body.t-kobo .sc-hero { min-height: 84vh; }
  body.t-kobo .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-kobo .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kobo .sc-banner { min-height: 46vh; padding: 11vh 20px 9vh; }
}

/* NIGHT — the bone goes to a cold slate out of the same family as the bands,
   so the two indigo photographs stop being the only dark things in the room
   and the whole page reads as one late winter afternoon. Gold lifts a stop to
   hold against it, and the product plate deliberately stays light: the studio
   shots are multiplied onto it, and on a dark plate they would disappear. */
html[data-theme="dark"] body.t-kobo {
  background: #12161e;
  color: #c5c0b4;
  --kb-gold: #d6a02a;
  --kb-lit: #e6b03a;
  --kb-indigo: #0e131c;
  --kb-brass: #4c4636;
  --bg-flat: #12161e;
  --header-bg: #12161e;
  --surface: #171c26;
  --surface-2: #1d232f;
  --line: #262d39;
  --line-strong: #39424f;
  --heading: #f2ece0;
  --text: #c5c0b4;
  --muted: #837d6e;
}
html[data-theme="dark"] body.t-kobo .sf-header, html[data-theme="dark"] body.t-kobo .sf-head,
html[data-theme="dark"] body.t-kobo .sf-footer, html[data-theme="dark"] body.t-kobo .sf-foot,
html[data-theme="dark"] body.t-kobo .sf-cats { background: #12161e; border-color: #262d39; }
html[data-theme="dark"] body.t-kobo .sc-buy-media { background: #e9e3d7; }
html[data-theme="dark"] body.t-kobo .sc-contact-band { background: #0b1016; }
html[data-theme="dark"] body.t-kobo .sc-contact-band .sc-field input, html[data-theme="dark"] body.t-kobo .sc-contact-band .sc-field textarea { background: #161d28; border-color: #2a3444; }