/*
 * buyer-dark.css — Final buyer-side theme override layer.
 *
 * Purely additive: no existing CSS is modified or removed. Dark rules are
 * scoped under `body.dark-mode` (and `html[data-theme="dark"]`); the final
 * section provides an explicit, restrained light-mode finish.
 *
 * Loaded LAST on every buyer page so it wins equal-specificity cascade ties.
 *
 * Layer A: unify the two competing CSS variable systems (buyer-shell.css and
 *          foundation.css use different names) by giving the full union of
 *          background/surface/text/border custom properties dark values.
 * Layer B: override components that hardcode literal light colors instead of
 *          using variables.
 *
 * Palette (matches existing dark values in buyer-shell.css):
 *   page       #050507
 *   surface    #0a0a0c
 *   elevated   #131318
 *   card       rgba(22, 22, 26, 0.85)
 *   ink        #f8fafc
 *   ink-muted  #94a3b8
 *   border     rgba(255, 255, 255, 0.08)
 */

/* ============================================================
 * LAYER A — variable unification
 * ============================================================ */
body.dark-mode,
html[data-theme="dark"] body {
  /* foundation.css set */
  --bg: #050507;
  --bg-base: #050507;
  --bg-light: #0a0a0c;
  --bg-main: #050507;
  --bg-dark: #050507;
  --bg-panel: #131318;
  --bg-surface: #0a0a0c;
  --bg-gradient-start: #0a0a0c;
  --bg-gradient-end: #050507;
  --surface: #131318;
  --surface-bg: #0a0a0c;
  --surface-ink: #f8fafc;
  --surface-ink-deep: #ffffff;
  --elev: #16161b;
  --panel-bg: #131318;

  /* card / shell set */
  --background-color: #050507;
  --card-background: rgba(22, 22, 26, 0.85);
  --card-bg: rgba(22, 22, 26, 0.85);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);

  /* text set */
  --text: #f8fafc;
  --text-color: #f8fafc;
  --text-main: #f8fafc;
  --text-dark: #f8fafc;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-gray: #94a3b8;
  --subtle-text: #94a3b8;
  --muted: #94a3b8;
  --review-text: #e2e8f0;
  --review-sub: #94a3b8;
  --surface-glass: rgba(22, 22, 26, 0.85);
  --ink: #f8fafc;
  --ink-light: #cbd5e1;
  --ink-weak: #94a3b8;

  /* border set */
  --border: rgba(255, 255, 255, 0.10);
  --border-color: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);

  /* glass / v6 set */
  --glass-bg: rgba(22, 22, 26, 0.72);
  --glass-border: rgba(255, 255, 255, 0.10);
  --surface-glass-heavy: rgba(15, 15, 20, 0.9);
  --v6-bg: #050507;
  --v6-card: rgba(22, 22, 26, 0.85);
  --v6-ink: #f8fafc;
  --v6-ink-light: #cbd5e1;
  --v6-ink-muted: #94a3b8;
  --v6-border: rgba(255, 255, 255, 0.10);
  --v6-border-soft: rgba(255, 255, 255, 0.06);
}

/* Base page + text safety net so no variable-less body stays white. */
body.dark-mode {
  background-color: #050507;
  color: #f8fafc;
}

/* ============================================================
 * LAYER B — hardcoded-light selector overrides
 * (populated from the selector catalog)
 * ============================================================ */

/* ---------- account.css ---------- */
body.dark-mode.account-page,
body.dark-mode .account-page {
  background: linear-gradient(to top, #050507, #0a0a0c);
}
body.dark-mode .order-status.processing {
  background-color: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}
body.dark-mode .order-status.completed {
  background-color: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

/* ---------- modal.css / foundation.css ---------- */
body.dark-mode .modal-content {
  background: #131318;
  color: #f8fafc;
}
body.dark-mode .modal-message {
  color: #94a3b8;
}

/* ---------- modern-order.css ---------- */
body.dark-mode .poc-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- products-page.css ---------- */
body.dark-mode .filter-placeholder-line {
  background: linear-gradient(90deg, rgba(30, 30, 38, 0.9), rgba(48, 48, 60, 0.9), rgba(30, 30, 38, 0.9));
}
body.dark-mode .review-status-pill {
  background: linear-gradient(180deg, rgba(30, 30, 38, 0.9), rgba(22, 22, 28, 0.9));
  color: #cbd5e1;
}
body.dark-mode .card-buttons {
  background: linear-gradient(to top, #131318 70%, rgba(19, 19, 24, 0));
}

/* ---------- cart.css ---------- */
body.dark-mode .quantity-wrapper {
  background: rgba(255, 255, 255, 0.06);
}
body.dark-mode .qty-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
body.dark-mode .quantity-input-clean {
  color: #f8fafc;
}

/* ---------- cart-premium.css ---------- */
body.dark-mode .qty-btn-shake {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
body.dark-mode .cart-load-wait {
  color: #94a3b8;
}

/* ---------- checkout-premium.css ---------- */
body.dark-mode.checkout-page,
body.dark-mode .checkout-page {
  color: #f8fafc;
  --surface-glass: rgba(22, 22, 26, 0.85);
}
body.dark-mode .payment-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
/* Order Summary text — base checkout-premium.css hardcodes near-black colors
 * (#0f172a / #2d3748) via `body.checkout-page .summary-*`. Both classes live on
 * <body>, so the override must be COMPOUND (body.dark-mode.checkout-page), not a
 * descendant, and needs equal-or-higher specificity to win. */
body.dark-mode .card-header .title,
body.dark-mode.checkout-page .summary-title,
body.dark-mode.checkout-page .summary-total,
body.dark-mode.checkout-page .summary-total-main,
body.dark-mode.checkout-page .summary-total-final {
  color: #f8fafc !important;
}
body.dark-mode.checkout-page .summary-item-name {
  color: #e2e8f0 !important;
}
body.dark-mode.checkout-page .summary-item {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode.checkout-page .summary-total {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode.checkout-page .summary-total .total-amount,
body.dark-mode.checkout-page .summary-total-final {
  color: #ff8a3c !important;
}
body.dark-mode.checkout-page .summary-total-original {
  color: #94a3b8 !important;
}
body.dark-mode.checkout-page .summary-discount-row,
body.dark-mode.checkout-page .summary-discount-value {
  color: #6ee7b7 !important;
}
body.dark-mode .checkout-card .form-floating input:not(:focus):not(:placeholder-shown) ~ label,
body.dark-mode .checkout-back-to-cart {
  color: #94a3b8;
}

/* ---------- coupons.css ---------- */
body.dark-mode .coupon-card-premium.used:hover,
body.dark-mode .coupon-card-premium.expired:hover {
  background: rgba(22, 22, 26, 0.9);
}
body.dark-mode .coupon-status-pill.locked {
  background: rgba(239, 68, 68, 0.14);
}

/* ---------- new-coupon.css (no native dark support) ---------- */
body.dark-mode .coupon-content-new {
  background-color: #131318;
}
body.dark-mode .coupon-title-new {
  color: #f8fafc;
}
body.dark-mode .coupon-subtitle-new {
  color: #cbd5e1;
}
body.dark-mode .coupon-close-new,
body.dark-mode .coupon-terms-new,
body.dark-mode .coupon-decline-link-new {
  color: #94a3b8;
}

/* ---------- redeem.css ---------- */
body.dark-mode .v6-card-body {
  background: #131318;
}
body.dark-mode .v6-success-icon-wrap {
  background: rgba(16, 185, 129, 0.16);
}

/* ---------- reviews-theme.css (no native dark support) ---------- */
body.dark-mode .review-summary-card,
body.dark-mode .review-card-premium {
  background: rgba(22, 22, 26, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .bar-label {
  background: rgba(255, 255, 255, 0.06);
}
body.dark-mode .progress-track {
  background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .no-reviews-placeholder {
  background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .review-tag-chip {
  background: rgba(230, 81, 0, 0.18);
}
body.dark-mode .overall-rating-big,
body.dark-mode .reviewer-details h4,
body.dark-mode .review-body,
body.dark-mode .review-original-heading {
  color: #f8fafc;
}
body.dark-mode .total-count,
body.dark-mode .rating-bar-row,
body.dark-mode .review-date,
body.dark-mode .review-body.empty {
  color: #94a3b8;
}

/* ---------- home-critical.css / home.css / home-secondary.css ---------- */
body.dark-mode .home-trust-bar.key-features-section {
  background: rgba(19, 19, 24, 0.9);
}
body.dark-mode .category-card {
  background: linear-gradient(135deg, rgba(22, 22, 26, 0.9), rgba(19, 19, 24, 0.85));
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .category-icon {
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.18), rgba(255, 90, 40, 0.12));
}
body.dark-mode .card-image-container {
  background-color: #0a0a0c;
}
body.dark-mode .tag-delivery {
  background-color: rgba(255, 122, 60, 0.16);
}
body.dark-mode .home-page-btn {
  background: #131318;
  color: #f8fafc;
}
body.dark-mode .product-card-skeleton,
body.dark-mode .skeleton-flash-card {
  background: #131318;
}
body.dark-mode .swiper-button-next,
body.dark-mode .swiper-button-prev {
  background-color: rgba(22, 22, 26, 0.9);
}

/* Skeleton shimmer surfaces (home + products + generic) */
body.dark-mode .skeleton-card {
  background-color: #131318;
}
body.dark-mode .skeleton-image,
body.dark-mode .skeleton-line,
body.dark-mode .skeleton-button,
body.dark-mode .skeleton-image-container,
body.dark-mode .skeleton-flash-card .skeleton-image,
body.dark-mode .skeleton-flash-card .skeleton-line,
body.dark-mode .skeleton-flash-card .skeleton-progress,
body.dark-mode .skeleton-flash-card .skeleton-button {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ---------- styles.css literal-light gaps ---------- */
body.dark-mode #hero-slider {
  background-color: #0a0a0c;
}
body.dark-mode .search-bar-modern {
  background: #131318;
}
body.dark-mode .search-bar-modern input[type="text"] {
  color: #f8fafc;
}
body.dark-mode .category-dropdown,
body.dark-mode .search-suggestions,
body.dark-mode .account-menu,
body.dark-mode .auth-dropdown-menu,
body.dark-mode .ali-modal-content,
body.dark-mode .comparison-popup-container {
  background: #131318;
  color: #f8fafc;
}
body.dark-mode .ali-modal-close {
  background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .auth-modal-content {
  background: rgba(19, 19, 24, 0.96);
}
body.dark-mode .auth-dropdown-menu a,
body.dark-mode .suggestion-item,
body.dark-mode .search-suggestions,
body.dark-mode .social-btn.google {
  color: #f8fafc;
}
body.dark-mode #review-form {
  background: #131318;
}
body.dark-mode .wishlist-btn {
  background-color: rgba(22, 22, 26, 0.9);
}
body.dark-mode .comparison-table .current-product-col {
  background-color: rgba(255, 122, 60, 0.12);
}
body.dark-mode .digital-notice {
  background: linear-gradient(90deg, rgba(255, 200, 60, 0.14), rgba(255, 150, 40, 0.14)) !important;
  color: #fcd9a0 !important;
}
body.dark-mode .item-image {
  background-color: #0a0a0c;
}
body.dark-mode .social-btn.google {
  background-color: #131318;
}
body.dark-mode .social-btn.google:hover {
  background-color: #16161b;
}
body.dark-mode .flash-sale-progress-track,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-next,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-prev {
  background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .coupon-badge,
body.dark-mode .coupon-signup {
  background: #131318;
}
body.dark-mode .review-text,
body.dark-mode .flash-progress-info,
body.dark-mode .post-snippet,
body.dark-mode .feature-label {
  color: #cbd5e1;
}
body.dark-mode .mini-cart-drawer {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.62);
}
body.dark-mode .mini-cart-header,
body.dark-mode .mini-cart-footer {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(148, 163, 184, 0.18);
  color: #f8fafc;
}
body.dark-mode .mini-cart-item {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.18);
}
body.dark-mode .mini-cart-item-img {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(148, 163, 184, 0.18);
}
body.dark-mode .mini-cart-item-title,
body.dark-mode .mini-cart-total {
  color: #f8fafc;
}
body.dark-mode .mini-cart-item-qty {
  color: #cbd5e1;
}

/* ---------- profile.css uncovered selectors ---------- */
body.dark-mode .form-field input,
body.dark-mode .form-field select,
body.dark-mode .form-group input,
body.dark-mode .form-group select {
  background: #131318;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .form-field input:focus,
body.dark-mode .form-field select:focus,
body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus {
  background: #16161b;
}
body.dark-mode .stat-card,
body.dark-mode .referral-link-box,
body.dark-mode .qr-placeholder,
body.dark-mode .guest-panel-gate,
body.dark-mode .vault-product-image {
  background: rgba(22, 22, 26, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
body.dark-mode .btn-copy,
body.dark-mode .guest-mobile-hub-btn--secondary,
body.dark-mode .guest-panel-gate-actions .btn-secondary,
body.dark-mode .settings-logout-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .wishlist-grid .btn-remove-wishlist {
  background: rgba(22, 22, 26, 0.9);
  color: #f8fafc;
}

/* Review pagination buttons (product-details) inline light styles — needs
 * !important because the JS sets border/background/color as element styles. */
body.dark-mode .review-page-btn,
html[data-theme="dark"] .review-page-btn {
  background: #131318 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}
body.dark-mode .review-page-btn.active,
html[data-theme="dark"] .review-page-btn.active {
  background: #ff6b35 !important;
  border-color: #ff6b35 !important;
  color: #fff !important;
}
body.dark-mode .review-page-btn[disabled],
html[data-theme="dark"] .review-page-btn[disabled] {
  opacity: 0.55;
}

/* ---------- home page: flash-sale + nav buttons (night-mode fixes) ----------
 * home.css ships `.dark-mode .flash-sale-btn{background:#fff;color:#000}` which
 * paints the flash "Grab / Add to Cart" button as a solid white block in dark
 * mode. Restore the branded gradient so the button reads as a button, not a
 * white slab. These use !important to beat the same-specificity home.css rule. */
body.dark-mode .flash-sale-btn,
body.dark-mode .card-btn.flash-sale-btn,
body.dark-mode .flash-buy-btn,
body.dark-mode .flash-compact-buy-btn {
  background: linear-gradient(135deg, #ff6b00, #ff9100) !important;
  color: #fff !important;
  border: none !important;
}
body.dark-mode .flash-sale-btn:hover,
body.dark-mode .card-btn.flash-sale-btn:hover,
body.dark-mode .flash-buy-btn:hover,
body.dark-mode .flash-compact-buy-btn:hover {
  background: linear-gradient(135deg, #ff8a00, #ff6b00) !important;
  color: #fff !important;
}
body.dark-mode .flash-sale-btn.added,
body.dark-mode .flash-buy-btn.added,
body.dark-mode .flash-compact-buy-btn.added {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #fff !important;
}

/* "Shop More" pill in the flash-sale header — already a gradient, but ensure
 * the label/icon stay visible and the pill never collapses to a light chip. */
body.dark-mode .flash-sale-shop-more {
  background: linear-gradient(135deg, #ff9500, #ff2d55) !important;
  color: #fff !important;
}
body.dark-mode .flash-sale-shop-more .flash-shop-more-label,
body.dark-mode .flash-sale-shop-more .flash-shop-more-icon {
  color: #fff !important;
}

/* Pagination / "check more" nav buttons under Browse All Products.
 * home.css already sets a dark surface, but pin the border + text so the
 * resting (non-active) buttons are clearly visible and the active page keeps
 * the brand gradient. */
body.dark-mode .home-page-btn {
  background: #16161b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}
body.dark-mode .home-page-btn:hover:not(:disabled) {
  border-color: rgba(255, 107, 0, 0.5) !important;
  color: #fff !important;
}
body.dark-mode .home-page-btn.active {
  background: linear-gradient(135deg, #ff6b00, #ff8a00) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.dark-mode .home-page-btn:disabled {
  opacity: 0.45;
}

/* Flash carousel prev/next arrows ship a white glass background in the base
 * stylesheet; make sure night mode gets a dark surface with a visible arrow. */
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-next,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-prev {
  background: rgba(22, 22, 26, 0.92) !important;
  color: #ff8a3c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-next:hover,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-prev:hover {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Flash-sale card body still white in dark mode on some breakpoints — home.css
 * sets `.dark-mode .flash-sale-card{background:#222}` but the light default
 * (#fff) wins where the dark rule isn't scoped; force the dark card surface. */
body.dark-mode .flash-sale-card,
body.dark-mode .flash-compact-card {
  background: #16161b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Empty-state card (empty cart / wishlist "Blank Canvas") — polished.css paints
 * `.empty-state{background:#ffffff80;border:1px solid rgba(255,255,255,.8)}`
 * with no dark override, so in night mode it renders as a washed-out light-gray
 * slab. Give it a proper dark surface with a subtle branded glow. */
body.dark-mode .empty-state,
body.dark-mode .error-state {
  background: linear-gradient(145deg, rgba(22, 22, 26, 0.92), rgba(12, 12, 15, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 60px -18px rgba(0, 0, 0, 0.7) !important;
  color: #e8edf7 !important;
}
body.dark-mode .empty-state h2,
body.dark-mode .empty-state p,
body.dark-mode .error-state h3,
body.dark-mode .error-state p {
  color: #e8edf7 !important;
  -webkit-text-fill-color: #e8edf7 !important;
}
body.dark-mode .empty-state p,
body.dark-mode .error-state p {
  color: #aab4c5 !important;
  -webkit-text-fill-color: #aab4c5 !important;
}

/* ============================================================
 * LAYER C — final visual-audit fixes
 * These selectors intentionally use !important where late component CSS or
 * element styles otherwise repaint a light surface after this file loads.
 * ============================================================ */

/* Shared mini cart: modal.css can arrive after the deferred theme sheet. */
body.dark-mode .mini-cart-drawer,
html[data-theme="dark"] body .mini-cart-drawer {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.99), rgba(9, 12, 20, 0.99)) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #f8fafc !important;
}
body.dark-mode .mini-cart-header,
body.dark-mode .mini-cart-footer,
html[data-theme="dark"] body .mini-cart-header,
html[data-theme="dark"] body .mini-cart-footer {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #f8fafc !important;
}

/* Product gallery and secondary cart CTA. The gallery treatment is deliberately
 * restricted to the PDP; catalog cards, cart thumbnails, recommendations, and
 * the cart drawer must retain the artwork supplied by the product. */
body.dark-mode.product-details-page .product-gallery.pdp-gallery-modern .main-image-wrapper,
html[data-theme="dark"] body.product-details-page .product-gallery.pdp-gallery-modern .main-image-wrapper {
  background: radial-gradient(circle at 50% 42%, #1b1b22 0%, #0a0a0c 72%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .tag.info,
html[data-theme="dark"] body .tag.info {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(125, 211, 252, 0.22) !important;
  color: #bae6fd !important;
}
body.dark-mode #add-to-cart-btn,
html[data-theme="dark"] body #add-to-cart-btn {
  background: rgba(255, 107, 53, 0.1) !important;
  border-color: #ff8a3c !important;
  color: #ffad73 !important;
}
body.dark-mode #add-to-cart-btn:hover,
html[data-theme="dark"] body #add-to-cart-btn:hover {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #fff !important;
}

/* Mobile account sub-pages have page-specific light sticky bars. */
body.dark-mode.orders-page.orders-mobile-focus .orders-mobile-panel-bar,
body.dark-mode.account-page.coupons-mobile-focus .coupons-mobile-panel-bar,
html[data-theme="dark"] body.orders-page.orders-mobile-focus .orders-mobile-panel-bar,
html[data-theme="dark"] body.account-page.coupons-mobile-focus .coupons-mobile-panel-bar {
  background: #050507 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* Activation tutorial mock screens should read as screens, not white holes. */
body.dark-mode .anim-win-ui,
body.dark-mode .anim-office-ui,
body.dark-mode .anim-office-body,
html[data-theme="dark"] body .anim-win-ui,
html[data-theme="dark"] body .anim-office-ui,
html[data-theme="dark"] body .anim-office-body {
  background: #171a21 !important;
  border-color: #3a4252 !important;
  color: #e2e8f0 !important;
}
body.dark-mode .anim-office-ui,
html[data-theme="dark"] body .anim-office-ui {
  border-top-color: #262b35 !important;
}
body.dark-mode .anim-win-header,
body.dark-mode .anim-win-title,
body.dark-mode .anim-blocks,
body.dark-mode .anim-office-header,
html[data-theme="dark"] body .anim-win-header,
html[data-theme="dark"] body .anim-win-title,
html[data-theme="dark"] body .anim-blocks,
html[data-theme="dark"] body .anim-office-header {
  color: #e2e8f0 !important;
}
body.dark-mode .replacement-form .submit-btn,
html[data-theme="dark"] body .replacement-form .submit-btn {
  background: linear-gradient(135deg, #ff6b00, #f97316) !important;
  border: 0 !important;
  color: #fff !important;
}

/* Success page: its inline styles contain literal white card sections. */
body.dark-mode .preloader-overlay,
html[data-theme="dark"] body .preloader-overlay {
  background: rgba(5, 5, 7, 0.9) !important;
}
body.dark-mode .preloader-card,
body.dark-mode .premium-order-card,
body.dark-mode .order-meta-bar,
body.dark-mode .order-total-section,
body.dark-mode .action-area,
body.dark-mode .notification-toast,
html[data-theme="dark"] body .preloader-card,
html[data-theme="dark"] body .premium-order-card,
html[data-theme="dark"] body .order-meta-bar,
html[data-theme="dark"] body .order-total-section,
html[data-theme="dark"] body .action-area,
html[data-theme="dark"] body .notification-toast {
  background: rgba(19, 19, 24, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}
body.dark-mode .btn-invoice,
body.dark-mode .btn-secondary-pill,
html[data-theme="dark"] body .btn-invoice,
html[data-theme="dark"] body .btn-secondary-pill {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
}
body.dark-mode .claim-input,
html[data-theme="dark"] body .claim-input {
  background: #0a0a0c !important;
  border-color: rgba(134, 239, 172, 0.35) !important;
  color: #f8fafc !important;
}
body.dark-mode .meta-value,
body.dark-mode .qty-badge,
html[data-theme="dark"] body .meta-value,
html[data-theme="dark"] body .qty-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
body.dark-mode .item-row,
html[data-theme="dark"] body .item-row {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .item-row:hover,
html[data-theme="dark"] body .item-row:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}
body.dark-mode .success-title,
body.dark-mode .meta-value,
body.dark-mode .item-title,
body.dark-mode .item-price,
body.dark-mode .total-price,
body.dark-mode .toast-content h4,
html[data-theme="dark"] body .success-title,
html[data-theme="dark"] body .meta-value,
html[data-theme="dark"] body .item-title,
html[data-theme="dark"] body .item-price,
html[data-theme="dark"] body .total-price,
html[data-theme="dark"] body .toast-content h4 {
  color: #f8fafc !important;
}
body.dark-mode .toast-content p,
html[data-theme="dark"] body .toast-content p {
  color: #aab4c5 !important;
}
body.dark-mode .loader,
html[data-theme="dark"] body .loader {
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-top-color: #ff8a3c !important;
}

/* ============================================================
 * LAYER D — explicit light-mode finish
 * Keep light mode crisp and neutral without flattening each page's identity.
 * ============================================================ */
html[data-theme="light"] body {
  color-scheme: light;
  --background-color: #f7f8fc;
  --bg: #f7f8fc;
  --bg-main: #f7f8fc;
  --bg-surface: #ffffff;
  --surface: #ffffff;
  --card-background: rgba(255, 255, 255, 0.96);
  --card-bg: rgba(255, 255, 255, 0.96);
  --text: #172033;
  --text-color: #172033;
  --text-main: #172033;
  --text-primary: #172033;
  --text-secondary: #526076;
  --text-muted: #68758a;
  --border: rgba(15, 23, 42, 0.11);
  --border-color: rgba(15, 23, 42, 0.11);
  --border-light: rgba(15, 23, 42, 0.08);
  background-color: #f7f8fc;
  color: #172033;
}
html[data-theme="light"] body .mini-cart-drawer,
html[data-theme="light"] body .mini-cart-header,
html[data-theme="light"] body .mini-cart-footer {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.1);
  color: #172033;
}
html[data-theme="light"] body .account-mobile-panel-bar,
html[data-theme="light"] body .account-mobile-hub-bar {
  background: #f7f8fc;
}
html[data-theme="light"] body.product-details-page .product-gallery.pdp-gallery-modern .main-image-wrapper {
  background: radial-gradient(circle at 50% 42%, #fff 0%, #f5f7fb 76%);
  border-color: rgba(15, 23, 42, 0.08);
}

/* Both cart implementations use branded orange CTAs. Protect their text from
 * global link, visited, translated-state, and late component color rules. */
body .mini-cart-checkout,
body .mini-cart-checkout:hover,
body .mini-cart-checkout:focus-visible,
body .mini-cart-checkout:active,
body .drawer-checkout-btn,
body .drawer-checkout-btn:link,
body .drawer-checkout-btn:visited,
body .drawer-checkout-btn:hover,
body .drawer-checkout-btn:focus-visible,
body .drawer-checkout-btn:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 1px rgba(124, 45, 18, 0.22);
}
html[data-theme="light"] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
html[data-theme="light"] body select,
html[data-theme="light"] body textarea {
  color-scheme: light;
}
html[data-theme="light"] body input:-webkit-autofill,
html[data-theme="light"] body textarea:-webkit-autofill,
html[data-theme="light"] body select:-webkit-autofill {
  -webkit-text-fill-color: #172033;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

/* Visible keyboard focus in both themes, without changing pointer styling. */
body :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.48);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* DW CAMPAIGN THEME:START */body.dark-mode.cp0{--co:#ff9b54;--ink:#f6eadf;background:#17130f!important;color:#f6eadf}body.dark-mode.cp0 .cp1{background:#241b15;border-color:#563e2b}body.dark-mode.cp0 .cp2{opacity:.53;filter:brightness(.78) saturate(.9)}body.dark-mode.cp0 .cp1 h1{color:#fff2e6!important}body.dark-mode.cp0 .cpb b{color:#ffc18e}body.dark-mode.cp0 :is(.cp8,.cp3,.cpi){color:#dbad84}body.dark-mode.cp0 :is(.cpb,.cpb strong,.cpg,.cpf,.cph strong,.cpr,.cpx>p:last-child){color:#ead4bf!important}body.dark-mode.cp0 .cpt{background:linear-gradient(115deg,#372519,#271d16 55%,#3c281a);border-color:#715035}body.dark-mode.cp0 :is(.cpv strong,.cpw b){color:#ffbd88}body.dark-mode.cp0 :is(.cpv span,.cpw,.cpu small){color:#d2b59d}body.dark-mode.cp0 .campaign-card.product-card{background:#251e18!important;border-color:#523d2d!important}body.dark-mode.cp0 .campaign-card .card-title{color:#ffefdf!important}body.dark-mode.cp0 .campaign-card .current-price{color:#ffb276!important}body.dark-mode.cp0 :is(.cp14,.cp17 p,.cpy p,.cp18 a){color:#d0bba9}body.dark-mode.cp0 .cp13{color:#d3a783}body.dark-mode.cp0 .campaign-card-saving{color:#ffc090}body.dark-mode.cp0 .cp15.add-to-cart{background:#32251b!important;border-color:#795034!important;color:#ffd0a5!important}body.dark-mode.cp0 .cp16{background:radial-gradient(circle at 100%0,#48301d,transparent 35%),linear-gradient(120deg,#2b2017,#201914)}body.dark-mode.cp0 :is(.cpr,.cpy,.cpy details,.cp18 a){border-color:#543e2b}body.dark-mode.cp0 :is(.category-showcase h2,#home-products-title){color:#f6e7d8!important}body.dark-mode.cp0 .category-card{background:#292019!important;color:#f4e4d6!important;border-color:#5b4230!important}body.dark-mode.cp0 .product-card:not(.campaign-card){background:#251e18!important;border-color:#523d2d!important}body.dark-mode.cp0 .product-card:not(.campaign-card) :is(.product-name,.card-title){color:#f5e5d7!important}body.dark-mode.cp0 .premium-footer{--footer-bg:#1c1713!important;--card-bg:#282019!important;--bottom-bg:#171310!important;--footer-text:#c6b3a1!important;--footer-heading:#f4e7db!important}body.dark-mode .dw-product-campaign{background:linear-gradient(115deg,#302721b8,#261f1a80);border-color:#ffffff1f;color:#d9c8b9;box-shadow:0 8px 24px #0002,inset 0 1px #ffffff0a}body.dark-mode .dw-product-campaign strong{color:#ffd3ab}body.dark-mode .dw-sale-media>.dw-sale-badge{background:linear-gradient(110deg,#32261f,#241e19);border-color:#765237;box-shadow:0 4px 12px #0003}body.dark-mode .dw-sale-badge:after{color:#ffd2aa;border-color:#b6794966}body.dark-mode .dw-sale-date{color:#fff;box-shadow:1px 2px #954b22}body.dark-mode .new-header{background:linear-gradient(180deg,#211b17f5,#201a16df)!important;border-color:#594332!important}body.dark-mode .new-header .dw-sale-nav-label:after,body.dark-mode .new-header .dw-sale-nav-label:before{background:#211b17!important}body.dark-mode .dw-bottom-nav{background:#211b17f5!important;border-color:#594332!important}body.dark-mode .dw-bottom-nav .dw-nav-link{color:#d4c1b0!important}body.dark-mode .premium-footer{--footer-bg:#1c1713!important;--card-bg:#282019!important;--bottom-bg:#171310!important;--footer-text:#c6b3a1!important;--footer-heading:#f4e7db!important}html:has(body.dark-mode){background:#17130f!important;color-scheme:dark}html:has(body.dark-mode) body.dark-mode header.new-header.site-header{background:linear-gradient(180deg,#25211df5,#1c1a18f5)!important;border-color:#594332!important}html:has(body.dark-mode) body.dark-mode header.new-header .search-input-wrapper{background:#211c18e8!important;border-color:#9c693e66!important;box-shadow:inset 0 1px #ffffff08!important}html body.dark-mode:is(.product-details-page,.products-page){--ink:#f7eee4;--ink-light:#d6c6b8;--ink-weak:#b8a594;--background-color:#17130f;--card-background:#251f1a;--card-bg:#251f1a;--surface-bg:#201b17;--surface-muted:#2c231c;--border-color:#6d503b55;--border:#6d503b55;background:#17130f!important}html body.dark-mode.product-details-page :is(.main-image-wrapper,.short-description,.thumbnail-strip img){background:#251f1a!important}html body.dark-mode.products-page :is(.filter-sidebar,.product-card){background:#251f1a!important;border-color:#6d503b55!important}html body.dark-mode.product-details-page .related-products-section .product-card.pdp-related-card{background:#251f1a;color:#f7eee4;box-shadow:0 16px 36px #0004,inset 0 1px #ffffff0a}html body.dark-mode.product-details-page .pdp-related-card .card-image-container{background:#2c251f}html body.dark-mode.product-details-page .pdp-related-content .card-title{color:#f7eee4}html body.dark-mode.product-details-page .pdp-related-match{background:#42372edf;box-shadow:0 6px 18px #0003}html body.dark-mode.product-details-page .related-products-section:before{background:radial-gradient(circle at 92% 4%,#f572241a,transparent 36%),radial-gradient(circle at 8% 94%,#b58e5b0a,transparent 34%)}html body.dark-mode.product-details-page .related-products-section .section-title{color:#f7eee4!important;-webkit-text-fill-color:currentColor}html body.dark-mode.product-details-page :is(.pdp-mobile-circle-btn,.pdp-mobile-topbar-actions,.pdp-mobile-purchase-dock){background:#211c18f5;border-color:#6d503b66;color:#f7eee4}/* DW CAMPAIGN THEME:END */