/* ---- bevel (Bevel — Eyewear 51) — optical paper, ink, one cold slate --------
   THE STRUCTURAL MOVE: the category strip is welded onto the hero as a GAPLESS
   WALL — six tall 3:4 doors, three across, two rows, edge to edge, no heading
   above them and the label set small and wide-tracked OVER the picture instead
   of under it. Every other strip in the roster is a small gapped square row
   beneath a title; this one reads as a continuation of the photograph. With a
   full-viewport opener above it and a full-bleed band below it, three
   uninterrupted photographic screens run back to back before a price appears,
   and the airy four-across catalogue is the only white space on the page.
   The bar is frosted paper rather than a slab, so the hero shows through it at
   the top of the page and it reads solid once paper is scrolled under it.
   The slate is kept for three places only: the hero rule, the cart badge and
   the price. Nothing else on the page is a colour. */
body.t-bevel {
  background: #f6f5f2;
  color: #3a3a38;
  --radius: 0;
  --header-bg: rgba(246, 245, 242, 0.72);
  --surface: #ffffff;
  --surface-2: #edece8;
  --line: #e0ded8;
  --line-strong: #cbc8c0;
  --heading: #141414;
  --text: #3a3a38;
  --muted: #82817c;
}
/* wordmark on the centre axis, hamburger hard left, cart hard right — the whole
   right-hand group is lifted out of flow so the name sits on the page's centre
   line rather than being pushed off it by whatever else is in the bar */
body.t-bevel .sf-header .container { position: relative; }
body.t-bevel .sf-name { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.36em; }
body.t-bevel .sf-cart .badge { background: #3f4a52; box-shadow: none; }
body.t-bevel .btn.brand { background: #141414; border-color: #141414; color: #f6f5f2; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 500; padding: 15px 30px; }

/* the opener: one full screen, copy sitting low rather than dead centre */
body.t-bevel .sc-hero { min-height: calc(100vh - 52px); align-items: flex-end; padding: 0 20px 13vh; }
body.t-bevel .sc-hero h1 { font-weight: 300; font-size: clamp(38px, 6.4vw, 78px); letter-spacing: -0.025em; margin-bottom: 18px; }
body.t-bevel .sc-hero p { text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; margin-bottom: 32px; }
body.t-bevel .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-width: 1px; border-color: #3f4a52; color: #ffffff; }

/* THE WALL — welded to the hero, zero gap, zero radius, no heading, no border,
   and the label lying on the photograph rather than sitting under it */
body.t-bevel .sc-strip { max-width: none; padding: 0; }
body.t-bevel .sc-strip-row { grid-template-columns: repeat(3, 1fr); gap: 0; }
body.t-bevel .sc-strip-card { position: relative; }
body.t-bevel .sc-strip-img { aspect-ratio: 3 / 4; border: 0; }
body.t-bevel .sc-strip-label { position: absolute; left: 22px; bottom: 20px; margin: 0; color: #ffffff; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 500; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }

/* the third screen in a row: the band loses its margins so it butts straight
   onto the wall, and it is tall enough to be a screen rather than a strapline */
body.t-bevel .sc-banner { margin: 0 calc(50% - 50vw); min-height: 70vh; display: flex; align-items: center; justify-content: center; }

/* the only white space on the page */
body.t-bevel .sc-products { max-width: 1200px; padding: 104px 20px 92px; }
body.t-bevel .product-grid { grid-template-columns: repeat(4, 1fr); gap: 56px 40px; padding: 0; }
body.t-bevel .product-card, body.t-bevel .product-card:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
body.t-bevel .product-card .meta { padding: 16px 0 0; }
body.t-bevel .product-card .t { font-weight: 400; font-size: 15px; letter-spacing: 0.01em; }
body.t-bevel .product-card .p { color: #3f4a52; font-size: 13px; margin-top: 6px; }

/* the close: the one symmetric, contained block on an edge-to-edge page */
body.t-bevel .sc-contact { max-width: 520px; padding: 96px 20px 112px; }

@media (max-width: 900px) {
  body.t-bevel .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-bevel .product-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 22px; }
}

/* NIGHT — the same shop with the lights off: paper drops to near-black, ink
   comes up to bone, and the slate lifts to a cold blue-grey that still carries
   on a dark ground for the rule, the badge and the price */
html[data-theme="dark"] body.t-bevel {
  background: #101010;
  color: #c8c7c2;
  --header-bg: rgba(16, 16, 16, 0.72);
  --surface: #171717;
  --surface-2: #1c1c1c;
  --line: #262626;
  --line-strong: #343434;
  --heading: #f2f1ee;
  --text: #c8c7c2;
  --muted: #86857f;
}
html[data-theme="dark"] body.t-bevel .btn.brand { background: #f2f1ee; border-color: #f2f1ee; color: #101010; }
html[data-theme="dark"] body.t-bevel .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-color: #8ea0ad; color: #ffffff; }
html[data-theme="dark"] body.t-bevel .sf-cart .badge { background: #8ea0ad; color: #101010; }
html[data-theme="dark"] body.t-bevel .product-card .p { color: #8ea0ad; }
html[data-theme="dark"] body.t-bevel .sc-field input, html[data-theme="dark"] body.t-bevel .sc-field textarea { background: #171717; border-color: #262626; color: #f2f1ee; }