/* Weedeliver light UI layer (additive, local 2026-11-09, Brand Lead).
   Loaded once by ScriptManager right after wd-brand.css.
   Locked colours: primary #047857 / hover #065F46, logo green #009830,
   forest #004018, accent #F97316, rust #C2410C (Deals pill only),
   sage canvas #F4F7F5. System font stack only. */

html {
    --wd-ink: #0F2A1C;           /* nav text on white: 15.5:1 */
    --wd-line: #E3EAE6;
    --wd-sage: #F4F7F5;
    --wd-mint: #ECFDF5;
    --wd-rust: #C2410C;          /* white on rust: 5.2:1 (AA) */
    --wd-rust-dark: #9A3412;
}

/* =====================================================================
   1. Light header (white bar, green accents, rust only on Deals)
   front_top_menu.php sets background: var(--nav-bg) inline and every
   nav link/icon reads var(--nav-text, #fff), so re-pointing the two
   variables on the wrapper is enough; !important beats the inline style.
   ===================================================================== */
html:not([data-theme="dark"]) .top-menu-wrapper {
    --nav-text: var(--wd-ink);
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--wd-line) !important;
    box-shadow: 0 1px 0 rgba(0, 64, 24, 0.03), 0 6px 18px rgba(0, 64, 24, 0.05);
}

/* Logo: forest-wordmark variant on white, original white wordmark in dark mode */
html:not([data-theme="dark"]) .top-menu-wrapper img.logo.wd-logo-ondark { display: none !important; }
[data-theme="dark"] .top-menu-wrapper img.logo.wd-logo-onlight { display: none !important; }
@media (min-width: 768px) {
    html:not([data-theme="dark"]) .top-menu-wrapper img.logo.wd-logo-onlight.visible-xs { display: none !important; }
}
@media (max-width: 767px) {
    html:not([data-theme="dark"]) .top-menu-wrapper img.logo.wd-logo-onlight.hidden-xs { display: none !important; }
}

/* Desktop nav links: readable ink, soft-mint hover/active, never green-on-green.
   store-v2.min.css paints #menu li.active a lime (#bdf734) - unreadable on white. */
html:not([data-theme="dark"]) .desktop-menu-list ul li a {
    color: var(--wd-ink) !important;
    padding: 8px 12px;
    border-radius: 9999px;
    opacity: 1 !important;
    transition: background-color .15s ease, color .15s ease;
}
html:not([data-theme="dark"]) .desktop-menu-list ul li a:hover,
html:not([data-theme="dark"]) .desktop-menu-list ul li a:focus-visible {
    background: var(--wd-mint) !important;
    color: #065F46 !important;
}
html:not([data-theme="dark"]) .desktop-menu-list ul li.active > a,
html:not([data-theme="dark"]) #menu li.active > a {
    background: var(--wd-mint) !important;
    color: #047857 !important;
    box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.18);
}
/* Account pills (CMenu itemOptions classes land on the <li>) */
html:not([data-theme="dark"]) .desktop-menu-list ul li.green-button a {
    background: #047857 !important;
    color: #FFFFFF !important;
}
html:not([data-theme="dark"]) .desktop-menu-list ul li.green-button a:hover,
html:not([data-theme="dark"]) .desktop-menu-list ul li.green-button a:focus-visible {
    background: #065F46 !important;
    color: #FFFFFF !important;
}
html:not([data-theme="dark"]) .desktop-menu-list ul li.wallet-menu a,
html:not([data-theme="dark"]) .desktop-menu-list ul li.logout-menu a {
    border-color: #CBD5D0 !important;
    color: var(--wd-ink) !important;
    background: #FFFFFF !important;
}
html:not([data-theme="dark"]) .desktop-menu-list ul li.wallet-menu a:hover,
html:not([data-theme="dark"]) .desktop-menu-list ul li.logout-menu a:hover {
    background: var(--wd-sage) !important;
}
/* Deals: the one rust element in the header (also when it is the active page) */
.desktop-menu-list ul li a[href$="/deals"],
.desktop-menu-list ul li a[href*="/deals?"],
html:not([data-theme="dark"]) .desktop-menu-list ul li > a[href$="/deals"],
html:not([data-theme="dark"]) .desktop-menu-list ul li.active > a[href$="/deals"] {
    background: var(--wd-rust) !important;
    color: #FFFFFF !important;
    padding: 8px 14px;
    border-radius: 9999px;
    box-shadow: none !important;
}
html:not([data-theme="dark"]) .desktop-menu-list ul li > a[href$="/deals"]:hover,
html:not([data-theme="dark"]) .desktop-menu-list ul li > a[href$="/deals"]:focus-visible,
html:not([data-theme="dark"]) .desktop-menu-list ul li.active > a[href$="/deals"],
html:not([data-theme="dark"]) #menu li.active > a[href$="/deals"],
html:not([data-theme="dark"]) #menu li > a[href$="/deals"]:hover,
.desktop-menu-list ul li a[href$="/deals"]:hover {
    background: var(--wd-rust-dark) !important;
    color: #FFFFFF !important;
}

/* Theme toggle + icons on the light bar */
html:not([data-theme="dark"]) .top-menu-wrapper #theme-toggle-desktop {
    border-color: #CBD5D0 !important;
    color: var(--wd-ink) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}
html:not([data-theme="dark"]) .top-menu-wrapper #theme-toggle-desktop:hover {
    border-color: #047857 !important;
    color: #047857 !important;
}
html:not([data-theme="dark"]) .top-menu-wrapper #theme-toggle-mobile {
    background: var(--wd-sage) !important;
    border: 1px solid var(--wd-line) !important;
    border-radius: 9999px !important;
    color: var(--wd-ink) !important;
    box-shadow: none !important;
}
html:not([data-theme="dark"]) .top-menu-wrapper .cart-mobile-handle a,
html:not([data-theme="dark"]) .top-menu-wrapper .cart-desktop-handle a,
html:not([data-theme="dark"]) .top-menu-wrapper .menu-nav-mobile a {
    color: var(--wd-ink) !important;
}
html:not([data-theme="dark"]) .top-menu-wrapper .cart-mobile-handle a:hover,
html:not([data-theme="dark"]) .top-menu-wrapper .cart-desktop-handle a:hover,
html:not([data-theme="dark"]) .top-menu-wrapper .menu-nav-mobile a:hover {
    color: #047857 !important;
}

/* Mobile drop-down menu: same mint active state, rust Deals */
#mobile-menu li.active > a { color: #047857 !important; font-weight: 700; }
#mobile-menu li a[href$="/deals"] { color: var(--wd-rust) !important; font-weight: 700; }
[data-theme="dark"] #mobile-menu li a[href$="/deals"] { color: #FDBA74 !important; }
#mobile-menu li.green-button a {
    background: var(--wd-mint) !important;
    color: #047857 !important;
}

/* Legacy notification bar (Noty) is only ever a toast now; make sure an
   empty one can never paint a block over the header. */
.noty_bar .noty_message:has(.noty_text:empty) { display: none; }

/* =====================================================================
   2. First-visit overlay order (see protected/views/front/wd-first-visit.php)
   ===================================================================== */
html.wd-age-pending .cookie-wrap { display: none !important; }
html.wd-age-pending #pwa-install-banner,
html.wd-first-visit #pwa-install-banner,
body.wd-cookie-open #pwa-install-banner { display: none !important; }
html.wd-age-pending body.wd-cookie-open #wd-floating-cart-btn { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* PWA card on brand tokens (its own fallback was retired mint #10B981) */
#pwa-install-banner .pwa-install-btn { background: #047857 !important; }
#pwa-install-banner .pwa-install-btn:hover { background: #065F46 !important; }

/* =====================================================================
   3. Cart page header (mobile_tpl): wd-brand's global h1 colour made the
      "Cart" title dark-on-dark-green.
   ===================================================================== */
#mobile-header h1 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }

/* =====================================================================
   4. Sign in / sign up (store/signup.php, .auth-v3). Visual only.
   ===================================================================== */
body:has(.auth-v3) #parallax-wrap,
body:has(.auth-v3) .mobile-banner-wrap {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--wd-sage) 100%) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 36px 16px 8px !important;
}
body:has(.auth-v3) .parallax-mirror,
body:has(.auth-v3) .mobile-banner-wrap img,
body:has(.auth-v3) .mobile-banner-wrap .layer { display: none !important; }
body:has(.auth-v3) #parallax-wrap .search-wraps { padding: 0 !important; margin: 0 auto !important; }
body:has(.auth-v3) #parallax-wrap .search-wraps h1 {
    color: var(--wd-ink) !important;
    -webkit-text-fill-color: var(--wd-ink) !important;
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    text-shadow: none !important;
    margin: 0 0 4px !important;
}
body:has(.auth-v3) #parallax-wrap .search-wraps p {
    color: #475569 !important;
    text-shadow: none !important;
    margin: 0 !important;
}
.auth-v3 { background: var(--wd-sage); padding-top: 24px !important; }
.auth-v3 .auth-shell {
    border-radius: 20px;
    border: 1px solid var(--wd-line);
    box-shadow: 0 18px 48px rgba(0, 64, 24, 0.10);
    overflow: hidden;
    background: #FFFFFF;
}
.auth-v3 .auth-visual {
    background: linear-gradient(150deg, #047857 0%, #065F46 55%, #004018 100%) !important;
}
.auth-v3 .auth-visual h1,
.auth-v3 .auth-visual h2,
.auth-v3 .auth-visual p,
.auth-v3 .auth-visual li {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.auth-v3 .auth-visual p,
.auth-v3 .auth-visual li { color: rgba(255, 255, 255, 0.9) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important; }
.auth-v3 .auth-visual li i { color: #A7F3D0 !important; }
.auth-v3 .auth-toggle {
    background: var(--wd-sage) !important;
    border: 1px solid var(--wd-line);
    border-radius: 9999px !important;
    padding: 4px !important;
}
.auth-v3 .auth-toggle-btn {
    border-radius: 9999px !important;
    color: #475569 !important;
    font-weight: 700 !important;
}
.auth-v3 .auth-toggle-btn.active {
    background: #FFFFFF !important;
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}
.auth-v3 .grey-fields,
.auth-v3 input[type="text"],
.auth-v3 input[type="email"],
.auth-v3 input[type="password"],
.auth-v3 input[type="tel"] {
    background: #FFFFFF !important;
    border: 1px solid #CBD5D0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #0F172A !important;
}
.auth-v3 .grey-fields:focus,
.auth-v3 input:focus {
    border-color: #047857 !important;
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18) !important;
}
.auth-v3 .green-button,
.auth-v3 .orange-button:not(.google-button):not(.fb-button) {
    background: #047857 !important;
    border-radius: 9999px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    width: 100%;
}
.auth-v3 .green-button:hover,
.auth-v3 .orange-button:not(.google-button):not(.fb-button):hover { background: #065F46 !important; }
/* doubled class: signup.php's inline `.auth-v3 .orange-button` rule comes later in the page */
.auth-v3 .google-button.google-button,
.auth-v3 .fb-button.fb-button {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5D0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    width: 100%;
}
.auth-v3 .google-button.google-button:hover,
.auth-v3 .fb-button.fb-button:hover { background: var(--wd-sage) !important; border-color: #94A3B8 !important; }
.auth-v3 .google-button i { color: #047857 !important; }
.auth-v3 .forgot-pass-link2,
.auth-v3 a.back-link,
.auth-v3 .orange-text { color: #047857 !important; font-weight: 600; }
[data-theme="dark"] .auth-v3 { background: transparent; }
[data-theme="dark"] .auth-v3 .auth-shell { background: var(--surface-color, #1E293B); border-color: var(--border-light, #334155); }
[data-theme="dark"] .auth-v3 .auth-toggle { background: rgba(255,255,255,.06) !important; border-color: var(--border-light, #334155); }
[data-theme="dark"] .auth-v3 .auth-toggle-btn.active { background: var(--surface-color, #1E293B) !important; color: #6EE7B7 !important; }
[data-theme="dark"] .auth-v3 .grey-fields,
[data-theme="dark"] .auth-v3 input { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; }
[data-theme="dark"] .auth-v3 .google-button.google-button,
[data-theme="dark"] .auth-v3 .fb-button.fb-button { background: transparent !important; color: #F1F5F9 !important; border-color: #334155 !important; }
[data-theme="dark"] body:has(.auth-v3) #parallax-wrap { background: transparent !important; }
[data-theme="dark"] body:has(.auth-v3) #parallax-wrap .search-wraps h1 { color: #F1F5F9 !important; -webkit-text-fill-color: #F1F5F9 !important; }

/* =====================================================================
   5. Deals cards (store/deals.php) - image is now a lazy <img>
   ===================================================================== */
.deals-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10 / 7;
    height: auto !important;
    background-color: var(--wd-sage) !important;
}
.deals-card-image > img.deals-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .25s ease;
}
.deals-product-card:hover .deals-card-image > img.deals-card-img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .deals-product-card:hover .deals-card-image > img.deals-card-img { transform: none; }
}
.deals-product-card {
    border-radius: 16px !important;
    border: 1px solid var(--wd-line) !important;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
}
.deals-product-card:hover {
    border-color: rgba(4, 120, 87, 0.35) !important;
    box-shadow: 0 10px 24px rgba(0, 64, 24, 0.10) !important;
}
.deals-card-content h3 {
    color: var(--wd-ink) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.deals-price { color: #047857 !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.deals-merchant-header {
    background: #FFFFFF;
    border: 1px solid var(--wd-line);
    border-radius: 14px;
    padding: 10px 14px !important;
}
.deals-merchant-logo { border-radius: 10px !important; background: #FFFFFF; border: 1px solid var(--wd-line); object-fit: contain !important; }
[data-theme="dark"] .deals-product-card,
[data-theme="dark"] .deals-merchant-header { background: var(--surface-color, #1E293B); border-color: var(--border-light, #334155) !important; }
[data-theme="dark"] .deals-card-content h3 { color: #F1F5F9 !important; }
[data-theme="dark"] .deals-price { color: #6EE7B7 !important; }

/* =====================================================================
   6. Blog cards (store/blog.php) - featured image is now a lazy <img>
   ===================================================================== */
.blog-card-media.has-img { background: var(--wd-sage); }
.blog-card-media.has-img::before { display: none; }
.blog-card-media > img.blog-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-card {
    border-radius: 16px !important;
    border: 1px solid var(--wd-line) !important;
    overflow: hidden;
    background: #FFFFFF;
}
.blog-card:hover { border-color: rgba(4, 120, 87, 0.35) !important; box-shadow: 0 10px 24px rgba(0, 64, 24, 0.10) !important; }
.blog-card h3 { color: var(--wd-ink) !important; }
.blog-card .blog-card-cat { color: #047857 !important; }
.blog-card .read-more { color: #047857 !important; font-weight: 700; }
[data-theme="dark"] .blog-card { background: var(--surface-color, #1E293B); border-color: var(--border-light, #334155) !important; }
[data-theme="dark"] .blog-card h3 { color: #F1F5F9 !important; }
[data-theme="dark"] .blog-card .blog-card-cat,
[data-theme="dark"] .blog-card .read-more { color: #6EE7B7 !important; }