/* Mobile navigation contrast only. Geometry and the light theme remain in
   the existing main.css/header.css. Include the existing system-dark mode. */
@media (max-width: 1279px) {
html[data-theme="dark"] .storefront-header { background: #181922; border-bottom-color: #555866; }
html[data-theme="dark"] .storefront-header .storefront-nav { background: #20212b; border-color: #555866; }
html[data-theme="dark"] .storefront-header .storefront-brand__tagline { color: #d7d9e2; }
html[data-theme="dark"] .storefront-header .storefront-nav a:not(.storefront-nav-cta) { color: #f1f5f9; }
html[data-theme="dark"] .storefront-header .storefront-nav a:not(.storefront-nav-cta):hover { color: #fff; background: #343746; }
html[data-theme="dark"] .storefront-header .storefront-nav a[aria-current="page"] { color: #fff; background: #843d53; }
html[data-theme="dark"] .storefront-header .storefront-nav a[aria-current="page"]:hover { background: #a44964; }
html[data-theme="dark"] .storefront-header .storefront-nav a:not(.storefront-nav-cta):active { color: #fff; background: #474b60; }
html[data-theme="dark"] .storefront-header .storefront-nav a[aria-current="page"]:active { background: #b45370; }
html[data-theme="dark"] .storefront-header .storefront-nav-cta { color: #fff; background: #9c3e5a; }
html[data-theme="dark"] .storefront-header .storefront-nav-cta:hover { background: #b04b67; }
html[data-theme="dark"] .storefront-header .storefront-nav-cta:active { background: #843d53; }
html[data-theme="dark"] .storefront-header .storefront-nav-divider { background: #555866; }
html[data-theme="dark"] .storefront-header :is(.storefront-mobile-toggle, .storefront-header-search-toggle, .theme-toggle, .locale-link) { color: #f1f5f9; border-color: #555866; background: #262833; }
html[data-theme="dark"] .storefront-header .storefront-mobile-toggle span { background: #f1f5f9; }
html[data-theme="dark"] .storefront-header :is(.storefront-mobile-toggle, .storefront-header-search-toggle, .theme-toggle, .locale-link):hover { color: #fff; background: #343746; }
html[data-theme="dark"] .storefront-header :is(.storefront-mobile-toggle, .storefront-header-search-toggle, .theme-toggle, .locale-link):active { color: #fff; background: #474b60; }
html[data-theme="dark"] .storefront-header .storefront-mobile-toggle[aria-expanded="true"] { background: #843d53; border-color: #f0a8bb; }
html[data-theme="dark"] .storefront-header :is(a, button, input):focus-visible { outline: 2px solid #f6c6d2; outline-offset: 2px; }
html[data-theme="dark"] .storefront-header .storefront-header-search input { color: #f1f5f9; background: #262833; border-color: #555866; }
html[data-theme="dark"] .storefront-header .storefront-header-search input::placeholder,
html[data-theme="dark"] .storefront-header .storefront-header-search label > svg { color: #d7d9e2; }
}
@media (max-width: 1279px) and (prefers-color-scheme: dark) {
html[data-theme="system"] .storefront-header { background: #181922; border-bottom-color: #555866; }
html[data-theme="system"] .storefront-header .storefront-nav { background: #20212b; border-color: #555866; }
html[data-theme="system"] .storefront-header .storefront-brand__tagline { color: #d7d9e2; }
html[data-theme="system"] .storefront-header .storefront-nav a:not(.storefront-nav-cta) { color: #f1f5f9; }
html[data-theme="system"] .storefront-header .storefront-nav a:not(.storefront-nav-cta):hover { color: #fff; background: #343746; }
html[data-theme="system"] .storefront-header .storefront-nav a[aria-current="page"] { color: #fff; background: #843d53; }
html[data-theme="system"] .storefront-header .storefront-nav a[aria-current="page"]:hover { background: #a44964; }
html[data-theme="system"] .storefront-header .storefront-nav a:not(.storefront-nav-cta):active { color: #fff; background: #474b60; }
html[data-theme="system"] .storefront-header .storefront-nav a[aria-current="page"]:active { background: #b45370; }
html[data-theme="system"] .storefront-header .storefront-nav-cta { color: #fff; background: #9c3e5a; }
html[data-theme="system"] .storefront-header .storefront-nav-cta:hover { background: #b04b67; }
html[data-theme="system"] .storefront-header .storefront-nav-cta:active { background: #843d53; }
html[data-theme="system"] .storefront-header .storefront-nav-divider { background: #555866; }
html[data-theme="system"] .storefront-header :is(.storefront-mobile-toggle, .storefront-header-search-toggle, .theme-toggle, .locale-link) { color: #f1f5f9; border-color: #555866; background: #262833; }
html[data-theme="system"] .storefront-header .storefront-mobile-toggle span { background: #f1f5f9; }
html[data-theme="system"] .storefront-header :is(.storefront-mobile-toggle, .storefront-header-search-toggle, .theme-toggle, .locale-link):hover { color: #fff; background: #343746; }
html[data-theme="system"] .storefront-header :is(.storefront-mobile-toggle, .storefront-header-search-toggle, .theme-toggle, .locale-link):active { color: #fff; background: #474b60; }
html[data-theme="system"] .storefront-header .storefront-mobile-toggle[aria-expanded="true"] { background: #843d53; border-color: #f0a8bb; }
html[data-theme="system"] .storefront-header :is(a, button, input):focus-visible { outline: 2px solid #f6c6d2; outline-offset: 2px; }
html[data-theme="system"] .storefront-header .storefront-header-search input { color: #f1f5f9; background: #262833; border-color: #555866; }
html[data-theme="system"] .storefront-header .storefront-header-search input::placeholder,
html[data-theme="system"] .storefront-header .storefront-header-search label > svg { color: #d7d9e2; }
}

/* A compact, non-modal reminder in the existing content shell. */
.membership-expiry-reminder-wrap { padding-block: 16px 0; }
.membership-expiry-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--sf-border-strong, var(--sf-border));
    border-radius: 12px;
    background: var(--sf-surface);
    color: var(--sf-text-primary);
}
.membership-expiry-reminder p { margin: 0; min-width: 0; font-size: .875rem; line-height: 1.6; }
.membership-expiry-reminder--urgent { border-color: #b7791f; background: var(--sf-warning-bg); }
.membership-expiry-reminder--urgent p { font-weight: 600; }
.membership-expiry-reminder__renew {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: inherit;
    background: var(--sf-surface);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.membership-expiry-reminder__renew:hover { background: var(--sf-surface-soft); }
.membership-expiry-reminder__renew:active { background: var(--sf-surface-elevated); }
.membership-expiry-reminder__renew:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 640px) {
    .membership-expiry-reminder { flex-wrap: wrap; }
}
