/* ---- lys (Lys — Picture framing & mouldings 109) ---------------------------
   THE STRUCTURAL MOVE: the catalogue is a RULED PRICE LEDGER, not a wall of
   cards. .sc-buy-grid collapses to a single column and every .sc-buy-card
   becomes a flush four-track row — small thumbnail, name over its category
   line, the rand figure hard right, the control last — with dusty-rose
   hairlines instead of boxes, standing on a white band cut out of the dove
   ground. Everything else keeps one centred measure: a photograph-free hours
   column opens the page, six mouldings sit as one gapless slab with 2px
   gutters, and the measure breaks in two exactly once, late, for the bench. */
body.t-lys {
  background: #e2e5e4;
  color: #23272a;
  --radius: 0;
  --header-bg: #e2e5e4;
  --surface: #ffffff;
  --surface-2: #d6dad9;
  --line: #cbcfce;
  --line-strong: #b3b9b7;
  --heading: #14181b;
  --text: #23272a;
  --muted: #6c7275;
}
body.t-lys .sf-header, body.t-lys .sf-footer { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #cbcfce; }
body.t-lys .sf-name { text-transform: uppercase; letter-spacing: 0.34em; font-size: 14px; font-weight: 600; }
body.t-lys .btn.brand { background: #a05e59; border-color: #a05e59; color: #ffffff; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.13em; font-size: 11px; font-weight: 700; padding: 13px 24px; }
body.t-lys .btn.brand:hover { background: #874c48; }

/* the stage fills the viewport and nothing on it sits off centre */
body.t-lys .sc-hero { min-height: 100vh; }
body.t-lys .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(32px, 5.6vw, 68px); line-height: 1.06; letter-spacing: -0.02em; }
body.t-lys .sc-h2 { position: relative; font-family: var(--sf-serif); font-weight: 400; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -0.01em; color: #14181b; margin-bottom: 30px; }

/* the cold opening column — hours and rules, no photograph anywhere near it */
body.t-lys .sc-richtext { max-width: 640px; padding: clamp(62px, 9vw, 100px) 20px clamp(46px, 6vw, 70px); }
body.t-lys .sc-richtext p { color: #3c4245; font-size: 16px; line-height: 1.95; }

/* six mouldings read as one slab: hairline gutters, no rounding, no borders */
body.t-lys .sc-strip-row { grid-template-columns: repeat(3, 1fr); gap: 2px; }
body.t-lys .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 5 / 4; }
body.t-lys .sc-strip-label { margin-top: 8px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; color: #6c7275; }

/* THE LEDGER — a white band, one column, flush ruled rows, figure hard right */
body.t-lys .sc-buygrid { position: relative; padding: clamp(56px, 8vw, 86px) 20px clamp(58px, 8vw, 90px); }
body.t-lys .sc-buygrid::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #ffffff; }
body.t-lys .sc-buy-grid { position: relative; grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid #d3ada8; }
body.t-lys .sc-buy-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: clamp(16px, 2.4vw, 30px); align-items: center; text-align: left; padding: 20px 0; border-top: 1px solid #d3ada8; }
body.t-lys .sc-buy-media { grid-column: 1; grid-row: 1 / span 2; width: 64px; }
body.t-lys .sc-buy-t { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; font-size: 17px; font-weight: 500; }
body.t-lys .sc-buy-cat { grid-column: 2; grid-row: 2; align-self: start; margin-top: 3px; color: #6c7275; letter-spacing: 0.18em; font-size: 10px; }
body.t-lys .sc-buy-p { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin-top: 0; font-size: 19px; font-weight: 600; color: #14181b; }
body.t-lys .sc-buy-form, body.t-lys .sc-buy-card > .sc-buy-btn { grid-column: 4; grid-row: 1 / span 2; margin-top: 0; }

/* the one place the measure breaks in two, then the last contained band */
body.t-lys .sc-about-split { gap: clamp(30px, 5vw, 64px); padding: clamp(62px, 9vw, 98px) 20px; }
body.t-lys .sc-banner { min-height: 52vh; display: flex; align-items: center; justify-content: center; }

@media (max-width: 760px) {
  body.t-lys .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-lys .sc-buy-card { grid-template-columns: 52px minmax(0, 1fr) auto; }
  body.t-lys .sc-buy-media { width: 52px; }
  body.t-lys .sc-buy-form, body.t-lys .sc-buy-card > .sc-buy-btn { grid-column: 2 / 4; grid-row: 3; justify-self: start; margin-top: 12px; }
}

/* NIGHT — dove and white swap for graphite and a raised panel; the rose lifts
   so the ledger rules still read as hairlines rather than disappearing */
html[data-theme="dark"] body.t-lys {
  background: #17191b;
  color: #aeb4b3;
  --header-bg: #17191b;
  --surface: #1e2123;
  --surface-2: #23272a;
  --line: #2c3032;
  --line-strong: #3b4043;
  --heading: #e8ebea;
  --text: #aeb4b3;
  --muted: #7c8385;
}
html[data-theme="dark"] body.t-lys .sf-header, html[data-theme="dark"] body.t-lys .sf-footer { border-color: #2c3032; }
html[data-theme="dark"] body.t-lys .sc-h2, html[data-theme="dark"] body.t-lys .sc-buy-t, html[data-theme="dark"] body.t-lys .sc-buy-p { color: #e8ebea; }
html[data-theme="dark"] body.t-lys .sc-richtext p { color: #aeb4b3; }
html[data-theme="dark"] body.t-lys .sc-buygrid::before { background: #1e2123; }
html[data-theme="dark"] body.t-lys .sc-buy-grid, html[data-theme="dark"] body.t-lys .sc-buy-card { border-color: #6b4340; }
html[data-theme="dark"] body.t-lys .sc-buy-cat, html[data-theme="dark"] body.t-lys .sc-strip-label { color: #7c8385; }
html[data-theme="dark"] body.t-lys .btn.brand { background: #cf8f88; border-color: #cf8f88; color: #17191b; }
html[data-theme="dark"] body.t-lys .btn.brand:hover { background: #ddaaa3; }
html[data-theme="dark"] body.t-lys .sc-field input, html[data-theme="dark"] body.t-lys .sc-field textarea { background: #1e2123; border-color: #2c3032; color: #e8ebea; }