/* =====================================================================
   Under Cover - Dark Mode Styles
   Activated when <html> has the class "dark-mode".
   All rules below only apply in dark mode so the light theme is untouched.
   ===================================================================== */

/* ---------- Theme variables ---------- */
html.dark-mode {
  --uc-bg: #131417;
  --uc-bg-soft: #17181b;
  --uc-surface: #1d1f24;
  --uc-surface-2: #24262c;
  --uc-surface-3: #2b2e35;
  --uc-border: #33363d;
  --uc-border-soft: #2a2d33;
  --uc-heading: #f2f3f5;
  --uc-text: #c6cbd3;
  --uc-muted: #8b919b;
  --uc-acc: #ff5252;
  --uc-acc-strong: #ea1b25;
  --uc-shadow: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html.dark-mode body {
  background: var(--uc-bg);
  color: var(--uc-text);
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: var(--uc-heading);
}

html.dark-mode a {
  color: var(--uc-heading);
}

html.dark-mode .color-black,
html.dark-mode .color-gray {
  color: var(--uc-text) !important;
}

html.dark-mode .bg-white,
html.dark-mode .white-bg {
  background-color: var(--uc-surface) !important;
}

/* Reduce harsh shadows inside dark surfaces */
html.dark-mode .list-product:hover .product-inner,
html.dark-mode .product-card:hover,
html.dark-mode .shop-category-area .product-card:hover {
  box-shadow: 0 18px 40px var(--uc-shadow);
}

/* ---------- Header ---------- */
html.dark-mode .header-top {
  background: var(--uc-surface) !important;
}

html.dark-mode .header-top .search-element input,
html.dark-mode .offcanvas-menu-search-form input {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .header-top .search-element input::placeholder {
  color: var(--uc-muted);
}

html.dark-mode .mobile-header {
  background: var(--uc-surface) !important;
}

html.dark-mode .header-nav .header-menu-nav ul.menu-nav li .dropdown ul.dropdown-menu,
html.dark-mode .header-nav .header-menu-nav ul.menu-nav li .dropdown ul.dropdown-menu li {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .header-nav .header-menu-nav ul.menu-nav li .dropdown ul.dropdown-menu li a {
  color: var(--uc-text);
}

html.dark-mode .header-nav .header-menu-nav ul.menu-nav li .dropdown ul.dropdown-menu li a:hover {
  color: var(--uc-acc);
}

html.dark-mode .header-menu .header-menu-vertical .menu-content,
html.dark-mode .header-menu .header-horizontal-menu li.menu-dropdown ul.main-sub-menu {
  background: var(--uc-surface);
}

html.dark-mode .header-menu .header-menu-vertical .menu-content li a,
html.dark-mode .header-menu .header-horizontal-menu li.menu-dropdown ul.main-sub-menu li a {
  color: var(--uc-text);
}

html.dark-mode .header-menu .header-menu-vertical .menu-content li a:hover,
html.dark-mode .header-menu .header-horizontal-menu li.menu-dropdown ul.main-sub-menu li a:hover {
  color: var(--uc-acc);
}

/* ---------- Offcanvases ---------- */
html.dark-mode .offcanvas .inner {
  background: var(--uc-surface);
}

html.dark-mode .offcanvas .inner .head {
  border-bottom-color: var(--uc-border-soft) !important;
}

html.dark-mode .offcanvas .inner .head .title,
html.dark-mode .offcanvas .inner .head .title span {
  color: var(--uc-heading) !important;
}

html.dark-mode .offcanvas .inner .offcanvas-menu ul li a,
html.dark-mode .offcanvas .inner .offcanvas-menu ul li .sub-menu li a {
  color: var(--uc-text);
}

html.dark-mode .offcanvas .inner .offcanvas-menu ul li:hover > a {
  color: var(--uc-acc);
}

html.dark-mode .offcanvas .inner .body.customScroll .minicart-product-list li {
  border-bottom-color: var(--uc-border-soft);
}

html.dark-mode .minicart-product-list li .content .title,
html.dark-mode .mc-item-name {
  color: var(--uc-heading) !important;
}

html.dark-mode .minicart-product-list li .content .quantity-price {
  color: var(--uc-muted) !important;
}

html.dark-mode .offcanvas .inner .foot .sub-total {
  background: #1d1f24 !important;
  border: 1px solid var(--uc-border-soft) !important;
  box-shadow: none !important;
}

html.dark-mode .offcanvas .inner .foot .sub-total table td {
  color: var(--uc-text) !important;
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .offcanvas-cart .mc-item {
  background: transparent;
}

html.dark-mode .offcanvas-cart .mc-item .mc-qty-control {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  box-shadow: none;
}

html.dark-mode .offcanvas-cart .mc-item .mc-qty-val {
  background: var(--uc-surface-3);
  border-color: var(--uc-border);
  color: var(--uc-heading);
}

html.dark-mode .offcanvas-cart .mc-item .mc-qty-btn {
  color: var(--uc-text);
}

html.dark-mode .offcanvas-cart .mc-item .mc-item-price,
html.dark-mode .offcanvas-cart .cart-total,
html.dark-mode .offcanvas-cart .cart-sub-total {
  color: var(--uc-acc) !important;
}

html.dark-mode .offcanvas-cart .foot {
  background: var(--uc-surface) !important;
  border-top-color: var(--uc-border-soft) !important;
}

html.dark-mode .offcanvas-cart .foot .btn-view-cart,
html.dark-mode .offcanvas-cart a[href*="cart.php"] {
  background: var(--uc-surface-2) !important;
  color: var(--uc-heading) !important;
  border: 1px solid var(--uc-border) !important;
  box-shadow: none !important;
}

html.dark-mode .offcanvas-cart .cc-close {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
  box-shadow: none !important;
}

html.dark-mode .offcanvas-overlay {
  background: rgba(0, 0, 0, 0.65);
}

html.dark-mode .mobile-menu-toggle a {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .mobile-menu-toggle a svg path {
  stroke: var(--uc-heading);
}

/* ---------- Theme toggle button ---------- */
.uc-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffce54;
  font-size: 15px;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  vertical-align: middle;
}

.uc-theme-toggle:hover {
  color: #ffce54;
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(20deg);
}

.header-nav .header-menu-nav ul.menu-nav li .uc-theme-toggle {
  margin-top: 6px;
}

.uc-theme-toggle .uc-theme-icon {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.uc-theme-toggle .uc-theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.uc-theme-toggle .uc-theme-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

html.dark-mode .uc-theme-toggle {
  background: rgba(255, 206, 84, 0.14);
  border-color: rgba(255, 206, 84, 0.4);
  color: #ffce54;
}

html.dark-mode .uc-theme-toggle .uc-theme-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

html.dark-mode .uc-theme-toggle .uc-theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Light background strip toggle (mobile-header) */
html.dark-mode .mobile-header .uc-theme-toggle {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: #ffce54;
}

/* Floating theme switch (bottom-right, stacked above scrollUp) */
.uc-theme-toggle.uc-float-toggle {
  position: fixed;
  right: 20px;
  bottom: 118px;
  box-sizing: border-box;
  width: 56px;
  height: 32px;
  padding: 3px;
  font-size: 13px;
  cursor: pointer;
  z-index: 9990;
  border-radius: 32px;
  border: 1px solid rgba(230, 161, 22, 0.35);
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0) 80%),
                    linear-gradient(135deg, #fff7e2, #ffeac0);
  background-size: 200% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  color: #b58900;
  box-shadow: inset 0 1px 3px rgba(120, 80, 0, 0.14),
              0 4px 10px rgba(140, 95, 0, 0.18),
              0 10px 24px rgba(26, 26, 46, 0.18);
  animation: uc-switch-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards;
  transition: background-color 0.35s ease, background-position 0.65s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}

@keyframes uc-switch-in {
  from {
    transform: scale(0) rotate(-120deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes uc-halo-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.uc-theme-toggle.uc-float-toggle:hover {
  transform: scale(1.05);
  background-position: -50% 0, 0 0;
  box-shadow: inset 0 1px 3px rgba(120, 80, 0, 0.14),
              0 6px 14px rgba(140, 95, 0, 0.24),
              0 0 0 4px rgba(255, 213, 79, 0.12),
              0 12px 30px rgba(26, 26, 46, 0.22);
}

.uc-theme-toggle.uc-float-toggle:active {
  transform: scale(0.9);
}

.uc-theme-toggle.uc-float-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 3px rgba(120, 80, 0, 0.14),
              0 0 0 3px rgba(246, 166, 9, 0.5);
}

/* Mode tooltip (shows current theme on hover / keyboard focus) */
.uc-theme-toggle.uc-float-toggle::before {
  content: "Light Mode";
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border-radius: 8px;
  background: #ffffff;
  color: #5a5850;
  border: 1px solid rgba(26, 26, 46, 0.12);
  box-shadow: 0 4px 14px rgba(26, 26, 46, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9991;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.uc-theme-toggle.uc-float-toggle:hover::before,
.uc-theme-toggle.uc-float-toggle:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* Icons live in circular chips on the track; active chip rides the knob */
.uc-theme-toggle.uc-float-toggle .uc-theme-icon {
  right: auto;
  left: 5px;
  top: 50%;
  margin-top: -10px;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-style: normal;
  border: 1px solid transparent;
  transform: scale(0) rotate(-120deg);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease;
}

.uc-theme-toggle.uc-float-toggle .uc-theme-icon-sun {
  opacity: 1 !important;
  color: #f6a609;
  background: rgba(246, 166, 9, 0.2);
  border-color: rgba(246, 166, 9, 0.4);
  box-shadow: 0 1px 3px rgba(150, 95, 0, 0.35);
  transform: scale(1) rotate(0deg);
}

.uc-theme-toggle.uc-float-toggle .uc-theme-icon-moon {
  left: 24px;
  opacity: 0 !important;
  color: #a89f88;
  background: rgba(26, 26, 46, 0.06);
  border-color: rgba(26, 26, 46, 0.1);
}

/* Backdrop glow behind the switch */
.uc-theme-toggle.uc-float-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 166, 9, 0.22) 0%, rgba(246, 166, 9, 0.05) 55%, rgba(246, 166, 9, 0) 72%);
  pointer-events: none;
  z-index: -1;
  transition: background 0.4s ease;
}

/* Sliding thumb */
.uc-theme-toggle.uc-float-toggle .uc-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 0;
  background: linear-gradient(135deg, #ffffff, #f3e9d2);
  box-shadow: inset 0 -2px 3px rgba(120, 80, 0, 0.12),
              inset 0 1px 1px rgba(255, 255, 255, 0.9),
              0 2px 6px rgba(120, 80, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.45, 0.64, 1),
              background 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode state */
html.dark-mode .uc-theme-toggle.uc-float-toggle {
  border-color: rgba(255, 206, 84, 0.55);
  background-image: linear-gradient(105deg, rgba(255, 213, 79, 0) 5%, rgba(255, 213, 79, 0.22) 42%, rgba(255, 213, 79, 0) 80%),
                    linear-gradient(135deg, #16171b, #23252b);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55),
              0 0 14px rgba(255, 206, 84, 0.22),
              0 6px 24px rgba(0, 0, 0, 0.55);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle:hover {
  background-image: linear-gradient(105deg, rgba(255, 213, 79, 0) 5%, rgba(255, 213, 79, 0.3) 42%, rgba(255, 213, 79, 0) 80%),
                    linear-gradient(135deg, #1a1b20, #292c33);
  background-position: -50% 0, 0 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55),
              0 0 22px rgba(255, 206, 84, 0.45),
              0 12px 30px rgba(0, 0, 0, 0.65);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle:focus-visible {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55),
              0 0 0 3px rgba(255, 213, 79, 0.55);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle::before {
  content: "Dark Mode";
  background: #26282e;
  color: #ffd54f;
  border-color: rgba(255, 206, 84, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle .uc-theme-icon-sun {
  opacity: 0 !important;
  color: #6b6b74;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  transform: scale(0) rotate(120deg);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle .uc-theme-icon-moon {
  opacity: 1 !important;
  color: #ffd54f;
  background: rgba(255, 206, 84, 0.22);
  border-color: rgba(255, 206, 84, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: scale(1) rotate(0deg);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle::after {
  background: radial-gradient(circle, rgba(255, 206, 84, 0.28) 0%, rgba(255, 206, 84, 0.08) 55%, rgba(255, 206, 84, 0) 72%);
  animation: uc-halo-pulse 4.5s ease-in-out infinite;
}

html.dark-mode .uc-theme-toggle.uc-float-toggle .uc-switch-thumb {
  transform: translateX(18px);
  background: linear-gradient(135deg, #f4d35a, #ffc63d);
  box-shadow: inset 0 -2px 3px rgba(120, 80, 0, 0.25),
              inset 0 1px 1px rgba(255, 255, 255, 0.6),
              0 0 10px rgba(255, 213, 79, 0.45),
              0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Press feedback: thumb glows while clicking */
.uc-theme-toggle.uc-float-toggle:active .uc-switch-thumb {
  box-shadow: inset 0 -2px 3px rgba(120, 80, 0, 0.12),
              inset 0 1px 1px rgba(255, 255, 255, 0.9),
              0 0 12px rgba(246, 166, 9, 0.65),
              0 2px 6px rgba(120, 80, 0, 0.35);
}

html.dark-mode .uc-theme-toggle.uc-float-toggle:active .uc-switch-thumb {
  box-shadow: inset 0 -2px 3px rgba(120, 80, 0, 0.25),
              inset 0 1px 1px rgba(255, 255, 255, 0.6),
              0 0 16px rgba(255, 213, 79, 0.85),
              0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .uc-theme-toggle.uc-float-toggle {
    animation: none;
  }
  .uc-theme-toggle.uc-float-toggle,
  .uc-theme-toggle.uc-float-toggle *,
  .uc-theme-toggle.uc-float-toggle::before,
  .uc-theme-toggle.uc-float-toggle::after {
    transition: none !important;
    animation: none !important;
  }
}

@media only screen and (max-width: 479px) {
  .uc-theme-toggle.uc-float-toggle {
    right: 14px;
    bottom: 125px;
  }
}

/* Offcanvas mobile menu theme row */
.offcanvas-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  margin: 0 0 6px;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  background: #fafafa;
}

.offcanvas-theme-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #555;
}

.offcanvas-theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  background: #e8e8e8;
  border-color: #dddddd;
  color: #f5a623;
}

.offcanvas-theme-toggle:hover {
  background: #ffffff;
  color: #f5a623;
}

html.dark-mode .offcanvas-theme-row {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .offcanvas-theme-label {
  color: var(--uc-text);
}

html.dark-mode .offcanvas-theme-toggle {
  background: var(--uc-surface-3);
  border-color: var(--uc-border);
  color: #ffce54;
}

/* ---------- Static / feature / section wrappers ---------- */
html.dark-mode .static-area .static-area-wrap {
  background-color: var(--uc-surface);
}

html.dark-mode .static-area .single-static .single-static-meta h4 {
  color: var(--uc-heading);
}

html.dark-mode .static-area .single-static .single-static-meta p {
  color: var(--uc-muted);
}

html.dark-mode .arrival-area,
html.dark-mode .feature-area,
html.dark-mode .shop-category-area .row.m-0 {
  background: var(--uc-bg);
}

html.dark-mode .arrival-area .arrival-slider .arrval-slider-item .img-block,
html.dark-mode .feature-slider-wrapper .slick-list,
html.dark-mode .feature-area .slick-list {
  background: var(--uc-surface);
}

html.dark-mode .category-tab-slider-area .section-title .box-tab li a {
  color: var(--uc-muted);
}

html.dark-mode .category-tab-slider-area .section-title .box-tab li a.active {
  color: var(--uc-acc);
}

html.dark-mode .tab-content,
html.dark-mode .tab-content .tab-pane,
html.dark-mode .tab-content .tab-pane.active {
  background: transparent;
}

html.dark-mode .section-title h2 {
  color: var(--uc-heading);
}

/* ---------- Product cards ---------- */
html.dark-mode .list-product {
  background: var(--uc-surface);
  max-height: 400px;
}

html.dark-mode .list-product .product-decs h2 a,
html.dark-mode .product-card-body h3 a,
html.dark-mode .pc-empty h3 {
  color: var(--uc-heading);
}

html.dark-mode .list-product .product-decs .pricing-meta li.old-price,
html.dark-mode .product-card-body .pricing-meta .old-price,
html.dark-mode .pc-cat {
  color: var(--uc-muted);
}

html.dark-mode .shop-category-area .product-card {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .shop-category-area .product-card-img {
  background: var(--uc-bg-soft);
}

html.dark-mode .product-card-actions a {
  background: var(--uc-surface-2);
  color: var(--uc-text);
  box-shadow: 0 4px 12px var(--uc-shadow);
}

html.dark-mode .list-product .add-to-link a,
html.dark-mode .list-product .cart-btn a.add-to-curt,
html.dark-mode .product-card-body .add-to-curt {
  background: var(--uc-surface-2);
  color: var(--uc-heading);
}

html.dark-mode .list-product .add-to-link a:hover,
html.dark-mode .list-product .cart-btn a.add-to-curt:hover,
html.dark-mode .product-card-body .add-to-curt:hover {
  background: var(--uc-acc-strong);
  color: #fff;
}

/* ---------- Theme product cards (index) ---------- */
html.dark-mode .wheel-product-card,
html.dark-mode .best-sell-slider-item,
html.dark-mode .slider-single-item,
html.dark-mode .feature-slider-item,
html.dark-mode .category-slider-area .list-product {
  background: var(--uc-surface);
}

html.dark-mode .wheel-product-info .wheel-cat-name {
  color: var(--uc-muted);
}

html.dark-mode .wheel-product-info .wheel-divider,
html.dark-mode .wheel-price {
  color: var(--uc-text);
}

html.dark-mode .wheel-product-info .wheel-price .wheel-old {
  color: var(--uc-muted);
}

/* ---------- Shop toolbar / pagination / sidebar ---------- */
html.dark-mode .shop-category-area .shop-top-bar {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .shop-category-area .shop-top-bar .shop-tab a {
  background: var(--uc-surface-2);
  color: var(--uc-muted);
}

html.dark-mode .shop-category-area .shop-top-bar .shop-tab a.active {
  background: var(--uc-surface-3);
  color: var(--uc-acc);
  box-shadow: none;
}

html.dark-mode .shop-category-area .shop-top-bar .toolbar-amaount p strong,
html.dark-mode .shop-pagination .toolbar-amaount p strong {
  color: var(--uc-heading);
}

html.dark-mode .shop-category-area .shop-top-bar .sorter select,
html.dark-mode .shop-sort select {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}

html.dark-mode .shop-sidebar-wrap .card,
html.dark-mode .shop-sidebar-wrap .card .card-body {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .shop-sidebar-wrap .card-title,
html.dark-mode .shop-sidebar-wrap .widget-title,
html.dark-mode .sidebar-title {
  color: var(--uc-heading);
}

html.dark-mode .shop-sidebar-wrap ul li a,
html.dark-mode .widget-category-list li a {
  color: var(--uc-text);
}

html.dark-mode .shop-pagination .pagination li a,
html.dark-mode .pagination li a,
html.dark-mode .shop-pagination .pagination li span,
html.dark-mode .pagination li span {
  background: var(--uc-surface);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .shop-pagination .pagination li a:hover,
html.dark-mode .shop-pagination .pagination li.active a,
html.dark-mode .pagination li.active a {
  background: var(--uc-acc-strong);
  border-color: var(--uc-acc-strong);
  color: #fff;
}

/* ---------- Product details ---------- */
html.dark-mode .product-details-content,
html.dark-mode .product-details-content h1,
html.dark-mode .product-details-content h2,
html.dark-mode .pro-details-prev,
html.dark-mode .pro-details-info h1 {
  color: var(--uc-heading);
}

html.dark-mode .pro-details-price,
html.dark-mode .product-details-content .price,
html.dark-mode .cur-price,
html.dark-mode .pricing-meta li.current-price {
  color: var(--uc-acc);
}

html.dark-mode .pro-details-quality .cart-plus-minus-box,
html.dark-mode .cart-plus-minus-box,
html.dark-mode .quality-button,
html.dark-mode .cart-plus-minus .qtybutton {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .product-info,
html.dark-mode .product-info .nav-tabs li a,
html.dark-mode .shop-tab.tab-vertical .nav-tabs li a {
  background: var(--uc-surface);
  color: var(--uc-text);
}

html.dark-mode .product-info .nav-tabs li a:hover,
html.dark-mode .product-info .nav-tabs li a.active {
  color: var(--uc-acc);
}

html.dark-mode .panel,
html.dark-mode .panel-default,
html.dark-mode .product-reviews .single-review {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .panel-heading,
html.dark-mode .panel .panel-heading {
  background: var(--uc-surface-2) !important;
  color: var(--uc-heading);
}

html.dark-mode .panel-heading a {
  color: var(--uc-heading);
}

html.dark-mode .product-rating i,
html.dark-mode .rating-product i {
  color: #f5b301;
}

html.dark-mode .rating-product i.color-gray,
html.dark-mode .ion-android-star.color-gray {
  color: #3a3d44;
}

/* ---------- Tables / cart / checkout ---------- */
html.dark-mode .table,
html.dark-mode .table thead th,
html.dark-mode .table tbody td,
html.dark-mode .table tbody tr {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
  color: var(--uc-text);
}

html.dark-mode .table thead th {
  background: var(--uc-surface-2) !important;
  color: var(--uc-heading);
}

html.dark-mode .cart-prod-name,
html.dark-mode .order-item-name,
html.dark-mode .od-item-name,
html.dark-mode .si-name {
  color: var(--uc-heading);
}

html.dark-mode .cart-qty-input {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .cart-actions-bar,
html.dark-mode .coupon-box input {
  background: var(--uc-surface);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .cart-area .cart-shiping-update,
html.dark-mode .cart-area .cart-total-wrap,
html.dark-mode .your-order-top,
html.dark-mode .your-order-middle,
html.dark-mode .your-order-bottom,
html.dark-mode .your-order-table table {
  background: var(--uc-surface) !important;
}

html.dark-mode .your-order-table table td,
html.dark-mode .your-order-table table th {
  color: var(--uc-text);
  border-color: var(--uc-border-soft);
}

/* ---------- Forms / inputs ---------- */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="number"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
html.dark-mode .nice-select,
html.dark-mode .billing-select select,
html.dark-mode .country_select,
html.dark-mode .input-text {
  background-color: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode .form-control::placeholder {
  color: var(--uc-muted) !important;
}

html.dark-mode select option {
  background: var(--uc-surface);
  color: var(--uc-text);
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-control:focus {
  border-color: var(--uc-acc) !important;
  background-color: var(--uc-surface-2) !important;
  color: var(--uc-text) !important;
}

html.dark-mode label,
html.dark-mode .form-label,
html.dark-mode .label {
  color: var(--uc-text);
}

/* ---------- Cards / auth / success / billing ---------- */
html.dark-mode .auth-card,
html.dark-mode .success-card,
html.dark-mode .summary-card,
html.dark-mode .billing-card,
html.dark-mode .billing-info,
html.dark-mode .coupon-box,
html.dark-mode .success-info-box,
html.dark-mode .account-page-head,
html.dark-mode .pc-empty,
html.dark-mode .empty-cart-icon,
html.dark-mode .cart-empty-area .empty-cart-inner,
html.dark-mode .search-result-item {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .auth-heading,
html.dark-mode .auth-badge,
html.dark-mode .auth-card h2,
html.dark-mode .auth-card h3,
html.dark-mode .success-card h2,
html.dark-mode .summary-card h3,
html.dark-mode .billing-card h3,
html.dark-mode .billing-title,
html.dark-mode .account-page-head h2,
html.dark-mode .os-title,
html.dark-mode .od-box-head h2 {
  color: var(--uc-heading);
}

html.dark-mode .auth-field i,
html.dark-mode .field-icon,
html.dark-mode .os-contact-lb,
html.dark-mode .od-contact-lb {
  color: var(--uc-muted);
}

html.dark-mode .auth-switch-link,
html.dark-mode .auth-actions a,
html.dark-mode .od-back-link,
html.dark-mode .success-sub,
html.dark-mode .auth-alert {
  color: var(--uc-text);
}

html.dark-mode .auth-switch-link:hover,
html.dark-mode .od-back-link:hover {
  color: var(--uc-acc);
}

/* ---------- Order pages ---------- */
html.dark-mode .od-box,
html.dark-mode .od-items,
html.dark-mode .od-item,
html.dark-mode .od-sum-row,
html.dark-mode .order-doing-area,
html.dark-mode .order-payment-additional,
html.dark-mode .order-complete-area,
html.dark-mode .order-detail-box,
html.dark-mode .osum-row {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .od-section-head h3,
html.dark-mode .od-box-head h3,
html.dark-mode .od-sum-total,
html.dark-mode .osum-total,
html.dark-mode .order-number-box h2 {
  color: var(--uc-heading);
}

html.dark-mode .od-meta,
html.dark-mode .od-meta-item,
html.dark-mode .od-item-qty-price,
html.dark-mode .order-meta,
html.dark-mode .os-contact-lb {
  color: var(--uc-muted);
}

html.dark-mode .od-tracking,
html.dark-mode .od-timeline {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .od-tl-step .od-tl-ic {
  background: var(--uc-surface-2);
  color: var(--uc-muted);
}

html.dark-mode .od-tl-step.od-done .od-tl-ic,
html.dark-mode .od-tl-step.is-active .od-tl-ic {
  background: var(--uc-acc-strong);
  color: #fff;
}

html.dark-mode .order-status-badge {
  color: var(--uc-heading);
}

/* ---------- Blog ---------- */
html.dark-mode .uc-blog-section,
html.dark-mode .uc-blog-card__body,
html.dark-mode .blog-area .blog-details-section,
html.dark-mode .single-blog-post {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft);
}

html.dark-mode .uc-blog-card__title,
html.dark-mode .uc-blog-card__link,
html.dark-mode .blog-post-content h3 a,
html.dark-mode .blog-title h2 a {
  color: var(--uc-heading);
}

html.dark-mode .uc-blog-card__excerpt,
html.dark-mode .uc-blog-card__meta,
html.dark-mode .blog-post-meta,
html.dark-mode .blog-post-content p {
  color: var(--uc-muted);
}

html.dark-mode .uc-blog-card__link:hover,
html.dark-mode .uc-blog-card__title:hover {
  color: var(--uc-acc);
}

/* ---------- Contact / about ---------- */
html.dark-mode .uc-contact-body,
html.dark-mode .info-addr,
html.dark-mode .info-name,
html.dark-mode .ui-acc-body,
html.dark-mode .about-page-content .single-wedge,
html.dark-mode .testimonial-content,
html.dark-mode .testimonial-item {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .uc-contact-body h3,
html.dark-mode .info-name,
html.dark-mode .testimonial-content h4,
html.dark-mode .about-page-content h3 {
  color: var(--uc-heading);
}

html.dark-mode .info-notes,
html.dark-mode .info-notes p,
html.dark-mode .testimonial-content p {
  color: var(--uc-muted);
}

html.dark-mode .footer-area {
  background: #17181d;
}

/* ---------- Modals / accordions ---------- */
html.dark-mode .modal-content,
html.dark-mode .modal-body,
html.dark-mode .modal-header,
html.dark-mode .quickview-modal .modal-body,
html.dark-mode .quickview-modal .modal-content {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .modal-header .close,
html.dark-mode .modal-header button.close,
html.dark-mode .close {
  color: var(--uc-text);
  opacity: 1;
}

html.dark-mode .single-my-account .panel-body {
  background: var(--uc-surface);
}

html.dark-mode .alert-danger,
html.dark-mode .alert-success,
html.dark-mode .alert-info {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .field-error,
html.dark-mode .has-error .help-block {
  color: #ff6b6b;
}

/* ---------- Live search / quickview boxes ---------- */
html.dark-mode .live-search-box,
html.dark-mode .quickview-content,
html.dark-mode .quickview-content .product-details-content {
  background: var(--uc-surface);
  color: var(--uc-text);
}

/* =====================================================================
   Page-specific custom blocks
   ===================================================================== */

/* ---------- Cart page ---------- */

/* Cart heading + item count */
html.dark-mode .cart-area .col-lg-8 > .d-flex h2 {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-area .col-lg-8 > .d-flex > span {
  color: var(--uc-muted) !important;
}

/* Free shipping progress box (locked + unlocked) */
html.dark-mode .cart-ship-box {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
  box-shadow: none !important;
}

html.dark-mode .cart-ship-box.unlocked {
  background: rgba(39, 174, 96, 0.14) !important;
  border-color: rgba(39, 174, 96, 0.35) !important;
}

html.dark-mode .cart-ship-box > span:first-child {
  background: rgba(39, 174, 96, 0.18) !important;
}

html.dark-mode .cart-ship-box.unlocked > span:last-child {
  color: #6fdc9c !important;
}

html.dark-mode .cart-ship-box > div > div:first-child {
  color: var(--uc-text) !important;
}

html.dark-mode .cart-ship-box > div > div:nth-child(2) {
  background: var(--uc-border-soft) !important;
}

html.dark-mode .cart-ship-box > div > div:nth-child(2) .ship-progress-knob {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border) !important;
}

/* Cart items card */
html.dark-mode .cart-area .table-responsive {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
  box-shadow: 0 1px 6px var(--uc-shadow) !important;
}

html.dark-mode .cart-area thead tr {
  background: var(--uc-surface-2) !important;
}

html.dark-mode .cart-prod-thumb {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
}

html.dark-mode .cart-row .cart-prod-name {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-row .cart-prod-name + span {
  background: var(--uc-surface-2) !important;
  color: var(--uc-muted) !important;
}

html.dark-mode .qty-stepper {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
  box-shadow: none !important;
}

html.dark-mode .cart-qty-btn {
  color: var(--uc-text) !important;
}

html.dark-mode .cart-qty-btn:hover {
  background: var(--uc-surface-3) !important;
}

html.dark-mode .cart-qty-input {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-qty-input:focus {
  background: var(--uc-surface-3) !important;
}

html.dark-mode .cart-item-total {
  color: var(--uc-heading) !important;
}

html.dark-mode #cart-table-body .cart-row td:last-child .cart-remove-btn {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-muted) !important;
}

html.dark-mode .btn-outline-dark-custom {
  color: var(--uc-heading) !important;
  border-color: var(--uc-border) !important;
}

/* Row hover + borders (beats the light-only <style> block in cart.php) */
html.dark-mode .cart-row {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .cart-row:hover {
  background: var(--uc-surface-2) !important;
}

html.dark-mode .cart-row:hover .cart-prod-name {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-row td {
  border-bottom-color: var(--uc-border-soft) !important;
}

html.dark-mode .cart-row td:nth-child(4)::before {
  color: var(--uc-heading) !important;
}

/* Mobile stacked-card view overrides for the light-only <style> block */
html.dark-mode #cart-table-body .cart-row:hover {
  background: var(--uc-surface-2) !important;
}

html.dark-mode #cart-table-body .cart-row:hover .cart-prod-name {
  color: var(--uc-heading) !important;
}

html.dark-mode #cart-table-body .cart-row td:first-child,
html.dark-mode #cart-table-body .cart-row td:nth-child(4) {
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode #cart-table-body .cart-row td:nth-child(4)::before {
  color: var(--uc-heading) !important;
}

/* Order summary sidebar */
html.dark-mode .cart-summary-card {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
  box-shadow: 0 2px 12px var(--uc-shadow) !important;
}

html.dark-mode .cart-summary-card > div:first-child {
  border-bottom-color: var(--uc-border-soft) !important;
}

html.dark-mode .cart-summary-card h3 {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-summary-card .summary-label {
  color: var(--uc-muted) !important;
}

html.dark-mode .cart-summary-card .cart-total-label {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-summary-card .summary-subtotal {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-summary-divider {
  background: linear-gradient(90deg, transparent, var(--uc-border-soft), transparent) !important;
}

html.dark-mode .cart-summary-trust {
  border-top-color: var(--uc-border-soft) !important;
}

html.dark-mode .cart-summary-trust div > span:first-child {
  background: var(--uc-surface-2) !important;
}

/* Empty cart state */
html.dark-mode .cart-empty-box {
  background: var(--uc-surface) !important;
  border-color: var(--uc-border-soft) !important;
  box-shadow: 0 1px 6px var(--uc-shadow) !important;
}

html.dark-mode .cart-empty-box .empty-cart-icon {
  background: var(--uc-surface-2) !important;
  border-color: var(--uc-border) !important;
}

html.dark-mode .cart-empty-box .empty-cart-icon i {
  color: var(--uc-muted) !important;
}

html.dark-mode .cart-empty-box h2 {
  color: var(--uc-heading) !important;
}

html.dark-mode .cart-empty-box p {
  color: var(--uc-muted) !important;
}

/* ---------- Checkout page ---------- */
html.dark-mode .checkout-top-bar {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .billing-info-wrap .additional-info-wrap,
html.dark-mode .additional-info-wrap {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .payment-option label {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
}

html.dark-mode .payment-option input[type="radio"]:checked + label {
  background: var(--uc-surface-3);
  border-color: var(--uc-acc);
}

html.dark-mode .coupon-box {
  background: rgba(139, 92, 191, 0.12);
  border-color: rgba(139, 92, 191, 0.35);
}

html.dark-mode .coupon-box label,
html.dark-mode .coupon-box label i {
  color: #c9a2f0;
}

html.dark-mode .order-item-img {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .razorpay-note {
  background: rgba(255, 184, 60, 0.1);
  border-color: rgba(255, 184, 60, 0.3);
  color: #ffcf6e;
}

/* ---------- Auth pages (login / register / forgot / reset) ---------- */
html.dark-mode .auth-form {
  background: var(--uc-surface) !important;
}

html.dark-mode .auth-tabs {
  background: var(--uc-surface-2);
  border-bottom-color: var(--uc-border-soft);
}

html.dark-mode .auth-tabs a.active,
html.dark-mode .auth-tabs a {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .auth-tabs a h4 {
  color: var(--uc-muted);
}

/* ---------- My Account page ---------- */
html.dark-mode .account-note {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.28);
  color: #f2a19b;
}

html.dark-mode .account-logout-btn {
  background: var(--uc-surface-2);
  color: #ff7373;
  border-color: rgba(234, 27, 37, 0.4);
}

/* ---------- My Orders page ---------- */
html.dark-mode .my-order-head,
html.dark-mode .my-order-table-wrap,
html.dark-mode .my-order-empty {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .my-order-head h3,
html.dark-mode .my-order-empty h4 {
  color: var(--uc-heading);
}

html.dark-mode .my-order-head p,
html.dark-mode .my-order-empty p {
  color: var(--uc-muted);
}

html.dark-mode .my-order-table thead th,
html.dark-mode .success-items-head {
  background: var(--uc-surface-2) !important;
  border-bottom-color: var(--uc-border-soft) !important;
  color: var(--uc-muted) !important;
}

html.dark-mode .my-order-table tbody td {
  color: var(--uc-text);
  border-bottom-color: var(--uc-border-soft);
}

html.dark-mode .my-order-table tbody tr,
html.dark-mode .my-order-table tbody td {
  background: var(--uc-surface) !important;
}

html.dark-mode .my-order-table tbody tr:hover {
  background: var(--uc-surface-2) !important;
}

html.dark-mode .my-order-view-btn {
  background: var(--uc-surface-2);
  color: var(--uc-heading);
  border-color: var(--uc-border);
}

html.dark-mode .my-order-empty-icon {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: var(--uc-muted);
}

/* ---------- Order details page ---------- */
html.dark-mode .od-head {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .od-head,
html.dark-mode .od-meta,
html.dark-mode .od-tracking,
html.dark-mode .od-section,
html.dark-mode .od-box {
  border-color: var(--uc-border-soft) !important;
}

html.dark-mode .od-head h3,
html.dark-mode .order-detail-empty h4 {
  color: var(--uc-heading);
}

html.dark-mode .od-head p,
html.dark-mode .order-detail-empty p {
  color: var(--uc-muted);
}

html.dark-mode .od-item-img {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .od-btn {
  background: var(--uc-surface-2);
  color: var(--uc-text);
  border-color: var(--uc-border);
}

html.dark-mode .od-btn:not(.active):hover {
  border-color: var(--uc-acc-strong);
  color: var(--uc-acc-strong);
}

html.dark-mode .od-tracking-icon {
  background: var(--uc-surface-2);
  color: #7ea2f0;
}

html.dark-mode .order-detail-empty {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .order-detail-empty-icon {
  background: rgba(231, 76, 60, 0.18);
}

/* ---------- Order success page ---------- */
html.dark-mode .om-item {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .om-item span {
  color: var(--uc-muted);
}

html.dark-mode .om-item strong,
html.dark-mode .success-steps h4,
html.dark-mode .success-step strong {
  color: var(--uc-heading);
}

html.dark-mode .si-thumb {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .success-items {
  border-color: var(--uc-border-soft);
}

html.dark-mode .success-item {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .success-btn.ghost {
  background: var(--uc-surface-2);
  color: var(--uc-text);
  border-color: var(--uc-border);
}

html.dark-mode .success-btn.ghost:hover {
  border-color: var(--uc-acc-strong);
  color: var(--uc-acc-strong);
}

html.dark-mode .success-total {
  background: rgba(231, 76, 60, 0.12);
  border-color: rgba(231, 76, 60, 0.28);
}

html.dark-mode .success-total strong {
  color: var(--uc-text);
}

html.dark-mode .success-steps {
  background: var(--uc-surface);
  border-color: var(--uc-border-soft);
}

html.dark-mode .success-step {
  background: var(--uc-surface-2);
  border-color: var(--uc-border-soft);
}

html.dark-mode .success-step p {
  color: var(--uc-muted);
}

/* ---------- Product details slider arrows ---------- */
html.dark-mode .slick-prev,
html.dark-mode .slick-next,
html.dark-mode .related-products-slider .slick-prev,
html.dark-mode .related-products-slider .slick-next {
  background: var(--uc-surface-2);
  color: var(--uc-text);
}

html.dark-mode .related-products-slider .slick-prev:before,
html.dark-mode .related-products-slider .slick-next:before,
html.dark-mode .slick-prev:before,
html.dark-mode .slick-next:before {
  color: var(--uc-text);
}

html.dark-mode .related-products-slider .slick-prev:hover:before,
html.dark-mode .related-products-slider .slick-next:hover:before,
html.dark-mode .slick-prev:hover:before,
html.dark-mode .slick-next:hover:before {
  color: #fff;
}

/* ---------- Order status chips ---------- */
html.dark-mode .order-status-new,
html.dark-mode .order-status-processing {
  background: var(--uc-surface-3);
  color: var(--uc-text);
}

/* ---------- Order details action buttons ---------- */
html.dark-mode .od-print-btn {
  background: var(--uc-surface-2);
  border-color: var(--uc-border);
  color: var(--uc-text);
}

html.dark-mode .od-print-btn:hover {
  background: var(--uc-surface-3);
  border-color: var(--uc-acc-strong);
  color: var(--uc-acc-strong);
}

html.dark-mode .od-track-btn {
  background: var(--uc-surface-2);
  color: #7ea2f0;
  border-color: rgba(59, 109, 224, 0.4);
}

/* ---------- Homepage "OUR CATEGORY" (wheel) section ---------- */
html.dark-mode .wheel-section {
  background: linear-gradient(135deg, #16171c 0%, #101115 100%);
}

html.dark-mode .wheel-section .section-title h2 {
  color: var(--uc-heading);
}

html.dark-mode .wheel-section .section-title h2 .amp {
  color: var(--uc-muted);
  font-weight: 300;
}

html.dark-mode .wheel-tabs .tab-btn,
html.dark-mode .tab-btn {
  background: var(--uc-surface-2);
  border: 1px solid var(--uc-border-soft);
  color: var(--uc-muted);
  box-shadow: 0 2px 8px var(--uc-shadow);
}

html.dark-mode .wheel-tabs .tab-btn:hover,
html.dark-mode .tab-btn:hover {
  background: var(--uc-surface-3);
  border-color: var(--uc-border);
  color: var(--uc-acc);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

html.dark-mode .wheel-tabs .tab-btn.active,
html.dark-mode .tab-btn.active {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.35);
}

html.dark-mode .wheel-tab-content {
  background: var(--uc-surface);
  border: 1px solid var(--uc-border-soft);
  box-shadow: 0 5px 25px var(--uc-shadow);
}

html.dark-mode .wheel-products-grid .wheel-product-card {
  background: var(--uc-surface-2);
  border: 1px solid var(--uc-border-soft);
}

html.dark-mode .wheel-product-card:hover {
  border-color: rgba(231, 76, 60, 0.35);
  box-shadow: 0 12px 30px var(--uc-shadow);
}

html.dark-mode .wheel-product-card .wheel-img-wrap {
  background: var(--uc-bg-soft);
}

html.dark-mode .wheel-product-card .wheel-product-info h3 a {
  color: var(--uc-heading);
}

html.dark-mode .wheel-product-card .wheel-product-info h3 a:hover {
  color: var(--uc-acc);
}

html.dark-mode .wheel-product-info .wheel-rating i.gray,
html.dark-mode .wheel-product-info .wheel-rating i.color-gray {
  color: #3a3d44;
}

html.dark-mode .wheel-product-info .wheel-price-cart {
  border-top-color: var(--uc-border-soft);
}

html.dark-mode .wheel-price-cart .wheel-old {
  color: var(--uc-muted);
}

html.dark-mode .wheel-empty {
  color: var(--uc-muted);
}

html.dark-mode .wheel-empty i {
  color: var(--uc-surface-3);
}

html.dark-mode .wheel-quick-actions a {
  background: var(--uc-surface-2);
  border: 1px solid var(--uc-border-soft);
  color: var(--uc-text);
  box-shadow: 0 2px 8px var(--uc-shadow);
}

html.dark-mode .wheel-quick-actions a:hover {
  background: var(--uc-acc-strong);
  border-color: var(--uc-acc-strong);
  color: #fff;
}

html.dark-mode .wheel-view-all a {
  background: var(--uc-surface-2);
  color: var(--uc-heading);
  border-color: var(--uc-acc-strong);
}

html.dark-mode .wheel-view-all a:hover {
  background: var(--uc-acc-strong);
  color: #fff;
}

html.dark-mode .live-search-box a {
  color: var(--uc-text);
}

html.dark-mode .live-search-box a:hover {
  color: var(--uc-acc);
}

/* ---------- Scrollbars ---------- */
html.dark-mode ::-webkit-scrollbar-track {
  background: var(--uc-bg-soft);
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--uc-surface-3);
  border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--uc-border);
}

/* ---------- Fix odd white gaps ---------- */
html.dark-mode .slider-area .bg-img {
  background-color: var(--uc-bg);
}

html.dark-mode .search-element input {
  color: var(--uc-text);
}

html.dark-mode .header-cart-total,
html.dark-mode .cart-info a.bag {
  color: var(--uc-heading);
}

/* Ensure icons remain visible */
html.dark-mode .offcanvas .inner .head .offcanvas-close {
  color: var(--uc-text);
}

html.dark-mode .offcanvas .inner .head .offcanvas-close::before,
html.dark-mode .offcanvas .inner .head .offcanvas-close::after {
/*  background: var(--uc-text);*/
}


html.dark-mode .container-inner {

  background-color: #1d1f24 !important;
}

html.dark-mode .offcanvas{
   background-color: #1d1f24 !important;
}
html.dark-mode .description-review-topbar.nav{
   background-color: #1d1f24 !important;
}
html.dark-mode  .description-review-topbar.nav a.active{
  color: #fff;
}
html.dark-mode  .description-review-bottom .product-anotherinfo-wrapper li span{
  color: #fff;
}
html.dark-mode .swal2-backdrop-show{
  background-color: #1d1f24 !important;
}

html.dark-mode .header-tools .cart-info a{
  color: #fff;
}
html.dark-mode .login-register-wrapper .login-form-container .login-register-form .button-box .login-toggle-btn a{
  color: #ea1b25;
}
html.dark-mode .uc-contact-form{
  background: #1c1e23;
}
html.dark-mode .uc-feature{
  background: #1c1e23;
}
html.dark-mode .uc-card{
  background: #1c1e23;
}
html.dark-mode .uc-btn--white{
  color: #ea1b25 !important;
}
html.dark-mode .main-blog-slider-wrapper{
  background-color: var(--uc-surface);
}
html.dark-mode .testimonial-area .testimonial-slider-wrapper{
  background: var(--uc-surface);
}
html.dark-mode .testimonial-area .testimonial-slider-wrapper .testimonial-slider-item .testimonial-author h4{
  color: #fff;
}
html.dark-mode .brand-slider{
  background: var(--uc-surface);
}
html.dark-mode .shop-category-area .shop-top-bar .shop-tab{
  background: var(--uc-surface);
}
html.dark-mode .mobile-header .header-tools .cart-info a{
  color: red;
  background: var(--uc-surface);
}
html.dark-mode .live-search-box a{
  color: #ea1b25;
}
html.dark-mode .product-details-content .pro-details-quality .cart-plus-minus .qtybutton {
  color: #fff;
}

html.dark-mode .your-order-area .your-order-wrap .your-order-product-info .your-order-bottom ul li.your-order-shipping{
  color: #fff;
}
html.dark-mode .pay-info strong{
  color: #fff;
}

html.dark-mode .billing-info-wrap .billing-info label{
  color: #fff;
}
html.dark-mode .billing-info-wrap .billing-select label{
  color: #fff;
}
html.dark-mode .billing-info-wrap .additional-info-wrap h4{
  color: #fff;
}