/**
 * ZH&WunschWerk - Seasonal Storefront Theme & Visual System
 * Dynamic presentation engine for holidays, seasons and retail events
 */

:root {
  --theme-accent: #C29958;
  --theme-accent-hover: #B47C28;
  --theme-accent-light: #FAF2E6;
  --theme-bg-warm: #FAF8F5;
  --theme-badge-bg: #FAF2E6;
  --theme-badge-color: #B47C28;
}

/* Seasonal Top Announcement Bar */
.seasonal-announcement-bar {
  background: var(--theme-accent);
  color: #FFFFFF;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1001;
  letter-spacing: 0.02em;
  transition: background 0.3s ease;
}

.seasonal-announcement-bar a {
  color: #FFFFFF;
  text-decoration: underline;
  margin-left: 6px;
  font-weight: 800;
}

/* Seasonal Hero Video Decoration */
.seasonal-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  background: #000000;
}

.seasonal-video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

.seasonal-video-wrapper .video-fallback-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .seasonal-video-wrapper video {
    display: none !important;
  }
  .seasonal-video-wrapper .video-fallback-img {
    display: block !important;
  }
}

/* Seasonal Highlight Badge */
.seasonal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--theme-badge-bg);
  color: var(--theme-badge-color);
  border: 1px solid rgba(180, 124, 40, 0.15);
  margin-bottom: 12px;
}

/* Seasonal Preview Mode Banner */
.theme-preview-banner {
  background: #FEF3C7;
  border-bottom: 2px solid #F59E0B;
  color: #92400E;
  padding: 10px 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.theme-preview-banner .btn-exit-preview {
  background: #92400E;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Future Advertising Placements Container */
.zh-ad-placement {
  width: 100%;
  margin: 32px 0;
  clear: both;
}

.zh-ad-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zh-ad-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
}

.zh-ad-media {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 8px;
}

.zh-ad-media-video {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 8px;
}

.zh-ad-headline {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.zh-ad-text {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.zh-ad-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: var(--color-accent, #C29958);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.2s;
}

.zh-ad-cta-btn:hover {
  filter: brightness(0.92);
}

/* ==========================================================================
   SEASONAL ATMOSPHERE & VISUAL TRANSFORMATION LAYER
   ========================================================================== */

/* 1. Root Tokens & Dynamic Colors */
:root {
  --theme-accent-rgb: 194, 153, 88;
  --theme-bg-dark: #0B0E14;
  --theme-card-dark: #151A24;
  --theme-border-dark: rgba(255, 255, 255, 0.1);
}

/* 2. Atmospheric Layer Container (SVGs & Particles) */
#seasonalAtmosphereLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.seasonal-decor-svg {
  position: absolute;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.5s ease;
}

/* Keyframes for subtle atmospheric effects */
@keyframes seasonalFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes seasonalTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.95; transform: scale(1.08); }
}

@keyframes seasonalFog {
  0% { transform: translateX(-2%); }
  50% { transform: translateX(2%); }
  100% { transform: translateX(-2%); }
}

@keyframes seasonalPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(var(--theme-accent-rgb), 0.25); }
  50% { box-shadow: 0 0 28px rgba(var(--theme-accent-rgb), 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-decor-svg,
  .seasonal-animated {
    animation: none !important;
    transition: none !important;
  }
}

/* Intensity Scaling */
body[data-intensity="subtle"] #seasonalAtmosphereLayer .seasonal-decor-extra {
  display: none !important;
}

body[data-intensity="subtle"] #hero .hero-visual-wrapper {
  box-shadow: none !important;
}

/* ==========================================================================
   3. HERO COMPOSITION LAYOUTS
   ========================================================================== */

/* A. Dark Editorial Hero */
body[data-hero-layout="dark_editorial"] #hero.hero-section {
  background: radial-gradient(circle at 75% 25%, rgba(var(--theme-accent-rgb), 0.14) 0%, rgba(15, 17, 26, 0.98) 45%, #08090E 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

body[data-hero-layout="dark_editorial"] #hero #dynHeroTitle {
  color: #FFFFFF !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.65);
}

body[data-hero-layout="dark_editorial"] #hero #dynHeroSubtitle {
  color: #CBD5E1 !important;
}

body[data-hero-layout="dark_editorial"] #hero .micro-trust-item {
  color: #CBD5E1 !important;
}

body[data-hero-layout="dark_editorial"] #hero .micro-trust-item .icon {
  color: var(--color-accent) !important;
}

body[data-hero-layout="dark_editorial"] #hero .hero-visual-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(var(--theme-accent-rgb), 0.35);
  border: 1.5px solid rgba(var(--theme-accent-rgb), 0.35);
}

body[data-hero-layout="dark_editorial"] #hero .hero-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px);
}

body[data-hero-layout="dark_editorial"] #hero .hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: var(--color-accent) !important;
}

/* B. Centered Seasonal Hero */
body[data-hero-layout="centered_seasonal"] #hero .hero-grid {
  grid-template-columns: 1fr !important;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

body[data-hero-layout="centered_seasonal"] #hero .hero-content {
  align-items: center;
  text-align: center;
}

body[data-hero-layout="centered_seasonal"] #hero .hero-tag {
  margin-left: auto;
  margin-right: auto;
}

body[data-hero-layout="centered_seasonal"] #hero .hero-actions {
  justify-content: center;
}

body[data-hero-layout="centered_seasonal"] #hero .hero-micro-trust {
  justify-content: center;
  flex-wrap: wrap;
}

body[data-hero-layout="centered_seasonal"] #hero .hero-visual {
  margin-top: 36px;
  max-width: 620px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body[data-hero-layout="centered_seasonal"] #hero .hero-visual-wrapper {
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

/* C. Full Image / Visual Banner Hero */
body[data-hero-layout="full_image"] #hero.hero-section {
  padding: 80px 0;
  position: relative;
  background: #09090B !important;
  overflow: hidden;
}

body[data-hero-layout="full_image"] #hero .hero-grid {
  grid-template-columns: 1fr !important;
  position: relative;
  z-index: 2;
}

body[data-hero-layout="full_image"] #hero .hero-content {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 640px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

body[data-hero-layout="full_image"] #hero #dynHeroTitle {
  color: #FFFFFF !important;
}

body[data-hero-layout="full_image"] #hero #dynHeroSubtitle {
  color: #CBD5E1 !important;
}

body[data-hero-layout="full_image"] #hero .micro-trust-item {
  color: #CBD5E1 !important;
}

body[data-hero-layout="full_image"] #hero .hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.42;
  overflow: hidden;
  pointer-events: none;
}

body[data-hero-layout="full_image"] #hero .hero-visual-wrapper,
body[data-hero-layout="full_image"] #hero .hero-visual-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ==========================================================================
   4. SECTION BACKGROUNDS & ATMOSPHERE
   ========================================================================== */

/* A. Dark Immersive Sections (Halloween Dark, Xmas Gold Navy, Black Friday) */
body[data-section-style="dark_immersive"] {
  background-color: var(--theme-bg-dark, #0B0E14) !important;
  color: #F1F5F9;
}

body[data-section-style="dark_immersive"] .site-header {
  background: rgba(11, 14, 20, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-section-style="dark_immersive"] .site-header .nav-link,
body[data-section-style="dark_immersive"] .site-header .header-action-btn {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .site-header .nav-link:hover,
body[data-section-style="dark_immersive"] .site-header .header-action-btn:hover {
  color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .usp-bar {
  background-color: #0F131C !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-section-style="dark_immersive"] .usp-card {
  background-color: #161B26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1;
}

body[data-section-style="dark_immersive"] .usp-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 4px 18px rgba(var(--theme-accent-rgb), 0.25);
}

body[data-section-style="dark_immersive"] .usp-icon-wrap {
  background-color: rgba(var(--theme-accent-rgb), 0.16) !important;
  color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .usp-content h4 {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .usp-content p {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .shop-section,
body[data-section-style="dark_immersive"] .steps-section,
body[data-section-style="dark_immersive"] .b2b-section,
body[data-section-style="dark_immersive"] #kategorien,
body[data-section-style="dark_immersive"] #bestseller,
body[data-section-style="dark_immersive"] #anlaesse,
body[data-section-style="dark_immersive"] #techniken {
  background-color: var(--theme-bg-dark, #0B0E14) !important;
  color: #F1F5F9;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .section-head .section-title,
body[data-section-style="dark_immersive"] .section-title,
body[data-section-style="dark_immersive"] .b2b-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .section-head .section-desc,
body[data-section-style="dark_immersive"] .section-desc,
body[data-section-style="dark_immersive"] .b2b-text {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .step-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

body[data-section-style="dark_immersive"] .step-card:hover {
  border-color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .step-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .step-desc {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .step-icon-wrap {
  background-color: rgba(var(--theme-accent-rgb), 0.16) !important;
  color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .workshop-spotlight {
  background: linear-gradient(135deg, #151A24 0%, #1A2333 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body[data-section-style="dark_immersive"] .workshop-spotlight-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .workshop-spotlight-text {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .occasion-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .occasion-card:hover {
  border-color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .occasion-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .occasion-desc {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .technique-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .technique-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .technique-desc {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .b2b-section {
  background: linear-gradient(180deg, #0F131C 0%, #0B0E14 100%) !important;
}

body[data-section-style="dark_immersive"] .b2b-feature-item {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .bestseller-tabs .tab-btn {
  background: #161B26 !important;
  color: #CBD5E1 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body[data-section-style="dark_immersive"] .bestseller-tabs .tab-btn.active {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .site-footer {
  background-color: #07090E !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* B. Seasonal Panels (Alternating Colored Atmospheric Panels) */
body[data-section-style="seasonal_panels"] #hero.hero-section {
  background: var(--theme-bg-warm, #FAF8F5) !important;
}

body[data-section-style="seasonal_panels"] .usp-bar {
  background: #FFFFFF !important;
  border-bottom: 2px solid var(--color-accent);
}

body[data-section-style="seasonal_panels"] #kategorien {
  background: var(--theme-bg-warm, #FAF8F5) !important;
}

body[data-section-style="seasonal_panels"] .steps-section {
  background: #FFFFFF !important;
}

body[data-section-style="seasonal_panels"] #anlaesse {
  background: var(--theme-bg-warm, #FAF8F5) !important;
}

body[data-section-style="seasonal_panels"] #bestseller {
  background: #FFFFFF !important;
}

body[data-section-style="seasonal_panels"] .b2b-section {
  background: var(--theme-bg-warm, #FAF8F5) !important;
}

/* C. Alternating Clean */
body[data-section-style="alternating"] #hero.hero-section {
  background: #FAF8F5 !important;
}

body[data-section-style="alternating"] #kategorien {
  background: #FFFFFF !important;
}

body[data-section-style="alternating"] .steps-section {
  background: var(--theme-bg-warm, #FAF8F5) !important;
}

/* ==========================================================================
   5. CARD STYLING VARIATIONS
   ========================================================================== */

/* A. Dark Premium Cards */
body[data-card-style="dark_premium"] .category-card,
body[data-card-style="dark_premium"] .product-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

body[data-card-style="dark_premium"] .category-card .category-name,
body[data-card-style="dark_premium"] .category-card .category-name span,
body[data-card-style="dark_premium"] .category-card .category-title,
body[data-card-style="dark_premium"] .product-card .product-title {
  color: #F8FAFC !important;
}

body[data-card-style="dark_premium"] .category-card .category-desc,
body[data-card-style="dark_premium"] .category-card .category-meta {
  color: #94A3B8 !important;
}

body[data-card-style="dark_premium"] .category-card .category-media {
  background-color: #0B0E14 !important;
}

body[data-card-style="dark_premium"] .category-card:hover,
body[data-card-style="dark_premium"] .product-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 26px rgba(var(--theme-accent-rgb), 0.35) !important;
  transform: translateY(-4px);
}

body[data-card-style="dark_premium"] .product-card .product-price {
  color: var(--color-accent) !important;
}

/* B. Decorative Cards */
body[data-card-style="decorative"] .category-card,
body[data-card-style="decorative"] .product-card,
body[data-card-style="decorative"] .step-card {
  border-top: 3.5px solid var(--color-accent) !important;
  border-radius: 14px;
}

body[data-card-style="decorative"] .category-card:hover,
body[data-card-style="decorative"] .product-card:hover {
  box-shadow: 0 10px 25px rgba(var(--theme-accent-rgb), 0.25);
  transform: translateY(-4px);
}

/* C. Soft Seasonal Cards */
body[data-card-style="soft_seasonal"] .category-card,
body[data-card-style="soft_seasonal"] .product-card,
body[data-card-style="soft_seasonal"] .step-card {
  background-color: var(--theme-bg-warm, #FAF8F5) !important;
  border: 1.5px solid rgba(var(--theme-accent-rgb), 0.25) !important;
  border-radius: 16px;
}

body[data-card-style="soft_seasonal"] .category-card:hover,
body[data-card-style="soft_seasonal"] .product-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 22px rgba(var(--theme-accent-rgb), 0.18);
  transform: translateY(-3px);
}

/* ==========================================================================
   6. THEME-SPECIFIC ACCENTS & ATMOSPHERES
   ========================================================================== */

/* Halloween Glow & Accents */
body[data-theme-id="halloween"] .btn-primary {
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4) !important;
}

body[data-theme-id="halloween"] #dynHeroBadge {
  border-color: rgba(249, 115, 22, 0.45);
}

/* Christmas Gold & Starlight */
body[data-theme-id="weihnachten"] .btn-primary {
  box-shadow: 0 4px 22px rgba(245, 158, 11, 0.4) !important;
}

/* Black Friday High-Voltage Energy */
body[data-theme-id="black_friday"] .btn-primary {
  letter-spacing: 0.04em;
  font-weight: 800;
  text-transform: uppercase;
}

/* Valentine Romantic Accents */
body[data-theme-id="valentinstag"] .btn-primary {
  box-shadow: 0 4px 18px rgba(244, 63, 94, 0.35) !important;
}

/* Spring Fresh Accents */
body[data-theme-id="fruehling"] .btn-primary {
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25) !important;
}

/* ==========================================================================
   7. CATEGORY SEASONAL BADGES & CARD MEDIA OVERLAYS
   ========================================================================== */

.category-seasonal-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

body[data-theme-id="halloween"] .category-seasonal-badge {
  background: rgba(249, 115, 22, 0.92);
  color: #FFFFFF;
}

body[data-theme-id="weihnachten"] .category-seasonal-badge {
  background: rgba(220, 38, 38, 0.92);
  color: #FFFFFF;
}

body[data-theme-id="black_friday"] .category-seasonal-badge {
  background: #F59E0B;
  color: #000000;
  font-weight: 900;
}

body[data-theme-id="valentinstag"] .category-seasonal-badge {
  background: rgba(244, 63, 94, 0.92);
  color: #FFFFFF;
}

body[data-theme-id="fruehling"] .category-seasonal-badge {
  background: rgba(34, 197, 94, 0.92);
  color: #FFFFFF;
}

/* ==========================================================================
   8. MULTI-PAGE STOREFRONT STYLING (Category, Product, Cart, Checkout, etc.)
   ========================================================================== */

/* --- Category Page (category.html) --- */
body[data-section-style="dark_immersive"][data-page-type="category"],
body[data-section-style="dark_immersive"] .category-page-wrap {
  background-color: var(--theme-bg-dark, #0B0E14) !important;
  color: #F1F5F9;
}

body[data-section-style="dark_immersive"] .category-page-header {
  background: linear-gradient(180deg, #111522 0%, var(--theme-bg-dark, #0B0E14) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-section-style="dark_immersive"] .cat-heading {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .cat-desc {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .category-sidebar,
body[data-section-style="dark_immersive"] .filter-sidebar,
body[data-section-style="dark_immersive"] .filter-section {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
  border-radius: 12px;
}

body[data-section-style="dark_immersive"] .filter-sidebar .filter-option {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .filter-sidebar input[type="number"],
body[data-section-style="dark_immersive"] .filter-sidebar input[type="text"] {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body[data-section-style="dark_immersive"] .filter-sidebar .filter-group {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .filter-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .cat-sort-select,
body[data-section-style="dark_immersive"] .sort-select {
  background-color: var(--theme-card-dark, #151A24) !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body[data-section-style="dark_immersive"] .product-counter {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .cat-filter-chip {
  background: #1A2130 !important;
  color: #CBD5E1 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body[data-section-style="dark_immersive"] .cat-filter-chip.active {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* --- Product Detail Page (product.html) --- */
body[data-section-style="dark_immersive"][data-page-type="product"],
body[data-section-style="dark_immersive"] .product-page-wrap {
  background-color: var(--theme-bg-dark, #0B0E14) !important;
  color: #F1F5F9;
}

body[data-section-style="dark_immersive"] .breadcrumbs {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .breadcrumbs a {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .breadcrumbs a:hover {
  color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .product-info-box,
body[data-section-style="dark_immersive"] .product-tabs-box,
body[data-section-style="dark_immersive"] .product-reviews-box {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
  border-radius: 16px;
}

body[data-section-style="dark_immersive"] .product-title-heading,
body[data-section-style="dark_immersive"] .tab-btn {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .product-gallery-main {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body[data-section-style="dark_immersive"] .thumb-item {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body[data-section-style="dark_immersive"] .thumb-item.active {
  border-color: var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .option-pill {
  background: #1A2130 !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body[data-section-style="dark_immersive"] .option-pill.active {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}

body[data-section-style="dark_immersive"] .personalization-input,
body[data-section-style="dark_immersive"] .customizer-textarea {
  background-color: #0F131C !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* --- Cart Page (cart.html) — High Contrast & Conversion-focused --- */
body[data-section-style="dark_immersive"][data-page-type="cart"],
body[data-section-style="dark_immersive"] .cart-page-wrap {
  background-color: var(--theme-bg-dark, #0B0E14) !important;
  color: #F1F5F9;
}

body[data-section-style="dark_immersive"] .cart-table-box,
body[data-section-style="dark_immersive"] .cart-summary-box {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

body[data-section-style="dark_immersive"] .cart-row-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .cart-summary-box {
  border-top: 3px solid var(--color-accent) !important;
}

body[data-section-style="dark_immersive"] .cart-summary-row {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .cart-summary-row.total {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] #couponInput {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* --- Checkout Page (checkout.html) — Clean, Trustworthy & Subtle --- */
.checkout-card {
  border-top: 3px solid var(--color-accent) !important;
}

.checkout-option-box.selected {
  border-color: var(--color-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.04) !important;
}

.checkout-step-num {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* --- Account & B2B Pages --- */
body[data-section-style="dark_immersive"][data-page-type="account"],
body[data-section-style="dark_immersive"] .account-wrap,
body[data-section-style="dark_immersive"][data-page-type="b2b"],
body[data-section-style="dark_immersive"] .b2b-layout {
  background-color: var(--theme-bg-dark, #0B0E14) !important;
  color: #F1F5F9;
}

body[data-section-style="dark_immersive"] .auth-box,
body[data-section-style="dark_immersive"] .account-dashboard-card,
body[data-section-style="dark_immersive"] .b2b-form-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

body[data-section-style="dark_immersive"] .auth-input,
body[data-section-style="dark_immersive"] .b2b-input {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* --- Product Detail Page High-Contrast Dark Enhancements --- */
body[data-section-style="dark_immersive"] .product-main-title,
body[data-section-style="dark_immersive"] #productTitle {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .personalization-card,
body[data-section-style="dark_immersive"] #personalizationCard {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

body[data-section-style="dark_immersive"] .pers-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .pers-desc,
body[data-section-style="dark_immersive"] #productShortDesc {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] #customTextInput {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
}

body[data-section-style="dark_immersive"] .upload-box {
  background: #0F131C !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body[data-section-style="dark_immersive"] .upload-box [data-i18n="prod_dropzone_title"] {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .size-btn,
body[data-section-style="dark_immersive"] .size-buttons button {
  background: #151A24 !important;
  color: #F1F5F9 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body[data-section-style="dark_immersive"] .size-btn.active,
body[data-section-style="dark_immersive"] .size-buttons button.active {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}

/* --- Cart & Checkout Dark Immersive Enhancements --- */
body[data-section-style="dark_immersive"] #cartPageGrid > div {
  background-color: var(--theme-card-dark, #151A24) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

body[data-section-style="dark_immersive"] #cartPageGrid h2 {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .checkout-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

body[data-section-style="dark_immersive"] .checkout-option-box {
  background-color: #0F131C !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .checkout-option-box.selected {
  border-color: var(--color-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
}

body[data-section-style="dark_immersive"] .form-input,
body[data-section-style="dark_immersive"] .checkout-input,
body[data-section-style="dark_immersive"] input.form-group {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}



/* ============================================================
   UNIVERSAL MULTI-PAGE SEASONAL STYLING (v2.6)
   Covers Homepage, Category, Product, B2B, Cart, Checkout, Account & Pages
   ============================================================ */

/* Dynamic Category Banner Badge */
.category-seasonal-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  background-color: var(--theme-badge-bg, rgba(var(--theme-accent-rgb), 0.12)) !important;
  color: var(--theme-badge-color, var(--color-accent)) !important;
  border: 1.5px solid var(--color-accent) !important;
  box-shadow: 0 0 14px rgba(var(--theme-accent-rgb), 0.25);
  width: fit-content;
  position: relative;
  z-index: 2;
}

/* Category Atmospheric SVG Overlay */
.category-seasonal-atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* ============================================================
   DARK IMMERSIVE STOREFRONT SYSTEM (Across ALL Pages)
   ============================================================ */

body[data-section-style="dark_immersive"] {
  background-color: var(--theme-bg-dark, #0B0A12) !important;
  color: #F8FAFC !important;
}

/* Site Header in Dark Immersive */
body[data-section-style="dark_immersive"] .site-header {
  background-color: rgba(11, 14, 23, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
  backdrop-filter: blur(12px);
}

body[data-section-style="dark_immersive"] .site-header .brand-name {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .site-header .brand-tagline {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .site-header .nav-icon-link {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .site-header .search-input {
  background-color: #161B26 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

body[data-section-style="dark_immersive"] .site-header .search-dropdown {
  background-color: #161B26 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

/* Navigation Bar */
body[data-section-style="dark_immersive"] .nav-bar {
  background-color: #07090F !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .nav-item a {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .nav-item.active a,
body[data-section-style="dark_immersive"] .nav-item a:hover {
  color: var(--color-accent) !important;
}

/* Page Containers */
body[data-section-style="dark_immersive"] .page-content,
body[data-section-style="dark_immersive"] .category-layout,
body[data-section-style="dark_immersive"] .product-page-wrap,
body[data-section-style="dark_immersive"] .b2b-layout,
body[data-section-style="dark_immersive"] .account-wrap,
body[data-section-style="dark_immersive"] .cart-page-wrap,
body[data-section-style="dark_immersive"] .checkout-page-wrap {
  background: transparent !important;
  color: #F8FAFC;
}

/* Category Page Header */
body[data-section-style="dark_immersive"] .category-page-header {
  background: linear-gradient(180deg, #111522 0%, var(--theme-bg-dark, #0B0E14) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative;
  overflow: hidden;
}

body[data-section-style="dark_immersive"] .cat-heading {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .cat-desc {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .breadcrumbs {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .breadcrumbs a {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .breadcrumbs a:hover {
  color: var(--color-accent) !important;
}

/* Category Products Grid & Product Cards */
body[data-section-style="dark_immersive"] .product-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body[data-section-style="dark_immersive"] .product-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-4px);
}

body[data-section-style="dark_immersive"] .product-card .product-title,
body[data-section-style="dark_immersive"] .product-card h3 {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .product-card .product-desc,
body[data-section-style="dark_immersive"] .product-card .price-tax-note {
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .product-card .price-current {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .product-card .product-media {
  background-color: #0E121B !important;
}

/* Filter Sidebar */
body[data-section-style="dark_immersive"] .filter-sidebar {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .filter-sidebar .filter-title {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .filter-sidebar .filter-option {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .filter-sidebar .filter-group {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-section-style="dark_immersive"] .filter-sidebar input[type="number"],
body[data-section-style="dark_immersive"] .filter-sidebar input[type="text"] {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Sort Select & Counter */
body[data-section-style="dark_immersive"] .cat-sort-select,
body[data-section-style="dark_immersive"] .sort-select {
  background-color: var(--theme-card-dark, #151A24) !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body[data-section-style="dark_immersive"] .product-counter {
  color: #94A3B8 !important;
}

/* B2B Page in Dark Immersive */
body[data-section-style="dark_immersive"] .b2b-hero-banner {
  background: linear-gradient(135deg, #090B12 0%, #151A28 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative;
  overflow: hidden;
}

body[data-section-style="dark_immersive"] .tier-card,
body[data-section-style="dark_immersive"] .inquiry-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .tier-card h3,
body[data-section-style="dark_immersive"] .inquiry-card h3 {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .tier-card p,
body[data-section-style="dark_immersive"] .inquiry-card p {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .inquiry-card input,
body[data-section-style="dark_immersive"] .inquiry-card select,
body[data-section-style="dark_immersive"] .inquiry-card textarea {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Product Detail Page in Dark Immersive */
body[data-section-style="dark_immersive"] .product-main-title,
body[data-section-style="dark_immersive"] #productTitle {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .product-gallery-main,
body[data-section-style="dark_immersive"] .main-image-wrap {
  background-color: var(--theme-card-dark, #151A24) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-section-style="dark_immersive"] .personalization-card,
body[data-section-style="dark_immersive"] #personalizationCard,
body[data-section-style="dark_immersive"] .product-info-box,
body[data-section-style="dark_immersive"] .product-tabs-box,
body[data-section-style="dark_immersive"] .product-reviews-box {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .pers-title,
body[data-section-style="dark_immersive"] .pers-desc,
body[data-section-style="dark_immersive"] #productShortDesc {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] #customTextInput {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
}

body[data-section-style="dark_immersive"] .upload-box {
  background: #0F131C !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Account Page in Dark Immersive */
body[data-section-style="dark_immersive"] .auth-box,
body[data-section-style="dark_immersive"] .dash-menu,
body[data-section-style="dark_immersive"] .dash-card,
body[data-section-style="dark_immersive"] .account-dashboard-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .auth-input,
body[data-section-style="dark_immersive"] .dash-link {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .dash-link:hover,
body[data-section-style="dark_immersive"] .dash-link.active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-accent) !important;
}

/* Cart Page in Dark Immersive */
body[data-section-style="dark_immersive"] #cartPageGrid > div,
body[data-section-style="dark_immersive"] .cart-table-box,
body[data-section-style="dark_immersive"] .cart-summary-box {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] #cartPageGrid h2,
body[data-section-style="dark_immersive"] .cart-summary-row.total {
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .cart-summary-row {
  color: #CBD5E1 !important;
}

/* Checkout Page in Dark Immersive */
body[data-section-style="dark_immersive"] .checkout-card {
  background-color: var(--theme-card-dark, #151A24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] .checkout-option-box {
  background-color: #0F131C !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .checkout-option-box.selected {
  border-color: var(--color-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
}

body[data-section-style="dark_immersive"] .form-input,
body[data-section-style="dark_immersive"] .checkout-input,
body[data-section-style="dark_immersive"] input.form-group {
  background: #0F131C !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Order Success Page in Dark Immersive */
body[data-section-style="dark_immersive"] #successBox,
body[data-section-style="dark_immersive"] #successBox > div {
  background-color: var(--theme-card-dark, #151A24) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

body[data-section-style="dark_immersive"] #successBox h1,
body[data-section-style="dark_immersive"] #dispOrderNumber {
  color: #F8FAFC !important;
}

/* Footer in Dark Immersive */
body[data-section-style="dark_immersive"] .site-footer {
  background-color: #06080E !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

body[data-section-style="dark_immersive"] .site-footer a {
  color: #CBD5E1 !important;
}

body[data-section-style="dark_immersive"] .site-footer a:hover {
  color: var(--color-accent) !important;
}

/* ============================================================
   SEASONAL PANELS (Warm / Festive Storefront System)
   ============================================================ */

body[data-section-style="seasonal_panels"] {
  background-color: var(--theme-bg-warm, #FAF8F5) !important;
}

body[data-section-style="seasonal_panels"] .category-page-header {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--theme-bg-warm, #FAF8F5) 100%) !important;
  border-bottom: 2px solid rgba(var(--theme-accent-rgb), 0.2) !important;
  position: relative;
  overflow: hidden;
}

body[data-section-style="seasonal_panels"] .product-card {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.2) !important;
  box-shadow: 0 4px 14px rgba(var(--theme-accent-rgb), 0.08) !important;
}

body[data-section-style="seasonal_panels"] .product-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 22px rgba(var(--theme-accent-rgb), 0.18) !important;
  transform: translateY(-4px);
}

body[data-section-style="seasonal_panels"] .filter-sidebar {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-section-style="seasonal_panels"] .b2b-hero-banner {
  background: linear-gradient(135deg, #1E293B 0%, var(--color-accent-hover, #0F172A) 100%) !important;
}