:root {
    --lotus-indigo: #20315b;
    --lotus-lavender: #7283ac;
    --lotus-blue: #acb2c8;
    --lotus-aqua: #d3d4de;
    --lotus-blush: #e6dcdb;
    --lotus-gold: #cca65c;
    --page-bg: #f6f7f9;
    --surface: #ffffff;
    --text: #212736;
    --muted: #656f86;
    --primary: #345093;
    --primary-dark: #20315b;
    --primary-soft: #edeff3;
    --accent: #b2534d;
    --border: #dee1e8;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shell: 1180px;
    --narrow: 780px;
    --section-spacing: 56px;
    --hero-spacing: 72px;
    --radius-small: 10px;
    --radius: 6px;
    --radius-large: 12px;
    --font-size-site-title: 23px;
    --font-size-h1: 56px;
    --font-size-h2: 40px;
    --font-size-h3: 22px;
    --font-size-body: 17px;
    --font-size-lead: 20px;
    --font-size-nav: 15px;
    --font-size-button: 15px;
    --font-size-small: 13px;
}

/* Managed public typography */
.site-header .site-brand-name,
.site-header .site-brand-title {
    font-size: var(--font-size-site-title, 23px) !important;
}

.site-footer-identity h2 {
    font-size: var(--font-size-footer-title, 24px) !important;
}

.site-header .main-nav a,
.site-header .nav-item-link,
.site-header .nav-item-heading {
    font-size: var(--font-size-nav, 15px) !important;
}

.site-header ~ main {
    font-size: var(--font-size-body, 17px);
}

.site-header ~ main h1,
.site-header ~ main .page-hero h1,
.site-header ~ main .builder-public-hero h1 {
    font-size: var(--font-size-h1, 56px) !important;
}

.site-header ~ main h2 {
    font-size: var(--font-size-h2, 40px) !important;
}

.site-header ~ main h3 {
    font-size: var(--font-size-h3, 22px) !important;
}

.site-header ~ main .lead,
.site-header ~ main .lead.prose,
.site-header ~ main .builder-public-hero .lead {
    font-size: var(--font-size-lead, 20px) !important;
}

.site-header ~ main .button,
.site-header ~ main button.button {
    font-size: var(--font-size-button, 15px) !important;
}

.site-header .site-brand-subtitle,
.site-footer,
.site-footer small {
    font-size: var(--font-size-small, 13px);
}

/* Managed public spacing */
.site-header ~ main .section {
    padding-top: var(--section-spacing, 56px) !important;
    padding-bottom: var(--section-spacing, 56px) !important;
}

.site-header ~ main .builder-public-hero.section,
.site-header ~ main .page-hero {
    padding-top: var(--hero-spacing, 72px) !important;
    padding-bottom: var(--hero-spacing, 72px) !important;
}

.site-header ~ main .builder-layout-public-row {
    padding-top: var(--section-spacing, 56px);
    padding-bottom: var(--section-spacing, 56px);
}

.site-header ~ main .builder-layout-public-row .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Site Custom CSS */
.builder-public-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.builder-public-hero .eyebrow { font-size: .9rem; letter-spacing: .1em; }

/* ============================================================
   Forum chrome -- sits the injected Your Shop Space header/footer
   correctly inside Invision Community, and flattens IPS's own
   styling toward the plain site look.
   ============================================================ */

/* The band sits above IPS's own header in the document. It needs a
   stacking context that beats IPS's header (so the account dropdown
   isn't painted over by IPS's avatar), but NOT sticky (which would
   slide it over content). relative + a high z-index does both.
   9000 clears IPS's header (~1000-2000) while staying under IPS's
   own modals (10000+). */
#yss-forum-header {
    position: relative;
    z-index: 9000;
}
#yss-forum-header .site-header {
    position: relative !important;
}

/*
 * No blanket font-family here on purpose -- site.css/public-header.css
 * are now loaded directly in the forum's theme, and their own
 * per-element rules (.site-brand-name, .main-nav a, etc.) already set
 * the right font. An ID-selector rule here would beat those class
 * selectors on specificity alone and force the wrong font throughout,
 * which is exactly the bug this used to cause.
 */

/* --- Flatten IPS toward "plain" --- */
:root {
    --i-primary: var(--primary, #59659a);
    --i-box--bo-ra: 6px;
    --i-nav--bo-ra: 0px;
}

.ipsHeader,
.ipsHeader__primary,
.ipsHeader__secondary {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ipsHeader::before,
.ipsBox__header::before {
    display: none !important;
}

/* Kill IPS's sticky header -- with the Your Shop Space band sitting
   above it in the document, a sticky IPS header slides up and
   overlaps the band (the "C avatar over the Help menu" bleed).
   Both header rows now just scroll normally. */
.ipsHeader__primary,
.ipsHeader__secondary,
.ipsMobileHeader {
    position: static !important;
}

/*
 * IPS's dark header text is low-contrast against the navy. Brighten
 * it toward white so the logo text and nav read cleanly.
 *
 * !important, not just the .ipsApp prefix: ".ipsApp a:not(.ipsButton)"
 * below turns out to tie this rule's specificity exactly (:not()'s
 * argument counts as a class, so ".ipsButton" makes that rule just as
 * specific as this one, not less) -- a tie goes to whichever rule is
 * later in the file, which was the blue one. !important is the only
 * way to reliably win here rather than depending on which of the two
 * rules happens to come last.
 *
 * :not(i-dropdown *) on the (a, button) line: the Account/Notifications/
 * Reports panels are <i-dropdown popover> elements -- the Popover API
 * renders them in the browser's top layer, but they're still DOM
 * descendants of .ipsHeader__primary at their trigger's position, so
 * without this exclusion every link inside those light-background
 * panels was also forced to white text -- invisible against their own
 * white popover background. The exclusion's specificity cost is just
 * the bare "i-dropdown" type selector (~1 tag), nowhere near the ID-
 * sized mistake described below for the blue-link fix, so it's safe to
 * add here without another specificity fight.
 */
.ipsApp .ipsHeader__primary,
.ipsApp .ipsHeader__primary :is(a, button):not(i-dropdown *),
.ipsApp .ipsHeader__primary [class*="ipsLogo"],
.ipsApp .ipsHeader__primary .ipsNavBar__text {
    color: #fff !important;
}

.ipsApp .ipsHeader__primary .ipsNavBar > li:not([data-active]) > :is(a, button) {
    color: hsl(0 0% 100% / .8) !important;
}

/* Same specificity issue as .ipsHeader__primary above. */
.ipsApp .ipsHeader__secondary,
.ipsApp .ipsHeader__secondary :is(a, button),
.ipsApp .ipsBreadcrumb :is(a, li, span) {
    color: hsl(0 0% 100% / .9) !important;
}

.ipsBox {
    box-shadow: none;
    border: 1px solid var(--border, #dedee8);
    border-radius: 6px;
}

.ipsFooter {
    box-shadow: none;
    background: var(--surface-soft, #f5f3f9);
}

/* IPS uses a min-height:100vh sticky-footer layout to pin its footer
   to the bottom on short pages. With the Your Shop Space header and
   footer bands added, the page is already taller than a viewport, so
   that stretch just becomes dead grey space between the forum and its
   footer. Let the page be as tall as its actual content instead. */
html.ipsApp,
body,
body.ipsApp,
.ipsApp,
.ipsLayout,
.ipsLayout__main,
.ipsLayout__content,
.ipsLayout_container,
[id^="ipsLayout"],
[class*="ipsLayout"] {
    min-height: 0 !important;
}

#yss-forum-footer {
    margin-top: 0;
}

/* --- Bleed guards ---
   site.css carries some low-specificity global element rules (body
   font, link colour, base button/input look). Re-assert IPS's own
   defaults inside its app so the forum content keeps its own
   typography -- the injected band above still uses the site font. */
.ipsApp,
.ipsApp :is(p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, input, select, textarea, button) {
    font-family: var(--i-body-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

.ipsApp a:not(.ipsButton) {
    color: var(--i-link, var(--i-primary));
}

/*
 * IPS wraps everything in .ipsApp, including the injected Your Shop
 * Space header/footer bands -- so the rule above also repaints every
 * link inside them blue, regardless of what the real site.css says a
 * given link's colour should be (nav links, IPS's own "Existing user?
 * Sign In" against its dark header, etc.).
 *
 * The first attempt at fixing this added ID-based :not() exclusions
 * to the rule above -- e.g. :not(#yss-forum-header a) -- which sounds
 * like it should cost nothing since it's a negation, but a :not()'s
 * specificity is that of its most specific argument, ID included, so
 * each exclusion silently added a whole ID's worth of specificity to
 * every match. That made the "fixed" rule the single most specific
 * color rule on the page, which then buried the white-text override
 * for IPS's own header below (it dropped back to blue instead of
 * turning white). !important sidesteps the specificity arithmetic
 * entirely instead of trying to out-specify a rule that both needs to
 * keep matching (for the rest of the forum) and stop mattering (here).
 * :not(.is-current) is the one thing this must never fight: the
 * current-page nav highlight, which has no !important of its own.
 */
:where(#yss-forum-header, #yss-forum-footer) a:not(.is-current) {
    color: inherit !important;
}