/* ---------- Linne — Bed linen, towels & bedding 223 (store) ----------
   THE STRUCTURAL MOVE: two matched buy-walls, four across and GAPLESS — tile
   butted straight against tile, no gutter and no hairline — welded onto a
   single full-bleed photographic band with the band's own margin taken off, so
   the page reads as one wall, one line of picture, one wall. Directly under
   the fold it splits into two exactly equal halves that touch: half
   photograph, half words, nothing between them. The buy-wall grid and the
   closing tile strip are set in ONE rule because they are the same wall
   printed twice. Hard rectangles throughout — nothing rounded, nothing cropped
   round — and the slate blue is spent only on the controls, the price and the
   hairline under each heading. */
body.t-linne {
  background: #ffffff;
  color: #14161a;
  --ln-blue: #4c5a72;
  --ln-deep: #39445a;
  --bg-flat: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f1;
  --line: #e6e6e2;
  --line-strong: #d4d4ce;
  --heading: #14161a;
  --text: #14161a;
  --muted: #6c7076;
  --header-bg: #ffffff;
  --radius: 0;
  --shadow: none;
}

/* flat white bar, one hairline, no blur — the photographs supply the contrast */
body.t-linne .sf-header, body.t-linne .sf-head,
body.t-linne .sf-footer, body.t-linne .sf-foot, body.t-linne .sf-cats {
  background: #ffffff; border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* THE BAR LIES ON THE STAGE — the bar itself moves and nothing inside it is
   touched but the ink colour, so the shared header order stands untouched.
   Scoped by :has, so cart, search and product pages keep a solid white bar. */
body.t-linne:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-linne:has(.sc-hero) .sf-name, body.t-linne:has(.sc-hero) .sf-navlink,
body.t-linne:has(.sc-hero) .sf-cart, body.t-linne:has(.sc-hero) .sf-searchbtn,
body.t-linne:has(.sc-hero) .theme-toggle { color: #ffffff; }
/* the category rail is in normal flow and would sit ABOVE the stage once the
   bar floats, pushing the fold down — it comes back on every other page */
body.t-linne:has(.sc-hero) .sf-cats { display: none; }

/* the blue, only ever as a flat slab and never as an outline */
body.t-linne .btn.brand { background: var(--ln-blue); border: 0; box-shadow: none; color: #ffffff; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-linne .btn.brand:hover { background: var(--ln-deep); opacity: 1; }

/* every heading flush left over its own blue hairline */
body.t-linne .sc-h2 { text-align: left; font-size: clamp(15px, 1.9vw, 19px); font-weight: 700; letter-spacing: 0; color: var(--heading); border-bottom: 1px solid var(--ln-blue); padding-bottom: 12px; margin: 0 0 30px; }

/* the stage owns the whole first screen: three plates, two lines, one slab */
body.t-linne .sc-hero { min-height: 100vh; padding: 124px 20px 104px; }
body.t-linne .sc-hero h1 { font-size: clamp(32px, 5.2vw, 62px); font-weight: 700; line-height: 1.07; letter-spacing: -0.025em; max-width: 17ch; margin: 0 auto 16px; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.36); }

/* THE HALF-BAND — full bleed, two exactly equal halves that touch. No gutter,
   no rule, and the photograph runs the full height of the words beside it. */
body.t-linne .sc-about-split { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; min-height: 520px; }
body.t-linne .sc-about-media img { height: 100%; min-height: 420px; aspect-ratio: auto; object-fit: cover; }
body.t-linne .sc-about-copy { display: flex; flex-direction: column; justify-content: center; padding: 76px max(28px, 5vw); background: var(--surface-2); }
body.t-linne .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.95; max-width: 48ch; }

/* THE WALL, SET ONCE — the two buy-walls and the closing tile strip are the
   same geometry, so they share one rule: four across, edge to edge, gapless */
body.t-linne .sc-buygrid, body.t-linne .sc-strip { padding: 92px 20px 0; }
body.t-linne .sc-buy-grid, body.t-linne .sc-strip-row { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-linne .sc-buy-card { padding: 0 22px 36px; align-items: flex-start; text-align: left; }
body.t-linne .sc-buy-media { margin: 0 -22px; }
body.t-linne .sc-buy-cat { display: none; }
body.t-linne .sc-buy-t { margin-top: 20px; }
body.t-linne .sc-buy-p { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--ln-blue); }

/* the one band, welded to both walls — the reference's single line of picture */
body.t-linne .sc-banner { margin: 0 calc(50% - 50vw); padding: 112px 28px; }

/* the closing tiles carry their label ON the picture, never under it */
body.t-linne .sc-strip-card { position: relative; }
body.t-linne .sc-strip-img { aspect-ratio: 4 / 3; border: 0; }
body.t-linne .sc-strip-label { position: absolute; left: 22px; bottom: 20px; margin: 0; color: #ffffff; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }

/* the page ends full-bleed: a wide strip, not a centred form */
body.t-linne .sc-contact-band-inner { max-width: 860px; text-align: left; }

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

/* NIGHT — paper drops to near-black and the ink inverts, but the geometry is
   untouched: the walls stay gapless and the halves keep touching. The slate
   lifts to a laundered pale blue so the controls, the prices and the hairline
   under each heading remain the only coloured things on the page. */
html[data-theme="dark"] body.t-linne {
  background: #101114;
  color: #e8eaed;
  --ln-blue: #93a8c8;
  --ln-deep: #adbedb;
  --bg-flat: #101114;
  --surface: #17191d;
  --surface-2: #1a1d22;
  --line: #2a2d33;
  --line-strong: #3a3e46;
  --heading: #ffffff;
  --text: #e8eaed;
  --muted: #8d939c;
  --header-bg: #101114;
}
html[data-theme="dark"] body.t-linne .sf-header, html[data-theme="dark"] body.t-linne .sf-head,
html[data-theme="dark"] body.t-linne .sf-footer, html[data-theme="dark"] body.t-linne .sf-foot,
html[data-theme="dark"] body.t-linne .sf-cats { background: #101114; border-color: #2a2d33; }
html[data-theme="dark"] body.t-linne .btn.brand { color: #101114; }