html.fashion01-dark {
  --fashion01-dark: #e0e0e0;
  --fashion01-gray: #1e1e1e;
  --fashion01-border: #333333;
}

html.fashion01-dark body {
  background-color: #121212;
  color: #e0e0e0;
}

html.fashion01-dark #header,
html.fashion01-dark .tf-sticky-header {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

html.fashion01-dark .header-nav .header-nav-menu,
html.fashion01-dark .header-nav .down-arrow {
  color: #e0e0e0 !important;
}

html.fashion01-dark #header .border-b {
  border-color: #333 !important;
}

html.fashion01-dark .nav-icon > ul a,
html.fashion01-dark .nav-icon > ul button {
  color: #e0e0e0 !important;
}

/* Announcement bar stays dark (already dark by default) */

/* Category dropdown */
html.fashion01-dark .shadow-paper {
  background-color: #1e1e1e !important;
}

html.fashion01-dark .shadow-paper nav a,
html.fashion01-dark .shadow-paper h3,
html.fashion01-dark .shadow-paper h3 a {
  color: #e0e0e0 !important;
}

html.fashion01-dark .shadow-paper .border-t,
html.fashion01-dark .shadow-paper .border-b,
html.fashion01-dark .shadow-paper .border-slate-200 {
  border-color: #333 !important;
}

/* Account dropdowns */
html.fashion01-dark .group .absolute.bg-white {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

html.fashion01-dark .group .absolute .border-\[\#e5e5e5\] {
  border-color: #333 !important;
}

html.fashion01-dark .group .absolute a,
html.fashion01-dark .group .absolute p,
html.fashion01-dark .group .absolute button {
  color: #e0e0e0 !important;
}

html.fashion01-dark .group .absolute a:hover,
html.fashion01-dark .group .absolute button:hover {
  background-color: #2a2a2a !important;
}

/* Search overlay */
html.fashion01-dark #search {
  background-color: #1e1e1e !important;
  color: #e0e0e0;
}

html.fashion01-dark #search input {
  background-color: transparent;
  color: #e0e0e0;
}

html.fashion01-dark #search .border-gray-200 {
  border-color: #444 !important;
}

html.fashion01-dark #search .bg-gray-50 {
  background-color: #2a2a2a !important;
}

html.fashion01-dark #search li {
  border-color: #333 !important;
  color: #e0e0e0;
}

/* Cards / product cards */
html.fashion01-dark .card-product,
html.fashion01-dark .tf-product-card {
  background-color: #2a2a2a !important;
  border-color: #333 !important;
}

html.fashion01-dark .card-product .name,
html.fashion01-dark .card-product .price,
html.fashion01-dark .tf-product-card .name,
html.fashion01-dark .tf-product-card .price {
  color: #e0e0e0 !important;
}

html.fashion01-dark .price-old {
  color: #888 !important;
}

/* General text */
html.fashion01-dark h1,
html.fashion01-dark h2,
html.fashion01-dark h3,
html.fashion01-dark h4,
html.fashion01-dark h5,
html.fashion01-dark h6 {
  color: #e0e0e0;
}

html.fashion01-dark p {
  color: #ccc;
}

/* Footer */
html.fashion01-dark footer,
html.fashion01-dark .footer-style-1,
html.fashion01-dark [class*="footer"] {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: #ccc;
}

html.fashion01-dark footer a,
html.fashion01-dark .footer-style-1 a {
  color: #ccc !important;
}

html.fashion01-dark footer a:hover,
html.fashion01-dark .footer-style-1 a:hover {
  color: #fff !important;
}

html.fashion01-dark footer h5,
html.fashion01-dark footer h6,
html.fashion01-dark .footer-style-1 h5,
html.fashion01-dark .footer-style-1 h6 {
  color: #e0e0e0 !important;
}

/* Marquee / announcement strips */
html.fashion01-dark .tf-marquee {
  background-color: #1a1a1a !important;
  color: #ccc;
}

html.fashion01-dark .marquee-item {
  color: #ccc !important;
}

/* Icon boxes (benefit section) */
html.fashion01-dark .tf-icon-box {
  background-color: #2a2a2a !important;
  border-color: #333 !important;
}

html.fashion01-dark .tf-icon-box .title,
html.fashion01-dark .tf-icon-box .sub-title {
  color: #e0e0e0 !important;
}

/* Sidebars / offcanvas */
html.fashion01-dark .canvas-mb,
html.fashion01-dark .offcanvas,
html.fashion01-dark .tf-mini-cart,
html.fashion01-dark #mobile-sidebar-canvas {
  background-color: #1e1e1e !important;
  color: #e0e0e0;
}

html.fashion01-dark .tf-mini-cart .title,
html.fashion01-dark .canvas-mb .title {
  color: #e0e0e0 !important;
}

html.fashion01-dark .tf-mini-cart .border-b,
html.fashion01-dark .canvas-mb .border-b {
  border-color: #333 !important;
}

/* Borders / dividers */
html.fashion01-dark .border,
html.fashion01-dark .border-b,
html.fashion01-dark .border-t {
  border-color: #333 !important;
}

/* Inputs */
html.fashion01-dark input:not([type="radio"]):not([type="checkbox"]),
html.fashion01-dark textarea,
html.fashion01-dark select {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

html.fashion01-dark .focus\:border-\[\#1a1a1a\]:focus,
html.fashion01-dark .focus-within\:border-\[\#1a1a1a\]:focus-within {
  border-color: #888 !important;
}


/* Phone country code dropdown */
html.fashion01-dark .dropdown-list {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
}

html.fashion01-dark .dropdown-list li {
  color: #e0e0e0 !important;
}

/* vue-select dropdown */
html.fashion01-dark .vue-select {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

html.fashion01-dark .vue-input input {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

html.fashion01-dark .vue-dropdown {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
}

html.fashion01-dark .vue-dropdown-item {
  color: #e0e0e0 !important;
}

html.fashion01-dark .vue-dropdown-item.highlighted,
html.fashion01-dark .vue-dropdown-item:hover {
  background-color: #2a2a2a !important;
}

html.fashion01-dark .vue-dropdown-item.selected,
html.fashion01-dark .vue-dropdown-item.selected.highlighted {
  background-color: #333 !important;
  color: #e0e0e0 !important;
}

/* Buttons outline */
html.fashion01-dark .btn-outline {
  border-color: #555 !important;
  color: #e0e0e0 !important;
}

html.fashion01-dark .btn-outline:hover {
  background-color: #333 !important;
}

/* Swiper pagination */
html.fashion01-dark .swiper-pagination-bullet {
  background: #666 !important;
}

html.fashion01-dark .swiper-pagination-bullet-active {
  background: #e0e0e0 !important;
}

/* Sections with bg-white or bg-gray */
html.fashion01-dark .bg-white {
  background-color: #1e1e1e !important;
}

html.fashion01-dark .bg-\[\#f5f5f5\],
html.fashion01-dark .bg-\[\#f9f9f9\],
html.fashion01-dark .bg-gray-50,
html.fashion01-dark .bg-gray-100 {
  background-color: #2a2a2a !important;
}

html.fashion01-dark .text-\[\#1a1a1a\] {
  color: #e0e0e0 !important;
}

html.fashion01-dark .text-heading {
  color: #e0e0e0 !important;
}

/* Hover overrides */
html.fashion01-dark .hover\:bg-\[\#f5f5f5\]:hover,
html.fashion01-dark .hover\:bg-\[\#f9f9f9\]:hover,
html.fashion01-dark .hover\:bg-white:hover {
  background-color: #2a2a2a !important;
}

html.fashion01-dark .hover\:bg-red-50:hover {
  background-color: #3b1a1a !important;
}

html.fashion01-dark .hover\:text-red-500:hover {
  color: #f87171 !important;
}

/* Border colour overrides */
html.fashion01-dark .border-\[\#e5e5e5\] {
  border-color: #444 !important;
}

html.fashion01-dark .border-gray-100,
html.fashion01-dark .md\:border-gray-100,
html.fashion01-dark .border-slate-100 {
  border-color: #333 !important;
}

/* Filter sidebar */
html.fashion01-dark .db-field-control {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

html.fashion01-dark .cs-custom-radio::before,
html.fashion01-dark .cs-custom-checkbox::before {
  border-color: #666 !important;
  background-color: #2a2a2a !important;
}

html.fashion01-dark .simple-range-slider-bg-bar {
  background: #444 !important;
}

html.fashion01-dark .simple-range-slider-handle {
  background: #e0e0e0 !important;
  border-color: #aaa !important;
}

html.fashion01-dark .border-\[\#1a1a1a\] {
  border-color: #e0e0e0 !important;
}

/* Loader overlay */
html.fashion01-dark .velmld-overlay {
  background-color: #121212 !important;
}

html.fashion01-dark .text-gray-800 {
  color: #e0e0e0 !important;
}


html.fashion01-dark .bg-\[\#f2f2f2\] {
  background-color: #3a3a3a !important;
}

html.fashion01-dark .bg-\[\#F7F7FC\] {
  background-color: #2a2a2a !important;
}

html.fashion01-dark .text-secondary {
  color: #e0e0e0 !important;
}

html.fashion01-dark .hover\:bg-black:hover {
  background-color: #666 !important;
}

html.fashion01-dark .bg-\[\#1a1a1a\] {
  background-color: #3a3a3a !important;
}

html.fashion01-dark .bg-gray-900 {
  background-color: #3a3a3a !important;
}

html.fashion01-dark .hover\:bg-gray-700:hover {
  background-color: #4a4a4a !important;
}

html.fashion01-dark .text-gray-600 {
  color: #aaa !important;
}

html.fashion01-dark .text-gray-500,
html.fashion01-dark .text-gray-400 {
  color: #999 !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  color: #1a1a1a;
  transition: color 0.2s;
}

html.fashion01-dark .dark-mode-toggle {
  color: #e0e0e0;
}

/* Cookie popup */
html.fashion01-dark .shadow-cookies {
  background-color: #1e1e1e !important;
}

html.fashion01-dark .shadow-cookies h3,
html.fashion01-dark .shadow-cookies p,
html.fashion01-dark .shadow-cookies .text-heading {
  color: #e0e0e0 !important;
}

html.fashion01-dark .shadow-cookies button.bg-white {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Product card text */
html.fashion01-dark .text-black {
  color: #e0e0e0 !important;
}

html.fashion01-dark .hover\:text-gray-600:hover {
  color: #bbb !important;
}

html.fashion01-dark .text-gray-400 {
  color: #888 !important;
}

html.fashion01-dark .text-gray-500 {
  color: #999 !important;
}

/* Benefit section text */
html.fashion01-dark .border-\[\#ececec\] {
  border-color: #333 !important;
  background-color: #2a2a2a;
}

html.fashion01-dark .text-gray-500.leading-snug {
  color: #aaa !important;
}

html.fashion01-dark .text-text {
  color: #aaa !important;
}

html.fashion01-dark .hover\:text-\[\#1a1a1a\]:hover {
  color: #e0e0e0 !important;
}