/* ---- cullet (Gather — Hot glass studio 59) — recycled bottle glass: charcoal,
   paper, one deep bottle green and one amber.
   THE STRUCTURAL MOVE: the page is a ladder of full-bleed SLABS instead of a
   column of cards. Both strips and the closing contact band leave the 1080
   container for the full viewport width and take the charcoal ground, so the
   bands alternate charcoal / paper strictly from the hero down and the
   whitespace lives BETWEEN bands, never inside them.
   The second strip — the makers' row, which lands late at position seven — is
   reached with the sibling combinator `.sc-strip ~ .sc-strip`, NOT :nth-of-type:
   every band on this page renders as a bare <section>, so an of-type selector
   would be counting heroes and grids and would silently miss. There the four
   squares turn portrait and the labels drop the amber, so position seven rhymes
   with position three without repeating it.
   Amber is rationed to exactly two places — the four facts labels and the
   seconds banner. Bottle green is left to the buttons and the category tags,
   which they get for free from --brand. ---- */

/* DAY — bottle glass on paper */
body.t-cullet {
  background: #f4f2ed;
  color: #3f4145;
  --cu-ink: #17181a;
  --cu-paper: #f4f2ed;
  --cu-amber: #c8862f;
  --surface: #ffffff;
  --surface-2: #e7e4dc;
  --line: #d9d5cb;
  --line-strong: #c2bdb0;
  --heading: #17181a;
  --text: #3f4145;
  --muted: #6e7176;
  --header-bg: rgba(23, 24, 26, 0.95);
  --radius: 0;
  --shadow: none;
}

/* the bar, the category rail and the footer are the same near-black the hero
   opens on, so the page is book-ended in charcoal before a band is drawn */
body.t-cullet .sf-header, body.t-cullet .sf-cats, body.t-cullet .sf-footer {
  background: var(--cu-ink);
  color: var(--cu-paper);
  border-color: #2f3134;
  border-top: 0;
  margin-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.t-cullet .sf-header a, body.t-cullet .sf-cats a, body.t-cullet .sf-footer a { color: var(--cu-paper); }
body.t-cullet .btn.brand { box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 15px 30px; }

/* one still, underexposed at the top, copy dead centre of a full viewport */
body.t-cullet .sc-hero { min-height: 100vh; }
body.t-cullet .sc-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 24px; }
body.t-cullet .sc-h2 { font-size: clamp(21px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 30px; }

/* words before any picture: one narrow centred column with no image in it */
body.t-cullet .sc-richtext { max-width: 620px; padding: 88px 20px 92px; }
body.t-cullet .sc-richtext p, body.t-cullet .sc-about-copy p { font-size: 17px; line-height: 1.65; color: var(--text); }

/* --- THE SLAB: a strip drops the container and takes the whole width --- */
body.t-cullet .sc-strip {
  background: var(--cu-ink);
  color: var(--cu-paper);
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 72px max(20px, 50vw - 540px) 76px;
}
body.t-cullet .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.t-cullet .sc-strip-img { border: 0; background: #0e0f10; }
body.t-cullet .sc-strip-label { margin-top: 14px; color: var(--cu-amber); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; }
body.t-cullet .sc-strip ~ .sc-strip .sc-strip-img { aspect-ratio: 3 / 4; }
body.t-cullet .sc-strip ~ .sc-strip .sc-strip-label { color: var(--cu-paper); text-transform: none; letter-spacing: 0.01em; font-size: 14px; font-weight: 600; }

/* the paper bands: the same air above and below every one of them, and the
   catalogue tiles lose their card chrome so a row reads as a slab, not cards */
body.t-cullet .sc-products, body.t-cullet .sc-buygrid, body.t-cullet .sc-about-split { padding: 84px 20px 88px; }
body.t-cullet .product-card, body.t-cullet .product-card .meta { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
body.t-cullet .product-card .ph { aspect-ratio: 3 / 2; }
body.t-cullet .product-grid { padding: 6px 0 0; }
body.t-cullet .sc-banner { margin: 0 calc(50% - 50vw); min-height: 58vh; display: flex; align-items: center; justify-content: center; }
body.t-cullet .sc-banner h2 { color: var(--cu-amber); letter-spacing: -0.02em; }

/* footer-shaped: wide, shallow, on the ground the page opened on. The local
   token overrides are what put the form's own inputs on the dark band. */
body.t-cullet .sc-contact-band { background: var(--cu-ink); color: var(--cu-paper); padding: 72px 0 78px; --muted: #9a9d9f; --surface: #202225; --line: #3a3d41; --line-strong: #4a4d51; }
body.t-cullet .sc-contact-band-inner { max-width: 1040px; }

@media (min-width: 880px) {
  body.t-cullet .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.t-cullet .product-grid, body.t-cullet .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* trade fields on one line with the button under them — a strip, not a panel */
  body.t-cullet .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
  body.t-cullet .sc-contact-band .sc-contact-form textarea { height: 44px; min-height: 44px; }
  body.t-cullet .sc-contact-band .sc-contact-form .btn { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
}

/* NIGHT — the yard after the melt. The ground goes blacker than the slabs, so
   the charcoal bands that were the dark half of the page become the lit half
   and the alternation survives instead of flattening into one black page. */
html[data-theme="dark"] body.t-cullet {
  background: #0b0c0d;
  color: #b7b4ac;
  --brand: #3f8a68;
  --cu-ink: #191a1d;
  --cu-amber: #dda254;
  --surface: #141517;
  --surface-2: #1c1e21;
  --line: #26282c;
  --line-strong: #3a3d42;
  --heading: #f4f2ed;
  --text: #b7b4ac;
  --muted: #82858a;
  --header-bg: rgba(11, 12, 13, 0.95);
}