/* Light Mode Overrides - Warm Brown Theme from light_section.css */

/* CSS Variables for Dark Mode (Default) */
:root {
  --bg-color: #151a21;
  --border-color: rgba(255, 255, 255, 0.1);
  --text-color: #ffffff;
  --hover-bg: rgba(247, 144, 9, 0.1);
  --accent-color: #f79009;
}

/* CSS Variables for Light Mode Colors */
body.light-mode {
  /* Header/Navigation Variables */
  --bg-color: #ffffff;
  --border-color: rgba(21, 26, 33, 0.1);
  --text-color: #151a21;
  --hover-bg: rgba(164, 133, 109, 0.1);
  --accent-color: #A4856D;
  
  /* Light Theme Variables */
  --bg-primary: #faf9f7;
  --bg-secondary: #f0ede8;
  --bg-tertiary: #f0ede8;
  --text-primary: #3c2e26;
  --text-secondary: #6b5b4f;
  --text-tertiary: #4a3d33;
  --accent-primary: #A4856D;
  --accent-secondary: #b8a082;
  --border-light: #d4c4b0;
  --border-dark: #b8a082;
  --glass-bg: rgba(255, 255, 255, 0.9);
  --shadow: rgba(164, 133, 109, 0.15);
  --shadow-strong: rgba(164, 133, 109, 0.3);
}

/* Body and Base Styles */
body.light-mode {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Header Styles */
body.light-mode .header {
  background-color: rgba(250, 249, 247, 0.8);
  border-bottom-color: rgba(212, 196, 176, 0.2);
  box-shadow: 0 4px 16px var(--shadow);
}

body.light-mode .header::after {
  background: rgba(164, 133, 109, 0.3);
}

/* Ticker Section */
body.light-mode .ticker-section {
  background: rgba(245, 243, 240, 0.8);
  border-bottom-color: rgba(212, 196, 176, 0.2);
}

body.light-mode .ticker-item {
  color: var(--text-secondary);
}

body.light-mode .ticker-text {
  background: linear-gradient(45deg, var(--text-secondary), var(--text-tertiary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .ticker-dot {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%);
  box-shadow: 0 0 12px var(--shadow-strong);
}

/* Breadcrumb active item - change from orange to brown */
body.light-mode .breadcrumb-item:last-child {
  color: var(--accent-primary);
}

/* Any accent colors that might be orange */
body.light-mode .accent-color,
body.light-mode .highlight-color {
  color: var(--accent-primary);
}

body.light-mode .accent-bg,
body.light-mode .highlight-bg {
  background-color: var(--accent-primary);
}

/* Main Header */
body.light-mode .main-header {
  background: rgba(250, 249, 247, 0.8);
}

body.light-mode .logo-link {
  color: var(--text-primary);
}

body.light-mode .nav-link {
  background: linear-gradient(45deg, var(--text-secondary), var(--text-tertiary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .nav-link:hover {
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .nav-link::after {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

/* Navigation Active States */
body.light-mode .nav-link.active {
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Any Header Buttons */
body.light-mode .header-button,
body.light-mode .header-cta {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  border-color: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 4px 16px var(--shadow-strong);
}

body.light-mode .header-button:hover,
body.light-mode .header-cta:hover {
  background: var(--accent-primary);
  box-shadow: 0 6px 16px var(--shadow-strong);
}

/* Header Icons that might be orange */
body.light-mode .header-icon,
body.light-mode .nav-icon {
  color: var(--text-secondary);
}

body.light-mode .header-icon:hover,
body.light-mode .nav-icon:hover {
  color: var(--accent-primary);
}

/* Search or other header elements */
body.light-mode .header-search,
body.light-mode .header-cart {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

body.light-mode .header-search:hover,
body.light-mode .header-cart:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Mega Menu */
body.light-mode .mega-menu-overlay {
  background: rgba(250, 249, 247, 0.7);
  backdrop-filter: blur(20px) saturate(1.5) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.1);
}

body.light-mode .mega-menu-overlay::before {
  background: linear-gradient(135deg, 
      rgba(250, 249, 247, 0.4) 0%,
      rgba(255, 255, 255, 0.3) 25%,
      rgba(250, 249, 247, 0.5) 50%,
      rgba(255, 255, 255, 0.3) 75%,
      rgba(250, 249, 247, 0.4) 100%
  );
}

/* Mega Menu Content */  
body.light-mode .mega-menu-container {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(164, 133, 109, 0.2);
  box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.light-mode .mega-menu-content {
  background: transparent;
}

body.light-mode .mega-menu-left {
  background: transparent;
}

body.light-mode .mega-menu-right {
  background: transparent;
}

/* Mega Menu Text */
body.light-mode .mega-menu-title {
  color: var(--text-primary);
}

body.light-mode .mega-menu-link {
  color: var(--text-secondary);
  background: transparent;
  border: none;
  transition: color 0.2s ease;
}

body.light-mode .mega-menu-link:hover {
  color: var(--text-primary);
  background: transparent;
  border: none;
  transform: none;
}

body.light-mode .mega-menu-category {
  background: transparent;
}

body.light-mode .mega-menu-list {
  background: transparent;
}

body.light-mode .mega-menu-list li {
  border-color: rgba(164, 133, 109, 0.1);
}

/* Mega Menu Showcase */
body.light-mode .mega-menu-showcase {
  background: transparent;
}

body.light-mode .mega-menu-image-container {
  background: var(--glass-bg);
  border-color: rgba(164, 133, 109, 0.2);
}

/* Mega Menu CTA */
body.light-mode .mega-menu-cta-button {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  border-color: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 4px 16px var(--shadow-strong);
}

body.light-mode .mega-menu-cta-button:hover {
  background: var(--accent-primary);
  box-shadow: 0 6px 16px var(--shadow-strong);
}

/* Hero Section */
body.light-mode .hero-section {
  background: var(--bg-primary);
}

body.light-mode .hero-overlay {
  background: var(--glass-bg);
  border-color: rgba(164, 133, 109, 0.2);
  box-shadow: 0 20px 40px var(--shadow), 0 8px 24px var(--shadow-strong);
}

/* Fabric Image - Invert colors and light shadow in light mode */
body.light-mode .fabric-image {
  filter: invert(1) brightness(1) contrast(1);
  opacity: 0.4;
}

/* Hero carousel images - Make them lighter in light mode */
body.light-mode .carousel-image {
  filter: brightness(1) contrast(1) saturate(1);
}

body.light-mode .hero-column-left::after {
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(164, 133, 109, 0.1) 20%,
    rgba(164, 133, 109, 0.2) 50%,
    rgba(164, 133, 109, 0.3) 80%,
    rgba(164, 133, 109, 0.4) 100%
  );
}

body.light-mode .hero-column-right::before {
  background: linear-gradient(to left, 
    transparent 0%, 
    rgba(164, 133, 109, 0.1) 20%,
    rgba(164, 133, 109, 0.2) 50%,
    rgba(164, 133, 109, 0.3) 80%,
    rgba(164, 133, 109, 0.4) 100%
  );
}

body.light-mode .hero-background::after {
  background: radial-gradient(ellipse at center, 
    rgba(164, 133, 109, 0.1) 0%,
    rgba(164, 133, 109, 0.05) 40%,
    transparent 70%
  );
}

body.light-mode .hero-subtitle {
  color: var(--accent-primary);
}

body.light-mode .hero-title-token {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .hero-description {
  color: var(--text-secondary);
}

body.light-mode .hero-button {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  box-shadow: 0 4px 16px var(--shadow-strong);
}

body.light-mode .hero-button:hover {
  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
  box-shadow: 0 8px 24px var(--shadow-strong);
}

/* Product Action Buttons - "Ürüne git" */
body.light-mode .light-action,
body.light-mode .product-action {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  box-shadow: 0 6px 20px var(--shadow-strong);
  border-color: var(--accent-primary);
}

body.light-mode .light-action:hover,
body.light-mode .product-action:hover {
  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
  box-shadow: 0 8px 24px var(--shadow-strong);
}

/* Other orange elements that should be brown */
body.light-mode .featured-badge {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  box-shadow: 0 4px 16px var(--shadow-strong);
  border-color: var(--accent-primary);
}

body.light-mode .featured-badge:hover {
  background: var(--accent-primary);
  box-shadow: 0 6px 16px var(--shadow-strong);
}

/* Any other orange buttons or elements */
body.light-mode .btn-primary,
body.light-mode .primary-button,
body.light-mode .cta-button {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  box-shadow: 0 4px 16px var(--shadow-strong);
  border-color: var(--accent-primary);
}

body.light-mode .btn-primary:hover,
body.light-mode .primary-button:hover,
body.light-mode .cta-button:hover {
  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
  box-shadow: 0 8px 24px var(--shadow-strong);
}

/* Main Content Areas */
body.light-mode .main-content {
  background-color: var(--bg-primary);
}

body.light-mode .new-arrivals-section {
  background: var(--bg-primary);
}

body.light-mode .new-arrivals-section::before {
  background: radial-gradient(ellipse at center, 
    rgba(164, 133, 109, 0.02) 0%,
    rgba(164, 133, 109, 0.01) 30%,
    transparent 70%
  );
}

/* Section Headers - Force complete transparency */
body.light-mode .section-title {
  color: var(--text-primary);
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

body.light-mode .section-subtitle {
  color: var(--text-secondary);
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

/* Remove pseudo-elements from section headers */
body.light-mode .section-title::before,
body.light-mode .section-title::after,
body.light-mode .section-subtitle::before,
body.light-mode .section-subtitle::after {
  display: none !important;
}

/* Global fix for any heading elements that might be solid */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-mode h1::before,
body.light-mode h1::after,
body.light-mode h2::before,
body.light-mode h2::after,
body.light-mode h3::before,
body.light-mode h3::after {
  display: none !important;
}

/* Light Touch Section Headers - Remove all visual effects */
body.light-mode .light-title {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-mode .light-subtitle {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* New Arrivals Section Headers - Remove all visual effects */
body.light-mode .new-arrivals-header,
body.light-mode .section-header {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Any section headers that might have backgrounds */
body.light-mode .header-container,
body.light-mode .section-container {
  background: transparent !important;
  box-shadow: none !important;
}

/* Product Cards - Force complete transparency */
body.light-mode .product-card {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-mode .product-card:hover {
  background: var(--glass-bg) !important;
  box-shadow: 0 12px 40px var(--shadow), 0 0 30px var(--shadow-strong) !important;
  border: 1px solid rgba(164, 133, 109, 0.4) !important;
}

/* Light Cards - Force complete transparency */
body.light-mode .light-card {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-mode .light-card:hover {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(164, 133, 109, 0.4) !important;
}

/* Remove any pseudo-elements from cards */
body.light-mode .product-card::before,
body.light-mode .product-card::after,
body.light-mode .light-card::before,
body.light-mode .light-card::after {
  display: none !important;
}

/* Card Info Areas - Keep Transparent */
body.light-mode .light-info,
body.light-mode .product-info,
body.light-mode .card-info {
  background: transparent;
}

body.light-mode .light-colors,
body.light-mode .product-colors {
  background: transparent;
}

body.light-mode .light-name,
body.light-mode .light-category {
  background: transparent;
}

/* Collection Headers and Containers */
body.light-mode .collection-header,
body.light-mode .category-header {
  background: transparent;
}

body.light-mode .collection-container,
body.light-mode .category-container {
  background: transparent;
}

/* Any other info containers that should be transparent */
body.light-mode .info-container,
body.light-mode .content-container,
body.light-mode .text-container {
  background: transparent;
}

body.light-mode .product-name {
  color: var(--text-primary);
}

body.light-mode .product-category {
  color: var(--text-secondary);
}

body.light-mode .product-card:hover .product-name {
  color: var(--text-primary);
}

body.light-mode .product-card:hover .product-category {
  color: var(--text-secondary);
}

/* Section Separators */
body.light-mode .section-separator {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(164, 133, 109, 0.2) 20%, 
    rgba(164, 133, 109, 0.4) 50%, 
    rgba(164, 133, 109, 0.2) 80%, 
    transparent 100%
  );
}

body.light-mode .light-section-separator {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(164, 133, 109, 0.2) 20%, 
    rgba(164, 133, 109, 0.4) 50%, 
    rgba(164, 133, 109, 0.2) 80%, 
    transparent 100%
  );
}

/* Footer - Same as Header */
body.light-mode .footer-section {
  background: rgba(250, 249, 247, 0.8);
  border-top-color: rgba(212, 196, 176, 0.2);
  box-shadow: 0 -4px 16px var(--shadow);
  color: var(--text-primary);
}

/* Keep normal divider - don't override ::before */

/* Footer Text Colors - Same as Header */
body.light-mode .footer-section h3,
body.light-mode .footer-section h4,
body.light-mode .footer-title {
  color: var(--text-primary);
}

body.light-mode .footer-section p,
body.light-mode .footer-section span,
body.light-mode .footer-text {
  color: var(--text-secondary);
}

body.light-mode .footer-section a {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

body.light-mode .footer-section a:hover {
  color: var(--accent-primary);
}

body.light-mode .footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

body.light-mode .footer-link:hover {
  color: var(--accent-primary);
}

body.light-mode .footer-brand {
  color: var(--text-primary);
}

body.light-mode .footer-description {
  color: var(--text-secondary);
}

/* Social links and icons */
body.light-mode .social-links a {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

body.light-mode .social-links a:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Copyright text */
body.light-mode .footer-bottom,
body.light-mode .copyright {
  color: var(--text-secondary);
  border-top-color: rgba(212, 196, 176, 0.2);
}

/* Scrollbar */
body.light-mode ::-webkit-scrollbar-track {
  background: rgba(164, 133, 109, 0.1);
}

body.light-mode ::-webkit-scrollbar-thumb {
  background: rgba(164, 133, 109, 0.4);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(164, 133, 109, 0.6);
}

body.light-mode ::-webkit-scrollbar-thumb:active {
  background: var(--accent-primary);
}

/* Light Mode Toggle Button */
.light-mode-toggle {
  background: var(--glass-bg);
  border: 2px solid rgba(164, 133, 109, 0.3);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px var(--shadow);
  margin-left: 20px;
}

.light-mode-toggle:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow-strong);
}

.light-mode-toggle .toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.light-mode-toggle:hover .toggle-icon {
  transform: rotate(20deg);
}

/* Dark mode toggle button styles (when in dark mode) */
body:not(.light-mode) .light-mode-toggle {
  background: rgba(13, 17, 23, 0.8);
  border: 2px solid rgba(125, 133, 144, 0.3);
  color: rgba(240, 246, 252, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body:not(.light-mode) .light-mode-toggle:hover {
  border-color: #ff6b35;
  background: #ff6b35;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Override any remaining orange elements in light mode */
body.light-mode .orange-element,
body.light-mode .orange-button,
body.light-mode .orange-accent {
  background: var(--accent-primary);
  color: #ffffff;
}

body.light-mode .orange-element:hover,
body.light-mode .orange-button:hover,
body.light-mode .orange-accent:hover {
  background: var(--accent-secondary);
}

/* Catch-all for any orange colors that might still exist */
body.light-mode [style*="color: #ff6b35"],
body.light-mode [style*="color: #ff8c42"],
body.light-mode [style*="color: #ff5722"] {
  color: var(--accent-primary) !important;
}

body.light-mode [style*="background: #ff6b35"],
body.light-mode [style*="background: #ff8c42"],
body.light-mode [style*="background: #ff5722"] {
  background: var(--accent-primary) !important;
}

body.light-mode [style*="background-color: #ff6b35"],
body.light-mode [style*="background-color: #ff8c42"],
body.light-mode [style*="background-color: #ff5722"] {
  background-color: var(--accent-primary) !important;
}

/* Any text that might be orange from CSS classes */
body.light-mode .text-orange,
body.light-mode .color-orange,
body.light-mode .orange-text {
  color: var(--accent-primary) !important;
}

body.light-mode .bg-orange,
body.light-mode .background-orange,
body.light-mode .orange-bg {
  background-color: var(--accent-primary) !important;
}

/* Collection Hero Overrides */
body.light-mode .collection-hero-section {
  background: var(--bg-secondary);
}

body.light-mode .collection-hero-title {
  color: #ffffff;
  text-shadow: 0 2px 8px var(--shadow);
  filter: none; /* Ensure ÖZEL KOLEKSİYON text is not inverted */
}

/* Dark Boxes Section */
body.light-mode .dark-boxes-section {
  background: var(--bg-secondary);
}

/* Featured Collections */
body.light-mode .featured-collections-section {
  background: var(--bg-primary);
}

/* Light Touch Section - Fix Transparency Issues */
body.light-mode .light-touch-section {
  /* Keep existing light section styles but ensure transparent elements stay transparent */
}

body.light-mode .light-touch-container {
  background: transparent !important;
  box-shadow: none !important;
}

body.light-mode .light-header {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove all pseudo-element effects */
body.light-mode .light-header::before,
body.light-mode .light-header::after {
  display: none !important;
}

body.light-mode .light-touch-section .section-title,
body.light-mode .light-touch-section .section-subtitle {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Target the specific titles that are appearing solid */
body.light-mode .light-touch-section .light-title,
body.light-mode .light-touch-section .light-subtitle {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

body.light-mode .light-touch-section .light-title::before,
body.light-mode .light-touch-section .light-title::after,
body.light-mode .light-touch-section .light-subtitle::before,
body.light-mode .light-touch-section .light-subtitle::after {
  display: none !important;
}

/* Filter buttons should be transparent by default */
body.light-mode .filter-buttons {
  background: transparent;
}

/* Grid containers should be transparent */
body.light-mode .light-grid {
  background: transparent;
}

body.light-mode .products-scroll-container {
  background: transparent;
}

/* General transparency fixes for any other problematic elements */
body.light-mode .wrapper,
body.light-mode .inner-wrapper,
body.light-mode .content-wrapper {
  background: transparent;
}

body.light-mode .title-wrapper,
body.light-mode .subtitle-wrapper,
body.light-mode .text-wrapper {
  background: transparent;
}

/* Ensure divs that should blend with background are transparent */
body.light-mode div.transparent,
body.light-mode .transparent-bg,
body.light-mode .no-bg {
  background: transparent !important;
}

/* Product Page Overrides */
body.light-mode .product-section {
  background: var(--bg-primary);
}

body.light-mode .breadcrumb-section {
  background: var(--bg-secondary);
  border-bottom-color: rgba(164, 133, 109, 0.3);
}

body.light-mode .breadcrumb-item {
  color: var(--text-secondary);
}

body.light-mode .breadcrumb-item:hover {
  color: var(--text-primary);
}

body.light-mode .breadcrumb-item:last-child {
  color: var(--accent-primary);
}

/* Product Layout Elements */
body.light-mode .product-container {
  background: var(--bg-primary);
}

body.light-mode .product-layout {
  background: var(--bg-primary);
}

/* Product Variants */
body.light-mode .product-variants {
  background: var(--bg-primary);
  border-right-color: rgba(164, 133, 109, 0.3);
}

body.light-mode .variant-item {
  background: transparent;
  border-color: rgba(164, 133, 109, 0.2);
}

body.light-mode .variant-item.active {
  background: var(--glass-bg);
  border-color: var(--accent-primary);
}

body.light-mode .variant-item:hover {
  background: var(--glass-bg);
  border-color: var(--accent-secondary);
}

body.light-mode .variant-label {
  color: var(--text-secondary);
}

body.light-mode .variant-item.active .variant-label {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Product Image Main */
body.light-mode .product-image-main {
  background: var(--bg-primary);
}

body.light-mode .image-container {
  background: var(--bg-primary);
}

body.light-mode .image-dots {
  background: transparent;
}

body.light-mode .image-dot {
  background: rgba(164, 133, 109, 0.3);
  border-color: rgba(164, 133, 109, 0.3);
}

body.light-mode .image-dot.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

body.light-mode .image-dot:hover {
  background: var(--accent-secondary);
}

/* Product Details */
body.light-mode .product-details {
  background: var(--bg-primary);
}

body.light-mode .product-info {
  background: var(--bg-primary);
}

body.light-mode .product-price {
  color: var(--text-primary);
}

body.light-mode .product-description {
  color: var(--text-secondary);
}

/* Product Options */
body.light-mode .product-options {
  background: transparent;
}

body.light-mode .options-title {
  color: var(--text-primary);
}

body.light-mode .color-option {
  background: transparent;
  border-color: rgba(164, 133, 109, 0.2);
}

body.light-mode .color-option:hover {
  background: var(--glass-bg);
  border-color: var(--accent-primary);
}

body.light-mode .color-option.selected {
  background: var(--glass-bg);
  border-color: var(--accent-primary);
}

body.light-mode .color-name {
  color: var(--text-secondary);
}

body.light-mode .color-option:hover .color-name,
body.light-mode .color-option.selected .color-name {
  color: var(--accent-primary);
}

/* Cup and Size Options */
body.light-mode .cup-option,
body.light-mode .size-option {
  background: transparent;
  border: 2px solid rgba(164, 133, 109, 0.3);
  color: var(--text-secondary);
}

body.light-mode .cup-option:hover,
body.light-mode .size-option:hover {
  background: var(--glass-bg);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

body.light-mode .cup-option.selected,
body.light-mode .size-option.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

/* Cup-Size Relationship Light Mode Styles */
body.light-mode .size-option.disabled {
  background: rgba(164, 133, 109, 0.05);
  border-color: rgba(164, 133, 109, 0.15);
  color: rgba(139, 148, 158, 0.4);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

body.light-mode .size-option.disabled:hover {
  transform: none;
  background: rgba(164, 133, 109, 0.05);
  border-color: rgba(164, 133, 109, 0.15);
  color: rgba(139, 148, 158, 0.4);
}

body.light-mode .size-option.available {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.05);
}

body.light-mode .size-option.available:hover {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.1);
}

body.light-mode .size-option.mutual::after {
  background: rgba(34, 197, 94, 1);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

body.light-mode .size-option.limited::after {
  background: rgba(234, 179, 8, 1);
  box-shadow: 0 0 4px rgba(234, 179, 8, 0.6);
}

/* Product Sections */
body.light-mode .product-section-item {
  background: transparent;
  border-color: rgba(164, 133, 109, 0.2);
}

body.light-mode .section-header {
  background: var(--glass-bg);
  border-color: rgba(164, 133, 109, 0.2);
}

body.light-mode .section-title {
  color: var(--text-primary);
}

body.light-mode .section-arrow {
  color: var(--text-secondary);
}

body.light-mode .section-content {
  background: var(--bg-primary);
  color: var(--text-secondary);
}

body.light-mode .section-content p {
  color: var(--text-secondary);
}

/* Mobile Variant Lines */
body.light-mode .mobile-variant-line {
  background: rgba(164, 133, 109, 0.3);
}

body.light-mode .mobile-variant-line.active {
  background: var(--accent-primary);
}

body.light-mode .mobile-variant-line:hover {
  background: var(--accent-secondary);
}

/* Category Page Overrides */
body.light-mode .category-section {
  /* Keep existing category section styles since they already use the light theme */
}

/* Header Ticker Fade Effects for Light Mode */
body.light-mode .ticker-fade-left {
  background: linear-gradient(
    to right,
    rgba(245, 243, 240, 0.8) 0%,
    rgba(245, 243, 240, 0.8) 20%,
    rgba(245, 243, 240, 0.7) 40%,
    rgba(245, 243, 240, 0.5) 60%,
    rgba(245, 243, 240, 0.3) 80%,
    transparent 100%
  );
}

body.light-mode .ticker-fade-right {
  background: linear-gradient(
    to left,
    rgba(245, 243, 240, 0.8) 0%,
    rgba(245, 243, 240, 0.8) 20%,
    rgba(245, 243, 240, 0.7) 40%,
    rgba(245, 243, 240, 0.5) 60%,
    rgba(245, 243, 240, 0.3) 80%,
    transparent 100%
  );
}

/* Header Mega Menu Scrollbar for Light Mode */
body.light-mode .mega-menu-scroll-container:hover::-webkit-scrollbar-track {
  background: rgba(245, 243, 240, 0.8);
}

body.light-mode .scroll-hint {
  background: linear-gradient(90deg, transparent, rgba(245, 243, 240, 0.9), transparent);
  color: var(--text-secondary);
}

/* Header Subcategory Menu for Light Mode */
body.light-mode .subcategory-menu {
  background: rgba(21, 26, 33, 0.03);
}

body.light-mode .subcategory-link {
  color: #151a21;
}

body.light-mode .subcategory-link:hover {
  background: rgba(247, 144, 9, 0.1);
  color: #f79009;
}

/* Header Search and Actions for Light Mode */
body.light-mode .search-input-container {
  background: rgba(245, 243, 240, 0.95);
  border-color: rgba(21, 26, 33, 0.1);
}

body.light-mode .search-trigger,
body.light-mode .header-light-toggle {
  background: rgba(21, 26, 33, 0.05);
  border-color: rgba(21, 26, 33, 0.1);
}

body.light-mode .search-trigger:hover,
body.light-mode .header-light-toggle:hover {
  background: rgba(247, 144, 9, 0.1);
  border-color: var(--accent-color);
}

body.light-mode .search-input::placeholder {
  color: rgba(21, 26, 33, 0.5);
}

body.light-mode .nav-more-dropdown {
  background: rgba(245, 243, 240, 0.95);
  border-color: rgba(21, 26, 33, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .light-mode-toggle {
    padding: 6px 10px;
    font-size: 0.8rem;
    margin-left: 10px;
  }
  
  .light-mode-toggle .toggle-icon {
    width: 14px;
    height: 14px;
  }
}