/* ===== CART SMART DARK MODE ===== */ /* Applied when is set via dark-mode.js */ [data-theme="dark"] { --bg: #0E0E1B; /* page background — deep dark navy */ --ink: #EDE8DF; /* primary text / borders */ --ink-soft: #9490A0; /* secondary / muted text */ --paper: #1A1A2B; /* card hover / panel surfaces */ --mustard: #F4B942; /* keep — pops on dark */ --coral: #FF4D3F; /* keep — pops on dark */ --mint: #B8E4C9; /* keep */ } /* ── Today's Top Pick (featured) — uses var(--ink) as bg, which flips light in dark mode. Lock it to an explicit dark surface and restore light text colours. ── */ [data-theme="dark"] .featured { background: #14142A; /* stays dark regardless of --ink value */ color: #EDE8DF; } [data-theme="dark"] .featured-desc { color: rgba(237, 232, 223, 0.75); /* was hardcoded light cream — restore for dark bg */ } [data-theme="dark"] .price-was { color: rgba(237, 232, 223, 0.40); /* same fix for strikethrough was-price */ } /* ── Footer uses ink/bg inverted — keep it darkest in dark mode ── */ [data-theme="dark"] footer { background: #06060F; color: #EDE8DF; } [data-theme="dark"] .footer-top { border-bottom-color: rgba(237,232,223,0.12); } /* ── Holiday / alert banners (hardcoded light colours) ── */ [data-theme="dark"] .holiday-banner { background: rgba(244,185,66,0.10); border-color: rgba(244,185,66,0.35); color: #F4C96A; } [data-theme="dark"] .holiday-banner.blue-banner { background: rgba(0,115,207,0.12); border-color: rgba(0,115,207,0.40); color: #6DB3F2; } [data-theme="dark"] .holiday-banner.red-banner { background: rgba(255,77,63,0.10); border-color: rgba(255,77,63,0.40); color: #FF8F87; } /* ── Affiliate drawer result box ── */ [data-theme="dark"] .aff-result { background: var(--paper); } [data-theme="dark"] .aff-result-link { background: var(--bg); border-color: rgba(237,232,223,0.15); } /* ── Category drawer card-img tinted backgrounds ── */ [data-theme="dark"] .cat-electronics .card-img { background: #14202E; } [data-theme="dark"] .cat-smarthome .card-img { background: #14251E; } [data-theme="dark"] .cat-tech .card-img { background: #1C1430; } [data-theme="dark"] .cat-kitchen .card-img { background: #281C14; } [data-theme="dark"] .cat-home .card-img { background: #241C14; } [data-theme="dark"] .cat-beauty .card-img { background: #281420; } [data-theme="dark"] .cat-gaming .card-img { background: #141824; } [data-theme="dark"] .cat-fashion .card-img { background: #241A14; } [data-theme="dark"] .cat-outdoor .card-img { background: #14221A; } [data-theme="dark"] .cat-sports .card-img { background: #142220; } [data-theme="dark"] .cat-books .card-img { background: #222214; } [data-theme="dark"] .cat-kids .card-img { background: #221414; } [data-theme="dark"] .cat-art .card-img { background: #1C1422; } /* ── Gift guide cards (hardcoded pastel bgs) ── */ [data-theme="dark"] .guides-grid .guide-card:nth-child(3) { background: #1C1430; } [data-theme="dark"] .guides-grid .guide-card:nth-child(4) { background: #221414; } [data-theme="dark"] .guides-grid .guide-card:nth-child(5) { background: #141C2C; } /* ── Drawer backdrop ── */ [data-theme="dark"] .drawer-backdrop, [data-theme="dark"] .aff-backdrop { background: rgba(6,6,15,0.7); } /* ── Image backgrounds inside cards (default card-img bg) ── */ [data-theme="dark"] .card-img { background: #17172A; } /* ── Search overlay input ── */ [data-theme="dark"] .search-input { background: var(--paper); border-color: var(--ink); color: var(--ink); } [data-theme="dark"] .search-input::placeholder { color: var(--ink-soft); } /* ══════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════ */ .theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 999px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); flex-shrink: 0; padding: 0; transition: border-color 0.2s, color 0.2s; line-height: 1; } .theme-toggle:hover { border-color: var(--coral); color: var(--coral); } /* Moon shown in light mode; sun shown in dark mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: flex; align-items: center; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: flex; align-items: center; }