/**
 * Discover sidebar pages — light-mode chrome shells (page hero + filter toolbars).
 *
 * Loaded after page-specific CSS (see layout/head.php) so these rules win the
 * cascade. Other Discover pages (Trends, Magic AI, Ads) already set the same tint
 * in page-local <style> blocks; Explore Shops relied on var(--es2-surface-alt)
 * without a fallback, which often computed to white against the white canvas.
 *
 * Dark mode is intentionally untouched.
 */
:root {
    --wh-discover-chrome-bg: #f8fafc;
    --wh-discover-chrome-border: #e7edf5;
    --wh-discover-chrome-radius: 12px;
    --wh-discover-chrome-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Page heroes */
html:not([data-theme="dark"]) .explore-shops-page-wrapper .new-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .explore-shops-page-wrapper .landers-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .explore-shops-page-wrapper .advertisers-page .explore-shops-topbar,
html:not([data-theme="dark"]) .trends-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .magicai-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .brands-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .saved-ads-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .ads-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .store-tracker-page-wrapper .new-page-wrapper .explore-shops-topbar,
html:not([data-theme="dark"]) .tiktok-shop-page-wrapper .tiktokshop-page-header {
    background-color: var(--wh-discover-chrome-bg) !important;
}

/* Filter / toolbar shells */
html:not([data-theme="dark"]) .explore-shops-page-wrapper .explore-filters-scope.filters-bar,
html:not([data-theme="dark"]) .explore-shops-page-wrapper .active-filters-bar,
html:not([data-theme="dark"]) .trends-page-wrapper .trends-filters-bar,
html:not([data-theme="dark"]) .magicai-page-wrapper .magic-ai-toolbar-card,
html:not([data-theme="dark"]) .ads-page-wrapper .dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar,
html:not([data-theme="dark"]) .ads-page-wrapper .wh-filters-chrome.dashboard-filters-explore.filters-bar,
html:not([data-theme="dark"]) .store-tracker-page-wrapper .search-bar-2 {
    background-color: var(--wh-discover-chrome-bg) !important;
    border: 1px solid var(--wh-discover-chrome-border);
    border-radius: var(--wh-discover-chrome-radius);
    box-shadow: var(--wh-discover-chrome-shadow);
}