/*
 * Supply Solution — Base
 * Applies design tokens at the page level.
 * Loaded AFTER tokens.css.
 */

body {
    font-family: var(--font-sans);
    font-size:   var(--text-base);
    line-height: var(--leading-base);
    color:       var(--text-primary);
    /*
     * !important: parent theme's styles-l.css line ~135 sets
     * `body { background: var(--ss-white); }` and loads DEAD LAST on
     * desktop (media min-width:768px). Without !important the parent
     * rule silently wins on desktop.
     */
    background: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Numeric values (prices, quantities, SKUs, refs) always monospace — brand signature */
.ss-num,
.ss-price,
.ss-sku {
    font-family: var(--font-mono);
}

/*
 * Header tint — subtle warm-cream fade that spans the entire header
 * (promo bar → welcome strip → logo/search → megamenu) AND EXTENDS
 * PAST the megamenu into the first ~200px of content before it fully
 * washes to white.
 *
 * Applied to `.page-wrapper` (the outer container that wraps header +
 * main + footer) with PIXEL-BASED stops so the fade distance is stable
 * regardless of header height. Cream holds through ~360px (covers all
 * header rows), then softly fades to pure white by ~560px (about 200px
 * into content). Everything below is plain white via base color fallback.
 *
 * Then each opaque header row is forced transparent so the wrapper's
 * gradient bleeds through the header rows.
 *
 * !important on each override because their base rules also use
 * !important (parent theme's styles-l.css / search / megamenu modules).
 */
.page-wrapper {
    background: linear-gradient(180deg,
        #fdf9f3 0,
        #fdf9f3 360px,
        #ffffff 560px
    ) no-repeat #ffffff !important;
}
/*
 * Header container — SOLID cream, not transparent.
 * `header.page-header` is `position: sticky; top: 0` in the parent
 * theme (styles-l.css line ~167). A transparent bg lets scrolled content
 * bleed through when the header sticks. Solid #fdf9f3 blocks the bleed
 * AND matches the wrapper's gradient at rest (which is #fdf9f3 solid
 * through the first 360px), so at rest the header still looks like part
 * of the fade — but when sticky it stays opaque.
 */
.page-header {
    background: #fdf9f3 !important;
}
/* Welcome strip / panel */
.page-header .panel.header,
.page-header .panel.wrapper,
.panel.wrapper {
    background: transparent !important;
}
/* Logo/search row */
.page-header .header.content,
.header.content {
    background: transparent !important;
}
/* Search block wrapper — livesearch module paints this in some viewports */
.page-header .block-search,
.page-header .block.block-search,
.page-header .search-container {
    background: transparent !important;
}
/* Megamenu row — Redwoodcore_MegaMenu module */
.page-header .rwc-megamenu,
.page-header .rwc-megamenu-wrap,
.page-header nav.navigation,
.rwc-megamenu {
    background: transparent !important;
}