/* ---- bossie (Bossie — Rooibos, honeybush & loose leaf 149) -----------------
   THE STRUCTURAL MOVE: THE PAIR. Exactly two oversized tiles weld edge to edge
   with each other and with the window, directly under a full-viewport slider —
   no gutter, no prices, the label burnt into the bottom of the picture. That
   pair is the widest gesture on the page, and everything after it gets quieter
   in one hard step: the catalogue is ONE contained eight-tile buy grid on a
   band of pure white, the smallest and calmest block on a page otherwise built
   from enormous photographs, and the page tails off in a gapless ribbon of six
   small squares. The two strips are told apart by card count, not by heading —
   :has(.sc-strip-card:nth-child(3)) is the ribbon, :not(...) is the pair — so
   the split survives a merchant giving the ribbon a title. Warm bone ground,
   soft near-black ink, oat for the one tinted band, and steeped red-amber
   rationed to two homes: the controls and the rand figure. ---------------- */
body.t-bossie {
  background: #f6f1e8;
  color: #1c1a17;
  --bs-red: #a8452a;
  --bs-oat: #e8dfcf;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bg-flat: #f6f1e8;
  --surface: #ffffff;
  --surface-2: #efe7d8;
  --line: #e3d9c7;
  --line-strong: #cdbfa6;
  --heading: #171512;
  --text: #1c1a17;
  --muted: #7c7364;
  --header-bg: #f6f1e8;
  --radius: 0;
  --shadow: none;
}

/* a plain bone bar that scrolls away — not sticky, not blurred, nothing clever */
body.t-bossie .sf-header, body.t-bossie .sf-head,
body.t-bossie .sf-footer, body.t-bossie .sf-foot, body.t-bossie .sf-cats {
  position: static; background: #f6f1e8; border-color: #e3d9c7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* ...except on the shop front, where it floats transparent over slide one.
   Scoped by :has, because cart, search and product pages have no stage to
   float over and need the ordinary solid bar back. */
body.t-bossie:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; }
body.t-bossie:has(.sc-hero) .sf-name, body.t-bossie:has(.sc-hero) .sf-navlink,
body.t-bossie:has(.sc-hero) .sf-cart, body.t-bossie:has(.sc-hero) .theme-toggle { color: #f7f2e9; }

body.t-bossie .sf-name, body.t-bossie .sc-hero h1, body.t-bossie .sc-h2,
body.t-bossie .sc-buy-t, body.t-bossie .pdp h1 { font-family: var(--sf-serif); font-weight: 400; letter-spacing: 0; }

/* RED 1 of 2 — a flat slab with no ring around it */
body.t-bossie .btn.brand { background: var(--bs-red); border-color: var(--bs-red); color: #fbf6ef; box-shadow: none; padding: 13px 28px; letter-spacing: 0.04em; }

/* the stage: a full screen of photograph, three slides, copy dead centre */
body.t-bossie .sc-hero { min-height: 100vh; padding: 132px 20px 96px; }
body.t-bossie .sc-hero h1 { font-size: clamp(34px, 5.6vw, 68px); line-height: 1.08; margin-bottom: 18px; }

/* both strips break the container and lose their tile edges — the pair and the
   ribbon are the only two full-bleed picture blocks on the page */
body.t-bossie .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 82px 0 0; }
body.t-bossie .sc-strip-img { border: 0; border-radius: 0; }

/* THE PAIR — two cards only, so the third-child test fails. Gapless against
   each other, labels burnt into the picture, not a price anywhere near them. */
body.t-bossie .sc-strip:not(:has(.sc-strip-card:nth-child(3))) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 18px; }
body.t-bossie .sc-strip:not(:has(.sc-strip-card:nth-child(3))) .sc-strip-card { position: relative; }
body.t-bossie .sc-strip:not(:has(.sc-strip-card:nth-child(3))) .sc-strip-img { aspect-ratio: 5 / 4; }
body.t-bossie .sc-strip:not(:has(.sc-strip-card:nth-child(3))) .sc-strip-label {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: 104px 34px 30px;
  background: linear-gradient(rgba(20, 16, 12, 0), rgba(20, 16, 12, 0.76));
  font-family: var(--sf-serif); font-weight: 400; font-size: clamp(17px, 2.3vw, 27px);
  color: #f8f3ea; text-align: left;
}

/* THE RIBBON — six small squares in one gapless run, caption row kept to a
   whisper so it reads as a photo strip and not as a content section */
body.t-bossie .sc-strip:has(.sc-strip-card:nth-child(3)) .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-bossie .sc-strip:has(.sc-strip-card:nth-child(3)) .sc-strip-img { aspect-ratio: 1; }
body.t-bossie .sc-strip:has(.sc-strip-card:nth-child(3)) .sc-strip-label { margin-top: 10px; padding: 0 8px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* the quiet one: the only priced block on the page, contained and gapped on a
   band of pure white so the flat-lays float clean off the bone */
body.t-bossie .sc-buygrid { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); background: #ffffff; padding: 96px max(20px, calc(50vw - 540px)) 104px; }
body.t-bossie .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 26px; }
body.t-bossie .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; font-size: 10px; font-weight: 600; }
/* RED 2 of 2 — the rand figure, and nowhere else in the catalogue */
body.t-bossie .sc-buy-p { color: var(--bs-red); font-size: 16px; font-weight: 600; }

/* the held breath between the two heavy picture blocks — an oat band, the only
   tinted ground on the page */
body.t-bossie .sc-about-split { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); background: var(--bs-oat); padding: 92px max(20px, calc(50vw - 540px)); gap: 62px; }
body.t-bossie .sc-about-copy p { color: var(--text); font-size: 17px; line-height: 1.86; }

/* the counter, split: the address and the pickup window one side, fields the other */
body.t-bossie .sc-contact-lead p { color: var(--muted); font-size: 16.5px; line-height: 1.85; white-space: pre-line; }

@media (max-width: 940px) {
  body.t-bossie .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-bossie .sc-strip:has(.sc-strip-card:nth-child(3)) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-bossie .sc-hero { padding: 108px 20px 76px; }
}

/* NIGHT — the bone steeps down to a dark brown and the white catalogue band
   becomes the one lifted panel in the room, so the flat-lays still float off
   it. The red is warmed a couple of stops to keep carrying the buttons and the
   rand figures once the photographs are the brightest things on the page. */
html[data-theme="dark"] body.t-bossie {
  background: #16130f;
  color: #cbc2b3;
  --bs-red: #cf6440;
  --bs-oat: #201b15;
  --bg-flat: #16130f;
  --surface: #1d1913;
  --surface-2: #241f18;
  --line: #2e2820;
  --line-strong: #443b30;
  --heading: #f4ece0;
  --text: #cbc2b3;
  --muted: #918675;
  --header-bg: #16130f;
}
html[data-theme="dark"] body.t-bossie .sf-header, html[data-theme="dark"] body.t-bossie .sf-head,
html[data-theme="dark"] body.t-bossie .sf-footer, html[data-theme="dark"] body.t-bossie .sf-foot,
html[data-theme="dark"] body.t-bossie .sf-cats { background: #16130f; border-color: #2e2820; }
html[data-theme="dark"] body.t-bossie .sc-buygrid { background: #1d1913; }
html[data-theme="dark"] body.t-bossie .btn.brand { color: #17120e; }