/* ---- blink (Blink — Cleaning supplies & washroom hygiene 259) --------------
   THE STRUCTURAL MOVE: the catalogue tile is the whole design. Every product
   stands on a white plate with its add-to-cart WELDED flush across the foot of
   that plate, and the rand figure is pulled up onto the title line and pushed
   hard right — so a tile reads like a line on a trade price list rather than a
   card. The page around it is near-white paper and ink-black uppercase display
   type with nothing else in it: no radius, no shadow, no card edge anywhere,
   the bands separated by one cobalt hairline under each heading. Cobalt does
   four jobs and no others — that hairline, the ghost edge on the hero, the rand
   figure and the slabs. Every other colour on the page is in the photographs.
   The four category tiles are welded gapless straight onto the floor of the
   slider, so the page opens on one continuous picture band. */
body.t-blink {
  background: #f7f8f7; color: #2b2f31;
  --bg-flat: #f7f8f7; --surface: #ffffff; --surface-2: #eef0ef;
  --line: #e0e3e2; --line-strong: #c6cbc9;
  --heading: #101214; --text: #2b2f31; --muted: #6f7679; --header-bg: #f7f8f7;
  --bk-cobalt: #1f4fa3; --bk-mark: #1f4fa3;
}
body.t-blink .sf-head, body.t-blink .sf-header, body.t-blink .sf-foot,
body.t-blink .sf-footer, body.t-blink .sf-cats { background: #f7f8f7; border-color: #e0e3e2; }
body.t-blink .sf-name { text-transform: uppercase; letter-spacing: .34em; font-size: 13px; font-weight: 800; }

/* the bar sits straight on the opening photograph — the WHOLE bar, never an
   item inside it, so the rendered order is untouched */
body.t-blink:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-blink:has(.sc-hero) .sf-name, body.t-blink:has(.sc-hero) .sf-header .sf-cart,
body.t-blink:has(.sc-hero) .sf-searchbtn, body.t-blink:has(.sc-hero) .sf-header .theme-toggle,
body.t-blink:has(.sc-hero) .sf-makeyours { color: #ffffff; }
body.t-blink:has(.sc-hero) .sf-cats { display: none; }

/* cobalt 1 of 4 — flat slabs, no border and no radius on any of them */
body.t-blink .btn.brand { background: var(--bk-cobalt); color: #ffffff; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 800; padding: 16px 32px; }
body.t-blink .btn.brand:hover { background: #163c7d; color: #ffffff; }

/* the whole first screen, three frames cross-fading, copy dead centre */
body.t-blink .sc-hero { min-height: 100vh; padding: 118px 20px; }
body.t-blink .sc-hero h1 { text-transform: uppercase; font-size: clamp(29px, 5vw, 62px); font-weight: 800; letter-spacing: -.005em; line-height: 1.04; max-width: 20ch; margin: 0 auto 18px; }
/* cobalt 2 of 4 — recolouring the edge the shared sheet already draws on the
   ghost, never adding one to a slab */
body.t-blink .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-color: var(--bk-cobalt); color: #ffffff; }
body.t-blink .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--bk-cobalt); color: #ffffff; }

/* cobalt 3 of 4 — the hairline that separates every band from the one above it */
body.t-blink .sc-h2 { color: var(--heading); text-align: left; text-transform: uppercase; letter-spacing: .26em; font-size: 12px; font-weight: 800; line-height: 1.7; margin: 0 0 34px; padding-bottom: 15px; border-bottom: 1px solid var(--bk-mark); }

/* the four categories, welded to the floor of the slider — no gutter, no seam */
body.t-blink .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0 0 4px; }
body.t-blink .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-blink .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 4 / 3; }
body.t-blink .sc-strip-label, body.t-blink .sc-buy-cat,
body.t-blink .sc-field label { text-transform: uppercase; font-weight: 800; }
body.t-blink .sc-strip-label { letter-spacing: .24em; font-size: 11px; margin: 13px 0 26px; }

/* THE PAYLOAD — four across in two rows that fill exactly, each on a white
   plate, the slab welded across the foot of the plate and the rand figure
   riding on the title line rather than sitting under it */
body.t-blink .sc-buygrid { padding: 92px 20px 88px; }
body.t-blink .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 28px; }
body.t-blink .sc-buy-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; text-align: left; }
body.t-blink .sc-buy-media { grid-column: 1 / -1; grid-row: 1; background: #ffffff; padding: 10px 10px 46px; }
body.t-blink .sc-buy-media img { aspect-ratio: 1; object-fit: contain; }
body.t-blink .sc-buy-form, body.t-blink .sc-buy-card > .sc-buy-btn { grid-column: 1 / -1; grid-row: 1; align-self: end; margin: 0; }
body.t-blink .sc-buy-btn { width: 100%; padding: 14px 8px; font-size: 10px; letter-spacing: .22em; }
body.t-blink .sc-buy-cat { grid-column: 1 / -1; grid-row: 2; margin-top: 17px; color: var(--muted); letter-spacing: .22em; font-size: 10px; }
body.t-blink .sc-buy-t, body.t-blink .sc-buy-p { grid-column: 1; grid-row: 3; margin-top: 7px; font-size: 13.5px; font-weight: 700; line-height: 1.45; }
/* cobalt 4 of 4 */
body.t-blink .sc-buy-p { grid-column: 2; color: var(--bk-mark); font-weight: 800; padding-left: 12px; }

/* the one wide photograph after the slider — the line rides the upper third */
body.t-blink .sc-banner { min-height: 60vh; display: flex; align-items: flex-start; margin: 0 calc(50% - 50vw); padding: clamp(60px, 13vh, 132px) 24px 0; }
body.t-blink .sc-banner h2 { text-transform: uppercase; font-size: clamp(21px, 3.4vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -.005em; margin: 0 0 16px; }

/* the method band — the photograph gives up the container and runs off the left
   edge of the page while the prose stays inside a tight measure */
body.t-blink .sc-about-split { max-width: 100%; padding: 92px 0 96px; gap: clamp(26px, 4vw, 66px); align-items: center; }
body.t-blink .sc-about-media img { border-radius: 0; aspect-ratio: 3 / 4; }
body.t-blink .sc-about-copy { max-width: 520px; padding: 0 20px; }
body.t-blink .sc-about-copy p { color: var(--text); font-size: 15.5px; line-height: 1.95; }

/* the close: four counters and their hours one side, the order form the other */
body.t-blink .sc-contact-split { padding: 20px 20px 96px; gap: clamp(30px, 5vw, 78px); }
body.t-blink .sc-contact-lead p { color: var(--text); font-size: 15.5px; line-height: 2.1; white-space: pre-line; }
body.t-blink .sc-field label { letter-spacing: .18em; font-size: 10px; color: var(--muted); }
body.t-blink .sc-field input, body.t-blink .sc-field textarea { background: #ffffff; border: 1px solid var(--line); border-radius: 0; padding: 13px 12px; color: var(--heading); }

@media (max-width: 900px) {
  body.t-blink .sc-buy-grid, body.t-blink .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-blink .sc-about-split, body.t-blink .sc-contact-split { grid-template-columns: 1fr; }
  body.t-blink .sc-about-copy { max-width: none; }
}

/* NIGHT — the paper drops to a deep charcoal and the cobalt stays exactly the
   cobalt it was on the slabs, because a solid slab with white type on it reads
   at any brightness. The one thing that has to move is the cobalt used as INK —
   the rand figure and the heading hairline — which lifts to the same hue two
   stops brighter so it survives on charcoal. No second hue enters. The product
   plates stay pale on purpose: every flat-lay is shot on white and a dark plate
   would cut a hard square out of each one. */
html[data-theme="dark"] body.t-blink {
  background: #131516; color: #b6bcbe;
  --bg-flat: #131516; --surface: #1a1d1e; --surface-2: #202425;
  --line: #2a2f30; --line-strong: #3d4344;
  --heading: #f1f3f3; --text: #b6bcbe; --muted: #7e8587; --header-bg: #131516;
  --bk-cobalt: #1f4fa3; --bk-mark: #6f9ce8;
}
html[data-theme="dark"] body.t-blink .sf-head, html[data-theme="dark"] body.t-blink .sf-header,
html[data-theme="dark"] body.t-blink .sf-foot, html[data-theme="dark"] body.t-blink .sf-footer,
html[data-theme="dark"] body.t-blink .sf-cats { background: #131516; border-color: #2a2f30; }
html[data-theme="dark"] body.t-blink:has(.sc-hero) .sf-header { background: transparent; border-bottom-color: transparent; }
html[data-theme="dark"] body.t-blink .btn.brand:hover { background: #2f6ad0; color: #ffffff; }
html[data-theme="dark"] body.t-blink .sc-buy-media { background: #eceeed; }
html[data-theme="dark"] body.t-blink .sc-field input, html[data-theme="dark"] body.t-blink .sc-field textarea { background: #1a1d1e; }