/* lw-brand.css — The Living Word brand layer, loaded on EVERY page.
*
* Scope: only what the deterministic exact-hex recolor cannot reach —
* (1) the page ground token, (2) the header logo render fix, (3) the added tier ladder,
* (4) the drawer's savings rows, (5) the ATC/checkout busy state.
* It adds no sections and changes no template structure.
*
* Tokens are measured (see baseline/brand-inputs/brand-tokens.md):
* gold is NEVER a button and NEVER body text (white-on-gold 2.38, gold-on-cream 2.20).
* --rose is the cover's blush deepened until white text clears 5.07.
*/
:root {
--lw-bg: #FAF5F1;
--lw-surface: #FFFFFF;
--lw-surface-blush: #FBEEF0;
--lw-blush: #F1CFD4;
--lw-blush-deep: #DFBBBF;
--lw-rose: #A85562;
--lw-rose-deep: #8E4450;
--lw-gold: #C5A369;
--lw-gold-text: #7A5C2E;
--lw-ink: #2A2124;
--lw-ink-2: #5A4A4E;
--lw-ink-3: #8A767A;
}
/* ---------------------------------------------------------------- 1. page ground
The template's ground is pure white. Re-skinning it to our warm cream is done by moving the
THEME'S OWN scheme variable, not by find/replacing every #ffffff — which would also have
recoloured white type sitting on the rose bands. */
.color-background-1,
.gradient.color-background-1 { --color-background: 250, 245, 241; }
body { background-color: var(--lw-bg); }
/* ---------------------------------------------------------------- 2. header logo
S3-4: the theme sized the logo slot for its own wordmark, so a swapped
collapses to 0 width and vanishes. Force it in-flow at a real height on every page type. */
.header__heading-link .header__heading-logo,
.header__heading-link img {
display: block !important;
width: auto !important;
height: 34px !important;
max-height: 34px !important;
min-width: 96px !important;
object-fit: contain !important;
}
@media screen and (min-width: 990px) {
.header__heading-link .header__heading-logo,
.header__heading-link img { height: 42px !important; max-height: 42px !important; min-width: 128px !important; }
}
/* ---------------------------------------------------------------- 2b. operator decision D4
The header is stripped to logo + cart icon and the footer is gone.
The logo is CENTRED: a three-track grid (spacer | logo | icons) puts it at the true optical
centre of the header regardless of how wide the cart icon is — which a flex row with
space-between cannot do with only two children.
The theme's own `grid-template-areas: "heading navigation icons"` still names three areas, so
the placements below are set explicitly rather than relying on source order. */
.header {
display: grid !important;
grid-template-areas: none !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
gap: 1rem;
padding-top: 1rem; padding-bottom: 1rem;
}
.header__heading, .header__heading-link {
margin: 0 !important;
grid-area: auto !important;
grid-column: 2 !important;
justify-self: center !important;
}
.header__icons {
grid-area: auto !important;
grid-column: 3 !important;
justify-self: end !important;
}
.lw-header-logo {
display: block;
height: 34px; width: auto; max-width: 62vw;
object-fit: contain;
}
@media screen and (min-width: 750px) { .lw-header-logo { height: 44px; } }
/* NOTE: do NOT display:none the footer section-group. After removeFooter() the only thing left in
it is screen-reader boilerplate and the theme's inline script that drives the sticky-ATC binding
and the scroll-reveal IntersectionObserver. The