/* Sticky offsets follow the real header height (set by san-luis-nav.js) */
.page-sub-nav {
    top: var(--header-h, 88px) !important
}

html {
    scroll-padding-top: calc(var(--header-h, 88px) + 60px)
}

/* On load: light header with dark links (same as home page) */
.product-detail-body .detail-header-bar:not(.scrolled) {
    background: #fff !important;
    box-shadow: 0 2px 24px rgba(35, 31, 32, .08)
}

.product-list-page-body .header:not(.scrolled) .nav a:not(.btn-primary),
.product-list-page-body .header:not(.scrolled) .reducer-trigger,
.product-detail-body .header:not(.scrolled) .nav a:not(.btn-primary),
.product-detail-body .header:not(.scrolled) .reducer-trigger {
    color: var(--primary)
}

.product-list-page-body .header:not(.scrolled) .nav a:not(.btn-primary):hover,
.product-list-page-body .header:not(.scrolled) .reducer-trigger:hover,
.product-detail-body .header:not(.scrolled) .nav a:not(.btn-primary):hover,
.product-detail-body .header:not(.scrolled) .reducer-trigger:hover {
    color: var(--brand-green)
}

/* On scroll: dark header with green links */
.product-detail-body .detail-header-bar.scrolled {
    background: rgba(35, 31, 32, .97) !important
}

.product-list-page-body .header.scrolled .nav a:not(.btn-primary),
.product-list-page-body .header.scrolled .reducer-trigger,
.product-detail-body .header.scrolled .nav a:not(.btn-primary),
.product-detail-body .header.scrolled .reducer-trigger {
    color: var(--secondary-light)
}

.product-list-page-body .header.scrolled .nav a:not(.btn-primary):hover,
.product-list-page-body .header.scrolled .reducer-trigger:hover,
.product-list-page-body .header.scrolled .reducer-trigger.active,
.product-detail-body .header.scrolled .nav a:not(.btn-primary):hover,
.product-detail-body .header.scrolled .reducer-trigger:hover,
.product-detail-body .header.scrolled .reducer-trigger.active {
    color: #fff
}

.product-list-page-body .header.scrolled .mobile-toggle span,
.product-detail-body .header.scrolled .mobile-toggle span {
    background: #fff
}

@media(max-width:1024px) {

    .product-list-page-body .header.scrolled .nav.open,
    .product-detail-body .header.scrolled .nav.open {
        background: #161a17
    }
}

/* Home page (and any page): scrolled dark header -> green links, no hover needed */
.header.scrolled .nav a:not(.btn-primary),
.header.scrolled .reducer-trigger {
    color: var(--secondary-light)
}

.header.scrolled .nav a:not(.btn-primary):hover,
.header.scrolled .reducer-trigger:hover,
.header.scrolled .reducer-trigger.active {
    color: #fff
}

.header.scrolled .mobile-toggle span {
    background: #fff
}

@media(max-width:1024px) {
    .header.scrolled .nav.open {
        background: #161a17
    }
}

/* Mobile menu panel is white. Products is a button, so the link color
   rules never reached it and it stayed white-on-white until scroll. */
@media (max-width: 768px) {
    .header .nav.open,
    .header.scrolled .nav.open,
    .product-list-page-body .header.scrolled .nav.open,
    .product-detail-body .header.scrolled .nav.open {
        background: #fff;
    }

    .header .nav.open .reducer-trigger,
    .header.scrolled .nav.open .reducer-trigger,
    .header .nav.open a:not(.btn-primary),
    .header.scrolled .nav.open a:not(.btn-primary) {
        color: var(--primary);
    }

    .header .nav.open .reducer-trigger:hover,
    .header .nav.open .reducer-trigger.active,
    .header.scrolled .nav.open .reducer-trigger:hover,
    .header.scrolled .nav.open .reducer-trigger.active,
    .header .nav.open a:not(.btn-primary):hover,
    .header.scrolled .nav.open a:not(.btn-primary):hover {
        color: var(--brand-green);
    }
}